container-picture-element
Version:
HTML picture custom element that works with container queries
1 lines • 3.83 kB
Source Map (JSON)
{"version":3,"sources":["../src/container-picture.ts"],"sourcesContent":["class ContainerPicture extends HTMLElement {\n divs: HTMLDivElement[] = [];\n\n constructor() {\n super();\n this.attachShadow({ mode: \"open\" });\n // Add style tag\n const style = document.createElement(\"style\");\n style.setAttribute(\"type\", \"text/css\");\n this.shadowRoot?.appendChild(style);\n // Add slot to listen to slot change and update the shadow DOM\n const slot = document.createElement(\"slot\");\n this.shadowRoot?.appendChild(slot);\n this.shadowRoot?.addEventListener(\"slotchange\", () => {\n this.updateStyle();\n this.transformSource();\n });\n }\n\n connectedCallback(): void {\n this.updateStyle();\n this.transformSource();\n }\n\n transformSource(): void {\n for (const div of this.divs) {\n div.remove();\n }\n const images = this.querySelectorAll<HTMLImageElement | HTMLSourceElement>(\n \"source, img\",\n );\n for (let i = 0; i < images.length; i++) {\n const div = document.createElement(\"div\");\n this.shadowRoot?.appendChild(div);\n this.divs.push(div);\n }\n }\n\n updateStyle(): void {\n const images = this.querySelectorAll<HTMLImageElement | HTMLSourceElement>(\n \"source, img\",\n );\n\n let css = `\n:host {\n display: inline-block;\n}\nslot {\n display: none;\n}`;\n for (let i = 0; i < images.length; i++) {\n const image = images[i];\n const container = image.getAttribute(\"container\");\n css += `\n:nth-child(${Number(i) + 3}) {\n background: url(${image.src || image.srcset});\n width: ${image.width ? image.width + \"px\" : \"auto\"};\n height: ${image.height ? image.height + \"px\" : \"auto\"};\n ${container ? \"display: none\" : \"display: inline-block\"};\n}`;\n }\n\n for (let i = images.length; i > 0; i--) {\n const image = images[i - 1];\n const container = image.getAttribute(\"container\");\n if (container) {\n css += `\n@container ${container} {\n :nth-child(${i + 2}) {\n display: inline-block;\n }\n :not(:nth-child(${i + 2})) {\n display: none;\n }\n}`;\n }\n }\n\n const style = this.shadowRoot?.querySelector(\"style\");\n if (style) {\n style.textContent = css;\n }\n }\n}\n\ncustomElements.define(\"container-picture\", ContainerPicture);\n"],"mappings":";;;;;;AAAA,IAAM,mBAAN,cAA+B,YAAY;AAAA,EAGzC,cAAc;AACZ,UAAM;AAHR,gCAAyB,CAAC;AAIxB,SAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAElC,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,aAAa,QAAQ,UAAU;AACrC,SAAK,YAAY,YAAY,KAAK;AAElC,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,YAAY,YAAY,IAAI;AACjC,SAAK,YAAY,iBAAiB,cAAc,MAAM;AACpD,WAAK,YAAY;AACjB,WAAK,gBAAgB;AAAA,IACvB,CAAC;AAAA,EACH;AAAA,EAEA,oBAA0B;AACxB,SAAK,YAAY;AACjB,SAAK,gBAAgB;AAAA,EACvB;AAAA,EAEA,kBAAwB;AACtB,eAAW,OAAO,KAAK,MAAM;AAC3B,UAAI,OAAO;AAAA,IACb;AACA,UAAM,SAAS,KAAK;AAAA,MAClB;AAAA,IACF;AACA,aAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,YAAM,MAAM,SAAS,cAAc,KAAK;AACxC,WAAK,YAAY,YAAY,GAAG;AAChC,WAAK,KAAK,KAAK,GAAG;AAAA,IACpB;AAAA,EACF;AAAA,EAEA,cAAoB;AAClB,UAAM,SAAS,KAAK;AAAA,MAClB;AAAA,IACF;AAEA,QAAI,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOV,aAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,YAAM,QAAQ,OAAO,CAAC;AACtB,YAAM,YAAY,MAAM,aAAa,WAAW;AAChD,aAAO;AAAA,aACA,OAAO,CAAC,IAAI,CAAC;AAAA,oBACN,MAAM,OAAO,MAAM,MAAM;AAAA,WAClC,MAAM,QAAQ,MAAM,QAAQ,OAAO,MAAM;AAAA,YACxC,MAAM,SAAS,MAAM,SAAS,OAAO,MAAM;AAAA,IACnD,YAAY,kBAAkB,uBAAuB;AAAA;AAAA,IAErD;AAEA,aAAS,IAAI,OAAO,QAAQ,IAAI,GAAG,KAAK;AACtC,YAAM,QAAQ,OAAO,IAAI,CAAC;AAC1B,YAAM,YAAY,MAAM,aAAa,WAAW;AAChD,UAAI,WAAW;AACb,eAAO;AAAA,aACF,SAAS;AAAA,eACP,IAAI,CAAC;AAAA;AAAA;AAAA,oBAGA,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA,IACF;AAEA,UAAM,QAAQ,KAAK,YAAY,cAAc,OAAO;AACpD,QAAI,OAAO;AACT,YAAM,cAAc;AAAA,IACtB;AAAA,EACF;AACF;AAEA,eAAe,OAAO,qBAAqB,gBAAgB;","names":[]}