199 lines
6.9 KiB
JavaScript
199 lines
6.9 KiB
JavaScript
class buiProgressBar {
|
|
constructor (name) {
|
|
this.root = document.createElement("span");
|
|
this.lable = document.createElement("span");
|
|
this.progress = document.createElement("span");
|
|
this.progressFilled = document.createElement("span");
|
|
this.root.setAttribute("class","bui_progress_bar_root");
|
|
this.lable.setAttribute("class","bui_progress_bar_lable");
|
|
this.progress.setAttribute("class","bui_progress_bar_progress");
|
|
this.progressFilled.setAttribute("class","buo_progress_bar_progress_filled");
|
|
this.root.appendChild(this.progress);
|
|
this.progress.appendChild(this.progressFilled);
|
|
this.root.appendChild(this.lable);
|
|
this.name = "string" == typeof name ? name : "";
|
|
this.value = 0;
|
|
this.progress = 0;
|
|
}
|
|
|
|
update (value,progress) {
|
|
this.value = !isNaN(value) ? value : 0;
|
|
this.progress = !isNaN(progress) ? Math.max(0,Math.min(1,progress)) : 0;
|
|
this.lable.innerText = this.name+": "+numberShorten(this.value,4);
|
|
this.progressFilled.style.width = (this.progress*100)+"%";
|
|
}
|
|
}
|
|
|
|
class buiButton {
|
|
constructor (name, myFunction) {
|
|
this.root = document.createElement("a");
|
|
this.lable = document.createElement("span");
|
|
this.root.setAttribute("class","bui_button_root"+("string" == typeof name ? " "+(name.replaceAll(" ","_"))+"_button" : ""));
|
|
this.lable.setAttribute("class","bui_button_lable");
|
|
this.lable.innerText = "string" == typeof name ? name : "";
|
|
this.root.appendChild(this.lable);
|
|
this.root.addEventListener("click", "function" == typeof myFunction ? myFunction : () => {});
|
|
}
|
|
}
|
|
|
|
function makeDraggable (targetNode, handleNode) {
|
|
var x_offset = 0;
|
|
var y_offset = 0;
|
|
targetNode.style.top = "0px";
|
|
targetNode.style.left = "0px"
|
|
handleNode.addEventListener("mousedown",initDrag,false);
|
|
|
|
function doDrag (e) {
|
|
var newX = e.clientX - x_offset;
|
|
var newY = e.clientY - y_offset;
|
|
x_offset = e.clientX;
|
|
y_offset = e.clientY;
|
|
if (targetNode.class == "dragging") {
|
|
targetNode.style.top = (parseInt(targetNode.style.top)+newY)+"px";
|
|
targetNode.style.left = (parseInt(targetNode.style.left)+newX)+"px";
|
|
}
|
|
}
|
|
|
|
function stopDrag (e) {
|
|
targetNode.class = "";
|
|
document.removeEventListener("mousemove",doDrag);
|
|
document.removeEventListener("mousemove",stopDrag);
|
|
}
|
|
|
|
function initDrag (e) {
|
|
targetNode.class = "dragging";
|
|
x_offset = e.clientX;
|
|
y_offset = e.clientY;
|
|
document.addEventListener("mousemove",doDrag,false);
|
|
document.addEventListener("mouseup",stopDrag,false);
|
|
}
|
|
}
|
|
|
|
function makeResizeable (targetNode, handleNode) {
|
|
targetNode.className = targetNode.className + ' resizable';
|
|
if (undefined == handleNode) {
|
|
handleNode = document.createElement('div');
|
|
handleNode.setAttribute("style","width: 10px; height: 10px; background: red; position:absolute; right: 0; bottom: 0; cursor: se-resize; z-index: 55000;");
|
|
targetNode.appendChild(handleNode);
|
|
}
|
|
handleNode.addEventListener('mousedown', initResize, false);
|
|
var startX, startY, startWidth, startHeight;
|
|
|
|
function initResize(e) {
|
|
startX = e.clientX;
|
|
startY = e.clientY;
|
|
startWidth = parseInt(document.defaultView.getComputedStyle(targetNode).width, 10);
|
|
startHeight = parseInt(document.defaultView.getComputedStyle(targetNode).height, 10);
|
|
document.documentElement.addEventListener('mousemove', doResize, false);
|
|
document.documentElement.addEventListener('mouseup', stopResize, false);
|
|
}
|
|
|
|
function doResize(e) {
|
|
targetNode.style.width = (startWidth + e.clientX - startX) + 'px';
|
|
targetNode.style.height = (startHeight + e.clientY - startY) + 'px';
|
|
}
|
|
|
|
function stopResize(e) {
|
|
document.documentElement.removeEventListener('mousemove', doResize, false);
|
|
document.documentElement.removeEventListener('mouseup', stopResize, false);
|
|
}
|
|
}
|
|
|
|
function focus_window (window_element) {
|
|
var old_focus = Array.from(document.getElementsByClassName("focus_window"));
|
|
old_focus.forEach(e => e.classList.remove("focus_window"));
|
|
window_element.classList.add("focus_window");
|
|
}
|
|
|
|
class buiWindow {
|
|
constructor (title="", height=100, width=100, min=false, close=true, draggable=true, sizeable=true) {
|
|
this.root = document.createElement("div");
|
|
this.root.setAttribute("class","bui_window_root");
|
|
this.titlebar = document.createElement("div");
|
|
this.titlebar.setAttribute("class","bui_window_titlebar");
|
|
this.title = document.createElement("span");
|
|
this.title.setAttribute("class","bui_window_title");
|
|
this.title.innerText = "string" == typeof title ? title : "";
|
|
this.titlebar.appendChild(this.title);
|
|
draggable = "boolean" == typeof draggable ? draggable : true;
|
|
if (draggable) {
|
|
makeDraggable(this.root, this.titlebar);
|
|
this.root.addEventListener("click", this.focus, {useCapture: true});
|
|
}
|
|
min = "boolean" == typeof min ? min : false;
|
|
close = "boolean" == typeof close ? close : false;
|
|
if (min || close) {
|
|
this.controls = document.createElement("span");
|
|
this.controls.setAttribute("class","bui_window_controls");
|
|
if (min) {
|
|
this.minimizeButton = new buiButton("_",() => { this.minimize() });
|
|
this.controls.appendChild(this.minimizeButton.root);
|
|
}
|
|
if (close) {
|
|
this.closeButton = new buiButton("X",() => { this.close(); });
|
|
this.controls.appendChild(this.closeButton.root)
|
|
}
|
|
this.titlebar.appendChild(this.controls);
|
|
}
|
|
this.main = document.createElement("div");
|
|
this.main.setAttribute("class","bui_window_main");
|
|
this.content = document.createElement("div");
|
|
this.content.setAttribute("class","bui_window_content");
|
|
this.content.style.height = height+"px";
|
|
this.content.style.width = width+"px";
|
|
this.main.appendChild(this.content);
|
|
sizeable = "boolean" == typeof sizeable ? sizeable : true;
|
|
if (sizeable) {
|
|
this.resizeHandle = document.createElement("div");
|
|
this.resizeHandle.setAttribute("class","bui_window_resize_handle");
|
|
makeResizeable(this.content, this.resizeHandle);
|
|
this.main.appendChild(this.resizeHandle);
|
|
}
|
|
this.root.appendChild(this.titlebar);
|
|
this.root.appendChild(this.main);
|
|
}
|
|
|
|
focus () { focus_window(this); }
|
|
|
|
minimize () {
|
|
var current = this.content.style.display == "none" ? "revert" : "none";
|
|
this.content.style.display = current;
|
|
}
|
|
|
|
close () {
|
|
this.root.remove();
|
|
// this = undefined;
|
|
}
|
|
}
|
|
|
|
function hexGradiant(
|
|
value=1,
|
|
low=0,
|
|
high=100,
|
|
rwave = n => (100 * Math.sin(n / 10)) + (n - 30) * 2,
|
|
gwave = n => (n - 50) * (n - 75) * (0 - 1) / 10 + 100,
|
|
bwave = n => (n - 25) * (n - 25) * (0 - 1) / 5 + 100
|
|
) {
|
|
var range = Math.max(0,Math.min(1,(value - low)/(high - low)))*100;
|
|
|
|
var r = rwave(range) * 2;
|
|
var g = gwave(range) * 2;
|
|
var b = bwave(range) * 2;
|
|
|
|
var brightness = 270; // out of 768 (white)
|
|
|
|
// Normaliz rgb values to within the brightness level
|
|
if (r+g+b < brightness) {
|
|
brightness -= (r+g+b);
|
|
r += (brightness/3);
|
|
g += (brightness/3);
|
|
b += (brightness/3);
|
|
}
|
|
|
|
return "#"+
|
|
parseInt(Math.min(Math.max(0,r),255).toFixed(0)).toString(16).padStart(2,"0")+
|
|
parseInt(Math.min(Math.max(0,g),255).toFixed(0)).toString(16).padStart(2,"0")+
|
|
parseInt(Math.min(Math.max(0,b),255).toFixed(0)).toString(16).padStart(2,"0");
|
|
}
|
|
|