Merge pull request #6549 from surveyjs/feature/6480-toc-single-page-mode

Resolved #6480 - Preserve the page structure even if a survey renders in a single page mode
surveyjs · Jul 20, 2023 · f9dab9d · f9dab9d
2 parents 24982c2 + 6c226fb
commit f9dab9d
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 6 deletions.
diff --git a/src/surveyToc.ts b/src/surveyToc.ts
@@ -2,9 +2,9 @@ import { Action } from "./actions/action";
 import { ComputedUpdater } from "./base";
 import { ListModel } from "./list";
 import { PageModel } from "./page";
+import { PanelModelBase } from "./panel";
 import { PopupModel } from "./popup";
 import { SurveyModel } from "./survey";
-import { CssClassBuilder } from "./utils/cssClassBuilder";
 import { IsTouch } from "./utils/devices";
 
 export function tryNavigateToPage(survey: SurveyModel, page: PageModel) {
@@ -21,19 +21,29 @@ export function tryNavigateToPage(survey: SurveyModel, page: PageModel) {
   return true;
 }
 
+export function tryFocusPage(survey: SurveyModel, panel: PanelModelBase) {
+  if (survey.isDesignMode) return true;
+  panel.focusFirstQuestion();
+  return true;
+}
+
 export function createTOCListModel(survey: SurveyModel, onAction?: () => void) {
-  var items = survey.pages.map(page => {
+  const pagesSource: PanelModelBase[] = survey.questionsOnPageMode === "singlePage" ? (survey.pages[0]?.elements as any) : survey.pages;
+  var items = (pagesSource || []).map(page => {
     return new Action({
       id: page.name,
-      title: page.navigationTitle || page.title || page.name,
+      title: ((<any>page)["navigationTitle"]) || page.title || page.name,
       action: () => {
         if (typeof document !== undefined && !!document.activeElement) {
           !!(<any>document.activeElement).blur && (<any>document.activeElement).blur();
         }
         !!onAction && onAction();
-        return tryNavigateToPage(survey, page);
+        if(page instanceof PageModel) {
+          return tryNavigateToPage(survey, page);
+        }
+        return tryFocusPage(survey, page);
       },
-      visible: <any>new ComputedUpdater(() => page.isVisible && !page.isStartPage)
+      visible: <any>new ComputedUpdater(() => page.isVisible && !((<any>page)["isStartPage"]))
     });
   });
   var listModel = new ListModel(
@@ -44,7 +54,7 @@ export function createTOCListModel(survey: SurveyModel, onAction?: () => void) {
       }
     },
     true,
-    items.filter(i => i.id === survey.currentPage.name)[0]
+    items.filter(i => i.id === survey.currentPage.name)[0] || items.filter(i => i.id === pagesSource[0].name)[0]
   );
   listModel.allowSelection = false;
   listModel.locOwner = survey;

diff --git a/tests/surveyTOCTests.ts b/tests/surveyTOCTests.ts
@@ -187,4 +187,45 @@ QUnit.test("TOC pages navigation with start page, bug #6327", function(assert) {
   assert.equal(survey.currentPage.name, "page2", "Current page is 2");
   tocListModel.visibleItems[1].action();
   assert.equal(survey.currentPage.name, "page3", "Current page is 3");
+});
+
+QUnit.test("TOC questionsOnPageMode singlePage", function(assert) {
+  let json: any = {
+    "questionsOnPageMode": "singlePage",
+    "pages": [
+      {
+        "name": "page1",
+        "elements": [
+          {
+            "type": "html",
+          }
+        ]
+      },
+      {
+        "name": "page2",
+        "elements": [
+          {
+            "type": "text",
+            "name": "question2"
+          }
+        ]
+      },
+      {
+        "name": "page3",
+        "elements": [
+          {
+            "type": "text",
+            "name": "question3"
+          }
+        ]
+      }
+    ]
+  };
+  let survey: SurveyModel = new SurveyModel(json);
+  let tocListModel = createTOCListModel(survey);
+
+  assert.equal(tocListModel.visibleItems.length, 3, "3 items is TOC");
+  assert.equal(tocListModel.visibleItems[0].id, survey.pages[0].elements[0].name, "Page 1");
+  assert.equal(tocListModel.visibleItems[1].id, survey.pages[0].elements[1].name, "Page 2");
+  assert.equal(tocListModel.visibleItems[2].id, survey.pages[0].elements[2].name, "Page 3");
 });