Skip to content

Commit

Permalink
Introduce common.js in settings pages
Browse files Browse the repository at this point in the history
  • Loading branch information
blazoncek committed Sep 17, 2024
1 parent ac8f919 commit ceed494
Show file tree
Hide file tree
Showing 15 changed files with 275 additions and 662 deletions.
9 changes: 8 additions & 1 deletion tools/cdata.js
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,8 @@ async function minify(str, type = "plain") {
} else if (type == "css-minify") {
return new CleanCSS({}).minify(str).styles;
} else if (type == "js-minify") {
return await minifyHtml('<script>' + str + '</script>', options).replace(/<[\/]*script>/g, '');
let js = await minifyHtml('<script>' + str + '</script>', options);
return js.replace(/<[\/]*script>/g, '');
} else if (type == "html-minify") {
return await minifyHtml(str, options);
}
Expand Down Expand Up @@ -252,6 +253,12 @@ writeChunks(
str
.replace("%%", "%")
},
{
file: "common.js",
name: "JS_common",
method: "gzip",
filter: "js-minify",
},
{
file: "settings.htm",
name: "PAGE_settings",
Expand Down
118 changes: 118 additions & 0 deletions wled00/data/common.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
var d=document;
var loc = false, locip, locproto = "http:";

function H(pg="") { window.open("https://kno.wled.ge/"+pg); }
function GH() { window.open("https://github.com/Aircoookie/WLED"); }
function gId(c) { return d.getElementById(c); } // getElementById
function cE(e) { return d.createElement(e); } // createElement
function gEBCN(c) { return d.getElementsByClassName(c); } // getElementsByClassName
function gN(s) { return d.getElementsByName(s)[0]; } // getElementsByName
function isE(o) { return Object.keys(o).length === 0; } // isEmpty
function isO(i) { return (i && typeof i === 'object' && !Array.isArray(i)); } // isObject
function isN(n) { return !isNaN(parseFloat(n)) && isFinite(n); } // isNumber
// https://stackoverflow.com/questions/3885817/how-do-i-check-that-a-number-is-float-or-integer
function isF(n) { return n === +n && n !== (n|0); } // isFloat
function isI(n) { return n === +n && n === (n|0); } // isInteger
function toggle(el) { gId(el).classList.toggle("hide"); gId('No'+el).classList.toggle("hide"); }
function tooltip(cont=null) {
d.querySelectorAll((cont?cont+" ":"")+"[title]").forEach((element)=>{
element.addEventListener("mouseover", ()=>{
// save title
element.setAttribute("data-title", element.getAttribute("title"));
const tooltip = d.createElement("span");
tooltip.className = "tooltip";
tooltip.textContent = element.getAttribute("title");

// prevent default title popup
element.removeAttribute("title");

let { top, left, width } = element.getBoundingClientRect();

d.body.appendChild(tooltip);

const { offsetHeight, offsetWidth } = tooltip;

const offset = element.classList.contains("sliderwrap") ? 4 : 10;
top -= offsetHeight + offset;
left += (width - offsetWidth) / 2;

tooltip.style.top = top + "px";
tooltip.style.left = left + "px";
tooltip.classList.add("visible");
});

element.addEventListener("mouseout", ()=>{
d.querySelectorAll('.tooltip').forEach((tooltip)=>{
tooltip.classList.remove("visible");
d.body.removeChild(tooltip);
});
// restore title
element.setAttribute("title", element.getAttribute("data-title"));
});
});
};
// https://www.educative.io/edpresso/how-to-dynamically-load-a-js-file-in-javascript
function loadJS(FILE_URL, async = true, preGetV = undefined, postGetV = undefined) {
let scE = d.createElement("script");
scE.setAttribute("src", FILE_URL);
scE.setAttribute("type", "text/javascript");
scE.setAttribute("async", async);
d.body.appendChild(scE);
// success event
scE.addEventListener("load", () => {
//console.log("File loaded");
if (preGetV) preGetV();
GetV();
if (postGetV) postGetV();
});
// error event
scE.addEventListener("error", (ev) => {
console.log("Error on loading file", ev);
alert("Loading of configuration script failed.\nIncomplete page data!");
});
}
function getLoc() {
let l = window.location;
if (l.protocol == "file:") {
loc = true;
locip = localStorage.getItem('locIp');
if (!locip) {
locip = prompt("File Mode. Please enter WLED IP!");
localStorage.setItem('locIp', locip);
}
} else {
// detect reverse proxy
let path = l.pathname;
let paths = path.slice(1,path.endsWith('/')?-1:undefined).split("/");
if (paths.length > 1) paths.pop(); // remove subpage (or "settings")
if (paths.length > 0 && paths[paths.length-1]=="settings") paths.pop(); // remove "settings"
if (paths.length > 1) {
locproto = l.protocol;
loc = true;
locip = l.hostname + (l.port ? ":" + l.port : "") + "/" + paths.join('/');
}
}
}
function getURL(path) { return (loc ? locproto + "//" + locip : "") + path; }
function B() { window.open(getURL("/settings"),"_self"); }
var timeout;
function showToast(text, error = false) {
var x = gId("toast");
if (!x) return;
x.innerHTML = text;
x.className = error ? "error":"show";
clearTimeout(timeout);
x.style.animation = 'none';
timeout = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2900);
}
function uploadFile(fileObj, name) {
var req = new XMLHttpRequest();
req.addEventListener('load', function(){showToast(this.responseText,this.status >= 400)});
req.addEventListener('error', function(e){showToast(e.stack,true);});
req.open("POST", "/upload");
var formData = new FormData();
formData.append("data", fileObj.files[0], name);
req.send(formData);
fileObj.value = '';
return false;
}
14 changes: 7 additions & 7 deletions wled00/data/cpal/cpal.htm
Original file line number Diff line number Diff line change
Expand Up @@ -608,8 +608,8 @@ <h1 style="display: flex; align-items: center;">
}

function generatePaletteDivs() {
const palettesDiv = d.getElementById("palettes");
const staticPalettesDiv = d.getElementById("staticPalettes");
const palettesDiv = gId("palettes");
const staticPalettesDiv = gId("staticPalettes");
const paletteDivs = Array.from(palettesDiv.children).filter((child) => {
return child.id.match(/^palette\d$/); // match only elements with id starting with "palette" followed by a single digit
});
Expand All @@ -620,25 +620,25 @@ <h1 style="display: flex; align-items: center;">

for (let i = 0; i < paletteArray.length; i++) {
const palette = paletteArray[i];
const paletteDiv = d.createElement("div");
const paletteDiv = cE("div");
paletteDiv.id = `palette${i}`;
paletteDiv.classList.add("palette");
const thisKey = Object.keys(palette)[0];
paletteDiv.dataset.colarray = JSON.stringify(palette[thisKey]);

const gradientDiv = d.createElement("div");
const gradientDiv = cE("div");
gradientDiv.id = `paletteGradient${i}`
const buttonsDiv = d.createElement("div");
const buttonsDiv = cE("div");
buttonsDiv.id = `buttonsDiv${i}`;
buttonsDiv.classList.add("buttonsDiv")

const sendSpan = d.createElement("span");
const sendSpan = cE("span");
sendSpan.id = `sendSpan${i}`;
sendSpan.onclick = function() {initiateUpload(i)};
sendSpan.setAttribute('title', `Send current editor to slot ${i}`); // perhaps Save instead of Send?
sendSpan.innerHTML = svgSave;
sendSpan.classList.add("sendSpan")
const editSpan = d.createElement("span");
const editSpan = cE("span");
editSpan.id = `editSpan${i}`;
editSpan.onclick = function() {loadForEdit(i)};
editSpan.setAttribute('title', `Copy slot ${i} palette to editor`);
Expand Down
20 changes: 9 additions & 11 deletions wled00/data/pxmagic/pxmagic.htm
Original file line number Diff line number Diff line change
Expand Up @@ -882,10 +882,8 @@
hostnameLabel();
})();

function gId(id) {
return d.getElementById(id);
}

function gId(e) {return d.getElementById(e);}
function cE(e) {return d.createElement(e);}
function hostnameLabel() {
const link = gId("wledEdit");
link.href = WLED_URL + "/edit";
Expand Down Expand Up @@ -1675,7 +1673,7 @@
}

function createCanvas(width, height) {
const canvas = d.createElement("canvas");
const canvas = cE("canvas");

canvas.width = width;
canvas.height = height;
Expand Down Expand Up @@ -1719,7 +1717,7 @@
const blob = new Blob([text], { type: mimeType });
const url = URL.createObjectURL(blob);

const anchorElement = d.createElement("a");
const anchorElement = cE("a");
anchorElement.href = url;
anchorElement.download = `${filename}.${fileExtension}`;

Expand Down Expand Up @@ -1790,7 +1788,7 @@
hideElement = "preview"
) {
const hide = gId(hideElement);
const toast = d.createElement("div");
const toast = cE("div");
const wait = 100;

toast.style.animation = "fadeIn";
Expand All @@ -1799,14 +1797,14 @@

toast.classList.add("toast", type);

const body = d.createElement("span");
const body = cE("span");
body.classList.add("toast-body");

body.textContent = message;

toast.appendChild(body);

const progress = d.createElement("div");
const progress = cE("div");
progress.classList.add("toast-progress");

progress.style.animation = "progress";
Expand All @@ -1831,7 +1829,7 @@

function carousel(id, images, delay = 3000) {
let index = 0;
const carousel = d.createElement("div");
const carousel = cE("div");
carousel.classList.add("carousel");

images.forEach((canvas, i) => {
Expand Down Expand Up @@ -1959,7 +1957,7 @@
let errorElement = parent.querySelector(".error-message");

if (!errorElement) {
errorElement = d.createElement("div");
errorElement = cE("div");
errorElement.classList.add("error-message");
parent.appendChild(errorElement);
}
Expand Down
45 changes: 2 additions & 43 deletions wled00/data/settings.htm
Original file line number Diff line number Diff line change
Expand Up @@ -4,53 +4,12 @@
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>WLED Settings</title>
<script src="common.js" async type="text/javascript"></script>
<script>
var d=document;
var loc = false, locip, locproto = "http:";
function gId(n){return d.getElementById(n);}
// https://www.educative.io/edpresso/how-to-dynamically-load-a-js-file-in-javascript
function loadJS(FILE_URL, async = true) {
let scE = d.createElement("script");
scE.setAttribute("src", FILE_URL);
scE.setAttribute("type", "text/javascript");
scE.setAttribute("async", async);
d.body.appendChild(scE);
// success event
scE.addEventListener("load", () => {
//console.log("File loaded");
GetV();
});
// error event
scE.addEventListener("error", (ev) => {
console.log("Error on loading file", ev);
alert("Loading of configuration script failed.\nIncomplete page data!");
});
}
function S() {
let l = window.location;
if (l.protocol == "file:") {
loc = true;
locip = localStorage.getItem('locIp');
if (!locip) {
locip = prompt("File Mode. Please enter WLED IP!");
localStorage.setItem('locIp', locip);
}
} else {
// detect reverse proxy
let path = l.pathname;
let paths = path.slice(1,path.endsWith('/')?-1:undefined).split("/");
if (paths.length > 1) {
paths.pop(); // remove "settings"
locproto = l.protocol;
loc = true;
locip = l.hostname + (l.port ? ":" + l.port : "") + "/" + paths.join('/');
}
}
getLoc();
loadJS(getURL('/settings/s.js?p=0'), false); // If we set async false, file is loaded and executed, then next statement is processed
}
function getURL(path) {
return (loc ? locproto + "//" + locip : "") + path;
}
</script>
<style>
body {
Expand Down
Loading

0 comments on commit ceed494

Please sign in to comment.