archcss 2.0.0 → 3.0.0-beta.1

package/js/plugin.js

@@ -0,0 +1,874 @@
+"use strict";
+/*!
+ * Name     : ArchCSS - Modern CSS framework for responsive and attractive websites and applications.
+ * Version  : 3.0.0 [beta]
+ * Author   : @bebagodfried - [archCSS dev.](https://archcss.com/team/@bebagodfried)
+ * License  : MIT license
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * AJAX
+ * HttpRequest: Create XMLHttpRequest object
+ */
+let HttpRequest = () => {
+    if (window.XMLHttpRequest) {
+        return new XMLHttpRequest;
+    }
+    else {
+        try {
+            return new ActiveXObject('Microsoft.XMLHTTP');
+        }
+        catch (e) {
+            try {
+                return new ActiveXObject('Msxml2.XMLHTTP');
+            }
+            catch (XMLHttpRequest_ERR) {
+                console.error(XMLHttpRequest_ERR);
+                return;
+            }
+        }
+    }
+};
+/**
+ * Globals
+ * $_: Get/set document vars
+ */
+let $_ = (get, set = '') => {
+    switch (get) {
+        // DOM Objects
+        case 'title':
+            if (set) {
+                document.title = `${set}`;
+                break;
+            }
+            else {
+                return document.title;
+            }
+        case 'charset':
+            return document.characterSet;
+        case 'baseURI':
+            return document.baseURI;
+        case 'links':
+            return document.links;
+        case 'scripts':
+            return document.scripts;
+        case 'embeds':
+            return document.embeds;
+        case 'images':
+            return document.images;
+        case 'readyState':
+            return document.readyState;
+        // BOM Objects
+        case 'cookies':
+            return navigator.cookieEnabled;
+        case 'language':
+            return navigator.language;
+        case 'online':
+            return navigator.onLine;
+        case 'userAgent':
+            return navigator.userAgent;
+        // Server & location
+        case 'host':
+            if (set) {
+                location.host = `${set}`;
+                break;
+            }
+            else {
+                return location.host;
+            }
+        case 'hostname':
+            if (set) {
+                location.hostname = `${set}`;
+                break;
+            }
+            else {
+                return location.hostname;
+            }
+        case 'href':
+            if (set) {
+                location.href = `${set}`;
+                break;
+            }
+            else {
+                return location.href;
+            }
+        case 'url':
+            if (set) {
+                location.href = `${set}`;
+                break;
+            }
+            else {
+                return location.href;
+            }
+        case 'pathname':
+            if (set) {
+                location.pathname = `${set}`;
+                break;
+            }
+            else {
+                return location.pathname;
+            }
+        case 'port':
+            if (set) {
+                location.port = `${set}`;
+                break;
+            }
+            else {
+                return location.port;
+            }
+        case 'protocol':
+            if (set) {
+                location.protocol = `${set}`;
+                break;
+            }
+            else {
+                return location.protocol;
+            }
+        case 'search':
+            if (set) {
+                location.search = `${set}`;
+                break;
+            }
+            else {
+                return location.search;
+            }
+        case 'history':
+            switch (set) {
+                case -1: return history.back();
+                case +1: return history.forward();
+                case 0: return history.go();
+                case 'back': return history.back();
+                case 'forward': return history.forward();
+                case 'reload': return history.go();
+                default: return history.go();
+            }
+        case 'update':
+            return document.lastModified;
+        // Return https(SSl) state of current page
+        case 'https':
+            return location.protocol === 'https:';
+        // Owner
+        case 'author-org':
+            return 'archcss-dev';
+        case 'author-name':
+            return 'Beba Godfried';
+        case 'author-right':
+            return 'Godfried\'Ux';
+        case 'author-email':
+            return 'me@bebagodfried.com';
+        case 'author-site':
+            return 'https://bebagodfried.com';
+        case 'copyright':
+            return 'Powered by Godfried\'Ux';
+        case 'owner':
+            return 'archcss-dev - by Godfried\'Ux';
+        case 'version':
+            return '3.0.0';
+        default:
+            console.info(`[404]: Reference '${get}' not found!`);
+            return null;
+    }
+};
+/** end:Globals **/
+// date: Return date
+let date = (format = '', type = '') => {
+    // New date object
+    var date = new Date();
+    // return Alwayse two digits
+    const digit = function (i) {
+        if (i < 10)
+            i = '0' + i;
+        return i;
+    };
+    // H: Hours
+    const H = date.getHours();
+    // i: Minutes
+    const i = digit(date.getMinutes());
+    // s: Seconds
+    const s = digit(date.getSeconds());
+    // ms: Seconds
+    const ms = date.getMilliseconds();
+    // t: Timezone
+    const t = date.getTimezoneOffset();
+    // Y: Year
+    const Y = date.getFullYear();
+    // m: Month
+    const m = date.getMonth();
+    // d: Day
+    const d = date.getDate();
+    // f: Weekday
+    const f = date.getDay();
+    switch (format) {
+        case 'H': //=> Hours
+            if (isset(type)) {
+                if (type == 'En') {
+                    // return 12 hours format
+                    return H % 12 || 12;
+                }
+                else if (type == 'Fr') {
+                    // return 24 hours format
+                    return H;
+                }
+            }
+            else {
+                return H;
+            }
+        case 'i': return i; //=> Minutes
+        case 's': return s; //=> Seconds
+        case 'ms': return ms; //=> Milliseconds
+        case 't': return t; //=> Timezone
+        case 'Y': return Y; //=> Year
+        case 'm': //=> Month
+            if (isset(type)) {
+                if (type == 'En') {
+                    // return the month in english
+                    return months_en[m];
+                }
+                else if (type == 'Fr') {
+                    // return the month in french
+                    return months_fr[m];
+                }
+            }
+            else {
+                // return the month as number
+                return m + 1;
+            }
+        case 'd': return (d); //=> Day
+        case 'f': return f; //=> Weekday
+        case 'En': return weekdays_en[f] + ', ' + months_en[m] + ' ' + digit(d) + ', ' + Y;
+        case 'Fr': return weekdays_fr[f] + ' ' + digit(d) + ' ' + months_fr[m] + ' ' + Y;
+        case 'DD/MM/YY': return digit(d) + '/' + digit(m + 1) + '/' + Y;
+        case 'MM/DD/YY': return digit(m + 1) + '/' + digit(d) + '/' + Y;
+        case 'DD-MM-YY': return digit(d) + '-' + digit(m + 1) + '-' + Y;
+        case 'MM-DD-YY': return digit(m + 1) + '-' + digit(d) + '-' + Y;
+        case 'DD/MM': return digit(d) + '/' + digit(m + 1);
+        case 'MM/DD': return digit(m + 1) + '/' + digit(d);
+        case 'DD-MM': return digit(d) + '-' + digit(m + 1);
+        case 'MM-DD': return digit(m + 1) + '-' + digit(d);
+        // hours:minutes
+        case 'H:i':
+            if (isset(type)) {
+                if (type == 'En') {
+                    // return time in 12 hours format
+                    return (H % 12 || 12) + ':' + i;
+                }
+                else if (type == 'Fr') {
+                    // return time in 24 hours format
+                    return H + ':' + i;
+                }
+            }
+            else {
+                // return time hours:minutes
+                return H + ':' + i;
+            }
+        // hours:minutes:seconds
+        case 'H:i:s':
+            if (isset(type)) {
+                if (type == 'En') {
+                    // return time in 12 hours format with seconds
+                    return (H % 12 || 12) + ':' + i + ':' + s;
+                }
+                else if (type == 'Fr') {
+                    // return time in 24 hours format with seconds
+                    return H + ':' + i + ':' + s;
+                }
+            }
+            else {
+                // return time in hours:minutes:seconds
+                return H + ':' + i + ':' + s;
+            }
+        default: return date.toLocaleString();
+    }
+};
+// Days
+let weekdays_en = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+let weekdays_fr = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];
+// Months
+let months_en = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+let months_fr = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'];
+// strcopy: copy a text or the content of an element to the clipboard
+let strcopy = (text) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        // When the argument matches an element on the page, copy its text content
+        const el = select(text);
+        const value = el != null && el.nodeType ? el.innerText : text;
+        yield navigator.clipboard.writeText(value);
+    }
+    catch (err) {
+        console.error('Failed to copy text: ', err);
+    }
+});
+// goto: on event redirection to somewhere
+let goto = (_location) => {
+    try {
+        location.href = _location.toString();
+    }
+    catch (err) {
+        console.error('Failed to redirect: ', err);
+    }
+};
+// attrib: Return or set an element attribute
+// No `set` value returns the attribute, otherwise it sets it
+let attrib = (el, name, set) => {
+    // Element selection
+    let dom = select(el);
+    if (dom == null)
+        return null;
+    // Set an attrribute value
+    if (set) {
+        try {
+            dom.setAttribute(`${name}`, `${set}`);
+        }
+        catch (ATTR_ERR) {
+            console.error(`${ATTR_ERR.name}: attrib(el: string, attrib: any, set?: any) => '${el}' has no a ${name} attribute.`);
+        }
+        // else return attrribute value
+    }
+    else {
+        return dom.getAttribute(`${name}`);
+    }
+};
+/**
+ * classlist: add/remove element classes
+ * If token is true, adds token (same as [...].classList.add()).
+ * If force is false, removes token (same as [...].classList.remove()).
+ * */
+let classlist = (el, tokens) => {
+    let dom = select(el);
+    if (dom == null)
+        return null;
+    // check for each token force
+    tokens.forEach(key => {
+        dom.classList.toggle(key);
+    });
+};
+/** end:classlist */
+// create: Create node elements
+let create = (el) => {
+    return document.createElement(el);
+};
+// select: Node list selector
+let select = (el, all = false) => {
+    try {
+        // Remove white space around the element
+        if (typeof (el) == 'string' && el != null)
+            el = el.trim();
+        // By default `all = false` indicate that select the first `el`
+        // all = true
+        // all = false
+        if (all) {
+            return [...document.querySelectorAll(el)];
+        }
+        else {
+            return document.querySelector(el);
+        }
+    }
+    catch (select_ERR) {
+        // Debug select()
+        console.error(`${select_ERR.name}: select(elememt: string, all?: boolean) => '${el}' is not a valid selector.`);
+        return null;
+    }
+};
+// select_tag: HTMLCollection selector
+let select_tag = (el) => {
+    try {
+        // Remove white space around the element
+        if (typeof (el) == 'string' && el != null)
+            el = el.trim();
+        return document.getElementsByTagName(el);
+    }
+    catch (select_ERR) {
+        // Debug select()
+        console.error(`${select_ERR.name}: selectTag(tag: string) => '${el}' is not a valid selector.`);
+        return null;
+    }
+};
+// select_id: Element `Id` selector
+let select_id = (el) => {
+    try {
+        // Remove white space around the element
+        if (typeof (el) == 'string' && el != null)
+            el = el.trim();
+        return document.getElementById(el);
+    }
+    catch (select_id_ERR) {
+        // Debug select_id()
+        console.error(`${select_id_ERR.name}: select_id(id: srting) => '${el}' is not a valid selector.`);
+        return null;
+    }
+};
+// drop_all: Remove element(s) list from DOM
+let drop_all = (list) => {
+    list.forEach(el => {
+        // Remove each element by its selector
+        drop(el);
+    });
+};
+// drop: Remove element first occurence from DOM
+let drop = (token) => {
+    // Element selection
+    const dom = select(token);
+    try {
+        dom.remove();
+    }
+    catch (Drop_ERR) {
+        // Escape
+        return null;
+    }
+};
+// echo: Add/Replace the content of element(s)
+let echo = (text, el, all = false) => {
+    if (isset(el)) {
+        if (all) {
+            // all = true
+            // Genearate a list of all `el`
+            let list = select(el, all);
+            // for each element of the list add/replace content
+            list.forEach((el) => {
+                el.innerHTML = `${text}`;
+            });
+            // by default
+            // add/replace the first `el` occurence
+        }
+        else {
+            const dom = select(el);
+            if (dom == null)
+                return null;
+            return dom.innerHTML = `${text}`;
+        }
+    }
+    else {
+        console.log(`${text}`);
+    }
+};
+// get_innerTEXT: Get element text content
+let get_innerTEXT = (el) => {
+    // Element selection
+    let dom = select(el);
+    if (dom == null)
+        return null;
+    return dom.innerText;
+};
+// set_innerTEXT: Replace element text content
+let set_innerTEXT = (el, text) => {
+    try {
+        let dom = select(el);
+        if (dom == null)
+            return null;
+        dom.innerText = `${text}`;
+    }
+    catch (error) {
+        // Debug set_innerTEXT()
+        console.error(error);
+    }
+};
+// get_innerHTML: Get html content of element
+let get_innerHTML = (el) => {
+    // Get html content of an element
+    const dom = select(el);
+    if (dom == null)
+        return null;
+    return dom.innerHTML;
+};
+// display: Display/hide specific DOM element
+let display = (el, displayValue = 'block') => {
+    // Element selection
+    const dom = select(el);
+    if (dom == null)
+        return null;
+    // hidden by style attribute or `hidden` class, so show it
+    if (dom.style.display == 'none' || dom.classList.contains('hidden')) {
+        dom.classList.remove('hidden');
+        dom.style.display = displayValue;
+        // already shown, so hide it
+    }
+    else if (dom.style.display == displayValue || dom.classList.contains(displayValue)) {
+        dom.style.display = 'none';
+        dom.classList.add('hidden');
+        // no display value yet, set it
+    }
+    else {
+        dom.style.display = displayValue;
+    }
+};
+// hide: make hidden element of first occurence from DOM
+let hide = (el) => {
+    // Possible classlist values
+    const list = ['block', 'inline-block', 'flex', 'inline-flex'];
+    // Element selection
+    const dom = select(el);
+    if (dom == null)
+        return null;
+    // Remove any display token, then force `hidden`
+    list.forEach(display => {
+        if (dom.classList.contains(`${display}`)) {
+            dom.classList.remove(`${display}`);
+        }
+    });
+    dom.classList.add('hidden');
+    dom.style.display = 'none';
+};
+/**
+ * Events listners
+ * ...
+ */
+// On: Events listner
+let on = (event, listener) => {
+    event = event.trim();
+    document.addEventListener(event, listener);
+};
+let on_scroll = (el, add_list, rm_list = [], offset = 0) => {
+    var dom = select(el);
+    // Add or remove class based on scroll position
+    if (window.scrollY > offset) {
+        add_list.forEach(key => {
+            dom.classList.add(key);
+        });
+        rm_list.forEach(key => {
+            dom.classList.remove(key);
+        });
+    }
+    else {
+        add_list.forEach(key => {
+            dom.classList.remove(key);
+        });
+        rm_list.forEach(key => {
+            dom.classList.add(key);
+        });
+    }
+};
+let scroll_to = (el, offset = 0) => {
+    // JavaScript to scroll to the target element
+    const dom = select_id(el);
+    if (dom == null)
+        return null;
+    // Scroll to the element, minus the offset (fixed headers and bars)
+    const top = dom.getBoundingClientRect().top + window.scrollY - offset;
+    window.scrollTo({ top: top, behavior: 'smooth' });
+};
+// Onclick: Click listner
+let onClick = (el, listener) => {
+    const d = select_id(el);
+    return d.onclick = listener;
+};
+// Ondlclick: Double click listner
+let onDblClick = (el, listener) => {
+    const d = select_id(el);
+    return d.ondblclick = listener;
+};
+/**
+ * Validation
+ * Check for exist listner
+ */
+// Isset: Return true for no-empty Object/var
+let isset = (key) => {
+    if (key != null && key != false && key != undefined) {
+        return true;
+    }
+    else if (key != '' && key != ' ') {
+        return true;
+    }
+    else {
+        return false;
+    }
+};
+/**
+ * Mixed
+ * popUp: create advenced pup-up box style
+ * @param popUp
+ */
+let popUp = function (window = { title: ``, favicon: ``, content: ``, html: ``, href: ``, titlebar: true, rounded: true, shadow: true, classlist: [], style: ``, border: true, overlay: false, height: ``, width: ``, top: ``, right: ``, bottom: ``, left: ``, index: 8, timeout: 0 }) {
+    // Pop_up
+    // #1. Create a new window with basic set
+    const WINDOW = create('div');
+    // setup
+    WINDOW.id = window.title;
+    WINDOW.classList.add('rounded', 'flex', 'flex-column', 'select-none');
+    WINDOW.style.position = 'fixed';
+    // size
+    WINDOW.style.height = window.height;
+    WINDOW.style.width = window.width;
+    // #2. Check window's already exist
+    if (select_id(`${WINDOW.id}`)) {
+        let el = select_id(WINDOW.id);
+        el === null || el === void 0 ? void 0 : el.classList.add('animate-pulse');
+        setTimeout(() => {
+            el === null || el === void 0 ? void 0 : el.classList.remove('animate-pulse');
+        }, 1000);
+        return null;
+    }
+    // #3. classlist: Add more features/tweaks
+    if (window.classlist) {
+        window.classlist.forEach(classItem => {
+            WINDOW.classList.add(classItem);
+        });
+    }
+    // #4. index/z-index: add a window priority (default: 8)
+    if (window.index) {
+        WINDOW.classList.add(`${'z-' + window.index}`);
+    }
+    else {
+        WINDOW.classList.add('z-8');
+    }
+    // #5. style: choose apearence between dark/light (default: light)
+    if (`${window.style}` == 'dark') {
+        WINDOW.classList.add('bg-dark-900', 'fg-light');
+    }
+    else if (`${window.style}` == 'light') {
+        WINDOW.classList.add('bg-light', 'fg-dark-900');
+    }
+    else if (`${window.style}` == 'none') {
+        WINDOW.style.color = 'inherit';
+    }
+    else {
+        WINDOW.classList.add('bg-light', 'fg-dark-900');
+    }
+    // #6. border: enable window border (default: true)
+    if (window.border == true) {
+        WINDOW.classList.add('border');
+    }
+    else if (window.border == false) {
+        // do nothing ...
+    }
+    else {
+        WINDOW.classList.add('border');
+    }
+    // #7. rounded: enable window rounded border (default: true)
+    if (window.rounded == true) {
+        WINDOW.classList.add('rounded');
+    }
+    else if (window.rounded == false) {
+        // do nothing ...
+    }
+    else {
+        WINDOW.classList.add('rounded');
+    }
+    // #8. shadow: enable window shadow (default: true)
+    if (window.shadow == true) {
+        WINDOW.classList.add('shadow-sm');
+    }
+    else if (window.shadow == false) {
+        // do nothing ...
+    }
+    else {
+        WINDOW.classList.add('shadow-sm');
+    }
+    // #9. [top, right, bottom, left]: set window position
+    if (window.top || window.right || window.bottom || window.left) {
+        WINDOW.style.top = window.top;
+        WINDOW.style.right = window.right;
+        WINDOW.style.bottom = window.bottom;
+        WINDOW.style.left = window.left;
+    }
+    else {
+        WINDOW.style.top = '50%';
+        WINDOW.style.left = '50%';
+        WINDOW.classList.add('translate--50');
+    }
+    // #10. header/title bar
+    // #10.1 Create a title bar
+    const HEADER = create('div');
+    HEADER.classList.add('flex', 'items-center', 'justify-between', 'full-width');
+    HEADER.style.padding = '.2rem';
+    // #10.2 favicon: add an icon as window illustrator
+    const FAVICON = create('img');
+    if (window.favicon) {
+        FAVICON.src = window.favicon;
+        FAVICON.classList.add('size-32');
+    }
+    // #10.3 Window action bar
+    // * title: set the window title/id
+    const TITLE = create('span');
+    TITLE.classList.add('pl-1', 'line-clamp-1', 'sm:line-clamp-1');
+    TITLE.innerHTML = window.title;
+    // * add moving icon
+    const WIN_Move = create('button');
+    WIN_Move.classList.add('bg-none', 'cursor-default', 'fa-solid', 'fa-up-down-left-right', 'p-0', 'rounded-full', 'size-32', 'muted');
+    // * add closing button
+    const WIN_Close = create('button');
+    WIN_Close.classList.add('bg-none', 'fa-solid', 'fa-times', 'hover:bg-danger', 'p-0', 'rounded-full', 'size-32');
+    // #11. views: create adaptable content
+    var view = '';
+    if (window.content) {
+        view = 'p';
+    }
+    else if (window.html) {
+        view = 'div';
+    }
+    else if (window.href) {
+        view = 'iframe';
+    }
+    // - create main window view
+    const CONTENT = create(view);
+    if (window.content) {
+        CONTENT.classList.add('m-0', 'px-2', 'py-1', 'w-100');
+        CONTENT.innerHTML = window.content;
+        if (window.titlebar == true) {
+            CONTENT.classList.add('border', 'border-0', 'border-top-1');
+        }
+    }
+    else if (window.html) {
+        CONTENT.classList.add('max-height', 'border-0', 'border-top-1', 'border-white', 'px-2', 'py-1', 'w-100');
+        CONTENT.innerHTML = window.html;
+    }
+    else if (window.href) {
+        CONTENT.classList.add('no-border');
+        CONTENT.height = '100%';
+        CONTENT.width = '100%';
+        CONTENT.src = window.href;
+        if (window.titlebar == true) {
+            CONTENT.classList.add('border-0', 'border-top-1', 'border-white');
+        }
+    }
+    // #12. Actions
+    // #12.1 draging action (double-click)
+    WINDOW.ondblclick = () => {
+        let move = attrib('.js_focus', 'aria-grabbed');
+        WINDOW.classList.toggle('cursor-grabbing');
+        if (move == 'true') {
+            WINDOW.setAttribute('aria-grabbed', 'false');
+            WIN_Move.classList.add('muted');
+        }
+        else {
+            WINDOW.setAttribute('aria-grabbed', 'true');
+            WIN_Move.classList.remove('muted');
+        }
+        // reset drag offset on each grab start
+        delete WINDOW.dataset.dragOffsetX;
+        delete WINDOW.dataset.dragOffsetY;
+    };
+    WINDOW.addEventListener('mousemove', (e) => {
+        // no focused window, nothing to drag
+        let focus = select('.js_focus');
+        if (!focus)
+            return null;
+        let drag = attrib(`#${focus.id}`, 'aria-grabbed');
+        // ajust window option according to cursor position
+        if (drag == 'true') {
+            // keep the grab offset to avoid the window jumping under the cursor
+            if (!WINDOW.dataset.dragOffsetX || !WINDOW.dataset.dragOffsetY) {
+                WINDOW.dataset.dragOffsetX = String(e.clientX - WINDOW.offsetLeft);
+                WINDOW.dataset.dragOffsetY = String(e.clientY - WINDOW.offsetTop);
+            }
+            WINDOW.style.left = `${e.clientX - Number(WINDOW.dataset.dragOffsetX)}px`;
+            WINDOW.style.top = `${e.clientY - Number(WINDOW.dataset.dragOffsetY)}px`;
+        }
+    });
+    // #12.1 closing action (cross button click)
+    WIN_Close.onclick = () => {
+        drop('.js_focus');
+        try {
+            // remove window overlay if enabled
+            drop('#window_overlay');
+        }
+        catch (error) {
+            return null;
+        }
+    };
+    // #12.2 focus/`switch focus` action priority(hover/click on window)
+    WINDOW.addEventListener('mouseover', () => {
+        WINDOW.classList.add('js_focus');
+        if (!window.index) {
+            WINDOW.onclick = () => {
+                let lostFocus = select('.z-8');
+                if (lostFocus) {
+                    lostFocus.classList.add('z-7');
+                    lostFocus.classList.remove('z-8');
+                }
+                WINDOW.classList.add('z-8');
+            };
+        }
+    });
+    // #12.3 lost focus priority
+    WINDOW.addEventListener('mouseleave', () => {
+        WINDOW.classList.remove('js_focus');
+    });
+    // #12.4 timeout
+    if (window.timeout != 0 && window.timeout != null) {
+        let timeout = window.timeout;
+        setTimeout(() => {
+            // fade the window out, then remove it once the animation ends
+            WINDOW.classList.add('animate-fadeOut');
+            setTimeout(() => {
+                WINDOW.remove();
+            }, timeout);
+        }, timeout);
+    }
+    // #13. final views
+    // # header sections
+    //   - favicon & title block
+    let div_1 = create('div');
+    div_1.classList.add('flex', 'items-center');
+    if (window.favicon) {
+        div_1.appendChild(FAVICON);
+    }
+    div_1.appendChild(TITLE);
+    //   - window actions block
+    let div_2 = create('div');
+    div_2.classList.add('flex', 'items-center', 'gap-1');
+    div_2.appendChild(WIN_Move);
+    div_2.appendChild(WIN_Close);
+    HEADER.appendChild(div_1);
+    HEADER.appendChild(div_2);
+    // #14. Ready header view's
+    if (window.titlebar != false) {
+        WINDOW.appendChild(HEADER);
+    }
+    // #15. Ready content view's
+    WINDOW.appendChild(CONTENT);
+    // *** overlay options view ***
+    if (window.overlay == true) {
+        let overlay = create('div');
+        overlay.id = 'window_overlay';
+        overlay.classList.add('absolute', 'fullscreen', 'top-0', 'left-0', 'backdrop-blur-10', 'ease-in', 'animate-fadeIn', 'animated-500');
+        if (window.index) {
+            let i = window.index;
+            overlay.classList.add(`z-${i - 1}`);
+        }
+        else {
+            overlay.classList.add('z-8');
+        }
+        document.body.appendChild(overlay);
+        document.body.appendChild(WINDOW);
+    }
+    else {
+        document.body.appendChild(WINDOW);
+    }
+};
+/**
+ * Cookies manage
+ */
+let set_cookie = (cookieName, cookieValue, cookieExpiry) => {
+    try {
+        if (isset(cookieExpiry)) {
+            document.cookie = `${cookieName}=${cookieValue}; expires=${cookieExpiry};`;
+        }
+        else {
+            document.cookie = `${cookieName}=${cookieValue}`;
+        }
+    }
+    catch (Cookie_ERR) {
+        console.error(Cookie_ERR);
+    }
+};
+let unset_cookie = (cookieName, cookieExpiry) => {
+    try {
+        if (isset(cookieExpiry)) {
+            document.cookie = `${cookieName}=; expires=${cookieExpiry};`;
+        }
+        else {
+            document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
+        }
+    }
+    catch (Cookie_ERR) {
+        console.error(Cookie_ERR);
+    }
+};