Added webkit ui class with browser to python calling logic

user_config/usr/share/app_name/context_path/resources/js/ajax.js

@@ -0,0 +1,43 @@
+const logUIExceptionAjax = (data, action = "client-exception-logger") => {
+    const postArgs = 'exception_data=' + data;
+
+    messenger.backend.postMessage(postArgs);
+}
+
+
+const doAjax = (actionPath, data, action) => {
+    let xhttp = new XMLHttpRequest();
+
+    xhttp.onreadystatechange = function() {
+        if (this.readyState === 4 && this.status === 200) {
+            if (this.responseText != null) {  // this.responseXML if getting XML data
+                postAjaxController(JSON.parse(this.responseText), action);
+            } else {
+                let type = "danger"
+                let msg  = "No content returned. Check the target path.";
+                data     = '{"message": { "type": "' + type +  '", "text": "' + text + '" } }'
+                postAjaxController(JSON.parse(data));
+            }
+        }
+    };
+
+    xhttp.open("POST", actionPath, true);
+    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    // Force return to be JSON NOTE: Use application/xml to force XML
+    xhttp.overrideMimeType('application/json');
+    xhttp.send(data);
+}
+ 
+const formatURL = (basePath) => {
+    url = window.location.href;
+    if ( url.endsWith('/') )
+        return url + basePath;
+    else
+        return url + '/' + basePath;
+}
+
+const fetchData = async (url) => {
+    let response = null;
+    response = await fetch(url);
+    return await response.json();
+}

user_config/usr/share/app_name/context_path/resources/js/context-menu.js

@@ -0,0 +1,28 @@
+const menu = document.querySelector(".menu");
+let menuVisible = false;
+
+const toggleMenu = command => {
+    menu.style.display = command === "show" ? "block" : "none";
+    menu.style.zIndex  = "9999";
+    menuVisible        = !menuVisible;
+};
+
+const setPosition = ({ top, left }) => {
+    menu.style.left = `${left}px`;
+    menu.style.top  = `${top}px`;
+    toggleMenu("show");
+};
+
+window.addEventListener("click", e => {
+    if(menuVisible) toggleMenu("hide");
+});
+
+window.addEventListener("contextmenu", e => {
+    e.preventDefault();
+    const origin = {
+        left: e.pageX,
+        top: e.pageY
+    };
+    setPosition(origin);
+    return false;
+});

user_config/usr/share/app_name/context_path/resources/js/events.js

@@ -0,0 +1,22 @@
+const messenger = window.webkit.messageHandlers
+
+window.onload = (eve) => {
+    console.log("Loaded...");
+}
+
+window.onerror = function(msg, url, line, col, error) {
+   // Note that col & error are new to the HTML 5 spec and may not be supported in every browser.
+   const suppressErrorAlert = false;
+   let extra = !col ? '' : '\ncolumn: ' + col;
+   extra += !error ? '' : '\nerror: ' + error;
+   const data = `Error:  ${msg} \nurl: ${url} \nline: ${line}  ${extra}`
+
+   logUIExceptionAjax(data);
+
+   // If you return true, then error alerts (like in older versions of Internet Explorer) will be suppressed.
+   return suppressErrorAlert;
+};
+
+const say_hello = () => {
+    messenger.backend.postMessage("Hello, World!");
+}

user_config/usr/share/app_name/context_path/resources/js/post-ajax.js

@@ -0,0 +1,11 @@
+const postAjaxController = (data, action) => {
+    if (data.message) {
+        message = data.message
+
+        if (action == "someAction" && message.type.includes("success")) {
+            console.log("Success!");
+        }
+
+        displayMessage(message.text, message.type, 0);
+    }
+}

user_config/usr/share/app_name/context_path/resources/js/ui-logic.js

@@ -0,0 +1,68 @@
+// Message handler
+const displayMessage = (message, type, timeout, msgWindow = "page-alert-zone") => {
+    let alertField  = document.getElementById(msgWindow);
+    let divElm      = document.createElement("DIV");
+    let btnElm      = document.createElement("BUTTON");
+    let spnElm      = document.createElement("SPAN");
+    let textElm     = document.createTextNode(message);
+
+    divElm.setAttribute("class", "alert alert-dismissible fade show alert-" + type);
+    divElm.setAttribute("role", "alert");
+    divElm.appendChild(textElm);
+    btnElm.type     = "button";
+    textElm         = document.createTextNode("X");
+    btnElm.setAttribute("class", "btn-dark btn-close");
+    btnElm.setAttribute("data-bs-dismiss", "alert");
+    btnElm.setAttribute("aria-label", "close");
+    spnElm.setAttribute("aria-hidden", "true");
+    spnElm.appendChild(textElm);
+    btnElm.appendChild(spnElm);
+    divElm.appendChild(btnElm);
+    alertField.appendChild(divElm);
+
+    if (timeout > 0) {
+        setTimeout(function () {
+            clearChildNodes(alertField);
+        }, timeout * 1000);
+    }
+}
+
+const clearChildNodes = (parent) => {
+    while (parent.firstChild) {
+        parent.removeChild(parent.firstChild);
+    }
+}
+
+
+
+
+// Cache Buster
+const clearCache = () => {
+    const rep = /.*\?.*/;
+    let links     = document.getElementsByTagName('link'),
+        scripts   = document.getElementsByTagName('script'),
+        video     = document.getElementsByTagName('video'),
+        process_scripts = false;
+
+    for (let i = 0; i < links.length; i++) {
+        let link = links[i],
+        href = link.href;
+        if(rep.test(href)) {
+            link.href = href + '&' + Date.now();
+        } else {
+            link.href = href + '?' + Date.now();
+        }
+
+    }
+    if(process_scripts) {
+        for (let i = 0; i < scripts.length; i++) {
+            let script = scripts[i],
+            src = script.src;
+            if(rep.test(src)) {
+                script.src = src+'&'+Date.now();
+            } else {
+                script.src = src+'?'+Date.now();
+            }
+        }
+    }
+}