Skip to content

Commit

Permalink
more cleaning up of widget code
Browse files Browse the repository at this point in the history
  • Loading branch information
@walterbender
walterbender committed Mar 19, 2017
1 parent 483a540 commit f79b7ad
Show file tree
Hide file tree
Showing 9 changed files with 61 additions and 55 deletions.
1 change: 0 additions & 1 deletion css/activity.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -597,7 +597,6 @@ table {
.headcol {
position: absolute;
left: 1px;
top: auto;
text-align: center;
vertical-align: middle;
}
Expand Down
2 changes: 1 addition & 1 deletion js/musicutils.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Copyright (c) 2016 Walter Bender
// Copyright (c) 2016-17 Walter Bender
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the The GNU Affero General Public
Expand Down
57 changes: 25 additions & 32 deletions js/pitchdrummatrix.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@ Drum and Pitch blocks.


function PitchDrumMatrix() {
const BUTTONDIVWIDTH = 300; // 5 buttons
const OUTERWINDOWWIDTH = 358;
const INNERWINDOWWIDTH = 300;
const BUTTONDIVWIDTH = 295; // 5 buttons
const DRUMNAMEWIDTH = 50;
const OUTERWINDOWWIDTH = 128;
const INNERWINDOWWIDTH = 50;
const BUTTONSIZE = 53;
const ICONSIZE = 32;
const DRUMNAMEWIDTH = 50;

this.rowLabels = [];
this.rowArgs = [];
Expand Down Expand Up @@ -99,7 +99,7 @@ function PitchDrumMatrix() {
this._cellScale = w / 1200;
var iconSize = ICONSIZE * this._cellScale;

var canvas = document.getElementById('myCanvas');
var canvas = docById('myCanvas');

// Position the widget and make it visible.
var pdmDiv = docById('pdmDiv');
Expand Down Expand Up @@ -226,23 +226,6 @@ function PitchDrumMatrix() {
// scroll horizontally.
pdmTableDiv.innerHTML = '<div id="pdmOuterDiv"><div id="pdmInnerDiv"><table cellpadding="0px" id="pdmTable"></table></div></div>';

var n = Math.max(Math.floor((window.innerHeight * 0.5) / 100), 4);
var outerDiv = docById('pdmOuterDiv');
if (this.rowLabels.length > n) {
outerDiv.style.height = this._cellScale * MATRIXSOLFEHEIGHT * (n + 6) + 'px';
var w = Math.max(Math.min(window.innerWidth, this._cellScale * OUTERWINDOWWIDTH), BUTTONDIVWIDTH);
outerDiv.style.width = w + 'px';
} else {
outerDiv.style.height = this._cellScale * MATRIXSOLFEHEIGHT * (this.rowLabels.length + 3) + 'px';
var w = Math.max(Math.min(window.innerWidth, this._cellScale * OUTERWINDOWWIDTH - 20), BUTTONDIVWIDTH);
outerDiv.style.width = w + 'px';
}

var w = Math.max(Math.min(window.innerWidth, this._cellScale * INNERWINDOWWIDTH), BUTTONDIVWIDTH - BUTTONSIZE);
var innerDiv = docById('pdmInnerDiv');
innerDiv.style.width = w + 'px';
innerDiv.style.marginLeft = (BUTTONSIZE * this._cellScale) + 'px';

// Each row in the pdm table contains a note label in the
// first column and a table of buttons in the second column.
var pdmTable = docById('pdmTable');
Expand Down Expand Up @@ -271,12 +254,9 @@ function PitchDrumMatrix() {
labelCell.style.fontSize = this._cellScale * 100 + '%';
labelCell.style.height = Math.floor(MATRIXSOLFEHEIGHT * this._cellScale) + 1 + 'px';
labelCell.style.width = Math.floor(MATRIXSOLFEWIDTH * this._cellScale) + 'px';
labelCell.style.minWidth = Math.floor(MATRIXSOLFEWIDTH * this._cellScale) + 'px';
labelCell.style.minWidth = labelCell.style.minWidth;
labelCell.style.maxWidth = labelCell.style.minWidth;
labelCell.style.textAlign = 'center';
labelCell.style.verticalAlign = 'middle';
labelCell.style.left = '1px';
labelCell.style.position = 'absolute';
labelCell.className = 'headcol';
labelCell.innerHTML = this.rowLabels[j] + this.rowArgs[j].toString().sub();

var pdmCell = pdmTableRow.insertCell();
Expand All @@ -300,12 +280,26 @@ function PitchDrumMatrix() {
labelCell.style.width = Math.floor(MATRIXSOLFEWIDTH * this._cellScale) + 'px';
labelCell.style.minWidth = Math.floor(MATRIXSOLFEWIDTH * this._cellScale) + 'px';
labelCell.style.maxWidth = labelCell.style.minWidth;
labelCell.style.textAlign = 'center';
labelCell.style.verticalAlign = 'middle';
labelCell.style.left = '1px';
labelCell.style.position = 'absolute';
labelCell.className = 'headcol';
labelCell.innerHTML = '';

var n = Math.max(Math.floor((window.innerHeight * 0.5) / 100), 8);
var outerDiv = docById('pdmOuterDiv');
if (pdmTable.rows.length + 2 > n) {
outerDiv.style.height = window.innerHeight / 2 + 'px';
var ow = Math.max(Math.min(window.innerWidth / 2, this._cellScale * (this.drums.length * (DRUMNAMEWIDTH + 2) + MATRIXSOLFEWIDTH + 24)), BUTTONDIVWIDTH); // Add room for the vertical slider.
} else {
outerDiv.style.height = this._cellScale * MATRIXSOLFEHEIGHT * (pdmTable.rows.length + 3) + 'px';
var ow = Math.max(Math.min(window.innerWidth / 2, this._cellScale * (this.drums.length * (DRUMNAMEWIDTH + 2) + MATRIXSOLFEWIDTH)), BUTTONDIVWIDTH);
}

outerDiv.style.width = ow + 'px';

var innerDiv = docById('pdmInnerDiv');
var iw = Math.min(ow - 100, this._cellScale * this.drums.length * (DRUMNAMEWIDTH + 2));
innerDiv.style.width = iw + 'px';
innerDiv.style.marginLeft = (BUTTONSIZE * this._cellScale) + 'px';

var pdmCell = pdmTableRow.insertCell();
// Create table to store drum names.
pdmCell.innerHTML = '<table cellpadding="0px" id="pdmDrumTable"><tr></tr></table>';
Expand All @@ -314,7 +308,6 @@ function PitchDrumMatrix() {
for (var i = 0; i < this.drums.length; i++) {
this._addDrum(i);
}

};

this._addButton = function(row, icon, iconSize, label) {
Expand Down
2 changes: 1 addition & 1 deletion js/pitchslider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ function PitchSlider() {
this._cellScale = 1.0;
var iconSize = ICONSIZE;

var canvas = document.getElementById('myCanvas');
var canvas = docById('myCanvas');

// Position the widget and make it visible.
var sliderDiv = docById('sliderDiv');
Expand Down
42 changes: 25 additions & 17 deletions js/pitchstaircase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,9 +221,9 @@ function PitchStairCase () {

setTimeout(function () {
for (var i = 0; i < that.Stairs.length; i++) {
var pscTableCell = docById('stepTable' + i);
var stepCell = pscTableCell.rows[0].cells[1];
stepCell.style.backgroundColor = MATRIXNOTECELLCOLOR;
var pscTableCell = docById('stepTable' + i);
var stepCell = pscTableCell.rows[0].cells[1];
stepCell.style.backgroundColor = MATRIXNOTECELLCOLOR;
}
}, 1000);
};
Expand All @@ -234,8 +234,8 @@ function PitchStairCase () {
var note = this.Stairs[this.Stairs.length-1][0] + this.Stairs[this.Stairs.length-1][1];
pitchnotes.push(note.replace(/♭/g, 'b').replace(/♯/g, '#'));
var last = this.Stairs.length - 1;
var pscTableCell = docById('stepTable' + last);
var stepCell = pscTableCell.rows[0].cells[1];
var pscTableCell = docById('stepTable' + last);
var stepCell = pscTableCell.rows[0].cells[1];
stepCell.style.backgroundColor = MATRIXBUTTONCOLOR;
this._logo.synth.trigger(pitchnotes, 1, 'poly');
this._playNext(this.Stairs.length - 2, -1);
Expand All @@ -250,9 +250,9 @@ function PitchStairCase () {
if (index === this.Stairs.length) {
setTimeout(function () {
for (var i = 0; i < that.Stairs.length; i++) {
var pscTableCell = docById('stepTable' + i);
var stepCell = pscTableCell.rows[0].cells[1];
stepCell.style.backgroundColor = MATRIXNOTECELLCOLOR;
var pscTableCell = docById('stepTable' + i);
var stepCell = pscTableCell.rows[0].cells[1];
stepCell.style.backgroundColor = MATRIXNOTECELLCOLOR;
}
}, 1000);
return;
Expand All @@ -261,9 +261,9 @@ function PitchStairCase () {
if (index === -1) {
setTimeout(function () {
for (var i = 0; i < that.Stairs.length; i++) {
var pscTableCell = docById('stepTable' + i);
var stepCell = pscTableCell.rows[0].cells[1];
stepCell.style.backgroundColor = MATRIXNOTECELLCOLOR;
var pscTableCell = docById('stepTable' + i);
var stepCell = pscTableCell.rows[0].cells[1];
stepCell.style.backgroundColor = MATRIXNOTECELLCOLOR;
}
}, 1000);

Expand All @@ -278,19 +278,19 @@ function PitchStairCase () {
var note = this.Stairs[index][0] + this.Stairs[index][1];
pitchnotes.push(note.replace(/♭/g, 'b').replace(/♯/g, '#'));
var previousRowNumber = index - next;
var pscTableCell = docById('stepTable' + previousRowNumber);
var pscTableCell = docById('stepTable' + previousRowNumber);

setTimeout(function () {
if (pscTableCell != null) {
var stepCell = pscTableCell.rows[0].cells[1];
var stepCell = pscTableCell.rows[0].cells[1];
stepCell.style.backgroundColor = MATRIXNOTECELLCOLOR;
}

var pscTableCell = docById('stepTable' + index);
var stepCell = pscTableCell.rows[0].cells[1];
var pscTableCell = docById('stepTable' + index);
var stepCell = pscTableCell.rows[0].cells[1];
stepCell.style.backgroundColor = MATRIXBUTTONCOLOR;
that._logo.synth.trigger(pitchnotes, 1, 'poly');
if(index < that.Stairs.length || index > -1) {
if (index < that.Stairs.length || index > -1) {
that._playNext(index + next, next);
}
}, 1000);
Expand Down Expand Up @@ -385,7 +385,7 @@ function PitchStairCase () {
widgetButtonsDiv.style.width = BUTTONDIVWIDTH;
widgetButtonsDiv.innerHTML = '<table cellpadding="0px" id="pscButtonTable"></table>';

var canvas = document.getElementById('myCanvas');
var canvas = docById('myCanvas');

var buttonTable = docById('pscButtonTable');
var header = buttonTable.createTHead();
Expand All @@ -411,6 +411,14 @@ function PitchStairCase () {
this.style.backgroundColor = MATRIXBUTTONCOLOR;
};

cell.onmouseover=function() {
this.style.backgroundColor = MATRIXBUTTONCOLORHOVER;
};

cell.onmouseout=function() {
this.style.backgroundColor = MATRIXBUTTONCOLOR;
};

var cell = this._addButton(row, 'export-chunk.svg', ICONSIZE, _('save'));
cell.onclick=function() {
that._save(0);
Expand Down
2 changes: 1 addition & 1 deletion js/pitchtimematrix.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ function Matrix() {
this._cellScale = w / 1200;
var iconSize = ICONSIZE * this._cellScale;

var canvas = document.getElementById('myCanvas');
var canvas = docById('myCanvas');

// Position the widget and make it visible.
var ptmDiv = docById('ptmDiv');
Expand Down
2 changes: 1 addition & 1 deletion js/rhythmruler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -528,7 +528,7 @@ function RhythmRuler () {
this._cellScale = 1.0;
var iconSize = ICONSIZE;

var canvas = document.getElementById('myCanvas');
var canvas = docById('myCanvas');

// Position the widget and make it visible.
var rulerDiv = docById('rulerDiv');
Expand Down
2 changes: 1 addition & 1 deletion js/tempo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ function Tempo () {
var w = window.innerWidth;
var iconSize = ICONSIZE;

var canvas = document.getElementById('myCanvas');
var canvas = docById('myCanvas');

// Position the widget and make it visible.
var tempoDiv = docById('tempoDiv');
Expand Down
6 changes: 6 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,11 @@
"domReady": "github:requirejs/domReady/2.0.1",
"webL10n": "github:sugarlabs/webL10n/master"
}
},
"devDependencies": {
"eslint": "^3.18.0",
"eslint-config-standard": "^7.1.0",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^2.1.1"
}
}

0 comments on commit f79b7ad

Please sign in to comment.