simpa/lib/utils.js

Lightweight library for prototyping Single Page Applications.

"use strict";
/* MIT License
 *
 * Copyright (c) 2016-2023 Dariusz Depta
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.$InnerHTML = exports.$innerHTML = exports.$Hidden = exports.$hidden = exports.$Visible = exports.$visible = exports.$makeVisible = exports.$DisplayFlex = exports.$displayFlex = exports.$DisplayNone = exports.$displayNone = exports.$DisplayBlock = exports.$displayBlock = exports.$REPLACE_MD = exports.$REPLACE = exports.$APPEND_CHILD_TEXT = exports.$SetFocus = exports.$setFocus = exports.$SET_TEXT = exports.$DeleteChildren = exports.$deleteChildren = exports.$touchEnterSpace = exports.$HandleKeySpace = exports.$handleKeySpace = exports.$HandleKeyEnter = exports.$handleKeyEnter = exports.$HandleKeyUp = exports.$handleKeyUp = exports.$HandleKeyDown = exports.$handleKeyDown = exports.$HandleMouseLeave = exports.$handleMouseLeave = exports.$HandleMouseMove = exports.$handleMouseMove = exports.$HandleMouseUp = exports.$handleMouseUp = exports.$HandleMouseDown = exports.$handleMouseDown = exports.$HandleInput = exports.$handleInput = exports.$Touch = exports.$touch = exports.$createDiv = exports.$createElement = exports.$htmlImage = exports.$htmlPre = exports.$htmlDiv = exports.$id = exports.$uuid = exports.gvTouch = void 0;
exports.$parseInt = exports.$md = exports.$RemoveClassName = exports.$removeClassName = exports.$AddClassName = exports.$addClassName = exports.$InnerText = exports.$innerText = void 0;
const uuid_js_1 = __importDefault(require("uuid-js"));
const marked_1 = require("marked");
marked_1.marked.use({
    mangle: false,
    headerIds: false
});
/**
 * Global flag indicating if the touch functionality is enabled.
 */
exports.gvTouch = ('ontouchstart' in window);
/**
 * Generates unique identifier.
 *
 * @return Unique an identifier in form of UUID.
 */
function $uuid() {
    return uuid_js_1.default.create().toString();
}
exports.$uuid = $uuid;
/**
 * Returns an HTML element with specified identifier or <em>mull</em>
 * when such element was not found in the document.
 *
 * This function is a shorter version of calling:
 * <pre>
 *     document.getElementById(id) as HTMLElement
 * </pre>
 *
 * @param id Identifier of the HTML element in document.
 * @return HTML element with specified identifier or null when not found in DOM.
 */
function $id(id) {
    return document.getElementById(id);
}
exports.$id = $id;
/**
 * Returns an HTML element with specified identifier cast to HTMLDivElement.
 *
 * This function is a shorter version of calling:
 * <pre>
 *     document.getElementById(id) as HTMLDivElement
 * </pre>
 *
 * @param id Identifier of HTML DIV element in document.
 * @return HTML DIV element with specified identifier or null.
 */
function $htmlDiv(id) {
    const e = $id(id);
    return e ? e : null;
}
exports.$htmlDiv = $htmlDiv;
/**
 * Returns HTML element with specified identifier and casts to HTMLPreElement.
 * This function is an equivalent of calling:
 * <pre>
 *     document.getElementById(id) as HTMLPreElement
 * </pre>
 *
 * @param id Identifier of HTML PRE element in document.
 * @return HTML PRE element with specified identifier or null.
 */
function $htmlPre(id) {
    const e = $id(id);
    return e ? e : null;
}
exports.$htmlPre = $htmlPre;
/**
 * Returns HTML element with specified identifier and casts to HTMLImageElement.
 * This function is an equivalent of calling:
 * <pre>
 *     document.getElementById(id) as HTMLImageElement
 * </pre>
 *
 * @param id Identifier of HTML IMG element in document.
 * @return HTML IMG element with specified identifier or null.
 */
function $htmlImage(id) {
    const e = $id(id);
    return e ? e : null;
}
exports.$htmlImage = $htmlImage;
/**
 * Creates HTML element from specified HTML tag name.
 *
 * @return Newly created HTML element.
 */
function $createElement(tag) {
    return document.createElement(tag);
}
exports.$createElement = $createElement;
/**
 * Creates HTML DIV element.
 *
 * @return Newly created HTML DIV element.
 */
function $createDiv() {
    return document.createElement('div');
}
exports.$createDiv = $createDiv;
/**
 * Registers a 'touch' event for the element with specified identifier.
 * This function always registers an 'mouseup' event handler,
 * and for touch screens additionally registers an 'touchend' event handler.
 *
 * @param id Identifier of the element for which the event handler will be registered.
 * @param h Event handler to be registered for the element with specified identifier.
 */
function $touch(id, h) {
    $Touch($id(id), h);
}
exports.$touch = $touch;
/**
 * Registers a 'touch' event for the specified element.
 * This function always registers an 'mouseup' event handler,
 * and for touch screens additionally registers an 'touchend' event handler.
 *
 * @param e Element for which the event handler will be registered.
 * @param h Event handler to be registered for the specified element.
 */
function $Touch(e, h) {
    if (e) {
        if (exports.gvTouch) {
            e.addEventListener('touchend', h);
        }
        else {
            e.addEventListener('mouseup', h);
        }
    }
    else {
        throwElementNotAssigned('$Touch');
    }
}
exports.$Touch = $Touch;
/**
 *
 */
function $handleInput(id, h) {
    $HandleInput($id(id), h);
}
exports.$handleInput = $handleInput;
/**
 *
 */
function $HandleInput(e, h) {
    if (e) {
        e.addEventListener('input', h);
    }
    else {
        throwElementNotAssigned('$HandleInput');
    }
}
exports.$HandleInput = $HandleInput;
/**
 *
 */
function $handleMouseDown(id, h) {
    $HandleMouseDown($id(id), h);
}
exports.$handleMouseDown = $handleMouseDown;
/**
 *
 */
function $HandleMouseDown(e, h) {
    if (e) {
        e.addEventListener('mousedown', h);
    }
    else {
        throwElementNotAssigned('$HandleMouseDown');
    }
}
exports.$HandleMouseDown = $HandleMouseDown;
/**
 *
 */
function $handleMouseUp(id, h) {
    $HandleMouseUp($id(id), h);
}
exports.$handleMouseUp = $handleMouseUp;
/**
 *
 */
function $HandleMouseUp(e, h) {
    if (e) {
        e.addEventListener('mouseup', h);
    }
    else {
        throwElementNotAssigned('$HandleMouseUp');
    }
}
exports.$HandleMouseUp = $HandleMouseUp;
/**
 *
 */
function $handleMouseMove(id, h) {
    $HandleMouseMove($id(id), h);
}
exports.$handleMouseMove = $handleMouseMove;
/**
 *
 */
function $HandleMouseMove(e, h) {
    if (e) {
        e.addEventListener('mousemove', h);
    }
    else {
        throwElementNotAssigned('$HandleMouseMove');
    }
}
exports.$HandleMouseMove = $HandleMouseMove;
/**
 *
 */
function $handleMouseLeave(id, h) {
    $HandleMouseLeave($id(id), h);
}
exports.$handleMouseLeave = $handleMouseLeave;
/**
 *
 */
function $HandleMouseLeave(e, h) {
    if (e) {
        e.addEventListener('mouseleave', h);
    }
    else {
        throwElementNotAssigned('$HandleMouseLeave');
    }
}
exports.$HandleMouseLeave = $HandleMouseLeave;
/**
 *
 */
function $handleKeyDown(id, h) {
    $HandleKeyDown($id(id), h);
}
exports.$handleKeyDown = $handleKeyDown;
/**
 *
 */
function $HandleKeyDown(e, h) {
    if (e) {
        e.addEventListener('keydown', h);
    }
    else {
        throwElementNotAssigned('$HandleKeyDown');
    }
}
exports.$HandleKeyDown = $HandleKeyDown;
/**
 *
 */
function $handleKeyUp(id, h) {
    $HandleKeyUp($id(id), h);
}
exports.$handleKeyUp = $handleKeyUp;
/**
 *
 */
function $HandleKeyUp(e, h) {
    if (e) {
        e.addEventListener('keyup', h);
    }
    else {
        throwElementNotAssigned('$HandleKeyUp');
    }
}
exports.$HandleKeyUp = $HandleKeyUp;
/**
 * Executes the handler when the ENTER key was pressed.
 */
function $handleKeyEnter(id, h) {
    $HandleKeyEnter($id(id), h);
}
exports.$handleKeyEnter = $handleKeyEnter;
/**
 * Executes the handler when the ENTER key was pressed.
 */
function $HandleKeyEnter(e, h) {
    if (e) {
        e.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                h();
            }
        });
    }
    else {
        throwElementNotAssigned('$HandleKeyEnter');
    }
}
exports.$HandleKeyEnter = $HandleKeyEnter;
/**
 * Executes the handler when the SPACE key was pressed.
 */
function $handleKeySpace(id, h) {
    $HandleKeySpace($id(id), h);
}
exports.$handleKeySpace = $handleKeySpace;
/**
 * Executes the handler when the SPACE key was pressed.
 */
function $HandleKeySpace(e, h) {
    if (e) {
        e.addEventListener('keydown', (event) => {
            if (event.key === ' ') {
                h();
            }
        });
    }
    else {
        throwElementNotAssigned('$HandleKeySpace');
    }
}
exports.$HandleKeySpace = $HandleKeySpace;
/**
 * Registers the same handler for 'touch' event, ENTER key and SPACE key.
 * This utility function simplifies registering handler for buttons,
 * for which the touchend, mouseup, keyup events should be handled the same way.
 *
 * @param id Identifier of the element for which the event handler will be registered.
 * @param h Event handler to be registered for the element with specified identifier.
 */
function $touchEnterSpace(id, h) {
    const e = $id(id);
    $Touch(e, h);
    $HandleKeyEnter(e, h);
    $HandleKeySpace(e, h);
}
exports.$touchEnterSpace = $touchEnterSpace;
/**
 * Deletes all child nodes of specifier element.
 *
 * @param id Identifier of the element for which all child nodes will be deleted.
 */
function $deleteChildren(id) {
    $DeleteChildren($id(id));
}
exports.$deleteChildren = $deleteChildren;
/**
 * Deletes all child nodes of specifier element.
 *
 * @param e Element for which all child nodes will be deleted.
 */
function $DeleteChildren(e) {
    if (e) {
        let child = e.firstChild;
        while (child) {
            e.removeChild(child);
            child = e.firstChild;
        }
    }
    else {
        throwElementNotAssigned('$DeleteChildren');
    }
}
exports.$DeleteChildren = $DeleteChildren;
/**
 *
 * @param element
 * @param value
 */
function $SET_TEXT(element, value) {
    element.data = value;
}
exports.$SET_TEXT = $SET_TEXT;
/**
 * Sets the focus on the element with specified identifier.
 *
 * @param id Identifier of the element that will gain a focus.
 */
function $setFocus(id) {
    $SetFocus($id(id));
}
exports.$setFocus = $setFocus;
/**
 * Sets the focus on the specified element.
 *
 * @param e HTML element that will gain a focus.
 */
function $SetFocus(e) {
    if (e) {
        setTimeout(() => {
            e.focus();
        }, 20);
    }
    else {
        throwElementNotAssigned('$SetFocus');
    }
}
exports.$SetFocus = $SetFocus;
function $APPEND_CHILD_TEXT(element) {
    let elText = document.createTextNode('');
    element.appendChild(elText);
    return elText;
}
exports.$APPEND_CHILD_TEXT = $APPEND_CHILD_TEXT;
function $REPLACE(s, t, r) {
    return s.replace(':' + t, r);
}
exports.$REPLACE = $REPLACE;
function $REPLACE_MD(s, t, r) {
    return s.replace(':' + t, (0, marked_1.marked)(r));
}
exports.$REPLACE_MD = $REPLACE_MD;
function $displayBlock(id) {
    $DisplayBlock($id(id));
}
exports.$displayBlock = $displayBlock;
function $DisplayBlock(e) {
    if (e) {
        e.style.display = 'block';
    }
    else {
        throwElementNotAssigned('$DisplayBlock');
    }
}
exports.$DisplayBlock = $DisplayBlock;
function $displayNone(id) {
    $DisplayNone($id(id));
}
exports.$displayNone = $displayNone;
function $DisplayNone(e) {
    if (e) {
        e.style.display = 'none';
    }
    else {
        throwElementNotAssigned('$DisplayNone');
    }
}
exports.$DisplayNone = $DisplayNone;
function $displayFlex(id) {
    $DisplayFlex($id(id));
}
exports.$displayFlex = $displayFlex;
function $DisplayFlex(e) {
    if (e) {
        e.style.display = 'flex';
    }
    else {
        throwElementNotAssigned('$DisplayFlex');
    }
}
exports.$DisplayFlex = $DisplayFlex;
function $makeVisible(id, visible) {
    const e = $id(id);
    if (e) {
        e.style.visibility = visible ? 'visible' : 'hidden';
    }
    else {
        throwElementNotAssigned('$makeVisible');
    }
}
exports.$makeVisible = $makeVisible;
function $visible(id) {
    $Visible($id(id));
}
exports.$visible = $visible;
function $Visible(e) {
    if (e) {
        e.style.visibility = 'visible';
    }
    else {
        throwElementNotAssigned('$visible');
    }
}
exports.$Visible = $Visible;
function $hidden(id) {
    $Hidden($id(id));
}
exports.$hidden = $hidden;
function $Hidden(e) {
    if (e) {
        e.style.visibility = 'hidden';
    }
    else {
        throwElementNotAssigned('$hidden');
    }
}
exports.$Hidden = $Hidden;
/**
 *
 */
function $innerHTML(id, html) {
    $InnerHTML($id(id), html);
}
exports.$innerHTML = $innerHTML;
/**
 *
 */
function $InnerHTML(e, html) {
    if (e) {
        e.innerHTML = html;
    }
    else {
        throwElementNotAssigned('$InnerHTML');
    }
}
exports.$InnerHTML = $InnerHTML;
/**
 * Sets the inner text of the element with specified identifier.
 *
 * @param id Identifier of the element for which the inner text will be set.
 * @param text Text to be set as inner value of the element.
 */
function $innerText(id, text) {
    const e = document.getElementById(id);
    if (e) {
        e.innerText = text;
    }
    else {
        throwElementNotAssigned('$innerText');
    }
}
exports.$innerText = $innerText;
/**
 * Sets the inner text of the specified element.
 *
 * @param e HTML element for which the inner text will be set.
 * @param text Text to be set as inner value of the element.
 */
function $InnerText(e, text) {
    if (e) {
        e.innerText = text;
    }
    else {
        throwElementNotAssigned('$InnerText');
    }
}
exports.$InnerText = $InnerText;
/**
 * Adds a class name to the list of classes of the element with specified identifier.
 *
 * @param id Identifier of the element.
 * @param className Name of the class to be added.
 */
function $addClassName(id, className) {
    $AddClassName($id(id), className);
}
exports.$addClassName = $addClassName;
/**
 * Adds a class name to the list of classes of the specified element.
 *
 * @param e Element to which the class name will be added.
 * @param className Name of the class to be added.
 */
function $AddClassName(e, className) {
    if (e) {
        e.classList.add(className);
    }
    else {
        throwElementNotAssigned('$AddClassName');
    }
}
exports.$AddClassName = $AddClassName;
function $removeClassName(id, className) {
    $RemoveClassName($id(id), className);
}
exports.$removeClassName = $removeClassName;
function $RemoveClassName(e, className) {
    if (e) {
        e.classList.remove(className);
    }
    else {
        throwElementNotAssigned('$RemoveClassName');
    }
}
exports.$RemoveClassName = $RemoveClassName;
/**
 * Converts the input string with Markdown formatting into HTML.
 *
 * @param s Markdown string.
 * @return HTML string.
 */
function $md(s) {
    return marked_1.marked.parse(s);
}
exports.$md = $md;
/**
 * Parses an integer value from string.
 *
 * @param s String to be parsed as integer value.
 * @param def Default value when the number can not be parsed properly.
 */
function $parseInt(s, def) {
    if (s) {
        const num = parseInt(s);
        return isNaN(num) ? def : num;
    }
    return def;
}
exports.$parseInt = $parseInt;
/**
 * Throws exception with console stack trace.
 *
 * @param source Name of the source of the exception.
 */
function throwElementNotAssigned(source) {
    console.trace();
    throw '[simpa]: element not assigned in ' + source;
}
//# sourceMappingURL=utils.js.map