this repo has no description
✨ Use URL for search
+18
-1
+7
-1
components/gallery.templ
+7
-1
components/gallery.templ
···
24
24
25
25
script onInput(inputClass string, galleryClass string) {
26
26
var query = document.querySelector("." + inputClass).value.toLowerCase();
27
-
28
27
document.search(query)
29
28
}
30
29
···
44
43
})
45
44
46
45
console.log(`Indexed ${works.length} works`)
46
+
47
47
})
48
48
49
49
function debounce(delay, fn) {
···
77
77
document.mason.pack()
78
78
document.mason.resize(true)
79
79
document.querySelector('.works').style.width = realWidth + "px";
80
+
81
+
if (history.pushState) {
82
+
// set query param "q" to query
83
+
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + (query ? '?q=' + query : '');
84
+
window.history.pushState({path:newurl},'',newurl);
85
+
}
80
86
})
81
87
}
82
88
+11
components/ui.templ
+11
components/ui.templ
···
71
71
font-family: Manrope;
72
72
}
73
73
74
+
script queryFromUrl(inputClass string) {
75
+
document.addEventListener("DOMContentLoaded", () => {
76
+
var q = new URLSearchParams(window.location.search).get("q")
77
+
if (q) {
78
+
document.querySelector("." + inputClass).value = q
79
+
document.search(q)
80
+
}
81
+
})
82
+
}
83
+
74
84
templ SearchBar(placeholder string, onInput func(string) templ.ComponentScript) {
75
85
<label class={ searchBar() }>
76
86
@shared.OnHover(searchBar(), shared.Declarations{
77
87
"background-color": "lightgray",
78
88
})
79
89
<img src={ string(shared.Asset("icons/magnifying_glass.svg")) }/>
90
+
@queryFromUrl(searchBarInput().ClassName())
80
91
<input i18n-attrs name="q" oninput={ onInput(searchBarInput().ClassName()) } type="text" class={ searchBarInput() } i18n:placeholder="Search"/>
81
92
</label>
82
93
}