diff options
| -rw-r--r-- | static/app.js | 25 | ||||
| -rw-r--r-- | templates/form.html | 22 |
2 files changed, 37 insertions, 10 deletions
diff --git a/static/app.js b/static/app.js index db3e694..938cf70 100644 --- a/static/app.js +++ b/static/app.js @@ -233,7 +233,7 @@ document.querySelectorAll("form[data-confirm]").forEach((form) => { }); }); -document.querySelectorAll(".star-control").forEach((control) => { +document.querySelectorAll(".star-control:not([data-form-stars])").forEach((control) => { syncStarControl(control, Number(control.dataset.currentStars || 0)); control.addEventListener("pointerleave", () => clearStarPreview(control)); control.addEventListener("focusout", (event) => { @@ -274,6 +274,27 @@ document.querySelectorAll(".star-control").forEach((control) => { }); }); +// Form star picker — updates hidden input instead of fetching +document.querySelectorAll(".star-control[data-form-stars]").forEach((control) => { + syncStarControl(control, Number(control.dataset.currentStars || 0)); + control.addEventListener("pointerleave", () => clearStarPreview(control)); + control.addEventListener("focusout", (event) => { + if (!control.contains(event.relatedTarget)) clearStarPreview(control); + }); + control.querySelectorAll(".star-button").forEach((button) => { + button.addEventListener("pointerenter", () => previewStarControl(control, Number(button.dataset.stars || 0))); + button.addEventListener("focus", () => previewStarControl(control, Number(button.dataset.stars || 0))); + button.addEventListener("click", () => { + const current = Number(control.dataset.currentStars || 0); + const selected = Number(button.dataset.stars || 0); + const next = current === selected ? 0 : selected; + syncStarControl(control, next); + const hidden = document.getElementById("stars"); + if (hidden) hidden.value = String(next); + }); + }); +}); + // Infinite scroll + search/filter/sort (function () { const feedContainer = document.querySelector("#film-feed"); @@ -286,7 +307,7 @@ document.querySelectorAll(".star-control").forEach((control) => { let currentSort = ""; function attachStarListeners(root) { - root.querySelectorAll(".star-control").forEach((control) => { + root.querySelectorAll(".star-control:not([data-form-stars])").forEach((control) => { if (control.dataset.listenerAttached) return; control.dataset.listenerAttached = "true"; syncStarControl(control, Number(control.dataset.currentStars || 0)); diff --git a/templates/form.html b/templates/form.html index fce5e48..23e6d2d 100644 --- a/templates/form.html +++ b/templates/form.html @@ -83,14 +83,20 @@ </div> <div class="field"> - <label for="stars">Stars</label> - {% set current_stars = film.stars if film else 0 %} - <select id="stars" name="stars"> - <option value="0" {% if current_stars|string == '0' %}selected{% endif %}>Unstarred</option> - <option value="1" {% if current_stars|string == '1' %}selected{% endif %}>1 star</option> - <option value="2" {% if current_stars|string == '2' %}selected{% endif %}>2 stars</option> - <option value="3" {% if current_stars|string == '3' %}selected{% endif %}>3 stars</option> - </select> + <label>Stars</label> + {% set current_stars = film.stars if film and film.stars else 0 %} + <input type="hidden" id="stars" name="stars" value="{{ current_stars }}"> + <div class="star-control" role="group" aria-label="Rate film" data-form-stars data-current-stars="{{ current_stars }}"> + {% for value in range(1, 4) %} + <button + type="button" + class="star-button {% if current_stars >= value %}is-active{% endif %}" + data-stars="{{ value }}" + aria-label="{{ value }} star{% if value > 1 %}s{% endif %}" + aria-pressed="{% if current_stars >= value %}true{% else %}false{% endif %}" + >✦</button> + {% endfor %} + </div> </div> <div class="field checkbox-field"> |