nanosplash 2.3.3 → 2.4.0

package/README.md

@@ -12,33 +12,26 @@
 
 <strong>The simple, tiny loading screen</strong>
 
-> <em>No dependencies, pure JS</em>
-
-# Installation
-
-## Yarn
-
-```bash
-yarn add nanosplash
-```
-
-## NPM
-
-```bash
-npm install nanosplash
-```
-
-# Import
+# Getting started
 
 ## Import via CDN (recommended)
 
-When you import the IIFE script there is no need to invoke the `install` function.
-
 ```html
 <script src="https://unpkg.com/nanosplash/dist/iife/nanosplash.iife.js">
 ```
+```js
+// Install Nanosplash in the browser
+window.installNanosplash()
+// Display your first Nanosplash
+window.ns.show('Hello world')
+```
 
-## Modules
+## Install (advanced)
+```bash
+yarn add nanosplash
+```
+
+### Modules
 
 When including either ES or CJS modules, you need the CSS in the dist folder, whereas in the IIFE variant, everything is included. If you are using a modern bundler e.g Vite, NextJS, NuxtJS, you can import the CSS directly into your code.
 
@@ -51,29 +44,34 @@ import 'nanosplash/dist/module/style.css'
 > Full: `node_modules/nanosplash/dist/module/style.css`<br>
 > Relative: `nanosplash/dist/module/style.css`
 
-### ESM (ES modules)
+#### ESM (ES modules)
 
 ```js
 import { Nanosplash } from 'nanosplash'
 ```
 
-### CJS (CommonJS)
+#### CJS (CommonJS)
 
 ```js
 const Nanosplash = require('nanosplash')
 ```
 
-# Getting started
-
-## Inject Nanosplash into global scope
-
-> When imported through the CDN, the instance is already injected into the `Window` object and accessible through the global variable `loading`.
-
-If you are importing Nanosplash through modules, invoking the `install` function is essential in order to make it react to changes in the browser.
-
+### Inject Nanosplash into global scope
+#### Using CDN
+```js
+const nsOptions = {
+    spinner: true,
+    fontSize: '18px',
+}
+window.installNanosplash(nsOptions)
+```
+#### Using modules
 ```js
-const ns = new Nanosplash()
-window.ns = ns
+const nsOptions = {
+    spinner: true,
+    fontSize: '18px',
+}
+window.ns = new Nanosplash(nsOptions)
 ```
 
 ## Basic usage
@@ -81,7 +79,7 @@ window.ns = ns
 ### Display the loading screen
 
 ```js
-ns.show('Loading the good stuff ...')
+ns.show('Loading the good stuff')
 ```
 
 ### Hide the loading screen
@@ -100,26 +98,24 @@ ns.hideAll()
 
 ```js
 // Use CSS selector string
-ns.show('Loading component ...').inside('#my-element')
+ns.show('Loading component').inside('#my-element')
 
 // Use HTMLElement objects directly
-ns
-	.show('Loading component ...')
-	.inside(document.getElementById('my-element'))
+ns.show('Loading component').inside(document.getElementById('my-element'))
 ```
 
 ### Combine Nanosplash with async tasks
 
 ```js
-const task1 = new Promise(r => setTimeout(() => r(), 3000))
+const task1 = new Promise(r => setTimeout(r, 3000))
 const task2 = async () => await getDataFromApi()
 
-ns.while(task1).show('Loading resources ...')
-ns.while(task2).show('Fetching table data ...').inside('#my-table')
+ns.while(task1).show('Loading resources')
+ns.while(task2).show('Fetching table data').inside('#my-table')
 
 ns.progress(
-    [task1, 'Loading data from API ...'],
-    [task2, 'Processing data ...']
+    [task1, 'Loading data from API'],
+    [task2, 'Processing data']
 ).inside('#my-table')
 ```
 

package/dist/iife/nanosplash.iife.js

@@ -1 +1 @@
-var t=Object.defineProperty,e=Object.defineProperties,i=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,h=(e,i,s)=>i in e?t(e,i,{t:!0,i:!0,writable:!0,value:s}):e[i]=s,o=document.createElement("style");o.innerHTML='@charset "UTF-8";.ns-blur,body .ns-fs~*{filter:blur(5px);overflow:hidden}.ns-wrapper{position:relative}.ns-fs{left:0;min-height:100vh;min-width:100%;position:fixed;top:0;z-index:2}.ns-window{align-items:center;background-color:#fffc;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.ns-img{margin-bottom:1rem;max-height:9rem;max-width:9rem}.ns-text{color:#333;display:flex;text-align:center}.ns-text:after{-webkit-animation:anim 1s infinite;animation:anim 1s infinite;content:"\\a0\\a0\\a0";margin-left:.25em}@-webkit-keyframes anim{0%{content:"\\a0\\a0\\a0"}30%{content:".\\a0\\a0"}60%{content:"..\\a0"}90%{content:"..."}}@keyframes anim{0%{content:"\\a0\\a0\\a0"}30%{content:".\\a0\\a0"}60%{content:"..\\a0"}90%{content:"..."}}\n',document.head.appendChild(o),function(){const t=t=>document.createElement(t);function o(t,...e){t.classList.add(...e)}function a(t,e,i){t.setAttribute(e,i)}class c{static h(t){if("string"==typeof t){const i=(e=t,document.querySelector(e));if(!i)throw new Error(`No match with ${t}`);return i}if(t instanceof Node)return t;var e;throw new Error("Destination argument must string or Node")}static o(t){const o={getId:()=>t.getId(),remove:()=>t.delete(),moveTo:e=>t.moveTo(e),getText:()=>t.getText(),setText:e=>t.setText(e),getImgSrc:()=>t.getImgSrc(),setImgSrc:e=>t.setImgSrc(e)};return a=((t,e)=>{for(var i in e||(e={}))n.call(e,i)&&h(t,i,e[i]);if(s)for(var i of s(e))r.call(e,i)&&h(t,i,e[i]);return t})({},o),e(a,i({inside:e=>(t.moveTo(e),o)}));var a}}class l{constructor(e,i,s){var n;this.l=t("div"),this.u=t("div"),this.m=t("div"),this.g=t("div"),this.p=t("div"),this.v=t("img"),this.id=Math.random().toString(36).substring(2),this.S=e,this.u.innerText=i,this.I=s,this.v.src=null!=(n=this.I)?n:"",this.v.alt=m.O,this.j(),this.setImgSrc(s)}F(){o(this.p,"ns-container"),o(this.g,"ns-blur"),o(this.v,"ns-img"),o(this.u,"ns-text"),o(this.m,"ns","ns-window"),o(this.l,"ns-wrapper")}N(){this.p.append(this.v,this.u),this.m.append(this.p),this.l.append(this.g,this.m)}j(){this.l.id=this.getId(),a(this.l,"data-ctx","nanosplash"),this.N(),this.F()}getId(){return this.id}getText(){return this.u.innerText}setText(t){return this.u.innerText=t,this}getImgSrc(){return this.I}setImgSrc(t){return this.v.src=null!=t?t:"",this.v.style.display=t?"block":"none",this.N(),this}T(){return this.k}A(){const t=this.l.parentElement;t&&this.D(t)}C(){a(this.l,"style",""),this.l.classList.remove("ns-fs")}W(t){const e=t.parentNode;e&&(this.D(e),e.replaceChild(this.l,t),this.g.appendChild(t))}M(){this.l.classList.add("ns-fs"),((t,e,i=!1)=>{t&&e&&(e.hasChildNodes()&&i?e.insertBefore(t,e.firstChild):e.appendChild(t))})(this.l,document.body,!0)}R(t){this.S.$(t).filter((t=>t.getId()!==this.getId())).forEach((t=>t.delete()))}moveTo(t){this.A(),this.k=c.h(t),this.R(this.k),this.k===document.body?this.M():(this.C(),this.W(this.k)),this.j()}H(t){Array.from(this.g.childNodes).forEach(t)}D(t){this.H((e=>t.insertBefore(e,this.l)))}P(){[this.u,this.v,this.p,this.g,this.m,this.l].forEach((t=>t.remove()))}delete(){this.A(),this.P(),this.S.delete(this)}}class u{static U(t,e,i,s){var n;return t||(t=new l(e,i,s)),t.setText(i).setImgSrc(null!=(n=t.getImgSrc())?n:s)}static q(t,e){return i=>(e=u.U(e,t,"",i),{show:u.B(t,e),progress:u.G(t,e),while:u.J(t,e)})}static B(t,e){return i=>(e=u.U(e,t,i),t.K.set(e.getId(),e),e.moveTo(document.body),c.o(e))}static G(t,e){return(...i)=>((e=u.U(e,t,"")).moveTo(document.body),(async()=>{for(const[t,[s,n]]of i.entries())e.setText(n),await s;e.delete()})(),c.o(e))}static J(t,e){return i=>(e=u.U(e,t,""),{show:s=>(t.K.set(e.getId(),e),e.moveTo(document.body),e.setText(s),i.finally((()=>e.delete())),c.o(e))})}}class m{constructor(){this.K=new Map}img(t){return u.q(this,new l(this,"",t))(t)}show(t){return u.B(this,new l(this,t))(t)}progress(...t){return u.G(this,new l(this,""))(...t)}while(t){return u.J(this,new l(this,""))(t)}L(t){let e=0;const i=this.K.entries();for(const[s,n]of i)if(!t(s,n,e++))break}delete(t){this.K.delete(t.getId())}hideAll(){this.K.forEach((t=>t.delete()))}hide(t){if(t){const e=this.K.get(t);if(!e)throw new Error(`Could not find element with id: ${t}`);e.delete()}else this.L(((t,e,i)=>{const s=0===i;return s&&e.delete(),s}))}$(t){return Array.from(this.K.values()).filter((e=>e.T()===t))}}m.O="Nanosplash",window.addEventListener("load",(()=>window.ns=new m))}();
+var t=Object.defineProperty,s=Object.defineProperties,e=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,h=(s,e,i)=>e in s?t(s,e,{t:!0,i:!0,writable:!0,value:i}):s[e]=i,o=document.createElement("style");o.innerHTML=".ns-blur,body .ns-fs~*{filter:blur(5px);overflow:hidden}.ns-wrapper{position:relative}.ns-fs{left:0;min-height:100vh;min-width:100%;position:fixed;top:0;z-index:2}.ns-window{align-items:center;background-color:#fffc;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.ns-img{margin-bottom:2em;max-height:9rem;width:9rem}.ns-text-container{align-items:center}.ns-text,.ns-text-container{display:flex;justify-content:center}.ns-text{color:#5a6685}.ns-spinner{display:flex;height:1em;margin-left:1em;width:1em}.ns-spinner>svg{stroke-width:8;-webkit-animation:Rotate 2s linear infinite;animation:Rotate 2s linear infinite;height:inherit;position:relative;width:inherit}.ns-spinner .path{stroke:#5a6685;stroke-linecap:round;-webkit-animation:Dash 1.5s ease-in-out infinite;animation:Dash 1.5s ease-in-out infinite}@-webkit-keyframes Rotate{to{transform:rotate(1turn)}}@keyframes Rotate{to{transform:rotate(1turn)}}@-webkit-keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n",document.head.appendChild(o),function(){const t=t=>document.createElement(t);function o(t,...s){t.classList.add(...s)}function a(t,s,e){t.setAttribute(s,e)}class c{static h(t){if("string"==typeof t){const e=(s=t,document.querySelector(s));if(!e)throw new Error(`No match with ${t}`);return e}if(t instanceof Node)return t;var s;throw new Error("Destination argument must string or Node")}static o(t){const o={getId:()=>t.getId(),remove:()=>t.delete(),moveTo:s=>t.moveTo(s),getText:()=>t.getText(),setText:s=>t.setText(s),getImgSrc:()=>t.getImgSrc(),setImgSrc:s=>t.setImgSrc(s)};return a=((t,s)=>{for(var e in s||(s={}))n.call(s,e)&&h(t,e,s[e]);if(i)for(var e of i(s))r.call(s,e)&&h(t,e,s[e]);return t})({},o),s(a,e({inside:s=>(t.moveTo(s),o)}));var a}static l(){const s=t("div");return o(s,"ns-spinner"),s.innerHTML='\n            <svg viewBox="0 0 50 50">\n                <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>\n            </svg>\n        ',s}}class l{constructor(s,e,i){var n;this.u=t("div"),this.m=t("div"),this.g=t("div"),this.p=c.l(),this.v=t("div"),this.k=t("div"),this.S=t("div"),this.I=t("img"),this.id=Math.random().toString(36).substring(2),this.D=s,this.m.innerText=e,this.j=i,this.I.src=null!=(n=this.j)?n:"",this.I.alt=u.N,this.u.style.fontSize=s.fontSize,this.p.style.display=s.O?"flex":"none",this.A(),this.setImgSrc(i)}T(){o(this.S,"ns-container"),o(this.k,"ns-blur"),o(this.I,"ns-img"),o(this.m,"ns-text"),o(this.g,"ns-text-container"),o(this.p,"ns-spinner"),o(this.v,"ns","ns-window"),o(this.u,"ns-wrapper")}F(){this.g.append(this.m,this.p),this.S.append(this.I,this.g),this.v.append(this.S),this.u.append(this.k,this.v)}A(){this.u.id=this.getId(),a(this.u,"data-ctx","nanosplash"),this.F(),this.T()}getId(){return this.id}getText(){return this.m.innerText}setText(t){return this.m.innerText=t,this}getImgSrc(){return this.j}setImgSrc(t){return this.I.src=null!=t?t:"",this.I.style.display=t?"block":"none",this.F(),this}R(){return this.C}W(){const t=this.u.parentElement;t&&this.M(t)}$(){a(this.u,"style",""),this.u.classList.remove("ns-fs")}B(t){const s=t.parentNode;s&&(this.M(s),s.replaceChild(this.u,t),this.k.appendChild(t))}H(){this.u.classList.add("ns-fs"),((t,s,e=!1)=>{t&&s&&(s.hasChildNodes()&&e?s.insertBefore(t,s.firstChild):s.appendChild(t))})(this.u,document.body,!0)}P(t){this.D.q(t).filter((t=>t.getId()!==this.getId())).forEach((t=>t.delete()))}moveTo(t){this.W(),this.C=c.h(t),this.P(this.C),this.C===document.body?this.H():(this.$(),this.B(this.C)),this.A()}G(t){Array.from(this.k.childNodes).forEach(t)}M(t){this.G((s=>t.insertBefore(s,this.u)))}J(){[this.m,this.p,this.g,this.I,this.S,this.k,this.v,this.u].forEach((t=>t.remove()))}delete(){this.W(),this.J(),this.D.delete(this)}}class d{static K(t,s,e,i){var n;return t||(t=new l(s,e,i)),t.setText(e).setImgSrc(null!=(n=t.getImgSrc())?n:i)}static L(t,s){return e=>(s=d.K(s,t,e),t.U.set(s.getId(),s),s.moveTo(document.body),c.o(s))}static V(t,s){return(...e)=>((s=d.K(s,t,"")).moveTo(document.body),(async()=>{for(const[t,[i,n]]of e.entries())s.setText(n),await i;s.delete()})(),c.o(s))}static X(t,s){return e=>(s=d.K(s,t,""),{show:i=>(t.U.set(s.getId(),s),s.moveTo(document.body),s.setText(i),e.finally((()=>s.delete())),c.o(s))})}}class u{constructor(t){var s,e,i;this.j=null!=(s=null==t?void 0:t.j)?s:void 0,this.O=null!=(e=null==t?void 0:t.Y)&&e,this.fontSize=null!=(i=null==t?void 0:t.fontSize)?i:"18px",this.U=new Map}show(t){return d.L(this,new l(this,t,this.j))(t)}progress(...t){return d.V(this,new l(this,"",this.j))(...t)}while(t){return d.X(this,new l(this,"",this.j))(t)}Z(t){const s=this.U.size,e=Array.from(this.U.values());for(let i=s-1;i>=0;i--){console.log({size:s,_:s-1,tt:i});const n=e[i];if(!t(n.getId(),n,i))break}}delete(t){this.U.delete(t.getId())}hideAll(){this.U.forEach((t=>t.delete()))}hide(t){if(t){const s=this.U.get(t);if(!s)throw new Error(`Could not find element with id: ${t}`);s.delete()}else{const t=this.U.size;this.Z(((s,e,i)=>{const n=i===t-1;return n&&e.delete(),n}))}}q(t){return Array.from(this.U.values()).filter((s=>s.R()===t))}}u.N="Nanosplash",window.addEventListener("load",(()=>{window.Nanosplash=u,window.installNanosplash=t=>{window.ns=new u(t)}}))}();

package/dist/module/Nanosplash.css

@@ -1 +1 @@
-@charset "UTF-8";.ns-blur,body .ns-fs~*{filter:blur(5px);overflow:hidden}.ns-wrapper{position:relative}.ns-fs{left:0;min-height:100vh;min-width:100%;position:fixed;top:0;z-index:2}.ns-window{align-items:center;background-color:#fffc;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.ns-img{margin-bottom:1rem;max-height:9rem;max-width:9rem}.ns-text{color:#333;display:flex;text-align:center}.ns-text:after{-webkit-animation:anim 1s infinite;animation:anim 1s infinite;content:"\a0\a0\a0";margin-left:.25em}@-webkit-keyframes anim{0%{content:"\a0\a0\a0"}30%{content:".\a0\a0"}60%{content:"..\a0"}90%{content:"..."}}@keyframes anim{0%{content:"\a0\a0\a0"}30%{content:".\a0\a0"}60%{content:"..\a0"}90%{content:"..."}}
+.ns-blur,body .ns-fs~*{filter:blur(5px);overflow:hidden}.ns-wrapper{position:relative}.ns-fs{left:0;min-height:100vh;min-width:100%;position:fixed;top:0;z-index:2}.ns-window{align-items:center;background-color:#fffc;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.ns-img{margin-bottom:2em;max-height:9rem;width:9rem}.ns-text-container{align-items:center}.ns-text,.ns-text-container{display:flex;justify-content:center}.ns-text{color:#5a6685}.ns-spinner{display:flex;height:1em;margin-left:1em;width:1em}.ns-spinner>svg{stroke-width:8;-webkit-animation:Rotate 2s linear infinite;animation:Rotate 2s linear infinite;height:inherit;position:relative;width:inherit}.ns-spinner .path{stroke:#5a6685;stroke-linecap:round;-webkit-animation:Dash 1.5s ease-in-out infinite;animation:Dash 1.5s ease-in-out infinite}@-webkit-keyframes Rotate{to{transform:rotate(1turn)}}@keyframes Rotate{to{transform:rotate(1turn)}}@-webkit-keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}

package/dist/module/nanosplash.cjs.js

@@ -1 +1 @@
-var t=Object.defineProperty,s=Object.defineProperties,e=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable,h=(s,e,i)=>e in s?t(s,e,{t:!0,i:!0,writable:!0,value:i}):s[e]=i;Object.defineProperties(exports,{h:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=t=>document.createElement(t);function a(t,...s){t.classList.add(...s)}function c(t,s,e){t.setAttribute(s,e)}class u{static o(t){if("string"==typeof t){const e=(s=t,document.querySelector(s));if(!e)throw new Error(`No match with ${t}`);return e}if(t instanceof Node)return t;var s;throw new Error("Destination argument must string or Node")}static u(t){const o={getId:()=>t.getId(),remove:()=>t.delete(),moveTo:s=>t.moveTo(s),getText:()=>t.getText(),setText:s=>t.setText(s),getImgSrc:()=>t.getImgSrc(),setImgSrc:s=>t.setImgSrc(s)};return a=((t,s)=>{for(var e in s||(s={}))r.call(s,e)&&h(t,e,s[e]);if(i)for(var e of i(s))n.call(s,e)&&h(t,e,s[e]);return t})({},o),s(a,e({inside:s=>(t.moveTo(s),o)}));var a}}class l{constructor(t,s,e){var i;this.l=o("div"),this.m=o("div"),this.g=o("div"),this.v=o("div"),this.p=o("div"),this.S=o("img"),this.id=Math.random().toString(36).substring(2),this.I=t,this.m.innerText=s,this.O=e,this.S.src=null!=(i=this.O)?i:"",this.S.alt=m.j,this.N(),this.setImgSrc(e)}F(){a(this.p,"ns-container"),a(this.v,"ns-blur"),a(this.S,"ns-img"),a(this.m,"ns-text"),a(this.g,"ns","ns-window"),a(this.l,"ns-wrapper")}T(){this.p.append(this.S,this.m),this.g.append(this.p),this.l.append(this.v,this.g)}N(){this.l.id=this.getId(),c(this.l,"data-ctx","nanosplash"),this.T(),this.F()}getId(){return this.id}getText(){return this.m.innerText}setText(t){return this.m.innerText=t,this}getImgSrc(){return this.O}setImgSrc(t){return this.S.src=null!=t?t:"",this.S.style.display=t?"block":"none",this.T(),this}A(){return this.D}M(){const t=this.l.parentElement;t&&this.C(t)}W(){c(this.l,"style",""),this.l.classList.remove("ns-fs")}k(t){const s=t.parentNode;s&&(this.C(s),s.replaceChild(this.l,t),this.v.appendChild(t))}R(){this.l.classList.add("ns-fs"),((t,s,e=!1)=>{t&&s&&(s.hasChildNodes()&&e?s.insertBefore(t,s.firstChild):s.appendChild(t))})(this.l,document.body,!0)}$(t){this.I._(t).filter((t=>t.getId()!==this.getId())).forEach((t=>t.delete()))}moveTo(t){this.M(),this.D=u.o(t),this.$(this.D),this.D===document.body?this.R():(this.W(),this.k(this.D)),this.N()}H(t){Array.from(this.v.childNodes).forEach(t)}C(t){this.H((s=>t.insertBefore(s,this.l)))}P(){[this.m,this.S,this.p,this.v,this.g,this.l].forEach((t=>t.remove()))}delete(){this.M(),this.P(),this.I.delete(this)}}class d{static q(t,s,e,i){var r;return t||(t=new l(s,e,i)),t.setText(e).setImgSrc(null!=(r=t.getImgSrc())?r:i)}static B(t,s){return e=>(s=d.q(s,t,"",e),{show:d.G(t,s),progress:d.J(t,s),while:d.K(t,s)})}static G(t,s){return e=>(s=d.q(s,t,e),t.L.set(s.getId(),s),s.moveTo(document.body),u.u(s))}static J(t,s){return(...e)=>((s=d.q(s,t,"")).moveTo(document.body),(async()=>{for(const[t,[i,r]]of e.entries())s.setText(r),await i;s.delete()})(),u.u(s))}static K(t,s){return e=>(s=d.q(s,t,""),{show:i=>(t.L.set(s.getId(),s),s.moveTo(document.body),s.setText(i),e.finally((()=>s.delete())),u.u(s))})}}class m{constructor(){this.L=new Map}img(t){return d.B(this,new l(this,"",t))(t)}show(t){return d.G(this,new l(this,t))(t)}progress(...t){return d.J(this,new l(this,""))(...t)}while(t){return d.K(this,new l(this,""))(t)}U(t){let s=0;const e=this.L.entries();for(const[i,r]of e)if(!t(i,r,s++))break}delete(t){this.L.delete(t.getId())}hideAll(){this.L.forEach((t=>t.delete()))}hide(t){if(t){const s=this.L.get(t);if(!s)throw new Error(`Could not find element with id: ${t}`);s.delete()}else this.U(((t,s,e)=>{const i=0===e;return i&&s.delete(),i}))}_(t){return Array.from(this.L.values()).filter((s=>s.A()===t))}}m.j="Nanosplash",exports.Nanosplash=m;
+var t=Object.defineProperty,s=Object.defineProperties,i=Object.getOwnPropertyDescriptors,e=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable,r=(s,i,e)=>i in s?t(s,i,{t:!0,i:!0,writable:!0,value:e}):s[i]=e;Object.defineProperties(exports,{h:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=t=>document.createElement(t);function c(t,...s){t.classList.add(...s)}function a(t,s,i){t.setAttribute(s,i)}class l{static o(t){if("string"==typeof t){const i=(s=t,document.querySelector(s));if(!i)throw new Error(`No match with ${t}`);return i}if(t instanceof Node)return t;var s;throw new Error("Destination argument must string or Node")}static l(t){const o={getId:()=>t.getId(),remove:()=>t.delete(),moveTo:s=>t.moveTo(s),getText:()=>t.getText(),setText:s=>t.setText(s),getImgSrc:()=>t.getImgSrc(),setImgSrc:s=>t.setImgSrc(s)};return c=((t,s)=>{for(var i in s||(s={}))n.call(s,i)&&r(t,i,s[i]);if(e)for(var i of e(s))h.call(s,i)&&r(t,i,s[i]);return t})({},o),s(c,i({inside:s=>(t.moveTo(s),o)}));var c}static u(){const t=o("div");return c(t,"ns-spinner"),t.innerHTML='\n            <svg viewBox="0 0 50 50">\n                <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>\n            </svg>\n        ',t}}class u{constructor(t,s,i){var e;this.m=o("div"),this.v=o("div"),this.g=o("div"),this.p=l.u(),this.S=o("div"),this.I=o("div"),this.O=o("div"),this.N=o("img"),this.id=Math.random().toString(36).substring(2),this.j=t,this.v.innerText=s,this.A=i,this.N.src=null!=(e=this.A)?e:"",this.N.alt=m.T,this.m.style.fontSize=t.fontSize,this.p.style.display=t.D?"flex":"none",this.F(),this.setImgSrc(i)}M(){c(this.O,"ns-container"),c(this.I,"ns-blur"),c(this.N,"ns-img"),c(this.v,"ns-text"),c(this.g,"ns-text-container"),c(this.p,"ns-spinner"),c(this.S,"ns","ns-window"),c(this.m,"ns-wrapper")}C(){this.g.append(this.v,this.p),this.O.append(this.N,this.g),this.S.append(this.O),this.m.append(this.I,this.S)}F(){this.m.id=this.getId(),a(this.m,"data-ctx","nanosplash"),this.C(),this.M()}getId(){return this.id}getText(){return this.v.innerText}setText(t){return this.v.innerText=t,this}getImgSrc(){return this.A}setImgSrc(t){return this.N.src=null!=t?t:"",this.N.style.display=t?"block":"none",this.C(),this}W(){return this.k}R(){const t=this.m.parentElement;t&&this.$(t)}_(){a(this.m,"style",""),this.m.classList.remove("ns-fs")}B(t){const s=t.parentNode;s&&(this.$(s),s.replaceChild(this.m,t),this.I.appendChild(t))}H(){this.m.classList.add("ns-fs"),((t,s,i=!1)=>{t&&s&&(s.hasChildNodes()&&i?s.insertBefore(t,s.firstChild):s.appendChild(t))})(this.m,document.body,!0)}P(t){this.j.q(t).filter((t=>t.getId()!==this.getId())).forEach((t=>t.delete()))}moveTo(t){this.R(),this.k=l.o(t),this.P(this.k),this.k===document.body?this.H():(this._(),this.B(this.k)),this.F()}G(t){Array.from(this.I.childNodes).forEach(t)}$(t){this.G((s=>t.insertBefore(s,this.m)))}J(){[this.v,this.p,this.g,this.N,this.O,this.I,this.S,this.m].forEach((t=>t.remove()))}delete(){this.R(),this.J(),this.j.delete(this)}}class d{static K(t,s,i,e){var n;return t||(t=new u(s,i,e)),t.setText(i).setImgSrc(null!=(n=t.getImgSrc())?n:e)}static L(t,s){return i=>(s=d.K(s,t,i),t.U.set(s.getId(),s),s.moveTo(document.body),l.l(s))}static V(t,s){return(...i)=>((s=d.K(s,t,"")).moveTo(document.body),(async()=>{for(const[t,[e,n]]of i.entries())s.setText(n),await e;s.delete()})(),l.l(s))}static X(t,s){return i=>(s=d.K(s,t,""),{show:e=>(t.U.set(s.getId(),s),s.moveTo(document.body),s.setText(e),i.finally((()=>s.delete())),l.l(s))})}}class m{constructor(t){var s,i,e;this.A=null!=(s=null==t?void 0:t.A)?s:void 0,this.D=null!=(i=null==t?void 0:t.Y)&&i,this.fontSize=null!=(e=null==t?void 0:t.fontSize)?e:"18px",this.U=new Map}show(t){return d.L(this,new u(this,t,this.A))(t)}progress(...t){return d.V(this,new u(this,"",this.A))(...t)}while(t){return d.X(this,new u(this,"",this.A))(t)}Z(t){const s=this.U.size,i=Array.from(this.U.values());for(let e=s-1;e>=0;e--){console.log({size:s,tt:s-1,st:e});const n=i[e];if(!t(n.getId(),n,e))break}}delete(t){this.U.delete(t.getId())}hideAll(){this.U.forEach((t=>t.delete()))}hide(t){if(t){const s=this.U.get(t);if(!s)throw new Error(`Could not find element with id: ${t}`);s.delete()}else{const t=this.U.size;this.Z(((s,i,e)=>{const n=e===t-1;return n&&i.delete(),n}))}}q(t){return Array.from(this.U.values()).filter((s=>s.W()===t))}}m.T="Nanosplash",exports.Nanosplash=m;

package/dist/module/nanosplash.es.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var style = "";
+var style = /* @__PURE__ */ (() => ".ns-blur,body .ns-fs~*{filter:blur(5px);overflow:hidden}.ns-wrapper{position:relative}.ns-fs{left:0;min-height:100vh;min-width:100%;position:fixed;top:0;z-index:2}.ns-window{align-items:center;background-color:#fffc;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.ns-img{margin-bottom:2em;max-height:9rem;width:9rem}.ns-text-container{align-items:center}.ns-text,.ns-text-container{display:flex;justify-content:center}.ns-text{color:#5a6685}.ns-spinner{display:flex;height:1em;margin-left:1em;width:1em}.ns-spinner>svg{stroke-width:8;-webkit-animation:Rotate 2s linear infinite;animation:Rotate 2s linear infinite;height:inherit;position:relative;width:inherit}.ns-spinner .path{stroke:#5a6685;stroke-linecap:round;-webkit-animation:Dash 1.5s ease-in-out infinite;animation:Dash 1.5s ease-in-out infinite}@-webkit-keyframes Rotate{to{transform:rotate(1turn)}}@keyframes Rotate{to{transform:rotate(1turn)}}@-webkit-keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n")();
 function get(selector) {
   return document.querySelector(selector);
 }
@@ -63,12 +63,24 @@ class NanosplashRepository {
       }
     });
   }
+  static createNanosplashSpinnerElement() {
+    const div = mk("div");
+    addClass(div, "ns-spinner");
+    div.innerHTML = `
+            <svg viewBox="0 0 50 50">
+                <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
+            </svg>
+        `;
+    return div;
+  }
 }
 class SplashInstance {
   constructor(ns, text, imgSrc) {
     var _a;
     this.nsRootElement = mk("div");
     this.nsTextElement = mk("div");
+    this.nsTextContainerElement = mk("div");
+    this.nsSpinnerElement = NanosplashRepository.createNanosplashSpinnerElement();
     this.nsWindowElement = mk("div");
     this.nsWrapperElement = mk("div");
     this.nsContentElement = mk("div");
@@ -79,6 +91,8 @@ class SplashInstance {
     this.imgSrc = imgSrc;
     this.nsImageElement.src = (_a = this.imgSrc) != null ? _a : "";
     this.nsImageElement.alt = Nanosplash.APP_NAME;
+    this.nsRootElement.style.fontSize = ns.fontSize;
+    this.nsSpinnerElement.style.display = ns.showSpinner ? "flex" : "none";
     this.assembleNSComponent();
     this.setImgSrc(imgSrc);
   }
@@ -87,11 +101,14 @@ class SplashInstance {
     addClass(this.nsWrapperElement, "ns-blur");
     addClass(this.nsImageElement, "ns-img");
     addClass(this.nsTextElement, "ns-text");
+    addClass(this.nsTextContainerElement, "ns-text-container");
+    addClass(this.nsSpinnerElement, "ns-spinner");
     addClass(this.nsWindowElement, "ns", "ns-window");
     addClass(this.nsRootElement, "ns-wrapper");
   }
   assembleElementStructure() {
-    this.nsContentElement.append(this.nsImageElement, this.nsTextElement);
+    this.nsTextContainerElement.append(this.nsTextElement, this.nsSpinnerElement);
+    this.nsContentElement.append(this.nsImageElement, this.nsTextContainerElement);
     this.nsWindowElement.append(this.nsContentElement);
     this.nsRootElement.append(this.nsWrapperElement, this.nsWindowElement);
   }
@@ -172,6 +189,8 @@ class SplashInstance {
   removeElementsFromDOM() {
     [
       this.nsTextElement,
+      this.nsSpinnerElement,
+      this.nsTextContainerElement,
       this.nsImageElement,
       this.nsContentElement,
       this.nsWrapperElement,
@@ -193,16 +212,6 @@ class NanosplashFactory {
     }
     return splash.setText(text).setImgSrc((_a = splash.getImgSrc()) != null ? _a : imgSrc);
   }
-  static createImgFunction(ns, splash) {
-    return (src) => {
-      splash = NanosplashFactory.ensureInstance(splash, ns, "", src);
-      return {
-        show: NanosplashFactory.createShowFunction(ns, splash),
-        progress: NanosplashFactory.createProgressFunction(ns, splash),
-        while: NanosplashFactory.createWhileFunction(ns, splash)
-      };
-    };
-  }
   static createShowFunction(ns, splash) {
     return (text) => {
       splash = NanosplashFactory.ensureInstance(splash, ns, text);
@@ -241,26 +250,34 @@ class NanosplashFactory {
   }
 }
 class Nanosplash {
-  constructor() {
+  constructor(options) {
+    var _a, _b, _c;
+    this.imgSrc = (_a = options == null ? void 0 : options.imgSrc) != null ? _a : void 0;
+    this.showSpinner = (_b = options == null ? void 0 : options.spinner) != null ? _b : false;
+    this.fontSize = (_c = options == null ? void 0 : options.fontSize) != null ? _c : "18px";
     this.instances = /* @__PURE__ */ new Map();
   }
-  img(src) {
-    return NanosplashFactory.createImgFunction(this, new SplashInstance(this, "", src))(src);
-  }
   show(text) {
-    return NanosplashFactory.createShowFunction(this, new SplashInstance(this, text))(text);
+    return NanosplashFactory.createShowFunction(this, new SplashInstance(this, text, this.imgSrc))(text);
   }
   progress(...jobs) {
-    return NanosplashFactory.createProgressFunction(this, new SplashInstance(this, ""))(...jobs);
+    return NanosplashFactory.createProgressFunction(this, new SplashInstance(this, "", this.imgSrc))(...jobs);
   }
   while(asyncTask) {
-    return NanosplashFactory.createWhileFunction(this, new SplashInstance(this, ""))(asyncTask);
-  }
-  fifoIterate(callback) {
-    let i = 0;
-    const instanceEntries = this.instances.entries();
-    for (const [id, splashInstance] of instanceEntries) {
-      if (!callback(id, splashInstance, i++)) {
+    return NanosplashFactory.createWhileFunction(this, new SplashInstance(this, "", this.imgSrc))(asyncTask);
+  }
+  lifoIterate(callback) {
+    const n = this.instances.size;
+    const instances = Array.from(this.instances.values());
+    for (let i = n - 1; i >= 0; i--) {
+      console.log({
+        size: n,
+        lastIdx: n - 1,
+        currentIdx: i
+      });
+      const instance = instances[i];
+      const id = instance.getId();
+      if (!callback(id, instance, i)) {
         break;
       }
     }
@@ -280,8 +297,9 @@ class Nanosplash {
         throw new Error(`Could not find element with id: ${id}`);
       }
     } else {
-      this.fifoIterate((_, splashInstance, i) => {
-        const remove = i === 0;
+      const n = this.instances.size;
+      this.lifoIterate((_, splashInstance, i) => {
+        const remove = i === n - 1;
         if (remove) {
           splashInstance.delete();
         }

package/docs/index.html

@@ -15,8 +15,8 @@
 	</head>
 	<body class="flex flex-col justify-between">
 		<div class="w-100 min-h-screen flex flex-col justify-center items-center">
-			<div class="text-3xl">Nanosplash</div>
-			<div class="mt-3">Small. Simple. Reliable.</div>
+			<div class="text-4xl text-slate-900 drop-shadow-lg">Nanosplash</div>
+			<div class="text-pink-500 mt-3 font-mono text-sm">ns.show('text').inside('#id')</div>
 			<div class="flex flex-col space-y-2 my-10">
 				<div class="flex space-x-2 justify-center">
 					<img src="https://badgen.net/npm/v/nanosplash" />
@@ -30,13 +30,23 @@
 					/>
 				</div>
 			</div>
-			<div class="text-white bg-slate-700 p-3 rounded shadow-xl font-mono text-sm">ns.show('text').inside('#myDiv')</div>
+			<div class="flex rounded-xl text-slate-400 shadow-xl overflow-hidden">
+				<div data-copy class="p-3 bg-slate-800 text-slate-400 font-mono">
+					&lt;script src=&quot;https://unpkg.com/nanosplash/dist/iife/nanosplash.iife.js&quot;&gt;
+				</div>
+				<div id="copy" class="bg-pink-500 text-pink-200 p-3 cursor-pointer hover:text-white">Copy</div>
+			</div>
+			<div class="mt-10 flex justify-content items-center divide-x-2 text-slate-400">
+				<a href="https://www.npmjs.com/package/nanosplash" target="_blank"><i class="lni lni-npm text-4xl hover:text-pink-500 px-5"></i></a>
+				<a href="https://github.com/isakhauge/nanosplash" target="_blank"><i class="lni lni-github-original text-2xl hover:text-pink-500 px-5"></i></a>
+			</div>
+			<a class="mt-10 text-pink-300 hover:text-pink-500" href="/typedoc">API Reference Documentation</a>
 		</div>
-		<div class="grid grid-cols-2 gap-1">
+		<div class="grid grid-cols-1 xl:grid-cols-2 gap-1">
 			<div id="a" class="p-20 bg-slate-100 flex flex-col items-center">
 				<div class="text-xl mb-10">Give user progress feedback</div>
-				<div class="text-white bg-slate-800 p-5 rounded-lg shadow-2xl font-mono text-sm">
-					ns.img(src).progress(<br>
+				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
+					ns.progress(<br>
 					&nbsp;&nbsp;[promise1, 'Loading A'],<br>
 					&nbsp;&nbsp;[promise2, 'Loading B'],<br>
 					&nbsp;&nbsp;[promise3, 'Loading C'],<br>
@@ -45,13 +55,13 @@
 			</div>
 			<div id="b" class="p-20 bg-slate-100 flex flex-col items-center">
 				<div class="text-xl mb-10">Handle async functions</div>
-				<div class="text-white bg-slate-800 p-5 rounded-lg shadow-2xl font-mono text-sm">
+				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
 					ns.while(promise).show('Loading ...').inside('#myDiv')
 				</div>
 			</div>
 			<div id="c" class="p-20 bg-slate-100 flex flex-col items-center">
 				<div class="text-xl mb-10">Display fullscreen</div>
-				<div class="text-white bg-slate-800 p-5 rounded-lg shadow-2xl font-mono text-sm">
+				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
 					const splash = ns.show('Fullscreen text')<br>
 					splash.moveTo('#myDiv')<br>
 					splash.remove()
@@ -59,19 +69,31 @@
 			</div>
 			<div id="d" class="p-20 bg-slate-100 flex flex-col items-center">
 				<div class="text-xl mb-10">Display multiple, independent instances</div>
-				<div class="text-white bg-slate-800 p-5 rounded-lg shadow-2xl font-mono text-sm">
-					ns.img(src).show('Loading component A').inside('#a')<br>
-					ns.show('Loading component A').inside('#b')<br>
-					ns.show('Loading component A').inside('#c')<br>
+				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
+					ns.show('Loading component A').inside('#a')<br>
+					ns.show('Loading component B').inside('#b')<br>
+					ns.show('Loading component C').inside('#c')<br>
 					<br><br>
-					ns.hide() // Removes instances in a FIFO manner.<br>
+					ns.hide() // Removes instances in a LIFO manner.<br>
 					ns.hideAll() // Removes all instances.
 				</div>
 			</div>
 		</div>
 		<footer>
 			
+			<script>
+				document.getElementById('copy').onclick = function () {
+					const text = document.querySelector('[data-copy]').innerText
+					navigator.clipboard.writeText(text)
+					alert('Copied to clipboard!')
+				}
+				window.onload = () => {
+					setTimeout(() => {
+						window.installNanosplash({spinner: true})
+					}, 100)
+				}
+			</script>
 		</footer>
-		<style>body{min-height:100vh}.pill{font-size:10px;padding:.2em .5em}</style>
+		<style>body{min-height:100vh}</style>
 	</body>
 </html>

package/docs/nanosplash.iife.js

@@ -1 +1,6 @@
-var T=Object.defineProperty,b=Object.defineProperties;var y=Object.getOwnPropertyDescriptors;var I=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var S=(a,o,c)=>o in a?T(a,o,{enumerable:!0,configurable:!0,writable:!0,value:c}):a[o]=c,w=(a,o)=>{for(var c in o||(o={}))x.call(o,c)&&S(a,c,o[c]);if(I)for(var c of I(o))C.call(o,c)&&S(a,c,o[c]);return a},p=(a,o)=>b(a,y(o));(function(){"use strict";const a=function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const s of document.querySelectorAll('link[rel="modulepreload"]'))n(s);new MutationObserver(s=>{for(const i of s)if(i.type==="childList")for(const h of i.addedNodes)h.tagName==="LINK"&&h.rel==="modulepreload"&&n(h)}).observe(document,{childList:!0,subtree:!0});function t(s){const i={};return s.integrity&&(i.integrity=s.integrity),s.referrerpolicy&&(i.referrerPolicy=s.referrerpolicy),s.crossorigin==="use-credentials"?i.credentials="include":s.crossorigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function n(s){if(s.ep)return;s.ep=!0;const i=t(s);fetch(s.href,i)}};var o="";function c(r){return document.querySelector(r)}function v(r,e,t=!1){r&&e&&(e.hasChildNodes()&&t?e.insertBefore(r,e.firstChild):e.appendChild(r))}const m=r=>document.createElement(r);function d(r,...e){r.classList.add(...e)}function E(r,e,t){r.setAttribute(e,t)}class f{static destinationToNode(e){if(typeof e=="string"){const t=c(e);if(!t)throw new Error(`No match with ${e}`);return t}else if(e instanceof Node)return e;throw new Error("Destination argument must string or Node")}static createContextualApiObject(e){const t={getId:()=>e.getId(),remove:()=>e.delete(),moveTo:n=>e.moveTo(n),getText:()=>e.getText(),setText:n=>e.setText(n),getImgSrc:()=>e.getImgSrc(),setImgSrc:n=>e.setImgSrc(n)};return p(w({},t),{inside:n=>(e.moveTo(n),t)})}}class u{constructor(e,t,n){var s;this.nsRootElement=m("div"),this.nsTextElement=m("div"),this.nsWindowElement=m("div"),this.nsWrapperElement=m("div"),this.nsContentElement=m("div"),this.nsImageElement=m("img"),this.id=Math.random().toString(36).substring(2),this.nsInstance=e,this.nsTextElement.innerText=t,this.imgSrc=n,this.nsImageElement.src=(s=this.imgSrc)!=null?s:"",this.nsImageElement.alt=g.APP_NAME,this.assembleNSComponent(),this.setImgSrc(n)}assignCSSClasses(){d(this.nsContentElement,"ns-container"),d(this.nsWrapperElement,"ns-blur"),d(this.nsImageElement,"ns-img"),d(this.nsTextElement,"ns-text"),d(this.nsWindowElement,"ns","ns-window"),d(this.nsRootElement,"ns-wrapper")}assembleElementStructure(){this.nsContentElement.append(this.nsImageElement,this.nsTextElement),this.nsWindowElement.append(this.nsContentElement),this.nsRootElement.append(this.nsWrapperElement,this.nsWindowElement)}assembleNSComponent(){this.nsRootElement.id=this.getId(),E(this.nsRootElement,"data-ctx","nanosplash"),this.assembleElementStructure(),this.assignCSSClasses()}getId(){return this.id}getText(){return this.nsTextElement.innerText}setText(e){return this.nsTextElement.innerText=e,this}getImgSrc(){return this.imgSrc}setImgSrc(e){return this.nsImageElement.src=e!=null?e:"",this.nsImageElement.style.display=e?"block":"none",this.assembleElementStructure(),this}getDestination(){return this.destinationNode}cleanAndRestore(){const e=this.nsRootElement.parentElement;e&&this.restoreDOMStructure(e)}resetFullscreenAttributes(){E(this.nsRootElement,"style",""),this.nsRootElement.classList.remove("ns-fs")}moveWithRegularStrategy(e){const t=e.parentNode;t&&(this.restoreDOMStructure(t),t.replaceChild(this.nsRootElement,e),this.nsWrapperElement.appendChild(e))}moveWithFullscreenStrategy(){this.nsRootElement.classList.add("ns-fs"),v(this.nsRootElement,document.body,!0)}replaceSplashInstancesHavingSameDestination(e){const t=s=>s.getId()!==this.getId(),n=s=>s.delete();this.nsInstance.getSplashesWithDestinationNode(e).filter(t).forEach(n)}moveTo(e){this.cleanAndRestore(),this.destinationNode=f.destinationToNode(e),this.replaceSplashInstancesHavingSameDestination(this.destinationNode),this.destinationNode===document.body?this.moveWithFullscreenStrategy():(this.resetFullscreenAttributes(),this.moveWithRegularStrategy(this.destinationNode)),this.assembleNSComponent()}forEachWrappedNode(e){Array.from(this.nsWrapperElement.childNodes).forEach(e)}restoreDOMStructure(e){this.forEachWrappedNode(t=>e.insertBefore(t,this.nsRootElement))}removeElementsFromDOM(){[this.nsTextElement,this.nsImageElement,this.nsContentElement,this.nsWrapperElement,this.nsWindowElement,this.nsRootElement].forEach(e=>e.remove())}delete(){this.cleanAndRestore(),this.removeElementsFromDOM(),this.nsInstance.delete(this)}}class l{static ensureInstance(e,t,n,s){var i;return e||(e=new u(t,n,s)),e.setText(n).setImgSrc((i=e.getImgSrc())!=null?i:s)}static createImgFunction(e,t){return n=>(t=l.ensureInstance(t,e,"",n),{show:l.createShowFunction(e,t),progress:l.createProgressFunction(e,t),while:l.createWhileFunction(e,t)})}static createShowFunction(e,t){return n=>(t=l.ensureInstance(t,e,n),e.instances.set(t.getId(),t),t.moveTo(document.body),f.createContextualApiObject(t))}static createProgressFunction(e,t){return(...n)=>(t=l.ensureInstance(t,e,""),t.moveTo(document.body),(async()=>{for(const[s,[i,h]]of n.entries())t.setText(h),await i;t.delete()})(),f.createContextualApiObject(t))}static createWhileFunction(e,t){return n=>(t=l.ensureInstance(t,e,""),{show(s){return e.instances.set(t.getId(),t),t.moveTo(document.body),t.setText(s),n.finally(()=>t.delete()),f.createContextualApiObject(t)}})}}class g{constructor(){this.instances=new Map}img(e){return l.createImgFunction(this,new u(this,"",e))(e)}show(e){return l.createShowFunction(this,new u(this,e))(e)}progress(...e){return l.createProgressFunction(this,new u(this,""))(...e)}while(e){return l.createWhileFunction(this,new u(this,""))(e)}fifoIterate(e){let t=0;const n=this.instances.entries();for(const[s,i]of n)if(!e(s,i,t++))break}delete(e){this.instances.delete(e.getId())}hideAll(){this.instances.forEach(e=>e.delete())}hide(e){if(e){const t=this.instances.get(e);if(t)t.delete();else throw new Error(`Could not find element with id: ${e}`)}else this.fifoIterate((t,n,s)=>{const i=s===0;return i&&n.delete(),i})}getSplashesWithDestinationNode(e){const t=n=>n.getDestination()===e;return Array.from(this.instances.values()).filter(t)}}g.APP_NAME="Nanosplash",window.addEventListener("load",()=>window.ns=new g)})();
+var I=Object.defineProperty,v=Object.defineProperties;var b=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var S=(l,o,a)=>o in l?I(l,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):l[o]=a,w=(l,o)=>{for(var a in o||(o={}))T.call(o,a)&&S(l,a,o[a]);if(p)for(var a of p(o))N.call(o,a)&&S(l,a,o[a]);return l},y=(l,o)=>v(l,b(o));(function(){"use strict";const l=function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const n of document.querySelectorAll('link[rel="modulepreload"]'))s(n);new MutationObserver(n=>{for(const i of n)if(i.type==="childList")for(const c of i.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&s(c)}).observe(document,{childList:!0,subtree:!0});function t(n){const i={};return n.integrity&&(i.integrity=n.integrity),n.referrerpolicy&&(i.referrerPolicy=n.referrerpolicy),n.crossorigin==="use-credentials"?i.credentials="include":n.crossorigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function s(n){if(n.ep)return;n.ep=!0;const i=t(n);fetch(n.href,i)}};var o=(()=>`.ns-blur,body .ns-fs~*{filter:blur(5px);overflow:hidden}.ns-wrapper{position:relative}.ns-fs{left:0;min-height:100vh;min-width:100%;position:fixed;top:0;z-index:2}.ns-window{align-items:center;background-color:#fffc;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.ns-img{margin-bottom:2em;max-height:9rem;width:9rem}.ns-text-container{align-items:center}.ns-text,.ns-text-container{display:flex;justify-content:center}.ns-text{color:#5a6685}.ns-spinner{display:flex;height:1em;margin-left:1em;width:1em}.ns-spinner>svg{stroke-width:8;-webkit-animation:Rotate 2s linear infinite;animation:Rotate 2s linear infinite;height:inherit;position:relative;width:inherit}.ns-spinner .path{stroke:#5a6685;stroke-linecap:round;-webkit-animation:Dash 1.5s ease-in-out infinite;animation:Dash 1.5s ease-in-out infinite}@-webkit-keyframes Rotate{to{transform:rotate(1turn)}}@keyframes Rotate{to{transform:rotate(1turn)}}@-webkit-keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
+`)();function a(r){return document.querySelector(r)}function x(r,e,t=!1){r&&e&&(e.hasChildNodes()&&t?e.insertBefore(r,e.firstChild):e.appendChild(r))}const m=r=>document.createElement(r);function h(r,...e){r.classList.add(...e)}function E(r,e,t){r.setAttribute(e,t)}class u{static destinationToNode(e){if(typeof e=="string"){const t=a(e);if(!t)throw new Error(`No match with ${e}`);return t}else if(e instanceof Node)return e;throw new Error("Destination argument must string or Node")}static createContextualApiObject(e){const t={getId:()=>e.getId(),remove:()=>e.delete(),moveTo:s=>e.moveTo(s),getText:()=>e.getText(),setText:s=>e.setText(s),getImgSrc:()=>e.getImgSrc(),setImgSrc:s=>e.setImgSrc(s)};return y(w({},t),{inside:s=>(e.moveTo(s),t)})}static createNanosplashSpinnerElement(){const e=m("div");return h(e,"ns-spinner"),e.innerHTML=`
+            <svg viewBox="0 0 50 50">
+                <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
+            </svg>
+        `,e}}class f{constructor(e,t,s){var n;this.nsRootElement=m("div"),this.nsTextElement=m("div"),this.nsTextContainerElement=m("div"),this.nsSpinnerElement=u.createNanosplashSpinnerElement(),this.nsWindowElement=m("div"),this.nsWrapperElement=m("div"),this.nsContentElement=m("div"),this.nsImageElement=m("img"),this.id=Math.random().toString(36).substring(2),this.nsInstance=e,this.nsTextElement.innerText=t,this.imgSrc=s,this.nsImageElement.src=(n=this.imgSrc)!=null?n:"",this.nsImageElement.alt=g.APP_NAME,this.nsRootElement.style.fontSize=e.fontSize,this.nsSpinnerElement.style.display=e.showSpinner?"flex":"none",this.assembleNSComponent(),this.setImgSrc(s)}assignCSSClasses(){h(this.nsContentElement,"ns-container"),h(this.nsWrapperElement,"ns-blur"),h(this.nsImageElement,"ns-img"),h(this.nsTextElement,"ns-text"),h(this.nsTextContainerElement,"ns-text-container"),h(this.nsSpinnerElement,"ns-spinner"),h(this.nsWindowElement,"ns","ns-window"),h(this.nsRootElement,"ns-wrapper")}assembleElementStructure(){this.nsTextContainerElement.append(this.nsTextElement,this.nsSpinnerElement),this.nsContentElement.append(this.nsImageElement,this.nsTextContainerElement),this.nsWindowElement.append(this.nsContentElement),this.nsRootElement.append(this.nsWrapperElement,this.nsWindowElement)}assembleNSComponent(){this.nsRootElement.id=this.getId(),E(this.nsRootElement,"data-ctx","nanosplash"),this.assembleElementStructure(),this.assignCSSClasses()}getId(){return this.id}getText(){return this.nsTextElement.innerText}setText(e){return this.nsTextElement.innerText=e,this}getImgSrc(){return this.imgSrc}setImgSrc(e){return this.nsImageElement.src=e!=null?e:"",this.nsImageElement.style.display=e?"block":"none",this.assembleElementStructure(),this}getDestination(){return this.destinationNode}cleanAndRestore(){const e=this.nsRootElement.parentElement;e&&this.restoreDOMStructure(e)}resetFullscreenAttributes(){E(this.nsRootElement,"style",""),this.nsRootElement.classList.remove("ns-fs")}moveWithRegularStrategy(e){const t=e.parentNode;t&&(this.restoreDOMStructure(t),t.replaceChild(this.nsRootElement,e),this.nsWrapperElement.appendChild(e))}moveWithFullscreenStrategy(){this.nsRootElement.classList.add("ns-fs"),x(this.nsRootElement,document.body,!0)}replaceSplashInstancesHavingSameDestination(e){const t=n=>n.getId()!==this.getId(),s=n=>n.delete();this.nsInstance.getSplashesWithDestinationNode(e).filter(t).forEach(s)}moveTo(e){this.cleanAndRestore(),this.destinationNode=u.destinationToNode(e),this.replaceSplashInstancesHavingSameDestination(this.destinationNode),this.destinationNode===document.body?this.moveWithFullscreenStrategy():(this.resetFullscreenAttributes(),this.moveWithRegularStrategy(this.destinationNode)),this.assembleNSComponent()}forEachWrappedNode(e){Array.from(this.nsWrapperElement.childNodes).forEach(e)}restoreDOMStructure(e){this.forEachWrappedNode(t=>e.insertBefore(t,this.nsRootElement))}removeElementsFromDOM(){[this.nsTextElement,this.nsSpinnerElement,this.nsTextContainerElement,this.nsImageElement,this.nsContentElement,this.nsWrapperElement,this.nsWindowElement,this.nsRootElement].forEach(e=>e.remove())}delete(){this.cleanAndRestore(),this.removeElementsFromDOM(),this.nsInstance.delete(this)}}class d{static ensureInstance(e,t,s,n){var i;return e||(e=new f(t,s,n)),e.setText(s).setImgSrc((i=e.getImgSrc())!=null?i:n)}static createShowFunction(e,t){return s=>(t=d.ensureInstance(t,e,s),e.instances.set(t.getId(),t),t.moveTo(document.body),u.createContextualApiObject(t))}static createProgressFunction(e,t){return(...s)=>(t=d.ensureInstance(t,e,""),t.moveTo(document.body),(async()=>{for(const[n,[i,c]]of s.entries())t.setText(c),await i;t.delete()})(),u.createContextualApiObject(t))}static createWhileFunction(e,t){return s=>(t=d.ensureInstance(t,e,""),{show(n){return e.instances.set(t.getId(),t),t.moveTo(document.body),t.setText(n),s.finally(()=>t.delete()),u.createContextualApiObject(t)}})}}class g{constructor(e){var t,s,n;this.imgSrc=(t=e==null?void 0:e.imgSrc)!=null?t:void 0,this.showSpinner=(s=e==null?void 0:e.spinner)!=null?s:!1,this.fontSize=(n=e==null?void 0:e.fontSize)!=null?n:"18px",this.instances=new Map}show(e){return d.createShowFunction(this,new f(this,e,this.imgSrc))(e)}progress(...e){return d.createProgressFunction(this,new f(this,"",this.imgSrc))(...e)}while(e){return d.createWhileFunction(this,new f(this,"",this.imgSrc))(e)}lifoIterate(e){const t=this.instances.size,s=Array.from(this.instances.values());for(let n=t-1;n>=0;n--){console.log({size:t,lastIdx:t-1,currentIdx:n});const i=s[n],c=i.getId();if(!e(c,i,n))break}}delete(e){this.instances.delete(e.getId())}hideAll(){this.instances.forEach(e=>e.delete())}hide(e){if(e){const t=this.instances.get(e);if(t)t.delete();else throw new Error(`Could not find element with id: ${e}`)}else{const t=this.instances.size;this.lifoIterate((s,n,i)=>{const c=i===t-1;return c&&n.delete(),c})}}getSplashesWithDestinationNode(e){const t=s=>s.getDestination()===e;return Array.from(this.instances.values()).filter(t)}}g.APP_NAME="Nanosplash",window.addEventListener("load",()=>{window.Nanosplash=g,window.installNanosplash=r=>{window.ns=new g(r)}})})();

package/docs/style.css

@@ -1 +1 @@
-@charset "UTF-8";.ns-blur,body .ns-fs~*{filter:blur(5px);overflow:hidden}.ns-wrapper{position:relative}.ns-fs{left:0;min-height:100vh;min-width:100%;position:fixed;top:0;z-index:2}.ns-window{align-items:center;background-color:#fffc;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.ns-img{margin-bottom:1rem;max-height:9rem;max-width:9rem}.ns-text{color:#333;display:flex;text-align:center}.ns-text:after{-webkit-animation:anim 1s infinite;animation:anim 1s infinite;content:"\a0\a0\a0";margin-left:.25em}@-webkit-keyframes anim{0%{content:"\a0\a0\a0"}30%{content:".\a0\a0"}60%{content:"..\a0"}90%{content:"..."}}@keyframes anim{0%{content:"\a0\a0\a0"}30%{content:".\a0\a0"}60%{content:"..\a0"}90%{content:"..."}}
+.ns-blur,body .ns-fs~*{filter:blur(5px);overflow:hidden}.ns-wrapper{position:relative}.ns-fs{left:0;min-height:100vh;min-width:100%;position:fixed;top:0;z-index:2}.ns-window{align-items:center;background-color:#fffc;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.ns-img{margin-bottom:2em;max-height:9rem;width:9rem}.ns-text-container{align-items:center}.ns-text,.ns-text-container{display:flex;justify-content:center}.ns-text{color:#5a6685}.ns-spinner{display:flex;height:1em;margin-left:1em;width:1em}.ns-spinner>svg{stroke-width:8;-webkit-animation:Rotate 2s linear infinite;animation:Rotate 2s linear infinite;height:inherit;position:relative;width:inherit}.ns-spinner .path{stroke:#5a6685;stroke-linecap:round;-webkit-animation:Dash 1.5s ease-in-out infinite;animation:Dash 1.5s ease-in-out infinite}@-webkit-keyframes Rotate{to{transform:rotate(1turn)}}@keyframes Rotate{to{transform:rotate(1turn)}}@-webkit-keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}