nanosplash 3.0.1 → 3.0.2

package/src/ts/core/Service.ts

@@ -1,12 +1,17 @@
-// @ts-strict
-
 import { version } from '../../../package.json'
-import '../../sass/ns.sass'
 
-import { NSFinder, GUIDString, Reference } from '../types/Types'
-import { cleanNSParentOf, getRecycledNS, move, elementFrom } from './Dom'
+import { Reference, GUIDString } from '../types/Types'
+import {
+	getRecycledSplash,
+	move,
+	elementFrom,
+	render,
+	removeNSHostClass,
+} from './DomUtilities'
 import { ServiceInterface } from './ServiceInterface'
 import { Splash } from './Splash'
+import css from '../../style/ns.sass?inline'
+import { SplashQueue } from './SplashQueue'
 
 /**
  * # Service
@@ -38,7 +43,7 @@ export class Service implements ServiceInterface {
 	/**
 	 * @inheritdoc
 	 */
-	public readonly nsStack: Splash[]
+	public readonly nsQueue: SplashQueue
 
 	/**
 	 * # Constructor
@@ -47,29 +52,17 @@ export class Service implements ServiceInterface {
 	 */
 	private constructor() {
 		this.version = version
-		this.nsStack = []
+		this.nsQueue = new SplashQueue()
+		Service.addStyle()
 	}
 
-	/**
-	 * # Find Index
-	 * Find Nanosplash stack index by callback.
-	 * @param callback Callback function that returns a boolean.
-	 * @returns {number} Index of Nanosplash instance in the stack or -1.
-	 * @private
+	/**e
+	 * # Add Style
+	 * Add Nanosplash CSS to the DOM.
 	 */
-	private findIndex(callback: NSFinder): number | -1 {
-		return this.nsStack.findIndex(callback)
-	}
-
-	/**
-	 * # Find
-	 * Find Nanosplash in the stack by callback.
-	 * @param callback Callback function that returns a boolean.
-	 * @returns {Splash | undefined} Nanosplash instance or undefined
-	 * @private
-	 */
-	private find(callback: NSFinder): Splash | undefined {
-		return this.nsStack.find(callback)
+	private static addStyle(): void {
+		const style = render(`<style>${css}</style>`) as HTMLStyleElement
+		document.body.append(style)
 	}
 
 	/**
@@ -104,14 +97,10 @@ export class Service implements ServiceInterface {
 	 * Initialize and attach a Nanosplash Service instance to the Window object.
 	 */
 	public static start(): void {
-		Service.assignToWindow()
-		window.addEventListener('load', () => {
-			const nss = window[Service.WindowAccessorKey]
-			const nssAssigned = nss instanceof Service
-			if (!nssAssigned) {
-				Service.assignToWindow()
-			}
-		})
+		const nss = window[Service.WindowAccessorKey]
+		if (!nss) {
+			Service.assignToWindow()
+		}
 	}
 
 	/**
@@ -122,113 +111,100 @@ export class Service implements ServiceInterface {
 	 * @private
 	 */
 	private createNS(text?: string): Splash {
-		const ns = new Splash()
-		ns.setText(text || '')
-		this.nsStack.push(ns)
+		const ns = new Splash().setText(text || '')
+		this.nsQueue.enqueue(ns)
 		return ns
 	}
 
 	/**
-	 * # Clean And Remove
+	 * # Clean And Remove From DOM
 	 * Remove Nanosplash from DOM and clean its parent.
 	 * @param ns Nanosplash instance.
-	 * @returns {GUIDString} Nanosplash ID.
-	 * @private
-	 */
-	private cleanAndRemove(ns: Splash): GUIDString {
-		cleanNSParentOf(ns)
-		return ns.remove().getId()
-	}
-
-	/**
-	 * # Stack Delete
-	 * Remove Nanosplash instance from the stack.
-	 * @param ns Nanosplash instance.
-	 * @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
+	 * @returns True if Nanosplash was removed from DOM.
 	 * @private
 	 */
-	private stackDelete(ns: Splash): GUIDString | null {
-		let index = this.findIndex((o: Splash) => o.getId() === ns.getId())
-		if (index < 0) return null
-		this.nsStack.splice(index, 1)
-		return ns.getId()
+	private cleanAndRemoveFromDOM(ns: Splash | null): boolean {
+		if (ns) {
+			removeNSHostClass(ns.getElement()?.parentElement ?? null)
+			return ns.delete()
+		}
+		return false
 	}
 
 	/**
 	 * # Delete NS
 	 * Remove Nanosplash instance from both the stack and the
-	 * @param callback Callback function.
-	 * @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
+	 * @param guid Nanosplash ID.
+	 * @returns True if Nanosplash was removed from DOM.
 	 * @private
 	 */
-	private deleteNS(callback: NSFinder): GUIDString | null {
-		const ns = this.find(callback)
-		if (ns) {
-			this.cleanAndRemove(ns)
-			return this.stackDelete(ns)
-		}
-		return null
+	private deleteNS(guid: GUIDString): boolean {
+		return this.cleanAndRemoveFromDOM(this.nsQueue.delete(guid) ?? null)
 	}
 
 	/**
 	 * @inheritdoc
 	 */
-	public show(text?: string): GUIDString {
-		let ns = getRecycledNS(document.body)
-		if (!ns) {
-			ns = this.createNS()
-			move(ns.getNSElement(), document.body)
-		}
-		return ns.setText(text || '').getId()
+	public show(text?: string): GUIDString | null {
+		return this.showInside(document.body, text)
 	}
 
 	/**
 	 * @inheritdoc
 	 */
 	public showInside(ref: Reference, text?: string): GUIDString | null {
-		const destinationNode: Element | null = elementFrom(ref)
-		if (destinationNode) {
-			let ns = getRecycledNS(destinationNode)
-			if (!ns) {
-				ns = this.createNS()
-			}
-			move(ns.getNSElement(), <Element>destinationNode)
-			return ns.setText(text || '').getId()
+		try {
+			const destinationNode = elementFrom(ref) as Element
+			const ns = getRecycledSplash(destinationNode) ?? this.createNS()
+			move(ns.getElement() as Element, destinationNode)
+			const parsedText = text ? String(text) : ''
+			return ns.setText(parsedText).getId()
+		} catch (e) {
+			console.error(e)
+			return null
 		}
-
-		return null
 	}
 
 	/**
 	 * @inheritdoc
 	 */
 	public hide(): GUIDString | null {
-		const ns = this.nsStack.pop()
-		return ns ? this.cleanAndRemove(ns) : null
+		const ns = this.nsQueue.dequeue()
+		if (!ns) return null
+		this.cleanAndRemoveFromDOM(ns)
+		return ns.getId()
 	}
 
 	/**
 	 * @inheritdoc
 	 */
 	public hideAll(): void {
-		this.nsStack.forEach(this.cleanAndRemove)
-		this.nsStack.splice(0, this.nsStack.length)
+		let ns = this.nsQueue.dequeue()
+		while (ns) {
+			this.cleanAndRemoveFromDOM(ns)
+			ns = this.nsQueue.dequeue()
+		}
 	}
 
 	/**
 	 * @inheritdoc
 	 */
 	public hideId(id: GUIDString): GUIDString | null {
-		return this.deleteNS((ns: Splash) => ns.getId() === id)
+		return this.deleteNS(id) ? id : null
 	}
 
 	/**
 	 * @inheritdoc
 	 */
 	public hideInside(ref: Reference): GUIDString | null {
-		const node = elementFrom(ref)
-		const cb = (ns: Splash) => ns.getNSElement().parentElement === node
-		return node ? this.deleteNS(cb) : null
+		try {
+			const ns = getRecycledSplash(elementFrom(ref) as Element)
+			const guid = ns?.getId() ?? ''
+			return this.deleteNS(guid ?? '') ? guid : null
+		} catch (e) {
+			console.error(e)
+			return null
+		}
 	}
 }
 

package/src/ts/core/ServiceInterface.ts

@@ -1,7 +1,5 @@
-// @ts-strict
-
 import { GUIDString, Reference } from '../types/Types'
-import { Splash } from './Splash'
+import { SplashQueue } from './SplashQueue'
 
 export interface ServiceInterface {
 	/**
@@ -10,15 +8,15 @@ export interface ServiceInterface {
 	 * When a Nanosplash instance is removed, it's removed from the stack.
 	 * @see Splash
 	 */
-	readonly nsStack: Splash[]
+	readonly nsQueue: SplashQueue
 
 	/**
 	 * # Show
 	 * Present a Nanosplash in the browser window displaying the given text.
 	 * @param text Text to display.
-	 * @returns {GUIDString} Nanosplash ID.
+	 * @returns {GUIDString | null} Nanosplash ID.
 	 */
-	show(text?: string): GUIDString
+	show(text?: string): GUIDString | null
 
 	/**
 	 * # Show Inside
@@ -31,7 +29,7 @@ export interface ServiceInterface {
 
 	/**
 	 * # Hide
-	 * Hide the last created Nanosplash.
+	 * Hide the oldest Nanosplash.
 	 * @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
 	 */
 	hide(): GUIDString | null

package/src/ts/core/Splash.ts

@@ -1,7 +1,5 @@
-// @ts-strict
-
 import { GUIDString } from '../types/Types'
-import { createElement, showElement, hideElement } from './Dom'
+import { createElement, showElement, hideElement } from './DomUtilities'
 import { SplashInterface } from './SplashInterface'
 
 /**
@@ -28,13 +26,13 @@ export class Splash implements SplashInterface {
 	 * # ID
 	 * Each Nanosplash instance is given a unique GUID.
 	 */
-	private readonly id: GUIDString
+	private id: GUIDString | null
 
 	/**
 	 * # Element
 	 * The root element of the Nanosplash component.
 	 */
-	private element?: HTMLDivElement
+	private element: HTMLDivElement | null
 
 	/**
 	 * # Generate GUID
@@ -61,36 +59,33 @@ export class Splash implements SplashInterface {
 	/**
 	 * @inheritdoc
 	 */
-	public getNSContentElement(): HTMLDivElement {
-		return <HTMLDivElement>this.getNSElement().firstElementChild
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public getNSTextElement(): HTMLDivElement {
-		return <HTMLDivElement>this.getNSContentElement().firstElementChild
+	public getId(): GUIDString | null {
+		return this.id
 	}
 
 	/**
 	 * @inheritdoc
 	 */
-	public getId(): GUIDString {
-		return this.id
+	public getElement(): HTMLDivElement | null {
+		return <HTMLDivElement>this.element
 	}
 
 	/**
 	 * @inheritdoc
 	 */
-	public getNSElement(): HTMLDivElement {
-		return <HTMLDivElement>this.element
+	public getTextElement(): HTMLDivElement {
+		return (
+			<HTMLDivElement>(
+				this.getElement()?.firstElementChild?.firstElementChild
+			) ?? null
+		)
 	}
 
 	/**
 	 * @inheritdoc
 	 */
 	public setText(text: string): Splash {
-		this.getNSTextElement().innerText = text
+		this.getTextElement().innerText = text
 		text.length > 0 ? this.showText() : this.hideText()
 		return this
 	}
@@ -99,7 +94,7 @@ export class Splash implements SplashInterface {
 	 * @inheritdoc
 	 */
 	public showText(): Splash {
-		showElement(this.getNSTextElement())
+		showElement(this.getTextElement())
 		return this
 	}
 
@@ -107,18 +102,20 @@ export class Splash implements SplashInterface {
 	 * @inheritdoc
 	 */
 	public hideText(): Splash {
-		hideElement(this.getNSTextElement())
+		hideElement(this.getTextElement())
 		return this
 	}
 
 	/**
 	 * @inheritdoc
 	 */
-	public remove(): Splash {
-		if (this.element) {
-			this.element.parentElement?.removeChild(this.element)
-			delete this.element
+	public delete(): boolean {
+		this.id = null
+		if (this.element !== null) {
+			this.element.innerHTML = ''
+			this.element.remove()
+			this.element = null
 		}
-		return this
+		return this.element === null
 	}
 }

package/src/ts/core/SplashInterface.ts

@@ -1,32 +1,24 @@
-// @ts-strict
-
 import { GUIDString } from '../types/Types'
 import { Splash } from './Splash'
 
 export interface SplashInterface {
-	/**
-	 * # Get NS Content Element
-	 * Returns the content element of the Nanosplash.
-	 */
-	getNSContentElement(): HTMLDivElement
-
-	/**
-	 * # Get NS Text Element
-	 * Returns the text element of the Nanosplash.
-	 */
-	getNSTextElement(): HTMLDivElement
-
 	/**
 	 * # Get ID
 	 * Return Nanosplash instance GUID.
 	 */
-	getId(): GUIDString
+	getId(): GUIDString | null
 
 	/**
-	 * # Get NS Element
+	 * # Get Element
 	 * Return Nanosplash instance HTMLDivElement.
 	 */
-	getNSElement(): HTMLDivElement
+	getElement(): HTMLDivElement | null
+
+	/**
+	 * # Get Text Element
+	 * Returns the text element of the Nanosplash.
+	 */
+	getTextElement(): HTMLDivElement | null
 
 	/**
 	 * # Set Text
@@ -47,8 +39,8 @@ export interface SplashInterface {
 	hideText(): Splash
 
 	/**
-	 * # Remove
-	 * Delete all
+	 * # Delete
+	 * Remove from DOM and delete internal data.
 	 */
-	remove(): Splash
+	delete(): boolean
 }

package/src/ts/core/SplashQueue.ts

@@ -0,0 +1,49 @@
+import { GUIDString } from '../types/Types'
+import { Splash } from './Splash'
+
+export class SplashQueue {
+	public queue: Array<Splash>
+
+	constructor() {
+		this.queue = []
+	}
+
+	/**
+	 * # Enqueue
+	 * Add a new item to the queue.
+	 * @param item The item to add to the queue.
+	 */
+	public enqueue(item: Splash): SplashQueue {
+		this.queue.push(item)
+		return this
+	}
+
+	/**
+	 * # Dequeue
+	 * Remove the first item from the queue.
+	 * @returns The first item from the queue.
+	 */
+	public dequeue(): Splash | undefined {
+		return this.queue.shift()
+	}
+
+	/**
+	 * # Get
+	 * @param id The GUID of the Nanosplash to get.
+	 * @returns The Nanosplash with the given GUID.
+	 */
+	public get(id: GUIDString): Splash | undefined {
+		return this.queue.find(item => item.getId() === id)
+	}
+
+	/**
+	 * # Delete
+	 * @param id The GUID of the Nanosplash to delete.
+	 * @returns The deleted Nanosplash.
+	 */
+	public delete(id: GUIDString): Splash | undefined {
+		const index = this.queue.findIndex(item => item.getId() === id)
+		if (index === -1) return undefined
+		return this.queue.splice(index, 1)[0]
+	}
+}

package/src/ts/types/Types.ts

@@ -1,12 +1,3 @@
-import { Splash } from '../core/Splash'
-
 export type GUIDString = string
 export type CSSSelector = string
-export type FindCallback<T> = (item: T, index: number) => boolean
-export type NSFinder = FindCallback<Splash>
 export type Reference = CSSSelector | Element
-
-export enum ClassListAction {
-	Add = 'add',
-	Remove = 'remove',
-}

package/tests/{Dom.spec.ts → DomUtilities.spec.ts}

@@ -5,19 +5,16 @@ import { beforeEach, describe, expect, it } from 'vitest'
 import {
 	createElement,
 	injectAsFirstChild,
-	prepareParentOf,
-	cleanNSParentOf,
 	showElement,
 	hideElement,
-	setNSHostClass,
 	move,
 	elementFrom,
-	elementIsNS,
-	getRecycledNS,
-} from '../src/ts/core/Dom'
+	getRecycledSplash,
+	addNSHostClass,
+	removeNSHostClass,
+} from '../src/ts/core/DomUtilities'
 import { Splash } from '../src/ts/core/Splash'
 import { Service } from '../src/ts/core/Service'
-import { ClassListAction } from '../src/ts/types/Types'
 
 describe('DOMUtilities', () => {
 	// Reset the DOM before each test
@@ -56,17 +53,17 @@ describe('DOMUtilities', () => {
 	it('Should be able to prepare the parent of a Nanosplash component', () => {
 		const ns = new Splash()
 		const parent = document.createElement('div')
-		parent.appendChild(ns.getNSElement())
-		prepareParentOf(ns)
+		parent.appendChild(ns.getElement() as Element)
+		addNSHostClass(parent)
 		expect(parent.classList.contains(Splash.NSHostClass)).toBe(true)
 	})
 
 	it('Should be able to clean the parent of a Nanosplash component', () => {
 		const ns = new Splash()
 		const parent = document.createElement('div')
-		parent.appendChild(ns.getNSElement())
+		parent.appendChild(ns.getElement() as Element)
 		parent.classList.add(Splash.NSClass)
-		cleanNSParentOf(ns)
+		removeNSHostClass(parent)
 		expect(parent.classList.contains(Splash.NSHostClass)).toBe(false)
 	})
 
@@ -82,19 +79,12 @@ describe('DOMUtilities', () => {
 		expect(elementFrom(element)).toBe(element)
 	})
 
-	it('Should be able to check if an element is a Nanosplash element', () => {
-		const elementA = new Splash().getNSElement()
-		const elementB = document.createElement('div')
-		expect(elementIsNS(elementA)).toBe(true)
-		expect(elementIsNS(elementB)).toBe(false)
-	})
-
 	it('Should be able to recycle a Nanosplash component', () => {
 		const destination = document.createElement('div')
 		document.body.appendChild(destination)
 		const nss = Service.getInstance()
 		const id = nss.showInside(destination, 'Hello World!')
-		const recycled = getRecycledNS(destination)
+		const recycled = getRecycledSplash(destination)
 		expect(recycled?.getId()).toBe(id)
 	})
 
@@ -112,16 +102,16 @@ describe('DOMUtilities', () => {
 
 	it('Should be able to alter the class of a Nanosplash host', () => {
 		const div = document.createElement('div')
-		setNSHostClass(div, ClassListAction.Add)
+		addNSHostClass(div)
 		expect(div.classList.contains(Splash.NSHostClass)).toBe(true)
-		setNSHostClass(div, ClassListAction.Remove)
+		removeNSHostClass(div)
 		expect(div.classList.contains(Splash.NSHostClass)).toBe(false)
 	})
 
 	it('Should be able to move a Nanosplash component', () => {
 		const ns = new Splash()
 		const destination = document.createElement('div')
-		move(ns.getNSElement(), destination)
-		expect(destination.firstElementChild).toBe(ns.getNSElement())
+		move(ns.getElement() as Element, destination)
+		expect(destination.firstElementChild).toBe(ns.getElement())
 	})
 })

package/tests/Guid.spec.ts

@@ -2,6 +2,8 @@ import { beforeEach, describe, expect, it } from 'vitest'
 import { JSDOM } from 'jsdom'
 import { Splash } from '../src/ts/core/Splash'
 
+const rgx = /^[{]?[0-9a-fA-F]{8}-([0-9a-fA-F]{4}-){3}[0-9a-fA-F]{12}[}]?$/
+
 describe('Guid', () => {
 	// Reset the DOM before each test
 	beforeEach(() => {
@@ -13,9 +15,7 @@ describe('Guid', () => {
 	})
 
 	it('Should generate a valid GUID', () => {
-		const guidRegex =
-			/^[{]?[0-9a-fA-F]{8}-([0-9a-fA-F]{4}-){3}[0-9a-fA-F]{12}[}]?$/
 		const value = new Splash().getId()
-		expect(value).toMatch(guidRegex)
+		expect(value).toMatch(rgx)
 	})
 })