added_disabled_property_to_blockHelp_div

added_disabled_property_to_blockHelp_div one_more one_more block_left_arrow_active left_arrow_function_to_last_page
sugarlabs · Jan 7, 2024 · 0b4949f · 0b4949f
1 parent 175ea9a
commit 0b4949f
Showing 1 changed file with 60 additions and 15 deletions.
diff --git a/js/widgets/help.js b/js/widgets/help.js
@@ -58,7 +58,7 @@ class HelpWidget {
         this._helpDiv = document.createElement("div");
 
         // Give the DOM time to create the div.
-        setTimeout(() => this._setup(useActiveBlock), 0);
+        setTimeout(() => this._setup(useActiveBlock,0), 0);
 
         // Position center
         setTimeout(this.widgetWindow.sendToCenter, 50);
@@ -69,9 +69,8 @@ class HelpWidget {
      * @param {useActiveBlock} Show help for the active block.
      * @returns {void}
      */
-    _setup(useActiveBlock) {
+    _setup(useActiveBlock,page) {
         // Which help page are we on?
-        let page = 0;
 
         this._helpDiv.style.width = 100 +"%";
         this._helpDiv.style.backgroundColor = "#e8e8e8";
@@ -92,7 +91,12 @@ class HelpWidget {
 
         let leftArrow, rightArrow;
         if (!useActiveBlock) {
-            this.widgetWindow.updateTitle(_("Take a tour"));
+            if(page==0){
+                this.widgetWindow.updateTitle("TAKE A TOUR");
+            }
+            else{
+                this.widgetWindow.updateTitle(HELPCONTENT[page][0]);
+            }
             rightArrow = document.getElementById("right-arrow");
             rightArrow.style.display = "block";
             rightArrow.classList.add("hover");
@@ -117,6 +121,12 @@ class HelpWidget {
                     if (page > 0){
                         page = page - 1;
                         leftArrow.classList.remove('disabled');
+                        if(page==0){
+                            this.widgetWindow.updateTitle("TAKE A TOUR");
+                        }
+                        else{
+                            this.widgetWindow.updateTitle(HELPCONTENT[page][0]);
+                        }
                         this._showPage(page);
                     }
                     if (page === 0){
@@ -132,14 +142,24 @@ class HelpWidget {
                 if (page === HELPCONTENT.length) {
                     page = 0;
                 }
-
+                if(page==0){
+                    this.widgetWindow.updateTitle("TAKE A TOUR");
+                }
+                else{
+                    this.widgetWindow.updateTitle(HELPCONTENT[page][0]);
+                }
                 this._showPage(page);
             };
         } else {
             if (this.activity.blocks.activeBlock.name !== null) {
                 const label = this.activity.blocks.blockList[this.activity.blocks.activeBlock]
                     .protoblock.staticLabels[0];
-                this.widgetWindow.updateTitle(_(label));
+                    if(page==0){
+                        this.widgetWindow.updateTitle("TAKE A TOUR");
+                    }
+                    else{
+                        this.widgetWindow.updateTitle(HELPCONTENT[page][0]);
+                    }
             }
 
             rightArrow = document.getElementById("right-arrow");
@@ -155,7 +175,7 @@ class HelpWidget {
             // display help menu
             docById("helpBodyDiv").style.height = "325px";
             docById("helpBodyDiv").style.width = "345px";
-            this._showPage(0);
+            this._showPage(page);
         } else {
             // display help for this block
             if (this.activity.blocks.activeBlock.name !== null) {
@@ -343,6 +363,24 @@ class HelpWidget {
                 this._prepareBlockList();
             };
         }
+        else{
+            const cell=docById("right-arrow");
+            let leftArrow=docById("left-arrow");
+            cell.onclick = () => {
+                page = page + 1;
+                leftArrow.classList.remove('disabled');
+                if (page === HELPCONTENT.length) {
+                    page = 0;
+                }
+                if(page==0){
+                    this.widgetWindow.updateTitle("TAKE A TOUR");
+                }
+                else{
+                    this.widgetWindow.updateTitle(HELPCONTENT[page][0]);
+                }
+                this._showPage(page);
+            };
+        }
 
         helpBody.style.color = "#505050";
         helpBody.insertAdjacentHTML("afterbegin", body) ;
@@ -411,19 +449,20 @@ class HelpWidget {
         let cell = docById("right-arrow");
         let rightArrow = docById("right-arrow");
         let leftArrow = docById("left-arrow");
+
 
         document.onkeydown = function handleArrowKeys(event) {
             if (event.key === 'ArrowLeft') {
                 leftArrow.click(); 
             } else if (event.key === 'ArrowRight') {
                 rightArrow.click(); 
             }
-        } ; 
+        };
 
         if(this.index == this.appendedBlockList.length - 1)
         {
-           rightArrow.classList.add("disabled") ;       
-        }
+           rightArrow.classList.add("disabled") ;
+        }
         cell.onclick = () => {
             if (this.index !== this.appendedBlockList.length - 1) {
                 this.index += 1;
@@ -436,13 +475,19 @@ class HelpWidget {
         cell = docById("left-arrow");
 
         cell.onclick = () => {
-            if (this.index !== 0) {
-                this.index -= 1;
+            if(this.index==0){
+                const widgetWindow = window.widgetWindows.windowFor(this, "help", "help");
+                this.widgetWindow = widgetWindow;
+                widgetWindow.clear();
+                this._helpDiv = document.createElement("div");
+                this._setup(false,HELPCONTENT.length-1);
             }
-
-            this._blockHelp(
+            else{
+             this.index-=1;
+             this._blockHelp(
                 this.activity.blocks.protoBlockDict[this.appendedBlockList[this.index]]
-            );
+             );
+            }
         };
         if (block.name !== null) {
             const label = block.staticLabels[0];