/* globals svgEditor */
import { t } from '../locale.js'
const template = document.createElement('template')
template.innerHTML = `
<style>
#select-container {
margin-top: 10px;
display: inline-block;
}
#select-container:hover {
background-color: var(--icon-bg-color-hover);
}
#select-container::part(value) {
background-color: var(--main-bg-color);
}
#select-container::part(popup-toggle) {
display: none;
}
::slotted(*) {
padding:0;
width:100%;
}
.closed {
display: none;
}
#options-container {
position: fixed;
}
</style>
<label>Label</label>
<div id="select-container" tabindex="0">
<div id="selected-value"></div>
<div id="options-container">
<slot></slot>
</div>
</div>
`
/**
* @class SeList
*/
export class SeList extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super()
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({ mode: 'open' })
this._shadowRoot.append(template.content.cloneNode(true))
this.$dropdown = this._shadowRoot.querySelector('#select-container')
this.$label = this._shadowRoot.querySelector('label')
this.$selection = this.$dropdown.querySelector('#selected-value')
this.items = this.querySelectorAll('se-list-item')
this.imgPath = svgEditor.configObj.curConfig.imgPath
this.$optionsContainer = this._shadowRoot.querySelector('#options-container')
this.$optionsContainer.classList.add('closed')
this.$selection.addEventListener('click', this.toggleList)
this.updateSelectedValue(this.items[0].getAttribute('value'))
this.isDropdownOpen = false
}
toggleList = (e) => {
if (!this.isDropdownOpen) {
this.openDropdown()
this.setDropdownListPosition()
} else {
this.closeDropdown()
}
}
updateSelectedValue = (newValue) => {
Array.from(this.items).forEach((element) => {
if (element.getAttribute('value') === newValue) {
element.setAttribute('selected', true)
if (element.hasAttribute('src')) {
// empty current selection children
while (this.$selection.firstChild) { this.$selection.removeChild(this.$selection.firstChild) }
// replace selection child with image of new value
const img = document.createElement('img')
img.src = this.imgPath + '/' + element.getAttribute('src')
img.style.height = element.getAttribute('img-height')
img.setAttribute('title', t(element.getAttribute('title')))
this.$selection.append(img)
} else {
this.$selection.textContent = t(element.getAttribute('option'))
}
} else {
element.setAttribute('selected', false)
}
})
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
return ['label', 'width', 'height', 'title', 'value']
}
/**
* @function attributeChangedCallback
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue) return
switch (name) {
case 'title':
this.$dropdown.setAttribute('title', t(newValue))
break
case 'label':
this.$label.textContent = t(newValue)
break
case 'height':
this.$dropdown.style.height = newValue
break
case 'width':
this.$dropdown.style.width = newValue
break
case 'value':
this.updateSelectedValue(newValue)
break
default:
console.error(`unknown attribute: ${name}`)
break
}
}
/**
* @function get
* @returns {any}
*/
get title () {
return this.getAttribute('title')
}
/**
* @function set
* @returns {void}
*/
set title (value) {
this.setAttribute('title', value)
}
/**
* @function get
* @returns {any}
*/
get label () {
return this.getAttribute('label')
}
/**
* @function set
* @returns {void}
*/
set label (value) {
this.setAttribute('label', value)
}
/**
* @function get
* @returns {any}
*/
get width () {
return this.getAttribute('width')
}
/**
* @function set
* @returns {void}
*/
set width (value) {
this.setAttribute('width', value)
}
/**
* @function get
* @returns {any}
*/
get height () {
return this.getAttribute('height')
}
/**
* @function set
* @returns {void}
*/
set height (value) {
this.setAttribute('height', value)
}
openDropdown = () => {
this.isDropdownOpen = true
this.$optionsContainer.classList.remove('closed')
}
closeDropdown = () => {
this.isDropdownOpen = false
this.$optionsContainer.classList.add('closed')
}
setDropdownListPosition = () => {
const windowHeight = window.innerHeight
const selectedContainerPosition = this.$selection.getBoundingClientRect()
const optionsContainerPosition = this.$optionsContainer.getBoundingClientRect()
// list is bottom of frame - needs to open from above
if (selectedContainerPosition.bottom + optionsContainerPosition.height > windowHeight) {
this.$optionsContainer.style.top = selectedContainerPosition.top - optionsContainerPosition.height + 'px'
this.$optionsContainer.style.left = selectedContainerPosition.left + 'px'
} else {
this.$optionsContainer.style.top = selectedContainerPosition.bottom + 'px'
this.$optionsContainer.style.left = selectedContainerPosition.left + 'px'
}
}
/**
* @function connectedCallback
* @returns {void}
*/
connectedCallback () {
const currentObj = this
this.$dropdown.addEventListener('selectedindexchange', (e) => {
if (e?.detail?.selectedItem !== undefined) {
const value = e.detail.selectedItem
const closeEvent = new CustomEvent('change', { detail: { value } })
currentObj.dispatchEvent(closeEvent)
currentObj.value = value
currentObj.setAttribute('value', value)
}
})
this.$dropdown.addEventListener('focusout', (e) => {
this.closeDropdown()
})
window.addEventListener('mousedown', e => {
// When we click on the canvas and if the dropdown is open, then just close the dropdown and stop the event
if (this.isDropdownOpen) {
if (!e.target.closest('se-list')) {
e.stopPropagation()
this.closeDropdown()
}
}
}, { capture: true })
}
}
// Register
customElements.define('se-list', SeList)