nanosplash 3.0.7 → 3.0.9

package/src/ts/core/Service.ts

@@ -1,211 +0,0 @@
-import { version } from '../../../package.json'
-
-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
- * A service class that handles Nanosplash instances.
- * It's a singleton class and its instance resides in the Window object and
- * serves the public API of the Nanosplash library.
- * @see Splash
- * @author Isak K. Hauge <isakhauge@icloud.com>
- */
-export class Service implements ServiceInterface {
-	/**
-	 * # Window Accessor Key
-	 * Key to access NanosplashService instance in the Window object.
-	 */
-	public static readonly WindowAccessorKey = 'ns'
-
-	/**
-	 * # Instance
-	 * Singleton instance of NanosplashService.
-	 * @private
-	 */
-	private static instance: Service
-
-	/**
-	 * # Version
-	 */
-	public readonly version: string
-
-	/**
-	 * @inheritdoc
-	 */
-	public readonly nsQueue: SplashQueue
-
-	/**
-	 * # Constructor
-	 * Private constructor to prevent multiple instances.
-	 * @private
-	 */
-	private constructor() {
-		this.version = version
-		this.nsQueue = new SplashQueue()
-		Service.addStyle()
-	}
-
-	/**e
-	 * # Add Style
-	 * Add Nanosplash CSS to the DOM.
-	 */
-	private static addStyle(): void {
-		const style = render(`<style>${css}</style>`) as HTMLStyleElement
-		document.body.append(style)
-	}
-
-	/**
-	 * # Get Instance
-	 * Singleton instance accessor
-	 * @returns {Service} NanosplashService instance
-	 */
-	public static getInstance(): Service {
-		if (!Service.instance) {
-			Service.instance = new Service()
-		}
-		return Service.instance
-	}
-
-	/**
-	 * # Assign To Window
-	 * Assign a NanosplashService instance to the Window object.
-	 * The NanosplashService instance can be accessed in the window object
-	 * using the key window accessor key.
-	 * @see WindowAccessorKey
-	 * @private
-	 */
-	private static assignToWindow(): void {
-		Object.defineProperty(window, Service.WindowAccessorKey, {
-			value: Service.getInstance(),
-			writable: false,
-		})
-	}
-
-	/**
-	 * # Start
-	 * Initialize and attach a Nanosplash Service instance to the Window object.
-	 */
-	public static start(): void {
-		const nss = window[Service.WindowAccessorKey]
-		if (!nss) {
-			Service.assignToWindow()
-		}
-	}
-
-	/**
-	 * # Create Nanosplash
-	 * Return new Nanosplash instance and push it to the stack.
-	 * @param text Text to display.
-	 * @returns {Splash} Nanosplash instance.
-	 * @private
-	 */
-	private createNS(text?: string): Splash {
-		const ns = new Splash().setText(text || '')
-		this.nsQueue.enqueue(ns)
-		return ns
-	}
-
-	/**
-	 * # Clean And Remove From DOM
-	 * Remove Nanosplash from DOM and clean its parent.
-	 * @param ns Nanosplash instance.
-	 * @returns True if Nanosplash was removed from DOM.
-	 * @private
-	 */
-	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 guid Nanosplash ID.
-	 * @returns True if Nanosplash was removed from DOM.
-	 * @private
-	 */
-	private deleteNS(guid: GUIDString): boolean {
-		return this.cleanAndRemoveFromDOM(this.nsQueue.delete(guid) ?? null)
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public show(text?: string): GUIDString | null {
-		return this.showInside(document.body, text)
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public showInside(ref: Reference, text?: string): GUIDString | null {
-		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
-		}
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public hide(): GUIDString | null {
-		const ns = this.nsQueue.dequeue()
-		if (!ns) return null
-		this.cleanAndRemoveFromDOM(ns)
-		return ns.getId()
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public hideAll(): void {
-		let ns = this.nsQueue.dequeue()
-		while (ns) {
-			this.cleanAndRemoveFromDOM(ns)
-			ns = this.nsQueue.dequeue()
-		}
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public hideId(id: GUIDString): GUIDString | null {
-		return this.deleteNS(id) ? id : null
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public hideInside(ref: Reference): GUIDString | 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
-		}
-	}
-}
-
-export default { Service }

package/src/ts/core/ServiceInterface.ts

@@ -1,58 +0,0 @@
-import { GUIDString, Reference } from '../types/Types'
-import { SplashQueue } from './SplashQueue'
-
-export interface ServiceInterface {
-	/**
-	 * # Nanosplash Stack
-	 * For each Nanosplash instance created, it's pushed to the stack.
-	 * When a Nanosplash instance is removed, it's removed from the stack.
-	 * @see Splash
-	 */
-	readonly nsQueue: SplashQueue
-
-	/**
-	 * # Show
-	 * Present a Nanosplash in the browser window displaying the given text.
-	 * @param text Text to display.
-	 * @returns {GUIDString | null} Nanosplash ID.
-	 */
-	show(text?: string): GUIDString | null
-
-	/**
-	 * # Show Inside
-	 * Present a Nanosplash over the given element displaying the given text.
-	 * @param ref Reference an element.
-	 * @param text Text to display.
-	 * @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
-	 */
-	showInside(ref: Reference, text?: string): GUIDString | null
-
-	/**
-	 * # Hide
-	 * Hide the oldest Nanosplash.
-	 * @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
-	 */
-	hide(): GUIDString | null
-
-	/**
-	 * # Hide All
-	 * Hide all Nanosplashes.
-	 */
-	hideAll(): void
-
-	/**
-	 * # Hide ID
-	 * Hide Nanosplash by its ID.
-	 * @param id Nanosplash ID.
-	 * @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
-	 */
-	hideId(id: GUIDString): GUIDString | null
-
-	/**
-	 * # Hide Inside
-	 * Hide Nanosplash inside the given element if it exists.
-	 * @param ref Reference an element.
-	 * @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
-	 */
-	hideInside(ref: Reference): GUIDString | null
-}

package/src/ts/core/Splash.ts

@@ -1,121 +0,0 @@
-import { GUIDString } from '../types/Types'
-import { createElement, showElement, hideElement } from './DomUtilities'
-import { SplashInterface } from './SplashInterface'
-
-/**
- * # Splash
- * Small splash screen that can be used to indicate that a process
- * is running.
- * @author Isak K. Hauge <isakhauge@icloud.com>
- */
-export class Splash implements SplashInterface {
-	/**
-	 * # CSS Class Name
-	 * The main CSS class name of the root element of a Nanosplash component.
-	 */
-	public static readonly NSClass = 'ns'
-
-	/**
-	 * # Host CSS Class Name
-	 * The CSS class name of the host element of a Nanosplash component.
-	 * The host element is the element that the Nanosplash is attached to.
-	 */
-	public static readonly NSHostClass = 'nsh'
-
-	/**
-	 * # ID
-	 * Each Nanosplash instance is given a unique GUID.
-	 */
-	private id: GUIDString | null
-
-	/**
-	 * # Element
-	 * The root element of the Nanosplash component.
-	 */
-	private element: HTMLDivElement | null
-
-	/**
-	 * # Generate GUID
-	 * @returns {GUIDString} A GUID string.
-	 * @private
-	 */
-	private static generateGUID(): GUIDString {
-		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
-			const r = (Math.random() * 16) | 0
-			const v = c === 'x' ? r : (r & 0x3) | 0x8
-			return v.toString(16)
-		})
-	}
-
-	/**
-	 * # Constructor
-	 * Creates a new Nanosplash instance.
-	 */
-	public constructor() {
-		this.element = createElement()
-		this.element.id = this.id = Splash.generateGUID()
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public getId(): GUIDString | null {
-		return this.id
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public getElement(): HTMLDivElement | null {
-		return <HTMLDivElement>this.element
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public getTextElement(): HTMLDivElement {
-		return (
-			<HTMLDivElement>(
-				this.getElement()?.firstElementChild?.firstElementChild
-			) ?? null
-		)
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public setText(text: string): Splash {
-		this.getTextElement().innerText = text
-		text.length > 0 ? this.showText() : this.hideText()
-		return this
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public showText(): Splash {
-		showElement(this.getTextElement())
-		return this
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public hideText(): Splash {
-		hideElement(this.getTextElement())
-		return this
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	public delete(): boolean {
-		this.id = null
-		if (this.element !== null) {
-			this.element.innerHTML = ''
-			this.element.remove()
-			this.element = null
-		}
-		return this.element === null
-	}
-}

package/src/ts/core/SplashInterface.ts

@@ -1,46 +0,0 @@
-import { GUIDString } from '../types/Types'
-import { Splash } from './Splash'
-
-export interface SplashInterface {
-	/**
-	 * # Get ID
-	 * Return Nanosplash instance GUID.
-	 */
-	getId(): GUIDString | null
-
-	/**
-	 * # Get Element
-	 * Return Nanosplash instance HTMLDivElement.
-	 */
-	getElement(): HTMLDivElement | null
-
-	/**
-	 * # Get Text Element
-	 * Returns the text element of the Nanosplash.
-	 */
-	getTextElement(): HTMLDivElement | null
-
-	/**
-	 * # Set Text
-	 * @param text The text that will be visible inside the splash.
-	 */
-	setText(text: string): Splash
-
-	/**
-	 * # Show Text
-	 * Display text element.
-	 */
-	showText(): Splash
-
-	/**
-	 * # Hide Text
-	 * Hide the text element.
-	 */
-	hideText(): Splash
-
-	/**
-	 * # Delete
-	 * Remove from DOM and delete internal data.
-	 */
-	delete(): boolean
-}

package/src/ts/core/SplashQueue.ts

@@ -1,49 +0,0 @@
-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/tests/DomUtilities.spec.ts

@@ -1,117 +0,0 @@
-// @ts-strict
-
-import { JSDOM } from 'jsdom'
-import { beforeEach, describe, expect, it } from 'vitest'
-import {
-	createElement,
-	injectAsFirstChild,
-	showElement,
-	hideElement,
-	move,
-	elementFrom,
-	getRecycledSplash,
-	addNSHostClass,
-	removeNSHostClass,
-} from '../src/ts/core/DomUtilities'
-import { Splash } from '../src/ts/core/Splash'
-import { Service } from '../src/ts/core/Service'
-
-describe('DOMUtilities', () => {
-	// Reset the DOM before each test
-	beforeEach(() => {
-		const dom = new JSDOM()
-		// @ts-ignore
-		globalThis.window = dom.window
-		globalThis.document = dom.window.document
-		globalThis.DOMParser = dom.window.DOMParser
-		globalThis.Element = dom.window.Element
-	})
-
-	it('Should be able to create a Nanosplash component', () => {
-		const getClass = (element: Element) => element.classList[0]
-		const element = createElement()
-		const contentElement = <Element>element.firstElementChild
-		const textElement = <Element>contentElement.firstElementChild
-		const spinnerElement = <Element>textElement.nextElementSibling
-
-		expect(getClass(element)).toBe('ns')
-		expect(getClass(contentElement)).toBe('nsc')
-		expect(getClass(textElement)).toBe('nst')
-		expect(getClass(spinnerElement)).toBe('nss')
-	})
-
-	it('Should be able to inject a Nanosplash component', () => {
-		const elementA = createElement()
-		const elementB = createElement()
-		const destinationElement = document.createElement('div')
-		injectAsFirstChild(elementA, destinationElement)
-		expect(destinationElement.firstElementChild).toBe(elementA)
-		injectAsFirstChild(elementB, destinationElement)
-		expect(destinationElement.firstElementChild).toBe(elementB)
-	})
-
-	it('Should be able to prepare the parent of a Nanosplash component', () => {
-		const ns = new Splash()
-		const parent = document.createElement('div')
-		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.getElement() as Element)
-		parent.classList.add(Splash.NSClass)
-		removeNSHostClass(parent)
-		expect(parent.classList.contains(Splash.NSHostClass)).toBe(false)
-	})
-
-	it('Should be able to convert an element reference to an element', () => {
-		const element = document.createElement('div')
-		document.body.appendChild(element)
-		element.id = 'test-id'
-		element.classList.add('test-class')
-		element.setAttribute('data-test', 'test')
-		expect(elementFrom('#test-id')).toBe(element)
-		expect(elementFrom('.test-class')).toBe(element)
-		expect(elementFrom('div[data-test="test"]')).toBe(element)
-		expect(elementFrom(element)).toBe(element)
-	})
-
-	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 = getRecycledSplash(destination)
-		expect(recycled?.getId()).toBe(id)
-	})
-
-	it('Should be able to show an element', () => {
-		const element = document.createElement('div')
-		showElement(element)
-		expect(element.style.display).toBe('flex')
-	})
-
-	it('Should be able to hide an element', () => {
-		const element = document.createElement('div')
-		hideElement(element)
-		expect(element.style.display).toBe('none')
-	})
-
-	it('Should be able to alter the class of a Nanosplash host', () => {
-		const div = document.createElement('div')
-		addNSHostClass(div)
-		expect(div.classList.contains(Splash.NSHostClass)).toBe(true)
-		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.getElement() as Element, destination)
-		expect(destination.firstElementChild).toBe(ns.getElement())
-	})
-})

package/tests/Guid.spec.ts

@@ -1,21 +0,0 @@
-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(() => {
-		const dom = new JSDOM()
-		// @ts-ignore
-		globalThis.window = dom.window
-		globalThis.document = dom.window.document
-		globalThis.DOMParser = dom.window.DOMParser
-	})
-
-	it('Should generate a valid GUID', () => {
-		const value = new Splash().getId()
-		expect(value).toMatch(rgx)
-	})
-})