om_interface.js

var appInfo = document.getElementById("app");

/***************************** Touch handler ************************************/

var timerTouchDown;

function touchHandler(event)
{
    event.preventDefault();
    var touches = event.changedTouches,
    first = touches[0],
    type = "",
    mouseButton = 0;
    switch(event.type)
    {
        case "touchstart":
            type = "mousedown";
            break;
        case "touchmove":
            type = "mousemove";
            break;
        case "touchend":
            type = "mouseup";
            break;
        default:
            return;
    }

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
        first.screenX, first.screenY, 
        first.clientX, first.clientY, false, 
        false, false, false, mouseButton, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

/**************************** END: Touch handler ***************************************/

var openedWindows = [];

/***************************** Move Window function ************************************/

function moveWindow(windowBlock, windowTitlebar) {
    var offsetX = 0, offsetY = 0, posX = 0, posY = 0;
    if (!openedWindows.includes(windowBlock.id.split("__")[0]))
        openedWindows.push(windowBlock.id.split("__")[0]);
    windowTitlebar.onmousedown = dragMouseDown;
    windowBlock.style.position = "absolute";

    function dragMouseDown(event) {
        event = event || window.event;
        event.preventDefault();
        posX = event.clientX;
        posY = event.clientY;
        document.onmouseup = closeDragElement;
        document.onmousemove = elementDrag;
    }

    function elementDrag(event) {
        event = event || window.event;
        event.preventDefault();
        offsetX = posX - event.clientX;
        offsetY = posY - event.clientY;
        posX = event.clientX;
        posY = event.clientY;

        windowBlock.style.top = (windowBlock.offsetTop - offsetY) + "px";
        windowBlock.style.left = (windowBlock.offsetLeft - offsetX) + "px";
    }

    function closeDragElement() {
        document.onmouseup = null;
        document.onmousemove = null;
    }
}

function windowElementsClick(element, event) {
    if (document.onmouseup != null) {
        document.getElementById(element).classList.remove("offset_light");
    } else {
        document.getElementById(element).classList.add("offset_light");
    }
}

/************************** END: Move Window function **********************************/

/************************** Popup message ********************************/

var showMessageTimer;

/* When timer is out message is close by closeMessage() */
function showMessage(textMessage) {
    document.getElementById("message__text").textContent = textMessage;
    document.getElementById("message").style.transform = "translateY(8rem)";
    showMessageTimer = window.setTimeout(function(){closeMessage();}, 2500);
}

/* Close message and stop timer */
function closeMessage() {
    window.clearTimeout(showMessageTimer);
    document.getElementById("message").style.transform = "translateY(-5rem)";
}

/* Message:on button close clicked */
["click", "touchend"].forEach(function(eventType){
    document.getElementById("message__btn-close").addEventListener(eventType, function() {
        closeMessage();
    });
});

/*********************** END: Popup message ******************************/

/********* Application launcher **************/

/* Application launch */
function startApplication() {
    document.getElementById("wrapper").style.opacity = "0.0";
    document.getElementById("app-interface").style.opacity = "1.0";
    window.setTimeout(function() {
        document.getElementById("wrapper").classList.add("unvisible");
        document.getElementById("app-interface").classList.remove("unvisible");
        document.getElementById("app-interface").classList.add("no-selection");
    }, 50);
}

/* Application terminate */
function closeApplication() {
    document.getElementById("app-interface").style.opacity = "0.0";
    document.getElementById("wrapper").style.opacity = "1.0";
    window.setTimeout(function() {
        document.getElementById("app-interface").classList.add("unvisible");
        document.getElementById("wrapper").classList.remove("unvisible");
        document.getElementById("app-interface").classList.remove("no-selection");
    }, 50);

    openedWindows.forEach(function(interfaceName){
        let interfaceWindow = document.getElementById(interfaceName + "__window");
        if ((!interfaceWindow.classList.contains("unvisible")) 
          && (interfaceWindow.getAttribute("data-interface") != "main")) {
            interfaceWindow.classList.toggle("unvisible");
            interfaceWindow.style.opacity = "0.0";
        }
    });

    showMessage("Приложение закрыто, можно закрыть вкладку браузера");
}

/* Add new Interface */
function createNewInterface(interfaceName, dataInterface="normal") {
    let newWindow = document.getElementById(interfaceName + "-interface__window");
    let newTitleBar = document.getElementById(interfaceName + "-interface__titlebar");
    let newTitleBarIcon = document.getElementById(interfaceName + "-interface__titlebaricon");
    let newWindowCloseButton = document.getElementById(interfaceName + "-interface__closebutton");

    newWindow.setAttribute("data-interface", dataInterface);

    moveWindow(newWindow, newTitleBar);
    ["click", "touchend"].forEach(function(event) {
        newTitleBarIcon.addEventListener(event, function(e) {
            windowElementsClick(newTitleBarIcon.id, e.type);
            showMessage(appInfo.dataset.appDescription);
        });
        newWindowCloseButton.addEventListener(event, function(e) {
            windowElementsClick(newWindowCloseButton.id, e.type);
            closeMessage();
            if (dataInterface == "main") {
                closeApplication();
            } else if (dataInterface == "normal") {
                newWindow.style.opacity = "0.0";
                window.setTimeout(function(){
                    newWindow.classList.toggle("unvisible");
                }, 200);
            }
        });
    });
}

/* On App component clicked */
document.getElementById("app").addEventListener("click", function() {
    closeMessage();

    createNewInterface("app", "main");
    createNewInterface("getcolor");
    createNewInterface("shadowdialog");
    createNewInterface("borderdialog");
    createNewInterface("codedialog");

    startApplication();

    windowOverlapSetting();

    enableTouchHandler();
    setWindowToCenter(getMainInterfaceWindowID());
    onRunningCreativeButtonApp();
});

/* Get Main Interface */
function getMainInterfaceWindowID() {
    var mainInterfaceWindowID;
    [].forEach.call(document.getElementsByClassName("app-interface__window"), function(interfaceWindow){
        if (interfaceWindow.getAttribute("data-interface") == "main") {
            mainInterfaceWindowID = interfaceWindow.id;
            return;
        }
    });

    return mainInterfaceWindowID;
}

/* Enable touch handlers */
function enableTouchHandler() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

/* Set window to center */
function setWindowToCenter(windowID) {
    appWindow = document.getElementById(windowID);
    window.setTimeout(function(){
        appWindow.style.top = "calc(50% - " + (parseFloat(window.getComputedStyle(appWindow).getPropertyValue("height")) / 2) + "px)";
        appWindow.style.left = "calc(50% - " + (parseFloat(window.getComputedStyle(appWindow).getPropertyValue("width")) / 2) + "px)";
    }, 50);
}

/* Window overlap function */
function windowOverlapSetting() {
    ["mousedown", "touchstart"].forEach(function(eventType){
        openedWindows.forEach(function(windowName){
            document.getElementById(windowName.concat("__window")).addEventListener(eventType, function(){
                currentWindow = this.id;
                if (this.style.zIndex != openedWindows.length) {
                    openedWindows.forEach(function(winName){
                        selectedWindow = document.getElementById(winName.concat("__window"));
                        if (currentWindow != selectedWindow.id) {
                            if (selectedWindow.style.zIndex > 0)
                                selectedWindow.style.zIndex -= 1;
                        } else {
                            selectedWindow.style.zIndex = openedWindows.length;
                        }
                    });
                }
            });
        });
    });
}

/********* END: Application launcher **************/

function importOmModule(pathToModule) {
    var script = document.createElement("script");
    script.src = pathToModule;
    document.body.append(script);
}