Lucas/Pooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

site: implement search functionality

Browse source
This commit is contained in:
Lucas Gabriel Vuotto 2025-04-27 15:20:49 +00:00
parent 3ae6b02672
commit 08be6b17f5
8 changed files with 257 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

34
templates/_search.html.ep Normal file
View file

@ -0,0 +1,34 @@
% stash("pooru.search" => 1);
<%= form_for "list_media" =>
name => "search",
class => "layout-flex-row" =>
begin %>
<div
class="layout-flex-item-fullsize position-relative"
x-data="tagsSuggestions">
<input type="search" name="tags" value="<%= param "tags" %>"
placeholder="Search tags..."
x-ref="tags"
@focus="fetchSuggestions"
@input.debounce="fetchSuggestions"
@keydown.tab="completeSuggestion"
@keydown.up.prevent="setCurrentSuggestion($event, -1)"
@keydown.down.prevent="setCurrentSuggestion($event, +1)"
@keydown.escape="reset">
<ul id="tags-suggestions"
x-cloak x-show="suggestions.length > 0">
<template x-for="suggestion in suggestions">
<li
@click="selectCurrentSuggestion"
@mouseenter="setCurrentSuggestion">
<span
x-text="suggestion.display"
:class="suggestion.kind_class">
</span>
<span class="float-right" x-text="suggestion.count"></span>
</li>
</template>
</ul>
</div>
<%= submit_button "Search" %>
<% end %>

2
templates/gallery.html.ep
View file

@ -1,6 +1,6 @@
% layout "main";
<%= tag("h1", title) if title %>
%= include "_search";
<div class="layout-flex-row gallery">
% for my $m ($media->@*) {

9
templates/layouts/main.html.ep
View file

@ -5,6 +5,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title><%= join(" - ", "Pooru", title() // ()) %></title>
<%= stylesheet "/css/style.css" %>
% if (stash "pooru.search") {
<%= javascript begin %>
const endpoints = {
search: "<%= url_for("search_tags") %>",
};
<% end %>
<%= javascript "/js/app.js", defer => undef %>
<%= javascript '/js/alpinejs@3.14.9/dist/cdn.min.js', defer => undef %>
% }
</head>
<body class="layout-flex-column">
<header>