refactor: replace var with let/const in widgets and toolbar files (#5051)

Author: Ashutoshx7

js/toolbar.js

@@ -827,7 +827,7 @@ class Toolbar {
         const menuIcon = docById("menu");
         const auxToolbar = docById("aux-toolbar");
         menuIcon.onclick = () => {
-            var searchBar = docById("search");
+            const searchBar = docById("search");
             searchBar.classList.toggle("open");
             if (auxToolbar.style.display == "" || auxToolbar.style.display == "none") {
                 onclick(this.activity, false);

js/widgets/aiwidget.js

@@ -782,7 +782,7 @@ function AIWidget() {
         widgetWindow.show();
 
         // For the button callbacks
-        var that = this;
+        const that = this;
 
         widgetWindow.onclose = () => {
             if (this.drawVisualIDs) {
@@ -873,10 +873,10 @@ function AIWidget() {
      * @returns {void}
      */
     this._playABCSong = function () {
-        var abc = abcNotationSong;
-        var stopAudioButton = document.querySelector(".stop-audio");
+        const abc = abcNotationSong;
+        const stopAudioButton = document.querySelector(".stop-audio");
 
-        var visualObj = ABCJS.renderAbc("*", abc, {
+        const visualObj = ABCJS.renderAbc("*", abc, {
             responsive: "resize"
         })[0];
 
@@ -890,7 +890,7 @@ function AIWidget() {
                 window.webkitAudioContext ||
                 navigator.mozAudioContext ||
                 navigator.msAudioContext;
-            var audioContext = new window.AudioContext();
+            const audioContext = new window.AudioContext();
             audioContext.resume().then(function () {
                 // In theory the AC shouldn't start suspended because it is being initialized in a click handler, but iOS seems to anyway.
 
@@ -917,13 +917,13 @@ function AIWidget() {
                     .catch(function (error) {
                         if (error.status === "NotSupported") {
                             stopAudioButton.setAttribute("style", "display:none;");
-                            var audioError = document.querySelector(".audio-error");
+                            const audioError = document.querySelector(".audio-error");
                             audioError.setAttribute("style", "");
                         } else console.warn("synth error", error);
                     });
             });
         } else {
-            var audioError = document.querySelector(".audio-error");
+            const audioError = document.querySelector(".audio-error");
             audioError.setAttribute("style", "");
         }
     };

js/widgets/phrasemaker.js

@@ -275,68 +275,68 @@ class PhraseMaker {
          * Width of the screen.
          * @type {number}
          */
-        var screenWidth = window.innerWidth;
+        const screenWidth = window.innerWidth;
 
         /**
          * Height of the screen.
          * @type {number}
          */
-        var screenHeight = window.innerHeight;
+        const screenHeight = window.innerHeight;
 
         /**
          * Container element for floating windows.
          * @type {HTMLElement}
          */
-        var floatingWindowsDiv = document.getElementById("floatingWindows");
+        const floatingWindowsDiv = document.getElementById("floatingWindows");
 
         /**
          * Collection of window frame elements.
          * @type {NodeListOf<Element>}
          */
-        var windowFrameElements = floatingWindowsDiv.querySelectorAll(".windowFrame");
+        const windowFrameElements = floatingWindowsDiv.querySelectorAll(".windowFrame");
 
-        for (var i = 0; i < windowFrameElements.length; i++) {
+        for (let i = 0; i < windowFrameElements.length; i++) {
             /**
              * Current window frame element.
              * @type {Element}
              */
-            var windowFrame = windowFrameElements[i];
+            const windowFrame = windowFrameElements[i];
 
             /**
              * Widget body element within the window frame.
              * @type {Element}
              */
-            var wfWinBody = windowFrame.querySelector(".wfWinBody");
+            const wfWinBody = windowFrame.querySelector(".wfWinBody");
 
             /**
              * Widget element within the window frame.
              * @type {Element}
              */
-            var wfbWidget = windowFrame.querySelector(".wfbWidget");
+            const wfbWidget = windowFrame.querySelector(".wfbWidget");
 
             /**
              * Total width of the window frame.
              * @type {number}
              */
-            var totalWidth = parseFloat(window.getComputedStyle(windowFrame).width);
+            const totalWidth = parseFloat(window.getComputedStyle(windowFrame).width);
 
             /**
              * Total height of the window frame.
              * @type {number}
              */
-            var totalHeight = parseFloat(window.getComputedStyle(windowFrame).height);
+            const totalHeight = parseFloat(window.getComputedStyle(windowFrame).height);
 
             /**
              * Maximum allowed width for the window frame.
              * @type {number}
              */
-            var maxWidth = screenWidth * 0.8;
+            const maxWidth = screenWidth * 0.8;
 
             /**
              * Maximum allowed height for the window frame.
              * @type {number}
              */
-            var maxHeight = screenHeight * 0.8;
+            const maxHeight = screenHeight * 0.8;
 
             if (totalWidth > screenWidth || totalHeight > screenHeight) {
                 windowFrame.style.height = Math.min(totalHeight, maxHeight) + "px";

js/widgets/sampler.js

@@ -305,14 +305,14 @@ function SampleWidget() {
      * @returns {void}
      */
     this.__save = function () {
-        var that = this;
+        const that = this;
         setTimeout(function () {
             that._addSample();
 
             // Include the cent adjustment value in the sample block
             const centAdjustment = that.centAdjustmentValue || 0;
 
-            var newStack = [
+            const newStack = [
                 [0, "settimbre", 100, 100, [null, 1, null, 5]],
                 [
                     1,