Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 5x 5x 5x 5x 5x 5x 30x 30x 30x 30x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 1x 1x 1x 1x 1x 1x 1x 35x 35x 35x 35x 35x 35x 35x 18x 18x 35x 18x 18x 35x 18x 18x 35x 17x 17x 35x 17x 17x 17x 17x 35x 35x | import { computeOnce } from '../../utils/memoization.js'
import defaultTemplatesHtml from './default-select-templates.inline.html'
/**
* @typedef {object} MutableTemplates
* @property {HTMLTemplateElement} option - option template in the dropdown and button
* @property {HTMLTemplateElement} singleSelectInput - single select button template
* @property {HTMLTemplateElement} multiSelectInput - multi select button template
* @property {HTMLTemplateElement} mobileMultiSelectInput - mobile ui for multi select button template
* @property {HTMLTemplateElement} dropdownList - dropdown option list template
* @property {HTMLTemplateElement} loadingNotification - loading notification template
*/
/**
* @typedef {Readonly<MutableTemplates>} Templates
*/
/**
* @returns {Templates} default templates to use as fallback
*/
const loadSelectDefaultTemplates = computeOnce(() => {
const templatesRootElement = document.createElement('template')
templatesRootElement.innerHTML = defaultTemplatesHtml
/**
* @param {string} name - template id on './dynamic-select.templates.html'
*/
const query = (name) => {
const result = templatesRootElement.content.querySelector('template#' + name)
if (!(result instanceof HTMLTemplateElement)) { throw Error(`Error: default template "${JSON.stringify(name)}" not defined`) }
return result
}
const templates = Object.freeze({
option: query('option'),
singleSelectInput: query('single-select-input'),
multiSelectInput: query('multi-select-input'),
mobileMultiSelectInput: query('multi-select-input--mobile'),
dropdownList: query('dropdown-list'),
loadingNotification: query('loading-notification'),
})
return templates
})
/**
* @param {HTMLElement} element - target element
* @returns {Templates} templates object of `element`
*/
export function templatesOf (element) {
return {
get option () {
const scopedTemplate = element.querySelector(':scope > template[data-for="option"]')
if (scopedTemplate) { return scopedTemplate }
return loadSelectDefaultTemplates().option
},
get singleSelectInput () {
return loadSelectDefaultTemplates().singleSelectInput
},
get multiSelectInput () {
return loadSelectDefaultTemplates().multiSelectInput
},
get mobileMultiSelectInput () {
return loadSelectDefaultTemplates().mobileMultiSelectInput
},
get dropdownList () {
return loadSelectDefaultTemplates().dropdownList
},
get loadingNotification () {
const scopedTemplate = element.querySelector(':scope > template[data-for="loading-notification"]')
if (scopedTemplate) { return scopedTemplate }
return loadSelectDefaultTemplates().loadingNotification
},
}
}
|