Sha256: 351dc3f7c2412a34f35905e0fa8dc30e38014bc5791533ee126d5bf000e4b1eb
Contents?: true
Size: 1.92 KB
Versions: 19
Compression:
Stored size: 1.92 KB
Contents
import { get } from "alchemy_admin/utils/ajax"
import { translate } from "alchemy_admin/i18n"
class DomIdSelect extends HTMLElement {
dataItem(hash) {
return {
id: `#${hash}`,
text: `#${hash}`
}
}
get selectElement() {
return this.querySelector('select[is="alchemy-select"]')
}
}
class DomIdApiSelect extends DomIdSelect {
#pageId = undefined
connectedCallback() {
this.page = this.getAttribute("page")
}
async #fetchDomIds() {
const result = await get(Alchemy.routes.api_ingredients_path, {
page_id: this.#pageId
})
const options = result.data.ingredients
.filter((ingredient) => ingredient.data?.dom_id)
.map((ingredient) => this.dataItem(ingredient.data.dom_id))
const prompt =
options.length > 0 ? translate("None") : translate("No anchors found")
this.selectElement.setOptions(options, prompt)
this.selectElement.enable()
}
#reset() {
// wait a tick to initialize the alchemy-select
requestAnimationFrame(() => {
this.selectElement.disable()
this.selectElement.setOptions([], translate("Select a page first"))
})
}
set page(pageId) {
this.#pageId = pageId
pageId ? this.#fetchDomIds() : this.#reset()
}
}
class DomIdPreviewSelect extends DomIdSelect {
connectedCallback() {
// wait a tick to let the browser initialize the inner select component
requestAnimationFrame(() => {
const frame = document.getElementById("alchemy_preview_window")
const elements = frame.contentDocument?.querySelectorAll("[id]") || []
if (elements.length > 0) {
const options = Array.from(elements).map((element) => {
return this.dataItem(element.id)
})
this.selectElement.setOptions(options, translate("None"))
}
})
}
}
customElements.define("alchemy-dom-id-api-select", DomIdApiSelect)
customElements.define("alchemy-dom-id-preview-select", DomIdPreviewSelect)
Version data entries
19 entries across 19 versions & 1 rubygems