wip

baumrock · Mar 29, 2024 · 9a174dc · 9a174dc
1 parent a5ec068
commit 9a174dc
Showing 2 changed files with 113 additions and 22 deletions.
diff --git a/consenty.js b/consenty.js
@@ -1,6 +1,8 @@
 var consenty;
 (() => {
   class Consenty {
+    elements = {};
+
     allow(prop) {
       this.save(prop, true);
     }
@@ -20,6 +22,8 @@ var consenty;
 
     handleChange(e) {
       const el = e.target;
+
+      // handle checkbox toggle
       if (el.type === "checkbox" && el.hasAttribute("consenty-toggle")) {
         const prop = el.getAttribute("consenty-toggle");
         if (el.checked) this.allow(prop);
@@ -30,9 +34,11 @@ var consenty;
     handleClick(e) {
       let el;
       if ((el = e.target.closest("[consenty-allow]"))) {
+        // clicked on element with allow attribute
         const prop = el.getAttribute("consenty-allow");
         this.allow(prop);
       } else if ((el = e.target.closest("[consenty-revoke]"))) {
+        // clicked on element with revoke attribute
         const prop = el.getAttribute("consenty-revoke");
         this.revoke(prop);
       }
@@ -93,6 +99,23 @@ var consenty;
     }
 
     toggleIFs() {
+      document.querySelectorAll("[consenty-if]").forEach((el) => {
+        if (el.hasAttribute("data-consenty-id")) return;
+        let ref = { old: el, new: false };
+        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;
+      });
+
       // document.querySelectorAll("[consenty-ifallowed]").forEach((el) => {
       //   let prop = el.getAttribute("consenty-ifallowed");
       //   if (this.hasConsent(prop)) this.showIF(el);

diff --git a/index.html b/index.html
@@ -27,6 +27,10 @@
       h3 {
         margin-top: 0;
       }
+      .code {
+        border: 2px solid #efefef;
+        padding: 10px;
+      }
     </style>
   </head>
   <body class="uk-padding-small">
@@ -69,9 +73,70 @@ <h2>Setup</h2>
 
         <h2>Hello World</h2>
 
+        <div class="uk-margin code">
+          <button
+            class="uk-button"
+            consenty-allow="hello-world"
+          >
+            ALLOW
+          </button>
+          <button
+            class="uk-button"
+            consenty-revoke="hello-world"
+          >
+            REVOKE
+          </button>
+          <div class="uk-margin-small-top">
+            <span consenty-if="hello-world">allowed</span>
+            <span consenty-if="!hello-world">revoked</span>
+          </div>
+        </div>
+
+        <div class="uk-text-small">
+          Note: Try reloading the page and see that the state persists!
+        </div>
+
         <hr />
 
-        <h2>IF on multiple elements</h2>
+        <h2>Script Example</h2>
+
+        <p>
+          The example above has one caveat: If you put a script-tag inside one
+          of the &lt;span&gt;-tags that script would either immediately get
+          executed or if using a src-attribute load the script from the given
+          source. The idea of consenty is to prevent this, so you can simply use
+          the &lt;template&gt;-tag instead:
+        </p>
+
+        <div class="uk-margin code">
+          <button
+            class="uk-button"
+            consenty-allow="script-example"
+          >
+            ALLOW
+          </button>
+          <button
+            class="uk-button"
+            consenty-revoke="script-example"
+          >
+            REVOKE
+          </button>
+          <template consenty-if="script-example">
+            <script>
+              alert("script loaded, check your console!");
+              console.log("script example allowed");
+            </script>
+          </template>
+          <template consenty-if="!script-example">
+            <script>
+              console.log("script example revoked");
+            </script>
+          </template>
+        </div>
+
+        <hr />
+
+        <h2>YouTube Example</h2>
 
         <hr />
 
@@ -126,28 +191,31 @@ <h3>change</h3>
           </script>
         </div>
 
-        <script type="module">
-          import { codeToHtml } from "https://esm.sh/shiki@1.0.0";
-          document.querySelectorAll(".code").forEach((element) => {
-            const div = document.createElement("div");
-            element.after(div);
-
-            // sanitize html
-            let code = element.innerHTML;
-            let lines = code.split("\n").slice(1, -1);
-            const spaces = lines[0].search(/</);
-            code = lines.map((line) => line.substring(spaces)).join("\n");
-
-            codeToHtml(code, { lang: "html", theme: "nord" })
-              .then((highlightedCode) => {
-                div.innerHTML = highlightedCode;
-              })
-              .catch((error) => {
-                console.error("Error highlighting code with Shiki:", error);
-              });
-          });
-        </script>
+        <hr />
+
+        <h2>IF on multiple elements</h2>
       </div>
     </div>
+    <script type="module">
+      import { codeToHtml } from "https://esm.sh/shiki@1.0.0";
+      document.querySelectorAll(".code").forEach((element) => {
+        const div = document.createElement("div");
+        element.after(div);
+
+        // sanitize html
+        let code = element.innerHTML;
+        let lines = code.split("\n").slice(1, -1);
+        const spaces = lines[0].search(/</);
+        code = lines.map((line) => line.substring(spaces)).join("\n");
+
+        codeToHtml(code, { lang: "html", theme: "nord" })
+          .then((highlightedCode) => {
+            div.innerHTML = highlightedCode;
+          })
+          .catch((error) => {
+            console.error("Error highlighting code with Shiki:", error);
+          });
+      });
+    </script>
   </body>
 </html>