Port widgets/help.js to ES6 class

* adding classes to help.js * Fix error due to mistimed asynchronous call * Format code Co-authored-by: Anindya Kundu <[email protected]>
sugarlabs · Dec 10, 2020 · 2b08fc1 · 2b08fc1
1 parent 8c59919
commit 2b08fc1
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 38 deletions.
diff --git a/js/activity.js b/js/activity.js
@@ -3979,17 +3979,16 @@ function Activity() {
      * Shows help page
      */
     _showHelp = function () {
-        let helpWidget = new HelpWidget();
-        helpWidget.init(null);
+        // Will show welcome page by default.
+        new HelpWidget(null);
     };
 
     /*
      * Shows about page
      */
     _showAboutPage = function () {
-        let helpWidget = new HelpWidget();
-        helpWidget.init(null);
-        helpWidget.showPageByName(_('About'));
+        // Will show welcome page by default.
+        new HelpWidget(null);
     };
 
     /*

diff --git a/js/piemenus.js b/js/piemenus.js
@@ -3218,8 +3218,7 @@ piemenuBlockContext = function(block) {
     if (helpButton !== null) {
         wheel.navItems[helpButton].navigateFunction = function() {
             that.blocks.activeBlock = blockBlock;
-            let helpWidget = new HelpWidget();
-            helpWidget.init(blocks);
+            let helpWidget = new HelpWidget(blocks);
             docById("contextWheelDiv").style.display = "none";
         };
     }

diff --git a/js/widgets/help.js b/js/widgets/help.js
@@ -10,14 +10,14 @@
 
 // This widget displays help about a block or a button.
 
-function HelpWidget() {
-    const ICONSIZE = 32;
-    let beginnerBlocks = [];
-    let advancedBlocks = [];
-    let appendedBlockList = [];
-    let index = 0;
-
-    this.init = (blocks) => {
+const ICONSIZE = 32;
+
+class HelpWidget {
+    constructor(blocks) {
+        this.beginnerBlocks = [];
+        this.advancedBlocks = [];
+        this.appendedBlockList = [];
+        this.index = 0;
         this.isOpen = true;
 
         let widgetWindow = window.widgetWindows.windowFor(this, "help", "help");
@@ -27,7 +27,6 @@ function HelpWidget() {
         this.widgetWindow = widgetWindow;
         widgetWindow.clear();
         widgetWindow.show();
-
         widgetWindow.onClose = () => {
             this.isOpen = false;
             this.destroy();
@@ -40,9 +39,9 @@ function HelpWidget() {
 
         // Position center
         setTimeout(this.widgetWindow.sendToCenter, 50);
-    };
+    }
 
-    this._setup = (blocks) => {
+    _setup(blocks) {
         let iconSize = ICONSIZE;
         // Which help page are we on?
         let page = 0;
@@ -243,9 +242,9 @@ function HelpWidget() {
         }
 
         this.widgetWindow.takeFocus();
-    };
+    }
 
-    this._showPage = (page) => {
+    _showPage(page) {
         let helpBody = docById("helpBodyDiv");
         let body = "";
         if (
@@ -292,18 +291,18 @@ function HelpWidget() {
         helpBody.innerHTML = body;
 
         this.widgetWindow.takeFocus();
-    };
+    }
 
     // Prepare a list of beginner and advanced blocks and cycle through their help
 
-    this._prepareBlockList = (blocks) => {
+    _prepareBlockList(blocks) {
         for (let key in blocks.protoBlockDict) {
             if (
                 blocks.protoBlockDict[key].beginnerModeBlock === true &&
                 blocks.protoBlockDict[key].helpString !== undefined &&
                 blocks.protoBlockDict[key].helpString.length !== 0
             ) {
-                beginnerBlocks.push(key);
+                this.beginnerBlocks.push(key);
             }
         }
 
@@ -313,22 +312,22 @@ function HelpWidget() {
                 blocks.protoBlockDict[key].helpString !== undefined &&
                 blocks.protoBlockDict[key].helpString.length !== 0
             ) {
-                advancedBlocks.push(key);
+                this.advancedBlocks.push(key);
             }
         }
 
         // Array containing list of all blocks (Beginner blocks first)
 
-        appendedBlockList.push(...beginnerBlocks);
-        appendedBlockList.push(...advancedBlocks);
+        this.appendedBlockList.push(...this.beginnerBlocks);
+        this.appendedBlockList.push(...this.advancedBlocks);
 
-        this._blockHelp(blocks.protoBlockDict[appendedBlockList[0]], blocks);
-    };
+        this._blockHelp(blocks.protoBlockDict[this.appendedBlockList[0]], blocks);
+    }
 
     // Function to display help related to a single block
     // called recursively to cycle through help string of all blocks (Beginner Blocks First)
 
-    this._blockHelp = (block, blocks) => {
+    _blockHelp(block, blocks) {
         let iconSize = ICONSIZE;
 
         let widgetWindow = window.widgetWindows.windowFor(this, "help", "help");
@@ -346,20 +345,20 @@ function HelpWidget() {
         this.widgetWindow.sendToCenter();
         let cell = docById("right-arrow");
         cell.onclick = () => {
-            if (index !== appendedBlockList.length - 1) {
-                index += 1;
+            if (this.index !== this.appendedBlockList.length - 1) {
+                this.index += 1;
             }
-            this._blockHelp(blocks.protoBlockDict[appendedBlockList[index]], blocks);
+            this._blockHelp(blocks.protoBlockDict[this.appendedBlockList[this.index]], blocks);
         };
 
         cell = docById("left-arrow");
 
         cell.onclick = () => {
-            if (index !== 0) {
-                index -= 1;
+            if (this.index !== 0) {
+                this.index -= 1;
             }
 
-            this._blockHelp(blocks.protoBlockDict[appendedBlockList[index]], blocks);
+            this._blockHelp(blocks.protoBlockDict[this.appendedBlockList[this.index]], blocks);
         };
         if (block.name !== null) {
             let label = block.staticLabels[0];
@@ -496,13 +495,13 @@ function HelpWidget() {
         }
 
         this.widgetWindow.takeFocus();
-    };
+    }
 
-    this.showPageByName = (pageName) => {
+    showPageByName(pageName) {
         for (let i = 0; i < HELPCONTENT.length; i++) {
             if (HELPCONTENT[i].includes(pageName)) {
                 this._showPage(i);
             }
         }
-    };
+    }
 }