diff --git a/css/css.css b/css/css.css index 13d84a8..c7e7445 100644 --- a/css/css.css +++ b/css/css.css @@ -7,26 +7,17 @@ body { display: flex; justify-content:center; align-items:center; + flex-direction: column; } -#disc { +.bui_window_content { display:block; - width:80%; - min-height:60%; text-align:center; + padding: 5px; + } -.library { - background: rgba(200,200,200,1); - text-align:left; - margin:5px 5px -15px 5px; - padding:5px 5px 20px 5px; - min-height:10%; - border:solid 1px rgba(140,140,140,1); - border-radius:10px 10px 0px 0px; -} - -.button { +.bui_button_root { display: inline-block; background: rgba(150,150,150,0.7); user-select: none; @@ -37,9 +28,24 @@ body { cursor:pointer; } -.button:hover { +.bui_button_root:hover { background: rgba(140,140,140,1); margin:0px; padding:3px; transition:0.2s; } + +.bui_window_root { + position: relative; + background: rgba(200,200,200,1); + color: black; + border: solid 1px rgba(140,140,140,1); + border-radius: 5px; +} + +.bui_window_titlebar { + display: flex; + justify-content: space-between; + background: rgba(100,100,100,1); + padding: 5px; +} diff --git a/index.html b/index.html index 1570ab7..3f4a972 100644 --- a/index.html +++ b/index.html @@ -4,48 +4,67 @@ + + +

This project is to develop and test my own small private javascript libraries.

-bluecore.js - 1.7.2 - This is as its named very basic functions like grabbing things asynchronously and such. All libraries will require this basic library. +bluecore.js - This is as its named very basic functions like grabbing things asynchronously and such. (also contains legacy functions that are depricated and replaced in other libraries now)

-blueaudio.js - 1.0.4 - This is for adding/loading audio assets to a project. +blueaudio.js - This is for adding/loading audio assets to a project.

-bluepixle.js - Planned - This will be for adding/loading/handling graphical assets within a HTML5 canvas context. +bluemath.js - Adds some helpful math objects such as vectors and matricies. +

+

+bluepixle.js - Adds helper classes to make using canvas with objects simple. (requires bluemath.js) +

+

+blueui.js - Adds classes for several highly reusable ui objects such as buttons and draggable windows.

diff --git a/libs/blueui.js b/libs/blueui.js index 6a08144..d7019f4 100644 --- a/libs/blueui.js +++ b/libs/blueui.js @@ -16,7 +16,7 @@ class buiProgressBar { this.progress = 0; } - function update (value,progress) { + 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); @@ -26,9 +26,9 @@ class buiProgressBar { class buiButton { constructor (name, myFunction) { - this.root = document.createElement("span"); + this.root = document.createElement("a"); this.lable = document.createElement("span"); - this.root.setAttribute("class","bui_button_root"+("string" == typeof name ? " "+name+"_button" : "")); + 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); @@ -56,23 +56,23 @@ function makeDraggable (targetNode, handleNode) { function stopDrag (e) { targetNode.class = ""; - doc.removeEventListener("mousemove",doDrag); - doc.removeEventListener("mousemove",stopDrag); + document.removeEventListener("mousemove",doDrag); + document.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); + document.addEventListener("mousemove",doDrag,false); + document.addEventListener("mouseup",stopDrag,false); } } function makeResizeable (targetNode, handleNode) { targetNode.className = targetNode.className + ' resizable'; if (undefined == handleNode) { - handleNode = doc.createElement('div'); + 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); } @@ -82,10 +82,10 @@ function makeResizeable (targetNode, handleNode) { 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); + startWidth = parseInt(document.defaultView.getComputedStyle(target).width, 10); + startHeight = parseInt(document.defaultView.getComputedStyle(target).height, 10); + document.documentElement.addEventListener('mousemove', doResize, false); + document.documentElement.addEventListener('mouseup', stopResize, false); } function doResize(e) { @@ -94,21 +94,21 @@ function makeResizeable (targetNode, handleNode) { } function stopResize(e) { - doc.documentElement.removeEventListener('mousemove', doResize, false); - doc.documentElement.removeEventListener('mouseup', stopResize, false); + document.documentElement.removeEventListener('mousemove', doResize, false); + document.documentElement.removeEventListener('mouseup', stopResize, false); } } class buiWindow { - constructor (title="", height=100, width=100, min=false, close=true, dragable=true, sizeable=true) { + 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" == title ? title : ""; + this.title.innerText = "string" == typeof title ? title : ""; this.titlebar.appendChild(this.title); draggable = "boolean" == typeof draggable ? draggable : true; if (draggable) { @@ -145,10 +145,10 @@ class buiWindow { this.root.appendChild(this.content); } - function minimize () { + minimize () { } - function close () { + close () { } }