Fixed #6899 - Bold Text in TOC - Add an option to render page titles …

…in bold text within Table Of Contents
surveyjs · Sep 18, 2023 · 9faa91d · 9faa91d
1 parent b6c5754
commit 9faa91d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 9 deletions.
diff --git a/src/actions/action.ts b/src/actions/action.ts
@@ -163,7 +163,7 @@ export function createDropdownActionModelAdvanced(actionOptions: IAction, listOp
   const listModel: ListModel = new ListModel(
     listOptions.items,
     (item: Action) => {
-      if(newAction.hasTitle) {
+      if (newAction.hasTitle) {
         newAction.title = item.title;
       }
       listOptions.onSelectionChanged(item);
@@ -337,7 +337,9 @@ export class Action extends BaseAction implements IAction, ILocalizableOwner {
     //Object.assign(this, item) to support IE11
     if (!!innerItem) {
       for (var key in innerItem) {
-        (<any>this)[key] = (<any>innerItem)[key];
+        if (key !== "locTitle") {
+          (<any>this)[key] = (<any>innerItem)[key];
+        }
       }
     }
     if (!!this.locTitleName) {

diff --git a/src/surveyToc.ts b/src/surveyToc.ts
@@ -32,13 +32,14 @@ export function createTOCListModel(survey: SurveyModel, onAction?: () => void) {
   var items = (pagesSource || []).map(page => {
     return new Action({
       id: page.name,
+      locTitle: page.locTitle?.text ? page.locTitle : ((page as PageModel).locNavigationTitle?.text ? (page as PageModel).locNavigationTitle : undefined),
       title: page.renderedNavigationTitle,
       action: () => {
         if (typeof document !== undefined && !!document.activeElement) {
           !!(<any>document.activeElement).blur && (<any>document.activeElement).blur();
         }
         !!onAction && onAction();
-        if(page instanceof PageModel) {
+        if (page instanceof PageModel) {
           return tryNavigateToPage(survey, page);
         }
         return tryFocusPage(survey, page);

diff --git a/tests/surveyTOCTests.ts b/tests/surveyTOCTests.ts
@@ -3,7 +3,7 @@ import { createTOCListModel, getTocRootCss } from "../src/surveyToc";
 
 export default QUnit.module("TOC");
 
-QUnit.test("TOC follow nav buttons", function(assert) {
+QUnit.test("TOC follow nav buttons", function (assert) {
   let json: any = {
     "pages": [
       {
@@ -43,7 +43,7 @@ QUnit.test("TOC follow nav buttons", function(assert) {
   assert.equal("page2", tocListModel.selectedItem.id, "Page 2 is current after navigation");
 });
 
-QUnit.test("TOC root CSS", function(assert) {
+QUnit.test("TOC root CSS", function (assert) {
   let survey: SurveyModel = new SurveyModel({});
 
   let tocRootCss = getTocRootCss(survey);
@@ -54,7 +54,7 @@ QUnit.test("TOC root CSS", function(assert) {
   assert.equal("sv_progress-toc sv_progress-toc--right", tocRootCss, "toc right css");
 });
 
-QUnit.test("TOC pages visibility", function(assert) {
+QUnit.test("TOC pages visibility", function (assert) {
   let json: any = {
     "pages": [
       {
@@ -96,7 +96,7 @@ QUnit.test("TOC pages visibility", function(assert) {
   assert.equal(tocListModel.visibleItems[0].id, survey.pages[1].name, "Page 1 is invisible, page 2 is the first");
 });
 
-QUnit.test("TOC pages visibility, do not include start page into TOC, bug #6192", function(assert) {
+QUnit.test("TOC pages visibility, do not include start page into TOC, bug #6192", function (assert) {
   let json: any = {
     "firstPageIsStarted": true,
     "pages": [
@@ -139,7 +139,7 @@ QUnit.test("TOC pages visibility, do not include start page into TOC, bug #6192"
   assert.equal(tocListModel.visibleItems[0].id, survey.pages[0].name, "Page 1 is visible, page 1 is the first");
 });
 
-QUnit.test("TOC pages navigation with start page, bug #6327", function(assert) {
+QUnit.test("TOC pages navigation with start page, bug #6327", function (assert) {
   let json: any = {
     "firstPageIsStarted": true,
     "pages": [
@@ -189,7 +189,7 @@ QUnit.test("TOC pages navigation with start page, bug #6327", function(assert) {
   assert.equal(survey.currentPage.name, "page3", "Current page is 3");
 });
 
-QUnit.test("TOC questionsOnPageMode singlePage", function(assert) {
+QUnit.test("TOC questionsOnPageMode singlePage", function (assert) {
   let json: any = {
     "questionsOnPageMode": "singlePage",
     "pages": [
@@ -228,4 +228,50 @@ QUnit.test("TOC questionsOnPageMode singlePage", function(assert) {
   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");
+});
+
+QUnit.test("TOC respects markup", function (assert) {
+  let json: any = {
+    "pages": [
+      {
+        "name": "page1",
+        "title": "Text with <strong>strong text</strong>",
+        "elements": [
+          {
+            "type": "html",
+          }
+        ]
+      },
+      {
+        "name": "page2",
+        "navigationTitle": "Text with <em>emphasys text</em>",
+        "elements": [
+          {
+            "type": "text",
+            "name": "question2"
+          }
+        ]
+      },
+      {
+        "name": "page3",
+        "elements": [
+          {
+            "type": "text",
+            "name": "question3"
+          }
+        ]
+      }
+    ]
+  };
+  let survey: SurveyModel = new SurveyModel(json);
+  survey.onTextMarkdown.add(function (survey, options) {
+    options.html = "markup " + options.text;
+  });
+  let tocListModel = createTOCListModel(survey);
+
+  assert.equal(tocListModel.visibleItems.length, 3, "2 items is TOC");
+  assert.equal(tocListModel.visibleItems[0].locTitle.textOrHtml, "markup Text with <strong>strong text</strong>", "Page 1 = locTitle");
+  // TODO - eliminate duplicated call
+  assert.equal(tocListModel.visibleItems[1].locTitle.textOrHtml, "markup markup Text with <em>emphasys text</em>", "Page 2 - nav title");
+  assert.equal(tocListModel.visibleItems[2].locTitle.textOrHtml, "markup page3", "Page 3");
 });