110 lines
3.7 KiB
JavaScript
110 lines
3.7 KiB
JavaScript
let multiSelectLoader = null;
|
|
|
|
const resolveScriptUrl = (script) => {
|
|
if (script) return script;
|
|
const assetBase = window.APP_ASSET_BASE || document.baseURI;
|
|
return new URL('vendor/multi-select/MultiSelect.js', assetBase).toString();
|
|
};
|
|
|
|
const ensureMultiSelect = async (script) => {
|
|
if (typeof window.MultiSelect !== 'undefined') {
|
|
return window.MultiSelect;
|
|
}
|
|
if (!multiSelectLoader) {
|
|
multiSelectLoader = new Promise((resolve, reject) => {
|
|
const tag = document.createElement('script');
|
|
tag.src = resolveScriptUrl(script);
|
|
tag.async = true;
|
|
tag.onload = () => resolve(window.MultiSelect);
|
|
tag.onerror = (event) => reject(event);
|
|
document.head.appendChild(tag);
|
|
});
|
|
}
|
|
return multiSelectLoader;
|
|
};
|
|
|
|
export const initMultiSelect = async (target = '[data-multi-select]') => {
|
|
const elements = typeof target === 'string' ? document.querySelectorAll(target) : [target];
|
|
if (!elements.length) return [];
|
|
|
|
const MultiSelect = await ensureMultiSelect();
|
|
const instances = [];
|
|
elements.forEach((element) => {
|
|
if (!element || element.dataset.multiSelectInit === '1') return;
|
|
const syncTarget = element.dataset.syncTarget;
|
|
const syncInput = syncTarget ? document.querySelector(syncTarget) : null;
|
|
const options = {};
|
|
const placeholder = element.dataset.placeholder;
|
|
if (placeholder) options.placeholder = placeholder;
|
|
if (element.dataset.search !== undefined) {
|
|
options.search = element.dataset.search === 'true';
|
|
}
|
|
if (element.dataset.selectAll !== undefined) {
|
|
options.selectAll = element.dataset.selectAll === 'true';
|
|
}
|
|
if (element.dataset.disabled !== undefined) {
|
|
options.disabled = element.dataset.disabled === 'true';
|
|
}
|
|
if (element.disabled) {
|
|
options.disabled = true;
|
|
}
|
|
if (element.dataset.listAll !== undefined) {
|
|
options.listAll = element.dataset.listAll === 'true';
|
|
}
|
|
if (element.dataset.selectedLabel) {
|
|
options.selectedLabel = element.dataset.selectedLabel;
|
|
}
|
|
if (element.dataset.searchPlaceholder) {
|
|
options.searchPlaceholder = element.dataset.searchPlaceholder;
|
|
}
|
|
if (element.dataset.selectAllLabel) {
|
|
options.selectAllLabel = element.dataset.selectAllLabel;
|
|
}
|
|
let isSyncing = false;
|
|
let instance;
|
|
try {
|
|
instance = new MultiSelect(element, options);
|
|
} catch (error) {
|
|
console.error('[multi-select] init failed', element, error);
|
|
return;
|
|
}
|
|
if (element.dataset.disabled === 'true' || element.disabled) {
|
|
instance.disable();
|
|
}
|
|
element.dataset.multiSelectInit = '1';
|
|
instances.push(instance);
|
|
if (syncInput) {
|
|
syncInput._multiSelectInstance = instance;
|
|
const syncValues = () => {
|
|
if (!syncInput || isSyncing) return;
|
|
isSyncing = true;
|
|
const values = instance.selectedValues || [];
|
|
syncInput.value = Array.isArray(values) ? values.join(',') : '';
|
|
syncInput.dispatchEvent(new Event('change', { bubbles: true }));
|
|
isSyncing = false;
|
|
};
|
|
instance.element.addEventListener('multi-select:change', syncValues);
|
|
const values = instance.selectedValues || [];
|
|
syncInput.value = Array.isArray(values) ? values.join(',') : '';
|
|
syncInput.addEventListener('change', () => {
|
|
if (isSyncing) return;
|
|
const nextValues = syncInput.value
|
|
? syncInput.value.split(',').map((item) => item.trim()).filter(Boolean)
|
|
: [];
|
|
instance.setValues(nextValues);
|
|
});
|
|
}
|
|
});
|
|
return instances;
|
|
};
|
|
|
|
const autoInit = () => {
|
|
initMultiSelect().catch(() => {});
|
|
};
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', autoInit);
|
|
} else {
|
|
autoInit();
|
|
}
|