fix alpine-js stuffs blocked by csp

2022-11-29 10:06:04 +00:00
parent a62ec0c2cb
commit a8c52bdf7b
2 changed files with 157 additions and 80 deletions
--- a/fet2020/static/js/alpine-csp.js
+++ b/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,6 +3137,7 @@
        }
      }
    }));
+    document.addEventListener("alpine:init", () => {
      alpine_default.data("modal", () => ({
        showModal: false,
        selectedYear: "",
@@ -3140,14 +3181,19 @@
            return true;
          }
          return false;
+        },
+        getYear() {
+          return this.selectedYear;
        }
      }));
+    });
    alpine_default.data("infoBox", () => ({
      consent: true,
      closeBox() {
        this.consent = false;
      }
    }));
+    document.addEventListener("alpine:init", () => {
      alpine_default.data("myNavBar", () => ({
        showNavBar: false,
        toggleShowNavBar() {
@@ -3169,6 +3215,7 @@
          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();
    });
  })();
  
--- a/fet2020/templates/intern/index.html
+++ b/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 %}