fix alpine-js stuffs blocked by csp

fet2020/static/js/alpine-csp.js

@@ -1605,6 +1605,45 @@
     }
     var module_default = src_default;
   
+    // packages/persist/dist/module.esm.js
+    function src_default2(Alpine2) {
+      let persist = () => {
+        let alias;
+        let storage = localStorage;
+        return Alpine2.interceptor((initialValue, getter, setter, path, key) => {
+          let lookup = alias || `_x_${path}`;
+          let initial = storageHas(lookup, storage) ? storageGet(lookup, storage) : initialValue;
+          setter(initial);
+          Alpine2.effect(() => {
+            let value = getter();
+            storageSet(lookup, value, storage);
+            setter(value);
+          });
+          return initial;
+        }, (func) => {
+          func.as = (key) => {
+            alias = key;
+            return func;
+          }, func.using = (target) => {
+            storage = target;
+            return func;
+          };
+        });
+      };
+      Object.defineProperty(Alpine2, "$persist", {get: () => persist()});
+      Alpine2.magic("persist", persist);
+    }
+    function storageHas(key, storage) {
+      return storage.getItem(key) !== null;
+    }
+    function storageGet(key, storage) {
+      return JSON.parse(storage.getItem(key, storage));
+    }
+    function storageSet(key, value, storage) {
+      storage.setItem(key, JSON.stringify(value));
+    }
+    var module_default2 = src_default2;
+  
     // node_modules/@vue/shared/dist/shared.esm-bundler.js
     function makeMap(str, expectsLowerCase) {
       const map = Object.create(null);
@@ -3068,8 +3107,9 @@
       };
       return tryCatch.bind(null, el, expression, evaluator);
     }
-    var src_default2 = alpine_default;
+    var src_default3 = alpine_default;
     alpine_default.plugin(module_default);
+    alpine_default.plugin(module_default2);
     alpine_default.data("counter", () => ({
       count: 0,
       increment() {
@@ -3097,78 +3137,85 @@
         }
       }
     }));
-    alpine_default.data("modal", () => ({
+    document.addEventListener("alpine:init", () => {
-      showModal: false,
+      alpine_default.data("modal", () => ({
-      selectedYear: "",
+        showModal: false,
-      getShowModal() {
+        selectedYear: "",
-        if (screen.width >= 640) {
+        getShowModal() {
-          this.$refs.overflow.classList.add("overflow-y-hidden");
+          if (screen.width >= 640) {
-          this.$refs.overflow.classList.add("sm:overflow-y-auto");
+            this.$refs.overflow.classList.add("overflow-y-hidden");
-          return true;
+            this.$refs.overflow.classList.add("sm:overflow-y-auto");
+            return true;
+          }
+          return this.showModal;
+        },
+        getNotShowModal() {
+          return !this.showModal;
+        },
+        toggle() {
+          this.showModal = !this.showModal;
+          this.setClass();
+        },
+        openModal() {
+          this.showModal = true;
+          this.setClass();
+        },
+        closeModal() {
+          this.showModal = false;
+          this.setClass();
+        },
+        setClass() {
+          if (this.getShowModal() == false) {
+            this.$refs.overflow.classList.remove("overflow-y-hidden");
+            this.$refs.overflow.classList.remove("sm:overflow-y-auto");
+          } else {
+            this.$refs.overflow.classList.add("overflow-y-hidden");
+            this.$refs.overflow.classList.add("sm:overflow-y-auto");
+          }
+        },
+        setSelectedYear(year) {
+          this.selectedYear = year;
+        },
+        getSelectedYear() {
+          if (this.selectedYear != "") {
+            return true;
+          }
+          return false;
+        },
+        getYear() {
+          return this.selectedYear;
         }
-        return this.showModal;
+      }));
-      },
+    });
-      getNotShowModal() {
-        return !this.showModal;
-      },
-      toggle() {
-        this.showModal = !this.showModal;
-        this.setClass();
-      },
-      openModal() {
-        this.showModal = true;
-        this.setClass();
-      },
-      closeModal() {
-        this.showModal = false;
-        this.setClass();
-      },
-      setClass() {
-        if (this.getShowModal() == false) {
-          this.$refs.overflow.classList.remove("overflow-y-hidden");
-          this.$refs.overflow.classList.remove("sm:overflow-y-auto");
-        } else {
-          this.$refs.overflow.classList.add("overflow-y-hidden");
-          this.$refs.overflow.classList.add("sm:overflow-y-auto");
-        }
-      },
-      setSelectedYear(year) {
-        this.selectedYear = year;
-      },
-      getSelectedYear() {
-        if (this.selectedYear != "") {
-          return true;
-        }
-        return false;
-      }
-    }));
     alpine_default.data("infoBox", () => ({
       consent: true,
       closeBox() {
         this.consent = false;
       }
     }));
-    alpine_default.data("myNavBar", () => ({
+    document.addEventListener("alpine:init", () => {
-      showNavBar: false,
+      alpine_default.data("myNavBar", () => ({
-      toggleShowNavBar() {
+        showNavBar: false,
-        this.showNavBar = !this.showNavBar;
+        toggleShowNavBar() {
-      },
+          this.showNavBar = !this.showNavBar;
-      closeShowNavBar() {
+        },
-        this.showNavBar = false;
+        closeShowNavBar() {
-      },
+          this.showNavBar = false;
-      getShowNavBarMd() {
+        },
-        if (screen.width >= 766) {
+        getShowNavBarMd() {
-          this.showNavBar = true;
+          if (screen.width >= 766) {
+            this.showNavBar = true;
+          }
+          return this.showNavBar;
+        },
+        getShowNavBarLg() {
+          if (screen.width >= 1024) {
+            return this.showNavBar = true;
+          }
+          return this.showNavBar;
         }
-        return this.showNavBar;
+      }));
-      },
+    });
-      getShowNavBarLg() {
-        if (screen.width >= 1024) {
-          return this.showNavBar = true;
-        }
-        return this.showNavBar;
-      }
-    }));
     alpine_default.data("popupNav", () => ({
       showPopupNav: false,
       toggleShowPopupNav() {
@@ -3268,6 +3315,36 @@
         }
       }
     }));
+    document.addEventListener("alpine:init", () => {
+      alpine_default.data("internExpandList", () => ({
+        expandList: false,
+        toggleExpandList() {
+          this.expandList = !this.expandList;
+          this.setClass();
+        },
+        openExpandList() {
+          this.expandList = true;
+          this.setClass();
+        },
+        closeExpandList() {
+          this.expandList = false;
+          this.setClass();
+        },
+        getExpandList() {
+          return this.expandList;
+        },
+        getNotExpandList() {
+          return !this.expandList;
+        },
+        setClass() {
+          if (this.getExpandList() == false) {
+            this.$refs.rotate.classList.remove("rotate-90");
+          } else {
+            this.$refs.rotate.classList.add("rotate-90");
+          }
+        }
+      }));
+    });
     alpine_default.data("pin", () => ({
       showPin: true,
       openShowPin() {
@@ -3282,9 +3359,9 @@
     }));
   
     // packages/csp/builds/cdn.js
-    window.Alpine = src_default2;
+    window.Alpine = src_default3;
     queueMicrotask(() => {
-      src_default2.start();
+      src_default3.start();
     });
   })();
   

fet2020/templates/intern/index.html

@@ -9,16 +9,16 @@
     <div class="flex flex-col gap-y-4 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
         {% regroup topic by topic_group as topic_group_list %}
         {% for topic_group in topic_group_list %}
-            <section x-data="{ expandList: $persist(true).as('expandListState-{{ topic_group.grouper.title }}') }">
+            <section x-data="internExpandList">
                 <div class="flex gap-x-6">
-                    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 cursor-pointer" @click="expandList = ! expandList">
+                    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 cursor-pointer" @click="toggleExpandList">
                         <i class="fa-fw fa-solid fa-angle-right transition transform origin-center"
-                        :class="expandList ? 'rotate-90' : ''"
+                            x-ref="rotate"
                         ></i>
                         {{ topic_group.grouper.title }}
                     </h2>
                     <button class="border border-gray-700 dark:border-gray-300 rounded px-1.5 text-sm hidden sm:block"
-                        x-show="expandList"
+                        x-show="getExpandList"
                         x-transition:enter="transition ease-out duration-300"
                         x-transition:enter-start="transform origin-top opacity-0 -translate-x-6"
                         x-transition:enter-end="transform origin-top opacity-100 translate-x-0"
@@ -27,7 +27,7 @@
                         x-transition:leave-end="transform origin-top opacity-0 -translate-x-6"
                     ><a href="{% url 'intern:topic-create' topic_group.grouper.slug %}"><i class="fa-solid fa-plus mr-1"></i>Eintrag hinzufügen</a></button>
                 </div>
-                <ul class="ml-7 w-fit" x-show="expandList" x-collapse>
+                <ul class="ml-7 w-fit" x-show="getExpandList" x-collapse>
                     {% for topic in topic_group.list %}
                         <li><a href="{% url 'intern:topic' topic.topic_group.slug topic.slug %}" class="w-full py-1 inline-block">{{ topic.title }}</a></li>
                     {% endfor %}
@@ -41,11 +41,11 @@
         {% endfor %}
 
         {% for topic_group in empty_topic_groups %}
-            <section x-data="{ expandList: $persist(true).as('expandListState-{{ topic_group.title }}') }">
+            <section x-data="internExpandList">
                 <div class="flex gap-x-6">
-                    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 cursor-pointer" @click="expandList = ! expandList">
+                    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 cursor-pointer" @click="toggleExpandList">
                         <i class="fa-fw fa-solid fa-angle-right transition transform origin-center"
-                        :class="expandList ? 'rotate-90' : ''"
+                            xref="rotate"
                         ></i>
                         {{ topic_group.title }}
                     </h2>
@@ -59,7 +59,7 @@
                         x-transition:leave-end="transform origin-top opacity-0 -translate-x-6"
                     ><a href="{% url 'intern:topic-create' topic_group.slug %}"><i class="fa-solid fa-plus mr-1"></i>Eintrag hinzufügen</a></button>
                 </div>
-                <ul class="ml-7 w-fit" x-show="expandList" x-collapse>
+                <ul class="ml-7 w-fit" x-show="getExpandList" x-collapse>
                     <li class="py-1">
                         <a href="{% url 'intern:topic-create' topic_group.slug %}" class="border border-gray-700 dark:border-gray-300 rounded px-1.5 py-1 text-sm sm:hidden">
                             <i class="fa-solid fa-plus mr-1"></i>Eintrag hinzufügen
@@ -70,16 +70,16 @@
         {% endfor %}
 
         {% if archive_topic %}
-            <section x-data="{ expandList: $persist(true).as('expandListState-Archive') }">
+            <section x-data="internExpandList">
                 <div class="flex gap-x-6">
-                    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 cursor-pointer" @click="expandList = ! expandList">
+                    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 cursor-pointer" @click="toggleExpandList">
                         <i class="fa-fw fa-solid fa-angle-right transition transform origin-center"
-                        :class="expandList ? 'rotate-90' : ''"
+                            xref="rotate"
                         ></i>
                         Archiv
                     </h2>
                 </div>
-                <ul class="ml-7 w-fit" x-show="expandList" x-collapse>
+                <ul class="ml-7 w-fit" x-show="getExpandList" x-collapse>
                     {% for topic in archive_topic %}
                         <li><a href="{% url 'intern:topic' topic.topic_group.slug topic.slug %}" class="w-full py-1 inline-block">{{ topic.title }}</a></li>
                     {% endfor %}