nanosplash 2.5.2 → 3.0.0
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/ci.yml +48 -0
- package/.prettierrc +10 -9
- package/README.md +22 -89
- package/dist/main.css +1 -0
- package/dist/ns.cjs.js +1 -0
- package/dist/ns.es.js +330 -0
- package/dist/ns.iife.js +2 -0
- package/index.html +41 -122
- package/package.json +27 -34
- package/src/main.ts +8 -5
- package/src/sass/ns.sass +86 -0
- package/src/ts/core/Nanosplash/Nanosplash.ts +97 -0
- package/src/ts/core/Nanosplash/interfaces/NanosplashAPI.ts +50 -0
- package/src/ts/core/Nanosplash/interfaces/NanosplashInterface.ts +42 -0
- package/src/ts/core/Nanosplash/repositories/NanosplashRepository.ts +178 -0
- package/src/ts/core/Nanosplash/services/NanosplashService.ts +222 -0
- package/src/ts/types/Alias.d.ts +1 -0
- package/src/ts/types/Nanosplash.d.ts +18 -0
- package/src/ts/types/NanosplashService.d.ts +1 -0
- package/src/ts/util/Guid.ts +13 -0
- package/src/ts/util/Stack.ts +73 -0
- package/src/vite-env.d.ts +8 -0
- package/tests/Guid.spec.ts +21 -0
- package/tests/Nanosplash.spec.ts +64 -0
- package/tests/NanosplashRepository.spec.ts +91 -0
- package/tests/NanosplashService.spec.ts +119 -0
- package/tests/Stack.spec.ts +56 -0
- package/tsconfig.json +9 -5
- package/vite.config.ts +22 -14
- package/.github/workflows/production.yml +0 -60
- package/.github/workflows/release.yml +0 -61
- package/LICENSE +0 -21
- package/_config.yml +0 -1
- package/dist/iife/manifest.json +0 -7
- package/dist/iife/nanosplash.iife.js +0 -1
- package/dist/module/manifest.json +0 -7
- package/dist/module/nanosplash.cjs.js +0 -1
- package/dist/module/nanosplash.es.js +0 -371
- package/dist/module/style.css +0 -1
- package/docs/index.html +0 -131
- package/docs/nanosplash.iife.js +0 -6
- package/docs/style.css +0 -1
- package/docs/typedoc/.nojekyll +0 -1
- package/docs/typedoc/assets/highlight.css +0 -22
- package/docs/typedoc/assets/icons.css +0 -1043
- package/docs/typedoc/assets/icons.png +0 -0
- package/docs/typedoc/assets/icons@2x.png +0 -0
- package/docs/typedoc/assets/main.js +0 -52
- package/docs/typedoc/assets/search.js +0 -1
- package/docs/typedoc/assets/style.css +0 -1414
- package/docs/typedoc/assets/widgets.png +0 -0
- package/docs/typedoc/assets/widgets@2x.png +0 -0
- package/docs/typedoc/classes/Core_Nanosplash.default.html +0 -133
- package/docs/typedoc/index.html +0 -1
- package/docs/typedoc/modules/Core_Nanosplash.html +0 -1
- package/docs/typedoc/modules/types.html +0 -1
- package/favicon.svg +0 -15
- package/postcss.config.js +0 -8
- package/src/Core/Nanosplash.ts +0 -257
- package/src/Core/SplashInstance.ts +0 -298
- package/src/Exceptions/DestinationException.ts +0 -13
- package/src/Exceptions/Exception.ts +0 -9
- package/src/Exceptions/IllegalArgumentException.ts +0 -11
- package/src/Factory/NanosplashFactory.ts +0 -93
- package/src/Interfaces/ContextualAPIInterface.ts +0 -8
- package/src/Interfaces/IdentityInterface.ts +0 -3
- package/src/Interfaces/InsideInterface.ts +0 -5
- package/src/Interfaces/NanosplashInterface.ts +0 -8
- package/src/Interfaces/ProgressInterface.ts +0 -5
- package/src/Interfaces/ShowInterface.ts +0 -5
- package/src/Interfaces/WhileInterface.ts +0 -5
- package/src/Repositories/NanosplashRepository.ts +0 -82
- package/src/Tests/dom.spec.ts +0 -72
- package/src/Utilities/dom.ts +0 -49
- package/src/style.sass +0 -88
- package/src/types.d.ts +0 -59
- package/update-all.sh +0 -3
- package/vite.iife.config.js +0 -72
- package/vite.mod.config.js +0 -71
- package/vite.site.config.js +0 -22
package/index.html
CHANGED
|
@@ -2,132 +2,51 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
|
6
|
-
<script src="https://cdn.tailwindcss.com"></script>
|
|
7
|
-
<link href="https://cdn.lineicons.com/3.0/lineicons.css" rel="stylesheet" />
|
|
8
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
-
<title>Nanosplash</title>
|
|
10
|
-
<
|
|
11
|
-
<meta name="keywords" content="splash, screen, loading" />
|
|
12
|
-
<meta name="author" content="Isak Hauge" />
|
|
6
|
+
<title>Nanosplash 3</title>
|
|
7
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
13
8
|
</head>
|
|
14
|
-
<body
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
Display demo
|
|
25
|
-
</div>
|
|
26
|
-
<a
|
|
27
|
-
href="#example"
|
|
28
|
-
class="bg-slate-500 text-slate-200 p-3 cursor-pointer hover:text-white rounded-xl shadow-xl mt-8"
|
|
29
|
-
>
|
|
30
|
-
Show examples
|
|
31
|
-
</a>
|
|
32
|
-
</div>
|
|
33
|
-
<div class="flex flex-col space-y-2 my-10">
|
|
34
|
-
<div class="flex space-x-2 justify-center">
|
|
35
|
-
<img src="https://badgen.net/npm/v/nanosplash" />
|
|
36
|
-
<img src="https://badgen.net/npm/types/nanosplash" />
|
|
37
|
-
<img src="https://badgen.net/npm/dw/nanosplash" />
|
|
38
|
-
</div>
|
|
39
|
-
<div class="flex space-x-2 justify-center">
|
|
40
|
-
<img src="https://badgen.net/bundlephobia/min/nanosplash" />
|
|
41
|
-
<img
|
|
42
|
-
src="https://badgen.net/bundlephobia/tree-shaking/nanosplash"
|
|
43
|
-
/>
|
|
44
|
-
</div>
|
|
45
|
-
</div>
|
|
46
|
-
<div class="flex rounded-xl text-slate-400 shadow-xl overflow-hidden">
|
|
47
|
-
<div data-copy class="p-3 bg-slate-800 text-slate-400 font-mono">
|
|
48
|
-
<script src="https://unpkg.com/nanosplash/dist/iife/nanosplash.iife.js">
|
|
49
|
-
</div>
|
|
50
|
-
<div id="copy" class="bg-pink-500 text-pink-200 p-3 cursor-pointer hover:text-white">Copy</div>
|
|
51
|
-
</div>
|
|
52
|
-
<div class="mt-10 flex justify-content items-center divide-x-2 text-slate-400">
|
|
53
|
-
<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>
|
|
54
|
-
<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>
|
|
55
|
-
</div>
|
|
56
|
-
<a class="mt-10 text-pink-300 hover:text-pink-500" href="https://rawcdn.githack.com/isakhauge/nanosplash/0a6cdef58b0e47c0cad911952b1a329df58d2c24/docs/typedoc/index.html">API Reference Documentation</a>
|
|
9
|
+
<body>
|
|
10
|
+
<div
|
|
11
|
+
id="main"
|
|
12
|
+
class="bg-slate-50 h-screen flex flex-col justify-center items-center">
|
|
13
|
+
<div class="text-slate-700 text-5xl">Nanosplash</div>
|
|
14
|
+
<div class="text-slate-400 text-xl mt-5">Demo of v3.0.0</div>
|
|
15
|
+
<div class="mt-20 mb-10 text-lg font-mono text-slate-500">ns.showInside(<span class="text-slate-700 font-bold">selectorOrElement</span>, <span class="text-slate-700 font-bold">text</span>)</div>
|
|
16
|
+
<div class="flex gap-x-3">
|
|
17
|
+
<input id="code" type="text" class="appearance-none w-[500px] box-content flex p-4 bg-slate-700 font-mono text-white rounded shadow-xl" placeholder="Write JS code here">
|
|
18
|
+
<button id="run" type="button" class="p-4 bg-slate-500 text-white rounded shadow-xl">Run code</button>
|
|
57
19
|
</div>
|
|
58
|
-
<div
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<div class="
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<div class="
|
|
78
|
-
|
|
79
|
-
</div>
|
|
80
|
-
</div>
|
|
81
|
-
<div id="d" class="p-20 bg-slate-100 flex flex-col items-center">
|
|
82
|
-
<div class="text-xl mb-10">Display multiple, independent instances</div>
|
|
83
|
-
<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
|
|
84
|
-
ns.show('Loading component A').inside('#a')<br>
|
|
85
|
-
ns.show('Loading component B').inside('#b')<br>
|
|
86
|
-
ns.show('Loading component C').inside('#c')
|
|
87
|
-
</div>
|
|
88
|
-
</div>
|
|
89
|
-
<div id="e" class="p-20 bg-slate-100 flex flex-col items-center">
|
|
90
|
-
<div class="text-xl mb-10">Move splash instance to another destination</div>
|
|
91
|
-
<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
|
|
92
|
-
const splash = ns.show('Loading').inside('#a')<br>
|
|
93
|
-
splash.moveTo('#b')
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
96
|
-
<div id="f" class="p-20 bg-slate-100 flex flex-col items-center">
|
|
97
|
-
<div class="text-xl mb-10">Hide splash instances</div>
|
|
98
|
-
<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
|
|
99
|
-
// Hides one instance at a time, in a LIFO-fashion.<br>
|
|
100
|
-
ns.hide()<br><br>
|
|
101
|
-
// Hides all instances.<br>
|
|
102
|
-
ns.hideAll()
|
|
103
|
-
</div>
|
|
20
|
+
<div
|
|
21
|
+
id="wrapper"
|
|
22
|
+
class="relative mt-20 flex gap-x-5 justify-center items-center bg-slate-200 p-20 border border-4 border-black/10 rounded shadow-xl">
|
|
23
|
+
<div class="absolute top-2 left-2 font-mono text-slate-500 px-1 bg-white rounded">Element ID: #wrapper</div>
|
|
24
|
+
<div
|
|
25
|
+
id="a"
|
|
26
|
+
class="relative bg-slate-400 p-20 border border-4 border-black/10 rounded shadow-2xl">
|
|
27
|
+
<div class="absolute top-2 left-2 font-mono text-slate-500 px-1 bg-white rounded">Element ID: #a</div>
|
|
28
|
+
<div class="text-white text-2xl font-medium">This is element A</div>
|
|
29
|
+
</div>
|
|
30
|
+
<div
|
|
31
|
+
id="b"
|
|
32
|
+
class="relative bg-slate-400 p-20 border border-4 border-black/10 rounded shadow-2xl">
|
|
33
|
+
<div class="absolute top-2 left-2 font-mono text-slate-500 px-1 bg-white rounded">Element ID: #b</div>
|
|
34
|
+
<div class="text-white text-2xl font-medium">This is element B</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div
|
|
37
|
+
id="c"
|
|
38
|
+
class="relative bg-slate-400 p-20 border border-4 border-black/10 rounded shadow-2xl">
|
|
39
|
+
<div class="absolute top-2 left-2 font-mono text-slate-500 px-1 bg-white rounded">Element ID: #c</div>
|
|
40
|
+
<div class="text-white text-2xl font-medium">This is element C</div>
|
|
104
41
|
</div>
|
|
105
42
|
</div>
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
[wait(4000), 'Restructuring'],
|
|
115
|
-
[wait(6000), 'Indexing'],
|
|
116
|
-
[wait(8000), 'Give this repo a star']
|
|
117
|
-
)
|
|
118
|
-
}
|
|
119
|
-
document.getElementById('copy').onclick = function () {
|
|
120
|
-
const text = document.querySelector('[data-copy]').innerText
|
|
121
|
-
navigator.clipboard.writeText(text)
|
|
122
|
-
alert('Copied to clipboard!')
|
|
123
|
-
}
|
|
124
|
-
})
|
|
125
|
-
</script>
|
|
126
|
-
</footer>
|
|
127
|
-
<style>
|
|
128
|
-
body {
|
|
129
|
-
min-height: 100vh;
|
|
130
|
-
}
|
|
131
|
-
</style>
|
|
43
|
+
</div>
|
|
44
|
+
<script type="module" src="/src/main.ts"></script>
|
|
45
|
+
<script>
|
|
46
|
+
const ref = id => document.getElementById(id)
|
|
47
|
+
const code = ref('code')
|
|
48
|
+
const run = ref('run')
|
|
49
|
+
run.onclick = () => eval(code.value)
|
|
50
|
+
</script>
|
|
132
51
|
</body>
|
|
133
52
|
</html>
|
package/package.json
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nanosplash",
|
|
3
|
-
"description": "The
|
|
4
|
-
"
|
|
3
|
+
"description": "The tiny loading screen for web artisans",
|
|
4
|
+
"private": false,
|
|
5
|
+
"version": "3.0.0",
|
|
6
|
+
"type": "module",
|
|
5
7
|
"author": {
|
|
6
8
|
"name": "Isak K. Hauge",
|
|
7
|
-
"email": "isakhauge@
|
|
9
|
+
"email": "isakhauge@icloud.com",
|
|
8
10
|
"url": "https://no.linkedin.com/in/isakhauge"
|
|
9
11
|
},
|
|
10
12
|
"keywords": [
|
|
@@ -30,45 +32,36 @@
|
|
|
30
32
|
"url": "https://github.com/isakhauge/nanosplash.git"
|
|
31
33
|
},
|
|
32
34
|
"license": "MIT",
|
|
33
|
-
"main": "./dist/
|
|
34
|
-
"module": "./dist/
|
|
35
|
+
"main": "./dist/ns.js",
|
|
36
|
+
"module": "./dist/ns.es.js",
|
|
35
37
|
"source": "./src/Nanosplash.ts",
|
|
36
|
-
"unpkg": "./dist/
|
|
37
|
-
"style": "./dist/
|
|
38
|
+
"unpkg": "./dist/ns.iife.js",
|
|
39
|
+
"style": "./dist/main.css",
|
|
38
40
|
"exports": {
|
|
39
41
|
".": {
|
|
40
|
-
"import": "./dist/
|
|
41
|
-
"require": "./dist/
|
|
42
|
-
"default": "./dist/
|
|
42
|
+
"import": "./dist/ns.es.js",
|
|
43
|
+
"require": "./dist/ns.cjs.js",
|
|
44
|
+
"default": "./dist/ns.es.js"
|
|
43
45
|
}
|
|
44
46
|
},
|
|
45
|
-
"types": "./src/types
|
|
47
|
+
"types": "./src/ts/types",
|
|
46
48
|
"scripts": {
|
|
47
|
-
"dev": "vite
|
|
48
|
-
"build
|
|
49
|
-
"
|
|
50
|
-
"build.site": "vite build -c vite.site.config.js",
|
|
51
|
-
"build": "tsc && yarn build.iife && yarn build.mod && yarn build.site && yarn doc",
|
|
52
|
-
"doc": "typedoc --readme none --excludePrivate --excludeInternal --out docs/typedoc --entryPoints src/Core/Nanosplash.ts src/types.d.ts",
|
|
53
|
-
"doc.watch": "yarn doc --watch",
|
|
54
|
-
"serve": "vite preview",
|
|
49
|
+
"dev": "vite",
|
|
50
|
+
"build": "tsc && vite build",
|
|
51
|
+
"preview": "vite preview",
|
|
55
52
|
"test": "vitest",
|
|
53
|
+
"test:ui": "vitest --ui",
|
|
56
54
|
"coverage": "vitest run --coverage"
|
|
57
55
|
},
|
|
58
56
|
"devDependencies": {
|
|
59
|
-
"@types/
|
|
60
|
-
"@
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"ts-node": "^10.8.1",
|
|
69
|
-
"typedoc": "^0.22.17",
|
|
70
|
-
"typescript": "^4.7.4",
|
|
71
|
-
"vite": "^2.9.12",
|
|
72
|
-
"vitest": "^0.15.1"
|
|
57
|
+
"@types/jsdom": "^21.1.1",
|
|
58
|
+
"@vitest/coverage-c8": "^0.31.4",
|
|
59
|
+
"@vitest/ui": "^0.31.4",
|
|
60
|
+
"jsdom": "^22.1.0",
|
|
61
|
+
"sass": "^1.62.1",
|
|
62
|
+
"terser": "^5.17.7",
|
|
63
|
+
"typescript": "^5.0.4",
|
|
64
|
+
"vite": "^4.3.9",
|
|
65
|
+
"vitest": "^0.31.4"
|
|
73
66
|
}
|
|
74
|
-
}
|
|
67
|
+
}
|
package/src/main.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
// @ts-strict
|
|
2
|
+
|
|
3
|
+
import NanosplashService from './ts/core/Nanosplash/services/NanosplashService'
|
|
4
|
+
try {
|
|
5
|
+
NanosplashService.start()
|
|
6
|
+
} catch (e) {
|
|
7
|
+
console.warn(e)
|
|
8
|
+
}
|
package/src/sass/ns.sass
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
%maximize
|
|
2
|
+
width: 100%
|
|
3
|
+
height: 100%
|
|
4
|
+
|
|
5
|
+
%upper-left
|
|
6
|
+
top: 0
|
|
7
|
+
left: 0
|
|
8
|
+
|
|
9
|
+
%flex-center-xy
|
|
10
|
+
display: flex
|
|
11
|
+
justify-content: center
|
|
12
|
+
align-items: center
|
|
13
|
+
|
|
14
|
+
.ns-host
|
|
15
|
+
--text-color: DarkSlateGray
|
|
16
|
+
--font-size: 20px
|
|
17
|
+
--proportional-size: calc(var(--font-size) * 0.9)
|
|
18
|
+
--font-family: 'Helvetica', 'Arial', sans-serif
|
|
19
|
+
--font-weight: 400
|
|
20
|
+
--background: rgba(255, 255, 255, 0.8)
|
|
21
|
+
--z-index: 999999999
|
|
22
|
+
--blur-filter: blur(10px)
|
|
23
|
+
|
|
24
|
+
.ns-host
|
|
25
|
+
position: relative
|
|
26
|
+
z-index: var(--z-index)
|
|
27
|
+
&::before
|
|
28
|
+
@extend %maximize
|
|
29
|
+
@extend %upper-left
|
|
30
|
+
position: absolute
|
|
31
|
+
background-color: var(--background)
|
|
32
|
+
content: ''
|
|
33
|
+
backdrop-filter: var(--blur-filter)
|
|
34
|
+
-webkit-backdrop-filter: var(--blur-filter)
|
|
35
|
+
z-index: calc(var(--z-index) + 1)
|
|
36
|
+
|
|
37
|
+
body.ns-host
|
|
38
|
+
height: 100vh
|
|
39
|
+
|
|
40
|
+
.ns
|
|
41
|
+
@extend %maximize
|
|
42
|
+
@extend %upper-left
|
|
43
|
+
@extend %flex-center-xy
|
|
44
|
+
position: absolute
|
|
45
|
+
z-index: calc(var(--z-index) + 2)
|
|
46
|
+
|
|
47
|
+
.ns-content
|
|
48
|
+
@extend %flex-center-xy
|
|
49
|
+
|
|
50
|
+
.ns-text
|
|
51
|
+
color: var(--text-color)
|
|
52
|
+
font-size: var(--font-size)
|
|
53
|
+
font-family: var(--font-family)
|
|
54
|
+
font-weight: var(--font-weight)
|
|
55
|
+
margin-right: var(--proportional-size)
|
|
56
|
+
|
|
57
|
+
// Spinner node
|
|
58
|
+
.ns-spinner
|
|
59
|
+
display: block
|
|
60
|
+
width: var(--proportional-size)
|
|
61
|
+
height: var(--proportional-size)
|
|
62
|
+
& > svg
|
|
63
|
+
animation: Rotate 2s linear infinite
|
|
64
|
+
position: relative
|
|
65
|
+
width: inherit
|
|
66
|
+
height: inherit
|
|
67
|
+
stroke-width: 8
|
|
68
|
+
& .path
|
|
69
|
+
stroke: var(--text-color)
|
|
70
|
+
stroke-linecap: round
|
|
71
|
+
animation: Dash 1.5s ease-in-out infinite
|
|
72
|
+
|
|
73
|
+
// Spinner animations:
|
|
74
|
+
@keyframes Rotate
|
|
75
|
+
100%
|
|
76
|
+
transform: rotate(360deg)
|
|
77
|
+
@keyframes Dash
|
|
78
|
+
0%
|
|
79
|
+
stroke-dasharray: 1, 150
|
|
80
|
+
stroke-dashoffset: 0
|
|
81
|
+
50%
|
|
82
|
+
stroke-dasharray: 90, 150
|
|
83
|
+
stroke-dashoffset: -35
|
|
84
|
+
100%
|
|
85
|
+
stroke-dasharray: 90, 150
|
|
86
|
+
stroke-dashoffset: -124
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
// @ts-strict
|
|
2
|
+
|
|
3
|
+
import '../../../sass/ns.sass'
|
|
4
|
+
|
|
5
|
+
import {
|
|
6
|
+
createElement,
|
|
7
|
+
hideElement,
|
|
8
|
+
showElement,
|
|
9
|
+
} from './repositories/NanosplashRepository'
|
|
10
|
+
import type { NanosplashInterface } from './interfaces/NanosplashInterface'
|
|
11
|
+
import type { GUIDString } from '../../types/Alias'
|
|
12
|
+
import { guid } from '../../util/Guid'
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* # Nanosplash
|
|
16
|
+
* Nanosplash is a small splash screen that can be used to indicate that a
|
|
17
|
+
* process is running.
|
|
18
|
+
* @author Isak K. Hauge <isakhauge@icloud.com>
|
|
19
|
+
*/
|
|
20
|
+
class Nanosplash implements NanosplashInterface {
|
|
21
|
+
public static readonly nsClassName = 'ns'
|
|
22
|
+
public static readonly nsHostClassName = Nanosplash.nsClassName + '-host'
|
|
23
|
+
|
|
24
|
+
private readonly id: GUIDString
|
|
25
|
+
private element?: HTMLDivElement
|
|
26
|
+
|
|
27
|
+
public constructor() {
|
|
28
|
+
this.element = createElement()
|
|
29
|
+
this.element.id = this.id = guid()
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* @inheritDoc
|
|
34
|
+
*/
|
|
35
|
+
public getId(): GUIDString {
|
|
36
|
+
return this.id
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* @inheritDoc
|
|
41
|
+
*/
|
|
42
|
+
public getNSElement(): HTMLDivElement {
|
|
43
|
+
return <HTMLDivElement>this.element
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* # Get NS Content Element
|
|
48
|
+
* Returns the content element of the Nanosplash.
|
|
49
|
+
*/
|
|
50
|
+
public getNSContentElement(): HTMLDivElement {
|
|
51
|
+
return <HTMLDivElement>this.getNSElement().firstElementChild
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* # Get NS Text Element
|
|
56
|
+
* Returns the text element of the Nanosplash.
|
|
57
|
+
*/
|
|
58
|
+
public getNSTextElement(): HTMLDivElement {
|
|
59
|
+
return <HTMLDivElement>this.getNSContentElement().firstElementChild
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* @inheritDoc
|
|
64
|
+
*/
|
|
65
|
+
public hideText(): Nanosplash {
|
|
66
|
+
hideElement(this.getNSTextElement())
|
|
67
|
+
return this
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* @inheritDoc
|
|
72
|
+
*/
|
|
73
|
+
public setText(text: string): Nanosplash {
|
|
74
|
+
this.getNSTextElement().innerText = text
|
|
75
|
+
text.length > 0 ? this.showText() : this.hideText()
|
|
76
|
+
return this
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* @inheritDoc
|
|
81
|
+
*/
|
|
82
|
+
public showText(): Nanosplash {
|
|
83
|
+
showElement(this.getNSTextElement())
|
|
84
|
+
return this
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* @inheritDoc
|
|
89
|
+
*/
|
|
90
|
+
public remove(): void {
|
|
91
|
+
if (!this.element) return
|
|
92
|
+
this.element.parentElement?.removeChild(this.element)
|
|
93
|
+
delete this.element
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export default Nanosplash
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { GUIDString } from '../../../types/Alias'
|
|
2
|
+
import { Destination } from '../../../types/Nanosplash'
|
|
3
|
+
|
|
4
|
+
export interface NanosplashAPI {
|
|
5
|
+
/**
|
|
6
|
+
* # Show
|
|
7
|
+
* Present a Nanosplash in the browser window displaying the given text.
|
|
8
|
+
* @param text Text to display.
|
|
9
|
+
* @returns {GUIDString} Nanosplash ID.
|
|
10
|
+
*/
|
|
11
|
+
show(text?: string): GUIDString
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* # Show Inside
|
|
15
|
+
* Present a Nanosplash over the given element displaying the given text.
|
|
16
|
+
* @param destination Target element.
|
|
17
|
+
* @param text Text to display.
|
|
18
|
+
* @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
|
|
19
|
+
*/
|
|
20
|
+
showInside(destination: Destination, text?: string): GUIDString | null
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* # Hide
|
|
24
|
+
* Hide the last created Nanosplash.
|
|
25
|
+
* @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
|
|
26
|
+
*/
|
|
27
|
+
hide(): GUIDString | null
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* # Hide All
|
|
31
|
+
* Hide all Nanosplashes.
|
|
32
|
+
*/
|
|
33
|
+
hideAll(): void
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* # Hide ID
|
|
37
|
+
* Hide Nanosplash by its ID.
|
|
38
|
+
* @param id Nanosplash ID.
|
|
39
|
+
* @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
|
|
40
|
+
*/
|
|
41
|
+
hideId(id: GUIDString): GUIDString | null
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* # Hide Inside
|
|
45
|
+
* Hide Nanosplash inside the given element if it exists.
|
|
46
|
+
* @param destination Target element.
|
|
47
|
+
* @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
|
|
48
|
+
*/
|
|
49
|
+
hideInside(destination: Destination): GUIDString | null
|
|
50
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
// @ts-strict
|
|
2
|
+
|
|
3
|
+
import type { GUIDString } from '../../../types/Alias'
|
|
4
|
+
import type Nanosplash from '../Nanosplash'
|
|
5
|
+
|
|
6
|
+
export interface NanosplashInterface {
|
|
7
|
+
/**
|
|
8
|
+
* # Get ID
|
|
9
|
+
* Return Nanosplash instance GUID.
|
|
10
|
+
*/
|
|
11
|
+
getId(): GUIDString
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* # Get NS Element
|
|
15
|
+
* Return Nanosplash instance HTMLDivElement.
|
|
16
|
+
*/
|
|
17
|
+
getNSElement(): HTMLDivElement
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* # Set Text
|
|
21
|
+
* @param text The text that will be visible inside the splash.
|
|
22
|
+
*/
|
|
23
|
+
setText(text: string): Nanosplash
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* # Show Text
|
|
27
|
+
* Display text element.
|
|
28
|
+
*/
|
|
29
|
+
showText(): Nanosplash
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* # Hide Text
|
|
33
|
+
* Hide the text element.
|
|
34
|
+
*/
|
|
35
|
+
hideText(): Nanosplash
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* # Remove
|
|
39
|
+
* Delete all
|
|
40
|
+
*/
|
|
41
|
+
remove(): void
|
|
42
|
+
}
|