blue.js/libs/blueui.js

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;
	}

	function 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("span");
		this.lable = document.createElement("span");
		this.root.setAttribute("class","bui_button_root"+("string" == typeof name ? " "+name+"_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 = ""; 
		doc.removeEventListener("mousemove",doDrag);
		doc.removeEventListener("mousemove",stopDrag);
	}

	function initDrag (e) {
		targetNode.class = "dragging"; 
		x_offset = e.clientX;  
		y_offset = e.clientY;
		doc.addEventListener("mousemove",doDrag,false);	
		doc.addEventListener("mouseup",stopDrag,false);
	}
}

function makeResizeable (targetNode, handleNode) {
	targetNode.className = targetNode.className + ' resizable';
	if (undefined == handleNode) {
		handleNode = doc.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(doc.defaultView.getComputedStyle(target).width, 10);
		startHeight = parseInt(doc.defaultView.getComputedStyle(target).height, 10);
		doc.documentElement.addEventListener('mousemove', doResize, false);
		doc.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) {
		doc.documentElement.removeEventListener('mousemove', doResize, false);
		doc.documentElement.removeEventListener('mouseup', stopResize, false);
	}
}


class buiWindow {
	constructor (title="", height=100, width=100, min=false, close=true, dragable=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" == title ? title : "";
		this.titlebar.appendChild(this.title);
		draggable = "boolean" == typeof draggable ? draggable : true;
		if (draggable) {
			makeDraggable(this.root, this.titlebar);
		}
		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.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.content);
	}

	function minimize () {
	}

	function close () {
	}
}