pragma-views2/lib/dom-helper.js

import {isMobile} from './device-helper.js';

/**
 * Find a element where dragging is started and ensure that it matches the given query
 * @param event
 * @param selectQuery
 * @returns {*}
 */
export function getEventTarget(event, selectQuery) {
    let x = 0;
    let y = 0;

    if (isMobile()) {
        x = event.touches[0].clientX;
        y = event.touches[0].clientY;
    }
    else {
        x = event.clientX;
        y = event.clientY;
    }

    const topElement = document.elementFromPoint(x, y);

    if (selectQuery && !topElement.matches(selectQuery)) {
        return null;
    }

    return topElement;
}

/**
 * Given a element check if it is on top of a li element and if it is pass back that li
 * @param element
 * @returns {*}
 */
export function findParentLi(element) {
    return findParentOfType(element, "LI");
}

/**
 * Get a li that you want to drag given a query to determine if the target touch point is valid
 * @param event
 * @param event
 * @returns {*}
 */
export function getValidLi(event, selectQuery) {
    const topElement = getEventTarget(event, selectQuery);
    return findParentLi(topElement);
}

/**
 * Create a highlight rect that is the same size as the given element
 * @param element
 */
export function createHighlightFor(dimentions) {
    const highlight = document.createElement("DIV");
    highlight.classList.add('highlight');
    setStyleDimentions(highlight, dimentions);

    return highlight;
}

/**
 * Update a style with the top, left, right and bottom properties of a bounding rect
 * @param element
 * @param dimentions
 */
export function setStyleDimentions(element, dimentions) {
    element.style.setProperty("--left", dimentions.left);
    element.style.setProperty("--top", dimentions.top);
    element.style.setProperty("--width", dimentions.width);
    element.style.setProperty("--height", dimentions.height);
}

/**
 * Find a element that has a particular classname in it's class attribute.
 * @param element
 * @param className
 * @returns {*}
 */
export function findParentWithClass(element, className) {
    if (!element) {
        return null;
    }

    if (element.classList.contains(className)) {
        return element;
    }

    return findParentWithClass(element.parentElement, className);
}

/**
 * Find parent that is of a particular type
 * @param element
 * @param nodeName
 * @return {*}
 */
export function findParentOfType(element, nodeName) {
    if (!element) {
        return null;
    }

    if (element.nodeName.toLowerCase() == nodeName.toLowerCase()) {
        return element;
    }

    return findParentOfType(element.parentElement, nodeName);
}

/**
 *
 * @param tag: element tag
 * @param classes: array of string
 * @param attributes: {name: "attributename", value: "attributevalue"}
 */
export function createElement(tag, classes, attributes, content, role) {
    const el = document.createElement(tag);

    if (classes != undefined && classes != null) {
        for (let cls of classes) {
            el.classList.add(cls);
        }
    }

    if (attributes != undefined && attributes != null) {
        for (let attr of attributes) {
            el.setAttribute(attr.name, attr.value);
        }
    }

    if (content != undefined && content != null) {
        el.innerText = content;
    }

    if (role != undefined && role != null) {
        el.setAttribute("role", role)
    }

    return el;
}

export function createFullPageLayer() {
    let layer = document.querySelector("#dialog-layer");
    if (layer != undefined) {
        return layer;
    }

    layer = document.createElement("div");
    layer.id = "dialog-layer";

    const main = document.querySelector("main");
    main.appendChild(layer);
    return layer;
}

export function disposeFullPageLayer() {
    const layer = document.querySelector("#dialog-layer");

    if (layer != undefined) {
        while (layer.firstChild) {
            layer.children.remove(layer.firstChild);
        }

        layer.parentElement.removeChild(layer);
    }
}