Resolved #6928 - TOC Responsiveness on Smaller (not mobile) screens (#…

…7039)

Co-authored-by: tsv2013 <[email protected]>

src/surveyToc.ts

@@ -76,17 +76,23 @@ export class TOCModel {
   constructor(public survey: SurveyModel) {
     this.listModel = createTOCListModel(survey, () => { this.popupModel.isVisible = false; });
     this.popupModel = new PopupModel("sv-list", { model: this.listModel });
-    this.popupModel.displayMode = this.isMobile ? "overlay" : "popup";
+    this.popupModel.displayMode = <any>new ComputedUpdater(() => this.isMobile ? "overlay" : "popup");
   }
 
-  isMobile = IsTouch;
+  get isMobile(): boolean {
+    return this.survey.isMobile;
+  }
   get containerCss(): string {
     return getTocRootCss(this.survey, this.isMobile);
   }
   listModel: ListModel<Action>;
   popupModel: PopupModel;
   icon = "icon-navmenu_24x24";
-  togglePopup = () => {
+  togglePopup = (): void => {
     this.popupModel.toggleVisibility();
   }
+  public dispose(): void {
+    this.popupModel.dispose();
+    this.listModel.dispose();
+  }
 }

visualRegressionTests/tests/defaultV2/survey.ts

@@ -991,7 +991,7 @@ frameworks.forEach(framework => {
   });
   test("TOC survey navigation mobile", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
-      await t.resizeWindow(800, 900);
+      await t.resizeWindow(600, 900);
       await ClientFunction(() => {
         window["Survey"]._setIsTouch(true);
       })();
@@ -1060,5 +1060,71 @@ frameworks.forEach(framework => {
       await t.resizeWindow(1920, 1080);
     });
   });
-});
+  test("TOC survey navigation responsive", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1600, 900);
+
+      const json = {
+        title: "Software developer survey.",
+        showTOC: true,
+        pages: [
+          {
+            "title": "What operating system do you use?",
+            "elements": [
+              {
+                "type": "checkbox",
+                "name": "opSystem",
+                "title": "OS",
+                "hasOther": true,
+                "isRequired": true,
+                "choices": ["Windows", "Linux", "Macintosh OSX"]
+              }
+            ]
+          }, {
+            "title": "What language(s) are you currently using?",
+            "elements": [
+              {
+                "type": "checkbox",
+                "name": "langs",
+                "title": "Please select from the list",
+                "isRequired": true,
+                "choices": [
+                  "Javascript",
+                  "Java",
+                  "Python",
+                  "CSS",
+                  "PHP",
+                  "Ruby",
+                  "C++",
+                  "C",
+                  "Shell",
+                  "C#",
+                ]
+              }
+            ]
+          }, {
+            "title": "Please enter your name and e-mail",
+            "elements": [
+              {
+                "type": "text",
+                "name": "name",
+                "title": "Name:"
+              }, {
+                "type": "text",
+                "name": "email",
+                "title": "Your e-mail"
+              }
+            ]
+          }
+        ]
+      };
+      await initSurvey(framework, json);
+      await takeElementScreenshot("survey-navigation-toc-left.png", Selector(".sv-components-row"), t, comparer);
+
+      await t.resizeWindow(600, 900);
+      await takeElementScreenshot("survey-navigation-toc-mobile.png", Selector(".sd-root-modern"), t, comparer);
 
+      await t.resizeWindow(1920, 1080);
+    });
+  });
+});