more htmx

2025-11-14 21:38:09 +00:00
parent 15b73a915d
commit 06eb490950
32 changed files with 2517 additions and 354 deletions
@@ -0,0 +1,56 @@
+<!-- Primary response: Desktop length toggle -->
+<div class="selector-group" id="desktop-length-toggle">
+    <label class="selector-label">{{if eq .Lang "es"}}Longitud{{else}}Length{{end}}:</label>
+    <label class="icon-toggle">
+        <input type="checkbox"
+               id="lengthToggle"
+               {{if eq .CVLengthClass "cv-long"}}checked{{end}}
+               hx-post="/toggle/length?lang={{.Lang}}"
+               hx-target="#desktop-length-toggle"
+               hx-swap="outerHTML"
+               _="on htmx:afterRequest
+                    if my.checked
+                      remove .cv-short from .cv-paper
+                      add .cv-long to .cv-paper
+                      set localStorage['cv-length'] to 'long'
+                    else
+                      remove .cv-long from .cv-paper
+                      add .cv-short to .cv-paper
+                      set localStorage['cv-length'] to 'short'
+                    end">
+        <span class="icon-toggle-slider">
+            <iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
+            <iconify-icon icon="mdi:file-document-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
+        </span>
+    </label>
+</div>
+
+<!-- Out-of-band swap: Mobile length toggle -->
+<div class="menu-control-item" id="mobile-length-toggle" hx-swap-oob="true">
+    <label class="menu-control-label">
+        <iconify-icon icon="mdi:file-document-outline" width="20" height="20"></iconify-icon>
+        <span>{{if eq .Lang "es"}}Longitud{{else}}Length{{end}}</span>
+    </label>
+    <label class="icon-toggle">
+        <input type="checkbox"
+               id="lengthToggleMenu"
+               {{if eq .CVLengthClass "cv-long"}}checked{{end}}
+               hx-post="/toggle/length?lang={{.Lang}}"
+               hx-target="#mobile-length-toggle"
+               hx-swap="outerHTML"
+               _="on htmx:afterRequest
+                    if my.checked
+                      remove .cv-short from .cv-paper
+                      add .cv-long to .cv-paper
+                      set localStorage['cv-length'] to 'long'
+                    else
+                      remove .cv-long from .cv-paper
+                      add .cv-short to .cv-paper
+                      set localStorage['cv-length'] to 'short'
+                    end">
+        <span class="icon-toggle-slider">
+            <iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
+            <iconify-icon icon="mdi:file-document-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
+        </span>
+    </label>
+</div>