Implement search select component
This commit is contained in:
@@ -293,27 +293,85 @@
|
||||
--leading-5: 20px;
|
||||
--radius-base: 12px;
|
||||
--color-body: var(--color-gray-600);
|
||||
--color-body-subtle: var(--color-gray-500);
|
||||
--color-heading: var(--color-gray-900);
|
||||
--color-fg-brand-subtle: var(--color-blue-200);
|
||||
--color-fg-brand: var(--color-blue-700);
|
||||
--color-fg-brand-strong: var(--color-blue-900);
|
||||
--color-fg-success: var(--color-emerald-700);
|
||||
--color-fg-success-strong: var(--color-emerald-900);
|
||||
--color-fg-danger: var(--color-rose-700);
|
||||
--color-fg-danger-strong: var(--color-rose-900);
|
||||
--color-fg-warning-subtle: var(--color-orange-600);
|
||||
--color-fg-warning: var(--color-orange-900);
|
||||
--color-fg-yellow: var(--color-yellow-400);
|
||||
--color-fg-disabled: var(--color-gray-400);
|
||||
--color-fg-purple: var(--color-purple-600);
|
||||
--color-fg-cyan: var(--color-cyan-600);
|
||||
--color-fg-indigo: var(--color-indigo-600);
|
||||
--color-fg-pink: var(--color-pink-600);
|
||||
--color-fg-lime: var(--color-lime-600);
|
||||
--color-neutral-primary-soft: var(--color-white);
|
||||
--color-neutral-primary: var(--color-white);
|
||||
--color-neutral-primary-medium: var(--color-white);
|
||||
--color-neutral-primary-strong: var(--color-white);
|
||||
--color-neutral-secondary-soft: var(--color-gray-50);
|
||||
--color-neutral-secondary: var(--color-gray-50);
|
||||
--color-neutral-secondary-medium: var(--color-gray-50);
|
||||
--color-neutral-secondary-strong: var(--color-gray-50);
|
||||
--color-neutral-secondary-strongest: var(--color-gray-50);
|
||||
--color-neutral-tertiary-soft: var(--color-gray-100);
|
||||
--color-neutral-tertiary: var(--color-gray-100);
|
||||
--color-neutral-tertiary-medium: var(--color-gray-100);
|
||||
--color-neutral-quaternary: var(--color-gray-200);
|
||||
--color-neutral-quaternary-medium: var(--color-gray-200);
|
||||
--color-gray: var(--color-gray-300);
|
||||
--color-brand-softer: var(--color-blue-50);
|
||||
--color-brand-soft: var(--color-blue-100);
|
||||
--color-brand: var(--color-blue-700);
|
||||
--color-brand-medium: var(--color-blue-200);
|
||||
--color-brand-strong: var(--color-blue-800);
|
||||
--color-success-soft: var(--color-emerald-50);
|
||||
--color-success: var(--color-emerald-700);
|
||||
--color-success-medium: var(--color-emerald-100);
|
||||
--color-success-strong: var(--color-emerald-800);
|
||||
--color-danger-soft: var(--color-rose-50);
|
||||
--color-danger: var(--color-rose-700);
|
||||
--color-danger-medium: var(--color-rose-100);
|
||||
--color-danger-strong: var(--color-rose-800);
|
||||
--color-warning-soft: var(--color-orange-50);
|
||||
--color-warning: var(--color-orange-500);
|
||||
--color-warning-medium: var(--color-orange-100);
|
||||
--color-warning-strong: var(--color-orange-700);
|
||||
--color-dark-soft: var(--color-gray-800);
|
||||
--color-dark: var(--color-gray-800);
|
||||
--color-dark-strong: var(--color-gray-900);
|
||||
--color-disabled: var(--color-gray-100);
|
||||
--color-purple: var(--color-purple-500);
|
||||
--color-sky: var(--color-sky-500);
|
||||
--color-teal: var(--color-teal-600);
|
||||
--color-pink: var(--color-pink-600);
|
||||
--color-cyan: var(--color-cyan-500);
|
||||
--color-fuchsia: var(--color-fuchsia-600);
|
||||
--color-indigo: var(--color-indigo-600);
|
||||
--color-orange: var(--color-orange-400);
|
||||
--color-buffer: var(--color-white);
|
||||
--color-buffer-medium: var(--color-white);
|
||||
--color-buffer-strong: var(--color-white);
|
||||
--color-muted: var(--color-gray-50);
|
||||
--color-light-subtle: var(--color-gray-100);
|
||||
--color-light: var(--color-gray-100);
|
||||
--color-light-medium: var(--color-gray-100);
|
||||
--color-default-subtle: var(--color-gray-200);
|
||||
--color-default: var(--color-gray-200);
|
||||
--color-default-medium: var(--color-gray-200);
|
||||
--color-default-strong: var(--color-gray-200);
|
||||
--color-success-subtle: var(--color-emerald-200);
|
||||
--color-danger-subtle: var(--color-rose-200);
|
||||
--color-warning-subtle: var(--color-orange-200);
|
||||
--color-brand-subtle: var(--color-blue-200);
|
||||
--color-brand-light: var(--color-blue-600);
|
||||
--color-dark-subtle: var(--color-gray-800);
|
||||
--color-dark-backdrop: var(--color-gray-950);
|
||||
--color-accent: #7c3aed;
|
||||
}
|
||||
@@ -820,12 +878,18 @@
|
||||
.start-0 {
|
||||
inset-inline-start: calc(var(--spacing) * 0);
|
||||
}
|
||||
.end-1 {
|
||||
inset-inline-end: calc(var(--spacing) * 1);
|
||||
}
|
||||
.end-1\.5 {
|
||||
inset-inline-end: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.top-0 {
|
||||
top: calc(var(--spacing) * 0);
|
||||
}
|
||||
.top-1 {
|
||||
top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.top-1\/2 {
|
||||
top: calc(1 / 2 * 100%);
|
||||
}
|
||||
@@ -847,6 +911,9 @@
|
||||
.bottom-0 {
|
||||
bottom: calc(var(--spacing) * 0);
|
||||
}
|
||||
.bottom-1 {
|
||||
bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.bottom-1\.5 {
|
||||
bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
@@ -1276,6 +1343,9 @@
|
||||
margin-left: -10px !important;
|
||||
}
|
||||
}
|
||||
.ml-1 {
|
||||
margin-left: calc(var(--spacing) * 1);
|
||||
}
|
||||
.ml-4 {
|
||||
margin-left: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -1470,9 +1540,15 @@
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
.max-h-40 {
|
||||
max-height: calc(var(--spacing) * 40);
|
||||
}
|
||||
.max-h-full {
|
||||
max-height: 100%;
|
||||
}
|
||||
.min-h-\[28px\] {
|
||||
min-height: 28px;
|
||||
}
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -1541,9 +1617,15 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.w-1 {
|
||||
width: calc(var(--spacing) * 1);
|
||||
}
|
||||
.w-1\/2 {
|
||||
width: calc(1 / 2 * 100%);
|
||||
}
|
||||
.w-2 {
|
||||
width: calc(var(--spacing) * 2);
|
||||
}
|
||||
.w-2\.5 {
|
||||
width: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
@@ -1652,6 +1734,9 @@
|
||||
.shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.border-collapse {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.-translate-x-full {
|
||||
--tw-translate-x: -100%;
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
@@ -1668,6 +1753,10 @@
|
||||
--tw-translate-x: 100%;
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.-translate-y-1 {
|
||||
--tw-translate-y: calc(var(--spacing) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.-translate-y-1\/2 {
|
||||
--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
@@ -1710,6 +1799,9 @@
|
||||
.list-disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.appearance-none {
|
||||
appearance: none;
|
||||
}
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
@@ -2053,6 +2145,9 @@
|
||||
.bg-amber-50 {
|
||||
background-color: var(--color-amber-50);
|
||||
}
|
||||
.bg-black {
|
||||
background-color: var(--color-black);
|
||||
}
|
||||
.bg-black\/70 {
|
||||
background-color: color-mix(in srgb, #000 70%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -2071,6 +2166,15 @@
|
||||
.bg-brand {
|
||||
background-color: var(--color-brand);
|
||||
}
|
||||
.bg-brand\/15 {
|
||||
background-color: color-mix(in srgb, oklch(48.8% 0.243 264.376) 15%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-brand) 15%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-dark-backdrop {
|
||||
background-color: var(--color-dark-backdrop);
|
||||
}
|
||||
.bg-dark-backdrop\/70 {
|
||||
background-color: color-mix(in srgb, oklch(13% 0.028 261.692) 70%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -2089,12 +2193,18 @@
|
||||
.bg-gray-500 {
|
||||
background-color: var(--color-gray-500);
|
||||
}
|
||||
.bg-gray-800 {
|
||||
background-color: var(--color-gray-800);
|
||||
}
|
||||
.bg-gray-800\/20 {
|
||||
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 20%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-gray-800) 20%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-gray-900 {
|
||||
background-color: var(--color-gray-900);
|
||||
}
|
||||
.bg-gray-900\/50 {
|
||||
background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -2209,6 +2319,18 @@
|
||||
fill: white !important;
|
||||
}
|
||||
}
|
||||
.apexcharts-gridline {
|
||||
stroke: var(--color-default) !important;
|
||||
.dark & {
|
||||
stroke: var(--color-default) !important;
|
||||
}
|
||||
}
|
||||
.apexcharts-xcrosshairs {
|
||||
stroke: var(--color-default) !important;
|
||||
.dark & {
|
||||
stroke: var(--color-default) !important;
|
||||
}
|
||||
}
|
||||
.apexcharts-ycrosshairs {
|
||||
stroke: var(--color-default) !important;
|
||||
.dark & {
|
||||
@@ -2267,6 +2389,9 @@
|
||||
.px-6 {
|
||||
padding-inline: calc(var(--spacing) * 6);
|
||||
}
|
||||
.py-0 {
|
||||
padding-block: calc(var(--spacing) * 0);
|
||||
}
|
||||
.py-0\.5 {
|
||||
padding-block: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
@@ -2328,6 +2453,9 @@
|
||||
color: heading !important;
|
||||
}
|
||||
}
|
||||
.pb-1 {
|
||||
padding-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.pb-16 {
|
||||
padding-bottom: calc(var(--spacing) * 16);
|
||||
}
|
||||
@@ -2494,6 +2622,9 @@
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
.text-wrap {
|
||||
text-wrap: wrap;
|
||||
}
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -2620,6 +2751,9 @@
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.no-underline {
|
||||
text-decoration-line: none;
|
||||
}
|
||||
.no-underline\! {
|
||||
text-decoration-line: none !important;
|
||||
}
|
||||
@@ -2683,6 +2817,10 @@
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
.backdrop-filter {
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
.transition {
|
||||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
@@ -2847,6 +2985,11 @@
|
||||
background-color: var(--color-gray-50);
|
||||
}
|
||||
}
|
||||
.empty\:hidden {
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.hover\:scale-110 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -2892,6 +3035,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-brand\/15 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: color-mix(in srgb, oklch(48.8% 0.243 264.376) 15%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-brand) 15%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-gray-50 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -3068,6 +3221,12 @@
|
||||
color: var(--color-blue-700);
|
||||
}
|
||||
}
|
||||
.focus\:ring-0 {
|
||||
&:focus {
|
||||
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
}
|
||||
.focus\:ring-2 {
|
||||
&:focus {
|
||||
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
||||
@@ -3883,6 +4042,51 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:relative {
|
||||
&::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:z-10 {
|
||||
&::-webkit-slider-thumb {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:z-20 {
|
||||
&::-webkit-slider-thumb {
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:h-4 {
|
||||
&::-webkit-slider-thumb {
|
||||
height: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:w-4 {
|
||||
&::-webkit-slider-thumb {
|
||||
width: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:cursor-pointer {
|
||||
&::-webkit-slider-thumb {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:appearance-none {
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:rounded-full {
|
||||
&::-webkit-slider-thumb {
|
||||
border-radius: calc(infinity * 1px);
|
||||
}
|
||||
}
|
||||
.\[\&\:\:-webkit-slider-thumb\]\:bg-brand {
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: var(--color-brand);
|
||||
}
|
||||
}
|
||||
.\[\&\:first-of-type_button\]\:rounded-s-lg {
|
||||
&:first-of-type button {
|
||||
border-start-start-radius: var(--radius-lg);
|
||||
|
||||
@@ -1,20 +1,35 @@
|
||||
import {
|
||||
syncSelectInputUntilChanged,
|
||||
getEl,
|
||||
disableElementsWhenTrue,
|
||||
disableElementsWhenValueNotEqual,
|
||||
} from "./utils.js";
|
||||
import { getEl, disableElementsWhenTrue } from "./utils.js";
|
||||
|
||||
let syncData = [
|
||||
{
|
||||
source: "#id_games",
|
||||
source_value: "dataset.platform",
|
||||
target: "#id_platform",
|
||||
target_value: "value",
|
||||
},
|
||||
];
|
||||
const RELATED_PURCHASE_URL = "/tracker/purchase/related-purchase-by-game";
|
||||
|
||||
syncSelectInputUntilChanged(syncData, "form");
|
||||
// The games field is now a SearchSelect widget (a <div>, not a <select>), so we
|
||||
// react to its custom "search-select:change" event instead of syncing a select.
|
||||
document.addEventListener("search-select:change", (event) => {
|
||||
if (event.detail.name !== "games") return;
|
||||
|
||||
// (a) Auto-fill platform from the clicked option's data-platform.
|
||||
const last = event.detail.last;
|
||||
const platformId = last && last.data ? last.data.platform : "";
|
||||
if (platformId) {
|
||||
const platformEl = getEl("#id_platform");
|
||||
if (platformEl) platformEl.value = platformId;
|
||||
}
|
||||
|
||||
// (b) Refresh #id_related_purchase for the currently selected games.
|
||||
const query = event.detail.values
|
||||
.map((value) => "games=" + encodeURIComponent(value))
|
||||
.join("&");
|
||||
fetch(RELATED_PURCHASE_URL + "?" + query, { credentials: "same-origin" })
|
||||
.then((response) => {
|
||||
if (response.status === 204) return null;
|
||||
return response.text();
|
||||
})
|
||||
.then((html) => {
|
||||
if (html === null) return;
|
||||
const target = getEl("#id_related_purchase");
|
||||
if (target) target.outerHTML = html;
|
||||
});
|
||||
});
|
||||
|
||||
function setupElementHandlers() {
|
||||
disableElementsWhenTrue("#id_type", "game", [
|
||||
@@ -27,5 +42,4 @@ document.addEventListener("DOMContentLoaded", setupElementHandlers);
|
||||
document.addEventListener("htmx:afterSwap", setupElementHandlers);
|
||||
getEl("#id_type").addEventListener("change", () => {
|
||||
setupElementHandlers();
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
@@ -0,0 +1,277 @@
|
||||
/**
|
||||
* SearchSelect widget — a search box paired with a dropdown of options.
|
||||
* Single/multi select; chosen items render as removable pills, each backed by a
|
||||
* hidden <input> so existing Django form validation keeps working.
|
||||
*
|
||||
* Mirrors selectable_filter.js: initAll() on DOMContentLoaded + htmx:afterSwap,
|
||||
* each widget guarded with el._ssInit.
|
||||
*
|
||||
* The pill / option class strings below are kept byte-identical to the Python
|
||||
* Pill / SearchSelect components so Tailwind generates the classes and
|
||||
* server-rendered and JS-created pills are indistinguishable.
|
||||
*/
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var PILL_CLASS =
|
||||
"inline-flex items-center gap-1 px-2 py-0.5 text-sm rounded " +
|
||||
"bg-brand/15 text-heading";
|
||||
var PILL_REMOVE_CLASS =
|
||||
"ml-1 text-body hover:text-heading font-bold cursor-pointer";
|
||||
var OPTION_ROW_CLASS =
|
||||
"px-3 py-2 text-sm text-heading cursor-pointer hover:bg-brand/15";
|
||||
|
||||
var DEBOUNCE_MS = 500;
|
||||
|
||||
function initAll() {
|
||||
document.querySelectorAll("[data-search-select]").forEach(function (el) {
|
||||
if (el._ssInit) return;
|
||||
el._ssInit = true;
|
||||
initWidget(el);
|
||||
});
|
||||
}
|
||||
|
||||
function initWidget(container) {
|
||||
var search = container.querySelector("[data-ss-search]");
|
||||
var options = container.querySelector("[data-ss-options]");
|
||||
var pills = container.querySelector("[data-ss-pills]");
|
||||
if (!search || !options || !pills) return;
|
||||
|
||||
var name = container.getAttribute("data-name");
|
||||
var searchUrl = container.getAttribute("data-search-url");
|
||||
var multi = container.getAttribute("data-multi") === "true";
|
||||
var alwaysVisible = container.getAttribute("data-always-visible") === "true";
|
||||
var itemsScroll = parseInt(container.getAttribute("data-items-scroll"), 10) || 10;
|
||||
var syncUrl = container.getAttribute("data-sync-url") === "true";
|
||||
|
||||
var noResults = options.querySelector("[data-ss-no-results]");
|
||||
var debounceTimer = null;
|
||||
|
||||
function showPanel() {
|
||||
options.classList.remove("hidden");
|
||||
}
|
||||
function hidePanel() {
|
||||
if (!alwaysVisible) options.classList.add("hidden");
|
||||
}
|
||||
|
||||
function setNoResults(visible) {
|
||||
if (noResults) noResults.classList.toggle("hidden", !visible);
|
||||
}
|
||||
|
||||
// ── Render server-fetched rows into the panel ──
|
||||
function renderRows(items) {
|
||||
options.querySelectorAll("[data-ss-option]").forEach(function (r) {
|
||||
r.remove();
|
||||
});
|
||||
items.slice(0, itemsScroll).forEach(function (item) {
|
||||
options.insertBefore(buildRow(item), noResults || null);
|
||||
});
|
||||
setNoResults(items.length === 0);
|
||||
showPanel();
|
||||
}
|
||||
|
||||
function buildRow(option) {
|
||||
var row = document.createElement("div");
|
||||
row.setAttribute("data-ss-option", "");
|
||||
row.setAttribute("data-value", option.value);
|
||||
row.setAttribute("data-label", option.label);
|
||||
row.className = OPTION_ROW_CLASS;
|
||||
var data = option.data || {};
|
||||
Object.keys(data).forEach(function (key) {
|
||||
row.setAttribute("data-" + key, data[key]);
|
||||
});
|
||||
row.textContent = option.label;
|
||||
row._ssOption = option;
|
||||
return row;
|
||||
}
|
||||
|
||||
// ── Client-side filter of pre-rendered rows ──
|
||||
function filterRows(q) {
|
||||
var lower = q.toLowerCase();
|
||||
var anyVisible = false;
|
||||
options.querySelectorAll("[data-ss-option]").forEach(function (item) {
|
||||
var label = (item.getAttribute("data-label") || "").toLowerCase();
|
||||
var match = label.indexOf(lower) !== -1;
|
||||
item.style.display = match ? "" : "none";
|
||||
if (match) anyVisible = true;
|
||||
});
|
||||
setNoResults(!anyVisible);
|
||||
showPanel();
|
||||
}
|
||||
|
||||
function runSearch() {
|
||||
var q = search.value.trim();
|
||||
if (searchUrl && q) {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(function () {
|
||||
fetch(searchUrl + "?q=" + encodeURIComponent(q), {
|
||||
credentials: "same-origin",
|
||||
})
|
||||
.then(function (r) {
|
||||
return r.json();
|
||||
})
|
||||
.then(renderRows)
|
||||
.catch(function () {
|
||||
setNoResults(true);
|
||||
});
|
||||
}, DEBOUNCE_MS);
|
||||
} else {
|
||||
filterRows(q);
|
||||
}
|
||||
}
|
||||
|
||||
search.addEventListener("focus", runSearch);
|
||||
search.addEventListener("input", runSearch);
|
||||
|
||||
// ── Option click → select ──
|
||||
options.addEventListener("click", function (e) {
|
||||
var row = e.target.closest("[data-ss-option]");
|
||||
if (!row) return;
|
||||
var option = optionFromRow(row);
|
||||
selectOption(option);
|
||||
});
|
||||
|
||||
function optionFromRow(row) {
|
||||
if (row._ssOption) return row._ssOption;
|
||||
var data = {};
|
||||
Object.keys(row.dataset).forEach(function (key) {
|
||||
if (key !== "value" && key !== "label" && key !== "ssOption") {
|
||||
data[key] = row.dataset[key];
|
||||
}
|
||||
});
|
||||
return {
|
||||
value: row.getAttribute("data-value"),
|
||||
label: row.getAttribute("data-label"),
|
||||
data: data,
|
||||
};
|
||||
}
|
||||
|
||||
function selectOption(option) {
|
||||
if (multi) {
|
||||
if (!pills.querySelector('input[value="' + cssEscape(option.value) + '"]')) {
|
||||
addPill(option);
|
||||
}
|
||||
} else {
|
||||
pills.innerHTML = "";
|
||||
addPill(option);
|
||||
search.value = option.label;
|
||||
hidePanel();
|
||||
}
|
||||
emitChange(option);
|
||||
}
|
||||
|
||||
function addPill(option) {
|
||||
pills.appendChild(buildPill(option));
|
||||
pills.appendChild(buildHidden(option.value));
|
||||
}
|
||||
|
||||
function buildPill(option) {
|
||||
var pill = document.createElement("span");
|
||||
pill.className = PILL_CLASS;
|
||||
pill.setAttribute("data-pill", "");
|
||||
pill.setAttribute("data-value", option.value);
|
||||
var data = option.data || {};
|
||||
Object.keys(data).forEach(function (key) {
|
||||
pill.setAttribute("data-" + key, data[key]);
|
||||
});
|
||||
pill.appendChild(document.createTextNode(option.label));
|
||||
var remove = document.createElement("button");
|
||||
remove.type = "button";
|
||||
remove.setAttribute("data-pill-remove", "");
|
||||
remove.className = PILL_REMOVE_CLASS;
|
||||
remove.setAttribute("aria-label", "Remove");
|
||||
remove.textContent = "×";
|
||||
pill.appendChild(remove);
|
||||
return pill;
|
||||
}
|
||||
|
||||
function buildHidden(value) {
|
||||
var input = document.createElement("input");
|
||||
input.type = "hidden";
|
||||
input.name = name;
|
||||
input.value = value;
|
||||
return input;
|
||||
}
|
||||
|
||||
// ── Pill × → remove ──
|
||||
pills.addEventListener("click", function (e) {
|
||||
var removeBtn = e.target.closest("[data-pill-remove]");
|
||||
if (!removeBtn) return;
|
||||
var pill = removeBtn.closest("[data-pill]");
|
||||
if (!pill) return;
|
||||
var value = pill.getAttribute("data-value");
|
||||
pill.remove();
|
||||
var hidden = pills.querySelector('input[value="' + cssEscape(value) + '"]');
|
||||
if (hidden) hidden.remove();
|
||||
emitChange(null);
|
||||
});
|
||||
|
||||
function currentValues() {
|
||||
return Array.prototype.map.call(
|
||||
pills.querySelectorAll('input[type="hidden"]'),
|
||||
function (input) {
|
||||
return input.value;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function emitChange(last) {
|
||||
var values = currentValues();
|
||||
if (syncUrl) syncToUrl(values);
|
||||
container.dispatchEvent(
|
||||
new CustomEvent("search-select:change", {
|
||||
bubbles: true,
|
||||
detail: { name: name, values: values, last: last },
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function syncToUrl(values) {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
params.delete(name);
|
||||
values.forEach(function (v) {
|
||||
params.append(name, v);
|
||||
});
|
||||
var qs = params.toString();
|
||||
history.replaceState(null, "", qs ? "?" + qs : window.location.pathname);
|
||||
}
|
||||
|
||||
// On init, restore from URL params if the server supplied no selected pills.
|
||||
if (syncUrl && !pills.querySelector("[data-pill]")) {
|
||||
var initial = new URLSearchParams(window.location.search).getAll(name);
|
||||
initial.forEach(function (v) {
|
||||
addPill({ value: v, label: v, data: {} });
|
||||
});
|
||||
}
|
||||
|
||||
// ── Close panel on outside click ──
|
||||
document.addEventListener("click", function (e) {
|
||||
if (!container.contains(e.target)) hidePanel();
|
||||
});
|
||||
}
|
||||
|
||||
/** Minimal escape for use inside an attribute-value selector. */
|
||||
function cssEscape(value) {
|
||||
return String(value).replace(/["\\]/g, "\\$&");
|
||||
}
|
||||
|
||||
// Forward-looking hook (parallels readSelectableFilters): write each widget's
|
||||
// current values to a data-values JSON attribute.
|
||||
window.readSearchSelect = function (form) {
|
||||
form.querySelectorAll("[data-search-select]").forEach(function (container) {
|
||||
var pills = container.querySelector("[data-ss-pills]");
|
||||
var values = pills
|
||||
? Array.prototype.map.call(
|
||||
pills.querySelectorAll('input[type="hidden"]'),
|
||||
function (input) {
|
||||
return input.value;
|
||||
}
|
||||
)
|
||||
: [];
|
||||
container.setAttribute("data-values", JSON.stringify(values));
|
||||
});
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", initAll);
|
||||
document.addEventListener("htmx:afterSwap", initAll);
|
||||
})();
|
||||
Reference in New Issue
Block a user