@dkvz/img-lightbox 0.2.0 → 1.0.0

package/README.md

@@ -9,6 +9,8 @@ I quickly made this in regard to a blog article I was writing, it could be impro
 
 Uncompressed minified size: 8.5Kb including the loading spinner image.
 
+**Note**: we no longer minify the build - It seems to be standard practice for libraries nowadays.
+
 ## Using the component from npm
 To use it in a project with a module bundler, install the dependency first:
 ```
@@ -44,6 +46,22 @@ img-lightbox:active, img-lightbox:focus {
 }
 ```
 
+You also may have strange spacing issues if the a and img elements have their default "inline" display mode. Which could be changed like so:
+```css
+img-lightbox a, img-lightbox img {
+  display: block;
+}
+```
+
+This is also where you should set any max-width or max-height. Or you could set it on img-lightbox itself but then you need to set width and height to 100% as in:
+```css
+img-lightbox a, img-lightbox img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+```
+
 ## Building the component
 
 ### Build requirements
@@ -62,11 +80,6 @@ Build using either:
 ```
 npm run build
 ```
-For the shadow DOM (default) version and:
-```
-npm run build-no-shadow
-```
-For the version that does not use the shadow DOM API at all.
 
 You'll find the build script in the `dist` folder.
 
@@ -77,8 +90,20 @@ To manually use it in some page, you could do something like this:
   customElements.define('img-lightbox', ImgLightbox.default);
 </script>
 ```
+**Update 2025**: There is a .mjs file built as well and it might be a good idea to use that one (with `type="module" in the script tag`).
+
 The loading icon SVG file is normally not necessary but since I change my mind all the time about it you might want to copy it along anyway.
 
+## Build without shadow DOM
+In the past I had a way to build the component without using the shadow DOM at all, which has a few consequences but I think the main idea was to support some old browsers.
+
+Anyway, after upgrading Parcel to v2 I didn't take time to fix the build command for the no-shadow DOM version.
+
+It used to be:
+```
+npm run build-no-shadow
+```
+
 The no-shadow DOM version also requires extra styles to work. See `src/no-shadow/index.pug`.
 
 ## Remarks
@@ -122,12 +147,27 @@ if (event.altKey)
 ## Resources and copyright notices
 - The hourglass icon has been modified from the GPL-licensed file here: https://fr.wikipedia.org/wiki/Fichier:Circle-icons-hourglass.svg
 
+## Upgrade to parcel 2
+The doc: https://parceljs.org/migration/parcel-1/
+
+I removed all of these deps:
+```
+"parcel-bundler": "^1.12.4",
+"parcel-plugin-clean-dist": "0.0.6",
+"parcel-plugin-url-loader": "^1.3.1",
+```
+
+Then added the latest parcel through npm install. 
+
+I need to add a manual wipe of the dist folder before the build commands, doing a quick rimraf for now.
+
+I also had to change how the loading SVG gets inlined. It's now imported as a string.
+
 ## TODO
 - [ ] Test on all browsers
 - [ ] Write tests - Probably going to need jsdom
 - [x] Don't forget to register the keyboard events
 - [x] Use template tags, they say it's better (here)[https://github.com/GoogleChromeLabs/howto-components/blob/master/elements/howto-checkbox/howto-checkbox.js]
-- [ ] Document how to check for web component browser support
 - [x] Disable overflow on the fullscreen overlay
 - [x] Make a shadow DOM version
 - [x] To maximize accessibility we need some kind of focus outline

package/dist/img-lightbox.js

@@ -1,6 +1,198 @@
-parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"q71P":[function(require,module,exports) {
-module.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2NCA2NCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPjxtZXRhZGF0YT48cmRmOlJERj48Y2M6V29yayByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIvPjxkYzp0aXRsZS8+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPgo8Zz4KCQk8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIzMiIgY3k9IjMyIiByPSIzMiIvPgoJPC9nPjxnIGNsYXNzPSJzdDEiIG9wYWNpdHk9Ii4yIj4KCQk8cGF0aCBjbGFzcz0ic3QyIiBkPSJtNDYgNTBoLTJ2LTRjMC00LjUtMy03LjQtMy03LjRzLTMtMi44LTMuOS0zLjcgMC0xLjggMC0xLjggMS4zLTEuMyA0LjItNGMyLjgtMi43IDIuNy02LjcgMi43LTYuN3YtNS4xbC0xMi0xLTEyIDF2NS4xcy0wLjEgMy45IDIuNyA2LjdjMi44IDIuNyA0LjIgNCA0LjIgNHMwLjkgMC45IDAgMS44LTMuOSAzLjctMy45IDMuNy0zIDIuOC0zIDcuNHY0aC0yYy0xLjEgMC0yIDAuOS0yIDJzMC45IDIgMiAyaDI4YzEuMSAwIDItMC45IDItMnMtMC45LTItMi0yeiIgZmlsbD0iIzIzMWYyMCIvPgoJPC9nPgoJCTxwYXRoIGNsYXNzPSJzdDMiIGQ9Im00MSAzNi42cy0zLTIuOC0zLjktMy43IDAtMS44IDAtMS44IDEuMy0xLjMgNC4yLTRjMi44LTIuNyAyLjctNi43IDIuNy02Ljd2LTUuMWwtMTItMS0xMiAxdjUuMXMtMC4xIDMuOSAyLjcgNi43YzIuOCAyLjcgNC4yIDQgNC4yIDRzMC45IDAuOSAwIDEuOC0zLjkgMy43LTMuOSAzLjctMyAyLjgtMyA3LjR2NS4xaDI0di01LjFjMC00LjUtMy03LjQtMy03LjR6IiBmaWxsPSIjZmZmIi8+CgkKCQk8cGF0aCBjbGFzcz0ic3Q0IiBkPSJtMzEgNDN2LTExYzAtMi4xLTEtMy40LTEuMy0zLjdsLTQuMi00Yy0xLjUtMS40LTEuNS0zLjctMS41LTMuN2gxNnMwIDIuMy0xLjUgMy43bC00LjIgNGMtMC40IDAuMy0xLjMgMS42LTEuMyAzLjd2MTF6Ii8+Cgk8ZyBjbGFzcz0ic3Q1IiBvcGFjaXR5PSIuMyI+CgkJPHBhdGggY2xhc3M9InN0MiIgZD0ibTQ4IDE2YzAgMS4xLTAuOSAyLTIgMmgtMjhjLTEuMSAwLTItMC45LTItMnMwLjktMiAyLTJoMjhjMS4xIDAgMiAwLjkgMiAyeiIgZmlsbD0iIzIzMWYyMCIvPgoJPC9nPjxnIGZpbGw9IiNmZmYiPgoJCTxwYXRoIGNsYXNzPSJzdDYiIGQ9Im00OCAxNGMwIDEuMS0wLjkgMi0yIDJoLTI4Yy0xLjEgMC0yLTAuOS0yLTJzMC45LTIgMi0yaDI4YzEuMSAwIDIgMC45IDIgMnoiIGZpbGw9IiNmZmYiLz4KCTwvZz48ZyBmaWxsPSIjZmZmIj4KCQk8cGF0aCBjbGFzcz0ic3Q2IiBkPSJtNDggNTBjMCAxLjEtMC45IDItMiAyaC0yOGMtMS4xIDAtMi0wLjktMi0yczAuOS0yIDItMmgyOGMxLjEgMCAyIDAuOSAyIDJ6IiBmaWxsPSIjZmZmIi8+Cgk8L2c+PGc+CgkJPHBvbHlnb24gY2xhc3M9InN0NCIgcG9pbnRzPSIyMyA0OCAyMyA0OCAzMiA0MCA0MSA0OCIvPgoJPC9nPgoKPC9zdmc+Cg==";
-},{}],"wPYj":[function(require,module,exports) {
-"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function o(t,e,o){return e&&n(t.prototype,e),o&&n(t,o),t}function r(e,n){return!n||"object"!==t(n)&&"function"!=typeof n?i(e):n}function i(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&f(t,e)}function l(t){var e="function"==typeof Map?new Map:void 0;return(l=function(t){if(null===t||!c(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,n)}function n(){return u(t,arguments,h(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),f(n,t)})(t)}function s(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}function u(t,e,n){return(u=s()?Reflect.construct:function(t,e,n){var o=[null];o.push.apply(o,e);var r=new(Function.bind.apply(t,o));return n&&f(r,n.prototype),r}).apply(null,arguments)}function c(t){return-1!==Function.toString.call(t).indexOf("[native code]")}function f(t,e){return(f=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function h(t){return(h=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var d=require("../../assets/hourglass.svg"),y=function(t){function n(){var t;return e(this,n),(t=r(this,h(n).call(this))).loading=!1,t.attachShadow({mode:"open"}),t}return a(n,l(HTMLElement)),o(n,[{key:"connectedCallback",value:function(){this.shadowRoot.appendChild(this.template.content.cloneNode(!0)),this.overlay=this.shadowRoot.querySelector("#overlay"),this.loadingOverlay=this.shadowRoot.querySelector("#loader"),this.tabIndex=0;var t=this.querySelector("a"),e=this.querySelector("img");t?(this.fullImage=t.getAttribute("href"),t.tabIndex=-1):e&&(this.fullImage=e.getAttribute("src")),this.fullImage&&this._addListeners()}},{key:"_addListeners",value:function(){var t=this;this.addEventListener("click",this.showLightbox.bind(this),!0),this.addEventListener("keydown",function(e){if(!e.altKey)switch(e.keyCode){case 13:case 32:t.showLightbox(e);default:return}},!0)}},{key:"showLightbox",value:function(t){var e=this;t.preventDefault(),this.loading||(this.loading=!0,this._showOverlay(this.loadingOverlay),this.img?this.showImage():(this.img=document.createElement("img"),this.img.addEventListener("load",function(){return e.showImage()}),this.img.src=this.fullImage,this.img.tabIndex=1,["click","keydown"].forEach(function(t){return e.overlay.addEventListener(t,function(t){return e._hideOverlay(t.currentTarget)})}),this.overlay.appendChild(this.img)))}},{key:"showImage",value:function(){this.img.style.transform="scale(0.1)",this._hideOverlay(this.loadingOverlay),this._showOverlay(this.overlay),this.overlay.focus(),this.img.style.transform="scale(1)",this.loading=!1}},{key:"_showOverlay",value:function(t){t.style.display="flex"}},{key:"_hideOverlay",value:function(t){t.style.display=""}}]),n}(),p=document.createElement("template");p.innerHTML='\n<style>\n  :host {\n    display: inline-block;\n    cursor: pointer;\n    position: relative;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host(:focus), :host(:active) {\n    outline: 2px solid #77b;\n  }\n\n  #loader {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0,0,0,.2);\n    display: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    overflow: hidden;\n    z-index: 999;\n    background-color: rgba(0,0,0,.5);\n    display: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #loader img {\n    width: 50%;\n    opacity: 0.6;\n    animation: lightbox-loader 2s infinite;\n  }\n\n  #overlay img {\n    max-width: 100%;\n    max-height: 100%;\n    transition: transform 0.8s;\n  }\n\n  @keyframes lightbox-loader {\n    0% {transform: rotate(0deg);}\n    100% {transform: rotate(360deg);}\n  }\n</style>\n<slot></slot>\n<div id="overlay" tabindex="0"></div>\n<div id="loader">\n  <img src="'.concat(d,'">\n</div>\n'),y.prototype.template=p;var g=y;exports.default=g;
-},{"../../assets/hourglass.svg":"q71P"}]},{},["wPYj"], "ImgLightbox")
-//# sourceMappingURL=img-lightbox.js.map
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$defineInteropFlag(a) {
+  Object.defineProperty(a, '__esModule', {value: true, configurable: true});
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$defineInteropFlag(module.exports);
+
+$parcel$export(module.exports, "default", () => $a6ba83244539002c$export$2e2bcd8739ae039);
+// const loaderSvgUrl = require('../../assets/hourglass.svg');
+var $735957c3b581425f$exports = {};
+$735957c3b581425f$exports = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" enable-background=\"new 0 0 64 64\" version=\"1.1\" viewBox=\"0 0 64 64\" xml:space=\"preserve\"><metadata><rdf:RDF><cc:Work rdf:about=\"\"><dc:format>image/svg+xml</dc:format><dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\"/><dc:title/></cc:Work></rdf:RDF></metadata>\n<g>\n\t\t<circle class=\"st0\" cx=\"32\" cy=\"32\" r=\"32\"/>\n\t</g><g class=\"st1\" opacity=\".2\">\n\t\t<path class=\"st2\" d=\"m46 50h-2v-4c0-4.5-3-7.4-3-7.4s-3-2.8-3.9-3.7 0-1.8 0-1.8 1.3-1.3 4.2-4c2.8-2.7 2.7-6.7 2.7-6.7v-5.1l-12-1-12 1v5.1s-0.1 3.9 2.7 6.7c2.8 2.7 4.2 4 4.2 4s0.9 0.9 0 1.8-3.9 3.7-3.9 3.7-3 2.8-3 7.4v4h-2c-1.1 0-2 0.9-2 2s0.9 2 2 2h28c1.1 0 2-0.9 2-2s-0.9-2-2-2z\" fill=\"#231f20\"/>\n\t</g>\n\t\t<path class=\"st3\" d=\"m41 36.6s-3-2.8-3.9-3.7 0-1.8 0-1.8 1.3-1.3 4.2-4c2.8-2.7 2.7-6.7 2.7-6.7v-5.1l-12-1-12 1v5.1s-0.1 3.9 2.7 6.7c2.8 2.7 4.2 4 4.2 4s0.9 0.9 0 1.8-3.9 3.7-3.9 3.7-3 2.8-3 7.4v5.1h24v-5.1c0-4.5-3-7.4-3-7.4z\" fill=\"#fff\"/>\n\t\n\t\t<path class=\"st4\" d=\"m31 43v-11c0-2.1-1-3.4-1.3-3.7l-4.2-4c-1.5-1.4-1.5-3.7-1.5-3.7h16s0 2.3-1.5 3.7l-4.2 4c-0.4 0.3-1.3 1.6-1.3 3.7v11z\"/>\n\t<g class=\"st5\" opacity=\".3\">\n\t\t<path class=\"st2\" d=\"m48 16c0 1.1-0.9 2-2 2h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2h28c1.1 0 2 0.9 2 2z\" fill=\"#231f20\"/>\n\t</g><g fill=\"#fff\">\n\t\t<path class=\"st6\" d=\"m48 14c0 1.1-0.9 2-2 2h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2h28c1.1 0 2 0.9 2 2z\" fill=\"#fff\"/>\n\t</g><g fill=\"#fff\">\n\t\t<path class=\"st6\" d=\"m48 50c0 1.1-0.9 2-2 2h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2h28c1.1 0 2 0.9 2 2z\" fill=\"#fff\"/>\n\t</g><g>\n\t\t<polygon class=\"st4\" points=\"23 48 23 48 32 40 41 48\"/>\n\t</g>\n\n</svg>";
+
+
+class $a6ba83244539002c$var$ImgLightbox extends HTMLElement {
+    constructor(){
+        super();
+        this.loading = false;
+        this.attachShadow({
+            mode: 'open'
+        });
+    }
+    connectedCallback() {
+        // Template is added to prototype below the 
+        // class definition.
+        // It's from a template tag because it's 
+        // supposed to be faster this way.
+        this.shadowRoot.appendChild(this.template.content.cloneNode(true));
+        // Get some element references from shadow DOM:
+        this.overlay = this.shadowRoot.querySelector('#overlay');
+        this.loadingOverlay = this.shadowRoot.querySelector('#loader');
+        // Add the loading SVG to that element:
+        this.loadingOverlay.innerHTML = (0, (/*@__PURE__*/$parcel$interopDefault($735957c3b581425f$exports)));
+        // Component needs a tabIndex to be focusable.
+        this.tabIndex = 0;
+        // The slotted elements are actually not in 
+        // the shadow DOM so we can get them like so:
+        const link = this.querySelector('a');
+        const img = this.querySelector('img');
+        if (link) {
+            // Store the URL as the full image URL:
+            this.fullImage = link.getAttribute('href');
+            // Register a click event that has to 
+            // prevent default:
+            //this._addListeners(link);
+            // Prevent ability to focus the link:
+            link.tabIndex = -1;
+        } else if (img) this.fullImage = img.getAttribute('src');
+        this.fullImage && this._addListeners();
+    }
+    _addListeners() {
+        this.addEventListener('click', this.showLightbox.bind(this), true);
+        this.addEventListener('keydown', (e)=>{
+            // It's common to ignore anything with alt
+            // modifiers. I've copied this from Google
+            // people.
+            if (e.altKey) return;
+            // Catch enter and space:
+            switch(e.keyCode){
+                case 13:
+                case 32:
+                    this.showLightbox(e);
+                default:
+                    return;
+            }
+        }, true);
+    }
+    showLightbox(e) {
+        // This is required so that the link element does not get 
+        // followed:
+        e.preventDefault();
+        // Implement some kind of lock:
+        if (!this.loading) {
+            this.loading = true;
+            // Preload the full image.
+            // Show the spinner overlay:
+            this._showOverlay(this.loadingOverlay);
+            if (!this.img) {
+                this.img = document.createElement('img');
+                this.img.addEventListener('load', ()=>this.showImage());
+                this.img.src = this.fullImage;
+                this.img.tabIndex = 1;
+                // Prepare the events to close the overlay.
+                // I'm doing this here to light up what's
+                // happening in connectedCallback.
+                // I'm not doing a check for which key was
+                // called on purpose, but maybe I should do
+                // that alt key check?
+                [
+                    'click',
+                    'keydown'
+                ].forEach((type)=>this.overlay.addEventListener(type, (e)=>this._hideOverlay(e.currentTarget)));
+                this.overlay.appendChild(this.img);
+            } else this.showImage();
+        }
+    }
+    showImage() {
+        this.img.style.transform = 'scale(0.1)';
+        // Hide the loading overlay:
+        this._hideOverlay(this.loadingOverlay);
+        this._showOverlay(this.overlay);
+        // Focus the overlay (requires it to have a tabIndex):
+        this.overlay.focus();
+        // Start the CSS transition:
+        this.img.style.transform = 'scale(1)';
+        // Don't forget to unlock the click event:
+        this.loading = false;
+    }
+    _showOverlay(overlay) {
+        overlay.style.display = 'flex';
+    }
+    _hideOverlay(overlay) {
+        overlay.style.display = '';
+    }
+}
+// I'm using a true template tag because the Chrome
+// team says it's faster. The template tag has 
+// better browser support than web components anyway.
+// The strange comment here is needed for syntax
+// highlighting with a VS Code extension I'm using.
+const $a6ba83244539002c$var$tpl = document.createElement('template');
+$a6ba83244539002c$var$tpl.innerHTML = /*template*/ `
+<style>
+  :host {
+    display: inline-block;
+    cursor: pointer;
+    position: relative;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  :host(:focus), :host(:active) {
+    outline: 2px solid #77b;
+  }
+
+  #loader {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.2);
+    display: none;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+    z-index: 999;
+    background-color: rgba(0,0,0,.5);
+    display: none;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #loader img {
+    width: 50%;
+    opacity: 0.6;
+    animation: lightbox-loader 2s infinite;
+  }
+
+  #overlay img {
+    max-width: 100%;
+    max-height: 100%;
+    transition: transform 0.8s;
+  }
+
+  @keyframes lightbox-loader {
+    0% {transform: rotate(0deg);}
+    100% {transform: rotate(360deg);}
+  }
+</style>
+<slot></slot>
+<div id="overlay" tabindex="0"></div>
+<div id="loader">
+</div>
+`;
+$a6ba83244539002c$var$ImgLightbox.prototype.template = $a6ba83244539002c$var$tpl;
+var $a6ba83244539002c$export$2e2bcd8739ae039 = $a6ba83244539002c$var$ImgLightbox;
+
+
+//# sourceMappingURL=img-lightbox.js.map

package/dist/img-lightbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["img-lightbox.js"],"names":["ImgLightbox","loaderSvgUrl","require","loading","attachShadow","mode","HTMLElement","shadowRoot","appendChild","template","content","cloneNode","overlay","querySelector","loadingOverlay","tabIndex","link","img","fullImage","getAttribute","_addListeners","addEventListener","showLightbox","bind","e","altKey","keyCode","preventDefault","_showOverlay","showImage","document","createElement","src","forEach","type","_hideOverlay","currentTarget","style","transform","focus","display","tpl","innerHTML","prototype"],"mappings":"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","file":"img-lightbox.js","sourceRoot":"../src/shadow","sourcesContent":["const loaderSvgUrl = require('../../assets/hourglass.svg');\n\nclass ImgLightbox extends HTMLElement {\n\n  constructor() {\n    super();\n    this.loading = false;\n    this.attachShadow({mode: 'open'});\n  }\n\n  connectedCallback() {\n    // Template is added to prototype below the \n    // class definition.\n    // It's from a template tag because it's \n    // supposed to be faster this way.\n    this.shadowRoot.appendChild(\n      this.template.content.cloneNode(true)\n    );\n    // Get some element references from shadow DOM:\n    this.overlay = this.shadowRoot.querySelector('#overlay');\n    this.loadingOverlay = this.shadowRoot.querySelector('#loader');\n    // Component needs a tabIndex to be focusable.\n    this.tabIndex = 0;\n    // The slotted elements are actually not in \n    // the shadow DOM so we can get them like so:\n    const link = this.querySelector('a');\n    const img = this.querySelector('img');\n    if (link) {\n      // Store the URL as the full image URL:\n      this.fullImage = link.getAttribute('href');\n      // Register a click event that has to \n      // prevent default:\n      //this._addListeners(link);\n      // Prevent ability to focus the link:\n      link.tabIndex = -1;\n    } else if (img) {\n      this.fullImage = img.getAttribute('src');\n      // Nothing wrong with giving the same tabIndex\n      // to things, they're ordered by position.\n      // I think.\n      //img.tabIndex = 0;\n      //this._addListeners(img);\n    }\n    this.fullImage && this._addListeners();\n  }\n\n  _addListeners() {\n    this.addEventListener('click', this.showLightbox.bind(this), true);\n    this.addEventListener('keydown', (e) => {\n      // It's common to ignore anything with alt\n      // modifiers. I've copied this from Google\n      // people.\n      if (e.altKey) return;\n      // Catch enter and space:\n      switch (e.keyCode) {\n        case 13:\n        case 32:\n          this.showLightbox(e);\n        default:\n          return;\n      }\n    }, true);\n  }\n\n  showLightbox(e) {\n    // This is required so that the link element does not get \n    // followed:\n    e.preventDefault();\n\n    // Implement some kind of lock:\n    if (!this.loading) {\n      this.loading = true;\n      // Preload the full image.\n      // Show the spinner overlay:\n      this._showOverlay(this.loadingOverlay);\n      if (!this.img) {\n        this.img = document.createElement('img');\n        this.img.addEventListener('load', () => this.showImage());\n        this.img.src = this.fullImage;\n        this.img.tabIndex = 1;\n        // Prepare the events to close the overlay.\n        // I'm doing this here to light up what's\n        // happening in connectedCallback.\n        // I'm not doing a check for which key was\n        // called on purpose, but maybe I should do\n        // that alt key check?\n        ['click', 'keydown'].forEach(\n          (type) => \n            this.overlay.addEventListener(\n              type, \n              (e) => this._hideOverlay(e.currentTarget)\n            )\n        );\n        this.overlay.appendChild(this.img);\n      } else {\n        this.showImage();\n      }\n    }\n  }\n\n  showImage() {\n    this.img.style.transform = 'scale(0.1)';\n    // Hide the loading overlay:\n    this._hideOverlay(this.loadingOverlay);\n    this._showOverlay(this.overlay);\n    // Focus the overlay (requires it to have a tabIndex):\n    this.overlay.focus();\n    // Start the CSS transition:\n    this.img.style.transform = 'scale(1)';\n    // Don't forget to unlock the click event:\n    this.loading = false;\n  }\n\n  _showOverlay(overlay) {\n    overlay.style.display = 'flex';\n  }\n\n  _hideOverlay(overlay) {\n    overlay.style.display = '';\n  }\n\n}\n\n// I'm using a true template tag because the Chrome\n// team says it's faster. The template tag has \n// better browser support than web components anyway.\n// The strange comment here is needed for syntax\n// highlighting with a VS Code extension I'm using.\nconst tpl = document.createElement('template');\ntpl.innerHTML = /*template*/`\n<style>\n  :host {\n    display: inline-block;\n    cursor: pointer;\n    position: relative;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host(:focus), :host(:active) {\n    outline: 2px solid #77b;\n  }\n\n  #loader {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0,0,0,.2);\n    display: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    overflow: hidden;\n    z-index: 999;\n    background-color: rgba(0,0,0,.5);\n    display: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #loader img {\n    width: 50%;\n    opacity: 0.6;\n    animation: lightbox-loader 2s infinite;\n  }\n\n  #overlay img {\n    max-width: 100%;\n    max-height: 100%;\n    transition: transform 0.8s;\n  }\n\n  @keyframes lightbox-loader {\n    0% {transform: rotate(0deg);}\n    100% {transform: rotate(360deg);}\n  }\n</style>\n<slot></slot>\n<div id=\"overlay\" tabindex=\"0\"></div>\n<div id=\"loader\">\n  <img src=\"${loaderSvgUrl}\">\n</div>\n`;\nImgLightbox.prototype.template = tpl;\n\nexport default ImgLightbox;"]}
+{"mappings":";;;;;;;;;;;;;;;;AAAA,8DAA8D;;ACA9D,4BAAiB;;;ADGjB,MAAM,0CAAoB;IAExB,aAAc;QACZ,KAAK;QACL,IAAI,CAAC,OAAO,GAAG;QACf,IAAI,CAAC,YAAY,CAAC;YAAE,MAAM;QAAO;IACnC;IAEA,oBAAoB;QAClB,4CAA4C;QAC5C,oBAAoB;QACpB,yCAAyC;QACzC,kCAAkC;QAClC,IAAI,CAAC,UAAU,CAAC,WAAW,CACzB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;QAElC,+CAA+C;QAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;QAC7C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;QACpD,uCAAuC;QACvC,IAAI,CAAC,cAAc,CAAC,SAAS,GAAG,CAAA,GAAA,gEAAQ;QACxC,8CAA8C;QAC9C,IAAI,CAAC,QAAQ,GAAG;QAChB,4CAA4C;QAC5C,6CAA6C;QAC7C,MAAM,OAAO,IAAI,CAAC,aAAa,CAAC;QAChC,MAAM,MAAM,IAAI,CAAC,aAAa,CAAC;QAC/B,IAAI,MAAM;YACR,uCAAuC;YACvC,IAAI,CAAC,SAAS,GAAG,KAAK,YAAY,CAAC;YACnC,sCAAsC;YACtC,mBAAmB;YACnB,2BAA2B;YAC3B,qCAAqC;YACrC,KAAK,QAAQ,GAAG;QAClB,OAAO,IAAI,KACT,IAAI,CAAC,SAAS,GAAG,IAAI,YAAY,CAAC;QAOpC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa;IACtC;IAEA,gBAAgB;QACd,IAAI,CAAC,gBAAgB,CAAC,SAAS,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,GAAG;QAC7D,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;YAChC,0CAA0C;YAC1C,0CAA0C;YAC1C,UAAU;YACV,IAAI,EAAE,MAAM,EAAE;YACd,yBAAyB;YACzB,OAAQ,EAAE,OAAO;gBACf,KAAK;gBACL,KAAK;oBACH,IAAI,CAAC,YAAY,CAAC;gBACpB;oBACE;YACJ;QACF,GAAG;IACL;IAEA,aAAa,CAAC,EAAE;QACd,0DAA0D;QAC1D,YAAY;QACZ,EAAE,cAAc;QAEhB,+BAA+B;QAC/B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,IAAI,CAAC,OAAO,GAAG;YACf,0BAA0B;YAC1B,4BAA4B;YAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc;YACrC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;gBACb,IAAI,CAAC,GAAG,GAAG,SAAS,aAAa,CAAC;gBAClC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,IAAM,IAAI,CAAC,SAAS;gBACtD,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,SAAS;gBAC7B,IAAI,CAAC,GAAG,CAAC,QAAQ,GAAG;gBACpB,2CAA2C;gBAC3C,yCAAyC;gBACzC,kCAAkC;gBAClC,0CAA0C;gBAC1C,2CAA2C;gBAC3C,sBAAsB;gBACtB;oBAAC;oBAAS;iBAAU,CAAC,OAAO,CAC1B,CAAC,OACC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAC3B,MACA,CAAC,IAAM,IAAI,CAAC,YAAY,CAAC,EAAE,aAAa;gBAG9C,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG;YACnC,OACE,IAAI,CAAC,SAAS;QAElB;IACF;IAEA,YAAY;QACV,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,GAAG;QAC3B,4BAA4B;QAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc;QACrC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO;QAC9B,sDAAsD;QACtD,IAAI,CAAC,OAAO,CAAC,KAAK;QAClB,4BAA4B;QAC5B,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,GAAG;QAC3B,0CAA0C;QAC1C,IAAI,CAAC,OAAO,GAAG;IACjB;IAEA,aAAa,OAAO,EAAE;QACpB,QAAQ,KAAK,CAAC,OAAO,GAAG;IAC1B;IAEA,aAAa,OAAO,EAAE;QACpB,QAAQ,KAAK,CAAC,OAAO,GAAG;IAC1B;AAEF;AAEA,mDAAmD;AACnD,+CAA+C;AAC/C,qDAAqD;AACrD,gDAAgD;AAChD,mDAAmD;AACnD,MAAM,4BAAM,SAAS,aAAa,CAAC;AACnC,0BAAI,SAAS,GAAG,UAAU,GAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgE7B,CAAC;AACD,kCAAY,SAAS,CAAC,QAAQ,GAAG;IAEjC,2CAAe","sources":["src/shadow/img-lightbox.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-4f432e39aae9d60a.js"],"sourcesContent":["// const loaderSvgUrl = require('../../assets/hourglass.svg');\nimport loaderSvg from 'bundle-text:../../assets/hourglass.svg';\n\nclass ImgLightbox extends HTMLElement {\n\n  constructor() {\n    super();\n    this.loading = false;\n    this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback() {\n    // Template is added to prototype below the \n    // class definition.\n    // It's from a template tag because it's \n    // supposed to be faster this way.\n    this.shadowRoot.appendChild(\n      this.template.content.cloneNode(true)\n    );\n    // Get some element references from shadow DOM:\n    this.overlay = this.shadowRoot.querySelector('#overlay');\n    this.loadingOverlay = this.shadowRoot.querySelector('#loader');\n    // Add the loading SVG to that element:\n    this.loadingOverlay.innerHTML = loaderSvg;\n    // Component needs a tabIndex to be focusable.\n    this.tabIndex = 0;\n    // The slotted elements are actually not in \n    // the shadow DOM so we can get them like so:\n    const link = this.querySelector('a');\n    const img = this.querySelector('img');\n    if (link) {\n      // Store the URL as the full image URL:\n      this.fullImage = link.getAttribute('href');\n      // Register a click event that has to \n      // prevent default:\n      //this._addListeners(link);\n      // Prevent ability to focus the link:\n      link.tabIndex = -1;\n    } else if (img) {\n      this.fullImage = img.getAttribute('src');\n      // Nothing wrong with giving the same tabIndex\n      // to things, they're ordered by position.\n      // I think.\n      //img.tabIndex = 0;\n      //this._addListeners(img);\n    }\n    this.fullImage && this._addListeners();\n  }\n\n  _addListeners() {\n    this.addEventListener('click', this.showLightbox.bind(this), true);\n    this.addEventListener('keydown', (e) => {\n      // It's common to ignore anything with alt\n      // modifiers. I've copied this from Google\n      // people.\n      if (e.altKey) return;\n      // Catch enter and space:\n      switch (e.keyCode) {\n        case 13:\n        case 32:\n          this.showLightbox(e);\n        default:\n          return;\n      }\n    }, true);\n  }\n\n  showLightbox(e) {\n    // This is required so that the link element does not get \n    // followed:\n    e.preventDefault();\n\n    // Implement some kind of lock:\n    if (!this.loading) {\n      this.loading = true;\n      // Preload the full image.\n      // Show the spinner overlay:\n      this._showOverlay(this.loadingOverlay);\n      if (!this.img) {\n        this.img = document.createElement('img');\n        this.img.addEventListener('load', () => this.showImage());\n        this.img.src = this.fullImage;\n        this.img.tabIndex = 1;\n        // Prepare the events to close the overlay.\n        // I'm doing this here to light up what's\n        // happening in connectedCallback.\n        // I'm not doing a check for which key was\n        // called on purpose, but maybe I should do\n        // that alt key check?\n        ['click', 'keydown'].forEach(\n          (type) =>\n            this.overlay.addEventListener(\n              type,\n              (e) => this._hideOverlay(e.currentTarget)\n            )\n        );\n        this.overlay.appendChild(this.img);\n      } else {\n        this.showImage();\n      }\n    }\n  }\n\n  showImage() {\n    this.img.style.transform = 'scale(0.1)';\n    // Hide the loading overlay:\n    this._hideOverlay(this.loadingOverlay);\n    this._showOverlay(this.overlay);\n    // Focus the overlay (requires it to have a tabIndex):\n    this.overlay.focus();\n    // Start the CSS transition:\n    this.img.style.transform = 'scale(1)';\n    // Don't forget to unlock the click event:\n    this.loading = false;\n  }\n\n  _showOverlay(overlay) {\n    overlay.style.display = 'flex';\n  }\n\n  _hideOverlay(overlay) {\n    overlay.style.display = '';\n  }\n\n}\n\n// I'm using a true template tag because the Chrome\n// team says it's faster. The template tag has \n// better browser support than web components anyway.\n// The strange comment here is needed for syntax\n// highlighting with a VS Code extension I'm using.\nconst tpl = document.createElement('template');\ntpl.innerHTML = /*template*/`\n<style>\n  :host {\n    display: inline-block;\n    cursor: pointer;\n    position: relative;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host(:focus), :host(:active) {\n    outline: 2px solid #77b;\n  }\n\n  #loader {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0,0,0,.2);\n    display: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    overflow: hidden;\n    z-index: 999;\n    background-color: rgba(0,0,0,.5);\n    display: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #loader img {\n    width: 50%;\n    opacity: 0.6;\n    animation: lightbox-loader 2s infinite;\n  }\n\n  #overlay img {\n    max-width: 100%;\n    max-height: 100%;\n    transition: transform 0.8s;\n  }\n\n  @keyframes lightbox-loader {\n    0% {transform: rotate(0deg);}\n    100% {transform: rotate(360deg);}\n  }\n</style>\n<slot></slot>\n<div id=\"overlay\" tabindex=\"0\"></div>\n<div id=\"loader\">\n</div>\n`;\nImgLightbox.prototype.template = tpl;\n\nexport default ImgLightbox;\n","module.exports = \"1f3d06fcd1df419a\";"],"names":[],"version":3,"file":"img-lightbox.js.map"}

package/dist/img-lightbox.mjs

@@ -0,0 +1,187 @@
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+// const loaderSvgUrl = require('../../assets/hourglass.svg');
+var $6ba1613a1599b26d$exports = {};
+$6ba1613a1599b26d$exports = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" enable-background=\"new 0 0 64 64\" version=\"1.1\" viewBox=\"0 0 64 64\" xml:space=\"preserve\"><metadata><rdf:RDF><cc:Work rdf:about=\"\"><dc:format>image/svg+xml</dc:format><dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\"/><dc:title/></cc:Work></rdf:RDF></metadata>\n<g>\n\t\t<circle class=\"st0\" cx=\"32\" cy=\"32\" r=\"32\"/>\n\t</g><g class=\"st1\" opacity=\".2\">\n\t\t<path class=\"st2\" d=\"m46 50h-2v-4c0-4.5-3-7.4-3-7.4s-3-2.8-3.9-3.7 0-1.8 0-1.8 1.3-1.3 4.2-4c2.8-2.7 2.7-6.7 2.7-6.7v-5.1l-12-1-12 1v5.1s-0.1 3.9 2.7 6.7c2.8 2.7 4.2 4 4.2 4s0.9 0.9 0 1.8-3.9 3.7-3.9 3.7-3 2.8-3 7.4v4h-2c-1.1 0-2 0.9-2 2s0.9 2 2 2h28c1.1 0 2-0.9 2-2s-0.9-2-2-2z\" fill=\"#231f20\"/>\n\t</g>\n\t\t<path class=\"st3\" d=\"m41 36.6s-3-2.8-3.9-3.7 0-1.8 0-1.8 1.3-1.3 4.2-4c2.8-2.7 2.7-6.7 2.7-6.7v-5.1l-12-1-12 1v5.1s-0.1 3.9 2.7 6.7c2.8 2.7 4.2 4 4.2 4s0.9 0.9 0 1.8-3.9 3.7-3.9 3.7-3 2.8-3 7.4v5.1h24v-5.1c0-4.5-3-7.4-3-7.4z\" fill=\"#fff\"/>\n\t\n\t\t<path class=\"st4\" d=\"m31 43v-11c0-2.1-1-3.4-1.3-3.7l-4.2-4c-1.5-1.4-1.5-3.7-1.5-3.7h16s0 2.3-1.5 3.7l-4.2 4c-0.4 0.3-1.3 1.6-1.3 3.7v11z\"/>\n\t<g class=\"st5\" opacity=\".3\">\n\t\t<path class=\"st2\" d=\"m48 16c0 1.1-0.9 2-2 2h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2h28c1.1 0 2 0.9 2 2z\" fill=\"#231f20\"/>\n\t</g><g fill=\"#fff\">\n\t\t<path class=\"st6\" d=\"m48 14c0 1.1-0.9 2-2 2h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2h28c1.1 0 2 0.9 2 2z\" fill=\"#fff\"/>\n\t</g><g fill=\"#fff\">\n\t\t<path class=\"st6\" d=\"m48 50c0 1.1-0.9 2-2 2h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2h28c1.1 0 2 0.9 2 2z\" fill=\"#fff\"/>\n\t</g><g>\n\t\t<polygon class=\"st4\" points=\"23 48 23 48 32 40 41 48\"/>\n\t</g>\n\n</svg>";
+
+
+class $ef17987508a11d23$var$ImgLightbox extends HTMLElement {
+    constructor(){
+        super();
+        this.loading = false;
+        this.attachShadow({
+            mode: 'open'
+        });
+    }
+    connectedCallback() {
+        // Template is added to prototype below the 
+        // class definition.
+        // It's from a template tag because it's 
+        // supposed to be faster this way.
+        this.shadowRoot.appendChild(this.template.content.cloneNode(true));
+        // Get some element references from shadow DOM:
+        this.overlay = this.shadowRoot.querySelector('#overlay');
+        this.loadingOverlay = this.shadowRoot.querySelector('#loader');
+        // Add the loading SVG to that element:
+        this.loadingOverlay.innerHTML = (0, (/*@__PURE__*/$parcel$interopDefault($6ba1613a1599b26d$exports)));
+        // Component needs a tabIndex to be focusable.
+        this.tabIndex = 0;
+        // The slotted elements are actually not in 
+        // the shadow DOM so we can get them like so:
+        const link = this.querySelector('a');
+        const img = this.querySelector('img');
+        if (link) {
+            // Store the URL as the full image URL:
+            this.fullImage = link.getAttribute('href');
+            // Register a click event that has to 
+            // prevent default:
+            //this._addListeners(link);
+            // Prevent ability to focus the link:
+            link.tabIndex = -1;
+        } else if (img) this.fullImage = img.getAttribute('src');
+        this.fullImage && this._addListeners();
+    }
+    _addListeners() {
+        this.addEventListener('click', this.showLightbox.bind(this), true);
+        this.addEventListener('keydown', (e)=>{
+            // It's common to ignore anything with alt
+            // modifiers. I've copied this from Google
+            // people.
+            if (e.altKey) return;
+            // Catch enter and space:
+            switch(e.keyCode){
+                case 13:
+                case 32:
+                    this.showLightbox(e);
+                default:
+                    return;
+            }
+        }, true);
+    }
+    showLightbox(e) {
+        // This is required so that the link element does not get 
+        // followed:
+        e.preventDefault();
+        // Implement some kind of lock:
+        if (!this.loading) {
+            this.loading = true;
+            // Preload the full image.
+            // Show the spinner overlay:
+            this._showOverlay(this.loadingOverlay);
+            if (!this.img) {
+                this.img = document.createElement('img');
+                this.img.addEventListener('load', ()=>this.showImage());
+                this.img.src = this.fullImage;
+                this.img.tabIndex = 1;
+                // Prepare the events to close the overlay.
+                // I'm doing this here to light up what's
+                // happening in connectedCallback.
+                // I'm not doing a check for which key was
+                // called on purpose, but maybe I should do
+                // that alt key check?
+                [
+                    'click',
+                    'keydown'
+                ].forEach((type)=>this.overlay.addEventListener(type, (e)=>this._hideOverlay(e.currentTarget)));
+                this.overlay.appendChild(this.img);
+            } else this.showImage();
+        }
+    }
+    showImage() {
+        this.img.style.transform = 'scale(0.1)';
+        // Hide the loading overlay:
+        this._hideOverlay(this.loadingOverlay);
+        this._showOverlay(this.overlay);
+        // Focus the overlay (requires it to have a tabIndex):
+        this.overlay.focus();
+        // Start the CSS transition:
+        this.img.style.transform = 'scale(1)';
+        // Don't forget to unlock the click event:
+        this.loading = false;
+    }
+    _showOverlay(overlay) {
+        overlay.style.display = 'flex';
+    }
+    _hideOverlay(overlay) {
+        overlay.style.display = '';
+    }
+}
+// I'm using a true template tag because the Chrome
+// team says it's faster. The template tag has 
+// better browser support than web components anyway.
+// The strange comment here is needed for syntax
+// highlighting with a VS Code extension I'm using.
+const $ef17987508a11d23$var$tpl = document.createElement('template');
+$ef17987508a11d23$var$tpl.innerHTML = /*template*/ `
+<style>
+  :host {
+    display: inline-block;
+    cursor: pointer;
+    position: relative;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  :host(:focus), :host(:active) {
+    outline: 2px solid #77b;
+  }
+
+  #loader {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.2);
+    display: none;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+    z-index: 999;
+    background-color: rgba(0,0,0,.5);
+    display: none;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #loader img {
+    width: 50%;
+    opacity: 0.6;
+    animation: lightbox-loader 2s infinite;
+  }
+
+  #overlay img {
+    max-width: 100%;
+    max-height: 100%;
+    transition: transform 0.8s;
+  }
+
+  @keyframes lightbox-loader {
+    0% {transform: rotate(0deg);}
+    100% {transform: rotate(360deg);}
+  }
+</style>
+<slot></slot>
+<div id="overlay" tabindex="0"></div>
+<div id="loader">
+</div>
+`;
+$ef17987508a11d23$var$ImgLightbox.prototype.template = $ef17987508a11d23$var$tpl;
+var $ef17987508a11d23$export$2e2bcd8739ae039 = $ef17987508a11d23$var$ImgLightbox;
+
+
+export {$ef17987508a11d23$export$2e2bcd8739ae039 as default};
+//# sourceMappingURL=img-lightbox.mjs.map

package/dist/img-lightbox.mjs.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["src/shadow/img-lightbox.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-7833d3a46095a7f4.js"],"sourcesContent":["// const loaderSvgUrl = require('../../assets/hourglass.svg');\nimport loaderSvg from 'bundle-text:../../assets/hourglass.svg';\n\nclass ImgLightbox extends HTMLElement {\n\n  constructor() {\n    super();\n    this.loading = false;\n    this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback() {\n    // Template is added to prototype below the \n    // class definition.\n    // It's from a template tag because it's \n    // supposed to be faster this way.\n    this.shadowRoot.appendChild(\n      this.template.content.cloneNode(true)\n    );\n    // Get some element references from shadow DOM:\n    this.overlay = this.shadowRoot.querySelector('#overlay');\n    this.loadingOverlay = this.shadowRoot.querySelector('#loader');\n    // Add the loading SVG to that element:\n    this.loadingOverlay.innerHTML = loaderSvg;\n    // Component needs a tabIndex to be focusable.\n    this.tabIndex = 0;\n    // The slotted elements are actually not in \n    // the shadow DOM so we can get them like so:\n    const link = this.querySelector('a');\n    const img = this.querySelector('img');\n    if (link) {\n      // Store the URL as the full image URL:\n      this.fullImage = link.getAttribute('href');\n      // Register a click event that has to \n      // prevent default:\n      //this._addListeners(link);\n      // Prevent ability to focus the link:\n      link.tabIndex = -1;\n    } else if (img) {\n      this.fullImage = img.getAttribute('src');\n      // Nothing wrong with giving the same tabIndex\n      // to things, they're ordered by position.\n      // I think.\n      //img.tabIndex = 0;\n      //this._addListeners(img);\n    }\n    this.fullImage && this._addListeners();\n  }\n\n  _addListeners() {\n    this.addEventListener('click', this.showLightbox.bind(this), true);\n    this.addEventListener('keydown', (e) => {\n      // It's common to ignore anything with alt\n      // modifiers. I've copied this from Google\n      // people.\n      if (e.altKey) return;\n      // Catch enter and space:\n      switch (e.keyCode) {\n        case 13:\n        case 32:\n          this.showLightbox(e);\n        default:\n          return;\n      }\n    }, true);\n  }\n\n  showLightbox(e) {\n    // This is required so that the link element does not get \n    // followed:\n    e.preventDefault();\n\n    // Implement some kind of lock:\n    if (!this.loading) {\n      this.loading = true;\n      // Preload the full image.\n      // Show the spinner overlay:\n      this._showOverlay(this.loadingOverlay);\n      if (!this.img) {\n        this.img = document.createElement('img');\n        this.img.addEventListener('load', () => this.showImage());\n        this.img.src = this.fullImage;\n        this.img.tabIndex = 1;\n        // Prepare the events to close the overlay.\n        // I'm doing this here to light up what's\n        // happening in connectedCallback.\n        // I'm not doing a check for which key was\n        // called on purpose, but maybe I should do\n        // that alt key check?\n        ['click', 'keydown'].forEach(\n          (type) =>\n            this.overlay.addEventListener(\n              type,\n              (e) => this._hideOverlay(e.currentTarget)\n            )\n        );\n        this.overlay.appendChild(this.img);\n      } else {\n        this.showImage();\n      }\n    }\n  }\n\n  showImage() {\n    this.img.style.transform = 'scale(0.1)';\n    // Hide the loading overlay:\n    this._hideOverlay(this.loadingOverlay);\n    this._showOverlay(this.overlay);\n    // Focus the overlay (requires it to have a tabIndex):\n    this.overlay.focus();\n    // Start the CSS transition:\n    this.img.style.transform = 'scale(1)';\n    // Don't forget to unlock the click event:\n    this.loading = false;\n  }\n\n  _showOverlay(overlay) {\n    overlay.style.display = 'flex';\n  }\n\n  _hideOverlay(overlay) {\n    overlay.style.display = '';\n  }\n\n}\n\n// I'm using a true template tag because the Chrome\n// team says it's faster. The template tag has \n// better browser support than web components anyway.\n// The strange comment here is needed for syntax\n// highlighting with a VS Code extension I'm using.\nconst tpl = document.createElement('template');\ntpl.innerHTML = /*template*/`\n<style>\n  :host {\n    display: inline-block;\n    cursor: pointer;\n    position: relative;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host(:focus), :host(:active) {\n    outline: 2px solid #77b;\n  }\n\n  #loader {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0,0,0,.2);\n    display: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    overflow: hidden;\n    z-index: 999;\n    background-color: rgba(0,0,0,.5);\n    display: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #loader img {\n    width: 50%;\n    opacity: 0.6;\n    animation: lightbox-loader 2s infinite;\n  }\n\n  #overlay img {\n    max-width: 100%;\n    max-height: 100%;\n    transition: transform 0.8s;\n  }\n\n  @keyframes lightbox-loader {\n    0% {transform: rotate(0deg);}\n    100% {transform: rotate(360deg);}\n  }\n</style>\n<slot></slot>\n<div id=\"overlay\" tabindex=\"0\"></div>\n<div id=\"loader\">\n</div>\n`;\nImgLightbox.prototype.template = tpl;\n\nexport default ImgLightbox;\n","module.exports = \"0470ae78683fa4f4\";"],"names":[],"version":3,"file":"img-lightbox.mjs.map"}

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@dkvz/img-lightbox",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "Web component to add a lightbox effect to img elements",
   "main": "dist/img-lightbox.js",
+  "module": "dist/img-lightbox.mjs",
+  "source": "src/shadow/img-lightbox.js",
   "scripts": {
     "start": "parcel src/shadow/index.pug",
-    "build": "parcel build src/shadow/img-lightbox.js --public-url ./ --global ImgLightbox",
+    "build": "rimraf dist && parcel build",
     "start-no-shadow": "parcel src/no-shadow/index.pug",
-    "build-no-shadow": "parcel build src/no-shadow/img-lightbox.js --public-url ./ --global ImgLightbox"
+    "build-no-shadow": "parcel build src/no-shadow/img-lightbox.js --public-url ./"
   },
   "repository": {
     "type": "git",
@@ -16,9 +18,10 @@
   "author": "dkvz",
   "license": "MIT",
   "devDependencies": {
-    "parcel-bundler": "^1.12.4",
-    "parcel-plugin-clean-dist": "0.0.6",
-    "parcel-plugin-url-loader": "^1.3.1",
-    "pug": "^2.0.4"
+    "@parcel/transformer-inline-string": "^2.15.4",
+    "@parcel/transformer-pug": "^2.15.4",
+    "parcel": "^2.15.4",
+    "pug": "^2.0.4",
+    "rimraf": "^6.0.1"
   }
 }

package/src/shadow/img-lightbox.js

@@ -1,11 +1,12 @@
-const loaderSvgUrl = require('../../assets/hourglass.svg');
+// const loaderSvgUrl = require('../../assets/hourglass.svg');
+import loaderSvg from 'bundle-text:../../assets/hourglass.svg';
 
 class ImgLightbox extends HTMLElement {
 
   constructor() {
     super();
     this.loading = false;
-    this.attachShadow({mode: 'open'});
+    this.attachShadow({ mode: 'open' });
   }
 
   connectedCallback() {
@@ -19,6 +20,8 @@ class ImgLightbox extends HTMLElement {
     // Get some element references from shadow DOM:
     this.overlay = this.shadowRoot.querySelector('#overlay');
     this.loadingOverlay = this.shadowRoot.querySelector('#loader');
+    // Add the loading SVG to that element:
+    this.loadingOverlay.innerHTML = loaderSvg;
     // Component needs a tabIndex to be focusable.
     this.tabIndex = 0;
     // The slotted elements are actually not in 
@@ -85,9 +88,9 @@ class ImgLightbox extends HTMLElement {
         // called on purpose, but maybe I should do
         // that alt key check?
         ['click', 'keydown'].forEach(
-          (type) => 
+          (type) =>
             this.overlay.addEventListener(
-              type, 
+              type,
               (e) => this._hideOverlay(e.currentTarget)
             )
         );
@@ -190,9 +193,8 @@ tpl.innerHTML = /*template*/`
 <slot></slot>
 <div id="overlay" tabindex="0"></div>
 <div id="loader">
-  <img src="${loaderSvgUrl}">
 </div>
 `;
 ImgLightbox.prototype.template = tpl;
 
-export default ImgLightbox;
+export default ImgLightbox;

package/src/shadow/index.pug

@@ -18,6 +18,13 @@ html
         display: inline-block;
         border: 1px solid #333;
         box-shadow: 0px 0px 4px rgba(0,0,0,0.6);
+        background-color: #333;
+      }
+
+      /* Both slotted elements should be display: block */
+      img-lightbox a, img-lightbox img {
+        display: block;
+        max-width: 200px;
       }
 
       img-lightbox:active, img-lightbox:focus {

package/src/shared/testpage.html

@@ -2,9 +2,9 @@
 <p>The image should still show and link to the full version with JS disabled.</p>
 
 <img-lightbox>
-  <a href="../../assets/example.png" target="_blank" rel="noopener noreferrer">
-    <img src="../../assets/example_preview.png" 
-      alt="Rabbit with a trumpet mute on its head">
+  <a href="../../assets/example.jpg" target="_blank" rel="noopener noreferrer">
+    <img src="../../assets/example_preview.jpg" 
+      alt="Some cute cat">
   </a>
 </img-lightbox>
 
@@ -14,4 +14,4 @@
   
 </div>
 
-<script src="./example.js"></script>
+<script type="module" src="./example.js"></script>