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.
Files changed (53) hide show
  1. package/.github/workflows/production.yml +57 -0
  2. package/.github/workflows/release.yml +61 -0
  3. package/README.md +17 -15
  4. package/dist/iife/nanosplash.iife.js +1 -1
  5. package/dist/module/Nanosplash.css +1 -0
  6. package/dist/module/manifest.json +6 -3
  7. package/dist/module/nanosplash.cjs.js +1 -1
  8. package/dist/module/nanosplash.es.js +244 -330
  9. package/docs/index.html +54 -430
  10. package/docs/nanosplash.iife.js +1 -1
  11. package/docs/style.css +1 -1
  12. package/docs/typedoc/assets/highlight.css +1 -50
  13. package/docs/typedoc/assets/main.js +2 -2
  14. package/docs/typedoc/assets/search.js +1 -1
  15. package/docs/typedoc/assets/style.css +32 -2
  16. package/docs/typedoc/classes/Core_Nanosplash.Nanosplash.html +1 -0
  17. package/docs/typedoc/index.html +1 -1
  18. package/docs/typedoc/modules/Core_Nanosplash.html +1 -0
  19. package/docs/typedoc/modules/types.html +1 -1
  20. package/index.html +51 -412
  21. package/jest.config.ts +194 -0
  22. package/package.json +70 -65
  23. package/src/Core/Nanosplash.ts +74 -0
  24. package/src/Core/SplashInstance.ts +154 -0
  25. package/src/Factory/NanosplashFactory.ts +73 -0
  26. package/src/Interfaces/ContextualAPIInterface.ts +8 -0
  27. package/src/Interfaces/IdentityInterface.ts +3 -0
  28. package/src/Interfaces/ImageInterface.ts +5 -0
  29. package/src/Interfaces/InsideInterface.ts +5 -0
  30. package/src/Interfaces/NanosplashInterface.ts +4 -0
  31. package/src/Interfaces/ProgressInterface.ts +5 -0
  32. package/src/Interfaces/ShowInterface.ts +5 -0
  33. package/src/Interfaces/WhileInterface.ts +5 -0
  34. package/src/main.ts +2 -6
  35. package/src/repositories/NanosplashRepository.ts +34 -55
  36. package/src/style.sass +51 -61
  37. package/src/types.d.ts +45 -200
  38. package/src/utilities/dom.spec.ts +70 -0
  39. package/src/utilities/dom.ts +17 -256
  40. package/update-all.sh +3 -0
  41. package/vite.iife.config.js +46 -18
  42. package/vite.mod.config.js +48 -12
  43. package/vite.site.config.js +0 -3
  44. package/dist/module/style.css +0 -1
  45. package/docs/typedoc/classes/Nanosplash.Nanosplash-1.html +0 -56
  46. package/docs/typedoc/classes/types.Nanosplash.html +0 -56
  47. package/docs/typedoc/modules/Nanosplash.html +0 -1
  48. package/src/Exceptions/Exception.ts +0 -12
  49. package/src/Exceptions/IllegalArgumentException.ts +0 -9
  50. package/src/Exceptions/InvalidDestinationException.ts +0 -9
  51. package/src/Exceptions/MissingResourceException.ts +0 -9
  52. package/src/Nanosplash.ts +0 -484
  53. package/update-latest.sh +0 -21
package/docs/typedoc/classes/types.Nanosplash.html DELETED
@@ -1,56 +0,0 @@
1
- <!DOCTYPE html><html class="default no-js"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Nanosplash | nanosplash</title><meta name="description" content="Documentation for nanosplash"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">nanosplash</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><ul class="tsd-breadcrumb"><li><a href="../index.html">nanosplash</a></li><li><a href="../modules/types.html">types</a></li><li><a href="types.Nanosplash.html">Nanosplash</a></li></ul><h1>Class Nanosplash</h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><div class="lead">
2
- <p>Nanosplash</p>
3
- </div><dl class="tsd-comment-tags"><dt>author</dt><dd><p>Isak K. Hauge</p>
4
- </dd></dl></div></section><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><span class="target">Nanosplash</span></li></ul></section><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Constructors</h3><ul class="tsd-index-list"><li class="tsd-kind-constructor tsd-parent-kind-class"><a href="types.Nanosplash.html#constructor" class="tsd-kind-icon">constructor</a></li></ul></section><section class="tsd-index-section "><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class"><a href="types.Nanosplash.html#configure" class="tsd-kind-icon">configure</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="types.Nanosplash.html#hide" class="tsd-kind-icon">hide</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="types.Nanosplash.html#install" class="tsd-kind-icon">install</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="types.Nanosplash.html#show" class="tsd-kind-icon">show</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Constructors</h2><section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class"><a name="constructor" class="tsd-anchor"></a><h3>constructor</h3><ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">new <wbr/>Nanosplash<span class="tsd-signature-symbol">(</span>config<span class="tsd-signature-symbol">?: </span><a href="../modules/types.html#Config" class="tsd-signature-type" data-tsd-kind="Type alias">Config</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="types.Nanosplash.html" class="tsd-signature-type" data-tsd-kind="Class">Nanosplash</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/isakhauge/nanosplash/blob/527ce5d/src/types.d.ts#L27">types.d.ts:27</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
5
- <p>Constructor</p>
6
- </div><dl class="tsd-comment-tags"><dt>example</dt><dd><pre><code class="language-js"><span class="hl-0">// Instantiatie without config object.</span><br/><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-3">Nanosplash</span><span class="hl-2">()</span>
7
- </code></pre>
8
- </dd><dt>example</dt><dd><pre><code class="language-js"><span class="hl-0">// Instantiate with config object.</span><br/><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-3">Nanosplash</span><span class="hl-2">(</span><span class="hl-4">config</span><span class="hl-2">)</span>
9
- </code></pre>
10
- </dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> config: <a href="../modules/types.html#Config" class="tsd-signature-type" data-tsd-kind="Type alias">Config</a></h5><div class="tsd-comment tsd-typography"><div class="lead">
11
- <p>The configuration object.</p>
12
- </div></div></li></ul><h4 class="tsd-returns-title">Returns <a href="types.Nanosplash.html" class="tsd-signature-type" data-tsd-kind="Class">Nanosplash</a></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group "><h2>Methods</h2><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a name="configure" class="tsd-anchor"></a><h3>configure</h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">configure<span class="tsd-signature-symbol">(</span>config<span class="tsd-signature-symbol">: </span><a href="../modules/types.html#Config" class="tsd-signature-type" data-tsd-kind="Type alias">Config</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="types.Nanosplash.html" class="tsd-signature-type" data-tsd-kind="Class">Nanosplash</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/isakhauge/nanosplash/blob/527ce5d/src/types.d.ts#L48">types.d.ts:48</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
13
- <p>Configure</p>
14
- </div><dl class="tsd-comment-tags"><dt>description</dt><dd><p>Mutates the existing configuration and returns the updated
15
- instance.</p>
16
- </dd><dt>example</dt><dd><pre><code class="language-js"><span class="hl-4">nanosplash</span><span class="hl-2">.</span><span class="hl-3">configure</span><span class="hl-2">(</span><span class="hl-4">config</span><span class="hl-2">)</span>
17
- </code></pre>
18
- </dd><dt>example</dt><dd><pre><code class="language-js"><span class="hl-4">window</span><span class="hl-2">.</span><span class="hl-4">loading</span><span class="hl-2">.</span><span class="hl-3">configure</span><span class="hl-2">(</span><span class="hl-4">config</span><span class="hl-2">).</span><span class="hl-3">show</span><span class="hl-2">(</span><span class="hl-4">text</span><span class="hl-2">)</span>
19
- </code></pre>
20
- </dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>config: <a href="../modules/types.html#Config" class="tsd-signature-type" data-tsd-kind="Type alias">Config</a></h5><div class="tsd-comment tsd-typography"><div class="lead">
21
- <p>The config object.</p>
22
- </div></div></li></ul><h4 class="tsd-returns-title">Returns <a href="types.Nanosplash.html" class="tsd-signature-type" data-tsd-kind="Class">Nanosplash</a></h4><div><p>The updated instance.</p>
23
- </div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a name="hide" class="tsd-anchor"></a><h3>hide</h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">hide<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/isakhauge/nanosplash/blob/527ce5d/src/types.d.ts#L109">types.d.ts:109</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
24
- <p>Hide</p>
25
- </div><dl class="tsd-comment-tags"><dt>description</dt><dd><p>Hides the loading screen and moves to its default destination.
26
- If no custom default destination is defined, it will move to the document
27
- body.</p>
28
- </dd><dt>example</dt><dd><pre><code class="language-js"><span class="hl-0">// Basic usage</span><br/><span class="hl-4">loading</span><span class="hl-2">.</span><span class="hl-3">hide</span><span class="hl-2">()</span><br/><span class="hl-0">// Use with async functions</span><br/><span class="hl-4">loading</span><span class="hl-2">.</span><span class="hl-3">show</span><span class="hl-2">(</span><span class="hl-5">&#39;Loading ...&#39;</span><span class="hl-2">)</span><br/><span class="hl-6">await</span><span class="hl-2"> </span><span class="hl-3">fetchStuffFromApi</span><span class="hl-2">()</span><br/><span class="hl-4">loading</span><span class="hl-2">.</span><span class="hl-3">hide</span><span class="hl-2">()</span>
29
- </code></pre>
30
- </dd></dl></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a name="install" class="tsd-anchor"></a><h3>install</h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">install<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/isakhauge/nanosplash/blob/527ce5d/src/types.d.ts#L127">types.d.ts:127</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
31
- <p>Install</p>
32
- </div><dl class="tsd-comment-tags"><dt>description</dt><dd><p>Assigns itself to the Window object and sets essential event
33
- listeners that responds to changes in the browser. The instance is
34
- globally accessible through the property &quot;loading&quot;.</p>
35
- </dd><dt>example</dt><dd><pre><code class="language-js"><span class="hl-0">// Install</span><br/><span class="hl-2">(</span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-3">Nanosplash</span><span class="hl-2">()).</span><span class="hl-3">install</span><span class="hl-2">()</span><br/><br/><span class="hl-0">// Access the instance globally</span><br/><span class="hl-4">loading</span><span class="hl-2">.</span><span class="hl-3">show</span><span class="hl-2">(</span><span class="hl-5">&#39;Some text&#39;</span><span class="hl-2">)</span>
36
- </code></pre>
37
- </dd></dl></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></section><section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class"><a name="show" class="tsd-anchor"></a><h3>show</h3><ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">show<span class="tsd-signature-symbol">(</span>text<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../modules/types.html#DisplayController" class="tsd-signature-type" data-tsd-kind="Type alias">DisplayController</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/isakhauge/nanosplash/blob/527ce5d/src/types.d.ts#L90">types.d.ts:90</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
38
- <p>Show</p>
39
- </div><dl class="tsd-comment-tags"><dt>description</dt><dd><p>Shows the loading screen. Invoking the inside function will
40
- display the loading screen within the constraints of the defined
41
- destination.</p>
42
- <p>Basic usage.</p>
43
- </dd><dt>example</dt><dd><pre><code class="language-js"><span class="hl-0">// Basic usage.</span><br/><span class="hl-4">loading</span><span class="hl-2">.</span><span class="hl-3">show</span><span class="hl-2">(</span><span class="hl-4">text</span><span class="hl-2">)</span>
44
- </code></pre>
45
- <p>Display Nanosplash inside other DOM elements.</p>
46
- </dd><dt>example</dt><dd><pre><code class="language-js"><span class="hl-0">// Show loading screen within another element using CSS selector.</span><br/><span class="hl-4">loading</span><span class="hl-2">.</span><span class="hl-3">show</span><span class="hl-2">(</span><span class="hl-4">text</span><span class="hl-2">).</span><span class="hl-3">inside</span><span class="hl-2">(</span><span class="hl-5">&#39;#my-element&#39;</span><span class="hl-2">)</span><br/><span class="hl-0">// Use DOM element reference.</span><br/><span class="hl-4">loading</span><span class="hl-2">.</span><span class="hl-3">show</span><span class="hl-2">(</span><span class="hl-4">text</span><span class="hl-2">).</span><span class="hl-3">inside</span><span class="hl-2">(</span><span class="hl-4">document</span><span class="hl-2">.</span><span class="hl-3">getElementById</span><span class="hl-2">(</span><span class="hl-4">id</span><span class="hl-2">))</span><br/><span class="hl-0">// Use function that returns a DOM element reference.</span><br/><span class="hl-4">loading</span><span class="hl-2">.</span><span class="hl-3">show</span><span class="hl-2">(</span><span class="hl-4">text</span><span class="hl-2">).</span><span class="hl-3">inside</span><span class="hl-2">(() </span><span class="hl-1">=&gt;</span><span class="hl-2"> </span><span class="hl-3">getDomReference</span><span class="hl-2">())</span>
47
- </code></pre>
48
- <p>Display Nanosplash while an asynchronous task is resolving.</p>
49
- </dd><dt>example</dt><dd><pre><code class="language-js"><span class="hl-0">// Define an asynchronous task.</span><br/><span class="hl-1">const</span><span class="hl-2"> </span><span class="hl-3">task</span><span class="hl-2"> = </span><span class="hl-1">async</span><span class="hl-2"> () </span><span class="hl-1">=&gt;</span><span class="hl-2"> </span><span class="hl-6">await</span><span class="hl-2"> </span><span class="hl-3">getDataFromApi</span><span class="hl-2">()</span><br/><span class="hl-0">// Show loading screen while the task is running.</span><br/><span class="hl-4">loading</span><span class="hl-2">.</span><span class="hl-3">show</span><span class="hl-2">(</span><span class="hl-4">text</span><span class="hl-2">).</span><span class="hl-3">during</span><span class="hl-2">(</span><span class="hl-4">task</span><span class="hl-2">)</span><br/><span class="hl-4">loading</span><span class="hl-2">.</span><span class="hl-3">show</span><span class="hl-2">(</span><span class="hl-4">text</span><span class="hl-2">).</span><span class="hl-3">inside</span><span class="hl-2">(</span><span class="hl-5">&#39;#my-element&#39;</span><span class="hl-2">).</span><span class="hl-3">during</span><span class="hl-2">(</span><span class="hl-4">task</span><span class="hl-2">)</span>
50
- </code></pre>
51
- </dd></dl></div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> text: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"><div class="lead">
52
- <p>The text that will be shown in the
53
- loading screen. If undefined, Nanosplash will use the default text.</p>
54
- </div></div></li></ul><h4 class="tsd-returns-title">Returns <a href="../modules/types.html#DisplayController" class="tsd-signature-type" data-tsd-kind="Type alias">DisplayController</a></h4><div><p>An object with a function that controls the
55
- visibility and destination of the loading screen.</p>
56
- </div></li></ul></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../index.html">Modules</a></li><li class=" tsd-kind-module"><a href="../modules/Nanosplash.html">Nanosplash</a></li><li class="current tsd-kind-module"><a href="../modules/types.html">types</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="current tsd-kind-class tsd-parent-kind-module"><a href="types.Nanosplash.html" class="tsd-kind-icon">Nanosplash</a><ul><li class="tsd-kind-constructor tsd-parent-kind-class"><a href="types.Nanosplash.html#constructor" class="tsd-kind-icon">constructor</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="types.Nanosplash.html#configure" class="tsd-kind-icon">configure</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="types.Nanosplash.html#hide" class="tsd-kind-icon">hide</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="types.Nanosplash.html#install" class="tsd-kind-icon">install</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="types.Nanosplash.html#show" class="tsd-kind-icon">show</a></li></ul></li></ul></nav></div></div></div><footer class="with-border-bottom"><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li><li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li><li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><span class="tsd-kind-icon">Type alias with type parameter</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="container tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div><script src="../assets/main.js"></script></body></html>
package/docs/typedoc/modules/Nanosplash.html DELETED
@@ -1 +0,0 @@
1
- <!DOCTYPE html><html class="default no-js"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Nanosplash | nanosplash</title><meta name="description" content="Documentation for nanosplash"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">nanosplash</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><ul class="tsd-breadcrumb"><li><a href="../index.html">nanosplash</a></li><li><a href="Nanosplash.html">Nanosplash</a></li></ul><h1>Module Nanosplash</h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Classes</h3><ul class="tsd-index-list"><li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/Nanosplash.Nanosplash-1.html" class="tsd-kind-icon">Nanosplash</a></li></ul></section></div></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../index.html">Modules</a></li><li class="current tsd-kind-module"><a href="Nanosplash.html">Nanosplash</a></li><li class=" tsd-kind-module"><a href="types.html">types</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/Nanosplash.Nanosplash-1.html" class="tsd-kind-icon">Nanosplash</a></li></ul></nav></div></div></div><footer class="with-border-bottom"><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li><li class="tsd-kind-type-alias tsd-has-type-parameter"><span class="tsd-kind-icon">Type alias with type parameter</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="container tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div><script src="../assets/main.js"></script></body></html>
package/src/Exceptions/Exception.ts DELETED
@@ -1,12 +0,0 @@
1
- class Exception extends Error {
2
- public constructor(message?: string) {
3
- super(message)
4
- this.name = this.constructor.name
5
- }
6
-
7
- public getName(): string {
8
- return this.constructor.name
9
- }
10
- }
11
-
12
- export default Exception
package/src/Exceptions/IllegalArgumentException.ts DELETED
@@ -1,9 +0,0 @@
1
- import Exception from "./Exception";
2
-
3
- class IllegalArgumentException extends Exception {
4
- public constructor(message?: string) {
5
- super(message);
6
- }
7
- }
8
-
9
- export default IllegalArgumentException
package/src/Exceptions/InvalidDestinationException.ts DELETED
@@ -1,9 +0,0 @@
1
- import Exception from "./Exception";
2
-
3
- class InvalidDestinationException extends Exception {
4
- public constructor(message?: string) {
5
- super(message);
6
- }
7
- }
8
-
9
- export default InvalidDestinationException
package/src/Exceptions/MissingResourceException.ts DELETED
@@ -1,9 +0,0 @@
1
- import Exception from './Exception'
2
-
3
- class MissingResourceException extends Exception {
4
- public constructor(message?: string) {
5
- super(message)
6
- }
7
- }
8
-
9
- export default MissingResourceException
package/src/Nanosplash.ts DELETED
@@ -1,484 +0,0 @@
1
- import {
2
- BlurMode,
3
- Config,
4
- Destination,
5
- DisplayController,
6
- SplashAnimation,
7
- } from 'nanosplash'
8
- import IllegalArgumentException from './Exceptions/IllegalArgumentException'
9
- import InvalidDestinationException from './Exceptions/InvalidDestinationException'
10
- import MissingResourceException from './Exceptions/MissingResourceException'
11
- import { NanosplashRepository } from './repositories/NanosplashRepository'
12
- import './style.sass'
13
- import {
14
- display,
15
- fitToParent,
16
- invokeOn,
17
- isElementOrNode,
18
- isFunction,
19
- move,
20
- ref,
21
- refAll,
22
- setAttribute,
23
- setStyle,
24
- } from './utilities/dom'
25
-
26
- /**
27
- * Nanosplash
28
- *
29
- * @author Isak K. Hauge
30
- */
31
- export class Nanosplash {
32
- private defaultDestination: Element
33
- private defaultText: string
34
- private readonly mainElement: HTMLDivElement
35
- private readonly splashElement: HTMLImageElement
36
- private readonly textElement: HTMLDivElement
37
- private cache = {
38
- parentPosition: '',
39
- }
40
-
41
- /**
42
- * Constructor
43
- *
44
- * @public
45
- * @constructor
46
- * @param {Config | undefined} config The configuration object.
47
- *
48
- * @example
49
- * ```js
50
- * // Instantiatie without config object.
51
- * new Nanosplash()
52
- * ```
53
- *
54
- * @example
55
- * ```js
56
- * // Instantiate with config object.
57
- * new Nanosplash(config)
58
- * ```
59
- */
60
- public constructor(config?: Config) {
61
- this.defaultText =
62
- config?.default?.text ?? NanosplashRepository.DEFAULT.TEXT
63
- this.defaultDestination = Nanosplash.getDestinationElement(
64
- config?.default?.destination ??
65
- NanosplashRepository.DEFAULT.DESTINATION_NODE
66
- )
67
-
68
- // Build UI elements
69
- this.mainElement = NanosplashRepository.makeMainElement()
70
- this.splashElement = NanosplashRepository.makeSplashElement()
71
- this.textElement = NanosplashRepository.makeTextElement()
72
-
73
- // Set default configuration
74
- this.setDefaultStyles()
75
-
76
- // Assemble UI elements
77
- const splashSrc = config?.splash?.src
78
- if (splashSrc) {
79
- this.setSplashSource(splashSrc)
80
- move(this.splashElement).to(this.mainElement)
81
- }
82
- move(this.textElement).to(this.mainElement)
83
-
84
- // Insert loader into destination element
85
- move(this.mainElement).to(this.defaultDestination, true)
86
- display(this.mainElement, false) // Hide by default
87
- fitToParent(this.mainElement)
88
-
89
- // Apply custom configuration
90
- if (config) {
91
- this.configure(config)
92
- }
93
- }
94
-
95
- /**
96
- * Install
97
- *
98
- * @description Assigns itself to the Window object and sets essential event
99
- * listeners that responds to changes in the browser. The instance is
100
- * globally accessible through the property "loading".
101
- *
102
- * @example
103
- * ```js
104
- * // Install
105
- * (new Nanosplash()).install()
106
- *
107
- * // Access the instance globally
108
- * loading.show('Some text')
109
- * ```
110
- */
111
- public install(): void {
112
- Object.defineProperty(window, 'loading', {
113
- value: this,
114
- writable: false,
115
- })
116
- invokeOn(window, () => fitToParent(this.mainElement), ['resize', 'scroll'])
117
- Nanosplash.checkStyleResources()
118
- }
119
-
120
- /**
121
- * Configure
122
- *
123
- * @param {Config} config The config object.
124
- * @return {Nanosplash} The updated instance.
125
- *
126
- * @description Mutates the existing configuration and returns the updated
127
- * instance.
128
- *
129
- * @example
130
- * ```js
131
- * nanosplash.configure(config)
132
- * ```
133
- *
134
- * @example
135
- * ```js
136
- * window.loading.configure(config).show(text)
137
- * ```
138
- */
139
- public configure(config: Config): Nanosplash {
140
- if (config?.default?.destination) {
141
- this.defaultDestination = Nanosplash.getDestinationElement(
142
- config.default.destination
143
- )
144
- }
145
-
146
- this.defaultText ||= config.default?.text as string
147
-
148
- // Text:
149
- if (config.text?.family) {
150
- this.setTextFontFamily(config.text.family)
151
- }
152
- if (config.text?.weight) {
153
- this.setTextWeight(config.text.weight)
154
- }
155
- if (config.text?.color) {
156
- this.setTextColor(config.text.color)
157
- }
158
- if (config.text?.size) {
159
- this.setTextSize(config.text.size)
160
- }
161
-
162
- // Background:
163
- if (config.background?.color) {
164
- this.setBackgroundColor(config.background.color)
165
- }
166
- if (config.background?.blur) {
167
- this.setBackgroundBlur(config.background.blur)
168
- }
169
-
170
- // Splash:
171
- if (config.splash) {
172
- if (config.splash?.src) {
173
- const hasSplashElement = this.mainElement.contains(this.splashElement)
174
- if (!hasSplashElement) {
175
- move(this.splashElement).to(this.mainElement, true)
176
- }
177
- this.setSplashSource(config.splash.src)
178
- }
179
- if (config.splash?.width) {
180
- this.setSplashWidth(config.splash.width)
181
- }
182
- if (config.splash?.height) {
183
- this.setSplashHeight(config.splash.height)
184
- }
185
- if (config.splash?.animation) {
186
- this.setSplashAnimation(config.splash.animation)
187
- }
188
- } else {
189
- display(this.splashElement, false)
190
- }
191
-
192
- return this
193
- }
194
-
195
- /**
196
- * Show
197
- *
198
- * @param {string | undefined} text The text that will be shown in the
199
- * loading screen. If undefined, Nanosplash will use the default text.
200
- * @return {DisplayController} An object with a function that controls the
201
- * visibility and destination of the loading screen.
202
- *
203
- * @description Shows the loading screen. Invoking the inside function will
204
- * display the loading screen within the constraints of the defined
205
- * destination.
206
- *
207
- * Basic usage.
208
- * @example
209
- * ```js
210
- * // Basic usage.
211
- * loading.show(text)
212
- * ```
213
- *
214
- * Display Nanosplash inside other DOM elements.
215
- * @example
216
- * ```js
217
- * // Show loading screen within another element using CSS selector.
218
- * loading.show(text).inside('#my-element')
219
- * // Use DOM element reference.
220
- * loading.show(text).inside(document.getElementById(id))
221
- * // Use function that returns a DOM element reference.
222
- * loading.show(text).inside(() => getDomReference())
223
- * ```
224
- *
225
- * Display Nanosplash while an asynchronous task is resolving.
226
- * @example
227
- * ```js
228
- * // Define an asynchronous task.
229
- * const task = async () => await getDataFromApi()
230
- * // Show loading screen while the task is running.
231
- * loading.show(text).during(task)
232
- * loading.show(text).inside('#my-element').during(task)
233
- * ```
234
- */
235
- public show(text?: string): DisplayController {
236
- this.setText(text ?? NanosplashRepository.DEFAULT.TEXT)
237
- display(this.mainElement, true)
238
-
239
- // Async task handler
240
- const during = (task: Promise<any>) => {
241
- return task.finally(() => this.hide())
242
- }
243
-
244
- // Returns a
245
- return {
246
- inside: (destination: Destination) => {
247
- this.restoreParentPosition()
248
- const element = Nanosplash.getDestinationElement(destination)
249
- move(this.mainElement).to(element, true)
250
- fitToParent(this.mainElement)
251
- this.setParentPositionToRelative()
252
- return { during }
253
- },
254
- during,
255
- }
256
- }
257
-
258
- /**
259
- * Hide
260
- *
261
- * @description Hides the loading screen and moves to its default destination.
262
- * If no custom default destination is defined, it will move to the document
263
- * body.
264
- *
265
- * @example
266
- * ```js
267
- * // Basic usage
268
- * loading.hide()
269
- * // Use with async functions
270
- * loading.show('Loading ...')
271
- * await fetchStuffFromApi()
272
- * loading.hide()
273
- * ```
274
- */
275
- public hide(): void {
276
- this.restoreParentPosition()
277
- display(this.mainElement, false)
278
- this.setText(this.defaultText)
279
- move(this.mainElement).to(this.defaultDestination, true)
280
- fitToParent(this.mainElement)
281
- }
282
-
283
- /**
284
- * Set Default Styles
285
- * @private
286
- */
287
- private setDefaultStyles(): void {
288
- this.setTextFontFamily(NanosplashRepository.DEFAULT.TEXT_FONT)
289
- this.setTextWeight(NanosplashRepository.DEFAULT.TEXT_WEIGHT)
290
- this.setTextColor(NanosplashRepository.DEFAULT.TEXT_COLOR)
291
- this.setTextSize(NanosplashRepository.DEFAULT.TEXT_SIZE)
292
- this.setSplashWidth(NanosplashRepository.DEFAULT.SPLASH_WIDTH)
293
- this.setSplashHeight(NanosplashRepository.DEFAULT.SPLASH_HEIGHT)
294
- this.setSplashAnimation(NanosplashRepository.DEFAULT.SPLASH_ANIMATION)
295
- this.setBackgroundColor(NanosplashRepository.DEFAULT.BACKGROUND_COLOR)
296
- this.setBackgroundBlur(NanosplashRepository.DEFAULT.BACKGROUND_BLUR)
297
- }
298
-
299
- private doIfParentExist(callback: (parent: HTMLElement) => any): void {
300
- ;(parent => {
301
- if (parent) {
302
- callback(parent)
303
- }
304
- })(this.mainElement.parentElement as HTMLElement)
305
- }
306
-
307
- private setParentPosition(position: string): void {
308
- this.doIfParentExist(parent => {
309
- setStyle(parent, 'position', position)
310
- })
311
- }
312
-
313
- private cacheParentPosition(): void {
314
- this.doIfParentExist(parent => {
315
- this.cache.parentPosition = parent.style.position
316
- })
317
- }
318
-
319
- private restoreParentPosition(): void {
320
- this.setParentPosition(this.cache.parentPosition)
321
- }
322
-
323
- private setParentPositionToRelative(): void {
324
- this.cacheParentPosition()
325
- this.setParentPosition('relative')
326
- }
327
-
328
- /**
329
- * Set Text
330
- *
331
- * @param {string} text
332
- * @private
333
- */
334
- private setText(text: string) {
335
- this.textElement.innerText = text
336
- }
337
-
338
- /**
339
- * Set Text Font Family
340
- *
341
- * @param {string} fontFamily
342
- * @private
343
- */
344
- private setTextFontFamily(fontFamily: string): void {
345
- setStyle(this.textElement, 'fontFamily', fontFamily)
346
- }
347
-
348
- /**
349
- * Set Text Font Weight
350
- *
351
- * @param {string} fontWeight
352
- * @private
353
- */
354
- private setTextWeight(fontWeight: string): void {
355
- setStyle(this.textElement, 'fontWeight', fontWeight)
356
- }
357
-
358
- /**
359
- * Set Text Color
360
- *
361
- * @param {string} color
362
- * @private
363
- */
364
- private setTextColor(color: string): void {
365
- setStyle(this.textElement, 'color', color)
366
- }
367
-
368
- /**
369
- * Set Text Size
370
- *
371
- * @param {string} fontSize
372
- * @private
373
- */
374
- private setTextSize(fontSize: string): void {
375
- setStyle(this.textElement, 'fontSize', fontSize)
376
- }
377
-
378
- /**
379
- * Set Splash Source
380
- *
381
- * @param {string} src
382
- * @private
383
- */
384
- private setSplashSource(src: string): void {
385
- this.splashElement.src = src
386
- display(this.splashElement, true)
387
- }
388
-
389
- /**
390
- * Set Splash Width
391
- *
392
- * @param {string} width
393
- * @private
394
- */
395
- private setSplashWidth(width: string): void {
396
- setStyle(this.splashElement, 'width', width)
397
- }
398
-
399
- /**
400
- * Set Splash Height
401
- *
402
- * @param {string} height
403
- * @private
404
- */
405
- private setSplashHeight(height: string): void {
406
- setStyle(this.splashElement, 'height', height)
407
- }
408
-
409
- /**
410
- * Set Splash Animation
411
- *
412
- * @param {SplashAnimation} animation
413
- * @private
414
- */
415
- private setSplashAnimation(animation: SplashAnimation): void {
416
- setAttribute(this.mainElement, 'data-splash-animation', animation)
417
- }
418
-
419
- /**
420
- * Set Background Color
421
- *
422
- * @param color
423
- * @private
424
- */
425
- private setBackgroundColor(color: string): void {
426
- setStyle(this.mainElement, 'backgroundColor', color)
427
- }
428
-
429
- /**
430
- * Set Background Blur
431
- *
432
- * @param {BlurMode} blurMode
433
- * @private
434
- */
435
- private setBackgroundBlur(blurMode: BlurMode): void {
436
- setAttribute(this.mainElement, 'data-blur', blurMode)
437
- }
438
-
439
- /**
440
- * @throws {MissingResourceException}
441
- * @description Throws an exception if the CSS is missing from the browser.
442
- */
443
- private static checkStyleResources(): void {
444
- window.addEventListener('load', async function() {
445
- const hrefElements = refAll('link[href*="nanosplash"]')
446
- const nanosplashFilter = (v: HTMLElement) =>
447
- /\.nanosplash/.test(v.innerText)
448
- const styleElements = refAll('style').filter(nanosplashFilter)
449
- const hasRequiredCss = hrefElements.length > 0 || styleElements.length > 0
450
- if (!hasRequiredCss) {
451
- throw new MissingResourceException('Missing the Nanosplash CSS')
452
- }
453
- })
454
- }
455
-
456
- /**
457
- * @throws InvalidDestinationException
458
- * @throws IllegalArgumentException
459
- * @private
460
- */
461
- private static getDestinationElement(destination: Destination): HTMLElement {
462
- const isString = typeof destination === 'string'
463
- const isCallback = isFunction(destination)
464
- const isElement = isElementOrNode(destination)
465
-
466
- let destinationNode: HTMLElement | null
467
-
468
- if (isString) {
469
- destinationNode = ref(destination as string) as HTMLElement
470
- } else if (isCallback) {
471
- destinationNode = (destination as Function)() as HTMLElement
472
- } else if (isElement) {
473
- destinationNode = destination as HTMLElement
474
- } else {
475
- throw new IllegalArgumentException()
476
- }
477
-
478
- if (!destinationNode) {
479
- throw new InvalidDestinationException('Destination element is falsy')
480
- }
481
-
482
- return destinationNode as HTMLElement
483
- }
484
- }
package/update-latest.sh DELETED
@@ -1,21 +0,0 @@
1
- #!/usr/bin/env bash
2
- PACKAGES=(
3
- @vitejs/plugin-vue
4
- @vue/compiler-sfc
5
- autoprefixer
6
- cssnano
7
- postcss
8
- sass
9
- typedoc
10
- typescript
11
- vite
12
- vite-plugin-singlefile
13
- )
14
-
15
- PACKAGE_STR=""
16
-
17
- for package in ${PACKAGES[@]}
18
- do PACKAGE_STR+=" $package@latest"
19
- done
20
-
21
- yarn add -D $PACKAGE_STR