add alpine-js stuffs blocked by csp

fet2020/static/js/alpine-csp.js

@@ -3108,6 +3108,9 @@
         }
         return this.showModal;
       },
+      getNotShowModal() {
+        return !this.showModal;
+      },
       toggle() {
         this.showModal = !this.showModal;
         this.setClass();
@@ -3155,7 +3158,7 @@
       },
       getShowNavBarMd() {
         if (screen.width >= 766) {
-          return this.showNavBar = true;
+          this.showNavBar = true;
         }
         return this.showNavBar;
       },
@@ -3166,7 +3169,7 @@
         return this.showNavBar;
       }
     }));
-    alpine_default.data("PopupNav", () => ({
+    alpine_default.data("popupNav", () => ({
       showPopupNav: false,
       toggleShowPopupNav() {
         this.showPopupNav = !this.showPopupNav;
@@ -3180,9 +3183,9 @@
         }
         return this.showPopupNav;
       },
-      getScreenLg() {
+      getNotScreenLg() {
         if (screen.width >= 1024) {
-          return true;
+          return false;
         }
       }
     }));
@@ -3198,6 +3201,85 @@
         return this.showSearch;
       }
     }));
+    alpine_default.data("prevArticleButton", () => ({
+      showPrevArticleButton: false,
+      openShowPrevArticleButton() {
+        this.showPrevArticleButton = true;
+      },
+      closeShowPrevArticleButton() {
+        this.showPrevArticleButton = false;
+      },
+      getShowPrevArticleButton() {
+        return this.showPrevArticleButton;
+      }
+    }));
+    alpine_default.data("nextArticleButton", () => ({
+      showNextArticleButton: false,
+      openShowNextArticleButton() {
+        this.showNextArticleButton = true;
+      },
+      closeShowNextArticleButton() {
+        this.showNextArticleButton = false;
+      },
+      getShowNextArticleButton() {
+        return this.showNextArticleButton;
+      }
+    }));
+    alpine_default.data("options", () => ({
+      showOptions: false,
+      openShowOptions() {
+        this.showOptions = true;
+      },
+      closeShowOptions() {
+        this.showOptions = false;
+      },
+      getShowOptions() {
+        if (screen.width >= 766) {
+          this.showOptions = true;
+        }
+        return this.showOptions;
+      }
+    }));
+    alpine_default.data("memberExpandList", () => ({
+      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() {
+        this.showPin = true;
+      },
+      closeShowPin() {
+        this.showPin = false;
+      },
+      getShowPin() {
+        return this.showPin;
+      }
+    }));
   
     // packages/csp/builds/cdn.js
     window.Alpine = src_default2;

fet2020/templates/base.html

@@ -87,7 +87,7 @@
                     {% else %}
                         <hr class="border-proprietary">
                         <div href="#" class="navbar-subcontent"
-                            x-data="PopupNav"
+                            x-data="popupNav"
                             @click.outside="closeShowPopupNav"
                         >
                             <div class="navbar-subcontentButton">
@@ -116,7 +116,7 @@
                                 <li class="navInternal"><a href="{% url 'intern:index' %}"><i class="fa-fw fa-solid fa-database mr-2"></i>Intern</a></li>
                                 <li class="navInternal"><a href="https://legacy.fet.at/home/intern"><i class="fa-fw fa-solid fa-box-archive mr-2"></i>Legacy</a></li>
                                 <li class="navInternal"
-                                    x-show="!getScreenLg"
+                                    x-show="getNotScreenLg"
                                 ><a href="{% url 'authentications:logout' %}?next={{ request.path }}"><i class="fa-fw fa-solid fa-power-off mr-2"></i>Abmelden</a></li>
                             </div>
                         </div>

fet2020/templates/members/index.html

@@ -92,7 +92,7 @@
                 </div>
                 <button class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden" 
 					@click="openModal"
-                    x-show="!getShowModal"
+                    x-show="getNotShowModal"
                     x-transition:enter="transition duration-100 ease-in"
                     x-transition:enter-start="opacity-0"
                     x-transition:enter-end="opacity-100"

fet2020/templates/members/member.html

@@ -16,7 +16,7 @@
         <!-- Alternativtext auf jede Person anpassen: Name im alt="" dynamisch erzeugen -->
         <div>
         <img loading="lazy" src="{{ member.image.portrait.url }}" alt="Portraitfoto von {{ member.firstname }} {{ member.surname }}" class="md:float-left w-36 mr-2 mb-2">
-        <div x-data="{ expandList: false }">
+        <div>
             <h2 class="mb-2 text-lg text-gray-900 dark:text-gray-100 text-left">{{ member.firstname }} {{ member.surname }}</h2>
             <div class="mb-2">
                 Spitzname: {{ member.nickname }}<br>
@@ -27,15 +27,15 @@
             </div>
         </div>
         {% if active_jobs or inactive_jobs %}
-            <div x-data="{ expandList: false }" class="clear-left">
+            <div x-data="memberExpandList" class="clear-left">
                 <h3 class="group mt-4 mb-2 text-lg text-gray-900 dark:text-gray-100">Ehrenamtliche Tätigkeiten:
                     {% if inactive_jobs %}
                         <button class="inline float-right text-sm px-2 py-1 text-gray-600 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-400 border rounded border-gray-500 dark:border-gray-500 md:border-gray-400 dark:md:border-gray-600 group-hover:border-gray-500 dark:group-hover:border-gray-500"
-                            @click="expandList = ! expandList"
+                            @click="toggleExpandList"
                         >
-                            <span x-show="!expandList">Mehr</span><span x-show="expandList">Weniger</span><span class="hidden md:inline"> anzeigen</span>
+                            <span x-show="getNotExpandList">Mehr</span><span x-show="getExpandList">Weniger</span><span class="hidden md:inline"> anzeigen</span>
                             <i class="fa-fw fa-solid fa-angle-left transition transform -ml-1"
-                                :class="expandList ? '-rotate-90' : ''"
+                                x-ref="rotate"
                             ></i>
                         </button>
                     {% endif %}
@@ -50,7 +50,7 @@
                     {% endfor %}
                 </ul>
                 <ul class="flex flex-col gap-1 mt-1"
-                    x-show="expandList"
+                    x-show="getExpandList"
                     x-transition:enter="transition duration-100 ease-in"
                     x-transition:enter-start="opacity-0"
                     x-transition:enter-end="opacity-100"

fet2020/templates/posts/index.html

@@ -97,7 +97,7 @@
 				</div>
 				<button id="modal-trigger-1" class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden" 
 					@click="openModal"
-					x-show="!getShowModal"
+					x-show="getNotShowModal"
 					x-transition:enter="transition duration-100 ease-in"
 					x-transition:enter-start="opacity-0"
 					x-transition:enter-end="opacity-100"

fet2020/templates/posts/partials/_posts_pinned.html

@@ -2,12 +2,12 @@
     <div class="article-cover-desc">
         <div class="article-cover-desc-items">
             <div class="absolute rounded-full px-2 py-1 bg-gray-800 text-gray-200 bg-opacity-90 capitalize"
-                x-data="{ pin: true }"
+                x-data="pin"
-                @mouseover="pin = true"
+                @mouseover="openShowPin"
-                @mouseover.away="pin = false"
+                @mouseover.away="closeShowPin"
             >
                 <i class="fa-solid fa-thumbtack rotate-45 mx-0.5"></i>
-                <span class="ml-0.5" x-show="pin">Angepinnt</span>
+                <span class="ml-0.5" x-show="getShowPin">Angepinnt</span>
             </div>
             <ul class="article-cover-tags">
                 {% for t in post.three_tag_names %}

fet2020/templates/posts/show.html

@@ -16,13 +16,13 @@
 	<!-- Main Content -->
 	<main class="container mx-auto w-full flex-1 my-8 sm:flex flex-col sm:px-4">
 		<a href="{% url 'posts:show' previous %}" class="hidden z-20 fixed left-0 top-1/2 -mt-8 p-2 xl:flex items-center text-gray-400 dark:text-gray-300 rounded-md"
-        x-data="{ showPrevArticleButton : false }"
+        x-data="prevArticleButton"
-        @mouseleave="showPrevArticleButton = false"
+        @mouseleave="closeShowPrevArticleButton"
-        @mouseover="showPrevArticleButton = true"
+        @mouseover="openShowPrevArticleButton"
     >
         <i class="fa-solid fa-chevron-left text-5xl -m-2 p-2 bg-gray-100 dark:bg-gray-700 rounded-md"></i>
         <span class="text-gray-600 dark:text-gray-300 font-medium bg-gray-100 dark:bg-gray-700 -m-2 p-2 rounded-r-md origin-left"
-            x-show="showPrevArticleButton"
+            x-show="getShowPrevArticleButton"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 bg-opacity-0 transform scale-90"
     x-transition:enter-end="opacity-100 transform scale-100"
@@ -32,12 +32,12 @@
         >Vorheriger<br>Artikel</span>
     </a>
     <a href="{% url 'posts:show' next %}" class="hidden z-20 fixed right-0 top-1/2 -mt-8 p-2 xl:flex items-center text-gray-400 dark:text-gray-300 rounded-md"
-        x-data="{ showNextArticleButton : false }"
+        x-data="nextArticleButton"
-        @mouseleave="showNextArticleButton = false"
+        @mouseleave="closeShowNextArticleButton"
-        @mouseover="showNextArticleButton = true"
+        @mouseover="openShowNextArticleButton"
     >
         <span class="z-30 text-gray-600 dark:text-gray-300 font-medium bg-gray-100 dark:bg-gray-700 -m-2 p-2 rounded-l-md text-right origin-right"
-            x-show="showNextArticleButton"
+            x-show="getShowNextArticleButton"
 				x-transition:enter="transition ease-out duration-300"
 				x-transition:enter-start="opacity-0 bg-opacity-0 transform scale-90"
 				x-transition:enter-end="opacity-100 transform scale-100"
@@ -188,15 +188,15 @@
 
                 {% if request.user.is_authenticated %}
                     {% if post.has_agenda %}
-                        <div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="{ showOptions: false }">
+                        <div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="options">
                             <span class="flex-1">Agenda</span>
                             <div class="relative">
-                                <button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="showOptions = true">
+                                <button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="openShowOptions">
                                     <i class="fa-solid fa-ellipsis-vertical fa-fw"></i>
                                 </button>
                                 <ul class="z-10 absolute top-0 right-0 sm:flex flex-row sm:static flex-none border dark:border-2 border-gray-300 dark:border-gray-700 rounded divide-y-2 sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-700 bg-gray-100 dark:bg-gray-800 shadow sm:bg-transparent sm:shadow-none"
-                                    @click.outside="showOptions = false"
+                                    @click.outside="closeShowOptions"
-                                    x-show="showOptions || $screen('sm')"
+                                    x-show="getShowOptions"
                                     x-transition:enter="transition ease-out duration-300"
                                     x-transition:enter-start="transform origin-right opacity-0 scale-95"
                                     x-transition:enter-end="transform origin-right opacity-100 scale-100"
@@ -224,15 +224,15 @@
                     {% endif %}
 
                     {% if post.has_protocol %}
-                        <div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="{ showOptions: false }">
+                        <div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="options">
                             <span class="flex-1">Protokoll</span>
                             <div class="relative">
-                                <button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="showOptions = true">
+                                <button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="openShowOptions">
                                     <i class="fa-solid fa-ellipsis-vertical fa-fw"></i>
                                 </button>
                                 <ul class="z-10 absolute top-0 right-0 sm:flex flex-row sm:static flex-none border dark:border-2 border-gray-300 dark:border-gray-700 rounded divide-y-2 sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-700 bg-gray-100 dark:bg-gray-800 shadow sm:bg-transparent sm:shadow-none"
-                                    @click.outside="showOptions = false"
+                                    @click.outside="closeShowOptions"
-                                    x-show="showOptions || $screen('sm')"
+                                    x-show="getShowOptions"
                                     x-transition:enter="transition ease-out duration-300"
                                     x-transition:enter-start="transform origin-right opacity-0 scale-95"
                                     x-transition:enter-end="transform origin-right opacity-100 scale-100"
@@ -261,15 +261,15 @@
                     {% if post.post_type == 'F' %}
                         {% get_flatpages '/bs/' for user as pages %}
                         {% if pages %}
-                            <div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="{ showOptions: false }">
+                            <div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="options">
                                 <span class="flex-1">{{ pages.first.title }}</span>
                                 <div class="relative">
-                                    <button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="showOptions = true">
+                                    <button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="openShowOptions">
                                         <i class="fa-solid fa-ellipsis-vertical fa-fw"></i>
                                     </button>
                                     <ul class="z-10 absolute top-0 right-0 sm:flex flex-row sm:static flex-none border dark:border-2 border-gray-300 dark:border-gray-700 rounded divide-y-2 sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-700 bg-gray-100 dark:bg-gray-800 shadow sm:bg-transparent sm:shadow-none"
-                                        @click.outside="showOptions = false"
+                                        @click.outside="closeShowOptions"
-                                        x-show="showOptions || $screen('sm')"
+                                        x-show="getShowOptions"
                                         x-transition:enter="transition ease-out duration-300"
                                         x-transition:enter-start="transform origin-right opacity-0 scale-95"
                                         x-transition:enter-end="transform origin-right opacity-100 scale-100"
@@ -290,15 +290,15 @@
                 {% endif %}
 
                 {% for file in files %}
-                    <div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="{ showOptions: false }">
+                    <div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="options">
                         <span class="flex-1">{{ file.title }}</span>
                         <div class="relative">
-                            <button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="showOptions = true">
+                            <button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="openShowOptions">
                                 <i class="fa-solid fa-ellipsis-vertical fa-fw"></i>
                             </button>
                             <ul class="z-10 absolute top-0 right-0 sm:flex flex-row sm:static flex-none border dark:border-2 border-gray-300 dark:border-gray-700 rounded divide-y-2 sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-700 bg-gray-100 dark:bg-gray-800 shadow sm:bg-transparent sm:shadow-none"
-                                @click.outside="showOptions = false"
+                                @click.outside="closeShowOptions"
-                                x-show="showOptions || $screen('sm')"
+                                x-show="getShowOptions"
                                 x-transition:enter="transition ease-out duration-300"
                                 x-transition:enter-start="transform origin-right opacity-0 scale-95"
                                 x-transition:enter-end="transform origin-right opacity-100 scale-100"

fet2020/templates/tasks/index.html

@@ -70,7 +70,7 @@
             </div>
             <button id="modal-trigger-1" class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden" 
                 @click="openModal"
-                x-show="!getShowModal"
+                x-show="getNotShowModal"
                 x-transition:enter="transition duration-100 ease-in"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"