nanosplash 2.2.4 → 2.3.2

package/src/utilities/dom.ts

@@ -1,265 +1,26 @@
-import {
-	CSSProperty,
-	HTMLElementTag,
-	MakeOptions,
-	TargetNodeObject,
-} from 'nanosplash'
+import {HTMLElementTag} from "../types";
 
-/**
- * Ref (reference)
- *
- * @param {string} cssSelector
- * @return {Element | null}
- *
- * @description Returns the instance reference of whatever element in the DOM
- * that matches the CSS selector string.
- */
-export const ref = (cssSelector: string): HTMLElement | null =>
-	document.querySelector(cssSelector)
-
-/**
- * Ref All (reference)
- *
- * @param {string} cssSelector
- * @return {Element[]}
- *
- * @description Returns the instance references of whatever element in the DOM
- * that matches the CSS selector string.
- */
-export const refAll = (cssSelector: string): HTMLElement[] =>
-	Array.from(document.querySelectorAll(cssSelector))
-
-/**
- * Create
- *
- * @param {HTMLElementTag} tag Valid HTML element tag name
- * @param {MakeOptions} options Make options
- * @returns {HTMLElement}
- *
- * @description Creates any HTML element that corresponds with the given tag.
- * Additionally, if options are defined, it can mutate the element by adding
- * class names, attributes, and content.
- */
-export const create = (
-	tag: HTMLElementTag,
-	options?: MakeOptions
-): HTMLElement => {
-	const element = document.createElement(tag)
-	if (options) {
-		// Element ID
-		element.id ||= options.id + ''
-
-		// Element class names
-		element.className ||= options.className + ''
-
-		// Element attributes
-		options.attributes
-			?.filter(v => v.value)
-			.forEach(({ key, value }) => setAttribute(element, key, value as string))
-
-		// Element content
-		if (options.content) {
-			if (typeof options.content === 'string') {
-				element.innerText = options.content
-			} else {
-				element.append(options.content)
-			}
-		}
-	}
-	return element
+export function get<T>(selector: string): HTMLElement | T | null {
+    return document.querySelector(selector) as HTMLElement | T | null
 }
 
-/**
- * Display
- *
- * @param {HTMLElement} node The HTML element.
- * @param {boolean} show A boolean value that decides the node's visibility.
- */
-export const display = (node: HTMLElement, show: boolean): void => {
-	node.hidden = !show
-	if (show) {
-		removeAttribute(node, 'hidden')
-	} else {
-		setAttribute(node, 'hidden', 'true')
-	}
+export function move(source: Node, destination: Node, asFirstChild: boolean = false): void
+{
+    if (source && destination) {
+        (destination.hasChildNodes() && asFirstChild)
+            ? destination.insertBefore(source, destination.firstChild)
+            : destination.appendChild(source)
+    }
 }
 
-/**
- * Move
- *
- * @param {Node} node The node to append to another, as its child.
- * @returns An object with a target node controller function. Said function
- * will append the given node to a yet to be defined target node.
- *
- * @description This function will in turn append the node to another node.
- * If the child node already is a reference to another node in the
- * DOM, it will be moved to its new position by removing the current reference
- * before creating the new one.
- *
- * @example move(node).to(targetNode) // Regular append
- * @example mode(child).to(parent, true) // Append as first child
- */
-export const move = (node: Node): TargetNodeObject<Node> => ({
-	/**
-	 * @param {Node} targetNode The node in which the new node shall reside.
-	 * @param {boolean} asFirstChild Whether or not the new node shall be the
-	 * first child of the target node.
-	 */
-	to: (targetNode: Node, asFirstChild?: boolean): void => {
-		const children = Array.from(targetNode.childNodes)
-		const noChildren = children.length < 1
-		if (noChildren || !asFirstChild) {
-			targetNode.appendChild<Node>(node)
-			return
-		}
-		const firstChild = children[0]
-		targetNode.insertBefore(node, firstChild)
-	},
-})
-
-/**
- * Fit Parent Dimensions
- *
- * @param {HTMLElement} node The HTML element of which style to change.
- *
- * @description Transforms the node's dimensions and document position in order
- * to match its parent node.
- */
-export const fitToParent = (node: HTMLElement): void => {
-	const parent = node.parentNode as HTMLElement
-	if (parent) {
-		;((domRect: DOMRect) => {
-			const unit = 'px'
-			const parentIsBody = parent === document.body
-			let left, top, width, height
-
-			// Set distance from left
-			if (parentIsBody) {
-				left = scrollX + unit
-			} else {
-				left = 0 + unit
-			}
-
-			// Set distance from top
-			if (parentIsBody) {
-				top = scrollY + unit
-			} else {
-				top = 0 + unit
-			}
-
-			// Set width from parent
-			if (parentIsBody) {
-				width = '100%'
-			} else {
-				width = domRect.width + unit
-			}
-
-			// Set height from parent
-			if (parentIsBody) {
-				height = '100vh'
-			} else {
-				height = domRect.height + unit
-			}
-
-			setStyle(node, 'left', left)
-			setStyle(node, 'top', top)
-			setStyle(node, 'width', width)
-			setStyle(node, 'height', height)
-		})(parent.getBoundingClientRect())
-	}
-}
-
-declare global {
-	interface Window {
-		attachEvent: Function
-	}
-	interface Node {
-		attachEvent: Function
-	}
-}
-
-/**
- * Invoke On
- *
- * @param {Window | Node} dispatcher The node in which the given events
- * are captured.
- * @param {() => void} handler A function to be invoked when one of the given
- * events are captured.
- * @param {keyof WindowEventMap} events		An array of event names.
- *
- * @example invokeOn(window, () => alert('Scroll'), ['scroll'])
- */
-export const invokeOn = (
-	dispatcher: Window | Node,
-	handler: () => void,
-	events: Array<keyof WindowEventMap>
-): void =>
-	(([addEventListenerLegacy, addEventListener]) => {
-		events.forEach(event => {
-			if (addEventListenerLegacy) {
-				addEventListenerLegacy(`on${event}`, handler)
-			} else {
-				addEventListener(event, handler, true)
-			}
-		})
-	})([dispatcher.attachEvent, dispatcher.addEventListener])
-
-/**
- * Is Element or Node
- *
- * @param {any} value A value of any type.
- * @returns {boolean}
- */
-export const isElementOrNode = (value: any): boolean => {
-	return value instanceof Element || value instanceof Node
-}
-
-/**
- * Is Function
- *
- * @param {any} value A value of any type.
- * @returns {boolean}
- */
-export const isFunction = (value: any): boolean => {
-	return value && {}.toString.call(value) === '[object Function]'
-}
-
-/**
- * Set Style
- *
- * @param {HTMLElement} node An HTML element.
- * @param {CSSProperty} prop A CSS property.
- * @param {string} value A CSS value.
- *
- * @description Sets a CSS declaration on an HTML element.
- *
- * @example setStyle(divElement, 'color', '#FF0000')
- */
-export const setStyle = (
-	node: HTMLElement,
-	prop: CSSProperty,
-	value: any
-): void => {
-	node.style[prop as any] = value
-}
+export const mk = (tag: HTMLElementTag) => document.createElement(tag)
 
-/**
- * Set Attribute
- *
- * @param {Element} node An element.
- * @param {string} key The attribute name.
- * @param {string} value The attribute value.
- */
-export const setAttribute = (node: Element, key: string, value: string) => {
-	node.setAttribute(key, value)
+export function addClass(node: HTMLElement, ...classes: string[]): void
+{
+    node.classList.add(...classes)
 }
 
-/**
- * Remove Attribute
- *
- * @param {Element} node An element.
- * @param {string} key The attribute name.
- */
-export const removeAttribute = (node: Element, key: string) => {
-	node.removeAttribute(key)
+export function setAttr(node: HTMLElement, attribute: string, value: string): void
+{
+    node.setAttribute(attribute, value)
 }

package/update-all.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+yarn remove @types/jest @types/jsdom autoprefixer cssnano jest jsdom jest-environment-jsdom postcss sass ts-jest ts-node typedoc typescript vite
+yarn add -D @types/jest @types/jsdom autoprefixer cssnano jest jsdom jest-environment-jsdom postcss sass ts-jest ts-node typedoc typescript vite

package/vite.iife.config.js

@@ -11,34 +11,62 @@ export default defineConfig({
 		},
 		outDir: 'dist/iife',
 		cssCodeSplit: true,
-		assetsInlineLimit: Number.MAX_SAFE_INTEGER,
-		rollupOptions: {
-			output: {
-				inlineDynamicImports: false,
-			},
-		},
 		minify: 'terser',
 		terserOptions: {
-			toplevel: true,
-			ecma: '2015',
+			parse: {
+				bare_returns: true,
+			},
+			compress: {
+				keep_fargs: false,
+				keep_fnames: false,
+				keep_classnames: false,
+				module: true,
+				passes: 3,
+				toplevel: true,
+				unsafe_arrows: true,
+			},
 			mangle: {
+				toplevel: true,
+				// Reserved class names
+				reserved: [],
 				properties: {
 					reserved: [
-						'NanoSplash',
-						'configure',
+						'ns',
+						'getId',
+						'getText',
+						'setText',
+						'getImgSrc',
+						'setImgSrc',
+						'moveTo',
+						'delete',
+						'img',
 						'show',
-						'hide',
-						'during',
 						'inside',
-						'Window',
-						'window',
-						'splash',
-						'install',
+						'remove',
+						'progress',
+						'while',
+						'delete',
+						'hideAll',
+						'hide',
 					],
-				},
+				}
+			},
+			format: {
+				// wrap_iife: true
 			},
+			sourceMap: {
+				// source map options
+			},
+			ecma: 2015, // specify one of: 5, 2015, 2016, etc.
+			keep_classnames: false,
+			keep_fnames: false,
+			ie8: false,
+			module: true,
+			nameCache: null, // or specify a name cache object
+			safari10: false,
+			toplevel: true,
 		},
-		keep_classnames: true,
+		// keep_classnames: false,
 		manifest: true,
 	},
 })

package/vite.mod.config.js

@@ -4,33 +4,69 @@ export default defineConfig({
 	mode: 'production',
 	build: {
 		lib: {
-			entry: 'src/Nanosplash.ts',
+			entry: 'src/Core/Nanosplash.ts',
 			name: 'Nanosplash',
 			fileName: 'nanosplash',
 			formats: ['es', 'cjs'],
 		},
 		outDir: 'dist/module',
+		cssCodeSplit: true,
 		minify: 'terser',
 		terserOptions: {
-			toplevel: true,
-			ecma: '2015',
+			parse: {
+				bare_returns: true,
+			},
+			compress: {
+				keep_fargs: false,
+				keep_fnames: false,
+				keep_classnames: false,
+				module: true,
+				passes: 3,
+				toplevel: true,
+				unsafe_arrows: true,
+			},
 			mangle: {
+				toplevel: true,
+				// Reserved class names
+				reserved: [],
 				properties: {
 					reserved: [
-						'NanoSplash',
-						'configure',
+						'ns',
+						'getId',
+						'getText',
+						'setText',
+						'getImgSrc',
+						'setImgSrc',
+						'moveTo',
+						'delete',
+						'img',
 						'show',
-						'hide',
-						'during',
 						'inside',
-						'window',
-						'install',
-						'loading',
+						'remove',
+						'progress',
+						'while',
+						'delete',
+						'hideAll',
+						'hide',
 					],
-				},
+				}
+			},
+			format: {
+				// wrap_iife: true
 			},
+			sourceMap: {
+				// source map options
+			},
+			ecma: 2015, // specify one of: 5, 2015, 2016, etc.
+			keep_classnames: false,
+			keep_fnames: false,
+			ie8: false,
+			module: true,
+			nameCache: null, // or specify a name cache object
+			safari10: false,
+			toplevel: true,
 		},
-		keep_classnames: true,
+		// keep_classnames: false,
 		manifest: true,
 	},
 })

package/vite.site.config.js

@@ -1,10 +1,7 @@
-import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
-import { viteSingleFile } from 'vite-plugin-singlefile'
 
 export default defineConfig({
 	mode: 'production',
-	plugins: [vue(), viteSingleFile()],
 	build: {
 		lib: {
 			entry: 'index.html',

package/dist/module/style.css

@@ -1 +0,0 @@
-@-webkit-keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.1)}}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.1)}}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.nanosplash-container{align-items:center;border-radius:inherit;flex-direction:column;justify-content:center;overflow:inherit;position:absolute;z-index:1}.nanosplash-container[hidden=true]{display:none}.nanosplash-container:not([hidden=true]){display:flex}.nanosplash-container[data-blur=none]:not([hidden=true])~*{filter:blur(0)}.nanosplash-container[data-blur=light]:not([hidden=true])~*{filter:blur(2px)}.nanosplash-container[data-blur=medium]:not([hidden=true])~*{filter:blur(4px)}.nanosplash-container[data-blur=heavy]:not([hidden=true])~*{filter:blur(10px)}.nanosplash-container .nanosplash-text{text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;-webkit-font-smoothing:antialiased;text-shadow:0 0 2px rgba(0,0,0,.2)}.nanosplash-container img.nanosplash-img{margin-bottom:40px}.nanosplash-container[data-splash-animation=pulse]>img{-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:pulse;animation-name:pulse}.nanosplash-container[data-splash-animation=spin]>img{-webkit-animation-duration:.7s;animation-duration:.7s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:spin;animation-name:spin;-webkit-animation-timing-function:linear;animation-timing-function:linear}body>.nanosplash-container:not([hidden=true]){height:100vh;width:100%}

package/docs/typedoc/classes/Nanosplash.Nanosplash-1.html

@@ -1,56 +0,0 @@
-<!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/Nanosplash.html">Nanosplash</a></li><li><a href="Nanosplash.Nanosplash-1.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">
-<p>Nanosplash</p>
-</div><dl class="tsd-comment-tags"><dt>author</dt><dd><p>Isak K. Hauge</p>
-</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="Nanosplash.Nanosplash-1.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="Nanosplash.Nanosplash-1.html#configure" class="tsd-kind-icon">configure</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Nanosplash.Nanosplash-1.html#hide" class="tsd-kind-icon">hide</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Nanosplash.Nanosplash-1.html#install" class="tsd-kind-icon">install</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Nanosplash.Nanosplash-1.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="Nanosplash.Nanosplash-1.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/Nanosplash.ts#L60">Nanosplash.ts:60</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
-<p>Constructor</p>
-</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>
-</code></pre>
-</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>
-</code></pre>
-</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">
-<p>The configuration object.</p>
-</div></div></li></ul><h4 class="tsd-returns-title">Returns <a href="Nanosplash.Nanosplash-1.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="Nanosplash.Nanosplash-1.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/Nanosplash.ts#L139">Nanosplash.ts:139</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
-<p>Configure</p>
-</div><dl class="tsd-comment-tags"><dt>description</dt><dd><p>Mutates the existing configuration and returns the updated
-instance.</p>
-</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>
-</code></pre>
-</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>
-</code></pre>
-</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">
-<p>The config object.</p>
-</div></div></li></ul><h4 class="tsd-returns-title">Returns <a href="Nanosplash.Nanosplash-1.html" class="tsd-signature-type" data-tsd-kind="Class">Nanosplash</a></h4><div><p>The updated instance.</p>
-</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/Nanosplash.ts#L275">Nanosplash.ts:275</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
-<p>Hide</p>
-</div><dl class="tsd-comment-tags"><dt>description</dt><dd><p>Hides the loading screen and moves to its default destination.
-If no custom default destination is defined, it will move to the document
-body.</p>
-</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>
-</code></pre>
-</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/Nanosplash.ts#L111">Nanosplash.ts:111</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
-<p>Install</p>
-</div><dl class="tsd-comment-tags"><dt>description</dt><dd><p>Assigns itself to the Window object and sets essential event
-listeners that responds to changes in the browser. The instance is
-globally accessible through the property &quot;loading&quot;.</p>
-</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>
-</code></pre>
-</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/Nanosplash.ts#L235">Nanosplash.ts:235</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
-<p>Show</p>
-</div><dl class="tsd-comment-tags"><dt>description</dt><dd><p>Shows the loading screen. Invoking the inside function will
-display the loading screen within the constraints of the defined
-destination.</p>
-<p>Basic usage.</p>
-</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>
-</code></pre>
-<p>Display Nanosplash inside other DOM elements.</p>
-</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>
-</code></pre>
-<p>Display Nanosplash while an asynchronous task is resolving.</p>
-</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>
-</code></pre>
-</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">
-<p>The text that will be shown in the
-loading screen. If undefined, Nanosplash will use the default text.</p>
-</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
-visibility and destination of the loading screen.</p>
-</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="current tsd-kind-module"><a href="../modules/Nanosplash.html">Nanosplash</a></li><li class=" 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="Nanosplash.Nanosplash-1.html" class="tsd-kind-icon">Nanosplash</a><ul><li class="tsd-kind-constructor tsd-parent-kind-class"><a href="Nanosplash.Nanosplash-1.html#constructor" class="tsd-kind-icon">constructor</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Nanosplash.Nanosplash-1.html#configure" class="tsd-kind-icon">configure</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Nanosplash.Nanosplash-1.html#hide" class="tsd-kind-icon">hide</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Nanosplash.Nanosplash-1.html#install" class="tsd-kind-icon">install</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Nanosplash.Nanosplash-1.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>