navigation bars
This commit is contained in:
Eveline-97
parent
0a2443a4f6
commit
3acb9f442c
@ -46,20 +46,17 @@ var alert = "red";
|
||||
var textcolor = "#737373";
|
||||
var background = "ivory";
|
||||
|
||||
function setInstruments()
|
||||
{
|
||||
function setInstruments() {
|
||||
instruments = arrayfromargs(arguments);
|
||||
bang();
|
||||
}
|
||||
|
||||
function setPiece()
|
||||
{
|
||||
function setPiece() {
|
||||
pieces = arrayfromargs(arguments);
|
||||
bang();
|
||||
}
|
||||
|
||||
function bang()
|
||||
{
|
||||
function bang() {
|
||||
|
||||
css = [];
|
||||
elements = [];
|
||||
@ -150,23 +147,36 @@ css.push({
|
||||
"background": active
|
||||
}
|
||||
});
|
||||
//css navigation bars
|
||||
css.push({
|
||||
"selector": "#nav, #navPlayers",
|
||||
"props": {
|
||||
"z-index": "99",
|
||||
"display": "flex !important",
|
||||
"flex-flow": "row nowrap",
|
||||
"position": "relative"
|
||||
}
|
||||
});
|
||||
|
||||
svg.push({
|
||||
"new": "rect",
|
||||
"id": "background",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width" : "400px",//viewport width of iphone 8; iPhone 5: 320px
|
||||
"height" : "667px",//viewport height of iphone 8; iPhone 5: 568px
|
||||
"width": "1133px",//viewport width of iPad mini; iphone 8: 400px; iPhone 5: 320px
|
||||
"height": "744px",//viewport height of iPad mini; iphone 8: 667px; iPhone 5: 568px
|
||||
"fill": background,
|
||||
});
|
||||
|
||||
//elements = [];
|
||||
addButton("forms", "basic", "Basic Mode", "color:" + active, "document.getElementById('basicDIV').style.display='block';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + active + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
|
||||
addButton("forms", "expert", "Expert Mode", "color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='block';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + active + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
|
||||
addButton("forms", "room", "Room Settings", "width:24vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='block';document.getElementById('spat').style.display='block';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + active + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
|
||||
addButton("forms", "system", "System", "width:18vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='block';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['bcolor']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + active + "';document.getElementById('manual').style['color']='" + nonactive + "';");
|
||||
addButton("forms", "manual", "Manual", "width:18vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='block';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + active + "';");
|
||||
//nav for buttons
|
||||
addDiv("forms", "nav", "display: block");
|
||||
//add buttons to navigation instead of to #forms directly
|
||||
addButton("nav", "basic", "Basic Mode", "color:" + active, "document.getElementById('basicDIV').style.display='block';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + active + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
|
||||
addButton("nav", "expert", "Expert Mode", "color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='block';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + active + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
|
||||
addButton("nav", "room", "Room Settings", "width:24vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='block';document.getElementById('spat').style.display='block';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + active + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';");
|
||||
addButton("nav", "system", "System", "width:18vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='block';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['bcolor']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + active + "';document.getElementById('manual').style['color']='" + nonactive + "';");
|
||||
addButton("nav", "manual", "Manual", "width:18vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='block';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + active + "';");
|
||||
|
||||
addDiv("forms", "basicDIV", "display:block");
|
||||
addDiv("forms", "expertDIV", "display:none");
|
||||
@ -194,11 +204,13 @@ svg.push({
|
||||
});
|
||||
*/
|
||||
|
||||
addButton("expertDIV", "p0", "Player 1", "width:24.9vw;color:" + active, "document.getElementById('p0').style['color']='" + active + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='block';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';");
|
||||
addButton("expertDIV", "p1", "Player 2", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + active + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='block';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';");
|
||||
addButton("expertDIV", "p2", "Player 3", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + active + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='block';document.getElementById('player3').style.display='none';");
|
||||
addButton("expertDIV", "p3", "Player 4", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + active + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='block';");
|
||||
|
||||
//navPlayers nav bar for player selectors
|
||||
addDiv("expertDIV", "navPlayers", "display:block");
|
||||
//add buttons to navPlayers instead of to expertDIV directly
|
||||
addButton("navPlayers", "p0", "Player 1", "width:24.9vw;color:" + active, "document.getElementById('p0').style['color']='" + active + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='block';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';");
|
||||
addButton("navPlayers", "p1", "Player 2", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + active + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='block';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';");
|
||||
addButton("navPlayers", "p2", "Player 3", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + active + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='block';document.getElementById('player3').style.display='none';");
|
||||
addButton("navPlayers", "p3", "Player 4", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + active + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='block';");
|
||||
|
||||
addMenu(-1, "basicDIV", "Piece", "piece", 36, 0, pieces, "wide");
|
||||
addMenu(-1, "basicDIV", "Playing Mode", "mode", 76, 0, modes, "wide");
|
||||
@ -326,8 +338,7 @@ svg.push({
|
||||
outlet(1, "done");
|
||||
}
|
||||
|
||||
function addDiv(parent, id, style)
|
||||
{
|
||||
function addDiv(parent, id, style) {
|
||||
var obj = {
|
||||
"parent": parent,
|
||||
"new": "div",
|
||||
@ -343,8 +354,7 @@ function addDiv(parent, id, style)
|
||||
elements.push(obj);
|
||||
}
|
||||
|
||||
function addButton(parent, id, text, style, onclick)
|
||||
{
|
||||
function addButton(parent, id, text, style, onclick) {
|
||||
var obj = {
|
||||
"parent": parent,
|
||||
"id": id,
|
||||
@ -364,8 +374,7 @@ function addButton(parent, id, text, style, onclick)
|
||||
elements.push(obj);
|
||||
}
|
||||
|
||||
function addSlider(index, parent, name, id, position, range, step, value, _out, _in)
|
||||
{
|
||||
function addSlider(index, parent, name, id, position, range, step, value, _out, _in) {
|
||||
switch (id) {
|
||||
case "tonic_pitch":
|
||||
case "pitch_center":
|
||||
@ -438,8 +447,7 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
|
||||
body.push(obj2);
|
||||
}
|
||||
|
||||
function addMenu(index, parent, name, id, position, value, array, type)
|
||||
{
|
||||
function addMenu(index, parent, name, id, position, value, array, type) {
|
||||
var width = (type == "wide") ? 180 : 90;
|
||||
child = [];
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
@ -507,8 +515,7 @@ function addMenu(index, parent, name, id, position, value, array, type)
|
||||
body.push(obj2);
|
||||
}
|
||||
|
||||
function addCheckbox(index, parent, name, id, position, checked, type)
|
||||
{
|
||||
function addCheckbox(index, parent, name, id, position, checked, type) {
|
||||
var left = (type == "left") ? 10 : 252;
|
||||
var leftoffset = (type == "left") ? 128 : 85;
|
||||
checkboxes[index + 1][id].name = name;
|
||||
@ -552,8 +559,7 @@ function addCheckbox(index, parent, name, id, position, checked, type)
|
||||
elements.push(obj[1]);
|
||||
}
|
||||
|
||||
function addText(index, parent, name, id, position, type)
|
||||
{
|
||||
function addText(index, parent, name, id, position, type) {
|
||||
var width = (type == "wide") ? 180 : 90;
|
||||
var obj = [{
|
||||
"parent": parent,
|
||||
@ -598,8 +604,7 @@ function addText(index, parent, name, id, position, type)
|
||||
body.push(obj2);
|
||||
}
|
||||
|
||||
function createSpatBox()
|
||||
{
|
||||
function createSpatBox() {
|
||||
svg.push({
|
||||
"parent": "defs",
|
||||
"new": "path",
|
||||
@ -687,7 +692,8 @@ function createSpatBox()
|
||||
"r": 12.5,
|
||||
"fill": "tomato"
|
||||
}
|
||||
]});
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
@ -717,8 +723,7 @@ function createSpatBox()
|
||||
</svg>
|
||||
*/
|
||||
|
||||
function dictionary()
|
||||
{
|
||||
function dictionary() {
|
||||
var d = new Dict;
|
||||
d.name = p[1];
|
||||
var obj = {};
|
||||
@ -738,8 +743,7 @@ function dictionary()
|
||||
outlet(0, "dictionary", out.name);
|
||||
}
|
||||
|
||||
function param()
|
||||
{
|
||||
function param() {
|
||||
var p = arrayfromargs(arguments);
|
||||
var d = new Dict;
|
||||
d.name = p[1];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user