Browse Source

Replace jquery with cash-dom

Getty Ritter 9 months ago
parent
commit
7aedf0e952
3 changed files with 24 additions and 18 deletions
  1. 18 12
      js/index.js
  2. 1 1
      package.json
  3. 5 5
      yarn.lock

+ 18 - 12
js/index.js

@@ -1,5 +1,5 @@
 import Tagify from '@yaireo/tagify';
-import $ from 'jquery';
+import $ from 'cash-dom';
 
 let confirmDelete = (url, id) => {
   if ($(`#confirm_${id}`).length > 0) {
@@ -13,12 +13,13 @@ let confirmDelete = (url, id) => {
            <a id="cancel_delete_${id}" class="deletelink">no</a>
          </span>`);
   $(document).on('click', `a#do_delete_${id}`, function() {
-    var req = new XMLHttpRequest();
-    req.addEventListener("load", function() {
-      $(`#link_${id}`).remove();
-    });
-    req.open("DELETE", url);
-    req.send();
+    fetch(url, {
+      method: 'DELETE',
+      headers: {'Content-Type': 'application/json'},
+      body: 'null',
+    }).then(response => response.text())
+      .then(response => { $(`#link_${id}`).remove()})
+      .catch(err => console.log(err));
   });
   $(document).on('click', `a#cancel_delete_${id}`, function() {
     $(`#confirm_${id}`).remove();
@@ -26,18 +27,23 @@ let confirmDelete = (url, id) => {
 };
 
 document.addEventListener("DOMContentLoaded", () => {
-  for (let link of document.getElementsByClassName('deletelink')) {
-    link.onclick = (event) => {
+  $(".deletelink").each((idx, elem) => {
+    $(elem).on("click", (event) => {
       confirmDelete(event.target.dataset.url, event.target.dataset.linkId);
-    }
-  }
+    });
+  });
+  // for (let link of document.getElementsByClassName('deletelink')) {
+  //   link.onclick = (event) => {
+  //     confirmDelete(event.target.dataset.url, event.target.dataset.linkId);
+  //   }
+  // }
 
   let input = document.querySelector('.tagtest');
   if (input) {
     let tags = new Tagify(input);
 
     let form = $("form[name=\"edit_link\"]")
-    form.submit(event => {
+    form.on('submit', event => {
       event.preventDefault();
       let url = form.attr("action");
       let body = {

+ 1 - 1
package.json

@@ -11,6 +11,6 @@
   },
   "dependencies": {
     "@yaireo/tagify": "^3.22.0",
-    "jquery": "^3.5.1"
+    "cash-dom": "^8.1.0"
   }
 }

+ 5 - 5
yarn.lock

@@ -237,6 +237,11 @@ caniuse-lite@^1.0.30001173:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001177.tgz#2c3b384933aafda03e29ccca7bb3d8c3389e1ece"
   integrity sha512-6Ld7t3ifCL02jTj3MxPMM5wAYjbo4h/TAQGFTgv1inihP1tWnWp8mxxT4ut4JBEHLbpFXEXJJQ119JCJTBkYDw==
 
+cash-dom@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/cash-dom/-/cash-dom-8.1.0.tgz#ed8e278231c071b6596618131bd4320c57d32a31"
+  integrity sha512-QTa50rFuPaX8klEDEbwLr+jVutwpvZEBQ0NpMMyng+je7gNe9Bz/JsOLHIG24tvNSSSIN/Q1QD0bnF6PQzWKHA==
+
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -455,11 +460,6 @@ jest-worker@^26.6.2:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-jquery@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5"
-  integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==
-
 json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"