nanosplash 4.0.2 → 4.0.4

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.
Files changed (67) hide show
  1. package/.github/workflows/ci.prod.yml +68 -0
  2. package/.prettierrc +9 -10
  3. package/README.md +118 -51
  4. package/bun.lock +635 -0
  5. package/coverage/lcov-report/base.css +224 -0
  6. package/coverage/lcov-report/block-navigation.js +87 -0
  7. package/coverage/lcov-report/favicon.png +0 -0
  8. package/coverage/lcov-report/index.html +176 -0
  9. package/coverage/lcov-report/prettify.css +1 -0
  10. package/coverage/lcov-report/prettify.js +2 -0
  11. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  12. package/coverage/lcov-report/sorter.js +196 -0
  13. package/coverage/lcov-report/src/composables/index.html +116 -0
  14. package/coverage/lcov-report/src/composables/ns.ts.html +547 -0
  15. package/coverage/lcov-report/src/constants/index.html +116 -0
  16. package/coverage/lcov-report/src/constants/ns.ts.html +124 -0
  17. package/coverage/lcov-report/src/iife.ts.html +100 -0
  18. package/coverage/lcov-report/src/index.html +116 -0
  19. package/coverage/lcov-report/src/interfaces/INSElement.ts.html +100 -0
  20. package/coverage/lcov-report/src/interfaces/INanosplash.ts.html +304 -0
  21. package/coverage/lcov-report/src/interfaces/index.html +131 -0
  22. package/coverage/lcov-report/src/utils/dom-utils.ts.html +289 -0
  23. package/coverage/lcov-report/src/utils/index.html +116 -0
  24. package/coverage/lcov.info +271 -0
  25. package/eslint.config.js +7 -2
  26. package/package.json +74 -88
  27. package/src/composables/ns.ts +154 -0
  28. package/src/constants/ns.ts +13 -0
  29. package/src/iife.ts +5 -0
  30. package/src/interfaces/INSElement.ts +5 -0
  31. package/src/interfaces/INanosplash.ts +73 -0
  32. package/src/style/ns.css +134 -0
  33. package/src/types/dom.d.ts +3 -0
  34. package/src/types/generic/function.d.ts +1 -0
  35. package/src/types/global.d.ts +26 -0
  36. package/src/types/semantic/number.d.ts +1 -0
  37. package/src/types/semantic/string.d.ts +2 -0
  38. package/src/utils/dom-utils.ts +68 -0
  39. package/tests/ns.spec.ts +124 -0
  40. package/tsconfig.json +29 -21
  41. package/vite.config.ts +18 -10
  42. package/vitest.config.ts +20 -0
  43. package/.github/workflows/ci.yml +0 -62
  44. package/.github/workflows/vitepress.yml +0 -68
  45. package/LICENSE +0 -21
  46. package/docs/.vitepress/config.ts +0 -78
  47. package/docs/.vitepress/theme/css/style.css +0 -258
  48. package/docs/.vitepress/theme/index.ts +0 -16
  49. package/docs/.vitepress/theme/vue/Card.vue +0 -31
  50. package/docs/.vitepress/theme/vue/CardGrid.vue +0 -17
  51. package/docs/.vitepress/theme/vue/PlayGround.vue +0 -36
  52. package/docs/api/doc/hide.md +0 -48
  53. package/docs/api/doc/show.md +0 -46
  54. package/docs/api/start/customize.md +0 -30
  55. package/docs/api/start/features.md +0 -17
  56. package/docs/api/start/install.md +0 -61
  57. package/docs/api/start/playground.md +0 -16
  58. package/docs/api/start/usage.md +0 -22
  59. package/docs/index.md +0 -33
  60. package/docs/public/macos.jpg +0 -0
  61. package/src/style/ns.sass +0 -120
  62. package/src/ts/Nanosplash.ts +0 -177
  63. package/src/ts/main.ts +0 -5
  64. package/src/ts/types/NanosplashInterface.ts +0 -26
  65. package/src/ts/types/Types.ts +0 -16
  66. package/src/ts/types/global.d.ts +0 -14
  67. package/tests/Nanosplash.spec.ts +0 -25
package/coverage/lcov-report/src/composables/ns.ts.html ADDED
@@ -0,0 +1,547 @@
1
+
2
+ <!doctype html>
3
+ <html lang="en">
4
+
5
+ <head>
6
+ <title>Code coverage report for src/composables/ns.ts</title>
7
+ <meta charset="utf-8" />
8
+ <link rel="stylesheet" href="../../prettify.css" />
9
+ <link rel="stylesheet" href="../../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
12
+ <style type='text/css'>
13
+ .coverage-summary .sorter {
14
+ background-image: url(../../sort-arrow-sprite.png);
15
+ }
16
+ </style>
17
+ </head>
18
+
19
+ <body>
20
+ <div class='wrapper'>
21
+ <div class='pad1'>
22
+ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/composables</a> ns.ts</h1>
23
+ <div class='clearfix'>
24
+
25
+ <div class='fl pad1y space-right2'>
26
+ <span class="strong">100% </span>
27
+ <span class="quiet">Statements</span>
28
+ <span class='fraction'>82/82</span>
29
+ </div>
30
+
31
+
32
+ <div class='fl pad1y space-right2'>
33
+ <span class="strong">90.9% </span>
34
+ <span class="quiet">Branches</span>
35
+ <span class='fraction'>30/33</span>
36
+ </div>
37
+
38
+
39
+ <div class='fl pad1y space-right2'>
40
+ <span class="strong">100% </span>
41
+ <span class="quiet">Functions</span>
42
+ <span class='fraction'>13/13</span>
43
+ </div>
44
+
45
+
46
+ <div class='fl pad1y space-right2'>
47
+ <span class="strong">100% </span>
48
+ <span class="quiet">Lines</span>
49
+ <span class='fraction'>82/82</span>
50
+ </div>
51
+
52
+
53
+ </div>
54
+ <p class="quiet">
55
+ Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
+ </p>
57
+ <template id="filterTemplate">
58
+ <div class="quiet">
59
+ Filter:
60
+ <input type="search" id="fileSearch">
61
+ </div>
62
+ </template>
63
+ </div>
64
+ <div class='status-line high'></div>
65
+ <pre><table class="coverage">
66
+ <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
+ <a name='L2'></a><a href='#L2'>2</a>
68
+ <a name='L3'></a><a href='#L3'>3</a>
69
+ <a name='L4'></a><a href='#L4'>4</a>
70
+ <a name='L5'></a><a href='#L5'>5</a>
71
+ <a name='L6'></a><a href='#L6'>6</a>
72
+ <a name='L7'></a><a href='#L7'>7</a>
73
+ <a name='L8'></a><a href='#L8'>8</a>
74
+ <a name='L9'></a><a href='#L9'>9</a>
75
+ <a name='L10'></a><a href='#L10'>10</a>
76
+ <a name='L11'></a><a href='#L11'>11</a>
77
+ <a name='L12'></a><a href='#L12'>12</a>
78
+ <a name='L13'></a><a href='#L13'>13</a>
79
+ <a name='L14'></a><a href='#L14'>14</a>
80
+ <a name='L15'></a><a href='#L15'>15</a>
81
+ <a name='L16'></a><a href='#L16'>16</a>
82
+ <a name='L17'></a><a href='#L17'>17</a>
83
+ <a name='L18'></a><a href='#L18'>18</a>
84
+ <a name='L19'></a><a href='#L19'>19</a>
85
+ <a name='L20'></a><a href='#L20'>20</a>
86
+ <a name='L21'></a><a href='#L21'>21</a>
87
+ <a name='L22'></a><a href='#L22'>22</a>
88
+ <a name='L23'></a><a href='#L23'>23</a>
89
+ <a name='L24'></a><a href='#L24'>24</a>
90
+ <a name='L25'></a><a href='#L25'>25</a>
91
+ <a name='L26'></a><a href='#L26'>26</a>
92
+ <a name='L27'></a><a href='#L27'>27</a>
93
+ <a name='L28'></a><a href='#L28'>28</a>
94
+ <a name='L29'></a><a href='#L29'>29</a>
95
+ <a name='L30'></a><a href='#L30'>30</a>
96
+ <a name='L31'></a><a href='#L31'>31</a>
97
+ <a name='L32'></a><a href='#L32'>32</a>
98
+ <a name='L33'></a><a href='#L33'>33</a>
99
+ <a name='L34'></a><a href='#L34'>34</a>
100
+ <a name='L35'></a><a href='#L35'>35</a>
101
+ <a name='L36'></a><a href='#L36'>36</a>
102
+ <a name='L37'></a><a href='#L37'>37</a>
103
+ <a name='L38'></a><a href='#L38'>38</a>
104
+ <a name='L39'></a><a href='#L39'>39</a>
105
+ <a name='L40'></a><a href='#L40'>40</a>
106
+ <a name='L41'></a><a href='#L41'>41</a>
107
+ <a name='L42'></a><a href='#L42'>42</a>
108
+ <a name='L43'></a><a href='#L43'>43</a>
109
+ <a name='L44'></a><a href='#L44'>44</a>
110
+ <a name='L45'></a><a href='#L45'>45</a>
111
+ <a name='L46'></a><a href='#L46'>46</a>
112
+ <a name='L47'></a><a href='#L47'>47</a>
113
+ <a name='L48'></a><a href='#L48'>48</a>
114
+ <a name='L49'></a><a href='#L49'>49</a>
115
+ <a name='L50'></a><a href='#L50'>50</a>
116
+ <a name='L51'></a><a href='#L51'>51</a>
117
+ <a name='L52'></a><a href='#L52'>52</a>
118
+ <a name='L53'></a><a href='#L53'>53</a>
119
+ <a name='L54'></a><a href='#L54'>54</a>
120
+ <a name='L55'></a><a href='#L55'>55</a>
121
+ <a name='L56'></a><a href='#L56'>56</a>
122
+ <a name='L57'></a><a href='#L57'>57</a>
123
+ <a name='L58'></a><a href='#L58'>58</a>
124
+ <a name='L59'></a><a href='#L59'>59</a>
125
+ <a name='L60'></a><a href='#L60'>60</a>
126
+ <a name='L61'></a><a href='#L61'>61</a>
127
+ <a name='L62'></a><a href='#L62'>62</a>
128
+ <a name='L63'></a><a href='#L63'>63</a>
129
+ <a name='L64'></a><a href='#L64'>64</a>
130
+ <a name='L65'></a><a href='#L65'>65</a>
131
+ <a name='L66'></a><a href='#L66'>66</a>
132
+ <a name='L67'></a><a href='#L67'>67</a>
133
+ <a name='L68'></a><a href='#L68'>68</a>
134
+ <a name='L69'></a><a href='#L69'>69</a>
135
+ <a name='L70'></a><a href='#L70'>70</a>
136
+ <a name='L71'></a><a href='#L71'>71</a>
137
+ <a name='L72'></a><a href='#L72'>72</a>
138
+ <a name='L73'></a><a href='#L73'>73</a>
139
+ <a name='L74'></a><a href='#L74'>74</a>
140
+ <a name='L75'></a><a href='#L75'>75</a>
141
+ <a name='L76'></a><a href='#L76'>76</a>
142
+ <a name='L77'></a><a href='#L77'>77</a>
143
+ <a name='L78'></a><a href='#L78'>78</a>
144
+ <a name='L79'></a><a href='#L79'>79</a>
145
+ <a name='L80'></a><a href='#L80'>80</a>
146
+ <a name='L81'></a><a href='#L81'>81</a>
147
+ <a name='L82'></a><a href='#L82'>82</a>
148
+ <a name='L83'></a><a href='#L83'>83</a>
149
+ <a name='L84'></a><a href='#L84'>84</a>
150
+ <a name='L85'></a><a href='#L85'>85</a>
151
+ <a name='L86'></a><a href='#L86'>86</a>
152
+ <a name='L87'></a><a href='#L87'>87</a>
153
+ <a name='L88'></a><a href='#L88'>88</a>
154
+ <a name='L89'></a><a href='#L89'>89</a>
155
+ <a name='L90'></a><a href='#L90'>90</a>
156
+ <a name='L91'></a><a href='#L91'>91</a>
157
+ <a name='L92'></a><a href='#L92'>92</a>
158
+ <a name='L93'></a><a href='#L93'>93</a>
159
+ <a name='L94'></a><a href='#L94'>94</a>
160
+ <a name='L95'></a><a href='#L95'>95</a>
161
+ <a name='L96'></a><a href='#L96'>96</a>
162
+ <a name='L97'></a><a href='#L97'>97</a>
163
+ <a name='L98'></a><a href='#L98'>98</a>
164
+ <a name='L99'></a><a href='#L99'>99</a>
165
+ <a name='L100'></a><a href='#L100'>100</a>
166
+ <a name='L101'></a><a href='#L101'>101</a>
167
+ <a name='L102'></a><a href='#L102'>102</a>
168
+ <a name='L103'></a><a href='#L103'>103</a>
169
+ <a name='L104'></a><a href='#L104'>104</a>
170
+ <a name='L105'></a><a href='#L105'>105</a>
171
+ <a name='L106'></a><a href='#L106'>106</a>
172
+ <a name='L107'></a><a href='#L107'>107</a>
173
+ <a name='L108'></a><a href='#L108'>108</a>
174
+ <a name='L109'></a><a href='#L109'>109</a>
175
+ <a name='L110'></a><a href='#L110'>110</a>
176
+ <a name='L111'></a><a href='#L111'>111</a>
177
+ <a name='L112'></a><a href='#L112'>112</a>
178
+ <a name='L113'></a><a href='#L113'>113</a>
179
+ <a name='L114'></a><a href='#L114'>114</a>
180
+ <a name='L115'></a><a href='#L115'>115</a>
181
+ <a name='L116'></a><a href='#L116'>116</a>
182
+ <a name='L117'></a><a href='#L117'>117</a>
183
+ <a name='L118'></a><a href='#L118'>118</a>
184
+ <a name='L119'></a><a href='#L119'>119</a>
185
+ <a name='L120'></a><a href='#L120'>120</a>
186
+ <a name='L121'></a><a href='#L121'>121</a>
187
+ <a name='L122'></a><a href='#L122'>122</a>
188
+ <a name='L123'></a><a href='#L123'>123</a>
189
+ <a name='L124'></a><a href='#L124'>124</a>
190
+ <a name='L125'></a><a href='#L125'>125</a>
191
+ <a name='L126'></a><a href='#L126'>126</a>
192
+ <a name='L127'></a><a href='#L127'>127</a>
193
+ <a name='L128'></a><a href='#L128'>128</a>
194
+ <a name='L129'></a><a href='#L129'>129</a>
195
+ <a name='L130'></a><a href='#L130'>130</a>
196
+ <a name='L131'></a><a href='#L131'>131</a>
197
+ <a name='L132'></a><a href='#L132'>132</a>
198
+ <a name='L133'></a><a href='#L133'>133</a>
199
+ <a name='L134'></a><a href='#L134'>134</a>
200
+ <a name='L135'></a><a href='#L135'>135</a>
201
+ <a name='L136'></a><a href='#L136'>136</a>
202
+ <a name='L137'></a><a href='#L137'>137</a>
203
+ <a name='L138'></a><a href='#L138'>138</a>
204
+ <a name='L139'></a><a href='#L139'>139</a>
205
+ <a name='L140'></a><a href='#L140'>140</a>
206
+ <a name='L141'></a><a href='#L141'>141</a>
207
+ <a name='L142'></a><a href='#L142'>142</a>
208
+ <a name='L143'></a><a href='#L143'>143</a>
209
+ <a name='L144'></a><a href='#L144'>144</a>
210
+ <a name='L145'></a><a href='#L145'>145</a>
211
+ <a name='L146'></a><a href='#L146'>146</a>
212
+ <a name='L147'></a><a href='#L147'>147</a>
213
+ <a name='L148'></a><a href='#L148'>148</a>
214
+ <a name='L149'></a><a href='#L149'>149</a>
215
+ <a name='L150'></a><a href='#L150'>150</a>
216
+ <a name='L151'></a><a href='#L151'>151</a>
217
+ <a name='L152'></a><a href='#L152'>152</a>
218
+ <a name='L153'></a><a href='#L153'>153</a>
219
+ <a name='L154'></a><a href='#L154'>154</a>
220
+ <a name='L155'></a><a href='#L155'>155</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
221
+ <span class="cline-any cline-neutral">&nbsp;</span>
222
+ <span class="cline-any cline-neutral">&nbsp;</span>
223
+ <span class="cline-any cline-neutral">&nbsp;</span>
224
+ <span class="cline-any cline-yes">1x</span>
225
+ <span class="cline-any cline-neutral">&nbsp;</span>
226
+ <span class="cline-any cline-neutral">&nbsp;</span>
227
+ <span class="cline-any cline-neutral">&nbsp;</span>
228
+ <span class="cline-any cline-neutral">&nbsp;</span>
229
+ <span class="cline-any cline-neutral">&nbsp;</span>
230
+ <span class="cline-any cline-neutral">&nbsp;</span>
231
+ <span class="cline-any cline-neutral">&nbsp;</span>
232
+ <span class="cline-any cline-neutral">&nbsp;</span>
233
+ <span class="cline-any cline-neutral">&nbsp;</span>
234
+ <span class="cline-any cline-yes">1x</span>
235
+ <span class="cline-any cline-neutral">&nbsp;</span>
236
+ <span class="cline-any cline-neutral">&nbsp;</span>
237
+ <span class="cline-any cline-neutral">&nbsp;</span>
238
+ <span class="cline-any cline-yes">1x</span>
239
+ <span class="cline-any cline-neutral">&nbsp;</span>
240
+ <span class="cline-any cline-yes">1x</span>
241
+ <span class="cline-any cline-neutral">&nbsp;</span>
242
+ <span class="cline-any cline-neutral">&nbsp;</span>
243
+ <span class="cline-any cline-neutral">&nbsp;</span>
244
+ <span class="cline-any cline-yes">11x</span>
245
+ <span class="cline-any cline-yes">3x</span>
246
+ <span class="cline-any cline-neutral">&nbsp;</span>
247
+ <span class="cline-any cline-neutral">&nbsp;</span>
248
+ <span class="cline-any cline-neutral">&nbsp;</span>
249
+ <span class="cline-any cline-neutral">&nbsp;</span>
250
+ <span class="cline-any cline-yes">11x</span>
251
+ <span class="cline-any cline-yes">9x</span>
252
+ <span class="cline-any cline-yes">9x</span>
253
+ <span class="cline-any cline-yes">9x</span>
254
+ <span class="cline-any cline-yes">9x</span>
255
+ <span class="cline-any cline-yes">9x</span>
256
+ <span class="cline-any cline-yes">9x</span>
257
+ <span class="cline-any cline-yes">9x</span>
258
+ <span class="cline-any cline-yes">9x</span>
259
+ <span class="cline-any cline-yes">9x</span>
260
+ <span class="cline-any cline-yes">9x</span>
261
+ <span class="cline-any cline-yes">9x</span>
262
+ <span class="cline-any cline-neutral">&nbsp;</span>
263
+ <span class="cline-any cline-neutral">&nbsp;</span>
264
+ <span class="cline-any cline-neutral">&nbsp;</span>
265
+ <span class="cline-any cline-neutral">&nbsp;</span>
266
+ <span class="cline-any cline-yes">11x</span>
267
+ <span class="cline-any cline-yes">1x</span>
268
+ <span class="cline-any cline-neutral">&nbsp;</span>
269
+ <span class="cline-any cline-neutral">&nbsp;</span>
270
+ <span class="cline-any cline-neutral">&nbsp;</span>
271
+ <span class="cline-any cline-neutral">&nbsp;</span>
272
+ <span class="cline-any cline-yes">11x</span>
273
+ <span class="cline-any cline-neutral">&nbsp;</span>
274
+ <span class="cline-any cline-neutral">&nbsp;</span>
275
+ <span class="cline-any cline-neutral">&nbsp;</span>
276
+ <span class="cline-any cline-neutral">&nbsp;</span>
277
+ <span class="cline-any cline-neutral">&nbsp;</span>
278
+ <span class="cline-any cline-neutral">&nbsp;</span>
279
+ <span class="cline-any cline-yes">11x</span>
280
+ <span class="cline-any cline-yes">11x</span>
281
+ <span class="cline-any cline-yes">11x</span>
282
+ <span class="cline-any cline-yes">10x</span>
283
+ <span class="cline-any cline-yes">10x</span>
284
+ <span class="cline-any cline-yes">11x</span>
285
+ <span class="cline-any cline-neutral">&nbsp;</span>
286
+ <span class="cline-any cline-neutral">&nbsp;</span>
287
+ <span class="cline-any cline-neutral">&nbsp;</span>
288
+ <span class="cline-any cline-neutral">&nbsp;</span>
289
+ <span class="cline-any cline-neutral">&nbsp;</span>
290
+ <span class="cline-any cline-neutral">&nbsp;</span>
291
+ <span class="cline-any cline-yes">11x</span>
292
+ <span class="cline-any cline-yes">9x</span>
293
+ <span class="cline-any cline-yes">9x</span>
294
+ <span class="cline-any cline-yes">9x</span>
295
+ <span class="cline-any cline-yes">9x</span>
296
+ <span class="cline-any cline-yes">9x</span>
297
+ <span class="cline-any cline-neutral">&nbsp;</span>
298
+ <span class="cline-any cline-yes">11x</span>
299
+ <span class="cline-any cline-yes">11x</span>
300
+ <span class="cline-any cline-yes">11x</span>
301
+ <span class="cline-any cline-yes">8x</span>
302
+ <span class="cline-any cline-yes">11x</span>
303
+ <span class="cline-any cline-yes">11x</span>
304
+ <span class="cline-any cline-neutral">&nbsp;</span>
305
+ <span class="cline-any cline-neutral">&nbsp;</span>
306
+ <span class="cline-any cline-neutral">&nbsp;</span>
307
+ <span class="cline-any cline-neutral">&nbsp;</span>
308
+ <span class="cline-any cline-neutral">&nbsp;</span>
309
+ <span class="cline-any cline-neutral">&nbsp;</span>
310
+ <span class="cline-any cline-yes">11x</span>
311
+ <span class="cline-any cline-yes">11x</span>
312
+ <span class="cline-any cline-yes">11x</span>
313
+ <span class="cline-any cline-yes">11x</span>
314
+ <span class="cline-any cline-yes">11x</span>
315
+ <span class="cline-any cline-yes">2x</span>
316
+ <span class="cline-any cline-yes">11x</span>
317
+ <span class="cline-any cline-yes">9x</span>
318
+ <span class="cline-any cline-yes">9x</span>
319
+ <span class="cline-any cline-yes">9x</span>
320
+ <span class="cline-any cline-yes">11x</span>
321
+ <span class="cline-any cline-yes">11x</span>
322
+ <span class="cline-any cline-yes">6x</span>
323
+ <span class="cline-any cline-yes">6x</span>
324
+ <span class="cline-any cline-yes">6x</span>
325
+ <span class="cline-any cline-yes">11x</span>
326
+ <span class="cline-any cline-yes">11x</span>
327
+ <span class="cline-any cline-neutral">&nbsp;</span>
328
+ <span class="cline-any cline-neutral">&nbsp;</span>
329
+ <span class="cline-any cline-neutral">&nbsp;</span>
330
+ <span class="cline-any cline-neutral">&nbsp;</span>
331
+ <span class="cline-any cline-neutral">&nbsp;</span>
332
+ <span class="cline-any cline-yes">11x</span>
333
+ <span class="cline-any cline-yes">3x</span>
334
+ <span class="cline-any cline-yes">3x</span>
335
+ <span class="cline-any cline-yes">3x</span>
336
+ <span class="cline-any cline-neutral">&nbsp;</span>
337
+ <span class="cline-any cline-neutral">&nbsp;</span>
338
+ <span class="cline-any cline-neutral">&nbsp;</span>
339
+ <span class="cline-any cline-neutral">&nbsp;</span>
340
+ <span class="cline-any cline-neutral">&nbsp;</span>
341
+ <span class="cline-any cline-yes">11x</span>
342
+ <span class="cline-any cline-yes">1x</span>
343
+ <span class="cline-any cline-neutral">&nbsp;</span>
344
+ <span class="cline-any cline-neutral">&nbsp;</span>
345
+ <span class="cline-any cline-neutral">&nbsp;</span>
346
+ <span class="cline-any cline-neutral">&nbsp;</span>
347
+ <span class="cline-any cline-neutral">&nbsp;</span>
348
+ <span class="cline-any cline-neutral">&nbsp;</span>
349
+ <span class="cline-any cline-yes">11x</span>
350
+ <span class="cline-any cline-yes">3x</span>
351
+ <span class="cline-any cline-yes">3x</span>
352
+ <span class="cline-any cline-yes">2x</span>
353
+ <span class="cline-any cline-yes">3x</span>
354
+ <span class="cline-any cline-neutral">&nbsp;</span>
355
+ <span class="cline-any cline-neutral">&nbsp;</span>
356
+ <span class="cline-any cline-neutral">&nbsp;</span>
357
+ <span class="cline-any cline-neutral">&nbsp;</span>
358
+ <span class="cline-any cline-yes">11x</span>
359
+ <span class="cline-any cline-yes">11x</span>
360
+ <span class="cline-any cline-yes">11x</span>
361
+ <span class="cline-any cline-yes">11x</span>
362
+ <span class="cline-any cline-yes">11x</span>
363
+ <span class="cline-any cline-yes">11x</span>
364
+ <span class="cline-any cline-yes">11x</span>
365
+ <span class="cline-any cline-neutral">&nbsp;</span>
366
+ <span class="cline-any cline-yes">11x</span>
367
+ <span class="cline-any cline-neutral">&nbsp;</span>
368
+ <span class="cline-any cline-yes">11x</span>
369
+ <span class="cline-any cline-yes">11x</span>
370
+ <span class="cline-any cline-yes">11x</span>
371
+ <span class="cline-any cline-yes">11x</span>
372
+ <span class="cline-any cline-yes">11x</span>
373
+ <span class="cline-any cline-yes">11x</span>
374
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import style from '@/style/ns.css?raw'
375
+ import type { INanosplash } from '@/interfaces/INanosplash.ts'
376
+ import type { Func } from '@/types/generic/function.ts'
377
+ import type { INSElement } from '@/interfaces/INSElement.ts'
378
+ import {
379
+ all,
380
+ bod,
381
+ div,
382
+ doc,
383
+ first,
384
+ parseHtml,
385
+ parseRef,
386
+ toArray,
387
+ } from '@/utils/dom-utils.ts'
388
+ import { ClassNames, Selectors } from '@/constants/ns.ts'
389
+ import type { HTMLString } from '@/types/semantic/string.ts'
390
+ import type { ElementRef } from '@/types/dom.ts'
391
+ import type { int } from '@/types/semantic/number.ts'
392
+ import { version } from '@/../package.json'
393
+ &nbsp;
394
+ export const useNs: Func&lt;INanosplash&gt; = (): INanosplash =&gt; {
395
+ /**
396
+ * Retrieve all NS elements from the DOM
397
+ */
398
+ const getAllNs: Func&lt;INSElement[]&gt; = () =&gt;
399
+ all(doc(), Selectors.ns) as INSElement[]
400
+ &nbsp;
401
+ /**
402
+ * Create an NS element
403
+ */
404
+ const makeNs: Func&lt;INSElement&gt; = () =&gt; {
405
+ const circle: HTMLString =
406
+ '&lt;circle class=path cx=25 cy=25 r=20 fill=none /&gt;'
407
+ const svg = parseHtml(`&lt;svg viewBox="0 0 50 50"&gt;${circle}&lt;/svg&gt;`) as Element
408
+ const node = div(
409
+ ClassNames.ns,
410
+ div(ClassNames.nsText),
411
+ div(ClassNames.nsSpinner, svg)
412
+ ) as INSElement
413
+ node.nsId = Date.now()
414
+ return node
415
+ }
416
+ &nbsp;
417
+ /**
418
+ * Get all NS elements from DOM in a FIFO sequence
419
+ */
420
+ const nsQueue: Func&lt;INSElement[]&gt; = () =&gt;
421
+ getAllNs().sort((a, b) =&gt; a.nsId - b.nsId)
422
+ &nbsp;
423
+ /**
424
+ * Peek at the first NS element in the queue
425
+ */
426
+ const peekNsQueue: Func&lt;INSElement | null&gt; = () =&gt; nsQueue()[0<span class="branch-0 cbranch-no" title="branch not covered" >] ?? null</span>
427
+ &nbsp;
428
+ /**
429
+ * Set the text of the NS element.
430
+ * @param ns Nanosplash element.
431
+ * @param text The text to display adjacent to the spinner.
432
+ */
433
+ const setNsText = (ns: INSElement, text?: string): void =&gt; {
434
+ first(ns, Selectors.nsText)?.remove()
435
+ if (!text) return
436
+ const newNsText: Element = div(ClassNames.nsText, text)
437
+ ns.insertBefore(newNsText, ns.firstChild)
438
+ }
439
+ &nbsp;
440
+ /**
441
+ * Set the parent element of the NS element.
442
+ * @param ns Nanosplash element.
443
+ * @param parent An element to be a parent of the Nanosplash element.
444
+ */
445
+ const setNsParent = (ns: INSElement, parent: Element): void =&gt; {
446
+ const child = parent.firstElementChild
447
+ if (child) parent.insertBefore(ns, child)
448
+ parent.append(ns)
449
+ parent.classList.add(ClassNames.nsHost)
450
+ }
451
+ &nbsp;
452
+ const getNsInside = (parent: Element): INSElement | undefined =&gt; {
453
+ const children = toArray(parent.children) as INSElement[]
454
+ return children.find((v: Element): boolean =&gt;
455
+ v.classList.contains(ClassNames.ns)
456
+ )
457
+ }
458
+ &nbsp;
459
+ /**
460
+ * Show the Nanosplash in the window
461
+ * @param text The text that will appear adjacent to the spinner. Enter false to only show the spinner.
462
+ * @param inside Element or selector to an element wherein the Nanosplash element should reside.
463
+ */
464
+ const show = (text?: string, inside?: ElementRef): int | null =&gt; {
465
+ const parent: Element = inside ? (parseRef(inside<span class="branch-0 cbranch-no" title="branch not covered" >) ?? bod()) : b</span>od()
466
+ let ns: INSElement
467
+ const recycled = getNsInside(parent)
468
+ if (recycled) {
469
+ ns = recycled as INSElement
470
+ } else {
471
+ ns = makeNs()
472
+ setNsParent(ns, parent)
473
+ }
474
+ setNsText(ns, text ?? '')
475
+ if (parent === bod()) {
476
+ const top: string = scrollY + 'px'
477
+ bod().style.setProperty('--ns-top', top)
478
+ }
479
+ return ns.nsId
480
+ }
481
+ &nbsp;
482
+ /**
483
+ * Remove a Nanosplash element from the DOM
484
+ * @param ns The Nanosplash element
485
+ */
486
+ const removeNs = (ns?: Element | INSElement | null): void =&gt; {
487
+ ns?.parentElement?.classList.remove(ClassNames.nsHost)
488
+ ns?.remove()
489
+ }
490
+ &nbsp;
491
+ /**
492
+ * Find a Nanosplash element with a given ID
493
+ * @param id The Nanosplash ID
494
+ */
495
+ const findNs = (id: int): INSElement | null =&gt;
496
+ getAllNs().find(x =&gt; x.nsId === id<span class="branch-0 cbranch-no" title="branch not covered" >) ?? null</span>
497
+ &nbsp;
498
+ /**
499
+ * Hide agnostically in FIFO order, specifically by ID, or all, by the asterisk symbol.
500
+ * The latter will delete all Nanosplash elements in the DOM.
501
+ * @param id Optional ID of a Nanosplash element or '*'.
502
+ */
503
+ const hide = (id?: int | '*'): void =&gt; {
504
+ const selectAll = id === '*'
505
+ if (selectAll) getAllNs().forEach(removeNs)
506
+ else removeNs(typeof id === 'number' ? findNs(id) : peekNsQueue())
507
+ }
508
+ &nbsp;
509
+ /**
510
+ * Remove old Nanosplash styles and insert new ones.
511
+ */
512
+ const injectStyle = () =&gt; {
513
+ first(doc(), '#ns')?.remove()
514
+ const styleElement: HTMLStyleElement = parseHtml(
515
+ `&lt;style id="ns"&gt;${style}&lt;/style&gt;`
516
+ )
517
+ bod().append(styleElement)
518
+ }
519
+ &nbsp;
520
+ injectStyle() // Run everytime the hook is invoked.
521
+ &nbsp;
522
+ return {
523
+ show,
524
+ hide,
525
+ version,
526
+ }
527
+ }
528
+ &nbsp;</pre></td></tr></table></pre>
529
+
530
+ <div class='push'></div><!-- for sticky footer -->
531
+ </div><!-- /wrapper -->
532
+ <div class='footer quiet pad2 space-top1 center small'>
533
+ Code coverage generated by
534
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
535
+ at 2025-06-07T22:57:20.354Z
536
+ </div>
537
+ <script src="../../prettify.js"></script>
538
+ <script>
539
+ window.onload = function () {
540
+ prettyPrint();
541
+ };
542
+ </script>
543
+ <script src="../../sorter.js"></script>
544
+ <script src="../../block-navigation.js"></script>
545
+ </body>
546
+ </html>
547
+