nanosplash 2.2.4 → 2.3.2

package/package.json

@@ -1,68 +1,73 @@
 {
-	"name": "nanosplash",
-	"description": "The simple, 2KB loading screen",
-	"version": "2.2.4",
-	"author": {
-		"name": "Isak K. Hauge",
-		"email": "isakhauge@gmail.com",
-		"url": "https://no.linkedin.com/in/isakhauge"
-	},
-	"keywords": [
-		"loading",
-		"loader",
-		"screen",
-		"splash",
-		"nano",
-		"nanosplash",
-		"small",
-		"tiny",
-		"es",
-		"esm",
-		"ts",
-		"typescript",
-		"iife",
-		"cdn",
-		"vite"
-	],
-	"homepage": "https://isakhauge.github.io/nanosplash",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/isakhauge/nanosplash.git"
-	},
-	"license": "MIT",
-	"main": "./dist/module/nanosplash.es.js",
-	"module": "./dist/module/nanosplash.es.js",
-	"source": "./src/Nanosplash.ts",
-	"unpkg": "./dist/iife/nanosplash.iife.js",
-	"style": "./dist/module/style.css",
-	"exports": {
-		".": {
+  "name": "nanosplash",
+  "description": "The simple, 2KB loading screen",
+  "version": "2.3.2",
+  "author": {
+    "name": "Isak K. Hauge",
+    "email": "isakhauge@gmail.com",
+    "url": "https://no.linkedin.com/in/isakhauge"
+  },
+  "keywords": [
+    "loading",
+    "loader",
+    "screen",
+    "splash",
+    "nano",
+    "nanosplash",
+    "small",
+    "tiny",
+    "es",
+    "esm",
+    "ts",
+    "typescript",
+    "iife",
+    "cdn",
+    "vite"
+  ],
+  "homepage": "https://isakhauge.github.io/nanosplash",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/isakhauge/nanosplash.git"
+  },
+  "license": "MIT",
+  "main": "./dist/module/nanosplash.es.js",
+  "module": "./dist/module/nanosplash.es.js",
+  "source": "./src/Nanosplash.ts",
+  "unpkg": "./dist/iife/nanosplash.iife.js",
+  "style": "./dist/module/style.css",
+  "exports": {
+    ".": {
       "import": "./dist/module/nanosplash.es.js",
-			"require": "./dist/module/nanosplash.cjs.js",
-			"default": "./dist/module/nanosplash.es.js"
-		}
-	},
-	"types": "./src/types.d.ts",
-	"scripts": {
-		"dev": "vite --host",
-		"build.iife": "vite build -c vite.iife.config.js",
-		"build.mod": "vite build -c vite.mod.config.js",
-		"build.site": "vite build -c vite.site.config.js",
-		"build": "tsc && yarn build.iife && yarn build.mod && yarn build.site && yarn doc",
-		"doc": "typedoc --readme none --excludePrivate --excludeInternal --out docs/typedoc --entryPoints src/Nanosplash.ts src/types.d.ts",
-		"doc.watch": "yarn doc --watch",
-		"serve": "vite preview"
-	},
-	"devDependencies": {
-		"@vitejs/plugin-vue": "^1.9.2",
-		"@vue/compiler-sfc": "^3.2.19",
-		"autoprefixer": "^10.3.6",
-		"cssnano": "^5.0.8",
-		"postcss": "^8.3.8",
-		"sass": "^1.42.1",
-		"typedoc": "^0.22.5",
-		"typescript": "^4.4.3",
-		"vite": "^2.6.2",
-		"vite-plugin-singlefile": "^0.5.1"
-	}
+      "require": "./dist/module/nanosplash.cjs.js",
+      "default": "./dist/module/nanosplash.es.js"
+    }
+  },
+  "types": "./src/types.d.ts",
+  "scripts": {
+    "dev": "vite --host",
+    "build.iife": "vite build -c vite.iife.config.js",
+    "build.mod": "vite build -c vite.mod.config.js",
+    "build.site": "vite build -c vite.site.config.js",
+    "build": "tsc && yarn build.iife && yarn build.mod && yarn build.site && yarn doc",
+    "doc": "typedoc --readme none --excludePrivate --excludeInternal --out docs/typedoc --entryPoints src/Core/Nanosplash.ts src/types.d.ts",
+    "doc.watch": "yarn doc --watch",
+    "serve": "vite preview",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "@types/jest": "^27.5.0",
+    "@types/jsdom": "^16.2.14",
+    "autoprefixer": "^10.4.7",
+    "cssnano": "^5.1.7",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
+    "jsdom": "^19.0.0",
+    "postcss": "^8.4.13",
+    "sass": "^1.51.0",
+    "ts-jest": "^28.0.2",
+    "ts-node": "^10.7.0",
+    "typedoc": "^0.22.15",
+    "typescript": "^4.6.4",
+    "vite": "^2.9.8"
+  }
 }

package/src/Core/Nanosplash.ts

@@ -0,0 +1,74 @@
+import '../style.sass'
+import {SplashInstance} from "./SplashInstance";
+import {SplashJob, StrategyObject} from "../types";
+import {ShowInterface} from "../Interfaces/ShowInterface";
+import {NanosplashFactory} from "../Factory/NanosplashFactory";
+import {NanosplashInterface} from "../Interfaces/NanosplashInterface";
+import {ContextualAPIInterface} from "../Interfaces/ContextualAPIInterface";
+
+export class Nanosplash implements NanosplashInterface {
+    public static APP_NAME = 'Nanosplash'
+    public readonly instances: Map<string, SplashInstance>
+
+    public constructor() {
+        this.instances = new Map<string, SplashInstance>()
+    }
+
+    public img(src: string): StrategyObject {
+        return NanosplashFactory.createImgFunction(this, new SplashInstance(this, '', src))(src)
+    }
+
+    public show(text: string): ContextualAPIInterface {
+        return NanosplashFactory.createShowFunction(this, new SplashInstance(this, text))(text)
+    }
+
+    public progress(...jobs: SplashJob[]): ContextualAPIInterface {
+        return NanosplashFactory.createProgressFunction(this, new SplashInstance(this, ''))(...jobs)
+    }
+
+    public while(asyncTask: Promise<any>): ShowInterface {
+        return NanosplashFactory.createWhileFunction(this, new SplashInstance(this, ''))(asyncTask)
+    }
+
+    private fifoIterate(callback: (id: string, splashInstance: SplashInstance, i: number) => boolean): void {
+        let i = 0
+        const instanceEntries = this.instances.entries()
+        for (const [id, splashInstance] of instanceEntries) {
+            if (!callback(id, splashInstance, i++)) {
+                break
+            }
+        }
+    }
+
+    public delete(splashInstance: SplashInstance): void {
+        this.instances.delete(splashInstance.getId())
+    }
+
+    public hideAll(): void
+    {
+        this.instances.forEach(
+            (instance: SplashInstance) => instance.delete()
+        )
+    }
+
+    public hide(id?: string): void {
+        if (id) {
+            const splashInstance = this.instances.get(id)
+            if (splashInstance) {
+                splashInstance.delete()
+            } else {
+                throw new Error(
+                    `Could not find element with id: ${id}`
+                )
+            }
+        } else {
+            this.fifoIterate((_: string, splashInstance: SplashInstance, i: number) => {
+                const remove = i === 0
+                if (remove) {
+                    splashInstance.delete()
+                }
+                return remove
+            })
+        }
+    }
+}

package/src/Core/SplashInstance.ts

@@ -0,0 +1,154 @@
+import {Destination} from "../types";
+import {Nanosplash} from "./Nanosplash";
+import {addClass, mk, move, setAttr} from "../utilities/dom";
+import {NanosplashRepository} from "../repositories/NanosplashRepository";
+import {IdentityInterface} from "../Interfaces/IdentityInterface";
+
+export class SplashInstance implements IdentityInterface {
+    private readonly id: string
+    private imgSrc: string | undefined
+    private readonly nsInstance: Nanosplash
+    private readonly nsRootElement: HTMLDivElement = mk('div') as HTMLDivElement
+    private readonly nsWrapperElement: HTMLDivElement = mk('div') as HTMLDivElement
+    private readonly nsWindowElement: HTMLDivElement = mk('div') as HTMLDivElement
+    private readonly nsContentElement: HTMLDivElement = mk('div') as HTMLDivElement
+    private readonly nsImageElement: HTMLImageElement = mk('img') as HTMLImageElement
+    private readonly nsTextElement: HTMLDivElement = mk('div') as HTMLDivElement
+
+    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.assembleNSComponent()
+        this.setImgSrc(imgSrc)
+    }
+
+    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.nsWindowElement, 'ns', 'ns-window')
+        addClass(this.nsRootElement, 'ns-wrapper')
+    }
+
+    private assembleElementStructure(): void
+    {
+        this.nsContentElement.append(this.nsImageElement, this.nsTextElement)
+        this.nsWindowElement.append(this.nsContentElement)
+        this.nsRootElement.append(this.nsWrapperElement, this.nsWindowElement)
+    }
+
+    private assembleNSComponent(): void {
+        this.nsRootElement.id = this.getId()
+        setAttr(this.nsRootElement, 'data-ctx', 'nanosplash')
+        this.assembleElementStructure()
+        this.assignCSSClasses()
+    }
+
+    public getId(): string
+    {
+        return this.id
+    }
+
+    public getText(): string
+    {
+        return this.nsTextElement.innerText
+    }
+
+    public setText(text: string): SplashInstance {
+        this.nsTextElement.innerText = text
+        return this
+    }
+
+    public getImgSrc(): string | undefined
+    {
+        return this.imgSrc
+    }
+
+    public setImgSrc(src?: string): SplashInstance
+    {
+        this.nsImageElement.src = src ?? ''
+        this.nsImageElement.style.display = src ? 'block' : 'none'
+        this.assembleElementStructure()
+        return this
+    }
+
+    private cleanup(): void
+    {
+        const currentParent = this.nsRootElement.parentElement
+        if (currentParent) {
+            this.restoreDOMStructure(currentParent)
+        }
+    }
+
+    private resetFullscreenAttributes(): void
+    {
+        setAttr(this.nsRootElement, 'style', '')
+        this.nsRootElement.classList.remove('ns-fs')
+    }
+
+    private moveWithRegularStrategy(targetNode: Node): void
+    {
+        const targetParentNode = targetNode.parentNode
+        if (targetParentNode) {
+            this.restoreDOMStructure(targetParentNode)
+            targetParentNode.replaceChild(this.nsRootElement, targetNode)
+            this.nsWrapperElement.appendChild(targetNode)
+        }
+    }
+
+    private moveWithFullscreenStrategy(): void
+    {
+        this.nsRootElement.classList.add('ns-fs')
+        move(this.nsRootElement, document.body, true)
+    }
+
+    public moveTo(destination: Destination): void
+    {
+        this.cleanup()
+        const targetNode = NanosplashRepository.destinationToNode(destination)
+        const targetIsBody = targetNode === document.body
+        if (targetIsBody) {
+            this.moveWithFullscreenStrategy()
+        } else {
+            this.resetFullscreenAttributes()
+            this.moveWithRegularStrategy(targetNode)
+        }
+        this.assembleNSComponent()
+    }
+
+    private forEachWrappedNode(callback: (node: Node) => void): void
+    {
+        Array.from(this.nsWrapperElement.childNodes).forEach(callback)
+    }
+
+    private restoreDOMStructure(parentNode: Node): void
+    {
+        this.forEachWrappedNode((child: Node) => parentNode.insertBefore(child, this.nsRootElement))
+    }
+
+    private removeElementsFromDOM(): void
+    {
+        [
+            this.nsTextElement,
+            this.nsImageElement,
+            this.nsContentElement,
+            this.nsWrapperElement,
+            this.nsWindowElement,
+            this.nsRootElement
+        ].forEach(v => v.remove())
+    }
+
+    public delete(): void {
+        this.cleanup()
+        this.removeElementsFromDOM()
+        this.nsInstance.delete(this)
+    }
+}

package/src/Factory/NanosplashFactory.ts

@@ -0,0 +1,73 @@
+import {ImgFunction, ProgressFunction, ShowFunction, SplashJob, WhileFunction} from "../types";
+import {Nanosplash} from "../Core/Nanosplash";
+import {SplashInstance} from "../Core/SplashInstance";
+import {NanosplashRepository} from "../repositories/NanosplashRepository";
+
+export class NanosplashFactory {
+    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)
+    }
+
+    public static createImgFunction(ns: Nanosplash, splash: SplashInstance | null): ImgFunction
+    {
+        return (src: string) => {
+            splash = NanosplashFactory.ensureInstance(splash, ns, '', src)
+            return {
+                show: NanosplashFactory.createShowFunction(ns, splash),
+                progress: NanosplashFactory.createProgressFunction(ns, splash),
+                while: NanosplashFactory.createWhileFunction(ns, splash)
+            }
+        }
+    }
+
+    public static createShowFunction(ns: Nanosplash, splash: SplashInstance | null): ShowFunction
+    {
+        return (text: string) => {
+            splash = NanosplashFactory.ensureInstance(splash, ns, text)
+            ns.instances.set(splash.getId(), splash)
+            splash.moveTo(document.body)
+            return NanosplashRepository.createContextualApiObject(splash)
+        }
+    }
+
+    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)
+        }
+    }
+
+    public static createWhileFunction(ns: Nanosplash, splash: SplashInstance): WhileFunction
+    {
+        return (asyncTask: Promise<any>) => {
+            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

@@ -0,0 +1,8 @@
+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

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

package/src/Interfaces/ImageInterface.ts

@@ -0,0 +1,5 @@
+import {ImgFunction} from "../types";
+
+export interface ImageInterface {
+    img: ImgFunction
+}

package/src/Interfaces/InsideInterface.ts

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

package/src/Interfaces/NanosplashInterface.ts

@@ -0,0 +1,4 @@
+import {StrategyObject} from "../types";
+import {ImageInterface} from "./ImageInterface";
+
+export interface NanosplashInterface extends StrategyObject, ImageInterface {}

package/src/Interfaces/ProgressInterface.ts

@@ -0,0 +1,5 @@
+import {ProgressFunction} from "../types";
+
+export interface ProgressInterface {
+    progress: ProgressFunction
+}

package/src/Interfaces/ShowInterface.ts

@@ -0,0 +1,5 @@
+import {ShowFunction} from "../types";
+
+export interface ShowInterface {
+    show: ShowFunction
+}

package/src/Interfaces/WhileInterface.ts

@@ -0,0 +1,5 @@
+import {WhileFunction} from "../types";
+
+export interface WhileInterface {
+    while: WhileFunction
+}

package/src/main.ts

@@ -1,6 +1,2 @@
-import { Nanosplash } from './Nanosplash'
-
-const windowExists = window && window instanceof Window
-if (windowExists) {
-	new Nanosplash().install()
-}
+import {Nanosplash} from "./Core/Nanosplash";
+window.addEventListener('load', () => window.ns = new Nanosplash())

package/src/repositories/NanosplashRepository.ts

@@ -1,59 +1,38 @@
-import { BlurMode, SplashAnimation } from 'nanosplash'
-import { create } from '../utilities/dom'
+import {get} from "../utilities/dom";
+import {SplashInstance} from "../Core/SplashInstance";
+import {ContextualAPIObject, Destination} from "../types";
 
 export class NanosplashRepository {
-	public static readonly DEFAULT = {
-		DESTINATION_NODE: document.body,
-		TEXT: 'Loading ...',
-		TEXT_FONT: '"Arial", sans-serif',
-		TEXT_WEIGHT: 'medium',
-		TEXT_COLOR: '#555',
-		TEXT_SIZE: '26px',
-		SPLASH_WIDTH: '100px',
-		SPLASH_HEIGHT: 'auto',
-		SPLASH_ANIMATION: 'pulse' as SplashAnimation,
-		BACKGROUND_COLOR: 'rgba(255, 255, 255, 0.90)',
-		BACKGROUND_BLUR: 'light' as BlurMode,
-	}
+    public static destinationToNode(destination: Destination): HTMLElement
+    {
+        if (typeof destination === 'string') {
+            const element = get<HTMLElement>(destination)
+            if (!element) {
+                throw new Error(`No match with ${destination}`)
+            }
+            return element
+        } else if (destination instanceof Node) {
+            return destination as HTMLElement
+        }
+        throw new Error('Destination argument must string or Node')
+    }
 
-	/**
-	 * Make Main Element
-	 */
-	public static makeMainElement(): HTMLDivElement {
-		const mainElement = create('div', {
-			className: 'nanosplash-container',
-			attributes: [
-				{
-					key: 'data-splash-animation',
-					value: this.DEFAULT.SPLASH_ANIMATION,
-				},
-			],
-		}) as HTMLDivElement
-		mainElement.style.backgroundColor = this.DEFAULT.BACKGROUND_COLOR
-		return mainElement
-	}
-
-	/**
-	 * Make Splash Element
-	 */
-	public static makeSplashElement(): HTMLImageElement {
-		const splashElement = create('img', {
-			className: 'nanosplash-img',
-			attributes: [
-				{ key: 'src', value: null },
-				{ key: 'alt', value: 'Nanosplash indicator' },
-			],
-		}) as HTMLImageElement
-		return splashElement
-	}
-
-	/**
-	 * Make Text Element
-	 */
-	public static makeTextElement(): HTMLDivElement {
-		return create('div', {
-			className: 'nanosplash-text',
-			content: this.DEFAULT.TEXT,
-		}) as HTMLDivElement
-	}
+    public static createContextualApiObject(splash: SplashInstance): ContextualAPIObject {
+        const ctx = {
+            getId: () => splash.getId(),
+            remove: () => splash.delete(),
+            moveTo: (selector: string) => splash.moveTo(selector),
+            getText: () => splash.getText(),
+            setText: (text: string) => splash.setText(text),
+            getImgSrc: () => splash.getImgSrc(),
+            setImgSrc: (src?: string) => splash.setImgSrc(src)
+        }
+        return {
+            ...ctx,
+            inside: (selector: string) => {
+                splash.moveTo(selector)
+                return ctx
+            },
+        }
+    }
 }