nanosplash 2.2.4 → 2.3.0

package/src/style.sass

@@ -1,68 +1,43 @@
-// Keyframe animations:
-@keyframes pulse
-    from
-        transform: scale(1)
-    to
-        transform: scale(1.1)
+$z-index-regular: 1
+$z-index-fullscreen: 2
+$bg-color: rgba(White, 0.8)
 
-@keyframes spin
-    from
-        transform: rotate(0deg)
-    to
-        transform: rotate(360deg)
+%blur
+  filter: blur(5px)
+  overflow: hidden
 
-.nanosplash-container
-    // Base of container
-    position: absolute
-    flex-direction: column
-    justify-content: center
-    align-items: center
-    z-index: 1
-    border-radius: inherit
-    overflow: inherit
+.ns-wrapper
+  position: relative
 
-    // When container is hidden
-    &[hidden="true"]
-        display: none
-    // When container is visible
-    &:not([hidden="true"])
-        display: flex
+.ns-fs
+  top: 0
+  left: 0
+  position: fixed
+  min-width: 100%
+  min-height: 100vh
+  z-index: $z-index-fullscreen
 
-    // Standardized blur modes:
-    &[data-blur="none"]:not([hidden="true"]) ~ *
-        filter: blur(0)
-    &[data-blur="light"]:not([hidden="true"]) ~ *
-        filter: blur(2px)
-    &[data-blur="medium"]:not([hidden="true"]) ~ *
-        filter: blur(4px)
-    &[data-blur="heavy"]:not([hidden="true"]) ~ *
-        filter: blur(10px)
+// Fullscreen content blur
+body .ns-fs ~ *, .ns-blur
+  @extend %blur
 
-    // Loading text
-    .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, 0.2)
-    
-    // Splash image
-    img.nanosplash-img
-        margin-bottom: 40px
+.ns-window
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  display: flex
+  position: absolute
+  align-items: center
+  justify-content: center
+  z-index: $z-index-regular
+  background-color: $bg-color
 
-    // Standardized splash image animations:
-    &[data-splash-animation="pulse"] > img
-        animation-name: pulse
-        animation-duration: 300ms
-        animation-direction: alternate
-        animation-iteration-count: infinite
-    &[data-splash-animation="spin"] > img
-        animation-name: spin
-        animation-duration: 700ms
-        animation-iteration-count: infinite
-        animation-timing-function: linear
+.ns-img
+  max-width: 9rem
+  max-height: 9rem
+  margin-bottom: 1rem
 
-    // Style exception when container is the direct child of body
-    body > &:not([hidden="true"])
-        height: 100vh
-        width: 100%
+.ns-text
+  color: #333
+  text-align: center

package/src/types.d.ts

@@ -1,205 +1,50 @@
-declare module 'nanosplash' {
-	/**
-	 * Nanosplash
-	 *
-	 * @author Isak K. Hauge
-	 */
-	class Nanosplash {
-		/**
-		 * Constructor
-		 *
-		 * @public
-		 * @constructor
-		 * @param {Config | undefined} config The configuration object.
-		 *
-		 * @example
-		 * ```js
-		 * // Instantiatie without config object.
-		 * new Nanosplash()
-		 * ```
-		 *
-		 * @example
-		 * ```js
-		 * // Instantiate with config object.
-		 * new Nanosplash(config)
-		 * ```
-		 */
-		constructor(config?: Config)
-
-		/**
-		 * Configure
-		 *
-		 * @param {Config} config The config object.
-		 * @return {Nanosplash} The updated instance.
-		 *
-		 * @description Mutates the existing configuration and returns the updated
-		 * instance.
-		 *
-		 * @example
-		 * ```js
-		 * nanosplash.configure(config)
-		 * ```
-		 *
-		 * @example
-		 * ```js
-		 * window.loading.configure(config).show(text)
-		 * ```
-		 */
-		configure(config: Config): Nanosplash
-
-		/**
-		 * Show
-		 *
-		 * @param {string | undefined} text The text that will be shown in the
-		 * loading screen. If undefined, Nanosplash will use the default text.
-		 * @return {DisplayController} An object with a function that controls the
-		 * visibility and destination of the loading screen.
-		 *
-		 * @description Shows the loading screen. Invoking the inside function will
-		 * display the loading screen within the constraints of the defined
-		 * destination.
-		 *
-		 * Basic usage.
-		 * @example
-		 * ```js
-		 * // Basic usage.
-		 * loading.show(text)
-		 * ```
-		 *
-		 * Display Nanosplash inside other DOM elements.
-		 * @example
-		 * ```js
-		 * // Show loading screen within another element using CSS selector.
-		 * loading.show(text).inside('#my-element')
-		 * // Use DOM element reference.
-		 * loading.show(text).inside(document.getElementById(id))
-		 * // Use function that returns a DOM element reference.
-		 * loading.show(text).inside(() => getDomReference())
-		 * ```
-		 *
-		 * Display Nanosplash while an asynchronous task is resolving.
-		 * @example
-		 * ```js
-		 * // Define an asynchronous task.
-		 * const task = async () => await getDataFromApi()
-		 * // Show loading screen while the task is running.
-		 * loading.show(text).during(task)
-		 * loading.show(text).inside('#my-element').during(task)
-		 * ```
-		 */
-		show(text?: string): DisplayController
-
-		/**
-		 * Hide
-		 *
-		 * @description Hides the loading screen and moves to its default destination.
-		 * If no custom default destination is defined, it will move to the document
-		 * body.
-		 *
-		 * @example
-		 * ```js
-		 * // Basic usage
-		 * loading.hide()
-		 * // Use with async functions
-		 * loading.show('Loading ...')
-		 * await fetchStuffFromApi()
-		 * loading.hide()
-		 * ```
-		 */
-		hide(): void
-
-		/**
-		 * Install
-		 *
-		 * @description 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 "loading".
-		 *
-		 * @example
-		 * ```js
-		 * // Install
-		 * (new Nanosplash()).install()
-		 *
-		 * // Access the instance globally
-		 * loading.show('Some text')
-		 * ```
-		 */
-		public install(): void
-	}
-
-	type SplashAnimation = 'none' | 'pulse' | 'spin'
-
-	type DefaultOptions = {
-		destination?: Destination
-		text?: string
-	}
-
-	type TextOptions = {
-		family?: string
-		weight?: string
-		color?: string
-		size?: string
-	}
-
-	type SplashOptions = {
-		src?: string
-		width?: string
-		height?: string
-		animation?: SplashAnimation
-	}
-
-	type BlurMode = 'none' | 'light' | 'medium' | 'heavy'
+import {Nanosplash} from "./Core/Nanosplash";
+import {ShowInterface} from "./Interfaces/ShowInterface";
+import {InsideInterface} from "./Interfaces/InsideInterface";
+import {SplashInstance} from "./Core/SplashInstance";
+import {ContextualAPIInterface} from "./Interfaces/ContextualAPIInterface";
 
-	type BackgroundOptions = {
-		color?: string
-		blur?: BlurMode
-	}
-
-	type Destination = Node | Element | DestinationCallback | string
-
-	type DestinationCallback = () => Element
-
-	type Config = {
-		default?: DefaultOptions
-		text?: TextOptions
-		splash?: SplashOptions
-		background?: BackgroundOptions
-	}
-
-	type TargetNodeController<T> = (target: T, asFirstChild?: boolean) => void
-	type TargetNodeObject<T> = {
-		[key: string]: TargetNodeController<T>
-	}
-	type TaskController<T> = (task: Promise<T>) => Promise<void>
-
-	type DisplayController = {
-		during: (task: Promise<any>) => Promise<void>
-		inside: (destination: Destination) => {
-			during: (task: Promise<any>) => Promise<void>
-		}
-	}
-
-	/**
-	 * @internal
-	 */
-	type MakeOptions = {
-		id?: string
-		className?: string
-		attributes?: { key: string; value: string | null }[]
-		eventListeners?: {
-			event: keyof HTMLElementEventMap
-			handler: EventListener
-		}[]
-		content?: Node | Element | HTMLElement | string
+declare global {
+	interface Window {
+		ns: Nanosplash
 	}
+}
 
-	/**
-	 * @internal
-	 */
-	type HTMLElementTag = keyof HTMLElementTagNameMap
+type Destination = Node | string
+type SplashJob = [Promise<any>, string]
+
+/**
+ * @internal
+ */
+export type HTMLElementTag = keyof HTMLElementTagNameMap
+
+/**
+ * @internal
+ */
+type CSSProperty = keyof CSSStyleDeclaration
+
+type ShowFunction = (text: string) => ContextualAPIInterface
+type ProgressFunction = (...[]: SplashJob[]) => ContextualAPIInterface
+type WhileFunction = (asyncTask: Promise<any>) => ShowInterface
+type StrategyObject = {
+    show: ShowFunction,
+    progress: ProgressFunction,
+    while: WhileFunction
+}
+type ImgFunction = (src: string) => StrategyObject
+type InsideFunction = (selector: string) => ContextualAPIInterface
+type ContextualAPIObject = {
+	getId: () => string,
+	inside?: InsideFunction,
+	remove: () => void
+	moveTo: (selector: string) => void,
+	getText: () => string,
+	setText: (text: string) => SplashInstance,
+	getImgSrc: () => string | undefined,
+	setImgSrc: (src?: string) => SplashInstance
+}
 
-	/**
-	 * @internal
-	 */
-	type CSSProperty = keyof CSSStyleDeclaration
+declare module 'nanosplash' {
+	class Nanosplash {}
+	class SplashInstance {}
 }

package/src/utilities/dom.spec.ts

@@ -0,0 +1,70 @@
+import {addClass, get, mk, move, setAttr} from "./dom";
+
+const resetDOM = () => document.body.innerHTML = ''
+
+test('Single DOM get function', () => {
+	const element = document.createElement('div')
+	element.id = 'a'
+	element.classList.add('b')
+	element.setAttribute('data-ref', 'c')
+	document.body.append(element)
+
+	const selector = 'div#a.b[data-ref="c"]'
+	const refElement = get<HTMLDivElement>(selector)
+
+	expect(refElement?.outerHTML).toBe(element.outerHTML)
+
+	resetDOM()
+})
+
+test('Move Element from origin to destination', () => {
+	const html = `
+		<div id="main">
+			<div id="a">
+			    <div id="b">
+			        <div id="c">
+		                <div id="first"></div>
+                    </div>
+                </div>
+            </div>
+		</div>
+	`
+	document.body.innerHTML = html
+
+    const main = get('#main') as HTMLDivElement
+    const first = get('#first') as HTMLDivElement
+    const b = get('#b') as HTMLDivElement
+    const c = get('#c') as HTMLDivElement
+
+    move(b, main)
+    move(c, main)
+    move(first, main, true)
+
+    const ids = Array.from(main.children).map((v => v.id))
+
+	expect(ids.join(',')).toBe('first,a,b,c')
+
+	resetDOM()
+})
+
+test('Make HTML Element', () => {
+	document.body.appendChild(mk('span'))
+	const span = document.body.children.item(0) as Node
+	expect(span instanceof HTMLSpanElement).toBe(true)
+	resetDOM()
+})
+
+test('Add CSS classes', () => {
+	const div = mk('div')
+	addClass(div, 'ns-1', 'ns-2', 'ns-3')
+	expect(div.classList.toString()).toBe('ns-1 ns-2 ns-3')
+	resetDOM()
+})
+
+test('Set Node attribute', () => {
+	const div = mk('div')
+	const attr = {name: 'data-test', value: 'success'}
+	setAttr(div, attr.name, attr.value)
+	expect(div.getAttribute(attr.name)).toBe(attr.value)
+	resetDOM()
+})

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)
 }