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

Various web components

import{WebComponentBaseClass as t}from"/third_party/web-component-base-class/dist/web-component-base-class.js";import"../vicowa-image-carousel/vicowa-image-carousel.js";import"../vicowa-modal/vicowa-modal.js";window.customElements.define("vicowa-image-gallery",class VicowaImageGallery extends t{#t;#e;constructor(){super(),this.#t=null,this.#e=[]}static get properties(){return{noGridToolTip:{type:Boolean,value:!1,reflectToAttribute:!0},noCarouselToolTip:{type:Boolean,value:!1,reflectToAttribute:!0},noGridDescription:{type:Boolean,value:!1,reflectToAttribute:!0},noCarouselDescription:{type:Boolean,value:!1,reflectToAttribute:!0}}}setImageProvider(t){this.#t=t,this.addAutoEventListener(this.$.images,"click",(t=>{const e=t.target?t.target.closest("[carousel-index]"):null;e&&(this.$.modal.open=!0,this.$.carousel.startIndex=parseInt(e.getAttribute("carousel-index"),10))})),this.addAutoEventListener(this.$.closeCarousel,"click",(()=>{this.$.modal.open=!1})),this.$.images.innerHTML="",this.#t&&this.#i()}async#i(){(await this.#t.getImages()).forEach(((t,e)=>{this.#e[e]={thumbNail:(t.thumbNail||t.fullSize||[]).slice(),fullSize:(t.fullSize||t.thumbNail||[]).slice(),description:t.description,tooltip:t.tooltip,alt:t.alt};let i=document.querySelector(`[carousel-index="${e}]"`),o=null;i||(o=i?i.querySelector("vicowa-image-container"):null,o||(i=o=document.createElement("vicowa-image-container"),i.setAttribute("lazyload","")),this.$.images.appendChild(i)),i.setAttribute("carousel-index",e),o.alternates=this.#e[e].thumbNail.slice(),o.description=t.description,o.tooltip=t.tooltip,o.alt=(t.alt||t.description||t.tooltip||"").trim()})),this.$.carousel.images=this.#e.map((t=>({alternates:t.fullSize.slice(),description:t.description,alt:t.alt,tooltip:t.tooltip})))}static get template(){return'\n\t\t\t<style>\n\t\t\t\t:host {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\n\t\t\t\t#images {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-wrap: wrap;\n\t\t\t\t}\n\t\t\n\t\t\t\tvicowa-image-container {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tflex: 0 0 auto;\n\t\t\t\t\tmargin-right: 1em;\n\t\t\t\t\tmargin-bottom: 1em;\n\t\t\t\t\twidth: var(--vicowa-image-gallery-tile-width, 200px);\n\t\t\t\t\theight: var(--vicowa-image-gallery-tile-height, 200px);\n\t\t\t\t\tbox-shadow: var(--vicowa-image-gallery-tile-shadow, 2px 2px 8px grey);\n\t\t\t\t\tborder: var(--vicowa-image-gallery-tile-border, none);\n\t\t\t\t}\n\t\t\n\t\t\t\tvicowa-modal [slot] {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t\twidth: 90vw;\n\t\t\t\t\theight: 90vh;\n\t\t\t\t\tbox-shadow: 10px 10px 30px black;\n\t\t\t\t\talign-content: stretch;\n\t\t\t\t\talign-items: stretch;\n\t\t\t\t\tbackground: lightgrey;\n\t\t\t\t}\n\t\t\n\t\t\t\t#carousel {\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\theight: calc(100% - 40px);\n\t\t\t\t\t--vicowa-image-carousel-width: 100%;\n\t\t\t\t\tfont-size: 1.5em;\n\t\t\t\t\tpadding: .5em .5em 0;\n\t\t\t\t\tbackground: white;\n\t\t\t\t}\n\t\t\n\t\t\t\t#close-carousel {\n\t\t\t\t\tflex: 0 0 40px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\talign-self: center;\n\t\t\t\t\twidth: 50px;\n\t\t\t\t\tfont: bold 2em sans-serif;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\tpadding-top: 5px;\n\t\t\t\t}\n\t\t\n\t\t\t\t#custom-tile {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([no-grid-description]) #images vicowa-image-container {\n\t\t\t\t\t--vicowa-image-container-description-visibility: hidden;\n\t\t\t\t}\n\t\t\t\t:host([no-grid-tooltip]) #images vicowa-image-container {\n\t\t\t\t\t--vicowa-image-container-image-pointer-events: none;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([no-carousel-description]) vicowa-image-carousel {\n\t\t\t\t\t--vicowa-image-container-description-visibility: hidden;\n\t\t\t\t}\n\t\t\t\t:host([no-carousel-tooltip]) vicowa-image-carousel {\n\t\t\t\t\t--vicowa-image-container-image-pointer-events: none;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div id="images">\n\t\t\t</div>\n\t\t\t<vicowa-modal id="modal" outside-closes>\n\t\t\t\t<div slot="content">\n\t\t\t\t\t<vicowa-image-carousel id="carousel" loop></vicowa-image-carousel>\n\t\t\t\t\t<div id="close-carousel">X</div>\n\t\t\t\t</div>\n\t\t\t</vicowa-modal>\n\t\t'}});
//# sourceMappingURL=vicowa-image-gallery.js.map