basic version working

baumrock · Mar 29, 2024 · 1092a18 · 1092a18
1 parent 9a174dc
commit 1092a18
Show file tree

Hide file tree

Showing 2 changed files with 208 additions and 167 deletions.
diff --git a/consenty.js b/consenty.js
@@ -49,9 +49,17 @@ var consenty;
       return storage && name in storage ? !!storage[name] : false;
     }
 
+    hideElement(id) {
+      const element = this.elements[id];
+      if (element.new) {
+        element.new.remove();
+        element.new = false;
+        this.elements[id] = element;
+      }
+    }
+
     init() {
-      this.toggleIFs();
-      this.initCheckboxes();
+      this.reload();
       document.dispatchEvent(new CustomEvent("consenty:init"));
     }
 
@@ -63,6 +71,11 @@ var consenty;
       });
     }
 
+    reload() {
+      this.toggleIFs();
+      this.initCheckboxes();
+    }
+
     revoke(prop) {
       this.save(prop, false);
     }
@@ -100,35 +113,46 @@ var consenty;
 
     toggleIFs() {
       document.querySelectorAll("[consenty-if]").forEach((el) => {
-        if (el.hasAttribute("data-consenty-id")) return;
-        let ref = { old: el, new: false };
+        // get or set id of this element for later use
+        let id;
+        if (!el.hasAttribute("data-consenty-id")) {
+          id = Object.keys(this.elements).length + 1;
+          this.elements[id] = { old: el, new: false };
+          el.setAttribute("data-consenty-id", id);
+        } else {
+          id = el.getAttribute("data-consenty-id");
+        }
+
+        // get property name and type
         const rawprop = el.getAttribute("consenty-if");
         const type = rawprop.startsWith("!") ? "hideif" : "showif";
         let prop = type === "showif" ? rawprop : rawprop.substring(1);
 
-        const id = Object.keys(this.elements).length + 1;
-        el.setAttribute("data-consenty-id", id);
-
-        // let newDiv = document.createElement("div");
-        // el.parentNode.insertBefore(newDiv, el);
-        // newDiv.append(el.content.cloneNode(true));
-
-        this.elements[id] = ref;
+        // toggle element / code
+        if (type === "showif") {
+          if (this.hasConsent(prop)) this.showElement(id);
+          else this.hideElement(id);
+        } else {
+          if (this.hasConsent(prop)) this.hideElement(id);
+          else this.showElement(id);
+        }
       });
+    }
 
-      // document.querySelectorAll("[consenty-ifallowed]").forEach((el) => {
-      //   let prop = el.getAttribute("consenty-ifallowed");
-      //   if (this.hasConsent(prop)) this.showIF(el);
-      //   else this.hideIF(el);
-      // });
-      // document.querySelectorAll("[consenty-ifrevoked]").forEach((el) => {
-      //   let prop = el.getAttribute("consenty-ifrevoked");
-      //   if (this.hasConsent(prop)) this.hideIF(el);
-      //   else this.showIF(el);
-      //   // let newDiv = document.createElement("div");
-      //   // el.parentNode.insertBefore(newDiv, el);
-      //   // newDiv.append(el.content.cloneNode(true));
-      // });
+    showElement(id) {
+      const element = this.elements[id];
+      if (!element.new) {
+        let tagName = element.old.tagName.toLowerCase();
+        if (tagName === "template") {
+          let newDiv = document.createElement("div");
+          let el = element.old;
+          el.parentNode.insertBefore(newDiv, el.nextSibling);
+          newDiv.appendChild(document.importNode(el.content, true));
+          element.new = newDiv;
+          this.elements[id] = element;
+          this.reload();
+        }
+      }
     }
   }