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

73
index.html
View File

@ -4,48 +4,67 @@
<link href="css/css.css" rel="stylesheet" />
<script src="libs/bluecore.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>
<body>
<p>
This project is to develop and test my own small private javascript libraries.
</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>
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>
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>
</body>
</html>
<script>
document.body.innerHTML = "";
elementPlace("body","disc",null,"div",null);
elementPlace("#disc",null,null,"p",null).innerText = "This project is to develop and test my own small private javascript libraries.";
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.";
elementPlace("#disc","blueaudio","library","p",null).innerText = "blueaudio.js - 1.0.4 - This is for adding/loading audio assets to a project.";
elementPlace("#disc","bluepixle","library","p",null).innerText = "bluepixle.js - Planned - This will be for adding/loading/handling graphical assets within a HTML5 canvas context.";
var mySound = elementPlace("#blueaudio",null,"button","a",null);
var mySequence = elementPlace("#blueaudio","sequenceText",null,"input",null);
document.body.innerHTML = ""; // javascript enabled clear screen
window.bdescription = new buiWindow("blue.js", 400, 600, true, false, true, true);
window.bcore = new buiWindow("bluecore.js", 400, 600, true, false, true, true);
window.baudio = new buiWindow("blueaudio.js", 400, 600, true, false, true, true);
window.bmath = new buiWindow("bluemath.js", 400, 600, true, false, true, true);
window.bpixle = new buiWindow("bluepixle.js", 400, 600, true, false, true, true);
window.bui = new buiWindow("blueui.js", 400, 600, true, false, true, true);
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.textAlign = "center";
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();
mySound.onclick = function () {
playSequence(window.bluePlayer,parseSequence(mySequence.value),"triangle",60
//[
// {"note":8,"octave":5,"length":0.50,"type":"triangle"},
// {"note":7,"octave":5,"length":0.50,"type":"triangle"},
// {"note":4,"octave":5,"length":0.50,"type":"triangle"},
// {"note":10,"octave":4,"length":0.50,"type":"triangle"},
// {"note":9,"octave":4,"length":0.50,"type":"triangle"},
// {"note":5,"octave":5,"length":0.50,"type":"triangle"},
// {"note":9,"octave":5,"length":0.50,"type":"triangle"},
// {"note":1,"octave":6,"length":1.50,"type":"triangle"}
// ]
);
}
window.baudio.content.appendChild(baudioDescription);
window.baudio.content.appendChild(mySound.root);
window.baudio.content.appendChild(mySequence);
document.body.appendChild(window.bdescription.root);
document.body.appendChild(window.bcore.root);
document.body.appendChild(window.baudio.root);
document.body.appendChild(window.bmath.root);
document.body.appendChild(window.bpixle.root);
document.body.appendChild(window.bui.root);
</script>

36
libs/blueui.js
View File

@ -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 () {
}
}