nanosplash 2.2.4 → 2.3.2

package/src/style.sass

@@ -1,68 +1,58 @@
-// Keyframe animations:
-@keyframes pulse
-    from
-        transform: scale(1)
-    to
-        transform: scale(1.1)
+$z-index-regular: 1
+$z-index-fullscreen: 2
+$bg-color: rgba(White, 0.8)
 
-@keyframes spin
-    from
-        transform: rotate(0deg)
-    to
-        transform: rotate(360deg)
+%blur
+  overflow: hidden
+  filter: blur(5px)
 
-.nanosplash-container
-    // Base of container
-    position: absolute
-    flex-direction: column
-    justify-content: center
-    align-items: center
-    z-index: 1
-    border-radius: inherit
-    overflow: inherit
+.ns-wrapper
+  position: relative
 
-    // When container is hidden
-    &[hidden="true"]
-        display: none
-    // When container is visible
-    &:not([hidden="true"])
-        display: flex
+.ns-fs
+  top: 0
+  left: 0
+  position: fixed
+  min-width: 100%
+  min-height: 100vh
+  z-index: $z-index-fullscreen
 
-    // Standardized blur modes:
-    &[data-blur="none"]:not([hidden="true"]) ~ *
-        filter: blur(0)
-    &[data-blur="light"]:not([hidden="true"]) ~ *
-        filter: blur(2px)
-    &[data-blur="medium"]:not([hidden="true"]) ~ *
-        filter: blur(4px)
-    &[data-blur="heavy"]:not([hidden="true"]) ~ *
-        filter: blur(10px)
+// Fullscreen content blur
+body .ns-fs ~ *, .ns-blur
+  @extend %blur
 
-    // Loading text
-    .nanosplash-text
-        text-rendering: optimizeLegibility
-        -moz-osx-font-smoothing: grayscale
-        font-smoothing: antialiased
-        -webkit-font-smoothing: antialiased
-        text-shadow:  0 0 2px rgba(0, 0, 0, 0.2)
-    
-    // Splash image
-    img.nanosplash-img
-        margin-bottom: 40px
+.ns-window
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  display: flex
+  position: absolute
+  align-items: center
+  justify-content: center
+  z-index: $z-index-regular
+  background-color: $bg-color
 
-    // Standardized splash image animations:
-    &[data-splash-animation="pulse"] > img
-        animation-name: pulse
-        animation-duration: 300ms
-        animation-direction: alternate
-        animation-iteration-count: infinite
-    &[data-splash-animation="spin"] > img
-        animation-name: spin
-        animation-duration: 700ms
-        animation-iteration-count: infinite
-        animation-timing-function: linear
+.ns-img
+  max-width: 9rem
+  max-height: 9rem
+  margin-bottom: 1rem
 
-    // Style exception when container is the direct child of body
-    body > &:not([hidden="true"])
-        height: 100vh
-        width: 100%
+.ns-text
+  color: #333
+  display: flex
+  text-align: center
+  &::after
+    margin-left: 0.25em
+    content: '\00a0\00a0\00a0'
+    animation: anim 1s infinite
+
+@keyframes anim
+  0%
+    content: '\00a0\00a0\00a0'
+  30%
+    content: '.\00a0\00a0'
+  60%
+    content: '..\00a0'
+  90%
+    content: '...'

package/src/types.d.ts

@@ -1,205 +1,50 @@
-declare module 'nanosplash' {
-	/**
-	 * Nanosplash
-	 *
-	 * @author Isak K. Hauge
-	 */
-	class Nanosplash {
-		/**
-		 * Constructor
-		 *
-		 * @public
-		 * @constructor
-		 * @param {Config | undefined} config The configuration object.
-		 *
-		 * @example
-		 * ```js
-		 * // Instantiatie without config object.
-		 * new Nanosplash()
-		 * ```
-		 *
-		 * @example
-		 * ```js
-		 * // Instantiate with config object.
-		 * new Nanosplash(config)
-		 * ```
-		 */
-		constructor(config?: Config)
-
-		/**
-		 * Configure
-		 *
-		 * @param {Config} config The config object.
-		 * @return {Nanosplash} The updated instance.
-		 *
-		 * @description Mutates the existing configuration and returns the updated
-		 * instance.
-		 *
-		 * @example
-		 * ```js
-		 * nanosplash.configure(config)
-		 * ```
-		 *
-		 * @example
-		 * ```js
-		 * window.loading.configure(config).show(text)
-		 * ```
-		 */
-		configure(config: Config): Nanosplash
-
-		/**
-		 * Show
-		 *
-		 * @param {string | undefined} text The text that will be shown in the
-		 * loading screen. If undefined, Nanosplash will use the default text.
-		 * @return {DisplayController} An object with a function that controls the
-		 * visibility and destination of the loading screen.
-		 *
-		 * @description Shows the loading screen. Invoking the inside function will
-		 * display the loading screen within the constraints of the defined
-		 * destination.
-		 *
-		 * Basic usage.
-		 * @example
-		 * ```js
-		 * // Basic usage.
-		 * loading.show(text)
-		 * ```
-		 *
-		 * Display Nanosplash inside other DOM elements.
-		 * @example
-		 * ```js
-		 * // Show loading screen within another element using CSS selector.
-		 * loading.show(text).inside('#my-element')
-		 * // Use DOM element reference.
-		 * loading.show(text).inside(document.getElementById(id))
-		 * // Use function that returns a DOM element reference.
-		 * loading.show(text).inside(() => getDomReference())
-		 * ```
-		 *
-		 * Display Nanosplash while an asynchronous task is resolving.
-		 * @example
-		 * ```js
-		 * // Define an asynchronous task.
-		 * const task = async () => await getDataFromApi()
-		 * // Show loading screen while the task is running.
-		 * loading.show(text).during(task)
-		 * loading.show(text).inside('#my-element').during(task)
-		 * ```
-		 */
-		show(text?: string): DisplayController
-
-		/**
-		 * Hide
-		 *
-		 * @description Hides the loading screen and moves to its default destination.
-		 * If no custom default destination is defined, it will move to the document
-		 * body.
-		 *
-		 * @example
-		 * ```js
-		 * // Basic usage
-		 * loading.hide()
-		 * // Use with async functions
-		 * loading.show('Loading ...')
-		 * await fetchStuffFromApi()
-		 * loading.hide()
-		 * ```
-		 */
-		hide(): void
-
-		/**
-		 * Install
-		 *
-		 * @description Assigns itself to the Window object and sets essential event
-		 * listeners that responds to changes in the browser. The instance is
-		 * globally accessible through the property "loading".
-		 *
-		 * @example
-		 * ```js
-		 * // Install
-		 * (new Nanosplash()).install()
-		 *
-		 * // Access the instance globally
-		 * loading.show('Some text')
-		 * ```
-		 */
-		public install(): void
-	}
-
-	type SplashAnimation = 'none' | 'pulse' | 'spin'
-
-	type DefaultOptions = {
-		destination?: Destination
-		text?: string
-	}
-
-	type TextOptions = {
-		family?: string
-		weight?: string
-		color?: string
-		size?: string
-	}
-
-	type SplashOptions = {
-		src?: string
-		width?: string
-		height?: string
-		animation?: SplashAnimation
-	}
-
-	type BlurMode = 'none' | 'light' | 'medium' | 'heavy'
+import {Nanosplash} from "./Core/Nanosplash";
+import {ShowInterface} from "./Interfaces/ShowInterface";
+import {InsideInterface} from "./Interfaces/InsideInterface";
+import {SplashInstance} from "./Core/SplashInstance";
+import {ContextualAPIInterface} from "./Interfaces/ContextualAPIInterface";
 
-	type BackgroundOptions = {
-		color?: string
-		blur?: BlurMode
-	}
-
-	type Destination = Node | Element | DestinationCallback | string
-
-	type DestinationCallback = () => Element
-
-	type Config = {
-		default?: DefaultOptions
-		text?: TextOptions
-		splash?: SplashOptions
-		background?: BackgroundOptions
-	}
-
-	type TargetNodeController<T> = (target: T, asFirstChild?: boolean) => void
-	type TargetNodeObject<T> = {
-		[key: string]: TargetNodeController<T>
-	}
-	type TaskController<T> = (task: Promise<T>) => Promise<void>
-
-	type DisplayController = {
-		during: (task: Promise<any>) => Promise<void>
-		inside: (destination: Destination) => {
-			during: (task: Promise<any>) => Promise<void>
-		}
-	}
-
-	/**
-	 * @internal
-	 */
-	type MakeOptions = {
-		id?: string
-		className?: string
-		attributes?: { key: string; value: string | null }[]
-		eventListeners?: {
-			event: keyof HTMLElementEventMap
-			handler: EventListener
-		}[]
-		content?: Node | Element | HTMLElement | string
+declare global {
+	interface Window {
+		ns: Nanosplash
 	}
+}
 
-	/**
-	 * @internal
-	 */
-	type HTMLElementTag = keyof HTMLElementTagNameMap
+type Destination = Node | string
+type SplashJob = [Promise<any>, string]
+
+/**
+ * @internal
+ */
+export type HTMLElementTag = keyof HTMLElementTagNameMap
+
+/**
+ * @internal
+ */
+type CSSProperty = keyof CSSStyleDeclaration
+
+type ShowFunction = (text: string) => ContextualAPIInterface
+type ProgressFunction = (...[]: SplashJob[]) => ContextualAPIInterface
+type WhileFunction = (asyncTask: Promise<any>) => ShowInterface
+type StrategyObject = {
+    show: ShowFunction,
+    progress: ProgressFunction,
+    while: WhileFunction
+}
+type ImgFunction = (src: string) => StrategyObject
+type InsideFunction = (selector: string) => ContextualAPIInterface
+type ContextualAPIObject = {
+	getId: () => string,
+	inside?: InsideFunction,
+	remove: () => void
+	moveTo: (selector: string) => void,
+	getText: () => string,
+	setText: (text: string) => SplashInstance,
+	getImgSrc: () => string | undefined,
+	setImgSrc: (src?: string) => SplashInstance
+}
 
-	/**
-	 * @internal
-	 */
-	type CSSProperty = keyof CSSStyleDeclaration
+declare module 'nanosplash' {
+	class Nanosplash {}
+	class SplashInstance {}
 }

package/src/utilities/dom.spec.ts

@@ -0,0 +1,70 @@
+import {addClass, get, mk, move, setAttr} from "./dom";
+
+const resetDOM = () => document.body.innerHTML = ''
+
+test('Single DOM get function', () => {
+	const element = document.createElement('div')
+	element.id = 'a'
+	element.classList.add('b')
+	element.setAttribute('data-ref', 'c')
+	document.body.append(element)
+
+	const selector = 'div#a.b[data-ref="c"]'
+	const refElement = get<HTMLDivElement>(selector)
+
+	expect(refElement?.outerHTML).toBe(element.outerHTML)
+
+	resetDOM()
+})
+
+test('Move Element from origin to destination', () => {
+	const html = `
+		<div id="main">
+			<div id="a">
+			    <div id="b">
+			        <div id="c">
+		                <div id="first"></div>
+                    </div>
+                </div>
+            </div>
+		</div>
+	`
+	document.body.innerHTML = html
+
+    const main = get('#main') as HTMLDivElement
+    const first = get('#first') as HTMLDivElement
+    const b = get('#b') as HTMLDivElement
+    const c = get('#c') as HTMLDivElement
+
+    move(b, main)
+    move(c, main)
+    move(first, main, true)
+
+    const ids = Array.from(main.children).map((v => v.id))
+
+	expect(ids.join(',')).toBe('first,a,b,c')
+
+	resetDOM()
+})
+
+test('Make HTML Element', () => {
+	document.body.appendChild(mk('span'))
+	const span = document.body.children.item(0) as Node
+	expect(span instanceof HTMLSpanElement).toBe(true)
+	resetDOM()
+})
+
+test('Add CSS classes', () => {
+	const div = mk('div')
+	addClass(div, 'ns-1', 'ns-2', 'ns-3')
+	expect(div.classList.toString()).toBe('ns-1 ns-2 ns-3')
+	resetDOM()
+})
+
+test('Set Node attribute', () => {
+	const div = mk('div')
+	const attr = {name: 'data-test', value: 'success'}
+	setAttr(div, attr.name, attr.value)
+	expect(div.getAttribute(attr.name)).toBe(attr.value)
+	resetDOM()
+})