widgets/meter - enhancements to fullscreen mode

sugarlabs · Jan 26, 2021 · 2462d31 · 2462d31
1 parent ed7aeac
commit 2462d31
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
diff --git a/js/widgets/meterwidget.js b/js/widgets/meterwidget.js
@@ -29,7 +29,7 @@
          PREVIEWVOLUME, TONEBPM
 */
 
-// eslint-disable-next-line no-unused-vars
+/*exported MeterWidget*/
 class MeterWidget {
     // A pie menu is used to show the meter and strong beats
     static BUTTONDIVWIDTH = 535;
@@ -69,6 +69,8 @@ class MeterWidget {
             widgetWindow.destroy();
         };
 
+        widgetWindow.onmaximize = this._scale;
+
         this._click_lock = false;
         const playBtn = widgetWindow.addButton("play-button.svg", MeterWidget.ICONSIZE, _("Play"));
         playBtn.onclick = () => {
@@ -188,6 +190,20 @@ class MeterWidget {
 
         logo.textMsg(_("Click in the circle to select strong beats for the meter."));
         widgetWindow.sendToCenter();
+        this._scale.call(this.widgetWindow);
+    }
+
+    _scale() {
+        const windowHeight =
+            this.getWidgetFrame().offsetHeight - this.getDragElement().offsetHeight;
+        const svg = this.getWidgetBody().getElementsByTagName("svg")[0];
+        const scale = this.isMaximized() ? windowHeight / 400 : 1;
+        svg.style.pointerEvents = "none";
+        svg.setAttribute("height", `${400 * scale}px`);
+        svg.setAttribute("width", `${400 * scale}px`);
+        setTimeout(() => {
+            svg.style.pointerEvents = "auto";
+        }, 100);
     }
 
     /**
@@ -363,7 +379,8 @@ class MeterWidget {
     _piemenuMeter(numberOfBeats, beatValue) {
         // pie menu for strong beat selection
 
-        docById("meterWheelDiv").style.display = "";
+        docById("meterWheelDiv").style.display = "flex";
+        docById("meterWheelDiv").style.justifyContent = "center";
 
         // Use advanced constructor for multiple wheelnavs in the same div.
         // The meterWheel is used to hold the strong beats.

diff --git a/js/widgets/widgetWindows.js b/js/widgets/widgetWindows.js
@@ -62,7 +62,7 @@ class WidgetWindow {
             }
         });
 
-        document.addEventListener("mouseup", (e) => {
+        document.addEventListener("mouseup", () => {
             this._dragging = false;
         });
 
@@ -173,7 +173,7 @@ class WidgetWindow {
             window.onscroll = () => {
                 window.scrollTo(scrollLeft, scrollTop);
             };
-        }
+        };
 
         this._widget = this._create("div", "wfbWidget", this._body);
         this._widget.addEventListener("wheel", disableScroll, false);
@@ -190,7 +190,7 @@ class WidgetWindow {
             language = navigator.language;
         }
 
-        console.debug("language setting is " + language);
+        // console.debug("language setting is " + language);
         // For Japanese, put the toolbar on the top.
         if (language === "ja") {
             this._body.style.flexDirection = "column";
@@ -413,6 +413,14 @@ class WidgetWindow {
         return this._widget;
     }
 
+    /**
+     * @public
+     * @returns {HTMLElement}
+     */
+    getWidgetFrame() {
+        return this._frame;
+    }
+
     /**
      * @deprecated
      */
@@ -445,6 +453,14 @@ class WidgetWindow {
         return this;
     }
 
+    /**
+     * @public
+     * @returns {boolean}
+     */
+    isMaximized() {
+        return this._maximized;
+    }
+
     /**
      * @returns {void}
      */