nanosplash 2.5.2 → 3.0.0

package/src/Core/Nanosplash.ts

@@ -1,257 +0,0 @@
-import '../style.sass'
-import {get} from "../Utilities/dom";
-import {SplashInstance} from "./SplashInstance";
-import {ShowInterface} from "../Interfaces/ShowInterface";
-import {NanosplashFactory} from "../Factory/NanosplashFactory";
-import {NanosplashInterface} from "../Interfaces/NanosplashInterface";
-import {
-    ContextualAPIObject,
-    Destination,
-    InstanceIterationCallback,
-    NanosplashOptions,
-    SplashJob,
-} from "../types";
-import Exception from "../Exceptions/Exception";
-import IllegalArgumentException from "../Exceptions/IllegalArgumentException";
-
-/**
- * # Nanosplash
- * @author Isak K. Hauge <isakhauge@gmail.com>
- */
-class Nanosplash implements NanosplashInterface {
-    public static APP_NAME = 'Nanosplash'
-    private static SPINNER_DEFAULT_VISIBILITY = true
-    private static DEBUG = true
-    public debug: boolean
-    private imgSrc: string | undefined
-    private spinner: boolean
-    private fontSize: string
-    public readonly instances: Map<string, SplashInstance>
-
-    /**
-     * Options passed to the constructor will persist in the instance.
-     * @param {NanosplashOptions | undefined} options Nanosplash options object.
-     */
-    public constructor(options?: NanosplashOptions) {
-        this.debug = ((options?.debug === undefined)
-            ? Nanosplash.DEBUG
-            : options.spinner) as boolean
-        this.imgSrc = options?.imgSrc
-        this.spinner = (options?.spinner === undefined)
-            ? Nanosplash.SPINNER_DEFAULT_VISIBILITY
-            : options.spinner
-        this.fontSize = options?.fontSize ?? '18px'
-        this.instances = new Map<string, SplashInstance>()
-    }
-
-    /**
-     * # Set Image Source
-     * Set the value as undefined to display no image.
-     * @param {string | undefined} value
-     * @return Nanosplash
-     */
-    public setImgSrc(value: string | undefined): Nanosplash {
-        this.imgSrc = value
-        return this
-    }
-
-    /**
-     * # Set Spinner
-     * Control spinner visibility.
-     * @param {boolean} value
-     * @return Nanosplash
-     */
-    public showSpinner(value: boolean): Nanosplash {
-        this.spinner = value
-        return this
-    }
-
-    /**
-     * # Set Font Size
-     * @param {string} value Use CSS compatible values.
-     * @return Nanosplash
-     */
-    public setFontSize(value: string): Nanosplash {
-        this.fontSize = value
-        return this
-    }
-
-    /**
-     * # Get Image Source
-     * @return string | undefined
-     */
-    public getImgSrc(): string | undefined {
-        return this.imgSrc
-    }
-
-    /**
-     * # Spinner Is Visible
-     * @return boolean
-     */
-    public spinnerIsVisible(): boolean {
-        return this.spinner
-    }
-
-    /**
-     * # Get Font Size
-     * @return string
-     */
-    public getFontSize(): string {
-        return this.fontSize
-    }
-
-    /**
-     * # Show
-     * @param {string} text
-     */
-    public show(text: string): ContextualAPIObject {
-        return NanosplashFactory.createShowFunction(this, new SplashInstance(this, text, this.imgSrc))(text)
-    }
-
-    /**
-     * # Progress
-     * @param {SplashJob[]} jobs An array or list of Splash jobs.
-     */
-    public progress(...jobs: SplashJob[]): ContextualAPIObject {
-        return NanosplashFactory.createProgressFunction(this, new SplashInstance(this, '', this.imgSrc))(...jobs)
-    }
-
-    /**
-     * # While
-     * @param {Promise<any>} asyncTask An asynchronous function or Promise.
-     */
-    public while(asyncTask: Promise<any>): ShowInterface {
-        return NanosplashFactory.createWhileFunction(this, new SplashInstance(this, '', this.imgSrc))(asyncTask)
-    }
-
-    /**
-     * # LIFO Iterate
-     * This function will iterate through the splash instances in a LIFO (last in, first out) manner, invoke the
-     * callback for each instance and pass the instance as an argument.
-     * @param {InstanceIterationCallback} callback This callback will be invoked for each instance.
-     * @private
-     */
-    private lifoIterate(callback: InstanceIterationCallback): void {
-        const n = this.instances.size
-        const instances = Array.from(this.instances.values())
-        for (let i = n - 1; i >= 0; i--) {
-            const instance = instances[i]
-            const id = instance.getId()
-            if (!callback(id, instance, i)) {
-                break
-            }
-        }
-    }
-
-    /**
-     * # Delete
-     * @param {SplashInstance} splashInstance
-     */
-    public delete(splashInstance: SplashInstance): void {
-        this.instances.delete(splashInstance.getId())
-    }
-
-    /**
-     * # Hide All
-     * Delete all Splash instances.
-     */
-    public hideAll(): void
-    {
-        this.instances.forEach((instance: SplashInstance) => instance.delete())
-    }
-
-    /**
-     * # Hide
-     * Delete specific Splash instance or the latest one. There are three different ways of using this function.
-     *
-     * ## Use SplashInstance IDs
-     * Every new splash instance is given a unique, randomized ID. This ID is easily retrieved by using the getId
-     * method.
-     * <br>
-     * <code>
-     *     const splashInstance = ns.show('Loading');<br>
-     *     ns.hide(splashInstance.getId());
-     * </code>
-     * <br>
-     *
-     * ## Use CSS Selector
-     * Pass the selector referring to the element in which the splash instance resides.
-     * <br>
-     * <code>
-     *     ns.show('Loading').inside('#my-div');<br>
-     *     ns.hide('#my-div');
-     * </code>
-     * <br>
-     *
-     * ## Pass no argument
-     * When calling the hide method without passing arguments, it will delete the latest splash instance added to the
-     * DOM, in other words, in a LIFO fashion.<br>
-     * <code>
-     *     ns.show('Loading');<br>
-     *     ns.hide();
-     * </code>
-     * <br>
-     * @param ref This can either be a SplashInstance ID or a CSS selector referring to the element in which
-     * the instance is residing.
-     */
-    public hide(ref?: Destination): void {
-        try {
-            if (ref) {
-                const isString = typeof ref === 'string'
-                const isNode = ref instanceof Node
-                const deleteInstancesWhereDestination = (destination: Destination) => {
-                    Array.from(this.instances.values())
-                        .filter((v: SplashInstance) => v.getDestination() === destination)
-                        .forEach((v: SplashInstance) => v.delete())
-                }
-
-                if (isString) {
-                    const splashInstance = this.instances.get(ref)
-                    if (splashInstance) {
-                        splashInstance.delete()
-                        return
-                    } else {
-                        const element = get<HTMLElement>(ref)
-                        if (element) {
-                            deleteInstancesWhereDestination(element)
-                        }
-                        throw new Exception(`The CSS selector (${ref}) points to a non-existing DOM element.`)
-                    }
-                } else if (isNode) {
-                    deleteInstancesWhereDestination(ref)
-                } else {
-                    throw new IllegalArgumentException(
-                        'The ref argument must be either a string or Node',
-                        ref
-                    )
-                }
-            } else {
-                const n = this.instances.size
-                this.lifoIterate((_: string, splashInstance: SplashInstance, i: number) => {
-                    const remove = i === n - 1
-                    if (remove) {
-                        splashInstance.delete()
-                    }
-                    return remove
-                })
-            }
-        } catch (e) {
-            if (this.debug) {
-                console.warn(e)
-            }
-        }
-    }
-
-    /**
-     * # Get From Destination Node
-     * Returns Splash instances having the given destination node.
-     * @param {HTMLElement} node
-     */
-    public getFromDestinationNode(node: HTMLElement): SplashInstance[]
-    {
-        const fnSameDestinationNode = (v: SplashInstance) => v.getDestination() === node
-        return Array.from(this.instances.values()).filter(fnSameDestinationNode)
-    }
-}
-
-export default Nanosplash

package/src/Core/SplashInstance.ts

@@ -1,298 +0,0 @@
-import {Destination} from "../types";
-import Nanosplash from "./Nanosplash";
-import {addClass, mk, move, setAttr} from "../Utilities/dom";
-import {IdentityInterface} from "../Interfaces/IdentityInterface";
-import {NanosplashRepository} from "../Repositories/NanosplashRepository";
-
-/**
- * SplashInstance
- * @author Isak K. Hauge <isakhauge@gmail.com>
- */
-export class SplashInstance implements IdentityInterface {
-    private readonly id: string
-    private imgSrc: string | undefined
-    private readonly nsInstance: Nanosplash
-    private destinationNode: HTMLElement | undefined
-    private readonly nsRootElement: HTMLDivElement = mk('div') as HTMLDivElement
-    private readonly nsTextElement: HTMLDivElement = mk('div') as HTMLDivElement
-    private readonly nsTextContainerElement: HTMLDivElement = mk('div') as HTMLDivElement
-    private readonly nsSpinnerElement: HTMLDivElement = NanosplashRepository.createNanosplashSpinnerElement()
-    private readonly nsWindowElement: HTMLDivElement = mk('div') as HTMLDivElement
-    private readonly nsWrapperElement: HTMLDivElement = mk('div') as HTMLDivElement
-    private readonly nsContentElement: HTMLDivElement = mk('div') as HTMLDivElement
-    private readonly nsImageElement: HTMLImageElement = mk('img') as HTMLImageElement
-
-    /**
-     * @param {Nanosplash} ns Nanosplash instance
-     * @param {string} text Text
-     * @param {string|undefined} imgSrc Image source URL
-     */
-    public constructor(ns: Nanosplash, text: string, imgSrc?: string) {
-        this.id = Math.random().toString(36).substring(2)
-        this.nsInstance = ns
-        this.nsTextElement.innerText = text
-
-        this.imgSrc = imgSrc
-        this.nsImageElement.src = this.imgSrc ?? ''
-        this.nsImageElement.alt = Nanosplash.APP_NAME
-
-        this.nsRootElement.style.fontSize = ns.getFontSize()
-        this.nsSpinnerElement.style.display = ns.spinnerIsVisible() ? 'flex' : 'none'
-
-        this.assembleNSComponent()
-        this.setImgSrc(imgSrc)
-    }
-
-    /**
-     * # Assign CSS Classes
-     * Assigns CSS class names to all elements connected to this splash instance.
-     * @private
-     */
-    private assignCSSClasses(): void
-    {
-        addClass(this.nsContentElement, 'ns-container')
-        addClass(this.nsWrapperElement, 'ns-blur')
-        addClass(this.nsImageElement, 'ns-img')
-        addClass(this.nsTextElement, 'ns-text')
-        addClass(this.nsTextContainerElement, 'ns-text-container')
-        addClass(this.nsSpinnerElement, 'ns-spinner')
-        addClass(this.nsWindowElement, 'ns', 'ns-window')
-        addClass(this.nsRootElement, 'ns-wrapper')
-    }
-
-    /**
-     * # Assemble Element Structure
-     * Assembles all elements connected to this splash instance in a fixed structure.
-     * @private
-     */
-    private assembleElementStructure(): void
-    {
-        this.nsTextContainerElement.append(this.nsTextElement, this.nsSpinnerElement)
-        this.nsContentElement.append(this.nsImageElement, this.nsTextContainerElement)
-        this.nsWindowElement.append(this.nsContentElement)
-        this.nsRootElement.append(this.nsWrapperElement, this.nsWindowElement)
-    }
-
-    /**
-     * # Assemble Nanosplash Component
-     * Assembles all elements into one component that represents the Nanosplash component.
-     * @private
-     */
-    private assembleNSComponent(): void {
-        this.nsRootElement.id = this.getId()
-        setAttr(this.nsRootElement, 'data-ctx', 'nanosplash')
-        this.assembleElementStructure()
-        this.assignCSSClasses()
-    }
-
-    /**
-     * # Get ID
-     * @return string
-     */
-    public getId(): string
-    {
-        return this.id
-    }
-
-    /**
-     * Get Text
-     * @return string
-     */
-    public getText(): string
-    {
-        return this.nsTextElement.innerText
-    }
-
-    /**
-     * # Set Text
-     * @param {string} text Text
-     * @return SplashInstance
-     */
-    public setText(text: string): SplashInstance {
-        this.nsTextElement.innerText = text
-        return this
-    }
-
-    /**
-     * # Get Image Source
-     * @return string | undefined
-     */
-    public getImgSrc(): string | undefined
-    {
-        return this.imgSrc
-    }
-
-    /**
-     * # Set Image Source
-     * @param {string|undefined} src Source URL
-     * @return SplashInstance
-     */
-    public setImgSrc(src?: string): SplashInstance
-    {
-        this.nsImageElement.src = src ?? ''
-        this.nsImageElement.style.display = src ? 'block' : 'none'
-        this.assembleElementStructure()
-        return this
-    }
-
-    /**
-     * # Get Destination
-     * @return HTMLElement | undefined
-     */
-    public getDestination(): HTMLElement | undefined
-    {
-        return this.destinationNode
-    }
-
-    /**
-     * # Clean And Restore
-     * Cleans and restore the DOM structure.
-     * @private
-     */
-    private cleanAndRestore(): void
-    {
-        const currentParent = this.nsRootElement.parentElement
-        if (currentParent) {
-            this.restoreDOMStructure(currentParent)
-        }
-    }
-
-    /**
-     * # Reset Fullscreen Attributes
-     * Removes the fullscreen attributes and CSS class names.
-     * @private
-     */
-    private resetFullscreenAttributes(): void
-    {
-        setAttr(this.nsRootElement, 'style', '')
-        this.nsRootElement.classList.remove('ns-fs')
-    }
-
-    /**
-     * # Move With Regular Strategy
-     * Moves the Nanosplash root element to the target node's position and essentially wraps the target node with the
-     * Nanosplash root element.
-     * @param {Node} targetNode
-     * @private
-     */
-    private moveWithRegularStrategy(targetNode: Node): void
-    {
-        const targetParentNode = targetNode.parentNode
-        if (targetParentNode) {
-            this.restoreDOMStructure(targetParentNode)
-            targetParentNode.replaceChild(this.nsRootElement, targetNode)
-            this.nsWrapperElement.appendChild(targetNode)
-        }
-    }
-
-    /**
-     * # Move With Fullscreen Strategy
-     * Moves the Nanosplash root element inside the body element.
-     * @private
-     */
-    private moveWithFullscreenStrategy(): void
-    {
-        this.nsRootElement.classList.add('ns-fs')
-        move(this.nsRootElement, document.body, true)
-    }
-
-    /**
-     * # Replace Splash Instances Having Same Destination
-     * Delete all Splash instances residing inside the same destination node.
-     * @param {HTMLElement} destinationNode
-     * @private
-     */
-    private replaceSplashInstancesHavingSameDestination(destinationNode: HTMLElement): void
-    {
-        const fnNotSameInstance = (v: SplashInstance) => v.getId() !== this.getId()
-        const fnDelete = (v: SplashInstance) => v.delete()
-        this.nsInstance.getFromDestinationNode(destinationNode).filter(fnNotSameInstance).forEach(fnDelete)
-    }
-
-    /**
-     * # Move To
-     * This function moves the Nanosplash root element to a destination.
-     * @param {Destination} destination
-     */
-    public moveTo(destination: Destination): void
-    {
-        try {
-            // Clean up and restore previous location if any.
-            this.cleanAndRestore()
-
-            // Convert the destination into a DOM Node
-            this.destinationNode = NanosplashRepository.destinationToNode(destination)
-
-            // Replace splash instances having the same destination node
-            this.replaceSplashInstancesHavingSameDestination(this.destinationNode)
-
-            // Assess whether the destination node is the Document body or not
-            const targetIsBody = this.destinationNode === document.body
-
-            if (targetIsBody) {
-                this.moveWithFullscreenStrategy()
-            } else {
-                this.resetFullscreenAttributes()
-                this.moveWithRegularStrategy(this.destinationNode)
-            }
-
-            // Assemble the Nanosplash component
-            this.assembleNSComponent()
-        } catch (e) {
-            this.delete()
-            if (this.nsInstance.debug) {
-                console.warn(e)
-            }
-        }
-    }
-
-    /**
-     * # For Each Wrapped Node
-     * Invokes a callback for each wrapped node.
-     * @param {(node: Node) => void} callback
-     * @private
-     */
-    private forEachWrappedNode(callback: (node: Node) => void): void
-    {
-        Array.from(this.nsWrapperElement.childNodes).forEach(callback)
-    }
-
-    /**
-     * # Restore DOM Structure
-     * Undo the node wrapping and restore the wrapped nodes' original DOM position.
-     * @param {Node} parentNode
-     * @private
-     */
-    private restoreDOMStructure(parentNode: Node): void
-    {
-        this.forEachWrappedNode((child: Node) => parentNode.insertBefore(child, this.nsRootElement))
-    }
-
-    /**
-     * # Remove Elements From DOM
-     * @private
-     */
-    private removeElementsFromDOM(): void
-    {
-        [
-            this.nsTextElement,
-            this.nsSpinnerElement,
-            this.nsTextContainerElement,
-            this.nsImageElement,
-            this.nsContentElement,
-            this.nsWrapperElement,
-            this.nsWindowElement,
-            this.nsRootElement
-        ].forEach(v => v.remove())
-    }
-
-    /**
-     * # Delete
-     * Gracefully delete Splash instance and connected elements from DOM.
-     */
-    public delete(): void {
-        this.cleanAndRestore()
-        this.removeElementsFromDOM()
-        this.nsInstance.delete(this)
-    }
-}

package/src/Exceptions/DestinationException.ts

@@ -1,13 +0,0 @@
-import Exception from "./Exception";
-import {Destination} from "../types";
-
-class DestinationException extends Exception {
-    public destination: Destination
-    public constructor(message: string, destination: Destination, cause: Exception) {
-        super(message);
-        this.destination = destination
-        this.cause = cause
-    }
-}
-
-export default DestinationException

package/src/Exceptions/Exception.ts

@@ -1,9 +0,0 @@
-class Exception extends Error {
-    public constructor(message?: string, cause?: Exception) {
-        super(message);
-        this.name = this.constructor.name
-        this.cause = cause
-    }
-}
-
-export default Exception

package/src/Exceptions/IllegalArgumentException.ts

@@ -1,11 +0,0 @@
-import Exception from "./Exception";
-
-class IllegalArgumentException extends Exception {
-    public argument: any
-    public constructor(message: string, argument: any) {
-        super(message);
-        this.argument = argument
-    }
-}
-
-export default IllegalArgumentException

package/src/Factory/NanosplashFactory.ts

@@ -1,93 +0,0 @@
-import Nanosplash from "../Core/Nanosplash";
-import {SplashInstance} from "../Core/SplashInstance";
-import {NanosplashRepository} from "../Repositories/NanosplashRepository";
-import {ContextualAPIObject, ProgressFunction, ShowFunction, SplashJob, WhileFunction} from "../types";
-import {ShowInterface} from "../Interfaces/ShowInterface";
-
-/**
- * # Nanosplash Factory
- * @author Isak K. Hauge
- */
-export class NanosplashFactory {
-    /**
-     * # Ensure Instance
-     * Returns and modifies the splash instance, or creates a new one.
-     * @param {SplashInstance | null} splash Splash instance
-     * @param {Nanosplash} ns Nanosplash instance
-     * @param {string} text Splash text
-     * @param {string | undefined} imgSrc Splash image URL
-     * @private
-     */
-    private static ensureInstance(
-        splash: SplashInstance | null,
-        ns: Nanosplash,
-        text: string,
-        imgSrc?: string
-    ): SplashInstance
-    {
-        if (!splash) {
-            splash = new SplashInstance(ns, text, imgSrc)
-        }
-        return splash.setText(text).setImgSrc(splash.getImgSrc() ?? imgSrc)
-    }
-
-    /**
-     * # Create Show Function
-     * @param ns
-     * @param splash
-     * @return {ShowFunction} A curried function made for a specific splash instance.
-     */
-    public static createShowFunction(ns: Nanosplash, splash: SplashInstance | null): ShowFunction
-    {
-        return (text: string): ContextualAPIObject => {
-            splash = NanosplashFactory.ensureInstance(splash, ns, text)
-            ns.instances.set(splash.getId(), splash)
-            splash.moveTo(document.body)
-            return NanosplashRepository.createContextualApiObject(splash)
-        }
-    }
-
-    /**
-     * # Create Progress Function
-     * @param ns
-     * @param splash
-     * @return {ProgressFunction} A curried API function made for a specific splash instance.
-     */
-    public static createProgressFunction(ns: Nanosplash, splash: SplashInstance | null): ProgressFunction
-    {
-        return (...jobs: SplashJob[]) => {
-            splash = NanosplashFactory.ensureInstance(splash, ns, '')
-            splash.moveTo(document.body)
-            ;(async () => {
-                for (const [_, [job, text]] of jobs.entries()) {
-                    splash.setText(text)
-                    await job
-                }
-                splash.delete()
-            })()
-            return NanosplashRepository.createContextualApiObject(splash)
-        }
-    }
-
-    /**
-     * # Create While Function
-     * @param ns
-     * @param splash
-     * @return {ProgressFunction} A curried API function made for a specific splash instance.
-     */
-    public static createWhileFunction(ns: Nanosplash, splash: SplashInstance): WhileFunction
-    {
-        return (asyncTask: Promise<any>): ShowInterface => {
-            splash = NanosplashFactory.ensureInstance(splash, ns, '')
-            return {
-                show(text: string) {
-                    ns.instances.set(splash.getId(), splash)
-                    splash.moveTo(document.body)
-                    splash.setText(text)
-                    asyncTask.finally(() => (splash as SplashInstance).delete())
-                    return NanosplashRepository.createContextualApiObject(splash)
-                }
-            }
-        }
-    }
-}

package/src/Interfaces/ContextualAPIInterface.ts

@@ -1,8 +0,0 @@
-import {SplashInstance} from "../Core/SplashInstance";
-
-export interface ContextualAPIInterface {
-    getId: () => string
-    remove: () => void
-    moveTo: (selector: string) => void,
-    setText: (text: string) => SplashInstance
-}

package/src/Interfaces/IdentityInterface.ts

@@ -1,3 +0,0 @@
-export interface IdentityInterface {
-    getId: () => string
-}

package/src/Interfaces/InsideInterface.ts

@@ -1,5 +0,0 @@
-import {ContextualAPIInterface} from "./ContextualAPIInterface";
-
-export interface InsideInterface extends ContextualAPIInterface {
-    inside: (selector: string) => ContextualAPIInterface
-}