5820c162f6
- Remove dead CSS color property in .tab-mobile - Fix design token violations (text-red-500, fallback colors) - Add disconnectedCallback to chip-scroll, image-upload, searchable-select - Replace innerHTML with safe DOM APIs in world-map screen reader table - Add credentials: same-origin to WebAuthn fetch calls - Move page-specific scripts (donut-chart, location) out of base.html - Add client-side image resizing (1920px max dimension) - Resize app-icon-512.png from 2048x2048 to 512x512 - Document Datastar unsafe-eval CSP requirement - Add static asset serving tests (16 routes) - Add e2e tests for world-map, donut-chart, chip-scroll presence - Add cache-busting query params to all static asset URLs
48 lines
1.4 KiB
JavaScript
48 lines
1.4 KiB
JavaScript
customElements.define(
|
|
"chip-scroll",
|
|
class extends HTMLElement {
|
|
connectedCallback() {
|
|
this._setup();
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this._observer?.disconnect();
|
|
this._resizeObserver?.disconnect();
|
|
this._scroller?.removeEventListener("scroll", this._scrollHandler);
|
|
}
|
|
|
|
_setup() {
|
|
this.disconnectedCallback();
|
|
|
|
const scroller = this.querySelector("[data-chip-scroll]");
|
|
const btnL = this.querySelector("[data-scroll-left]");
|
|
const btnR = this.querySelector("[data-scroll-right]");
|
|
if (!scroller || !btnL || !btnR) return;
|
|
|
|
this._scroller = scroller;
|
|
|
|
const update = () => {
|
|
if (window.matchMedia("(max-width: 767px)").matches) {
|
|
btnL.style.display = "none";
|
|
btnR.style.display = "none";
|
|
return;
|
|
}
|
|
btnL.style.display = scroller.scrollLeft > 0 ? "flex" : "none";
|
|
btnR.style.display =
|
|
scroller.scrollLeft + scroller.clientWidth < scroller.scrollWidth - 1
|
|
? "flex"
|
|
: "none";
|
|
};
|
|
|
|
this._scrollHandler = update;
|
|
scroller.addEventListener("scroll", update, { passive: true });
|
|
this._resizeObserver = new ResizeObserver(update);
|
|
this._resizeObserver.observe(scroller);
|
|
|
|
this._observer = new MutationObserver(update);
|
|
this._observer.observe(scroller, { childList: true });
|
|
|
|
update();
|
|
}
|
|
},
|
|
);
|