npm - nanosplash - Versions diffs - 2.3.2 → 2.5.0 - Mend

nanosplash 2.3.2 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/.github/workflows/production.yml +5 -2
package/README.md +38 -42
package/dist/iife/nanosplash.iife.js +1 -1
package/dist/module/manifest.json +1 -4
package/dist/module/nanosplash.cjs.js +1 -1
package/dist/module/nanosplash.es.js +92 -41
package/dist/module/style.css +1 -0
package/docs/index.html +71 -19
package/docs/nanosplash.iife.js +6 -1
package/docs/style.css +1 -1
package/docs/typedoc/assets/main.js +2 -2
package/docs/typedoc/assets/search.js +1 -1
package/docs/typedoc/classes/Core_Nanosplash.default.html +135 -0
package/docs/typedoc/modules/Core_Nanosplash.html +1 -1
package/docs/typedoc/modules/types.html +1 -1
package/index.html +70 -22
package/package.json +13 -13
package/src/Core/Nanosplash.ts +173 -24
package/src/Core/SplashInstance.ts +148 -11
package/src/Factory/NanosplashFactory.ts +33 -14
package/src/Interfaces/NanosplashInterface.ts +6 -2
package/src/main.ts +5 -2
package/src/repositories/NanosplashRepository.ts +29 -2
package/src/style.sass +47 -17
package/src/types.d.ts +23 -16
package/src/utilities/dom.spec.ts +5 -4
package/src/utilities/dom.ts +25 -2
package/vite.mod.config.js +11 -3
package/dist/module/Nanosplash.css +0 -1
package/docs/typedoc/classes/Core_Nanosplash.Nanosplash.html +0 -1
package/src/Interfaces/ImageInterface.ts +0 -5

package/index.html CHANGED Viewed

@@ -13,8 +13,23 @@
 	</head>
 	<body class="flex flex-col justify-between">
 		<div class="w-100 min-h-screen flex flex-col justify-center items-center">
-			<div class="text-3xl">Nanosplash</div>
-			<div class="mt-3">Small. Simple. Reliable.</div>
+			<div class="text-4xl text-slate-900 drop-shadow-lg">Nanosplash</div>
+			<div class="text-pink-500 mt-3 font-mono text-sm">ns.show('text').inside('#id')</div>
+			<div class="flex gap-5">
+				<div
+						id="demo"
+						class="bg-pink-500 text-pink-200 p-3 cursor-pointer hover:text-white rounded-xl shadow-xl mt-8"
+				>
+					<i class="lni lni-play"></i>
+					Display demo
+				</div>
+				<a
+						href="#example"
+						class="bg-slate-500 text-slate-200 p-3 cursor-pointer hover:text-white rounded-xl shadow-xl mt-8"
+				>
+					Show examples
+				</a>
+			</div>
 			<div class="flex flex-col space-y-2 my-10">
 				<div class="flex space-x-2 justify-center">
 					<img src="https://badgen.net/npm/v/nanosplash" />
@@ -28,13 +43,23 @@
 					/>
 				</div>
 			</div>
-			<div class="text-white bg-slate-700 p-3 rounded shadow-xl font-mono text-sm">ns.show('text').inside('#myDiv')</div>
+			<div class="flex rounded-xl text-slate-400 shadow-xl overflow-hidden">
+				<div data-copy class="p-3 bg-slate-800 text-slate-400 font-mono">
+					&lt;script src=&quot;https://unpkg.com/nanosplash/dist/iife/nanosplash.iife.js&quot;&gt;
+				</div>
+				<div id="copy" class="bg-pink-500 text-pink-200 p-3 cursor-pointer hover:text-white">Copy</div>
+			</div>
+			<div class="mt-10 flex justify-content items-center divide-x-2 text-slate-400">
+				<a href="https://www.npmjs.com/package/nanosplash" target="_blank"><i class="lni lni-npm text-4xl hover:text-pink-500 px-5"></i></a>
+				<a href="https://github.com/isakhauge/nanosplash" target="_blank"><i class="lni lni-github-original text-2xl hover:text-pink-500 px-5"></i></a>
+			</div>
+			<a class="mt-10 text-pink-300 hover:text-pink-500" href="https://rawcdn.githack.com/isakhauge/nanosplash/0a6cdef58b0e47c0cad911952b1a329df58d2c24/docs/typedoc/index.html">API Reference Documentation</a>
 		</div>
-		<div class="grid grid-cols-2 gap-1">
+		<div id="example" class="grid grid-cols-1 xl:grid-cols-2 gap-1">
 			<div id="a" class="p-20 bg-slate-100 flex flex-col items-center">
 				<div class="text-xl mb-10">Give user progress feedback</div>
-				<div class="text-white bg-slate-800 p-5 rounded-lg shadow-2xl font-mono text-sm">
-					ns.img(src).progress(<br>
+				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
+					ns.progress(<br>
 					&nbsp;&nbsp;[promise1, 'Loading A'],<br>
 					&nbsp;&nbsp;[promise2, 'Loading B'],<br>
 					&nbsp;&nbsp;[promise3, 'Loading C'],<br>
@@ -43,41 +68,64 @@
 			</div>
 			<div id="b" class="p-20 bg-slate-100 flex flex-col items-center">
 				<div class="text-xl mb-10">Handle async functions</div>
-				<div class="text-white bg-slate-800 p-5 rounded-lg shadow-2xl font-mono text-sm">
+				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
 					ns.while(promise).show('Loading ...').inside('#myDiv')
 				</div>
 			</div>
 			<div id="c" class="p-20 bg-slate-100 flex flex-col items-center">
 				<div class="text-xl mb-10">Display fullscreen</div>
-				<div class="text-white bg-slate-800 p-5 rounded-lg shadow-2xl font-mono text-sm">
-					const splash = ns.show('Fullscreen text')<br>
-					splash.moveTo('#myDiv')<br>
-					splash.remove()
+				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
+					ns.show('Fullscreen text')
 				</div>
 			</div>
 			<div id="d" class="p-20 bg-slate-100 flex flex-col items-center">
 				<div class="text-xl mb-10">Display multiple, independent instances</div>
-				<div class="text-white bg-slate-800 p-5 rounded-lg shadow-2xl font-mono text-sm">
-					ns.img(src).show('Loading component A').inside('#a')<br>
-					ns.show('Loading component A').inside('#b')<br>
-					ns.show('Loading component A').inside('#c')<br>
-					<br><br>
-					ns.hide() // Removes instances in a FIFO manner.<br>
-					ns.hideAll() // Removes all instances.
+				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
+					ns.show('Loading component A').inside('#a')<br>
+					ns.show('Loading component B').inside('#b')<br>
+					ns.show('Loading component C').inside('#c')
+				</div>
+			</div>
+			<div id="e" class="p-20 bg-slate-100 flex flex-col items-center">
+				<div class="text-xl mb-10">Move splash instance to another destination</div>
+				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
+					const splash = ns.show('Loading').inside('#a')<br>
+					splash.moveTo('#b')
+				</div>
+			</div>
+			<div id="f" class="p-20 bg-slate-100 flex flex-col items-center">
+				<div class="text-xl mb-10">Hide splash instances</div>
+				<div class="text-white bg-slate-800 p-5 rounded-xl shadow-2xl font-mono text-sm break-all">
+					// Hides one instance at a time, in a LIFO-fashion.<br>
+					ns.hide()<br><br>
+					// Hides all instances.<br>
+					ns.hideAll()
 				</div>
 			</div>
 		</div>
 		<footer>
 			<script type="module" src="/src/main.ts"></script>
+			<script>
+				document.getElementById('demo').onclick = function () {
+					const wait = ms => new Promise(r => setTimeout(r, ms))
+					window.ns.progress(
+						[wait(2000), 'Loading data from API'],
+						[wait(4000), 'Restructuring'],
+						[wait(6000), 'Indexing'],
+						[wait(8000), 'Give this repo a star']
+					)
+				}
+				document.getElementById('copy').onclick = function () {
+					const text = document.querySelector('[data-copy]').innerText
+					navigator.clipboard.writeText(text)
+					alert('Copied to clipboard!')
+				}
+			</script>
 		</footer>
 		<style>
 			body {
 				min-height: 100vh;
 			}
-			.pill {
-				font-size: 10px;
-				padding: 0.2em 0.5em;
-			}
 		</style>
 	</body>
 </html>

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "nanosplash",
-  "description": "The simple, 2KB loading screen",
-  "version": "2.3.2",
+  "description": "The simple, tiny loading screen",
+  "version": "2.5.0",
   "author": {
     "name": "Isak K. Hauge",
     "email": "isakhauge@gmail.com",
@@ -55,19 +55,19 @@
     "test": "jest"
   },
   "devDependencies": {
-    "@types/jest": "^27.5.0",
+    "@types/jest": "^28.1.1",
     "@types/jsdom": "^16.2.14",
     "autoprefixer": "^10.4.7",
-    "cssnano": "^5.1.7",
-    "jest": "^28.1.0",
-    "jest-environment-jsdom": "^28.1.0",
+    "cssnano": "^5.1.11",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
     "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"
+    "postcss": "^8.4.14",
+    "sass": "^1.52.3",
+    "ts-jest": "^28.0.4",
+    "ts-node": "^10.8.1",
+    "typedoc": "^0.22.17",
+    "typescript": "^4.7.3",
+    "vite": "^2.9.12"
   }
 }

package/src/Core/Nanosplash.ts CHANGED Viewed

@@ -1,69 +1,205 @@
 import '../style.sass'
+import {get} from "../utilities/dom";
 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";
+import {InstanceIterationCallback, NanosplashOptions, SplashJob} from "../types";
-export class Nanosplash implements NanosplashInterface {
+/**
+ * # Nanosplash
+ * @author Isak K. Hauge <isakhauge@gmail.com>
+ */
+class Nanosplash implements NanosplashInterface {
     public static APP_NAME = 'Nanosplash'
+    private static SPINNER_DEFAULT_VISIBILITY = true
+    private imgSrc: string | undefined
+    private spinner: boolean
+    private fontSize: string
     public readonly instances: Map<string, SplashInstance>
-    public constructor() {
+    /**
+     * Options passed to the constructor will persist in the instance.
+     * @param {NanosplashOptions | undefined} options Nanosplash options object.
+     */
+    public constructor(options?: NanosplashOptions) {
+        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>()
     }
-    public img(src: string): StrategyObject {
-        return NanosplashFactory.createImgFunction(this, new SplashInstance(this, '', src))(src)
+    /**
+     * # 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): ContextualAPIInterface {
-        return NanosplashFactory.createShowFunction(this, new SplashInstance(this, text))(text)
+        return NanosplashFactory.createShowFunction(this, new SplashInstance(this, text, this.imgSrc))(text)
     }
+    /**
+     * # Progress
+     * @param {SplashJob[]} jobs An array or list of Splash jobs.
+     * @return ContextualAPIInterface
+     */
     public progress(...jobs: SplashJob[]): ContextualAPIInterface {
-        return NanosplashFactory.createProgressFunction(this, new SplashInstance(this, ''))(...jobs)
+        return NanosplashFactory.createProgressFunction(this, new SplashInstance(this, '', this.imgSrc))(...jobs)
     }
+    /**
+     * # While
+     * @param {Promise<any>} asyncTask An asynchronous function or Promise.
+     * @return ContextualAPIInterface
+     */
     public while(asyncTask: Promise<any>): ShowInterface {
-        return NanosplashFactory.createWhileFunction(this, new SplashInstance(this, ''))(asyncTask)
+        return NanosplashFactory.createWhileFunction(this, new SplashInstance(this, '', this.imgSrc))(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++)) {
+    /**
+     * # 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()
-        )
+        this.instances.forEach((instance: SplashInstance) => instance.delete())
     }
-    public hide(id?: string): void {
-        if (id) {
-            const splashInstance = this.instances.get(id)
+    /**
+     * # 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 idOrSelector This can either be a SplashInstance ID or a CSS selector referring to the element in which
+     * the instance is residing.
+     */
+    public hide(idOrSelector?: string): void {
+        if (idOrSelector) {
+            const splashInstance = this.instances.get(idOrSelector)
             if (splashInstance) {
                 splashInstance.delete()
             } else {
-                throw new Error(
-                    `Could not find element with id: ${id}`
-                )
+                Array.from(this.instances.values())
+                    .filter((splashInstance: SplashInstance) => {
+                        return splashInstance.getDestination() === get<HTMLElement>(idOrSelector)
+                    })
+                    .forEach((splashInstance: SplashInstance) => splashInstance.delete())
             }
         } else {
-            this.fifoIterate((_: string, splashInstance: SplashInstance, i: number) => {
-                const remove = i === 0
+            const n = this.instances.size
+            this.lifoIterate((_: string, splashInstance: SplashInstance, i: number) => {
+                const remove = i === n - 1
                 if (remove) {
                     splashInstance.delete()
                 }
@@ -71,4 +207,17 @@ export class Nanosplash implements NanosplashInterface {
             })
         }
     }
+    /**
+     * # 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