refactor: use csp build in alpine.js

yilanboy · Feb 27, 2024 · 2bb00a9 · 2bb00a9
1 parent 9bd8a14
commit 2bb00a9
Show file tree

Hide file tree

Showing 7 changed files with 202 additions and 101 deletions.
diff --git a/resources/views/livewire/shared/layouts/desktop-header-menu.blade.php b/resources/views/livewire/shared/layouts/desktop-header-menu.blade.php
@@ -1,6 +1,30 @@
+@script
+  <script>
+    Alpine.data('desktopHeaderMenu', () => ({
+      html: document.documentElement,
+      profileMenuIsOpen: false,
+      switchTheme() {
+        if (this.html.classList.contains('dark')) {
+          this.html.classList.remove('dark')
+          localStorage.setItem('mode', 'light')
+        } else {
+          this.html.classList.add('dark')
+          localStorage.setItem('mode', 'dark')
+        }
+      },
+      toggleProfileMenu() {
+        this.profileMenuIsOpen = !this.profileIsOpen
+      },
+      closeProfileMenu() {
+        this.profileMenuIsOpen = false
+      }
+    }));
+  </script>
+@endscript
+
 <div
   class="relative hidden h-20 w-full items-center justify-center bg-gray-50 shadow-lg transition-all duration-300 dark:bg-gray-800 dark:shadow-none lg:flex"
-  x-data
+  x-data="desktopHeaderMenu"
 >
   {{-- 電腦版-Logo --}}
   <a
@@ -44,16 +68,7 @@ class="size-10"
       class="group flex size-10 items-center justify-center"
       type="button"
       aria-label="Toggle Dark Mode"
-      x-data="{ html: document.documentElement }"
-      x-on:click="
-        if (html.classList.contains('dark')) {
-          html.classList.remove('dark')
-          localStorage.setItem('mode', 'light')
-        } else {
-          html.classList.add('dark')
-          localStorage.setItem('mode', 'dark')
-        }
-      "
+      x-on:click="switchTheme"
     >
       <x-icon.sun class="w-5 text-amber-400 transition duration-150 group-hover:text-amber-500 dark:hidden" />
 
@@ -108,10 +123,7 @@ class="flex size-10 items-center justify-center rounded-lg text-xl text-gray-500
       </span>
 
       {{-- 電腦版-會員選單 --}}
-      <div
-        class="relative flex items-center justify-center"
-        x-data="{ profileIsOpen: false }"
-      >
+      <div class="relative flex items-center justify-center">
         {{-- 電腦版-會員大頭貼 --}}
         <div>
           <button
@@ -120,8 +132,8 @@ class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 foc
             type="button"
             aria-expanded="false"
             aria-haspopup="true"
-            x-on:click="profileIsOpen = ! profileIsOpen"
-            x-on:keydown.escape.window="profileIsOpen = false"
+            x-on:click="toggleProfileMenu"
+            x-on:keydown.escape.window="closeProfileMenu"
           >
             <span class="sr-only">Open user menu</span>
             <img
@@ -140,8 +152,8 @@ class="absolute right-0 top-16 mt-2 w-48 rounded-md bg-gray-50 p-2 text-gray-700
           aria-labelledby="user-menu-button"
           tabindex="-1"
           x-cloak
-          x-on:click.outside="profileIsOpen = false"
-          x-show="profileIsOpen"
+          x-show="profileMenuIsOpen"
+          x-on:click.outside="closeProfileMenu"
           x-transition.origin.top.right
         >
           <a

diff --git a/resources/views/livewire/shared/layouts/mobile-header-menu.blade.php b/resources/views/livewire/shared/layouts/mobile-header-menu.blade.php
@@ -1,6 +1,40 @@
+@script
+  <script>
+    Alpine.data('mobileHeaderMenu', () => ({
+      html: document.documentElement,
+      dropdownMenuIsOpen: false,
+      profileMenuIsOpen: false,
+      switchTheme() {
+        if (this.html.classList.contains('dark')) {
+          this.html.classList.remove('dark')
+          localStorage.setItem('mode', 'light')
+        } else {
+          this.html.classList.add('dark')
+          localStorage.setItem('mode', 'dark')
+        }
+      },
+      toggleDropdownMenu() {
+        this.dropdownMenuIsOpen = !this.dropdownMenuIsOpen
+      },
+      dropdownMenuIsClose() {
+        return this.dropdownMenuIsOpen !== true
+      },
+      closeDropdownMenu() {
+        this.dropdownMenuIsOpen = false
+      },
+      toggleProfileMenu() {
+        this.profileMenuIsOpen = !this.profileMenuIsOpen
+      },
+      closeProfileMenu() {
+        this.profileMenuIsOpen = false
+      }
+    }));
+  </script>
+@endscript
+
 <div
   class="bg-gray-50 shadow-lg dark:bg-gray-800 dark:shadow-none lg:hidden"
-  x-data="{ menuIsOpen: false }"
+  x-data="mobileHeaderMenu"
 >
   <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
     <div class="relative flex h-[4.5rem] items-center justify-between">
@@ -11,21 +45,22 @@ class="inline-flex items-center justify-center rounded-md p-2 text-gray-700"
           type="button"
           aria-controls="mobile-menu"
           aria-expanded="false"
-          x-on:click="menuIsOpen = ! menuIsOpen"
+          x-on:click="toggleDropdownMenu"
         >
           <span class="sr-only">Open main menu</span>
           {{-- 手機版-關閉選單的 icon --}}
           <div
             class="text-3xl text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50"
-            :class="menuIsOpen ? 'hidden' : 'block'"
+            x-cloak
+            x-show="dropdownMenuIsClose"
           >
             <x-icon.list class="w-7" />
           </div>
           {{-- 手機版-開啟選單的 icon --}}
           <div
             class="text-xl text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50"
             x-cloak
-            :class="menuIsOpen ? 'block' : 'hidden'"
+            x-show="dropdownMenuIsOpen"
           >
             <x-icon.x class="w-7" />
           </div>
@@ -48,16 +83,7 @@ class="hidden size-10 md:inline-block"
         <button
           type="button"
           aria-label="Toggle Dark Mode"
-          x-data="{ html: document.documentElement }"
-          x-on:click="
-            if (html.classList.contains('dark')) {
-              html.classList.remove('dark')
-              localStorage.setItem('mode', 'light')
-            } else {
-              html.classList.add('dark')
-              localStorage.setItem('mode', 'dark')
-            }
-          "
+          x-on:click="switchTheme"
         >
           <x-icon.sun class="w-5 text-amber-400 hover:text-amber-500 dark:hidden" />
 
@@ -105,10 +131,7 @@ class="rounded-full text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:ho
           </div>
 
           {{-- 手機版-會員選單 --}}
-          <div
-            class="relative"
-            x-data="{ showDropdown: false }"
-          >
+          <div class="relative">
             {{-- 手機版-會員大頭貼 --}}
             <div>
               <button
@@ -117,8 +140,8 @@ class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 foc
                 type="button"
                 aria-expanded="false"
                 aria-haspopup="true"
-                x-on:click="showDropdown = ! showDropdown"
-                x-on:keydown.escape.window="showDropdown = false"
+                x-on:click="toggleProfileMenu"
+                x-on:keydown.escape.window="closeProfileMenu"
               >
                 <span class="sr-only">Open user menu</span>
                 <img
@@ -129,16 +152,16 @@ class="size-10 rounded-full"
               </button>
             </div>
 
-            {{-- 手機版-會員下拉式選單 --}}
+            {{-- 手機版-會員選單 --}}
             <div
               class="absolute right-0 mt-2 w-48 rounded-md bg-gray-50 p-2 text-gray-700 shadow-lg ring-1 ring-black ring-opacity-20 dark:bg-gray-800 dark:text-gray-50 dark:shadow-none dark:ring-gray-600"
               role="menu"
               aria-orientation="vertical"
               aria-labelledby="user-menu-button"
               tabindex="-1"
               x-cloak
-              x-on:click.outside="showDropdown = false"
-              x-show="showDropdown"
+              x-show="profileMenuIsOpen"
+              x-on:click.outside="closeProfileMenu"
               x-transition.origin.top.right
             >
               <a
@@ -196,7 +219,7 @@ class="flex w-full items-center rounded-md px-4 py-2 hover:bg-gray-200 dark:hove
   <div
     class="lg:hidden"
     x-cloak
-    x-show="menuIsOpen"
+    x-show="dropdownMenuIsOpen"
     x-collapse
   >
     <div class="space-y-1 px-2 pb-3 pt-2">

diff --git a/resources/views/livewire/shared/posts/show-post-dropdowns.blade.php b/resources/views/livewire/shared/posts/show-post-dropdowns.blade.php
@@ -1,16 +1,30 @@
+@script
+  <script>
+    Alpine.data('showPostDropdowns', () => ({
+      editMenuIsOpen: false,
+      toggleEditMenu() {
+        this.editMenuIsOpen = !this.editMenuIsOpen;
+      },
+      closeEditMenu() {
+        this.editMenuIsOpen = false;
+      }
+    }));
+  </script>
+@endscript
+
 <div
   class="relative xl:hidden"
-  x-data="{ editMenuIsOpen: false }"
+  x-data="showPostDropdowns"
 >
   <div>
     <button
       class="text-2xl text-gray-400 hover:text-gray-700 focus:text-gray-700 dark:hover:text-gray-50 dark:focus:text-gray-50"
       type="button"
       aria-expanded="false"
       aria-haspopup="true"
-      x-on:click="editMenuIsOpen = ! editMenuIsOpen"
-      x-on:click.outside="editMenuIsOpen = false"
-      x-on:keydown.escape.window="editMenuIsOpen = false"
+      x-on:click="toggleEditMenu"
+      x-on:click.outside="closeEditMenu"
+      x-on:keydown.escape.window="closeEditMenu"
     >
       <x-icon.three-dots-vertical class="w-6" />
     </button>

diff --git a/resources/views/livewire/shared/search.blade.php b/resources/views/livewire/shared/search.blade.php
@@ -1,13 +1,27 @@
-<div x-data="{ searchBoxOpen: false }">
+@script
+  <script>
+    Alpine.data('search', () => ({
+      searchBarIsOpen: false,
+      openSearchBar() {
+        this.searchBarIsOpen = true;
+        this.$nextTick(() => {
+          this.$refs.searchBar.focus()
+        })
+      },
+      closeSearchBar() {
+        this.searchBarIsOpen = false;
+      }
+    }));
+  </script>
+@endscript
+
+<div x-data="search">
   {{-- 搜尋按鈕 --}}
   <button
     class="flex size-10 items-center justify-center rounded-lg text-xl text-gray-500 transition duration-150 hover:bg-gray-200 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-gray-50"
     type="button"
     aria-label="Search"
-    x-on:click="
-      searchBoxOpen = !searchBoxOpen
-      $nextTick(() => { $refs.searchBox.focus() })
-    "
+    x-on:click="openSearchBar"
   >
     <x-icon.search class="w-5" />
   </button>
@@ -19,15 +33,15 @@ class="fixed inset-0 z-30 overflow-y-auto"
     aria-labelledby="modal-title"
     aria-modal="true"
     x-cloak
-    x-show="searchBoxOpen"
-    x-on:keydown.window.escape="searchBoxOpen = false"
+    x-show="searchBarIsOpen"
+    x-on:keydown.window.escape="closeSearchBar"
   >
     <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
 
       {{-- modal --}}
       <div
         class="fixed inset-0 bg-gray-500/75 backdrop-blur transition-opacity"
-        x-show="searchBoxOpen"
+        x-show="searchBarIsOpen"
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
@@ -42,15 +56,15 @@ class="fixed inset-0 bg-gray-500/75 backdrop-blur transition-opacity"
         <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-start sm:p-0">
           <div
             class="mt-16 inline-block w-full max-w-md transition-all"
-            x-show="searchBoxOpen"
+            x-show="searchBarIsOpen"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            x-on:click.outside="searchBoxOpen = false"
-            x-trap.noscroll="searchBoxOpen"
+            x-on:click.outside="closeSearchBar"
+            x-trap.noscroll="searchBarIsOpen"
           >
             {{-- search form --}}
             <div class="relative">
@@ -62,7 +76,7 @@ class="hidden"
                 class="w-full rounded-xl border border-gray-400 bg-gray-50 px-10 py-2 text-xl placeholder-gray-400 outline-none focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-gray-50 dark:placeholder-white"
                 id="searchBox"
                 type="text"
-                x-ref="searchBox"
+                x-ref="searchBar"
                 wire:model.live.debounce.500ms="search"
                 autocomplete="off"
                 placeholder="搜尋文章"

diff --git a/resources/views/livewire/shared/users/comments.blade.php b/resources/views/livewire/shared/users/comments.blade.php
@@ -1,9 +1,17 @@
+@script
+  <script>
+    Alpine.data('userComments', () => ({
+      init() {
+        hljs.highlightAll();
+      }
+    }));
+  </script>
+@endscript
+
 {{-- 會員留言 --}}
 <div
   class="space-y-6"
-  x-data
-  x-init="// init comments page
-  window.hljs.highlightAll();"
+  x-data="userComments"
 >
   @forelse ($comments as $comment)
     <x-dashed-card