nanosplash 4.0.3 → 4.0.4

package/src/style/ns.sass

@@ -1,120 +0,0 @@
-// Spinner animations:
-@keyframes nsRotate
-	100%
-		transform: rotate(360deg)
-
-@keyframes nsDash
-	0%
-		stroke-dasharray: 1, 150
-		stroke-dashoffset: 0
-	50%
-		stroke-dasharray: 90, 150
-		stroke-dashoffset: -35
-	100%
-		stroke-dasharray: 90, 150
-		stroke-dashoffset: -124
-
-@keyframes nsFade
-	from
-		opacity: 0
-	to
-		opacity: 1
-
-@keyframes nsAscend
-	from
-		opacity: 0
-		transform: translateY(13px)
-	to
-		opacity: 1
-		transform: translateY(0)
-
-:root
-	--ns-top: 0px
-
-%maximize
-	width: 100%
-	height: 100%
-
-%bottom-left
-	bottom: 0
-	right: 0
-
-%flex-center-xy
-	display: flex
-	justify-content: center
-	align-items: center
-
-// Nanosplash host scoped varibles
-.nsh
-	--color: DarkSlateGray
-	--size: 20px
-	--relSize: calc(var(--size) * 0.9)
-	--font: 'Helvetica', 'Arial', sans-serif
-	--weight: 400
-	--bg: #{ rgba(White, 0.9) }
-	--zIdx: 999999999
-	--blur: blur(5px)
-
-// Nanosplash host
-.nsh
-	position: relative
-	z-index: var(--zIdx)
-	&::before // The backdrop
-		@extend %maximize
-		@extend %bottom-left
-		position: absolute
-		background-color: var(--bg)
-		content: ''
-		backdrop-filter: var(--blur)
-		-webkit-backdrop-filter: var(--blur)
-		z-index: calc(var(--zIdx) + 1)
-		border-radius: inherit
-
-// When Nanosplash host is the document body
-body.nsh
-	&, &::before
-		@extend %maximize
-		position: fixed
-		top: var(--ns-top)
-		left: 0
-
-// Nanosplash (main element)
-.ns
-	@extend %maximize
-	@extend %bottom-left
-	@extend %flex-center-xy
-	position: absolute
-	z-index: calc(var(--zIdx) + 2)
-	animation: nsFade 2s
-	gap: var(--relSize)
-
-// Nanosplash text
-.nst
-	color: var(--color)
-	font-size: var(--size)
-	font-family: var(--font)
-	font-weight: var(--weight)
-	max-width: 80dvw
-	white-space: nowrap
-	text-overflow: ellipsis
-	overflow: hidden
-	text-shadow: 0 0 0.06rem #{ rgba(DarkSlateGray, .25) }
-	filter: drop-shadow(0 0 0.07rem #{ rgba(Black, 0.25) })
-	animation: nsAscend 0.5s
-
-// Nanosplash spinner
-.nss
-	display: block
-	width: var(--relSize)
-	height: var(--relSize)
-	animation: nsAscend 0.5s
-	& > svg
-		animation: nsRotate 2s linear infinite
-		position: relative
-		width: inherit
-		height: inherit
-		stroke-width: 8
-	& .path
-		stroke: var(--color)
-		stroke-linecap: round
-		animation: nsDash 1.5s ease-in-out infinite

package/src/ts/Nanosplash.ts

@@ -1,176 +0,0 @@
-// @ts-strict
-import style from '../style/ns.sass?inline'
-import { NanosplashInterface } from './types/NanosplashInterface'
-import { ElementReference, NSElement } from './types/Types'
-import { version } from '../../package.json'
-
-/**
- * # Use Nanosplash
- * @returns Nanosplash API.
- */
-export const useNs = (): NanosplashInterface => {
-	const doc = window.document
-	const bod = doc.body
-
-	const toArray = <T>(iter: Iterable<T> | ArrayLike<T>) => Array.from(iter)
-	const all = (node: ParentNode, ref: string) =>
-		toArray(node.querySelectorAll(ref))
-	const first = (node: ParentNode, ref: string) => all(node, ref)[0] ?? null
-
-	/**
-	 * # Get All Nanosplashes
-	 * @returns An array of all Nanosplash elements in the DOM.
-	 */
-	const getAllNs = (): NSElement[] => all(doc, '.ns') as NSElement[]
-
-	/**
-	 * # Parse Ref
-	 * @param ref Element reference which could be a selector or an Element.
-	 * @returns The Element node or null.
-	 */
-	const parseRef = (ref: ElementReference): Element | null =>
-		ref instanceof Element ? ref : first(doc, ref)
-
-	/**
-	 * # Create HTMLDivElement
-	 * @param className Optional string containing class names.
-	 * @param children Optional list of Nodes or strings.
-	 * @returns The newly created HTMLDivElement.
-	 */
-	const div = (
-		className?: string,
-		...children: (Node | string)[]
-	): HTMLDivElement => {
-		const node: HTMLDivElement = doc.createElement('div')
-		if (className) node.classList.add(className)
-		node.append(...children)
-		return node
-	}
-
-	/**
-	 * # Parse
-	 * @param html HTML string.
-	 * @returns Parsed node.
-	 */
-	const parse = (html: string): Node => {
-		const node: HTMLDivElement = div()
-		node.innerHTML = html
-		return node.firstChild as Node
-	}
-
-	/**
-	 * # Make Nanosplash Element
-	 * @returns Nanpslash DOM element.
-	 */
-	const makeNs = (): NSElement => {
-		const circle: string = '<circle class=path cx=25 cy=25 r=20 fill=none />'
-		const svg = parse(`<svg viewBox="0 0 50 50">${circle}</svg>`) as Element
-		const node = div('ns', div('nst'), div('nss', svg)) as NSElement
-		node.nsId = Date.now()
-		return node
-	}
-
-	/**
-	 * # Peek Nanosplash Queue
-	 * Collect all Nanosplash elements in the DOM, sort them by their NS ID
-	 * in ascending order, and return the first element.
-	 * @returns The front of the queue.
-	 */
-	const peekNsQueue = (): NSElement | null =>
-		getAllNs().sort((a: NSElement, b: NSElement) => a.nsId - b.nsId)[0] ?? null
-
-	/**
-	 * # Set Nanosplash Text
-	 * Replace the text node to trigger the animation which in turn is invoked
-	 * by the connected callback in the DOM.
-	 * @param ns Nanosplash element.
-	 * @param text Text to display adjacent to spinner.
-	 */
-	const setNsText = (ns: NSElement, text: string): void => {
-		const oldNsText = first(ns, '.nst') as Element | null
-		if (!text) return oldNsText?.remove()
-		const newNsText = div('nst', text)
-		if (oldNsText) {
-			oldNsText.replaceWith(newNsText)
-		} else {
-			ns.insertBefore(newNsText, ns.firstChild)
-		}
-	}
-
-	/**
-	 * # Set Nanosplash Parent
-	 * Define where inside the DOM to spawn the Nansoplash.
-	 * @param ns Nanosplash element.
-	 * @param parent NS element's parent to be.
-	 */
-	const setNsParent = (ns: NSElement, parent: Element): void => {
-		const child = parent.firstElementChild
-		if (child) {
-			parent.insertBefore(ns, child)
-		}
-		parent.append(ns)
-		parent.classList.add('nsh')
-	}
-
-	/**
-	 * # Show Nanosplash
-	 * @param text Text to display adjacent to spinner.
-	 * @param inside Selector or element in which the NS element will be spawned.
-	 * @returns The ID if the NS element — which is a UTC integer.
-	 */
-	const show = (text?: string, inside?: string | Element): number | null => {
-		const parent: Element = (inside ? parseRef(inside) ?? bod : bod) as Element
-		let ns: NSElement
-		const recycled: Element | undefined = toArray(parent.children)
-			.filter(node => node.classList.contains('ns'))
-			.at(0)
-		const isNs = recycled?.classList.contains('ns')
-		if (isNs) {
-			ns = recycled as NSElement
-		} else {
-			ns = makeNs()
-			setNsParent(ns, parent as Element)
-		}
-		setNsText(ns, text ?? '')
-		const top: string = scrollY + 'px'
-		bod.style.setProperty('--ns-top', top)
-		return ns.nsId
-	}
-
-	/**
-	 * # Remove Nanosplash
-	 * @param ns Nanosplash elememnt.
-	 */
-	const removeNs = (ns?: Element | null): void => {
-		ns?.parentElement?.classList.remove('nsh')
-		ns?.remove()
-	}
-
-	/**
-	 * # Find Nanosplash
-	 * @param id The UTC integer returned from the `show` function.
-	 * @returns Null or the corresponding Nanosplash element.
-	 */
-	const findNs = (id: number) => getAllNs().find(v => v.nsId === id) ?? null
-
-	/**
-	 * # Hide Nanosplash
-	 * Hide agnostically in FIFO order, specifically by ID, or all by the asterisk
-	 * which will delete all Nanosplashes.
-	 * @param id Optional ID of a Nanosplash element or '*' .
-	 */
-	const hide = (id?: number | '*'): void => {
-		if (id === '*') all(doc, '.ns').forEach(removeNs)
-		else removeNs(typeof id === 'number' ? findNs(id) : peekNsQueue())
-	}
-
-	// Add CSS to window
-	first(doc, '#ns')?.remove()
-	bod.append(parse(`<style id="ns">${style}</style>`))
-
-	return {
-		show,
-		hide,
-		version,
-	}
-}

package/src/ts/main.ts

@@ -1,5 +0,0 @@
-// @ts-strict
-import { useNs } from './Nanosplash'
-window.addEventListener('load', function () {
-	this.ns = useNs()
-})

package/src/ts/types/NanosplashInterface.ts

@@ -1,29 +0,0 @@
-import { DOMSelector, UTCInteger } from './Types'
-
-export interface NanosplashInterface {
-	/**
-	 * # Show
-	 * Display Nanosplash inside the window.
-	 * @param {string | null | undefined} text Optional text. Pass falsy to display spinner only.
-	 * @param {string | Element | undefined} inside Optional element reference
-	 * @returns {number | null} The internal ID of the created Nanosplash.
-	 */
-	show(
-		text?: string | null | undefined,
-		inside?: DOMSelector | HTMLElement
-	): UTCInteger | null
-	/**
-	 * # Hide
-	 * Remove Nanosplash in multiple ways depending on the passed argument.
-	 * - Pass ID: Remove specific.
-	 * - Pass '*': Remove all in window.
-	 * - Pass nothing: Remove in FIFO order.
-	 * @param id The internal ID, an asterisk, or nothing.
-	 */
-	hide(id?: UTCInteger | '*'): void
-	/**
-	 * # Version
-	 * The current version of Nanosplash.
-	 */
-	version: string
-}

package/src/ts/types/Types.ts

@@ -1,16 +0,0 @@
-import { NanosplashInterface } from './NanosplashInterface'
-
-export type Integer = number
-export type UTCInteger = Integer
-export type DOMSelector = string
-export type ElementReference = DOMSelector | Element
-
-export interface NSElement extends HTMLDivElement {
-	nsId: number
-}
-
-declare global {
-	interface Window {
-		ns: NanosplashInterface
-	}
-}

package/src/ts/types/global.d.ts

@@ -1,14 +0,0 @@
-import { NanosplashInterface } from './NanosplashInterface'
-
-interface IWindow {
-	ns: NanosplashInterface
-}
-
-declare global {
-	interface Window extends IWindow {}
-	interface window extends IWindow {}
-	interface globalThis extends globalThis {
-		Window: IWindow
-		window: IWindow
-	}
-}

package/tests/Nanosplash.spec.ts

@@ -1,207 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { useNs } from '../src/ts/Nanosplash'
-import { NSElement } from '../src/ts/types/Types'
-
-const ns = (window.ns = useNs())
-const get = (selector: string) => document.querySelector(selector)
-const getAll = (selector: string) =>
-	Array.from(document.querySelectorAll(selector))
-const allNs = () => getAll('.ns') as NSElement[]
-const nsCount = () => allNs().length
-
-const div = (id: string) => {
-	const node = document.createElement('div')
-	node.id = id
-	return node
-}
-
-describe('Global access', () => {
-	it('should have "ns"', () => {
-		expect(window.ns).toBeDefined()
-		expect(window.ns).toBe(ns)
-	})
-
-	it('should have the "ns.show" function', () => {
-		expect(window.ns.show).toBeDefined()
-		expect(window.ns.show).toBeTypeOf('function')
-	})
-
-	it('should have the "ns.hide" function', () => {
-		expect(window.ns.hide).toBeDefined()
-		expect(window.ns.hide).toBeTypeOf('function')
-	})
-})
-
-describe('useNs hook', () => {
-	it('should return the Nanosplash API', () => {
-		const instance = useNs()
-		expect(instance.show).toBeTypeOf('function')
-		expect(instance.hide).toBeTypeOf('function')
-	})
-})
-
-describe('Nanosplash API', () => {
-	describe('show / hide cleanup', () => {
-		describe('show', () => {
-			it('should make the body host', () => {
-				const id = ns.show()
-				const bod = document.body
-				const bodyIsHost = bod.classList.contains('nsh')
-				expect(bodyIsHost).toBe(true)
-				ns.hide(id as number)
-				expect(nsCount()).toBe(0)
-			})
-
-			it('should create a Nanosplash element', () => {
-				const id = ns.show()
-				const nsElement = get('body > .ns') as NSElement
-				expect(nsElement).toBeInstanceOf(HTMLDivElement)
-				ns.hide(id as number)
-				expect(nsCount()).toBe(0)
-			})
-
-			it('should have the correct internal ID', () => {
-				const id = ns.show()
-				const nsElement = get('body > .ns') as NSElement
-				expect(id).toBe(nsElement.nsId)
-				ns.hide(id as number)
-				expect(nsCount()).toBe(0)
-			})
-		})
-
-		describe('hide', () => {
-			it('should be able to hide the element', () => {
-				const id = ns.show()
-				expect(nsCount()).toBeGreaterThan(0)
-				ns.hide(id as number)
-				expect(nsCount()).toBe(0)
-			})
-
-			it('should undo body as host', () => {
-				const id = ns.show()
-				ns.hide(id as number)
-				const bodyIsNoLongerHost = document.body.classList.contains('nsh')
-				expect(bodyIsNoLongerHost).toBe(false)
-				expect(nsCount()).toBe(0)
-			})
-
-			it('should remove the Nanosplash element from DOM', () => {
-				const id = ns.show()
-				const nsElement = get('body > .ns') as NSElement
-				ns.hide(id as number)
-				expect(nsElement?.isConnected).toBe(false)
-				expect(nsCount()).toBe(0)
-			})
-		})
-	})
-
-	describe('show()', () => {
-		it('should inject a Nanosplash in the body element', () => {
-			const id = ns.show()
-			const elements = allNs() as NSElement[]
-			const element = elements.find((v: NSElement) => v.nsId === id)
-			expect(element).toBeInstanceOf(HTMLDivElement)
-			ns.hide(id as number)
-			expect(nsCount()).toBe(0)
-		})
-
-		it('should only display a spinner', () => {
-			const id = ns.show()
-			const nst = get('.ns > .nst')
-			const nss = get('.ns > .nss')
-			expect(nst).toBeNull()
-			expect(nss).toBeInstanceOf(HTMLDivElement)
-			ns.hide(id as number)
-			expect(nsCount()).toBe(0)
-		})
-
-		it('should recycle elements', () => {
-			const idFirst = ns.show()
-			const idSecond = ns.show()
-			expect(nsCount()).toBe(1)
-			expect(idFirst).toBe(idSecond)
-			ns.hide()
-			ns.hide()
-			expect(nsCount()).toBe(0)
-		})
-	})
-
-	describe('show("foo", "#bar")', () => {
-		it('should display text inside #bar', () => {
-			const bar = div('bar')
-			document.body.append(bar)
-			const id = ns.show('foo', '#bar')
-			expect(nsCount()).toBe(1)
-			const selector = '#bar.nsh > .ns > .nst'
-			const nst = get(selector)
-			expect(nst).toBeInstanceOf(HTMLDivElement)
-			expect((nst as HTMLDivElement).innerHTML).toBe('foo')
-			ns.hide(id as number)
-			bar.remove()
-			expect(nsCount()).toBe(0)
-		})
-	})
-
-	describe('hide()', () => {
-		it('should hide in FIFO order', () => {
-			document.body.append(div('a'), div('b'), div('c'), div('d'))
-
-			ns.show(null, '#a')
-			ns.show(null, '#b')
-			ns.show(null, '#c')
-			ns.show(null, '#d')
-
-			const theseExist = (...ids: string[]) => ids.every(id => get(id))
-
-			expect(theseExist('#a', '#b', '#c', '#d')).toBe(true)
-			ns.hide()
-			expect(theseExist('#b', '#c', '#d')).toBe(true)
-			ns.hide()
-			expect(theseExist('#c', '#d')).toBe(true)
-			ns.hide()
-			expect(theseExist('#d')).toBe(true)
-			ns.hide()
-
-			expect(nsCount()).toBe(0)
-			getAll('#a, #b, #c, #d').forEach(node => node.remove())
-			expect(nsCount()).toBe(0)
-		})
-	})
-
-	describe('hide(id)', () => {
-		it('should delete a specific Nanosplash', () => {
-			const a = div('a')
-			const b = div('b')
-			document.body.append(a, b)
-			const idA = ns.show(null, '#a')
-			const idB = ns.show(null, '#b')
-			const bothExist = allNs().every(node => [idA, idB].includes(node.nsId))
-			expect(bothExist).toBe(true)
-			expect(nsCount()).toBe(2)
-			ns.hide(idB as number)
-			expect(nsCount()).toBe(1)
-			expect(allNs()[0].nsId).toBe(idA)
-			ns.hide(idA as number)
-			a.remove()
-			b.remove()
-			expect(nsCount()).toBe(0)
-		})
-	})
-
-	describe('hide(*)', () => {
-		it('should hide all Nanosplashes', () => {
-			document.body.append(div('a'), div('b'), div('c'))
-
-			ns.show(null, '#a')
-			ns.show(null, '#b')
-			ns.show(null, '#c')
-
-			expect(nsCount()).toBe(3)
-			ns.hide('*')
-			expect(nsCount()).toBe(0)
-
-			getAll('#a, #b, #c').forEach(node => node.remove())
-			expect(nsCount()).toBe(0)
-		})
-	})
-})