bluesaxman/blue.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some minor syntax corrections and a rewrite of the demo index.html and css file

Browse Source
This commit is contained in:
bluesaxman 2022-04-07 18:31:56 -06:00
parent 2ca87fbb55
commit 5f7df39d9e
3 changed files with 85 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
css/css.css
View File

@ -7,26 +7,17 @@ body {
display: flex; display: flex;
justify-content:center; justify-content:center;
align-items:center; align-items:center;
flex-direction: column;
} }
#disc { .bui_window_content {
display:block; display:block;
width:80%;
min-height:60%;
text-align:center; text-align:center;
padding: 5px;
} }
.library { .bui_button_root {
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 {
display: inline-block; display: inline-block;
background: rgba(150,150,150,0.7); background: rgba(150,150,150,0.7);
user-select: none; user-select: none;
@ -37,9 +28,24 @@ body {
cursor:pointer; cursor:pointer;
} }
.button:hover { .bui_button_root:hover {
background: rgba(140,140,140,1); background: rgba(140,140,140,1);
margin:0px; margin:0px;
padding:3px; padding:3px;
transition:0.2s; 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;
}

73
index.html
View File

@ -4,48 +4,67 @@
<link href="css/css.css" rel="stylesheet" /> <link href="css/css.css" rel="stylesheet" />
<script src="libs/bluecore.js"></script> <script src="libs/bluecore.js"></script>
<script src="libs/blueaudio.js"></script> <script src="libs/blueaudio.js"></script>
<script src="libs/bluemath.js"></script>
<script src="libs/bluepixle.js"></script>
<script src="libs/blueui.js"></script>
</head> </head>
<body> <body>
<p> <p>
This project is to develop and test my own small private javascript libraries. This project is to develop and test my own small private javascript libraries.
</p> </p>
<p> <p>
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)
</p> </p>
<p> <p>
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.
</p> </p>
<p> <p>
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.
</p>
<p>
bluepixle.js - Adds helper classes to make using canvas with objects simple. (requires bluemath.js)
</p>
<p>
blueui.js - Adds classes for several highly reusable ui objects such as buttons and draggable windows.
</p> </p>
</body> </body>
</html> </html>
<script> <script>
document.body.innerHTML = ""; document.body.innerHTML = ""; // javascript enabled clear screen
elementPlace("body","disc",null,"div",null); window.bdescription = new buiWindow("blue.js", 400, 600, true, false, true, true);
elementPlace("#disc",null,null,"p",null).innerText = "This project is to develop and test my own small private javascript libraries."; window.bcore = new buiWindow("bluecore.js", 400, 600, true, false, true, true);
elementPlace("#disc","bluecore","library","p",null).innerText = "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."; window.baudio = new buiWindow("blueaudio.js", 400, 600, true, false, true, true);
elementPlace("#disc","blueaudio","library","p",null).innerText = "blueaudio.js - 1.0.4 - This is for adding/loading audio assets to a project."; window.bmath = new buiWindow("bluemath.js", 400, 600, true, false, true, true);
elementPlace("#disc","bluepixle","library","p",null).innerText = "bluepixle.js - Planned - This will be for adding/loading/handling graphical assets within a HTML5 canvas context."; window.bpixle = new buiWindow("bluepixle.js", 400, 600, true, false, true, true);
var mySound = elementPlace("#blueaudio",null,"button","a",null); window.bui = new buiWindow("blueui.js", 400, 600, true, false, true, true);
var mySequence = elementPlace("#blueaudio","sequenceText",null,"input",null);
window.bdescription.content.innerText = "This project is to develop and test my own small private javascript libraries.";
window.bcore.content.innerText = "This is as its named very basic functions like grabbing things asynchronously and such. This library also containes a lot of legacy functions for backwards compatibility.";
window.bpixle.content.innerText = "bluepixle.js - Adds helper classes to make using canveas with objects simple (requires bluemath.js)";
window.bui.content.innerText = "blueui.js - Adds classes for several reusable ui objects such as buttons and draggable windows.";
window.bmath.content.innerText = "bluemath.js - Adds some helpful math objects such as vectors and matricies.";
var baudioDescription = document.createElement("div");
baudioDescription.innerText = "blueaudio.js - This is for adding/loading audio assets to a project.";
var bluePlayer = new AudioContext();
var mySound = new buiButton("Click me for blueaudio.js demo",function () {
playSequence(window.bluePlayer,parseSequence(mySequence.value),"triangle",60);
});
var mySequence = document.createElement("input");
mySequence.id = "sequenceText";
mySequence.style.width = "100%"; mySequence.style.width = "100%";
mySequence.style.textAlign = "center"; mySequence.style.textAlign = "center";
mySequence.value = "5ab1/8;5g1/8;5e1/8;4bb1/8;4an1/8;5f1/8;5an1/8;6db3/8"; mySequence.value = "5ab1/8;5g1/8;5e1/8;4bb1/8;4an1/8;5f1/8;5an1/8;6db3/8";
mySound.innerText = "Click Me for blueaudio.js demo";
var bluePlayer = new AudioContext(); window.baudio.content.appendChild(baudioDescription);
mySound.onclick = function () { window.baudio.content.appendChild(mySound.root);
playSequence(window.bluePlayer,parseSequence(mySequence.value),"triangle",60 window.baudio.content.appendChild(mySequence);
//[
// {"note":8,"octave":5,"length":0.50,"type":"triangle"}, document.body.appendChild(window.bdescription.root);
// {"note":7,"octave":5,"length":0.50,"type":"triangle"}, document.body.appendChild(window.bcore.root);
// {"note":4,"octave":5,"length":0.50,"type":"triangle"}, document.body.appendChild(window.baudio.root);
// {"note":10,"octave":4,"length":0.50,"type":"triangle"}, document.body.appendChild(window.bmath.root);
// {"note":9,"octave":4,"length":0.50,"type":"triangle"}, document.body.appendChild(window.bpixle.root);
// {"note":5,"octave":5,"length":0.50,"type":"triangle"}, document.body.appendChild(window.bui.root);
// {"note":9,"octave":5,"length":0.50,"type":"triangle"},
// {"note":1,"octave":6,"length":1.50,"type":"triangle"}
// ]
);
}
</script> </script>

36
libs/blueui.js
View File

@ -16,7 +16,7 @@ class buiProgressBar {
this.progress = 0; this.progress = 0;
} }
function update (value,progress) { update (value,progress) {
this.value = !isNaN(value) ? value : 0; this.value = !isNaN(value) ? value : 0;
this.progress = !isNaN(progress) ? Math.max(0,Math.min(1,progress)) : 0; this.progress = !isNaN(progress) ? Math.max(0,Math.min(1,progress)) : 0;
this.lable.innerText = this.name+": "+numberShorten(this.value,4); this.lable.innerText = this.name+": "+numberShorten(this.value,4);
@ -26,9 +26,9 @@ class buiProgressBar {
class buiButton { class buiButton {
constructor (name, myFunction) { constructor (name, myFunction) {
this.root = document.createElement("span"); this.root = document.createElement("a");
this.lable = document.createElement("span"); 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.setAttribute("class","bui_button_lable");
this.lable.innerText = "string" == typeof name ? name : ""; this.lable.innerText = "string" == typeof name ? name : "";
this.root.appendChild(this.lable); this.root.appendChild(this.lable);
@ -56,23 +56,23 @@ function makeDraggable (targetNode, handleNode) {
function stopDrag (e) { function stopDrag (e) {
targetNode.class = ""; targetNode.class = "";
doc.removeEventListener("mousemove",doDrag); document.removeEventListener("mousemove",doDrag);
doc.removeEventListener("mousemove",stopDrag); document.removeEventListener("mousemove",stopDrag);
} }
function initDrag (e) { function initDrag (e) {
targetNode.class = "dragging"; targetNode.class = "dragging";
x_offset = e.clientX; x_offset = e.clientX;
y_offset = e.clientY; y_offset = e.clientY;
doc.addEventListener("mousemove",doDrag,false); document.addEventListener("mousemove",doDrag,false);
doc.addEventListener("mouseup",stopDrag,false); document.addEventListener("mouseup",stopDrag,false);
} }
} }
function makeResizeable (targetNode, handleNode) { function makeResizeable (targetNode, handleNode) {
targetNode.className = targetNode.className + ' resizable'; targetNode.className = targetNode.className + ' resizable';
if (undefined == handleNode) { 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;"); handleNode.setAttribute("style","width: 10px; height: 10px; background: red; position:absolute; right: 0; bottom: 0; cursor: se-resize; z-index: 55000;");
targetNode.appendChild(handleNode); targetNode.appendChild(handleNode);
} }
@ -82,10 +82,10 @@ function makeResizeable (targetNode, handleNode) {
function initResize(e) { function initResize(e) {
startX = e.clientX; startX = e.clientX;
startY = e.clientY; startY = e.clientY;
startWidth = parseInt(doc.defaultView.getComputedStyle(target).width, 10); startWidth = parseInt(document.defaultView.getComputedStyle(target).width, 10);
startHeight = parseInt(doc.defaultView.getComputedStyle(target).height, 10); startHeight = parseInt(document.defaultView.getComputedStyle(target).height, 10);
doc.documentElement.addEventListener('mousemove', doResize, false); document.documentElement.addEventListener('mousemove', doResize, false);
doc.documentElement.addEventListener('mouseup', stopResize, false); document.documentElement.addEventListener('mouseup', stopResize, false);
} }
function doResize(e) { function doResize(e) {
@ -94,21 +94,21 @@ function makeResizeable (targetNode, handleNode) {
} }
function stopResize(e) { function stopResize(e) {
doc.documentElement.removeEventListener('mousemove', doResize, false); document.documentElement.removeEventListener('mousemove', doResize, false);
doc.documentElement.removeEventListener('mouseup', stopResize, false); document.documentElement.removeEventListener('mouseup', stopResize, false);
} }
} }
class buiWindow { 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 = document.createElement("div");
this.root.setAttribute("class","bui_window_root"); this.root.setAttribute("class","bui_window_root");
this.titlebar = document.createElement("div"); this.titlebar = document.createElement("div");
this.titlebar.setAttribute("class","bui_window_titlebar"); this.titlebar.setAttribute("class","bui_window_titlebar");
this.title = document.createElement("span"); this.title = document.createElement("span");
this.title.setAttribute("class","bui_window_title"); 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); this.titlebar.appendChild(this.title);
draggable = "boolean" == typeof draggable ? draggable : true; draggable = "boolean" == typeof draggable ? draggable : true;
if (draggable) { if (draggable) {
@ -145,10 +145,10 @@ class buiWindow {
this.root.appendChild(this.content); this.root.appendChild(this.content);
} }
function minimize () { minimize () {
} }
function close () { close () {
} }
} }