From 8d61c5d804cd05352becaa889d3ffb1f60181f32 Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Wed, 24 Feb 2021 15:39:41 +0530 Subject: [PATCH 01/10] Refactor status.js --- js/widgets/status.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/js/widgets/status.js b/js/widgets/status.js index 5778810cbc..2b6737abbe 100644 --- a/js/widgets/status.js +++ b/js/widgets/status.js @@ -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 + "%"; + if (!this.isMaximized) { cell.style.width = "212.5px"; } }; @@ -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 + "%"; // console.debug(statusField[1]); @@ -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"; @@ -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 + "%"; const str = _("note"); const label = str.charAt(0).toUpperCase() + str.slice(1); cell.innerHTML = " " + label + ""; @@ -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"; @@ -330,4 +332,4 @@ class StatusMatrix { logo.updatingStatusMatrix = false; } -} +} \ No newline at end of file From 8c0b1bfebfea87cb00bf434e53a695f155a24b2c Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Wed, 24 Feb 2021 15:40:22 +0530 Subject: [PATCH 02/10] Feature: Maximizing action on musickeyboard --- js/widgets/musickeyboard.js | 191 ++++++++++++++++++++++++------------ 1 file changed, 130 insertions(+), 61 deletions(-) diff --git a/js/widgets/musickeyboard.js b/js/widgets/musickeyboard.js index 739d2b6f27..5cee5aa5c0 100644 --- a/js/widgets/musickeyboard.js +++ b/js/widgets/musickeyboard.js @@ -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, + 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 blocks - - - js/logo.js - PREVIEWVOLUME - */ - -/*exported MusicKeyboard*/ + - js/logo.js + PREVIEWVOLUME +*/ +/* exported MusicKeyboard */ function MusicKeyboard() { const FAKEBLOCKNUMBER = 100000; @@ -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]. @@ -299,7 +287,32 @@ 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)"; + try { + docById("mkbInnerDiv").style.width = "95.5vw"; + } catch (e) { + // Does this happen? + // console.debug("Error calculating InnerDiv width"); + } + + 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]; @@ -392,6 +405,33 @@ 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)"; + try { + docById("mkbInnerDiv").style.width = "95.5vw"; + } catch (e) { + // Does this happen? + // console.debug("Error calculating InnerDiv width"); + } + + 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 () { @@ -419,6 +459,35 @@ 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)"; + try { + docById("mkbInnerDiv").style.width = "90vw"; + } catch (e) { + // Does this happen? + // console.debug("Error calculating InnerDiv width"); + } + + 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; @@ -469,6 +538,32 @@ function MusicKeyboard() { selectedNotes = []; // if (!that.keyboardShown) { this._createTable(); + 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)"; + try { + docById("mkbInnerDiv").style.width = "90vw"; + } catch (e) { + // Does this happen? + // console.debug("Error calculating InnerDiv width"); + } + + 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"; + } // } }; @@ -526,33 +621,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(); }; @@ -1122,6 +1190,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 { From 2b9f751efeca1f39bafc1e562cd130a4393157a1 Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Wed, 24 Feb 2021 15:59:48 +0530 Subject: [PATCH 03/10] Refactored some code --- js/widgets/musickeyboard.js | 38 ++++--------------------------------- 1 file changed, 4 insertions(+), 34 deletions(-) diff --git a/js/widgets/musickeyboard.js b/js/widgets/musickeyboard.js index 5cee5aa5c0..f191d4de23 100644 --- a/js/widgets/musickeyboard.js +++ b/js/widgets/musickeyboard.js @@ -296,13 +296,8 @@ function MusicKeyboard() { docById("mkbOuterDiv").style.height = "calc(100vh - 64px)"; docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; docById("keyboardHolder2").style.width = "calc(200vh - 64px)"; - try { - docById("mkbInnerDiv").style.width = "95.5vw"; - } catch (e) { - // Does this happen? - // console.debug("Error calculating InnerDiv width"); - } - + docById("mkbInnerDiv").style.width = "95.5vw"; + this.widgetWindow.getWidgetBody().style.left = "60px"; } else { const outerDiv = docById("mkbOuterDiv"); @@ -415,13 +410,7 @@ function MusicKeyboard() { docById("mkbOuterDiv").style.height = "calc(100vh - 64px)"; docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; docById("keyboardHolder2").style.width = "calc(200vh - 64px)"; - try { - docById("mkbInnerDiv").style.width = "95.5vw"; - } catch (e) { - // Does this happen? - // console.debug("Error calculating InnerDiv width"); - } - + docById("mkbInnerDiv").style.width = "95.5vw"; this.widgetWindow.getWidgetBody().style.left = "60px"; } else { const outerDiv = docById("mkbOuterDiv"); @@ -469,13 +458,6 @@ function MusicKeyboard() { outerDiv.style.maxHeight = "705px"; docById("mkbOuterDiv").style.height = "calc(100vh - 64px)"; docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; - try { - docById("mkbInnerDiv").style.width = "90vw"; - } catch (e) { - // Does this happen? - // console.debug("Error calculating InnerDiv width"); - } - widgetWindow.getWidgetBody().style.left = "60px"; } else { const outerDiv = docById("mkbOuterDiv"); @@ -539,21 +521,11 @@ function MusicKeyboard() { // if (!that.keyboardShown) { this._createTable(); 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)"; - try { - docById("mkbInnerDiv").style.width = "90vw"; - } catch (e) { - // Does this happen? - // console.debug("Error calculating InnerDiv width"); - } - + docById("mkbInnerDiv").style.width = "90vw"; widgetWindow.getWidgetBody().style.left = "60px"; } else { const outerDiv = docById("mkbOuterDiv"); @@ -2557,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]], From 2f4ecccc86a4be70b68ab111e73e39d61cac949b Mon Sep 17 00:00:00 2001 From: Daksh Doshi <60084414+daksh4469@users.noreply.github.com> Date: Thu, 25 Feb 2021 13:02:16 +0530 Subject: [PATCH 04/10] Update js/widgets/status.js Co-authored-by: Vaibhav D. Aren --- js/widgets/status.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/widgets/status.js b/js/widgets/status.js index 2b6737abbe..22e9e732d6 100644 --- a/js/widgets/status.js +++ b/js/widgets/status.js @@ -332,4 +332,4 @@ class StatusMatrix { logo.updatingStatusMatrix = false; } -} \ No newline at end of file +} From cba680094d45f8210637b57736db6afab86583ba Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Thu, 25 Feb 2021 18:01:16 +0530 Subject: [PATCH 05/10] Eliminate vertical scroll to fix issue --- js/widgets/musickeyboard.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/widgets/musickeyboard.js b/js/widgets/musickeyboard.js index f191d4de23..30f042ce03 100644 --- a/js/widgets/musickeyboard.js +++ b/js/widgets/musickeyboard.js @@ -292,7 +292,7 @@ function MusicKeyboard() { this.widgetWindow.getWidgetBody().style.height = "calc(100vh - 64px)"; this.widgetWindow.getWidgetBody().style.width = "200vh"; const outerDiv = docById("mkbOuterDiv"); - outerDiv.style.maxHeight = "705px"; + outerDiv.style.maxHeight = "725px"; docById("mkbOuterDiv").style.height = "calc(100vh - 64px)"; docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; docById("keyboardHolder2").style.width = "calc(200vh - 64px)"; @@ -406,7 +406,7 @@ function MusicKeyboard() { this.widgetWindow.getWidgetBody().style.height = "calc(100vh - 64px)"; this.widgetWindow.getWidgetBody().style.width = "200vh"; const outerDiv = docById("mkbOuterDiv"); - outerDiv.style.maxHeight = "705px"; + outerDiv.style.maxHeight = "725px"; docById("mkbOuterDiv").style.height = "calc(100vh - 64px)"; docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; docById("keyboardHolder2").style.width = "calc(200vh - 64px)"; @@ -455,7 +455,7 @@ function MusicKeyboard() { widgetWindow.getWidgetBody().style.width = "200vh"; docById("keyboardHolder2").style.width = "calc(200vh - 64px)"; const outerDiv = docById("mkbOuterDiv"); - outerDiv.style.maxHeight = "705px"; + outerDiv.style.maxHeight = "725px"; docById("mkbOuterDiv").style.height = "calc(100vh - 64px)"; docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; widgetWindow.getWidgetBody().style.left = "60px"; @@ -522,7 +522,7 @@ function MusicKeyboard() { this._createTable(); if (widgetWindow._maximized) { const outerDiv = docById("mkbOuterDiv"); - outerDiv.style.maxHeight = "705px"; + outerDiv.style.maxHeight = "725px"; docById("mkbOuterDiv").style.height = "calc(100vh - 64px)"; docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; docById("mkbInnerDiv").style.width = "90vw"; From 216b19d7847f11fc0ea0b235f2c2f05d36ed5c7c Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Thu, 25 Feb 2021 21:48:43 +0530 Subject: [PATCH 06/10] Handle Overflows and set scroll --- js/widgets/musickeyboard.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/widgets/musickeyboard.js b/js/widgets/musickeyboard.js index 30f042ce03..93a6a87229 100644 --- a/js/widgets/musickeyboard.js +++ b/js/widgets/musickeyboard.js @@ -297,7 +297,8 @@ function MusicKeyboard() { docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; docById("keyboardHolder2").style.width = "calc(200vh - 64px)"; docById("mkbInnerDiv").style.width = "95.5vw"; - + const innerDiv = docById("mkbInnerDiv"); + innerDiv.scrollLeft = innerDiv.scrollWidth; this.widgetWindow.getWidgetBody().style.left = "60px"; } else { const outerDiv = docById("mkbOuterDiv"); @@ -458,6 +459,7 @@ function MusicKeyboard() { outerDiv.style.maxHeight = "725px"; docById("mkbOuterDiv").style.height = "calc(100vh - 64px)"; docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; + docById("mkbInnerDiv").style.width = "95.5vw"; widgetWindow.getWidgetBody().style.left = "60px"; } else { const outerDiv = docById("mkbOuterDiv"); From 4a3f13126c9591ec6633d8ec99a92fc6babc78c1 Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Fri, 26 Feb 2021 18:03:09 +0530 Subject: [PATCH 07/10] Fix issue in case of no grid --- js/widgets/musickeyboard.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/js/widgets/musickeyboard.js b/js/widgets/musickeyboard.js index 93a6a87229..6977461368 100644 --- a/js/widgets/musickeyboard.js +++ b/js/widgets/musickeyboard.js @@ -459,7 +459,6 @@ function MusicKeyboard() { outerDiv.style.maxHeight = "725px"; docById("mkbOuterDiv").style.height = "calc(100vh - 64px)"; docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; - docById("mkbInnerDiv").style.width = "95.5vw"; widgetWindow.getWidgetBody().style.left = "60px"; } else { const outerDiv = docById("mkbOuterDiv"); @@ -527,7 +526,6 @@ function MusicKeyboard() { outerDiv.style.maxHeight = "725px"; 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"); From 4b73c9e05ae56d176bcad02c9a064a9acaa7d936 Mon Sep 17 00:00:00 2001 From: Anindya Kundu Date: Sun, 7 Mar 2021 21:10:22 +0530 Subject: [PATCH 08/10] docs: target more beginners --- README.md | 102 ++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 65 insertions(+), 37 deletions(-) diff --git a/README.md b/README.md index 849a154548..992dfdf701 100644 --- a/README.md +++ b/README.md @@ -7,24 +7,38 @@ Leibniz Music Blocks is a _Visual Programming Language_ and collection of _manipulative tools_ for exploring musical and mathematical concepts in an integrative and fun way. -**Refer the following sections below to get familiar with this project:** +## Getting Started + +Music Blocks is an interactive Web Application — the interaction is done via basic mouse +events like _click_, _right click_, _click and drag_, etc. and keyboard events like _hotkey press_. +The application is audio-visual; it produces graphics artwork and music. Here are a couple of +screenshots to give you an idea of how the application looks like: + +![alt tag](./screenshots/Screenshot-1.png) + +![alt tag](./screenshots/Screenshot-2.png) + +Some background on why music and programming can be found [here](./WhyMusicBlocks.md). + +**Refer to the following sections to get familiar with this application:** - [Running Music Blocks](#RUNNING_MUSIC_BLOCKS) - [How to set up a local server](#HOW_TO_SET_UP_A_LOCAL_SERVER) - [Using Music Blocks](#USING_MUSIC_BLOCKS) -- [Modifying Music Blocks](#MODIFYING_MUSIC_BLOCKS) -- [Reporting Bugs](#REPORTING_BUGS) -- [Contributing](#CONTRIBUTING) -- [Credits](#CREDITS) -- [Music Blocks in Japan](#MUSIC_BLOCKS_IN_JAPAN) -## Screenshots +If you are a developer (beginner, experienced, or pro), you are very welcome to participate in the +evolution of Music Blocks. -![alt tag](./screenshots/Screenshot-1.png) +**Refer to the following sections to get an idea:** -![alt tag](./screenshots/Screenshot-2.png) +- [Contributing](#CONTRIBUTING) +- [Modifying Music Blocks](#MODIFYING_MUSIC_BLOCKS) +- [Reporting Bugs](#REPORTING_BUGS) -Some background on why music and programming can be found [here](./WhyMusicBlocks.md). +**Refer to the following for more information regarding the evolution of this project:** + +- [Credits](#CREDITS) +- [Music Blocks in Japan](#MUSIC_BLOCKS_IN_JAPAN) ## Running Music Blocks @@ -97,38 +111,11 @@ Once Music Blocks is running, you'll want suggestions on how to use it. Follow Looking for a block? Find it in the [Palette Tables](./guide/README.md#APPENDIX_1). -## Modifying Music Blocks - -The core functionality for Music Blocks resides in the [`js/` directory](./js/). Individual -modules are described in more detail in [js/README.md](./js/README.md). - -**NOTE:** As for any changes, please make your own copy by cloning this -[repository](https://github.com/sugarlabs/musicblocks.git). Make your changes, test them, and then -make a pull request. - -See [Contributing Code](https://github.com/sugarlabs/sugar-docs/blob/master/src/contributing.md) -to get a general idea about this organizations guidelines. See [Contributing](#CONTRIBUTING) -section for specific details about this repository. - -## Reporting Bugs - -Bugs can be reported in the [issues tab](https://github.com/sugarlabs/musicblocks/issues) of this -repository. - -If possible, please include the browser _console log output_, and _steps to reproduce_, when -reporting bugs. To access the console, type `Ctrl-Shift-J`/`F12` on most browsers. Alternately, -_right click_ and select `Inspect`. You may need to set the `Default levels` for the console to -`Verbose` in order to see all of the output, however, in most cases that won't be required. In fact, -it'll only clutter the list, so select it only when required. - ## Contributing Please consider contributing to the project, with your ideas, your music, your lesson plans, your artwork, and your code. -Programmers, please follow these general -[guidelines for contributions](https://github.com/sugarlabs/sugar-docs/blob/master/src/contributing.md). - ### Special Notes Music Blocks is being built from the ground-up, to address several architectural problems with this @@ -144,6 +131,23 @@ these issues, whilst adding buffers for future additions. We'll also be using a tech-stack to develop and maintain this project given its scale. After the core is built, we'll be porting features from this application to it. +### Tech Stack + +Music Blocks is a Web Application and is written using browser technologies — `HTML`, `CSS` +(`SCSS`), `JavaScript`, `SVG`, etc. + +If you're just getting started with development, you may refer to the following resources: + +- [HTML tutorial - w3schools.com](https://www.w3schools.com/html/default.asp) +- [HTML reference - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML) +- [CSS tutorial - w3schools.com](https://www.w3schools.com/css/default.asp) +- [CSS reference - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS) +- [JavaScript tutorial - w3schools.com](https://www.w3schools.com/js/default.asp) +- [JavaScript reference - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript) + +Programmers, please follow these general +[guidelines for contributions](https://github.com/sugarlabs/sugar-docs/blob/master/src/contributing.md). + ### New Contributors Use the [discussions](https://github.com/sugarlabs/musicblocks/discussions) tab at the top of the @@ -201,6 +205,30 @@ anything. Begin to fix the problem, test, make your commits, push your commits, request. Mention an issue number in the pull request, but not the commit message. These practices allow the competition of ideas (Sugar Labs is a meritocracy)._ +## Modifying Music Blocks + +The core functionality for Music Blocks resides in the [`js/` directory](./js/). Individual +modules are described in more detail in [js/README.md](./js/README.md). + +**NOTE:** As for any changes, please make your own copy by cloning this +[repository](https://github.com/sugarlabs/musicblocks.git). Make your changes, test them, and then +make a pull request. + +See [Contributing Code](https://github.com/sugarlabs/sugar-docs/blob/master/src/contributing.md) +to get a general idea about this organizations guidelines. See [Contributing](#CONTRIBUTING) +section for specific details about this repository. + +## Reporting Bugs + +Bugs can be reported in the [issues tab](https://github.com/sugarlabs/musicblocks/issues) of this +repository. + +If possible, please include the browser _console log output_, and _steps to reproduce_, when +reporting bugs. To access the console, type `Ctrl-Shift-J`/`F12` on most browsers. Alternately, +_right click_ and select `Inspect`. You may need to set the `Default levels` for the console to +`Verbose` in order to see all of the output, however, in most cases that won't be required. In fact, +it'll only clutter the list, so select it only when required. + ## Credits Music Blocks is a fork of [Turtle Blocks JS](https://github.com/sugarlabs/turtleblocksjs) created by From 2e40ecd53c77027c4077cc975cbdb1e6c8a737b3 Mon Sep 17 00:00:00 2001 From: Anindya Kundu Date: Sun, 7 Mar 2021 21:14:19 +0530 Subject: [PATCH 09/10] docs: add link for MB 2.0 --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 992dfdf701..536ee356bd 100644 --- a/README.md +++ b/README.md @@ -131,6 +131,9 @@ these issues, whilst adding buffers for future additions. We'll also be using a tech-stack to develop and maintain this project given its scale. After the core is built, we'll be porting features from this application to it. +Refer to the repository [**sugarlabs/musicblocks-2**](https://github.com/sugarlabs/musicblocks-2) +for more information about the new project — _Music Blocks 2.0_. + ### Tech Stack Music Blocks is a Web Application and is written using browser technologies — `HTML`, `CSS` From 7aa8aa5c0145b93d9632ad7c1a7fb897aa12a899 Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Fri, 12 Mar 2021 19:50:12 +0530 Subject: [PATCH 10/10] Check maximizing action --- js/widgets/musickeyboard.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/js/widgets/musickeyboard.js b/js/widgets/musickeyboard.js index 6977461368..d5c5296072 100644 --- a/js/widgets/musickeyboard.js +++ b/js/widgets/musickeyboard.js @@ -424,9 +424,6 @@ function MusicKeyboard() { } }; - element.onmouseout = function () { - // __endNote(); - }; element.onmouseup = function () { __endNote(this); @@ -449,7 +446,7 @@ function MusicKeyboard() { const tur = logo.turtles.ithTurtle(0); this.bpm = tur.singer.bpm.length > 0 ? last(tur.singer.bpm) : Singer.masterBPM; - widgetWindow.onmaximize = function () { + this.widgetWindow.onmaximize = function () { if (widgetWindow._maximized) { widgetWindow.getWidgetBody().style.position = "absolute"; widgetWindow.getWidgetBody().style.height = "calc(100vh - 64px)"; @@ -460,7 +457,8 @@ function MusicKeyboard() { docById("mkbOuterDiv").style.height = "calc(100vh - 64px)"; docById("mkbOuterDiv").style.width = "calc(200vh - 64px)"; widgetWindow.getWidgetBody().style.left = "60px"; - } else { + } + else { const outerDiv = docById("mkbOuterDiv"); outerDiv.style.maxHeight = "400px"; widgetWindow.getWidgetBody().style.position = "relative";