vicowa-web-components/dist/vicowa-image-carousel/vicowa-image-carousel.js

Various web components

import{WebComponentBaseClass as t}from"/third_party/web-component-base-class/dist/web-component-base-class.js";import"../vicowa-image-container/vicowa-image-container.js";import"../vicowa-button/vicowa-button.js";window.customElements.define("vicowa-image-carousel",class VicowaImageCarousel extends t{#t;#i;constructor(){super(),this.#t=0,this.#i=0}static get properties(){return Object.assign({},super.properties,{images:{type:Array,value:[],observer:t=>t.#e()},startIndex:{type:Number,value:0,reflectToAttribute:!0,observer:t=>t.#n()},loop:{type:Boolean,value:!1,reflectToAttribute:!0},auto:{type:Number,value:0,reflectToAttribute:!0,observer:t=>t.#s()}})}attached(){this.addAutoEventListener(this.$.previous,"click",(()=>{this.goToPrevious()})),this.addAutoEventListener(this.$.next,"click",(()=>{this.goToNext()}))}goToNext(){this.classList.toggle("transitioning",!0),this.classList.toggle("next",!0),this.#i=0;const t=()=>{this.#t=this.#t<this.images.length-1?this.#t+1:0,this.classList.toggle("transitioning",!1),this.classList.toggle("next",!1),this.#a(),this.removeAutoEventListener(this.$.pictures,"transitionend",t),this.auto&&(this.#i=setTimeout((()=>{this.goToNext()}),this.auto))};this.addAutoEventListener(this.$.pictures,"transitionend",t)}goToPrevious(){this.classList.toggle("transitioning",!0),this.classList.toggle("previous",!0);const t=()=>{this.#t=this.#t>0?this.#t-1:this.images.length-1,this.classList.toggle("transitioning",!1),this.classList.toggle("previous",!1),this.#a(),this.removeAutoEventListener(this.$.pictures,"transitionend",t)};this.addAutoEventListener(this.$.pictures,"transitionend",t)}goToIndex(t){this.startIndex=Math.min(Math.max(0,t),this.images.length-1),this.#t=this.startIndex,this.#a()}#o(){this.classList.toggle("start",0===this.#t),this.classList.toggle("end",this.#t===this.images.length-1)}#a(){if(this.#o(),this.#t<this.images.length){const t=this.images[this.#t];t&&(this.$.currentImage.alternates=t.alternates,this.$.currentImage.description=t.description||"",this.$.currentImage.alt=(t.alt||t.description||t.tooltip||"").trim(),this.$.currentImage.tooltip=t.tooltip||"");const i=this.#t>0?this.images[this.#t-1]:this.images[this.images.length-1];i&&(this.$.previousImage.alternates=i.alternates,this.$.previousImage.description=i.description||"",this.$.previousImage.alt=(i.alt||i.description||i.tooltip||"").trim(),this.$.previousImage.tooltip=i.tooltip||"");const e=this.#t<this.images.length-1?this.images[this.#t+1]:this.images[0];e&&(this.$.nextImage.alternates=e.alternates,this.$.nextImage.description=e.description||"",this.$.nextImage.alt=(e.alt||e.description||e.tooltip||"").trim(),this.$.nextImage.tooltip=e.tooltip||"")}}#e(){this.#t=0,this.#a()}#n(){this.goToIndex(this.startIndex)}#s(){this.auto=Math.max(0,this.auto||0),!this.#i&&this.auto?(this.loop=!0,this.#i=setTimeout((()=>{this.goToNext()}),1e3)):this.#i&&!this.auto&&(clearTimeout(this.#i),this.#i=0)}static get template(){return'\n\t\t\t<style>\n\t\t\t\t:host {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\twidth: var(--vicowa-image-carousel-width, 200px);\n\t\t\t\t}\n\t\t\n\t\t\t\t#controls {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tright: 0;\n\t\t\t\t\tbottom: 0;\n\t\t\t\t\tdisplay: grid;\n\t\t\t\t\tgrid-template-columns: 50px auto 50px;\n\t\t\t\t\tgrid-template-rows: auto 40px;\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t}\n\t\t\n\t\t\t\t.left,\n\t\t\t\t.right {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tgrid-row-start: span 2;\n\t\t\t\t}\n\t\t\n\t\t\t\t#pictures {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t}\n\t\t\n\t\t\t\tvicowa-image-container {\n\t\t\t\t\twidth: var(--vicowa-image-carousel-width, 200px);\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\t\t\n\t\t\t\t#moving-part {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: calc(var(--vicowa-image-carousel-width, 200px) * 3);\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tleft: calc(-1 * var(--vicowa-image-carousel-width, 200px));\n\t\t\t\t}\n\t\t\n\t\t\t\t:host(.transitioning) #moving-part {\n\t\t\t\t\ttransition: left var(--vicowa-image-carousel-animation-time, 1s);\n\t\t\t\t}\n\t\t\t\t:host(.next) #moving-part {\n\t\t\t\t\tleft: calc(-2 * var(--vicowa-image-carousel-width, 200px));\n\t\t\t\t}\n\t\t\t\t:host(.previous) #moving-part {\n\t\t\t\t\tleft: 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host(.transitioning) .right,\n\t\t\t\t:host(.transitioning) .left {\n\t\t\t\t\topacity: 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t.right,\n\t\t\t\t.left {\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\ttransition: opacity .5s;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host(:not(.transitioning)[loop]) .right,\n\t\t\t\t:host(:not(.transitioning)[loop]) .left,\n\t\t\t\t:host(:not(.transitioning):not(.end)) .right,\n\t\t\t\t:host(:not(.transitioning):not(.start)) .left {\n\t\t\t\t\tpointer-events: all;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\n\t\t\t\t.arrow-top {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\twidth: 31px;\n\t\t\t\t\theight: 3px;\n\t\t\t\t\tleft: 10px;\n\t\t\t\t\ttop: 16px;\n\t\t\t\t\tborder: 2px solid black;\n\t\t\t\t\tbackground: white;\n\t\t\t\t\ttransform: rotate(45deg);\n\t\t\t\t}\n\t\t\n\t\t\t\t.arrow-bottom {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: 38px;\n\t\t\t\t\tleft: 10px;\n\t\t\t\t\twidth: 29px;\n\t\t\t\t\theight: 3px;\n\t\t\t\t\tborder: 2px solid black;\n\t\t\t\t\tborder-right: none;\n\t\t\t\t\tbackground: white;\n\t\t\t\t\ttransform: rotate(-45deg);\n\t\t\t\t}\n\t\t\n\t\t\t\t.arrow-container {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 50px;\n\t\t\t\t\theight: 60px;\n\t\t\t\t}\n\t\t\n\t\t\t\t#previous .arrow-container {\n\t\t\t\t\ttransform: rotate(180deg);\n\t\t\t\t}\n\t\t\n\t\t\t</style>\n\t\t\t<div id="pictures">\n\t\t\t\t<div id="moving-part">\n\t\t\t\t\t<vicowa-image-container id="previous-image"></vicowa-image-container>\n\t\t\t\t\t<vicowa-image-container id="current-image"></vicowa-image-container>\n\t\t\t\t\t<vicowa-image-container id="next-image"></vicowa-image-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div id="controls">\n\t\t\t\t<div class="left"><slot id="previous" name="previous-control"><div class="arrow-container"><div class="arrow-top"></div><div class="arrow-bottom"></div></div></slot></div>\n\t\t\t\t<div class="center"></div>\n\t\t\t\t<div class="right"><slot id="next" name="next-control"><div class="arrow-container"><div class="arrow-top"></div><div class="arrow-bottom"></div></div></slot></div>\n\t\t\t\t<div class="bottom"><div id="progress"></div></div>\n\t\t\t</div>\n\t\t'}});
//# sourceMappingURL=vicowa-image-carousel.js.map