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

Various web components

import{WebComponentBaseClass as t}from"/third_party/web-component-base-class/dist/web-component-base-class.js";import e from"../utilities/translate.js";import"../vicowa-string/vicowa-string.js";import"/third_party/intersection-observer/intersection-observer.js";window.customElements.define("vicowa-image-container",class VicowaImageContainer extends t{#t;#e;#i;constructor(){super()}static get properties(){return Object.assign({},super.properties,{tooltip:{type:String,value:"",reflectToAttribute:!0,observer:t=>t.#n()},alt:{type:String,value:"",reflectToAttribute:!0,observer:t=>t.#r()},description:{type:String,value:"",reflectToAttribute:!0,observer:t=>t.#s()},src:{type:String,value:"",reflectToAttribute:!0,observer:t=>t.#a()},galleryGroup:{type:String,value:"",reflectToAttribute:!0},alternates:{type:Array,value:[],reflectToAttribute:!0,observer:t=>t.#o()},lazyload:{type:Boolean,value:!1,reflectToAttribute:!0,observer:t=>t.#l()}})}updateTranslation(){this.$.image.title=this.#e&&this.tooltip?this.#e.translate(this.tooltip).fetch():this.tooltip,this.$.image.alt=this.#e&&this.alt?this.#e.translate(this.alt).fetch():this.alt}attached(){e.addTranslationUpdatedObserver((t=>{this.#e=t,this.updateTranslation()}),this),this.$.image.onload=()=>{this.onload&&this.onload()}}#n(){this.tooltip?(this.$.image.title=this.tooltip,this.updateTranslation()):this.$.image.removeAttribute("title")}#r(){this.alt?(this.$.image.alt=this.alt,this.updateTranslation()):this.$.image.removeAttribute("alt")}#s(){this.$.description.string=this.description,this.updateTranslation()}#o(){if(!this.hasAttribute("lazyload")||this.#t){const t=(this.alternates||[]).slice();this.$$$("picture source").forEach((t=>{t.parentNode.removeChild(t)})),(t.length||this.src)&&(t.length&&t[t.length-1]===this.src||!this.src||t.push(this.src),t.slice(0,-1).forEach((t=>{const e=document.createElement("source");e.setAttribute("srcset",t.replace(/ /g,"%20")),/\./.test(t)&&e.setAttribute("type",`image/${t.split(".").slice(-1)[0]}`),this.$.picture.insertBefore(e,this.$.image)})),this.$.image.src=t.slice(-1)[0].replace(/ /g,"%20"))}}#a(){this.#o()}#l(){this.lazyload?(this.#i=new IntersectionObserver((t=>{t[0].intersectionRatio>0&&(this.#t=!0,this.#o())})),this.#i.observe(this)):this.#i&&(this.#i.disconnect(),this.#i=null)}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}\n\t\t\n\t\t\t\t#image-container {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\t\t\n\t\t\t\t.description-container {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tbottom: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tvisibility: var(--vicowa-image-container-description-visibility, visible);\n\t\t\t\t}\n\t\t\n\t\t\t\t.description-container .background {\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\tbackground: var(--vicowa-image-container-description-background, rgba(0, 0, 0, 0.7));\n\t\t\t\t}\n\t\t\n\t\t\t\t#description {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tpadding: 3px;\n\t\t\t\t\tcolor: var(--vicowa-image-container-description-color, white);\n\t\t\t\t}\n\t\t\n\t\t\t\t#description[string=""],\n\t\t\t\t\t#description:not([string]) {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\n\t\t\t\t#image {\n\t\t\t\t\tpointer-events: var(--vicowa-image-container-image-pointer-events, all);\n\t\t\t\t}\n\t\t\n\t\t\t\timg {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tobject-fit: var(--vicowa-image-container-object-fit, contain);\n\t\t\t\t\tobject-position: 50% 0;\n\t\t\t\t}\n\t\t\n\t\t\t</style>\n\t\t\t<div id="image-container">\n\t\t\t\t<picture id="picture">\n\t\t\t\t\t<img id="image" src="">\n\t\t\t\t</picture>\n\t\t\t\t<div class="description-container">\n\t\t\t\t\t<div class="background"></div>\n\t\t\t\t\t<vicowa-string id="description"></vicowa-string>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t'}});
//# sourceMappingURL=vicowa-image-container.js.map