feat: タグフィルターにhtmxを組み込み

- npm経由で読み込んだhtmxが動作しないため一旦保留
appleple · Aug 2, 2024 · 580c52f · 580c52f
1 parent 4a9af27
commit 580c52f
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 7 deletions.
diff --git a/src/develop/include/head/js.html b/src/develop/include/head/js.html
@@ -4,7 +4,7 @@
 <script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script><!-- BEGIN_MODULE Js -->
 <script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
 <!-- END_MODULE Touch_SessionWithContribution -->
-
+<!-- <script src="https://unpkg.com/[email protected]" integrity="sha384-QWGpdj554B4ETpJJC9z+ZHJcA/i59TyjxEPXiiUgN2WmTyV5OEZWCD6gQhgkdpB/" crossorigin="anonymous"></script> -->
 <!-- BEGIN_MODULE Vite -->
 <!-- BEGIN_IF [{useDevServer}/eq/1] -->
 <script type="module" src="{devServerUrl}/@vite/client"></script>

diff --git a/src/develop/include/htmx/swap-index.html b/src/develop/include/htmx/swap-index.html
@@ -0,0 +1,6 @@
+<!-- タグフィルター -->
+@include("/include/tag/filter.html")
+
+@include("/include/entry/summary-card.html", {
+  "ctx": "cid/%{CID}/page/%{PAGE}/%{DATE_YEAR}/%{DATE_MONTH}/keyword/%{KEYWORD}/tag/%{TAG}/"
+})
diff --git a/src/develop/include/tag/filter.html b/src/develop/include/tag/filter.html
@@ -3,7 +3,12 @@
 <div class="mb-8">
   <p class="flex flex-wrap gap-2 text-xl font-bold"><!-- BEGIN selected:loop -->
     <span class="inline-flex items-start">#{name}
-      <a href="{omitUrl}" class="text-gray-500 hover:opacity-70">
+      <a href="{omitUrl}" class="text-gray-500 hover:opacity-70"
+        hx-push-url="{omitUrl}"
+        hx-get="{omitUrl}tpl/include/htmx/swap-index.html"
+        hx-target="#swap-htmx"
+        hx-swap="innerHTML"
+      >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
           <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clip-rule="evenodd" />
         </svg>
@@ -16,7 +21,14 @@
     <h2 class="text-gray-500">さらに絞り込む</h2>
     <ul class="flex flex-wrap gap-4 font-bold mt-2">
       <!-- BEGIN choice:loop -->
-      <li><a href="{url}" class="hover:opacity-70">#{name}</a></li>
+      <li>
+        <a href="{url}" class="hover:opacity-70"
+            hx-push-url="{url}"
+          hx-get="{url}tpl/include/htmx/swap-index.html"
+          hx-target="#swap-htmx"
+          hx-swap="innerHTML"
+        >#{name}</a>
+      </li>
       <!-- END choice:loop -->
     </ul>
   </div>

diff --git a/src/develop/index.html b/src/develop/index.html
@@ -1,8 +1,7 @@
 @extends("/_layouts/two-column.html")
 
 @section("main")
-@include("/include/tag/filter.html")
-@include("/include/entry/summary-card.html", {
-  "ctx": "cid/%{CID}/page/%{PAGE}/%{DATE_YEAR}/%{DATE_MONTH}/keyword/%{KEYWORD}/tag/%{TAG}/"
-})
+<div id="swap-htmx">
+@include("/include/htmx/swap-index.html")
+</div>
 @endsection
diff --git a/src/develop/src/js/main.js b/src/develop/src/js/main.js
@@ -89,13 +89,33 @@ function createBuildInJsDispatcher() {
 }
 
 async function main() {
+  /**
+   * Alpine.js
+   */
   await loadAlpineModules();
 
   window.Alpine = Alpine;
   Alpine.start();
 
+  /**
+   * htmx
+   */
   window.htmx = htmx;
 
+  addEventListener('htmx:beforeHistoryUpdate', function (event) {
+    const proposedUrl = event.detail.history.path;
+    let customUrl = proposedUrl;
+    if (proposedUrl.includes('/include/htmx/')) {
+      customUrl = proposedUrl.replace(/\/include\/htmx\/.*\.html/, '');
+    }
+    event.detail.history.path = customUrl;
+  });
+
+  addEventListener('htmx:afterSwap', function (event) {
+    ACMS.Dispatch(event.target);
+  });
+
+
   /**
    * FontAwesome
    */