diff --git a/components/dist/strip-select.js b/components/dist/strip-select.js index 36242c2..49b382a 100644 --- a/components/dist/strip-select.js +++ b/components/dist/strip-select.js @@ -9,20 +9,24 @@ stripSelect.innerHTML = ` } :host{ padding: 1rem 0; + max-width: 100%; } .hide{ - display: none !important; + opacity: 0; + pointer-events: none; } input[type="radio"]{ display: none; } .scrolling-container{ position: relative; - display: flex; - align-items: center; + display: grid; + grid-template-columns: min-content minmax(0,1fr) min-content; + grid-template-rows: 1fr; } .strip-select{ position: relative; + grid-area: 1/1/2/-1; } :host([multiline]) .strip-select{ display: flex; @@ -40,32 +44,42 @@ stripSelect.innerHTML = ` } .nav-button{ display: flex; - top: 50%; z-index: 2; border: none; padding: 0.3rem; cursor: pointer; - position: absolute; align-items: center; background: rgba(var(--background-color,(255,255,255)), 1); - transform: translateY(-50%); + transition: opacity 0.2s; + grid-row: 1; + } + .nav-button--left{ + grid-column: 1; + justify-self: start; } .nav-button--right{ - right: 0; + grid-column: 3; + justify-self: end; } .cover{ - position: absolute; z-index: 1; width: 5rem; height: 100%; pointer-events: none; + grid-row: 1; + } + .cover--left{ + grid-column: 1; + } + .cover--right{ + grid-column: 3; } .nav-button--right::before{ background-color: red; } .icon{ - height: 1.5rem; - width: 1.5rem; + height: 1.2rem; + width: 1.2rem; fill: rgba(var(--text-color,(17,17,17)), .8); } @media (hover: none){ @@ -165,11 +179,11 @@ customElements.define('strip-select', class extends HTMLElement { this._value = value; this.assignedElements.forEach(elem => { if (elem.value === value) { - elem.setAttribute('active', ''); + elem.setAttribute('selected', ''); elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }); } else - elem.removeAttribute('active') + elem.removeAttribute('selected') }); } @@ -193,34 +207,36 @@ customElements.define('strip-select', class extends HTMLElement { const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left'); const navButtonRight = this.shadowRoot.querySelector('.nav-button--right'); slot.addEventListener('slotchange', e => { - this.assignedElements = slot.assignedElements(); - this.assignedElements.forEach(elem => { - if (elem.hasAttribute('selected')) { - elem.setAttribute('active', ''); - this._value = elem.value; + // debounce to wait for all elements to be assigned + clearTimeout(this.slotChangeTimeout); + this.slotChangeTimeout = setTimeout(() => { + this.assignedElements = slot.assignedElements(); + this.assignedElements.forEach(elem => { + if (elem.hasAttribute('selected')) { + this._value = elem.value; + } + }); + if (!this.hasAttribute('multiline')) { + if (this.assignedElements.length > 0) { + firstOptionObserver.observe(this.assignedElements[0]); + lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]); + } + else { + navButtonLeft.classList.add('hide'); + navButtonRight.classList.add('hide'); + coverLeft.classList.add('hide'); + coverRight.classList.add('hide'); + firstOptionObserver.disconnect(); + lastOptionObserver.disconnect(); + } } - }); - if (!this.hasAttribute('multiline')) { - if (this.assignedElements.length > 0) { - firstOptionObserver.observe(this.assignedElements[0]); - lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]); - } - else { - navButtonLeft.classList.add('hide'); - navButtonRight.classList.add('hide'); - coverLeft.classList.add('hide'); - coverRight.classList.add('hide'); - firstOptionObserver.disconnect(); - lastOptionObserver.disconnect(); - } - } + }, 100); }); const resObs = new ResizeObserver(entries => { entries.forEach(entry => { if (entry.contentBoxSize) { // Firefox implements `contentBoxSize` as a single content rect, rather than an array const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; - this.scrollDistance = contentBoxSize.inlineSize * 0.6; } else { this.scrollDistance = entry.contentRect.width * 0.6; @@ -295,9 +311,9 @@ stripOption.innerHTML = ` border-radius: var(--border-radius, 2rem); -webkit-tap-highlight-color: transparent; } - :host([active]) .strip-option{ - color: var(--active-option-color, rgba(var(--background-color,white))); - background-color: var(--active-background-color, var(--accent-color,teal)); + :host([selected]) .strip-option{ + color: var(--selected-option-color, rgba(var(--background-color,white))); + background-color: var(--selected-background-color, var(--accent-color,teal)); } :host(:focus-within){ outline: none; @@ -305,7 +321,7 @@ stripOption.innerHTML = ` :host(:focus-within) .strip-option{ box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset; } - :host(:hover:not([active])) .strip-option{ + :host(:hover:not([selected])) .strip-option{ background-color: rgba(var(--text-color,(17,17,17)), 0.06); } diff --git a/components/dist/strip-select.min.js b/components/dist/strip-select.min.js index 17fb80d..634a00a 100644 --- a/components/dist/strip-select.min.js +++ b/components/dist/strip-select.min.js @@ -1 +1 @@ -const stripSelect=document.createElement("template");stripSelect.innerHTML='\n\n
\n
\n \n
\n \n
\n \n
\n
\n\n',customElements.define("strip-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripSelect.content.cloneNode(!0)),this.stripSelect=this.shadowRoot.querySelector(".strip-select"),this.slottedOptions=void 0,this._value=void 0,this.scrollDistance=0,this.assignedElements=[],this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this),this.setSelectedOption=this.setSelectedOption.bind(this)}get value(){return this._value}set value(t){this.setSelectedOption(t)}scrollLeft(){this.stripSelect.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.stripSelect.scrollBy({left:this.scrollDistance,behavior:"smooth"})}setSelectedOption(t){this._value!==t&&(this._value=t,this.assignedElements.forEach(e=>{e.value===t?(e.setAttribute("active",""),e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})):e.removeAttribute("active")}))}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){this.setAttribute("role","listbox");const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".cover--left"),n=this.shadowRoot.querySelector(".cover--right"),i=this.shadowRoot.querySelector(".nav-button--left"),s=this.shadowRoot.querySelector(".nav-button--right");t.addEventListener("slotchange",o=>{this.assignedElements=t.assignedElements(),this.assignedElements.forEach(t=>{t.hasAttribute("selected")&&(t.setAttribute("active",""),this._value=t.value)}),this.hasAttribute("multiline")||(this.assignedElements.length>0?(r.observe(this.assignedElements[0]),a.observe(this.assignedElements[this.assignedElements.length-1])):(i.classList.add("hide"),s.classList.add("hide"),e.classList.add("hide"),n.classList.add("hide"),r.disconnect(),a.disconnect()))});const o=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*e.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});o.observe(this),this.stripSelect.addEventListener("option-clicked",t=>{this._value!==t.target.value&&(this.setSelectedOption(t.target.value),this.fireEvent())});const r=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(i.classList.add("hide"),e.classList.add("hide")):(i.classList.remove("hide"),e.classList.remove("hide"))})},{threshold:.9,root:this}),a=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(s.classList.add("hide"),n.classList.add("hide")):(s.classList.remove("hide"),n.classList.remove("hide"))})},{threshold:.9,root:this});i.addEventListener("click",this.scrollLeft),s.addEventListener("click",this.scrollRight)}disconnectedCallback(){navButtonLeft.removeEventListener("click",this.scrollLeft),navButtonRight.removeEventListener("click",this.scrollRight)}});const stripOption=document.createElement("template");stripOption.innerHTML='\n\n\n',customElements.define("strip-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripOption.content.cloneNode(!0)),this._value=void 0,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.key||this.fireEvent()}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}}); \ No newline at end of file +const stripSelect=document.createElement("template");stripSelect.innerHTML='\n\n
\n
\n \n
\n \n
\n \n
\n
\n\n',customElements.define("strip-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripSelect.content.cloneNode(!0)),this.stripSelect=this.shadowRoot.querySelector(".strip-select"),this.slottedOptions=void 0,this._value=void 0,this.scrollDistance=0,this.assignedElements=[],this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this),this.setSelectedOption=this.setSelectedOption.bind(this)}get value(){return this._value}set value(e){this.setSelectedOption(e)}scrollLeft(){this.stripSelect.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.stripSelect.scrollBy({left:this.scrollDistance,behavior:"smooth"})}setSelectedOption(e){this._value!==e&&(this._value=e,this.assignedElements.forEach(t=>{t.value===e?(t.setAttribute("selected",""),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})):t.removeAttribute("selected")}))}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){this.setAttribute("role","listbox");const e=this.shadowRoot.querySelector("slot"),t=this.shadowRoot.querySelector(".cover--left"),n=this.shadowRoot.querySelector(".cover--right"),i=this.shadowRoot.querySelector(".nav-button--left"),s=this.shadowRoot.querySelector(".nav-button--right");e.addEventListener("slotchange",o=>{clearTimeout(this.slotChangeTimeout),this.slotChangeTimeout=setTimeout(()=>{this.assignedElements=e.assignedElements(),this.assignedElements.forEach(e=>{e.hasAttribute("selected")&&(this._value=e.value)}),this.hasAttribute("multiline")||(this.assignedElements.length>0?(r.observe(this.assignedElements[0]),l.observe(this.assignedElements[this.assignedElements.length-1])):(i.classList.add("hide"),s.classList.add("hide"),t.classList.add("hide"),n.classList.add("hide"),r.disconnect(),l.disconnect()))},100)});const o=new ResizeObserver(e=>{e.forEach(e=>{if(e.contentBoxSize){const t=Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.scrollDistance=.6*t.inlineSize}else this.scrollDistance=.6*e.contentRect.width})});o.observe(this),this.stripSelect.addEventListener("option-clicked",e=>{this._value!==e.target.value&&(this.setSelectedOption(e.target.value),this.fireEvent())});const r=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?(i.classList.add("hide"),t.classList.add("hide")):(i.classList.remove("hide"),t.classList.remove("hide"))})},{threshold:.9,root:this}),l=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?(s.classList.add("hide"),n.classList.add("hide")):(s.classList.remove("hide"),n.classList.remove("hide"))})},{threshold:.9,root:this});i.addEventListener("click",this.scrollLeft),s.addEventListener("click",this.scrollRight)}disconnectedCallback(){navButtonLeft.removeEventListener("click",this.scrollLeft),navButtonRight.removeEventListener("click",this.scrollRight)}});const stripOption=document.createElement("template");stripOption.innerHTML='\n\n\n',customElements.define("strip-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripOption.content.cloneNode(!0)),this._value=void 0,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(e){"Enter"!==e.key&&"Space"!==e.key||this.fireEvent()}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}}); \ No newline at end of file diff --git a/components/index.html b/components/index.html index 52678b5..0dfca5a 100644 --- a/components/index.html +++ b/components/index.html @@ -2394,10 +2394,11 @@ } function downloadJs(componentsArray, options = { minified: true }) { const { minified } = options + const selectedComponentsList = [...getRef('components_selection_list').querySelectorAll('sm-checkbox[checked]')].map(v => v.value) const extension = minified ? '.min.js' : '.js' const element = createElement('a', { attributes: { - 'href': 'data:application/javascript;charset=utf-8,' + encodeURIComponent(componentsArray.join("\n")), + 'href': 'data:application/javascript;charset=utf-8,' + encodeURIComponent(`// Components downloaded: ${selectedComponentsList.join(',')} \n ${componentsArray.join("\n")}`), 'download': `components${extension}`, 'style': 'display:none' } diff --git a/components/index.min.html b/components/index.min.html index 00fdfab..4019e41 100644 --- a/components/index.min.html +++ b/components/index.min.html @@ -780,10 +780,11 @@ } function downloadJs(componentsArray, options = { minified: true }) { const { minified } = options + const selectedComponentsList = [...getRef('components_selection_list').querySelectorAll('sm-checkbox[checked]')].map(v => v.value) const extension = minified ? '.min.js' : '.js' const element = createElement('a', { attributes: { - 'href': 'data:application/javascript;charset=utf-8,' + encodeURIComponent(componentsArray.join("\n")), + 'href': 'data:application/javascript;charset=utf-8,' + encodeURIComponent(`// Components downloaded: ${selectedComponentsList.join(',')} \n ${componentsArray.join("\n")}`), 'download': `components${extension}`, 'style': 'display:none' } diff --git a/components/test.html b/components/test.html index cbc9748..1a61149 100644 --- a/components/test.html +++ b/components/test.html @@ -18,6 +18,7 @@ +