nanosplash 2.2.4 → 2.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/production.yml +57 -0
- package/.github/workflows/release.yml +61 -0
- package/README.md +17 -15
- package/dist/iife/nanosplash.iife.js +1 -1
- package/dist/module/Nanosplash.css +1 -0
- package/dist/module/manifest.json +6 -3
- package/dist/module/nanosplash.cjs.js +1 -1
- package/dist/module/nanosplash.es.js +244 -330
- package/docs/index.html +54 -430
- package/docs/nanosplash.iife.js +1 -1
- package/docs/style.css +1 -1
- package/docs/typedoc/assets/highlight.css +1 -50
- package/docs/typedoc/assets/main.js +2 -2
- package/docs/typedoc/assets/search.js +1 -1
- package/docs/typedoc/assets/style.css +32 -2
- package/docs/typedoc/classes/Core_Nanosplash.Nanosplash.html +1 -0
- package/docs/typedoc/index.html +1 -1
- package/docs/typedoc/modules/Core_Nanosplash.html +1 -0
- package/docs/typedoc/modules/types.html +1 -1
- package/index.html +51 -412
- package/jest.config.ts +194 -0
- package/package.json +70 -65
- package/src/Core/Nanosplash.ts +74 -0
- package/src/Core/SplashInstance.ts +154 -0
- package/src/Factory/NanosplashFactory.ts +73 -0
- package/src/Interfaces/ContextualAPIInterface.ts +8 -0
- package/src/Interfaces/IdentityInterface.ts +3 -0
- package/src/Interfaces/ImageInterface.ts +5 -0
- package/src/Interfaces/InsideInterface.ts +5 -0
- package/src/Interfaces/NanosplashInterface.ts +4 -0
- package/src/Interfaces/ProgressInterface.ts +5 -0
- package/src/Interfaces/ShowInterface.ts +5 -0
- package/src/Interfaces/WhileInterface.ts +5 -0
- package/src/main.ts +2 -6
- package/src/repositories/NanosplashRepository.ts +34 -55
- package/src/style.sass +51 -61
- package/src/types.d.ts +45 -200
- package/src/utilities/dom.spec.ts +70 -0
- package/src/utilities/dom.ts +17 -256
- package/update-all.sh +3 -0
- package/vite.iife.config.js +46 -18
- package/vite.mod.config.js +48 -12
- package/vite.site.config.js +0 -3
- package/dist/module/style.css +0 -1
- package/docs/typedoc/classes/Nanosplash.Nanosplash-1.html +0 -56
- package/docs/typedoc/classes/types.Nanosplash.html +0 -56
- package/docs/typedoc/modules/Nanosplash.html +0 -1
- package/src/Exceptions/Exception.ts +0 -12
- package/src/Exceptions/IllegalArgumentException.ts +0 -9
- package/src/Exceptions/InvalidDestinationException.ts +0 -9
- package/src/Exceptions/MissingResourceException.ts +0 -9
- package/src/Nanosplash.ts +0 -484
- package/update-latest.sh +0 -21
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
name: Production CI
|
|
2
|
+
|
|
3
|
+
on:
|
|
4
|
+
push:
|
|
5
|
+
branches: [production]
|
|
6
|
+
pull_request:
|
|
7
|
+
branches: [production]
|
|
8
|
+
|
|
9
|
+
workflow_dispatch:
|
|
10
|
+
|
|
11
|
+
jobs:
|
|
12
|
+
test:
|
|
13
|
+
runs-on: ubuntu-latest
|
|
14
|
+
steps:
|
|
15
|
+
- uses: actions/checkout@v2
|
|
16
|
+
- name: Jest (TS) Testing Procedure
|
|
17
|
+
run: |
|
|
18
|
+
yarn install
|
|
19
|
+
yarn test
|
|
20
|
+
|
|
21
|
+
build:
|
|
22
|
+
runs-on: ubuntu-latest
|
|
23
|
+
steps:
|
|
24
|
+
- uses: actions/checkout@v2
|
|
25
|
+
with:
|
|
26
|
+
fetch-depth: 0
|
|
27
|
+
|
|
28
|
+
# Checkout branch
|
|
29
|
+
- name: Checkout
|
|
30
|
+
run: git checkout production
|
|
31
|
+
|
|
32
|
+
- name: Install npm packages
|
|
33
|
+
run: yarn install
|
|
34
|
+
|
|
35
|
+
- name: Transpile Typescript
|
|
36
|
+
run: yarn tsc
|
|
37
|
+
|
|
38
|
+
- name: Build IIFE bundle
|
|
39
|
+
run: yarn vite build -c vite.iife.config.js
|
|
40
|
+
|
|
41
|
+
- name: Build module bundles
|
|
42
|
+
run: yarn vite build -c vite.mod.config.js
|
|
43
|
+
|
|
44
|
+
- name: Build demo site
|
|
45
|
+
run: yarn vite build -c vite.site.config.js
|
|
46
|
+
|
|
47
|
+
- name: Build documentation site
|
|
48
|
+
run: yarn typedoc --readme none --excludePrivate --excludeInternal --out docs/typedoc --entryPoints src/Nanosplash.ts src/types.d.ts
|
|
49
|
+
|
|
50
|
+
# Persist changes and push
|
|
51
|
+
- name: Commit changes and push
|
|
52
|
+
run: |
|
|
53
|
+
git config user.name github-actions
|
|
54
|
+
git config user.email github-actions@github.com
|
|
55
|
+
git add .
|
|
56
|
+
git commit -m "Github Actions CI: Build Project for Production"
|
|
57
|
+
git push
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
name: Release CI
|
|
2
|
+
|
|
3
|
+
on:
|
|
4
|
+
push:
|
|
5
|
+
branches: [release]
|
|
6
|
+
pull_request:
|
|
7
|
+
branches: [release]
|
|
8
|
+
|
|
9
|
+
workflow_dispatch:
|
|
10
|
+
|
|
11
|
+
jobs:
|
|
12
|
+
test:
|
|
13
|
+
runs-on: ubuntu-latest
|
|
14
|
+
steps:
|
|
15
|
+
- uses: actions/checkout@v2
|
|
16
|
+
- name: Jest (TS) Testing Procedure
|
|
17
|
+
run: |
|
|
18
|
+
yarn install
|
|
19
|
+
yarn test
|
|
20
|
+
|
|
21
|
+
build:
|
|
22
|
+
runs-on: ubuntu-latest
|
|
23
|
+
steps:
|
|
24
|
+
- uses: actions/checkout@v2
|
|
25
|
+
|
|
26
|
+
- name: Install npm packages
|
|
27
|
+
run: yarn install
|
|
28
|
+
|
|
29
|
+
- name: Transpile Typescript
|
|
30
|
+
run: yarn tsc
|
|
31
|
+
|
|
32
|
+
- name: Build IIFE bundle
|
|
33
|
+
run: yarn vite build -c vite.iife.config.js
|
|
34
|
+
|
|
35
|
+
- name: Build module bundles
|
|
36
|
+
run: yarn vite build -c vite.mod.config.js
|
|
37
|
+
|
|
38
|
+
- name: Build demo site
|
|
39
|
+
run: yarn vite build -c vite.site.config.js
|
|
40
|
+
|
|
41
|
+
- name: Build documentation site
|
|
42
|
+
run: yarn typedoc --readme none --excludePrivate --excludeInternal --out docs/typedoc --entryPoints src/Nanosplash.ts src/types.d.ts
|
|
43
|
+
|
|
44
|
+
# Persist changes and push
|
|
45
|
+
- name: Commit changes and push
|
|
46
|
+
run: |
|
|
47
|
+
git config user.name github-actions
|
|
48
|
+
git config user.email github-actions@github.com
|
|
49
|
+
git add .
|
|
50
|
+
git commit -m "Github Actions CI: Build Project for Production"
|
|
51
|
+
git push origin release
|
|
52
|
+
|
|
53
|
+
# Publish to NPM
|
|
54
|
+
publish:
|
|
55
|
+
runs-on: ubuntu-latest
|
|
56
|
+
steps:
|
|
57
|
+
- uses: actions/checkout@v2
|
|
58
|
+
- name: Publish NPM package
|
|
59
|
+
run: npm publish --access public
|
|
60
|
+
env:
|
|
61
|
+
NODE_AUTH_TOKEN: ${{secrets.NPM_AUTOMATION_TOKEN}}
|
package/README.md
CHANGED
|
@@ -72,8 +72,8 @@ const Nanosplash = require('nanosplash')
|
|
|
72
72
|
If you are importing Nanosplash through modules, invoking the `install` function is essential in order to make it react to changes in the browser.
|
|
73
73
|
|
|
74
74
|
```js
|
|
75
|
-
const
|
|
76
|
-
|
|
75
|
+
const ns = new Nanosplash()
|
|
76
|
+
window.ns = ns
|
|
77
77
|
```
|
|
78
78
|
|
|
79
79
|
## Basic usage
|
|
@@ -81,13 +81,17 @@ nanosplash.install()
|
|
|
81
81
|
### Display the loading screen
|
|
82
82
|
|
|
83
83
|
```js
|
|
84
|
-
|
|
84
|
+
ns.show('Loading the good stuff ...')
|
|
85
85
|
```
|
|
86
86
|
|
|
87
87
|
### Hide the loading screen
|
|
88
88
|
|
|
89
89
|
```js
|
|
90
|
-
|
|
90
|
+
// Hide one at a time
|
|
91
|
+
ns.hide()
|
|
92
|
+
|
|
93
|
+
// Hide all
|
|
94
|
+
ns.hideAll()
|
|
91
95
|
```
|
|
92
96
|
|
|
93
97
|
## Advanced usage
|
|
@@ -96,19 +100,12 @@ loading.hide()
|
|
|
96
100
|
|
|
97
101
|
```js
|
|
98
102
|
// Use CSS selector string
|
|
99
|
-
|
|
103
|
+
ns.show('Loading component ...').inside('#my-element')
|
|
100
104
|
|
|
101
105
|
// Use HTMLElement objects directly
|
|
102
|
-
|
|
106
|
+
ns
|
|
103
107
|
.show('Loading component ...')
|
|
104
108
|
.inside(document.getElementById('my-element'))
|
|
105
|
-
|
|
106
|
-
// Use functions returning HTMLElement objects
|
|
107
|
-
loading
|
|
108
|
-
.show('Loading component ...')
|
|
109
|
-
.inside(() =>
|
|
110
|
-
Array.from(document.querySelectorAll()).filter((element.id = 'my-element'))[0]
|
|
111
|
-
)
|
|
112
109
|
```
|
|
113
110
|
|
|
114
111
|
### Combine Nanosplash with async tasks
|
|
@@ -117,8 +114,13 @@ loading
|
|
|
117
114
|
const task1 = new Promise(r => setTimeout(() => r(), 3000))
|
|
118
115
|
const task2 = async () => await getDataFromApi()
|
|
119
116
|
|
|
120
|
-
|
|
121
|
-
|
|
117
|
+
ns.while(task1).show('Loading resources ...')
|
|
118
|
+
ns.while(task2).show('Fetching table data ...').inside('#my-table')
|
|
119
|
+
|
|
120
|
+
ns.progress(
|
|
121
|
+
[task1, 'Loading data from API ...'],
|
|
122
|
+
[task2, 'Processing data ...']
|
|
123
|
+
).inside('#my-table')
|
|
122
124
|
```
|
|
123
125
|
|
|
124
126
|
<hr>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var t=Object.defineProperty,e=Object.defineProperties,i=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,o=(e,i,s)=>i in e?t(e,i,{t:!0,i:!0,writable:!0,value:s}):e[i]=s,h=document.createElement("style");h.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(h),function(){const t=t=>document.createElement(t);function h(t,...e){t.classList.add(...e)}function a(t,e,i){t.setAttribute(e,i)}class c{static o(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 h(t){const h={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)&&o(t,i,e[i]);if(s)for(var i of s(e))r.call(e,i)&&o(t,i,e[i]);return t})({},h),e(a,i({inside:e=>(t.moveTo(e),h)}));var a}}class u{constructor(e,i,s){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=e,this.v.innerText=i,this.I=s,this.p.src=null!=(n=this.I)?n:"",this.p.alt=m.O,this.j(),this.setImgSrc(s)}F(){h(this.g,"ns-container"),h(this.l,"ns-blur"),h(this.p,"ns-img"),h(this.v,"ns-text"),h(this.m,"ns","ns-window"),h(this.u,"ns-wrapper")}T(){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(),a(this.u,"data-ctx","nanosplash"),this.T(),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.T(),this}k(){const t=this.u.parentElement;t&&this.N(t)}C(){a(this.u,"style",""),this.u.classList.remove("ns-fs")}A(t){const e=t.parentNode;e&&(this.N(e),e.replaceChild(this.u,t),this.l.appendChild(t))}M(){this.u.classList.add("ns-fs"),((t,e,i=!1)=>{t&&e&&(e.hasChildNodes()&&i?e.insertBefore(t,e.firstChild):e.appendChild(t))})(this.u,document.body,!0)}moveTo(t){this.k();const e=c.o(t);e===document.body?this.M():(this.C(),this.A(e)),this.j()}W(t){Array.from(this.l.childNodes).forEach(t)}N(t){this.W((e=>t.insertBefore(e,this.u)))}D(){[this.v,this.p,this.g,this.l,this.m,this.u].forEach((t=>t.remove()))}delete(){this.k(),this.D(),this.S.delete(this)}}class l{static $(t,e,i,s){var n;return t||(t=new u(e,i,s)),t.setText(i).setImgSrc(null!=(n=t.getImgSrc())?n:s)}static P(t,e){return i=>(e=l.$(e,t,"",i),{show:l.R(t,e),progress:l.U(t,e),while:l.q(t,e)})}static R(t,e){return i=>(e=l.$(e,t,i),t.B.set(e.getId(),e),e.moveTo(document.body),c.h(e))}static U(t,e){return(...i)=>((e=l.$(e,t,"")).moveTo(document.body),(async()=>{for(const[t,[s,n]]of i.entries())e.setText(n),await s;e.delete()})(),c.h(e))}static q(t,e){return i=>(e=l.$(e,t,""),{show:s=>(t.B.set(e.getId(),e),e.moveTo(document.body),e.setText(s),i.finally((()=>e.delete())),c.h(e))})}}class m{constructor(){this.B=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.U(this,new u(this,""))(...t)}while(t){return l.q(this,new u(this,""))(t)}G(t){let e=0;const i=this.B.entries();for(const[s,n]of i)if(!t(s,n,e++))break}delete(t){this.B.delete(t.getId())}hideAll(){this.B.forEach((t=>t.delete()))}hide(t){if(t){const e=this.B.get(t);if(!e)throw new Error(`Could not find element with id: ${t}`);e.delete()}else this.G(((t,e,i)=>{const s=0===i;return s&&e.delete(),s}))}}m.O="Nanosplash",window.addEventListener("load",(()=>window.ns=new m))}();
|
|
@@ -0,0 +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:"..."}}
|
|
@@ -1 +1 @@
|
|
|
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 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;
|