Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the MusicKeyboard widget on maximizing. #2857

Merged
merged 12 commits into from
Mar 12, 2021
Merged

Update the MusicKeyboard widget on maximizing. #2857

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
8d61c5d
Refactor status.js
daksh4469 Feb 24, 2021
8c0b1bf
Feature: Maximizing action on musickeyboard
daksh4469 Feb 24, 2021
2b9f751
Refactored some code
daksh4469 Feb 24, 2021
2f4eccc
Update js/widgets/status.js
daksh4469 Feb 25, 2021
cba6800
Eliminate vertical scroll to fix issue
daksh4469 Feb 25, 2021
80f4a44
Merge branch 'daksh4469-master' of https://github.com/daksh4469/music…
daksh4469 Feb 25, 2021
216b19d
Handle Overflows and set scroll
daksh4469 Feb 25, 2021
4a3f131
Fix issue in case of no grid
daksh4469 Feb 26, 2021
4b73c9e
docs: target more beginners
meganindya Mar 7, 2021
2e40ecd
docs: add link for MB 2.0
meganindya Mar 7, 2021
0b14fd4
Merge branch 'master' of https://github.com/sugarlabs/musicblocks int…
daksh4469 Mar 10, 2021
7aa8aa5
Check maximizing action
daksh4469 Mar 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 102 additions & 63 deletions js/widgets/musickeyboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,40 +11,29 @@
// License along with this library; if not, write to the Free Software
// Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA

/*global logo,blocks, _, platformColor, docById, MATRIXSOLFEHEIGHT, toFraction, Singer,
SOLFEGECONVERSIONTABLE, slicePath, wheelnav, DEFAULTVOICE, PITCHES, PITCHES2,
MATRIXSOLFEWIDTH, i18nSolfege, getNote, FIXEDSOLFEGE1, NOTESSHARP, NOTESFLAT,
last, SHARP, FLAT, PREVIEWVOLUME, noteToFrequency, SOLFEGENAMES, PITCHES3,
EIGHTHNOTEWIDTH, convertFromSolfege, FIXEDSOLFEGE*/

/* global docById,platformColor,FIXEDSOLFEGE,FIXEDSOLFEGE1,SHARP,FLAT,last,Singer,_,noteToFrequency,
EIGHTHNOTEWIDTH,MATRIXSOLFEHEIGHT,i18nSolfege,MATRIXSOLFEWIDTH,toFraction,wheelnav,slicePath,blocks,getNote,PREVIEWVOLUME,
daksh4469 marked this conversation as resolved.
Show resolved Hide resolved
DEFAULTVOICE,PITCHES3,SOLFEGENAMES,SOLFEGECONVERSIONTABLE,NOTESSHARP,NOTESFLAT,PITCHES,PITCHES2,convertFromSolfege,logo */
/*
Globals location
- lib/wheelnav
slicePath, wheelnav

- js/utils/musicutils.js
EIGHTHNOTEWIDTH, noteToFrequency, PITCHES, PITCHES2, NOTESSHARP, NOTESFLAT,
FLAT, SHARP, MATRIXSOLFEHEIGHT, toFraction, SOLFEGECONVERSIONTABLE, DEFAULTVOICE,
MATRIXSOLFEWIDTH, i18nSolfege, FIXEDSOLFEGE1, SOLFEGENAMES, PITCHES3,
getNote, convertFromSolfege, FIXEDSOLFEGE

- js/utils/utils.js
_, last, docById

- js/turtle-singer.js
Singer

- js/utils/platformstyle.js
platformColorcl

- js/activity.js
Global Locations
- lib/wheelnav
slicePath, wheelnav
- js/utils/utils.js
_,docById,last
- js/turtle-singer.js
Singer
- js/utils/musicutils.js
noteToFrequency,getNote,FIXEDSOLFEGE,FIXEDSOLFEGE1,SHARP,FLAT,EIGHTHNOTEWIDTH,MATRIXSOLFEHEIGHT,i18nSolfege,MATRIXSOLFEWIDTH,
toFraction,DEFAULTVOICE,PITCHES,PITCHES2,PITCHES3,SOLFEGENAMES,SOLFEGECONVERSIONTABLE,NOTESSHARP,
NOTESFLAT,convertFromSolfege
- js/utils/platformstyle.js
platformColor
- js/activity.js
daksh4469 marked this conversation as resolved.
Show resolved Hide resolved
blocks

- js/logo.js
PREVIEWVOLUME
*/

/*exported MusicKeyboard*/
- js/logo.js
PREVIEWVOLUME
*/
/* exported MusicKeyboard */

function MusicKeyboard() {
const FAKEBLOCKNUMBER = 100000;
Expand Down Expand Up @@ -84,7 +73,6 @@ function MusicKeyboard() {
this.blockNumberMapper = {};
this.instrumentMapper = {};
let selectedNotes = [];

this._rowBlocks = [];

// Each element in the array is [start time, note, id, duration, voice].
Expand Down Expand Up @@ -299,7 +287,27 @@ function MusicKeyboard() {
});
}
this._createTable();

if (this.widgetWindow._maximized) {
this.widgetWindow.getWidgetBody().style.position = "absolute";
this.widgetWindow.getWidgetBody().style.height = "calc(100vh - 64px)";
this.widgetWindow.getWidgetBody().style.width = "200vh";
const outerDiv = docById("mkbOuterDiv");
outerDiv.style.maxHeight = "705px";
docById("mkbOuterDiv").style.height = "calc(100vh - 64px)";
docById("mkbOuterDiv").style.width = "calc(200vh - 64px)";
docById("keyboardHolder2").style.width = "calc(200vh - 64px)";
docById("mkbInnerDiv").style.width = "95.5vw";

this.widgetWindow.getWidgetBody().style.left = "60px";
} else {
const outerDiv = docById("mkbOuterDiv");
outerDiv.style.maxHeight = "400px";
this.widgetWindow.getWidgetBody().style.position = "relative";
this.widgetWindow.getWidgetBody().style.left = "0px";
this.widgetWindow.getWidgetBody().style.height = "550px";
this.widgetWindow.getWidgetBody().style.width = "1000px";
docById("mkbOuterDiv").style.width = w + "px";
}
delete startTime[id];
delete temp1[id];
delete temp2[id];
Expand Down Expand Up @@ -392,6 +400,27 @@ function MusicKeyboard() {
blockNumber: this.blockNumberMapper[element.id]
});
this._createTable();

if (this.widgetWindow._maximized) {
this.widgetWindow.getWidgetBody().style.position = "absolute";
this.widgetWindow.getWidgetBody().style.height = "calc(100vh - 64px)";
this.widgetWindow.getWidgetBody().style.width = "200vh";
const outerDiv = docById("mkbOuterDiv");
outerDiv.style.maxHeight = "705px";
docById("mkbOuterDiv").style.height = "calc(100vh - 64px)";
docById("mkbOuterDiv").style.width = "calc(200vh - 64px)";
docById("keyboardHolder2").style.width = "calc(200vh - 64px)";
docById("mkbInnerDiv").style.width = "95.5vw";
this.widgetWindow.getWidgetBody().style.left = "60px";
} else {
const outerDiv = docById("mkbOuterDiv");
outerDiv.style.maxHeight = "400px";
this.widgetWindow.getWidgetBody().style.position = "relative";
this.widgetWindow.getWidgetBody().style.left = "0px";
this.widgetWindow.getWidgetBody().style.height = "550px";
this.widgetWindow.getWidgetBody().style.width = "1000px";
docById("mkbOuterDiv").style.width = w + "px";
}
};

element.onmouseout = function () {
Expand Down Expand Up @@ -419,6 +448,28 @@ function MusicKeyboard() {
const tur = logo.turtles.ithTurtle(0);
this.bpm = tur.singer.bpm.length > 0 ? last(tur.singer.bpm) : Singer.masterBPM;

widgetWindow.onmaximize = function () {
if (widgetWindow._maximized) {
widgetWindow.getWidgetBody().style.position = "absolute";
widgetWindow.getWidgetBody().style.height = "calc(100vh - 64px)";
widgetWindow.getWidgetBody().style.width = "200vh";
docById("keyboardHolder2").style.width = "calc(200vh - 64px)";
const outerDiv = docById("mkbOuterDiv");
outerDiv.style.maxHeight = "705px";
docById("mkbOuterDiv").style.height = "calc(100vh - 64px)";
docById("mkbOuterDiv").style.width = "calc(200vh - 64px)";
widgetWindow.getWidgetBody().style.left = "60px";
} else {
const outerDiv = docById("mkbOuterDiv");
outerDiv.style.maxHeight = "400px";
widgetWindow.getWidgetBody().style.position = "relative";
widgetWindow.getWidgetBody().style.left = "0px";
widgetWindow.getWidgetBody().style.height = "550px";
widgetWindow.getWidgetBody().style.width = "1000px";
docById("mkbOuterDiv").style.width = w + "px";
}
};

widgetWindow.onclose = () => {
let myNode;
document.onkeydown = saveOnKeyDown;
Expand Down Expand Up @@ -469,6 +520,22 @@ function MusicKeyboard() {
selectedNotes = [];
// if (!that.keyboardShown) {
this._createTable();
if (widgetWindow._maximized) {
const outerDiv = docById("mkbOuterDiv");
outerDiv.style.maxHeight = "705px";
docById("mkbOuterDiv").style.height = "calc(100vh - 64px)";
docById("mkbOuterDiv").style.width = "calc(200vh - 64px)";
docById("mkbInnerDiv").style.width = "90vw";
widgetWindow.getWidgetBody().style.left = "60px";
} else {
const outerDiv = docById("mkbOuterDiv");
outerDiv.style.maxHeight = "400px";
widgetWindow.getWidgetBody().style.position = "relative";
widgetWindow.getWidgetBody().style.left = "0px";
widgetWindow.getWidgetBody().style.height = "550px";
widgetWindow.getWidgetBody().style.width = "1000px";
docById("mkbOuterDiv").style.width = w + "px";
}
// }
};

Expand Down Expand Up @@ -526,33 +593,6 @@ function MusicKeyboard() {
BUTTONDIVWIDTH
);

//Change widget size on fullscreen mode, else
//revert back to original size on unfullscreen mode
widgetWindow.onmaximize = function () {
if (widgetWindow._maximized) {
widgetWindow.getWidgetBody().style.position = "absolute";
widgetWindow.getWidgetBody().style.height = "calc(100vh - 64px)";
widgetWindow.getWidgetBody().style.width = "200vh";
docById("mkbOuterDiv").style.width = "calc(200vh - 64px)";
docById("keyboardHolder2").style.width = "calc(200vh - 64px)";
try {
docById("mkbInnerDiv").style.width = "calc(200vh - 64px)";
} catch (e) {
// Does this happen?
// eslint-disable-next-line no-console
console.debug("Error calculating InnerDiv width");
}

widgetWindow.getWidgetBody().style.left = "70px";
} else {
widgetWindow.getWidgetBody().style.position = "relative";
widgetWindow.getWidgetBody().style.left = "0px";
widgetWindow.getWidgetBody().style.height = "550px";
widgetWindow.getWidgetBody().style.width = "1000px";
docById("mkbOuterDiv").style.width = w + "px";
}
};

widgetWindow.sendToCenter();
};

Expand Down Expand Up @@ -1122,6 +1162,7 @@ function MusicKeyboard() {
let n = Math.max(Math.floor((window.innerHeight * 0.5) / 100), 8);

const outerDiv = docById("mkbOuterDiv");
outerDiv.style.overflowY = "hidden";
if (this.displayLayout.length > n) {
outerDiv.style.height = this._cellScale * MATRIXSOLFEHEIGHT * (n + 5) + "px";
} else {
Expand Down Expand Up @@ -2488,8 +2529,6 @@ function MusicKeyboard() {

this._save = function () {
this.processSelected();
// console.debug("Generating action stack for: ");
// console.debug(selectedNotes);
const newStack = [
[0, ["action", { collapsed: false }], 100, 100, [null, 1, 2, null]],
[1, ["text", { value: _("action") }], 0, 0, [0]],
Expand Down
20 changes: 11 additions & 9 deletions js/widgets/status.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,12 +98,12 @@ class StatusMatrix {
}
cell.style.width = "212.5px";
this.widgetWindow.onmaximize = () => {
this.isMaximized = !(this.isMaximized);
console.debug("Maximized " + this.isMaximized);
this.isMaximized = !this.isMaximized;
cell.style.width = "100vw";
cell.style.paddingLeft = "30px";
cell.style.fontSize = Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR)*0.90 + "%";
if(!(this.isMaximized)){
cell.style.fontSize =
Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Status is different widget afaik, why is this file a part of this PR?

Sorry, I missed this file previously. But please do tell me If I have missed something and what has this file to do with maximizing musickeyboard widget in particular.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, status is a different widget. Actually, after #2838 was merged, as always I deleted that branch and then realized that I left debug statements (that I used for #2838) in the code and did not Prettify the code. So just to rectify that, I did not feel that a different PR would be needed. Thus, I committed those changes first, so this could be rectified.

if (!this.isMaximized) {
cell.style.width = "212.5px";
}
};
Expand All @@ -120,7 +120,8 @@ class StatusMatrix {
const row = header.insertRow();

cell = row.insertCell(); // i + 1);
cell.style.fontSize = Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR)*0.90 + "%";
cell.style.fontSize =
Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you please explain what you've done here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I mentioned in your previous review, this is just prettifying the code (as mentioned in #2609) and removing debug statement.


// console.debug(statusField[1]);

Expand Down Expand Up @@ -166,7 +167,7 @@ class StatusMatrix {
cell = row.insertCell();
cell.style.backgroundColor = platformColor.selectorBackground;
cell.style.fontSize =
Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR)*0.90 + "%";
Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%";
cell.innerHTML = "";
cell.style.height = Math.floor(MATRIXSOLFEHEIGHT * this._cellScale) + "px";
cell.style.textAlign = "center";
Expand All @@ -176,7 +177,8 @@ class StatusMatrix {
if (_THIS_IS_MUSIC_BLOCKS_) {
const row = header.insertRow();
cell = row.insertCell();
cell.style.fontSize = Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR)*0.90 + "%";
cell.style.fontSize =
Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

^^same here

const str = _("note");
const label = str.charAt(0).toUpperCase() + str.slice(1);
cell.innerHTML = "&nbsp;<b>" + label + "</b>";
Expand All @@ -187,7 +189,7 @@ class StatusMatrix {
cell = row.insertCell();
cell.style.backgroundColor = platformColor.selectorBackground;
cell.style.fontSize =
Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR)*0.90 + "%";
Math.floor(this._cellScale * StatusMatrix.FONTSCALEFACTOR) * 0.9 + "%";
cell.innerHTML = "";
cell.style.height = Math.floor(MATRIXSOLFEHEIGHT * this._cellScale) + "px";
cell.style.textAlign = "center";
Expand Down Expand Up @@ -330,4 +332,4 @@ class StatusMatrix {

logo.updatingStatusMatrix = false;
}
}
}
daksh4469 marked this conversation as resolved.
Show resolved Hide resolved