Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2025-10-29 17:25:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

HTMX debounce input things

Browse Source
This commit is contained in:
Simon Martens
2025-02-26 01:09:00 +01:00
parent 3e1f5a2983
commit 8f664d24ca
4 changed files with 35 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
views/routes/personen/components/searchbox.gohtml
View File

@@ -15,8 +15,7 @@
placeholder="Suchbegriff" placeholder="Suchbegriff"
x-model="search" x-model="search"
hx-get="" hx-get=""
hx-trigger="input changed delay=500ms, keyup[key=='Enter']" hx-trigger="input[if: this.value.length >= 3] delay:3000ms, keyup[enter, if: this.value.length >= 2]"
hx-sync="this:replace"
hx-select="#searchresults" hx-select="#searchresults"
hx-target="#searchresults" hx-target="#searchresults"
hx-swap="outerHTML" hx-swap="outerHTML"
@@ -24,17 +23,19 @@
{{ if $model.search }}disabled="true"{{ end }} /> {{ if $model.search }}disabled="true"{{ end }} />
</div> </div>
<div id="permalink" class="font-serif ml-3 min-w-7 pb-1"> <div id="permalink" class="font-serif ml-3 min-w-7 pb-1">
<tool-tip position="right" x-show="search"> {{- if not $model.search -}}
<a <tool-tip position="right" x-show="search">
:href="'/personen/?search=' + search" <a
x-show="search" :href="'/personen/?search=' + search"
class="inline-block px-1 x-show="search"
class="inline-block px-1
text-white no-underline bg-stone-700 hover:bg-stone-900 rounded" text-white no-underline bg-stone-700 hover:bg-stone-900 rounded"
hx-boost="false"> hx-boost="false">
<i class="ri-links-line"></i <i class="ri-links-line"></i
></a> ></a>
<div class="data-tip">Link zu dieser Suchanfrage</div> <div class="data-tip">Link zu dieser Suchanfrage</div>
</tool-tip> </tool-tip>
{{- end -}}
</div> </div>
</div> </div>
</div> </div>

25
views/routes/reihen/components/alphabet.gohtml
View File

@@ -34,25 +34,26 @@
placeholder="Almanach-Nr oder Suchbegriff" placeholder="Almanach-Nr oder Suchbegriff"
x-model="search" x-model="search"
hx-get="" hx-get=""
hx-trigger="input changed delay=500ms, keyup[key=='Enter']" hx-trigger="input changed delay=1500ms, keyup[key=='Enter']"
hx-sync="this:replace"
hx-select="#searchcontent" hx-select="#searchcontent"
hx-target="#searchcontent" hx-target="#searchcontent"
autocomplete="off" autocomplete="off"
{{ if $model.search }}disabled="true"{{ end }} /> {{ if $model.search }}disabled="true"{{ end }} />
</div> </div>
<div id="permalink" class="font-serif ml-3 min-w-7 pb-1"> <div id="permalink" class="font-serif ml-3 min-w-7 pb-1">
<tool-tip position="right" x-show="search"> {{- if not $model.search -}}
<a <tool-tip position="right" x-show="search">
:href="'/reihen/?search=' + search" <a
x-show="search" :href="'/reihen/?search=' + search"
class="inline-block px-1 x-show="search"
class="inline-block px-1
text-white no-underline bg-stone-700 hover:bg-stone-900 rounded" text-white no-underline bg-stone-700 hover:bg-stone-900 rounded"
hx-boost="false"> hx-boost="false">
<i class="ri-links-line"></i <i class="ri-links-line"></i
></a> ></a>
<div class="data-tip">Link zu dieser Suchanfrage</div> <div class="data-tip">Link zu dieser Suchanfrage</div>
</tool-tip> </tool-tip>
{{- end -}}
</div> </div>
</div> </div>
</div> </div>

10
views/routes/reihen/components/notifier.gohtml
View File

@@ -25,24 +25,24 @@
</div> </div>
{{ end }} {{ end }}
{{ if .a }} {{ if $model.result.Agent }}
<div class="notifier" x-show="!search"> <div class="notifier" x-show="!search">
{{ if .a.CorporateBody }} {{ if $model.result.Agent.CorporateBody }}
<i class="ri-team-line"></i> <i class="ri-team-line"></i>
<span class="filtercategory">Verlag, Druckerei oder Vertrieb</span> &middot; <span class="filtercategory">Verlag, Druckerei oder Vertrieb</span> &middot;
{{ else }} {{ else }}
<i class="ri-user-line"></i> <i class="ri-user-line"></i>
<span class="filtercategory">Herausgeber:in</span> &middot; <span class="filtercategory">Herausgeber:in</span> &middot;
{{ end }} {{ end }}
<span class="filterterm">{{ .a.Name }}</span> <span class="filterterm">{{ $model.result.Agent.Name }}</span>
</div> </div>
{{ end }} {{ end }}
{{ if .p }} {{ if $model.result.Place }}
<div class="notifier" x-show="!search"> <div class="notifier" x-show="!search">
<i class="ri-map-pin-line"></i> <i class="ri-map-pin-line"></i>
<span class="filtercategory">Erscheinungsort</span> &middot; <span class="filtercategory">Erscheinungsort</span> &middot;
<span class="filterterm">{{ .p.Name }}</span> <span class="filterterm">{{ $model.result.Place.Name }}</span>
</div> </div>
{{ end }} {{ end }}

4
views/transform/site.css
View File

@@ -378,4 +378,8 @@
#breadcrumbs .backbutton { #breadcrumbs .backbutton {
@apply ml-4 bg-stone-100 py-0.5 px-2.5 rounded font-sans text-base text-center mr-1.5; @apply ml-4 bg-stone-100 py-0.5 px-2.5 rounded font-sans text-base text-center mr-1.5;
} }
input:disabled {
@apply italic text-gray-500;
}
} }