navigationTitle property doesn't support piped text fix #8203

surveyjs · Apr 29, 2024 · 9526c42 · 9526c42
1 parent b214283
commit 9526c42
Show file tree

Hide file tree

Showing 12 changed files with 103 additions and 32 deletions.
diff --git a/packages/survey-angular-ui/src/components/progress/buttons/progress.component.html b/packages/survey-angular-ui/src/components/progress/buttons/progress.component.html
@@ -21,7 +21,7 @@
             [class]="survey.css.progressButtonsPageTitle"
             [title]="page.renderedNavigationTitle"
           >
-            {{ page.renderedNavigationTitle }}
+            <sv-ng-string [model]="page.locNavigationTitle"></sv-ng-string>
           </div>
           <div *ngIf="canShowItemTitles"
             [class]="survey.css.progressButtonsPageDescription"

diff --git a/packages/survey-vue3-ui/src/components/progress/ProgressButtons.vue b/packages/survey-vue3-ui/src/components/progress/ProgressButtons.vue
@@ -1,7 +1,19 @@
 <template>
-  <div :class="model.getRootCss(container)" :style="{'maxWidth': model.progressWidth}" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-label="progress">
+  <div
+    :class="model.getRootCss(container)"
+    :style="{ maxWidth: model.progressWidth }"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    aria-label="progress"
+  >
     <div v-if="canShowHeader" :class="survey.css.progressButtonsHeader">
-      <div :class="survey.css.progressButtonsPageTitle" :title="model.headerText">{{ model.headerText }}</div>
+      <div
+        :class="survey.css.progressButtonsPageTitle"
+        :title="model.headerText"
+      >
+        {{ model.headerText }}
+      </div>
     </div>
     <div :class="css.progressButtonsContainer">
       <div
@@ -19,24 +31,32 @@
             :key="'listelement' + index"
             :class="model.getListElementCss(index)"
             v-on:click="
-              model.isListElementClickable(index) ? model.clickListElement(page) : null
+              model.isListElementClickable(index)
+                ? model.clickListElement(page)
+                : null
             "
             :data-page-number="model.getItemNumber(page)"
           >
             <div :class="css.progressButtonsConnector"></div>
-            <div v-if="canShowItemTitles"
+            <div
+              v-if="canShowItemTitles"
               :class="css.progressButtonsPageTitle"
               :title="page.renderedNavigationTitle"
             >
-              {{ page.renderedNavigationTitle }}
+              <survey-string :locString="item.locNavigationTitle" />
             </div>
-            <div v-if="canShowItemTitles"
+            <div
+              v-if="canShowItemTitles"
               :class="css.progressButtonsPageDescription"
               :title="page.locNavigationDescription.renderedHtml"
             >
               {{ page.locNavigationDescription.renderedHtml }}
             </div>
-            <div :class="css.progressButtonsButton"><div :class="css.progressButtonsButtonBackground"></div><div :class="css.progressButtonsButtonContent"></div><span>{{model.getItemNumber(page)}}</span></div>
+            <div :class="css.progressButtonsButton">
+              <div :class="css.progressButtonsButtonBackground"></div>
+              <div :class="css.progressButtonsButtonContent"></div>
+              <span>{{ model.getItemNumber(page) }}</span>
+            </div>
           </li>
         </ul>
       </div>
@@ -47,13 +67,23 @@
       ></div>
     </div>
     <div v-if="canShowFooter" :class="survey.css.progressButtonsFooter">
-      <div :class="survey.css.progressButtonsPageTitle" :title="model.footerText">{{ model.footerText }}</div>
+      <div
+        :class="survey.css.progressButtonsPageTitle"
+        :title="model.footerText"
+      >
+        {{ model.footerText }}
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { type SurveyModel, ProgressButtons, ProgressButtonsResponsivityManager, IProgressButtonsViewModel } from "survey-core";
+import {
+  type SurveyModel,
+  ProgressButtons,
+  ProgressButtonsResponsivityManager,
+  IProgressButtonsViewModel,
+} from "survey-core";
 import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
 
 const props = defineProps<{
@@ -88,7 +118,7 @@ onMounted(() => {
       canShowItemTitles.value = props.model.showItemTitles;
       canShowFooter.value = !props.model.showItemTitles;
     },
-    container: computed(() => props.container)
+    container: computed(() => props.container),
   } as any);
 });
 onBeforeUnmount(() => {

diff --git a/src/actions/action.ts b/src/actions/action.ts
@@ -350,9 +350,8 @@ export class Action extends BaseAction implements IAction, ILocalizableOwner {
     //Object.assign(this, item) to support IE11
     if (!!innerItem) {
       for (var key in innerItem) {
-        if (key !== "locTitle") {
-          (<any>this)[key] = (<any>innerItem)[key];
-        }
+        if(key === "locTitle" || key === "title" && !!this.locTitle && !!this.title) continue;
+        (<any>this)[key] = (<any>innerItem)[key];
       }
     }
     if (!!this.locTitleName) {

diff --git a/src/knockout/components/progress/buttons.html b/src/knockout/components/progress/buttons.html
@@ -11,7 +11,7 @@
                 <li data-bind="css: $parent.model.getListElementCss($index()), click: $parent.model.isListElementClickable($index()) ? $parent.model.clickListElement : null, attr: { 'data-page-number' : $parent.model.getItemNumber($data) }">
                     <div data-bind="css: css.progressButtonsConnector"></div>
                     <!-- ko if: $parent.canShowItemTitles -->
-                    <div data-bind="css: css.progressButtonsPageTitle, text: renderedNavigationTitle, attr: { title: renderedNavigationTitle }"></div>
+                    <div data-bind="css: css.progressButtonsPageTitle, attr: { title: renderedNavigationTitle }"><!-- ko template: { name: 'survey-string', data: locNavigationTitle } --><!-- /ko --></div>
                     <div data-bind="css: css.progressButtonsPageDescription, text: locNavigationDescription.koRenderedHtml(), attr: { title: locNavigationDescription.koRenderedHtml() }"></div>
                     <!-- /ko -->
                     <div data-bind="css: css.progressButtonsButton"><div data-bind="css: css.progressButtonsButtonBackground"></div><div data-bind="css: css.progressButtonsButtonContent"></div><span data-bind="text: $parent.model.getItemNumber($data)"></span></div>

diff --git a/src/page.ts b/src/page.ts
@@ -27,7 +27,6 @@ export class PageModel extends PanelModelBase implements IPage {
       if (this.canShowPageNumber() && text) return this.num + ". " + text;
       return text;
     };
-    this.createLocalizableString("navigationTitle", this, true);
     this.createLocalizableString("navigationDescription", this, true);
     this.dragDropPageHelper = new DragDropPageHelperV1(this);
   }
@@ -57,9 +56,6 @@ export class PageModel extends PanelModelBase implements IPage {
   public set navigationTitle(val: string) {
     this.setLocalizableStringText("navigationTitle", val);
   }
-  public get locNavigationTitle(): LocalizableString {
-    return this.getLocalizableString("navigationTitle");
-  }
   /**
    * Explanatory text displayed under a navigation button in the progress bar. Applies when the [progress bar is visible](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showProgressBar), `SurveyModel`'s [`progressBarType`](https://surveyjs.io/form-library/documentation/surveymodel#progressBarType) is set to `"pages"`, and [`progressBarShowPageTitles`](https://surveyjs.io/form-library/documentation/surveymodel#progressBarShowPageTitles) is `true`.
    */
@@ -73,12 +69,12 @@ export class PageModel extends PanelModelBase implements IPage {
     return this.getLocalizableString("navigationDescription");
   }
   public navigationLocStrChanged(): void {
+    if(this.locNavigationTitle.isEmpty) {
+      this.locTitle.strChanged();
+    }
     this.locNavigationTitle.strChanged();
     this.locNavigationDescription.strChanged();
   }
-  public get renderedNavigationTitle(): string {
-    return this.locNavigationTitle.renderedHtml || this.title || this.name;
-  }
   public get passed(): boolean {
     return this.getPropertyValue("passed", false);
   }

diff --git a/src/panel.ts b/src/panel.ts
@@ -360,6 +360,9 @@ export class PanelModelBase extends SurveyElement<Question>
     this.addExpressionProperty("requiredIf", (obj: Base, res: any) => { this.isRequired = res === true; });
 
     this.createLocalizableString("requiredErrorText", this);
+    this.createLocalizableString("navigationTitle", this, true).onGetTextCallback = (text: string) => {
+      return text || this.title || this.name;
+    };
     this.registerPropertyChangedHandlers(["questionTitleLocation"], () => {
       this.onVisibleChanged.bind(this);
       this.updateElementCss(true);
@@ -426,8 +429,17 @@ export class PanelModelBase extends SurveyElement<Question>
       this.elements[i].locStrsChanged();
     }
   }
+  getMarkdownHtml(text: string, name: string): string {
+    if(name === "navigationTitle" && this.locNavigationTitle.isEmpty) {
+      return this.locTitle.renderedHtml || this.name;
+    }
+    return super.getMarkdownHtml(text, name);
+  }
+  public get locNavigationTitle(): LocalizableString {
+    return this.getLocalizableString("navigationTitle");
+  }
   public get renderedNavigationTitle(): string {
-    return this.title || this.name;
+    return this.locNavigationTitle.renderedHtml;
   }
   /**
    * Returns a character or text string that indicates a required panel/page.

diff --git a/src/react/progressButtons.tsx b/src/react/progressButtons.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import { ProgressButtons, PageModel, ProgressButtonsResponsivityManager, IProgressButtonsViewModel } from "survey-core";
 import { SurveyNavigationBase } from "./reactSurveyNavigationBase";
 import { ReactElementFactory } from "./element-factory";
+import { SurveyElementBase } from "./reactquestion_element";
 
 export class SurveyProgressButtons extends SurveyNavigationBase implements IProgressButtonsViewModel {
   private respManager: ProgressButtonsResponsivityManager;
@@ -71,6 +72,7 @@ export class SurveyProgressButtons extends SurveyNavigationBase implements IProg
     return buttons;
   }
   protected renderListElement(page: PageModel, index: number): JSX.Element {
+    const text = SurveyElementBase.renderLocString(page.locNavigationTitle);
     return (
       <li
         key={"listelement" + index}
@@ -88,7 +90,7 @@ export class SurveyProgressButtons extends SurveyNavigationBase implements IProg
             className={this.css.progressButtonsPageTitle}
             title={page.renderedNavigationTitle}
           >
-            {page.renderedNavigationTitle}
+            {text}
           </div>
           <div
             className={this.css.progressButtonsPageDescription}

diff --git a/src/surveyToc.ts b/src/surveyToc.ts
@@ -19,8 +19,7 @@ export function createTOCListModel(survey: SurveyModel, onAction?: () => void) {
   var items = (pagesSource || []).map(page => {
     return new Action({
       id: page.name,
-      locTitle: (page as PageModel).locNavigationTitle?.text ? (page as PageModel).locNavigationTitle : (page.locTitle?.text ? page.locTitle : undefined),
-      title: page.renderedNavigationTitle,
+      locTitle: page.locNavigationTitle,
       action: () => {
         DomDocumentHelper.activeElementBlur();
         !!onAction && onAction();

diff --git a/src/vue/progressButtons.vue b/src/vue/progressButtons.vue
@@ -28,7 +28,7 @@
               :class="css.progressButtonsPageTitle"
               :title="page.renderedNavigationTitle"
             >
-              {{ page.renderedNavigationTitle }}
+              <survey-string :locString="item.locNavigationTitle" />
             </div>
             <div v-if="canShowItemTitles"
               :class="css.progressButtonsPageDescription"

diff --git a/tests/choicesRestfultests.ts b/tests/choicesRestfultests.ts
@@ -1046,7 +1046,7 @@ QUnit.test(
     assert.equal(question.visibleChoices[0].text, "AAA");
     assert.equal(onStrChangedCounter, 1);
     assert.equal(titleQuestion.locTitle.renderedHtml, "test:AAA", "Use title, items are loaded");
-    assert.equal(onPageStrChangedCounter, 1, "for page");
+    assert.equal(onPageStrChangedCounter, 2, "for page and for navigation");
     assert.equal(page.locTitle.renderedHtml, "pagetest:AAA", "Use title, items are loaded, for page");
     question.value = "B";
     assert.equal(titleQuestion.locTitle.renderedHtml, "test:BBB", "Use title, set new value");

diff --git a/tests/surveyTOCTests.ts b/tests/surveyTOCTests.ts
@@ -256,12 +256,22 @@ QUnit.test("TOC respects markup", function (assert) {
       },
       {
         "name": "page3",
+        "title": "Page 3",
         "elements": [
           {
             "type": "text",
             "name": "question3"
           }
         ]
+      },
+      {
+        "name": "page4",
+        "elements": [
+          {
+            "type": "text",
+            "name": "question4"
+          }
+        ]
       }
     ]
   };
@@ -271,11 +281,13 @@ QUnit.test("TOC respects markup", function (assert) {
   });
   let tocListModel = createTOCListModel(survey);
 
-  assert.equal(tocListModel.visibleItems.length, 3, "2 items is TOC");
+  assert.equal(survey.pages[2].locTitle.textOrHtml, "markup Page 3", "survey.pages[2]");
+
+  assert.equal(tocListModel.visibleItems.length, 4, "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");
+  assert.equal(tocListModel.visibleItems[1].locTitle.textOrHtml, "markup Text with <em>emphasys text</em>", "Page 2 - nav title");
+  assert.equal(tocListModel.visibleItems[2].locTitle.textOrHtml, "markup Page 3", "Page 3");
+  assert.equal(tocListModel.visibleItems[3].locTitle.textOrHtml, "page4", "Page 4");
 });
 
 QUnit.test("TOC shouldn't affect page title", function (assert) {

diff --git a/tests/surveytests.ts b/tests/surveytests.ts
@@ -268,6 +268,27 @@ QUnit.test("PageModel.renderedNavigationTitle", function (assert) {
   assert.equal(survey.pages[3].renderedNavigationTitle, "NavPage 4", "page4");
 });
 
+QUnit.test("PageModel.renderedNavigationTitle & piped text", function (assert) {
+  const survey = new SurveyModel({
+    pages: [
+      { name: "page1", elements: [{ type: "text", name: "q1" }] },
+      { name: "page2", title: "Page 2", elements: [{ type: "text", name: "q2" }] },
+      { name: "page3", title: "Page 3", navigationTitle: "NavPage 3, {q1}", elements: [{ type: "text", name: "q3" }] },
+      { name: "page4", navigationTitle: "NavPage 4, {q2}", elements: [{ type: "text", name: "q4" }] },
+    ]
+  });
+  assert.equal(survey.pages[0].renderedNavigationTitle, "page1", "page1, #1");
+  assert.equal(survey.pages[1].renderedNavigationTitle, "Page 2", "page2, #1");
+  assert.equal(survey.pages[2].renderedNavigationTitle, "NavPage 3, ", "page3, #1");
+  assert.equal(survey.pages[3].renderedNavigationTitle, "NavPage 4, ", "page4, #1");
+  survey.setValue("q1", "val1");
+  survey.setValue("q2", "val2");
+  assert.equal(survey.pages[0].renderedNavigationTitle, "page1", "page1, #2");
+  assert.equal(survey.pages[1].renderedNavigationTitle, "Page 2", "page2, #2");
+  assert.equal(survey.pages[2].renderedNavigationTitle, "NavPage 3, val1", "page3, #2");
+  assert.equal(survey.pages[3].renderedNavigationTitle, "NavPage 4, val2", "page4, #2");
+});
+
 QUnit.test("Remove Page in design mode", function (assert) {
   var survey = new SurveyModel();
   survey.setDesignMode(true);