nanosplash 2.2.2 → 2.3.0

package/.github/workflows/production.yml

@@ -0,0 +1,57 @@
+name: Production CI
+
+on:
+  push:
+    branches: [production]
+  pull_request:
+    branches: [production]
+
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Jest (TS) Testing Procedure
+        run: |
+          yarn install
+          yarn test
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      
+      # Checkout branch
+      - name: Checkout
+        run: git checkout production
+
+      - name: Install npm packages
+        run: yarn install
+
+      - name: Transpile Typescript
+        run: yarn tsc
+
+      - name: Build IIFE bundle
+        run: yarn vite build -c vite.iife.config.js
+
+      - name: Build module bundles
+        run: yarn vite build -c vite.mod.config.js
+
+      - name: Build demo site
+        run: yarn vite build -c vite.site.config.js
+
+      - name: Build documentation site
+        run: yarn typedoc --readme none --excludePrivate --excludeInternal --out docs/typedoc --entryPoints src/Nanosplash.ts src/types.d.ts
+
+      # Persist changes and push
+      - name: Commit changes and push
+        run: |
+          git config user.name github-actions
+          git config user.email github-actions@github.com
+          git add .
+          git commit -m "Github Actions CI: Build Project for Production"
+          git push

package/.github/workflows/release.yml

@@ -0,0 +1,61 @@
+name: Release CI
+
+on:
+  push:
+    branches: [release]
+  pull_request:
+    branches: [release]
+
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Jest (TS) Testing Procedure
+        run: |
+          yarn install
+          yarn test
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install npm packages
+        run: yarn install
+
+      - name: Transpile Typescript
+        run: yarn tsc
+
+      - name: Build IIFE bundle
+        run: yarn vite build -c vite.iife.config.js
+
+      - name: Build module bundles
+        run: yarn vite build -c vite.mod.config.js
+
+      - name: Build demo site
+        run: yarn vite build -c vite.site.config.js
+
+      - name: Build documentation site
+        run: yarn typedoc --readme none --excludePrivate --excludeInternal --out docs/typedoc --entryPoints src/Nanosplash.ts src/types.d.ts
+
+      # Persist changes and push
+      - name: Commit changes and push
+        run: |
+          git config user.name github-actions
+          git config user.email github-actions@github.com
+          git add .
+          git commit -m "Github Actions CI: Build Project for Production"
+          git push origin release
+
+  # Publish to NPM
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Publish NPM package
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTOMATION_TOKEN}}

package/README.md

@@ -65,29 +65,48 @@ const Nanosplash = require('nanosplash')
 
 # Getting started
 
-## Basic usage (CDN)
+## 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`.
+> 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.
+
+```js
+const ns = new Nanosplash()
+window.ns = ns
+```
+
+## Basic usage
 
 ### Display the loading screen
 
 ```js
-loading.show('Loading the good stuff ...')
+ns.show('Loading the good stuff ...')
 ```
 
 ### Hide the loading screen
 
 ```js
-loading.hide()
+// Hide one at a time
+ns.hide()
+
+// Hide all
+ns.hideAll()
 ```
 
+## Advanced usage
+
 ### Display the loading screen inside an element
 
 ```js
-loading.show('Loading component ...').inside('#my-element')
-```
+// Use CSS selector string
+ns.show('Loading component ...').inside('#my-element')
 
-## Advanced usage
+// Use HTMLElement objects directly
+ns
+	.show('Loading component ...')
+	.inside(document.getElementById('my-element'))
+```
 
 ### Combine Nanosplash with async tasks
 
@@ -95,8 +114,13 @@ loading.show('Loading component ...').inside('#my-element')
 const task1 = new Promise(r => setTimeout(() => r(), 3000))
 const task2 = async () => await getDataFromApi()
 
-loading.show('Loading resources ...').during(task1)
-loading.show('Fetching table data ...').inside('#my-table').during(task2)
+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 ...']
+).inside('#my-table')
 ```
 
 <hr>

package/dist/iife/nanosplash.iife.js

@@ -1 +1 @@
-var __vite_style__=document.createElement("style");__vite_style__.innerHTML="@-webkit-keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.1)}}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.1)}}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.nanosplash-container{align-items:center;border-radius:inherit;flex-direction:column;justify-content:center;overflow:inherit;position:absolute;z-index:1}.nanosplash-container[hidden=true]{display:none}.nanosplash-container:not([hidden=true]){display:flex}.nanosplash-container[data-blur=none]:not([hidden=true])~*{filter:blur(0)}.nanosplash-container[data-blur=light]:not([hidden=true])~*{filter:blur(2px)}.nanosplash-container[data-blur=medium]:not([hidden=true])~*{filter:blur(4px)}.nanosplash-container[data-blur=heavy]:not([hidden=true])~*{filter:blur(10px)}.nanosplash-container .nanosplash-text{text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;-webkit-font-smoothing:antialiased;text-shadow:0 0 2px rgba(0,0,0,.2)}.nanosplash-container img.nanosplash-img{margin-bottom:40px}.nanosplash-container[data-splash-animation=pulse]>img{-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:pulse;animation-name:pulse}.nanosplash-container[data-splash-animation=spin]>img{-webkit-animation-duration:.7s;animation-duration:.7s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:spin;animation-name:spin;-webkit-animation-timing-function:linear;animation-timing-function:linear}body>.nanosplash-container:not([hidden=true]){height:100vh;width:100%}\n",document.head.appendChild(__vite_style__),function(){"use strict";class t extends Error{constructor(t){super(t)}t(){return this.constructor.name}}class i extends t{constructor(t){super(t)}}const n=(t,i)=>{var n;const s=document.createElement(t);return i&&(s.id||(s.id=i.id+""),s.className||(s.className=i.className+""),null==(n=i.attributes)||n.filter((t=>t.value)).forEach((({key:t,value:i})=>r(s,t,i))),i.content&&("string"==typeof i.content?s.innerText=i.content:s.append(i.content))),s},s=(t,i)=>{t.hidden=!i,i?l(t,"hidden"):r(t,"hidden","true")},e=t=>({to:(i,n)=>{const s=Array.from(i.childNodes);if(s.length<1||!n)return void i.appendChild(t);const e=s[0];i.insertBefore(t,e)}}),a=t=>{const i=t.parentNode;i&&(n=>{i.style.position="relative";const s="px",e=i===document.body;let a,r,l,h;a=e?scrollX+s:"0px",r=e?scrollY+s:"0px",l=e?"100%":n.width+s,h=e?"100vh":n.height+s,o(i,"position","relative"),o(t,"left",a),o(t,"top",r),o(t,"width",l),o(t,"height",h)})(i.getBoundingClientRect())},o=(t,i,n)=>{t.style[i]=n},r=(t,i,n)=>{t.setAttribute(i,n)},l=(t,i)=>{t.removeAttribute(i)};class h{static i(){const t=n("div",{className:"nanosplash-container",attributes:[{key:"data-splash-animation",value:this.l.o}]});return t.style.backgroundColor=this.l.h,t}static u(){const t=n("img",{className:"nanosplash-img",attributes:[{key:"src",value:this.l.m},{key:"alt",value:"Nanosplash indicator"}]});return s(t,!1),t}static p(){return n("div",{className:"nanosplash-text",content:this.l.g})}}h.l={v:document.body,g:"Loading ...",_:'"Arial", sans-serif',k:"medium",T:"#555",S:"26px",m:"favicon.svg",N:"100px",A:"auto",o:"pulse",h:"rgba(255, 255, 255, 0.90)",O:"light"};class u{constructor(t){this.cache={H:""},this.L=h.l.g,this.C=h.l.v,this.I=h.i(),this.D=h.u(),this.B=h.p(),e(this.D).to(this.I),e(this.B).to(this.I),e(this.I).to(this.C,!0),s(this.I,!1),a(this.I),this.R(),t&&this.configure(t)}install(){var t,i,n;Object.defineProperty(window,"loading",{value:this,writable:!1}),t=window,i=()=>a(this.I),n=["resize","scroll"],(([t,s])=>{n.forEach((n=>{t?t(`on${n}`,i):s(n,i,!0)}))})([t.attachEvent,t.addEventListener])}configure(t){var i,n,e,a,o,r,l,h,c,d,m,p;return(null==(i=null==t?void 0:t.default)?void 0:i.destination)&&(this.C=u.W(t.default.destination)),this.L||(this.L=null==(n=t.default)?void 0:n.text),(null==(e=t.text)?void 0:e.family)&&this.X(t.text.family),(null==(a=t.text)?void 0:a.weight)&&this.F(t.text.weight),(null==(o=t.text)?void 0:o.color)&&this.P(t.text.color),(null==(r=t.text)?void 0:r.size)&&this.G(t.text.size),(null==(l=t.background)?void 0:l.color)&&this.U(t.background.color),(null==(h=t.background)?void 0:h.blur)&&this.j(t.background.blur),t.splash?((null==(c=t.splash)?void 0:c.src)&&this.K(t.splash.src),(null==(d=t.splash)?void 0:d.width)&&this.M(t.splash.width),(null==(m=t.splash)?void 0:m.height)&&this.Y(t.splash.height),(null==(p=t.splash)?void 0:p.animation)&&this.Z(t.splash.animation)):s(this.D,!1),this}show(t){this.$(null!=t?t:h.l.g),s(this.I,!0);const i=this.I.parentNode;i&&i!==document.body&&a(this.I);const n=async t=>{await t,this.hide()};return{inside:t=>{const i=u.W(t);return e(this.I).to(i,!0),this.cache.H=i.style.position,a(this.I),{during:n}},during:n}}hide(){const t=this.I.parentElement;o(t,"position",this.cache.H),s(this.I,!1),this.$(this.L),e(this.I).to(this.C,!0),a(this.I)}R(){this.X(h.l._),this.F(h.l.k),this.P(h.l.T),this.G(h.l.S),this.K(h.l.m),this.M(h.l.N),this.Y(h.l.A),this.Z(h.l.o),this.U(h.l.h),this.j(h.l.O)}$(t){this.B.innerText=t}X(t){o(this.B,"fontFamily",t)}F(t){o(this.B,"fontWeight",t)}P(t){o(this.B,"color",t)}G(t){o(this.B,"fontSize",t)}K(t){this.D.src=t,s(this.D,!0)}M(t){o(this.D,"width",t)}Y(t){o(this.D,"height",t)}Z(t){r(this.I,"data-splash-animation",t)}U(t){o(this.I,"backgroundColor",t)}j(t){r(this.I,"data-blur",t)}static W(t){const n="string"==typeof t,s=(e=t)&&"[object Function]"==={}.toString.call(e);var e;const a=(t=>t instanceof Element||t instanceof Node)(t);let o;if(n)r=t,o=document.querySelector(r);else if(s)o=t();else{if(!a)throw new i;o=t}var r;return o}}window&&window instanceof Window&&(new u).install()}();
+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:1rem;max-height:9rem;max-width:9rem}.ns-text{color:#333;text-align:center}\n",document.head.appendChild(o),function(){const t=t=>document.createElement(t);function o(t,...s){t.classList.add(...s)}function c(t,s,e){t.setAttribute(s,e)}class a{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 c=((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(c,e({inside:s=>(t.moveTo(s),o)}));var c}}class u{constructor(s,e,i){var n;this.u=t("div"),this.l=t("div"),this.m=t("div"),this.g=t("div"),this.p=t("img"),this.v=t("div"),this.id=Math.random().toString(36).substring(2),this.S=s,this.v.innerText=e,this.I=i,this.p.src=null!=(n=this.I)?n:"",this.p.alt=d.O,this.j(),this.setImgSrc(i)}F(){o(this.g,"ns-container"),o(this.l,"ns-blur"),o(this.p,"ns-img"),o(this.v,"ns-text"),o(this.m,"ns","ns-window"),o(this.u,"ns-wrapper")}N(){this.g.append(this.p,this.v),this.m.append(this.g),this.u.append(this.l,this.m)}j(){this.u.id=this.getId(),c(this.u,"data-ctx","nanosplash"),this.N(),this.F()}getId(){return this.id}getText(){return this.v.innerText}setText(t){return this.v.innerText=t,this}getImgSrc(){return this.I}setImgSrc(t){return this.p.src=null!=t?t:"",this.p.style.display=t?"block":"none",this.N(),this}T(){const t=this.u.parentElement;t&&this.C(t)}A(){c(this.u,"style",""),this.u.classList.remove("ns-fs")}M(t){const s=t.parentNode;s&&(this.C(s),s.replaceChild(this.u,t),this.l.appendChild(t))}W(){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)}moveTo(t){this.T();const s=a.h(t);s===document.body?this.W():(this.A(),this.M(s)),this.j()}k(t){Array.from(this.l.childNodes).forEach(t)}C(t){this.k((s=>t.insertBefore(s,this.u)))}D(){[this.v,this.p,this.g,this.l,this.m,this.u].forEach((t=>t.remove()))}delete(){this.T(),this.D(),this.S.delete(this)}}class l{static $(t,s,e,i){var n;return t||(t=new u(s,e,i)),t.setText(e).setImgSrc(null!=(n=t.getImgSrc())?n:i)}static P(t,s){return e=>(s=l.$(s,t,"",e),{show:l.R(t,s),progress:l.q(t,s),while:l.B(t,s)})}static R(t,s){return e=>(s=l.$(s,t,e),t.G.set(s.getId(),s),s.moveTo(document.body),a.o(s))}static q(t,s){return(...e)=>((s=l.$(s,t,"")).moveTo(document.body),(async()=>{for(const[t,[i,n]]of e.entries())s.setText(n),await i;s.delete()})(),a.o(s))}static B(t,s){return e=>(s=l.$(s,t,""),{show:i=>(t.G.set(s.getId(),s),s.moveTo(document.body),s.setText(i),e.finally((()=>s.delete())),a.o(s))})}}class d{constructor(){this.G=new Map}img(t){return l.P(this,new u(this,"",t))(t)}show(t){return l.R(this,new u(this,t))(t)}progress(...t){return l.q(this,new u(this,""))(...t)}while(t){return l.B(this,new u(this,""))(t)}H(t){let s=0;const e=this.G.entries();for(const[i,n]of e)if(!t(i,n,s++))break}delete(t){this.G.delete(t.getId())}hideAll(){this.G.forEach((t=>t.delete()))}hide(t){if(t){const s=this.G.get(t);if(!s)throw new Error(`Could not find element with id: ${t}`);s.delete()}else this.H(((t,s,e)=>{const i=0===e;return i&&s.delete(),i}))}}d.O="Nanosplash",window.addEventListener("load",(()=>window.ns=new d))}();

package/dist/module/Nanosplash.css

@@ -0,0 +1 @@
+.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;text-align:center}

package/dist/module/manifest.json

@@ -1,7 +1,10 @@
 {
-  "src/Nanosplash.ts": {
+  "src/Core/Nanosplash.ts": {
     "file": "nanosplash.cjs.js",
-    "src": "src/Nanosplash.ts",
-    "isEntry": true
+    "src": "src/Core/Nanosplash.ts",
+    "isEntry": true,
+    "css": [
+      "Nanosplash.css"
+    ]
   }
 }

package/dist/module/nanosplash.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"t",{value:!0}),exports[Symbol.toStringTag]="Module";class t extends Error{constructor(t){super(t)}i(){return this.constructor.name}}class s extends t{constructor(t){super(t)}}const i=(t,s)=>{var i;const e=document.createElement(t);return s&&(e.id||(e.id=s.id+""),e.className||(e.className=s.className+""),null==(i=s.attributes)||i.filter((t=>t.value)).forEach((({key:t,value:s})=>l(e,t,s))),s.content&&("string"==typeof s.content?e.innerText=s.content:e.append(s.content))),e},e=(t,s)=>{t.hidden=!s,s?a(t,"hidden"):l(t,"hidden","true")},n=t=>({to:(s,i)=>{const e=Array.from(s.childNodes);if(e.length<1||!i)return void s.appendChild(t);const n=e[0];s.insertBefore(t,n)}}),h=t=>{const s=t.parentNode;s&&(i=>{s.style.position="relative";const e="px",n=s===document.body;let h,l,a,r;h=n?scrollX+e:"0px",l=n?scrollY+e:"0px",a=n?"100%":i.width+e,r=n?"100vh":i.height+e,o(s,"position","relative"),o(t,"left",h),o(t,"top",l),o(t,"width",a),o(t,"height",r)})(s.getBoundingClientRect())},o=(t,s,i)=>{t.style[s]=i},l=(t,s,i)=>{t.setAttribute(s,i)},a=(t,s)=>{t.removeAttribute(s)};class r{static h(){const t=i("div",{className:"nanosplash-container",attributes:[{key:"data-splash-animation",value:this.l.o}]});return t.style.backgroundColor=this.l.u,t}static v(){const t=i("img",{className:"nanosplash-img",attributes:[{key:"src",value:this.l.p},{key:"alt",value:"Nanosplash indicator"}]});return e(t,!1),t}static m(){return i("div",{className:"nanosplash-text",content:this.l.T})}}r.l={g:document.body,T:"Loading ...",S:'"Arial", sans-serif',N:"medium",O:"#555",_:"26px",p:"favicon.svg",A:"100px",k:"auto",o:"pulse",u:"rgba(255, 255, 255, 0.90)",H:"light"};class u{constructor(t){this.cache={C:""},this.I=r.l.T,this.L=r.l.g,this.D=r.h(),this.B=r.v(),this.R=r.m(),n(this.B).to(this.D),n(this.R).to(this.D),n(this.D).to(this.L,!0),e(this.D,!1),h(this.D),this.X(),t&&this.configure(t)}install(){var t,s,i;Object.defineProperty(window,"loading",{value:this,writable:!1}),t=window,s=()=>h(this.D),i=["resize","scroll"],(([t,e])=>{i.forEach((i=>{t?t(`on${i}`,s):e(i,s,!0)}))})([t.attachEvent,t.addEventListener])}configure(t){var s,i,n,h,o,l,a,r,c,d,v,p;return(null==(s=null==t?void 0:t.default)?void 0:s.destination)&&(this.L=u.F(t.default.destination)),this.I||(this.I=null==(i=t.default)?void 0:i.text),(null==(n=t.text)?void 0:n.family)&&this.P(t.text.family),(null==(h=t.text)?void 0:h.weight)&&this.W(t.text.weight),(null==(o=t.text)?void 0:o.color)&&this.G(t.text.color),(null==(l=t.text)?void 0:l.size)&&this.M(t.text.size),(null==(a=t.background)?void 0:a.color)&&this.U(t.background.color),(null==(r=t.background)?void 0:r.blur)&&this.j(t.background.blur),t.K?((null==(c=t.K)?void 0:c.src)&&this.Y(t.K.src),(null==(d=t.K)?void 0:d.width)&&this.Z(t.K.width),(null==(v=t.K)?void 0:v.height)&&this.$(t.K.height),(null==(p=t.K)?void 0:p.animation)&&this.q(t.K.animation)):e(this.B,!1),this}show(t){this.J(null!=t?t:r.l.T),e(this.D,!0);const s=this.D.parentNode;s&&s!==document.body&&h(this.D);const i=async t=>{await t,this.hide()};return{inside:t=>{const s=u.F(t);return n(this.D).to(s,!0),this.cache.C=s.style.position,h(this.D),{during:i}},during:i}}hide(){const t=this.D.parentElement;o(t,"position",this.cache.C),e(this.D,!1),this.J(this.I),n(this.D).to(this.L,!0),h(this.D)}X(){this.P(r.l.S),this.W(r.l.N),this.G(r.l.O),this.M(r.l._),this.Y(r.l.p),this.Z(r.l.A),this.$(r.l.k),this.q(r.l.o),this.U(r.l.u),this.j(r.l.H)}J(t){this.R.innerText=t}P(t){o(this.R,"fontFamily",t)}W(t){o(this.R,"fontWeight",t)}G(t){o(this.R,"color",t)}M(t){o(this.R,"fontSize",t)}Y(t){this.B.src=t,e(this.B,!0)}Z(t){o(this.B,"width",t)}$(t){o(this.B,"height",t)}q(t){l(this.D,"data-splash-animation",t)}U(t){o(this.D,"backgroundColor",t)}j(t){l(this.D,"data-blur",t)}static F(t){const i="string"==typeof t,e=(n=t)&&"[object Function]"==={}.toString.call(n);var n;const h=(t=>t instanceof Element||t instanceof Node)(t);let o;if(i)l=t,o=document.querySelector(l);else if(e)o=t();else{if(!h)throw new s;o=t}var l;return o}}exports.Nanosplash=u;
+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 c(t,...s){t.classList.add(...s)}function a(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 c=((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(c,e({inside:s=>(t.moveTo(s),o)}));var c}}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("img"),this.S=o("div"),this.id=Math.random().toString(36).substring(2),this.O=t,this.S.innerText=s,this.I=e,this.p.src=null!=(i=this.I)?i:"",this.p.alt=d.j,this.F(),this.setImgSrc(e)}N(){c(this.v,"ns-container"),c(this.m,"ns-blur"),c(this.p,"ns-img"),c(this.S,"ns-text"),c(this.g,"ns","ns-window"),c(this.l,"ns-wrapper")}T(){this.v.append(this.p,this.S),this.g.append(this.v),this.l.append(this.m,this.g)}F(){this.l.id=this.getId(),a(this.l,"data-ctx","nanosplash"),this.T(),this.N()}getId(){return this.id}getText(){return this.S.innerText}setText(t){return this.S.innerText=t,this}getImgSrc(){return this.I}setImgSrc(t){return this.p.src=null!=t?t:"",this.p.style.display=t?"block":"none",this.T(),this}M(){const t=this.l.parentElement;t&&this.C(t)}A(){a(this.l,"style",""),this.l.classList.remove("ns-fs")}W(t){const s=t.parentNode;s&&(this.C(s),s.replaceChild(this.l,t),this.m.appendChild(t))}D(){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)}moveTo(t){this.M();const s=u.o(t);s===document.body?this.D():(this.A(),this.W(s)),this.F()}k(t){Array.from(this.m.childNodes).forEach(t)}C(t){this.k((s=>t.insertBefore(s,this.l)))}$(){[this.S,this.p,this.v,this.m,this.g,this.l].forEach((t=>t.remove()))}delete(){this.M(),this.$(),this.O.delete(this)}}class m{static _(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 P(t,s){return e=>(s=m._(s,t,"",e),{show:m.R(t,s),progress:m.q(t,s),while:m.B(t,s)})}static R(t,s){return e=>(s=m._(s,t,e),t.G.set(s.getId(),s),s.moveTo(document.body),u.u(s))}static q(t,s){return(...e)=>((s=m._(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 B(t,s){return e=>(s=m._(s,t,""),{show:i=>(t.G.set(s.getId(),s),s.moveTo(document.body),s.setText(i),e.finally((()=>s.delete())),u.u(s))})}}class d{constructor(){this.G=new Map}img(t){return m.P(this,new l(this,"",t))(t)}show(t){return m.R(this,new l(this,t))(t)}progress(...t){return m.q(this,new l(this,""))(...t)}while(t){return m.B(this,new l(this,""))(t)}H(t){let s=0;const e=this.G.entries();for(const[i,r]of e)if(!t(i,r,s++))break}delete(t){this.G.delete(t.getId())}hideAll(){this.G.forEach((t=>t.delete()))}hide(t){if(t){const s=this.G.get(t);if(!s)throw new Error(`Could not find element with id: ${t}`);s.delete()}else this.H(((t,s,e)=>{const i=0===e;return i&&s.delete(),i}))}}d.j="Nanosplash",exports.Nanosplash=d;