From 2bb00a9cb24261ac5fa361146da1f1c20489f1e7 Mon Sep 17 00:00:00 2001
From: Allen Chiang <allenjianggo@gmail.com>
Date: Tue, 27 Feb 2024 15:50:30 +0800
Subject: [PATCH] refactor: use csp build in alpine.js

---
 .../layouts/desktop-header-menu.blade.php     | 50 ++++++++-----
 .../layouts/mobile-header-menu.blade.php      | 71 ++++++++++++-------
 .../posts/show-post-dropdowns.blade.php       | 22 ++++--
 .../views/livewire/shared/search.blade.php    | 38 ++++++----
 .../livewire/shared/users/comments.blade.php  | 14 +++-
 .../shared/users/info-cards.blade.php         | 55 ++++++++------
 .../livewire/shared/users/posts.blade.php     | 53 +++++++++-----
 7 files changed, 202 insertions(+), 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
index dd749441..6b6bed84 100644
--- 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
index 1d48b87d..fbf53982 100644
--- 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,13 +45,14 @@ 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>
@@ -25,7 +60,7 @@ class="text-3xl text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:
           <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,7 +152,7 @@ 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"
@@ -137,8 +160,8 @@ class="absolute right-0 mt-2 w-48 rounded-md bg-gray-50 p-2 text-gray-700 shadow
               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
index 211d6403..aeb0ea0e 100644
--- a/resources/views/livewire/shared/posts/show-post-dropdowns.blade.php
+++ b/resources/views/livewire/shared/posts/show-post-dropdowns.blade.php
@@ -1,6 +1,20 @@
+@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
@@ -8,9 +22,9 @@ class="text-2xl text-gray-400 hover:text-gray-700 focus:text-gray-700 dark:hover
       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
index 86ee3e93..fff218b2 100644
--- 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
index 03cd07de..c7a747d5 100644
--- 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
diff --git a/resources/views/livewire/shared/users/info-cards.blade.php b/resources/views/livewire/shared/users/info-cards.blade.php
index b72e7842..bfbb9a5c 100644
--- a/resources/views/livewire/shared/users/info-cards.blade.php
+++ b/resources/views/livewire/shared/users/info-cards.blade.php
@@ -1,29 +1,38 @@
-{{-- 會員基本資訊 --}}
-<div
-  class="grid w-full grid-cols-6 gap-6 dark:text-gray-50"
-  x-data
-  x-init="document.querySelectorAll('.count-up').forEach((countUp) => {
-      let from = 0;
-      let to = Number(countUp.textContent);
-
-      if (to > 999) {
-          to = 999;
-      }
+@script
+  <script>
+    Alpine.data('userInfoCards', () => ({
+      init() {
+        document.querySelectorAll('.count-up').forEach((countUp) => {
+          let from = 0;
+          let to = Number(countUp.textContent);
+
+          if (to > 999) {
+            to = 999;
+          }
 
-      if (from === to) {
-          return;
-      }
+          if (from === to) {
+            return;
+          }
 
-      let counter = setInterval(() => {
-          countUp.textContent = String(from);
+          let counter = setInterval(() => {
+            countUp.textContent = String(from);
 
-          if (from === to) {
+            if (from === to) {
               clearInterval(counter);
-          }
+            }
+
+            from++;
+          }, 1000 * (1 / to));
+        });
+      }
+    }));
+  </script>
+@endscript
 
-          from++;
-      }, 1000 * (1 / to));
-  });"
+{{-- 會員基本資訊 --}}
+<div
+  class="grid w-full grid-cols-6 gap-6 dark:text-gray-50"
+  x-data="userInfoCards"
 >
   <div
     class="col-span-6 rounded-2xl bg-gradient-to-br from-green-500 via-teal-500 to-sky-500 p-1 shadow-lg dark:from-pink-500 dark:via-purple-500 dark:to-indigo-500 dark:shadow-none md:col-span-2"
@@ -73,7 +82,9 @@ class="h-36 w-36 rounded-full"
         <div class="col-span-11 flex items-center">
 
           @php
-            $barWidth = $category->posts->count() ? (int) (($category->posts->count() / $user->posts->count()) * 100) : 0.2;
+            $barWidth = $category->posts->count()
+                ? (int) (($category->posts->count() / $user->posts->count()) * 100)
+                : 0.2;
           @endphp
 
           <div style="width: {{ $barWidth }}%">
diff --git a/resources/views/livewire/shared/users/posts.blade.php b/resources/views/livewire/shared/users/posts.blade.php
index 3c48ed8e..58b882e4 100644
--- a/resources/views/livewire/shared/users/posts.blade.php
+++ b/resources/views/livewire/shared/users/posts.blade.php
@@ -2,35 +2,55 @@
   $latestYear = array_key_first($this->postsGroupByYear);
 @endphp
 
+@script
+  <script>
+    Alpine.data('userPosts', () => ({
+      currentYear: @js($latestYear),
+      dropdownIsOpen: false,
+      toggleDropdown() {
+        this.dropdownIsOpen = !this.dropdownIsOpen;
+      },
+      showCurrentYearText() {
+        return this.currentYear + ' 年的文章';
+      },
+      closeDropdown() {
+        this.dropdownIsOpen = false;
+      },
+      switchPostsByYear() {
+        this.currentYear = Number(this.$el.getAttribute('data-year'));
+        this.dropdownIsOpen = false;
+      },
+      showPostsByYear() {
+        return this.currentYear === Number(this.$el.getAttribute('data-year'));
+      }
+    }));
+  </script>
+@endscript
+
 @if (!empty($this->postsGroupByYear))
   {{-- 會員文章 --}}
   <x-card
     class="relative w-full text-lg"
-    x-data="{
-        currentYear: {{ Js::from($latestYear) }},
-    }"
+    x-data="userPosts"
   >
 
-    <div
-      class="relative mb-6 flex justify-end"
-      x-data="{ dropdownOpen: false }"
-    >
+    <div class="relative mb-6 flex justify-end">
       <button
         class="inline-flex w-full items-center justify-center rounded-md border bg-gray-50 px-4 py-2 text-lg font-medium transition-colors hover:bg-neutral-100 focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 active:bg-white disabled:pointer-events-none disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-700 dark:focus:bg-gray-600 dark:focus:ring-gray-600 dark:focus:ring-offset-gray-800 dark:active:bg-gray-600"
         type="button"
-        x-on:click="dropdownOpen=true"
-        x-text="currentYear + ' 年的文章'"
+        x-on:click="toggleDropdown"
+        x-text="showCurrentYearText"
       >
       </button>
 
       <div
         class="absolute right-0 top-1 z-50 mt-12 w-40"
-        x-show="dropdownOpen"
-        x-on:click.away="dropdownOpen=false"
+        x-cloak
+        x-show="dropdownIsOpen"
+        x-on:click.away="closeDropdown"
         x-transition:enter="ease-out duration-200"
         x-transition:enter-start="-translate-y-2"
         x-transition:enter-end="translate-y-0"
-        x-cloak
       >
         <div
           class="mt-1 rounded-md border border-neutral-200/70 bg-white p-1 text-lg text-neutral-700 shadow-md dark:border-gray-600 dark:bg-gray-800 dark:text-gray-50"
@@ -38,11 +58,9 @@ class="mt-1 rounded-md border border-neutral-200/70 bg-white p-1 text-lg text-ne
           @foreach (array_keys($this->postsGroupByYear) as $year)
             <button
               class="group relative flex w-full cursor-default select-none items-center justify-between rounded px-2 py-1.5 outline-none hover:bg-neutral-100 hover:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:hover:bg-gray-700 dark:hover:text-gray-50"
+              data-year="{{ $year }}"
               type="button"
-              x-on:click="
-              currentYear = @js($year);
-              dropdownOpen = false;
-            "
+              x-on:click="switchPostsByYear"
             >
               <span>{{ $year }}</span>
             </button>
@@ -54,8 +72,9 @@ class="group relative flex w-full cursor-default select-none items-center justif
     @foreach ($this->postsGroupByYear as $year => $posts)
       <div
         class="rounded-md border bg-gray-50 duration-200 dark:border-gray-700 dark:bg-gray-800"
-        x-show="currentYear === @js($year)"
+        data-year="{{ $year }}"
         x-cloak
+        x-show="showPostsByYear"
         x-transition
       >
         <livewire:shared.users.posts-group-by-year