PHP Classes

File: app/src/app.js

Recommend this page to a friend!
  Classes of Rodolfo Berrios Arce  >  XR PHP Debugger Online  >  app/src/app.js  >  Download  
File: app/src/app.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: XR PHP Debugger Online
Debug PHP code using a Web interface
Author: By
Last change:
Date: 3 months ago
Size: 9,186 bytes
 

Contents

Class file image Download
let filter = {
    topic: "",
    emote: ""
},
    filterOperator = {
        topic: "=",
        emote: "*="
    },
    currentStatus = "resume",
    queuedMessageCount = 0,
    messageActions = {
        continue: function (el) {
            messageAction('lock-delete', el);
        },
        stop: function (el) {
            messageAction('lock-patch', el);
        }
    },
    messageAction = function (endpoint, el) {
        let message = el.closest(".message");
        let data = {
            id: message.dataset.id
        };
        fetch("/" + endpoint, {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(function () {
            message.querySelectorAll(".message-buttons--pause > button").forEach(function (el) {
                el.setAttribute("disabled", "disabled")
            })
        }).catch((error) => {
            console.log("Error:", error);
        });
    },
    windowActions = {
        pushStatus: function (status) {
            setStatus(status);
            if (status === "resume") {
                this.resume();
            }
        },
        resume: function () {
            document.querySelectorAll(".message--while-pause").forEach(function (el) {
                el.classList.remove("message--while-pause");
            })
            this.resetQueue();
        },
        resetQueue: function () {
            queuedMessageCount = 0;
            document.getElementById("queue-count").textContent = "";
        },
        clear: function () {
            document.querySelector("main").innerHTML = "";
            filter = {
                topic: "",
                emote: ""
            };
            this.resetQueue();
        }
    },
    windowAction = function (action) {
        if (action === currentStatus || document.body.classList.contains("body--splash")) {
            return;
        }
        if (action === "clear") {
            windowActions.clear();
        } else {
            windowActions.pushStatus(action);
        }
        pushMessage({
            message: "<b>" + action.toUpperCase() + "</b> " + document.title
        }, true);
    },
    keysToAction = {
        KeyS: "stop",
        KeyR: "resume",
        KeyP: "pause",
        KeyC: "clear"
    },
    setStatus = function (status) {
        document.querySelectorAll(".button--active").forEach(function (el) {
            el.classList.remove("button--active")
        });
        document.querySelectorAll("[data-action=" + status + "]").forEach(function (el) {
            el.classList.add("button--active");
        });
        if (status === "clear") {
            setStatus(currentStatus);
            return;
        }
        currentStatus = status;

        return currentStatus;
    },
    templates = {
        message: document.querySelector("#message")
    };
copyToClipboard = function (text) {
    try {
        navigator.clipboard.writeText(text);
    } catch (ex) {
        if (window.clipboardData && window.clipboardData.setData) {
            return window.clipboardData.setData("Text", text);
        } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
            let textarea = document.createElement("textarea");
            textarea.textContent = text;
            textarea.style.position = "fixed";
            document.body.appendChild(textarea);
            textarea.select();
            try {
                return document.execCommand("copy");
            } catch (ex) {
                console.warn("Copy to clipboard failed.", ex);
                return prompt("Copy to clipboard: Ctrl+C, Enter", text);
            } finally {
                document.body.removeChild(textarea);
            }
        }
    }
}
pushMessage = function (data, isStatus = false) {
    let el = templates.message.content.cloneNode(true);
    el.querySelector(".time").textContent = (new Date()).toTimeString().split(" ")[0];
    el.querySelector(".topic").textContent = data.topic;
    el.querySelector(".emote").textContent = data.emote;
    el.querySelector(".body-raw").innerHTML = data.message;
    let bodyContextDisplay = el.querySelector(".body-context-display");
    bodyContextDisplay.textContent = data.file_display_short;
    if (data.file_display_short) {
        bodyContextDisplay.textContent = "?" + data.file_display_short;
        bodyContextDisplay.setAttribute("title", data.file_display || "");
    }
    if (document.body.classList.contains("body--splash")) {
        document.body.classList.remove("body--splash", "body--splash-in");
    }
    document.querySelector("main").prepend(el);
    el = document.querySelector(".message:first-child");
    el.classList.add("message--loading");
    el.dataset.emote = data.emote ? data.emote : "";
    el.dataset.topic = data.topic ? data.topic : "";
    el.dataset.id = data.id ? data.id : "";
    if (data.action === "pause") {
        el.classList.add("message--pause");
    }
    if (isStatus) {
        el.classList.add("message--status");
        setTimeout(function () {
            el.classList.add("message--removing");
            setTimeout(function () {
                el.remove();
            }, 250)
        }, 5000)
    }
    if (!isStatus && currentStatus === "pause") {
        queuedMessageCount++;
        el.classList.add("message--while-pause");
        document.getElementById("queue-count").textContent = queuedMessageCount;
    }
    setTimeout(function () {
        el.classList.remove("message--loading");
    }, 250);

}
setStatus(currentStatus);
for (key in keysToAction) {
    document.querySelectorAll("[data-action=" + keysToAction[key] + "]").forEach(function (el) {
        el.addEventListener("click", function () {
            windowAction(this.dataset.action);
        });
    })
}
document.addEventListener("keyup", function (event) {
    if (event.target.classList.contains("no-keys")) {
        return;
    }
    if (event.code in keysToAction && !(event.metaKey || event.ctrlKey || event.altKey)) {
        windowAction(keysToAction[event.code]);
    }
})
document.querySelector(".header-title").addEventListener("paste", event => {
    event.preventDefault();
    let text = (event.originalEvent || event).clipboardData.getData("text/plain");
    document.execCommand("insertHTML", false, text);
});
document.querySelector(".header-title").addEventListener("input", event => {
    document.title = event.target.textContent;
});
document.addEventListener("click", event => {
    var el = event.target;
    var messageEl = el.closest(".message");
    switch (el.dataset.action) {
        case "execution--continue": messageActions.continue(el);
            break;
        case "execution--stop": messageActions.stop(el);
            break;
        case "remove":
            if(messageEl.classList.contains("message--pause")) {
                messageActions.continue(el);
            }
            messageEl.classList.add("message--removing");           
            setTimeout(function () {
                messageEl.remove();
            }, 250);
            break;
        case "copy":
            copyToClipboard(messageEl.querySelector(".body-raw").textContent + "\n" + messageEl.querySelector(".body-context").textContent.replace(/[\n\r]+|[\s]{2,}/g, ''));
            break;
        case "export":
            html2canvas(messageEl.querySelector(".body"), {
                scale: window.devicePixelRatio * 2
            }).then(function (canvas) {
                let dataUrl = canvas.toDataURL("image/png");
                let link = document.createElement("a");
                link.download = document.title + "-" + messageEl.querySelector(".time").textContent + ".png";
                link.href = dataUrl;
                link.click();
            });
            break;
    }
    if (el.classList.contains("body-context-display")) {
        copyToClipboard(el.getAttribute("title"));
    }
    if (el.classList.contains("filter-button")) {
        var filterQuery = "",
            messageEl = messageEl,
            subject = el.classList.contains("topic") ? "topic" : "emote";
        if (messageEl && filter[subject] === messageEl.dataset[subject]) {
            return;
        }
        filter[subject] = messageEl ? messageEl.dataset[subject] : "";
        for (filterSubject in filter) {
            if (filter[filterSubject] === "") {
                continue;
            }
            filterQuery += "[data-" + filterSubject + filterOperator[filterSubject] + filter[filterSubject] + "]";
        }
        document.getElementById("filtering").innerHTML = filterQuery === "" ? "" : ".message:not(" + filterQuery + ") { display: none; }";
        document.querySelector(".header-filter ." + subject).textContent = messageEl ? filter[subject] : "";
    }
});
document.body.classList.add("body--splash-in");
es = new EventSource("dump");
es.addEventListener("message", function (event) {
    if (currentStatus === "stop") {
        return;
    }
    pushMessage(JSON.parse(event.data));
});
For more information send a message to info at phpclasses dot org.