nanosplash 2.5.2 → 3.0.0

package/src/Interfaces/NanosplashInterface.ts

@@ -1,8 +0,0 @@
-import {StrategyObject} from "../types";
-import {SplashInstance} from "../Core/SplashInstance";
-
-export interface NanosplashInterface extends StrategyObject {
-    delete(splashInstance: SplashInstance): void
-    hideAll(): void
-    hide(id?: string): void
-}

package/src/Interfaces/ProgressInterface.ts

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

package/src/Interfaces/ShowInterface.ts

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

package/src/Interfaces/WhileInterface.ts

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

package/src/Repositories/NanosplashRepository.ts

@@ -1,82 +0,0 @@
-import Exception from "../Exceptions/Exception";
-import {addClass, get, mk} from "../Utilities/dom";
-import {SplashInstance} from "../Core/SplashInstance";
-import {ContextualAPIObject, Destination} from "../types";
-import DestinationException from "../Exceptions/DestinationException";
-import IllegalArgumentException from "../Exceptions/IllegalArgumentException";
-
-export class NanosplashRepository {
-    /**
-     * # Destination To Node
-     * Converts a Destination type into an HTMLElement.
-     * @param {Destination} destination Either a node or a CSS selector.
-     * @throws DestinationException
-     * @throws IllegalArgumentException
-     */
-    public static destinationToNode(destination: Destination): HTMLElement
-    {
-        if (typeof destination === 'string') {
-            try {
-                const element = get<HTMLElement>(destination)
-                if (!element) {
-                    throw new Exception(`No DOM match with ${destination}`)
-                }
-                return element
-            } catch (e) {
-                throw new DestinationException(
-                    `Destination (${destination}) is either invalid or non-existing in DOM`,
-                    destination,
-                    e as Exception
-                )
-            }
-        } else if (destination instanceof Node) {
-            return destination as HTMLElement
-        }
-
-        throw new IllegalArgumentException(
-            `Destination (${destination}) must be either a Node or a CSS selector`,
-            destination
-        )
-    }
-
-    /**
-     * # Create Contextual API Object
-     * Creates an object containing props that adhere to the ns API.
-     * @param {SplashInstance} splash
-     */
-    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
-            },
-        }
-    }
-
-    /**
-     * # Create Nanosplash Spinner Element
-     * Returns a DIV element wrapping an SVG element.
-     */
-    public static createNanosplashSpinnerElement(): HTMLDivElement
-    {
-        const div = mk('div') as HTMLDivElement
-        addClass(div, 'ns-spinner')
-        div.innerHTML = `
-            <svg viewBox="0 0 50 50">
-                <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
-            </svg>
-        `
-        return div
-    }
-}

package/src/Tests/dom.spec.ts

@@ -1,72 +0,0 @@
-import {test} from "vitest"
-import {addClass, get, mk, move, setAttr} from "../Utilities/dom"
-
-const resetDOM = () => document.body.innerHTML = ''
-
-test('Get DOM element 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', () => {
-	const span = mk('span')
-	document.body.appendChild(span)
-	const spanFromDom = document.body.children.item(0) as Node
-	expect(spanFromDom 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()
-})

package/src/Utilities/dom.ts

@@ -1,49 +0,0 @@
-import {ElementTag} from "../types";
-
-/**
- * # Get
- * Helper function to get Elements from the DOM using CSS selector.
- * @param {string} selector CSS Selector.
- */
-export function get<T>(selector: string): HTMLElement | T | null {
-    return document.querySelector(selector) as HTMLElement | T | null
-}
-
-/**
- * # Move
- * Helper function that can move a node inside another node.
- * @param {Node} source The node to be moved.
- * @param {Node} destination The destination node.
- * @param {boolean} asFirstChild Append or prepend the new node inside the child list.
- */
-export function move(source: Node, destination: Node, asFirstChild: boolean = false): void
-{
-    if (source && destination) {
-        (destination.hasChildNodes() && asFirstChild)
-            ? destination.insertBefore(source, destination.firstChild)
-            : destination.appendChild(source)
-    }
-}
-
-/**
- * # Make
- * Short hand helper function that creates Nodes.
- * @param {ElementTag} tag
- */
-export const mk = (tag: ElementTag) => document.createElement(tag)
-
-/**
- * # Add Class
- * Helper class that easily adds classes to an element.
- * @param {HTMLElement} node The node
- * @param {...string[]} classes
- */
-export function addClass(node: HTMLElement, ...classes: string[]): void
-{
-    node.classList.add(...classes)
-}
-
-export function setAttr(node: HTMLElement, attribute: string, value: string): void
-{
-    node.setAttribute(attribute, value)
-}

package/src/style.sass

@@ -1,88 +0,0 @@
-$z-index-regular: 1
-$z-index-fullscreen: 2
-$text-color: #5a6685
-$bg-color: rgba(White, 0.8)
-
-%blur
-  overflow: hidden
-  filter: blur(5px)
-
-// Wraps the content replaced by Nanosplash
-.ns-wrapper
-  position: relative
-
-// Only active while in fullscreen mode
-.ns-fs
-  top: 0
-  left: 0
-  position: fixed
-  min-width: 100%
-  min-height: 100vh
-  z-index: $z-index-fullscreen
-
-// Blurs the wrapped content
-body .ns-fs ~ *, .ns-blur
-  @extend %blur
-
-// Nanosplash window containing image and text
-.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
-
-// Image
-.ns-img
-  width: 9rem
-  max-height: 9rem
-  margin-bottom: 2em
-
-// Text container containing text and spinner
-.ns-text-container
-  display: flex
-  justify-content: center
-  align-items: center
-
-// Text node
-.ns-text
-  display: flex
-  justify-content: center
-  color: $text-color
-
-// Spinner node
-.ns-spinner
-  display: flex
-  margin-left: 1em
-  width: 1em
-  height: 1em
-  & > svg
-    animation: Rotate 2s linear infinite
-    position: relative
-    width: inherit
-    height: inherit
-    stroke-width: 8
-  & .path
-    stroke: $text-color
-    stroke-linecap: round
-    animation: Dash 1.5s ease-in-out infinite
-
-// Spinner animations:
-@keyframes Rotate
-  100%
-    transform: rotate(360deg)
-@keyframes Dash
-  0%
-    stroke-dasharray: 1, 150
-    stroke-dashoffset: 0
-  50%
-    stroke-dasharray: 90, 150
-    stroke-dashoffset: -35
-  100%
-    stroke-dasharray: 90, 150
-    stroke-dashoffset: -124

package/src/types.d.ts

@@ -1,59 +0,0 @@
-import Nanosplash from "./Core/Nanosplash";
-import {SplashInstance} from "./Core/SplashInstance";
-import {ShowInterface} from "./Interfaces/ShowInterface";
-import {ContextualAPIInterface} from "./Interfaces/ContextualAPIInterface";
-import {NanosplashInterface} from "./Interfaces/NanosplashInterface";
-
-declare global {
-	interface Window {
-		Nanosplash: typeof Nanosplash
-		installNanosplash: (options?: NanosplashOptions) => void
-		ns: Nanosplash
-	}
-}
-
-export type Destination = Node | string
-export type SplashJob = [Promise<any>, string]
-
-/**
- * @internal
- */
-export type ElementTag = keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap
-
-/**
- * @internal
- */
-type CSSProperty = keyof CSSStyleDeclaration
-
-export type ShowFunction = (text: string) => ContextualAPIObject
-export type ProgressFunction = (...[]: SplashJob[]) => ContextualAPIObject
-export type WhileFunction = (asyncTask: Promise<any>) => ShowInterface
-export type StrategyObject = {
-    show: ShowFunction,
-    progress: ProgressFunction,
-    while: WhileFunction
-}
-
-export type InsideFunction = (selector: string) => ContextualAPIInterface
-
-export 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
-}
-
-export type InstanceIterationCallback = (id: string, splashInstance: SplashInstance, i: number) => boolean
-
-export type NanosplashOptions = {
-	imgSrc?: string,
-	spinner?: boolean,
-	fontSize?: string,
-	debug?: boolean
-}
-
-export default Nanosplash

package/update-all.sh

@@ -1,3 +0,0 @@
-#!/usr/bin/env bash
-yarn remove @types/jsdom autoprefixer cssnano jsdom postcss sass ts-jest ts-node typedoc typescript vite vitest
-yarn add -D @types/jsdom autoprefixer cssnano jsdom postcss sass ts-jest ts-node typedoc typescript vite vitest

package/vite.iife.config.js

@@ -1,72 +0,0 @@
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-	mode: 'production',
-	build: {
-		lib: {
-			entry: 'src/main.ts',
-			name: 'Nanosplash',
-			fileName: 'nanosplash',
-			formats: ['iife'],
-		},
-		outDir: 'dist/iife',
-		cssCodeSplit: true,
-		minify: 'terser',
-		terserOptions: {
-			parse: {
-				bare_returns: true,
-			},
-			compress: {
-				keep_fargs: false,
-				keep_fnames: false,
-				keep_classnames: false,
-				module: true,
-				passes: 3,
-				toplevel: true,
-				unsafe_arrows: true,
-			},
-			mangle: {
-				toplevel: true,
-				// Reserved class names
-				reserved: [],
-				properties: {
-					reserved: [
-						'ns',
-						'getId',
-						'getText',
-						'setText',
-						'getImgSrc',
-						'setImgSrc',
-						'moveTo',
-						'delete',
-						'img',
-						'show',
-						'inside',
-						'remove',
-						'progress',
-						'while',
-						'delete',
-						'hideAll',
-						'hide',
-					],
-				}
-			},
-			format: {
-				// wrap_iife: true
-			},
-			sourceMap: {
-				// source map options
-			},
-			ecma: 2015, // specify one of: 5, 2015, 2016, etc.
-			keep_classnames: false,
-			keep_fnames: false,
-			ie8: false,
-			module: true,
-			nameCache: null, // or specify a name cache object
-			safari10: false,
-			toplevel: true,
-		},
-		// keep_classnames: false,
-		manifest: true,
-	},
-})

package/vite.mod.config.js

@@ -1,71 +0,0 @@
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-	mode: 'production',
-	build: {
-		lib: {
-			entry: 'src/Core/Nanosplash.ts',
-			name: 'Nanosplash',
-			fileName: 'nanosplash',
-			formats: ['es', 'cjs'],
-		},
-		outDir: 'dist/module',
-		cssCodeSplit: false,
-		minify: 'terser',
-		terserOptions: {
-			parse: {
-				bare_returns: false,
-			},
-			compress: {
-				keep_fargs: false,
-				keep_fnames: false,
-				keep_classnames: true,
-				module: true,
-				passes: 3,
-				toplevel: true,
-				unsafe_arrows: true,
-			},
-			mangle: {
-				toplevel: true,
-				// Reserved class names
-				reserved: [],
-				properties: {
-					reserved: [
-						'ns',
-						'getId',
-						'getText',
-						'setText',
-						'getImgSrc',
-						'setImgSrc',
-						'showSpinner',
-						'setFontSize',
-						'getFontSize',
-						'spinnerIsVisible',
-						'moveTo',
-						'delete',
-						'show',
-						'inside',
-						'remove',
-						'progress',
-						'while',
-						'delete',
-						'hideAll',
-						'hide',
-						'getFromDestinationNode',
-						'getDestination'
-					],
-				}
-			},
-			ecma: 2015, // specify one of: 5, 2015, 2016, etc.
-			keep_classnames: true,
-			keep_fnames: false,
-			ie8: false,
-			module: true,
-			nameCache: null, // or specify a name cache object
-			safari10: false,
-			toplevel: true,
-		},
-		// keep_classnames: false,
-		manifest: true,
-	},
-})

package/vite.site.config.js

@@ -1,22 +0,0 @@
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-	mode: 'production',
-	build: {
-		lib: {
-			entry: 'index.html',
-			name: 'Nanosplash',
-			fileName: 'nanosplash',
-			formats: ['iife'],
-		},
-		outDir: 'docs',
-		cssCodeSplit: false,
-		assetsInlineLimit: 100000000,
-		rollupOptions: {
-			outputOptions: {
-				inlineDynamicImports: true,
-				manualChunks: () => 'main.js',
-			},
-		},
-	},
-})