From 66dceefcf00ca0560adf4e60511388bfa3194e13 Mon Sep 17 00:00:00 2001 From: Sli Date: Wed, 16 Oct 2024 14:59:02 +0200 Subject: [PATCH] Fix bad constructor when adding attrs that are not part of the parent and fix tom-select on safari --- core/static/webpack/ajax-select-index.ts | 23 +++++++++++---------- core/static/webpack/easymde-index.ts | 2 +- core/static/webpack/utils/web-components.ts | 14 +++++++------ sas/static/webpack/sas/viewer-index.ts | 3 +++ sas/templates/sas/picture.jinja | 5 ++--- 5 files changed, 26 insertions(+), 21 deletions(-) diff --git a/core/static/webpack/ajax-select-index.ts b/core/static/webpack/ajax-select-index.ts index f1eb1190..b03ae32f 100644 --- a/core/static/webpack/ajax-select-index.ts +++ b/core/static/webpack/ajax-select-index.ts @@ -1,15 +1,16 @@ import "tom-select/dist/css/tom-select.css"; +import { InheritedComponent } from "#core:utils/web-components"; import TomSelect from "tom-select"; import type { TomItem, TomLoadCallback, TomOption } from "tom-select/dist/types/types"; import type { escape_html } from "tom-select/dist/types/utils"; import { type UserProfileSchema, userSearchUsers } from "#openapi"; -export class AjaxSelect extends HTMLSelectElement { +export class AjaxSelect extends InheritedComponent<"select"> { widget: TomSelect; filter?: (items: T[]) => T[]; constructor() { - super(); + super("select"); window.addEventListener("DOMContentLoaded", () => { this.loadTomSelect(); @@ -17,25 +18,25 @@ export class AjaxSelect extends HTMLSelectElement { } loadTomSelect() { - const minCharNumberForsearch = 2; + const minCharNumberForSearch = 2; let maxItems = 1; - if (this.multiple) { - maxItems = Number.parseInt(this.dataset.max) ?? null; + if (this.node.multiple) { + maxItems = Number.parseInt(this.node.dataset.max) ?? null; } - this.widget = new TomSelect(this, { + this.widget = new TomSelect(this.node, { hideSelected: true, diacritics: true, duplicates: false, maxItems: maxItems, - loadThrottle: Number.parseInt(this.dataset.delay) ?? null, + loadThrottle: Number.parseInt(this.node.dataset.delay) ?? null, valueField: "id", labelField: "display_name", searchField: ["display_name", "nick_name", "first_name", "last_name"], - placeholder: this.dataset.placeholder ?? "", + placeholder: this.node.dataset.placeholder ?? "", shouldLoad: (query: string) => { - return query.length >= minCharNumberForsearch; // Avoid launching search with less than 2 characters + return query.length >= minCharNumberForSearch; // Avoid launching search with less than 2 characters }, load: (query: string, callback: TomLoadCallback) => { userSearchUsers({ @@ -70,7 +71,7 @@ export class AjaxSelect extends HTMLSelectElement { }, // biome-ignore lint/style/useNamingConvention: that's how it's defined not_loading: (data: TomOption, _sanitize: typeof escape_html) => { - return `
${interpolate(gettext("You need to type %(number)s more characters"), { number: minCharNumberForsearch - data.input.length }, true)}
`; + return `
${interpolate(gettext("You need to type %(number)s more characters"), { number: minCharNumberForSearch - data.input.length }, true)}
`; }, // biome-ignore lint/style/useNamingConvention: that's how it's defined no_results: (_data: TomOption, _sanitize: typeof escape_html) => { @@ -85,4 +86,4 @@ export class AjaxSelect extends HTMLSelectElement { } } -window.customElements.define("ajax-select", AjaxSelect, { extends: "select" }); +window.customElements.define("ajax-select", AjaxSelect); diff --git a/core/static/webpack/easymde-index.ts b/core/static/webpack/easymde-index.ts index 664d4291..5bc8a370 100644 --- a/core/static/webpack/easymde-index.ts +++ b/core/static/webpack/easymde-index.ts @@ -187,7 +187,7 @@ class MarkdownInput extends InheritedComponent<"textarea"> { constructor() { super("textarea"); - window.addEventListener("DOMContentLoaded", () => loadEasyMde(this.widget)); + window.addEventListener("DOMContentLoaded", () => loadEasyMde(this.node)); } } diff --git a/core/static/webpack/utils/web-components.ts b/core/static/webpack/utils/web-components.ts index 4d4f41b4..82d039eb 100644 --- a/core/static/webpack/utils/web-components.ts +++ b/core/static/webpack/utils/web-components.ts @@ -4,7 +4,7 @@ * create a new web component * create the desired type inside * pass all attributes to the child component - * store is at as a widget inside the parent + * store is at as `node` inside the parent * * To use this, you must use the tag name twice, once for creating the class * and the second time while calling super to pass it to the constructor @@ -12,20 +12,22 @@ export class InheritedComponent< K extends keyof HTMLElementTagNameMap, > extends HTMLElement { - widget: HTMLElementTagNameMap[K]; + node: HTMLElementTagNameMap[K]; constructor(tagName: K) { super(); - this.widget = document.createElement(tagName); + this.node = document.createElement(tagName); const attributes: Attr[] = []; // We need to make a copy to delete while iterating for (const attr of this.attributes) { - attributes.push(attr); + if (attr.name in this.node) { + attributes.push(attr); + } } for (const attr of attributes) { this.removeAttributeNode(attr); - this.widget.setAttributeNode(attr); + this.node.setAttributeNode(attr); } - this.appendChild(this.widget); + this.appendChild(this.node); } } diff --git a/sas/static/webpack/sas/viewer-index.ts b/sas/static/webpack/sas/viewer-index.ts index 2222a7a3..b084810c 100644 --- a/sas/static/webpack/sas/viewer-index.ts +++ b/sas/static/webpack/sas/viewer-index.ts @@ -307,7 +307,10 @@ exportToHtml("loadViewer", (config: ViewerConfig) => { }); // refresh the identified users list await this.currentPicture.loadIdentifications({ forceReload: true }); + + // Clear selection and cache of retrieved user so they can be filtered again widget.clear(false); + widget.clearOptions(); }, /** diff --git a/sas/templates/sas/picture.jinja b/sas/templates/sas/picture.jinja index 879b5a8d..43651383 100644 --- a/sas/templates/sas/picture.jinja +++ b/sas/templates/sas/picture.jinja @@ -157,13 +157,12 @@
{% trans %}People{% endtrans %}
{% if user.was_subscribed %}
- + >
{% endif %}