nanosplash 4.0.2 → 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,177 +0,0 @@
-// @ts-strict
-import style from '../style/ns.sass?inline'
-import { NanosplashInterface } from './types/NanosplashInterface'
-import { ElementReference, NSElement } from './types/Types'
-import type { DOMWindow } from 'jsdom'
-import { version } from '../../package.json'
-
-/**
- * # Use Nanosplash
- * @returns Nanosplash API.
- */
-export const useNs = (
-	win?: (Window | (Window & typeof globalThis)) | DOMWindow
-): NanosplashInterface => {
-	const doc = (win ?? window).document
-	const bod = doc.body
-
-	const all = (node: ParentNode, ref: string) =>
-		Array.from(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 | null = (
-			inside ? parseRef(inside) : bod
-		) as Element | null
-		let ns: NSElement
-		const recycledNs = first(parent ?? bod, '& > .ns')
-		if (recycledNs) {
-			ns = recycledNs 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(this)
-})

package/src/ts/types/NanosplashInterface.ts

@@ -1,26 +0,0 @@
-import { DOMSelector, UTCInteger } from './Types'
-
-export interface NanosplashInterface {
-	/**
-	 * # Show
-	 * Display Nanosplash inside the window.
-	 * @param {string | undefined} text Optional text
-	 * @param {string | Element | undefined} inside Optional element reference
-	 * @returns {number | null} The internal ID of the created Nanosplash.
-	 */
-	show(text?: string, 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,25 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest'
-import { JSDOM } from 'jsdom'
-import { useNs } from '../src/ts/Nanosplash'
-
-const dom = new JSDOM()
-var window = dom.window
-const ns = (window.ns = useNs(window))
-
-describe('Nanosplash API', () => {
-	it('should be defined', () => {
-		expect(window.ns).toBeDefined()
-	})
-
-	it('should have the "show" method', () => {
-		expect(window.ns.show).toBeDefined()
-	})
-
-	it('should have the "hide" method', () => {
-		expect(window.ns.hide).toBeDefined()
-	})
-
-	it('should have the global instance', () => {
-		expect(window.ns).toBe(ns)
-	})
-})