tiny-essentials 1.10.2 → 1.11.0

package/dist/v1/TinyToastNotify.js

@@ -0,0 +1,417 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  TinyToastNotify: () => (/* reexport */ libs_TinyToastNotify)
+});
+
+;// ./src/v1/libs/TinyToastNotify.mjs
+/**
+ * A callback function used to manually close a notification.
+ * Passed as a second argument to `onClick` handlers, allowing programmatic dismissal of the toast.
+ *
+ * @typedef {() => void} CloseToastFunc
+ */
+
+/**
+ * Represents the data used to display a notification.
+ * Can be a plain string (used as the message), or an object with more customization options.
+ *
+ * @typedef {string | {
+ *   message: string, // The main message to display
+ *   title?: string,  // Optional title to appear above the message
+ *   onClick?: function(MouseEvent, CloseToastFunc): void, // Optional click handler for the notification
+ *   html?: boolean,  // Whether the message should be interpreted as raw HTML
+ *   avatar?: string  // Optional URL to an avatar image shown on the left
+ * }} NotifyData
+ */
+
+/**
+ * A lightweight notification system designed to display timed messages inside a container.
+ * Supports positioning, timing customization, click actions, HTML content, and optional avatars.
+ *
+ * ## Features:
+ * - Positioning via `x` (`left`, `center`, `right`) and `y` (`top`, `bottom`).
+ * - Dynamic display time based on message length.
+ * - Optional `title`, `avatar`, `onClick`, and `html` message rendering.
+ * - Fade-out animation with customizable duration.
+ * - Rigid validation of inputs and internal state.
+ *
+ * ## Customization via setters:
+ * - `setX(position)` — horizontal alignment.
+ * - `setY(position)` — vertical alignment.
+ * - `setBaseDuration(ms)` — base visible time in milliseconds.
+ * - `setExtraPerChar(ms)` — extra time added per character.
+ * - `setFadeOutDuration(ms)` — fade-out animation duration in milliseconds.
+ *
+ * @class
+ */
+class TinyToastNotify {
+  #y;
+  #x;
+  #baseDuration;
+  #extraPerChar;
+  #fadeOutDuration;
+  #container;
+
+  /**
+   * @param {'top'|'bottom'} y - 'top' or 'bottom'
+   * @param {'right'|'left'|'center'} x - 'right', 'left', or 'center'
+   * @param {number} baseDuration - Base display time in ms
+   * @param {number} extraPerChar - Extra ms per character
+   * @param {number} fadeOutDuration - Time in ms for fade-out effect
+   * @param {string} [selector='.notify-container'] - Base selector for container
+   */
+  constructor(
+    y = 'top',
+    x = 'right',
+    baseDuration = 3000,
+    extraPerChar = 50,
+    fadeOutDuration = 300,
+    selector = '.notify-container',
+  ) {
+    this.#validateY(y);
+    this.#validateX(x);
+    this.#validateTiming(baseDuration, 'baseDuration');
+    this.#validateTiming(extraPerChar, 'extraPerChar');
+    this.#validateTiming(fadeOutDuration, 'fadeOutDuration');
+
+    this.#y = y;
+    this.#x = x;
+    this.#baseDuration = baseDuration;
+    this.#extraPerChar = extraPerChar;
+    this.#fadeOutDuration = fadeOutDuration;
+    const container = document.querySelector(`${selector}.${y}.${x}`);
+
+    if (!(container instanceof HTMLElement)) {
+      this.#container = document.createElement('div');
+      this.#container.className = `notify-container ${y} ${x}`;
+      document.body.appendChild(this.#container);
+    } else this.#container = container;
+  }
+
+  /**
+   * Returns the notification container element.
+   * Ensures that the container is a valid HTMLElement.
+   *
+   * @returns {HTMLElement} The notification container.
+   * @throws {Error} If the container is not a valid HTMLElement.
+   */
+  getContainer() {
+    if (!(this.#container instanceof HTMLElement))
+      throw new Error('Container is not a valid HTMLElement.');
+    return this.#container;
+  }
+
+  /**
+   * Validates the vertical position value.
+   * Must be either 'top' or 'bottom'.
+   *
+   * @param {string} value - The vertical position to validate.
+   * @throws {Error} If the value is not 'top' or 'bottom'.
+   */
+  #validateY(value) {
+    if (!['top', 'bottom'].includes(value)) {
+      throw new Error(`Invalid vertical direction "${value}". Expected "top" or "bottom".`);
+    }
+  }
+
+  /**
+   * Validates the horizontal position value.
+   * Must be 'left', 'right', or 'center'.
+   *
+   * @param {string} value - The horizontal position to validate.
+   * @throws {Error} If the value is not one of the accepted directions.
+   */
+  #validateX(value) {
+    if (!['left', 'right', 'center'].includes(value)) {
+      throw new Error(
+        `Invalid horizontal position "${value}". Expected "left", "right" or "center".`,
+      );
+    }
+  }
+
+  /**
+   * Validates a numeric timing value.
+   * Must be a non-negative finite number.
+   *
+   * @param {number} value - The number to validate.
+   * @param {string} name - The name of the parameter (used for error messaging).
+   * @throws {Error} If the number is invalid.
+   */
+  #validateTiming(value, name) {
+    if (typeof value !== 'number' || value < 0 || !Number.isFinite(value)) {
+      throw new Error(
+        `Invalid value for "${name}": ${value}. Must be a non-negative finite number.`,
+      );
+    }
+  }
+
+  /**
+   * Returns the current vertical position.
+   *
+   * @returns {'top'|'bottom'} The vertical direction of the notification container.
+   */
+  getY() {
+    return this.#y;
+  }
+
+  /**
+   * Sets the vertical position of the notification container.
+   * Updates the container's class to reflect the new position.
+   *
+   * @param {'top'|'bottom'} value - The vertical direction to set.
+   * @throws {Error} If the value is invalid.
+   */
+  setY(value) {
+    this.#validateY(value);
+    const container = this.getContainer();
+    container.classList.remove(this.#y);
+    container.classList.add(value);
+
+    this.#y = value;
+  }
+
+  /**
+   * Returns the current horizontal position.
+   *
+   * @returns {'left'|'right'|'center'} The horizontal direction of the notification container.
+   */
+  getX() {
+    return this.#x;
+  }
+
+  /**
+   * Sets the horizontal position of the notification container.
+   * Updates the container's class to reflect the new position.
+   *
+   * @param {'left'|'right'|'center'} value - The horizontal direction to set.
+   * @throws {Error} If the value is invalid.
+   */
+  setX(value) {
+    this.#validateX(value);
+    const container = this.getContainer();
+    container.classList.remove(this.#x);
+    container.classList.add(value);
+
+    this.#x = value;
+  }
+
+  /**
+   * Returns the base duration for displaying the notification.
+   *
+   * @returns {number} Base time (in milliseconds) that a notification stays on screen.
+   */
+  getBaseDuration() {
+    return this.#baseDuration;
+  }
+
+  /**
+   * Sets the base duration for the notification display time.
+   *
+   * @param {number} value - Base display time in milliseconds.
+   * @throws {Error} If the value is not a valid non-negative finite number.
+   */
+  setBaseDuration(value) {
+    this.#validateTiming(value, 'baseDuration');
+    this.#baseDuration = value;
+  }
+
+  /**
+   * Returns the extra display time added per character.
+   *
+   * @returns {number} Extra time (in milliseconds) per character in the notification.
+   */
+  getExtraPerChar() {
+    return this.#extraPerChar;
+  }
+
+  /**
+   * Sets the additional display time per character.
+   *
+   * @param {number} value - Extra time in milliseconds per character.
+   * @throws {Error} If the value is not a valid non-negative finite number.
+   */
+  setExtraPerChar(value) {
+    this.#validateTiming(value, 'extraPerChar');
+    this.#extraPerChar = value;
+  }
+
+  /**
+   * Returns the fade-out duration.
+   *
+   * @returns {number} Time (in milliseconds) used for fade-out transition.
+   */
+  getFadeOutDuration() {
+    return this.#fadeOutDuration;
+  }
+
+  /**
+   * Sets the fade-out transition time for notifications.
+   *
+   * @param {number} value - Fade-out duration in milliseconds.
+   * @throws {Error} If the value is not a valid non-negative finite number.
+   */
+  setFadeOutDuration(value) {
+    this.#validateTiming(value, 'fadeOutDuration');
+    this.#fadeOutDuration = value;
+  }
+
+  /**
+   * Displays a notification for a time based on message length.
+   * Accepts a string or an object with:
+   * {
+   *   message: string,
+   *   title?: string,
+   *   onClick?: function(MouseEvent, CloseToastFunc): void,
+   *   html?: boolean,
+   *   avatar?: string // Optional avatar image URL
+   * }
+   *
+   * @param {NotifyData} data
+   */
+  show(data) {
+    let message = '';
+    let title = '';
+    let onClick = null;
+    let useHTML = false;
+    let avatarUrl = null;
+
+    const notify = document.createElement('div');
+    notify.className = 'notify enter';
+
+    if (typeof data === 'string') {
+      message = data;
+    } else if (typeof data === 'object' && data !== null && typeof data.message === 'string') {
+      message = data.message;
+      title = typeof data.title === 'string' ? data.title : '';
+      useHTML = data.html === true;
+      avatarUrl = typeof data.avatar === 'string' ? data.avatar : null;
+
+      if (data.onClick !== undefined) {
+        if (typeof data.onClick !== 'function') {
+          throw new Error('onClick must be a function if defined');
+        }
+        onClick = data.onClick;
+        notify.classList.add('clickable');
+      }
+    } else {
+      throw new Error(
+        `Invalid argument for show(): expected string or { message: string, title?: string, onClick?: function, html?: boolean, avatar?: string }`,
+      );
+    }
+
+    // Add close button
+    const closeBtn = document.createElement('button');
+    closeBtn.innerHTML = '&times;';
+    closeBtn.className = 'close';
+    closeBtn.setAttribute('aria-label', 'Close');
+
+    // Optional hover effect
+    closeBtn.addEventListener('mouseenter', () => {
+      closeBtn.style.color = 'var(--notif-close-color-hover)';
+    });
+    closeBtn.addEventListener('mouseleave', () => {
+      closeBtn.style.color = 'var(--notif-close-color)';
+    });
+
+    // Avatar
+    if (avatarUrl) {
+      const avatar = document.createElement('img');
+      avatar.src = avatarUrl;
+      avatar.alt = 'avatar';
+      avatar.className = 'avatar';
+      notify.appendChild(avatar);
+    }
+
+    // Title
+    if (title) {
+      const titleElem = document.createElement('strong');
+      titleElem.textContent = title;
+      titleElem.style.display = 'block';
+      notify.appendChild(titleElem);
+    }
+
+    // Message
+    if (useHTML) {
+      const msgWrapper = document.createElement('div');
+      msgWrapper.innerHTML = message;
+      notify.appendChild(msgWrapper);
+    } else {
+      notify.appendChild(document.createTextNode(message));
+    }
+
+    notify.appendChild(closeBtn);
+    this.getContainer().appendChild(notify);
+
+    const visibleTime = this.#baseDuration + message.length * this.#extraPerChar;
+    const totalTime = visibleTime + this.#fadeOutDuration;
+
+    // Close logic
+    let removed = false;
+    const close = () => {
+      if (removed) return;
+      removed = true;
+      notify.classList.remove('enter', 'show');
+      notify.classList.add('exit');
+      setTimeout(() => notify.remove(), this.#fadeOutDuration);
+    };
+
+    // Click handler
+    if (typeof onClick === 'function') {
+      notify.addEventListener('click', (e) => {
+        if (e.target === closeBtn) return;
+        onClick(e, close);
+      });
+    }
+
+    // Close button click
+    closeBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      close();
+    });
+
+    // Transition activation force soon after the element is added
+    setTimeout(() => {
+      notify.classList.remove('enter');
+      notify.classList.add('show');
+    }, 1);
+
+    setTimeout(() => close(), totalTime);
+  }
+}
+
+/* harmony default export */ const libs_TinyToastNotify = (TinyToastNotify);
+
+;// ./src/v1/build/TinyToastNotify.mjs
+
+
+
+
+window.TinyToastNotify = __webpack_exports__.TinyToastNotify;
+/******/ })()
+;

package/dist/v1/TinyToastNotify.min.js

@@ -0,0 +1 @@
+(()=>{"use strict";var t={d:(e,i)=>{for(var a in i)t.o(i,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:i[a]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{TinyToastNotify:()=>i});const i=class{#t;#e;#i;#a;#n;#r;constructor(t="top",e="right",i=3e3,a=50,n=300,r=".notify-container"){this.#o(t),this.#s(e),this.#l(i,"baseDuration"),this.#l(a,"extraPerChar"),this.#l(n,"fadeOutDuration"),this.#t=t,this.#e=e,this.#i=i,this.#a=a,this.#n=n;const o=document.querySelector(`${r}.${t}.${e}`);o instanceof HTMLElement?this.#r=o:(this.#r=document.createElement("div"),this.#r.className=`notify-container ${t} ${e}`,document.body.appendChild(this.#r))}getContainer(){if(!(this.#r instanceof HTMLElement))throw new Error("Container is not a valid HTMLElement.");return this.#r}#o(t){if(!["top","bottom"].includes(t))throw new Error(`Invalid vertical direction "${t}". Expected "top" or "bottom".`)}#s(t){if(!["left","right","center"].includes(t))throw new Error(`Invalid horizontal position "${t}". Expected "left", "right" or "center".`)}#l(t,e){if("number"!=typeof t||t<0||!Number.isFinite(t))throw new Error(`Invalid value for "${e}": ${t}. Must be a non-negative finite number.`)}getY(){return this.#t}setY(t){this.#o(t);const e=this.getContainer();e.classList.remove(this.#t),e.classList.add(t),this.#t=t}getX(){return this.#e}setX(t){this.#s(t);const e=this.getContainer();e.classList.remove(this.#e),e.classList.add(t),this.#e=t}getBaseDuration(){return this.#i}setBaseDuration(t){this.#l(t,"baseDuration"),this.#i=t}getExtraPerChar(){return this.#a}setExtraPerChar(t){this.#l(t,"extraPerChar"),this.#a=t}getFadeOutDuration(){return this.#n}setFadeOutDuration(t){this.#l(t,"fadeOutDuration"),this.#n=t}show(t){let e="",i="",a=null,n=!1,r=null;const o=document.createElement("div");if(o.className="notify enter","string"==typeof t)e=t;else{if("object"!=typeof t||null===t||"string"!=typeof t.message)throw new Error("Invalid argument for show(): expected string or { message: string, title?: string, onClick?: function, html?: boolean, avatar?: string }");if(e=t.message,i="string"==typeof t.title?t.title:"",n=!0===t.html,r="string"==typeof t.avatar?t.avatar:null,void 0!==t.onClick){if("function"!=typeof t.onClick)throw new Error("onClick must be a function if defined");a=t.onClick,o.classList.add("clickable")}}const s=document.createElement("button");if(s.innerHTML="&times;",s.className="close",s.setAttribute("aria-label","Close"),s.addEventListener("mouseenter",(()=>{s.style.color="var(--notif-close-color-hover)"})),s.addEventListener("mouseleave",(()=>{s.style.color="var(--notif-close-color)"})),r){const t=document.createElement("img");t.src=r,t.alt="avatar",t.className="avatar",o.appendChild(t)}if(i){const t=document.createElement("strong");t.textContent=i,t.style.display="block",o.appendChild(t)}if(n){const t=document.createElement("div");t.innerHTML=e,o.appendChild(t)}else o.appendChild(document.createTextNode(e));o.appendChild(s),this.getContainer().appendChild(o);const l=this.#i+e.length*this.#a+this.#n;let c=!1;const d=()=>{c||(c=!0,o.classList.remove("enter","show"),o.classList.add("exit"),setTimeout((()=>o.remove()),this.#n))};"function"==typeof a&&o.addEventListener("click",(t=>{t.target!==s&&a(t,d)})),s.addEventListener("click",(t=>{t.stopPropagation(),d()})),setTimeout((()=>{o.classList.remove("enter"),o.classList.add("show")}),1),setTimeout((()=>d()),l)}};window.TinyToastNotify=e.TinyToastNotify})();

package/dist/v1/build/TinyNotifyCenter.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var TinyNotifyCenter = require('../libs/TinyNotifyCenter.cjs');
+
+
+
+exports.TinyNotifyCenter = TinyNotifyCenter;

package/dist/v1/build/TinyNotifyCenter.d.mts

@@ -0,0 +1,3 @@
+export { TinyNotifyCenter };
+import TinyNotifyCenter from '../libs/TinyNotifyCenter.mjs';
+//# sourceMappingURL=TinyNotifyCenter.d.mts.map

package/dist/v1/build/TinyNotifyCenter.mjs

@@ -0,0 +1,2 @@
+import TinyNotifyCenter from '../libs/TinyNotifyCenter.mjs';
+export { TinyNotifyCenter };

package/dist/v1/build/TinyToastNotify.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var TinyToastNotify = require('../libs/TinyToastNotify.cjs');
+
+
+
+exports.TinyToastNotify = TinyToastNotify;

package/dist/v1/build/TinyToastNotify.d.mts

@@ -0,0 +1,3 @@
+export { TinyToastNotify };
+import TinyToastNotify from '../libs/TinyToastNotify.mjs';
+//# sourceMappingURL=TinyToastNotify.d.mts.map

package/dist/v1/build/TinyToastNotify.mjs

@@ -0,0 +1,2 @@
+import TinyToastNotify from '../libs/TinyToastNotify.mjs';
+export { TinyToastNotify };