mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-01 03:48:04 +00:00
Fix bad constructor when adding attrs that are not part of the parent and fix tom-select on safari
This commit is contained in:
parent
677ff51ea5
commit
66dceefcf0
@ -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?: <T>(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 `<div class="no-results">${interpolate(gettext("You need to type %(number)s more characters"), { number: minCharNumberForsearch - data.input.length }, true)}</div>`;
|
||||
return `<div class="no-results">${interpolate(gettext("You need to type %(number)s more characters"), { number: minCharNumberForSearch - data.input.length }, true)}</div>`;
|
||||
},
|
||||
// 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);
|
||||
|
@ -187,7 +187,7 @@ class MarkdownInput extends InheritedComponent<"textarea"> {
|
||||
constructor() {
|
||||
super("textarea");
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => loadEasyMde(this.widget));
|
||||
window.addEventListener("DOMContentLoaded", () => loadEasyMde(this.node));
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
@ -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();
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -157,13 +157,12 @@
|
||||
<h5>{% trans %}People{% endtrans %}</h5>
|
||||
{% if user.was_subscribed %}
|
||||
<form @submit.prevent="submitIdentification" x-show="!!selector">
|
||||
<select
|
||||
<ajax-select
|
||||
x-ref="search"
|
||||
is="ajax-select"
|
||||
multiple
|
||||
data-delay="300"
|
||||
data-placeholder="{%- trans -%}Identify users on pictures{%- endtrans -%}"
|
||||
></select>
|
||||
></ajax-select>
|
||||
<input type="submit" value="{% trans %}Go{% endtrans %}"/>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
Loading…
Reference in New Issue
Block a user