Split the showNavigationButtons property and rename the `navigation…

…ButtonsVisibility` property (#9225) * Split the `showNavigationButtons` property and rename the `navigationButtonsVisibility` property Fixes #5286 * Update descriptions * Update deprecation messages * Split the `showNavigationButtons` property and rename the `navigationButtonsVisibility` property Fixes #5286 * Added u-test checks --------- Co-authored-by: tsv2013 <[email protected]> Co-authored-by: RomanTsukanov <[email protected]>
surveyjs · Jan 10, 2025 · c14519b · c14519b
1 parent c89a5f4
commit c14519b
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 46 deletions.
diff --git a/packages/survey-core/docs/surveyjs_definition.json b/packages/survey-core/docs/surveyjs_definition.json
@@ -79,16 +79,16 @@
             "type": "boolean"
         },
         "showNavigationButtons": {
+            "type": "boolean"
+        },
+        "navigationButtonsLocation": {
             "type": [
-                "string",
-                "numeric",
-                "boolean"
+                "string"
             ],
             "enum": [
-                "none",
                 "top",
                 "bottom",
-                "both"
+                "topBottom"
             ]
         },
         "showPrevButton": {

diff --git a/packages/survey-core/src/page.ts b/packages/survey-core/src/page.ts
@@ -229,14 +229,43 @@ export class PageModel extends PanelModel implements IPage {
   }
   @property({ defaultValue: -1, onSet: (val: number, target: PageModel) => target.onNumChanged(val) }) num: number;
   /**
-   * Set this property to "hide" to make "Prev", "Next" and "Complete" buttons are invisible for this page. Set this property to "show" to make these buttons visible, even if survey showNavigationButtons property is false.
-   * @see SurveyMode.showNavigationButtons
+   * Obsolete. Use the [`showNavigationButtons`](https://surveyjs.io/form-library/documentation/api-reference/page-model#showNavigationButtons) property instead.
+   * @deprecated
    */
   public get navigationButtonsVisibility(): string {
-    return this.getPropertyValue("navigationButtonsVisibility");
+    const result = this.showNavigationButtons;
+    if (result === undefined || result === null) {
+      return "inherit";
+    }
+    return result ? "show" : "hide";
   }
   public set navigationButtonsVisibility(val: string) {
-    this.setPropertyValue("navigationButtonsVisibility", val.toLowerCase());
+    if (typeof val == "string") {
+      val = val.toLowerCase();
+    }
+    this.showNavigationButtons = val;
+  }
+  /**
+   * Gets or sets the visibility of the Start, Next, Previous, and Complete navigation buttons on this page. Overrides the [`showNavigationButtons`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showNavigationButtons) property specified on the survey-level.
+   *
+   * Default value: `undefined` (the visibility depends on the survey-level setting)
+   */
+  public get showNavigationButtons(): boolean | string {
+    return this.getPropertyValue("showNavigationButtons", undefined);
+  }
+  public set showNavigationButtons(val: boolean | string) {
+    this.setShowNavigationButtonsProperty(val);
+  }
+  public setShowNavigationButtonsProperty(val: boolean | string) {
+    if (val === true || val === false) {
+      this.setPropertyValue("showNavigationButtons", val);
+    } else if (val === "show") {
+      this.setPropertyValue("showNavigationButtons", true);
+    } else if (val === "hide") {
+      this.setPropertyValue("showNavigationButtons", false);
+    } else {
+      this.setPropertyValue("showNavigationButtons", undefined);
+    }
   }
   /**
    * Returns `true` if this is the current page.
@@ -382,9 +411,12 @@ Serializer.addClass(
   "page",
   [
     {
-      name: "navigationButtonsVisibility",
-      default: "inherit",
-      choices: ["inherit", "show", "hide"],
+      name: "showNavigationButtons:boolean",
+      defaultFunc: () => undefined,
+      onSetValue: function (obj: any, value: any) {
+        obj && obj.setShowNavigationButtonsProperty(value);
+      },
+      alternativeName: "navigationButtonsVisibility"
     },
     { name: "timeLimit:number", alternativeName: "maxTimeToFinish", default: 0, minValue: 0 },
     {

diff --git a/packages/survey-core/src/settings.ts b/packages/survey-core/src/settings.ts
@@ -660,11 +660,11 @@ export var settings = {
   animationEnabled: true,
 
   /**
-   * An object that specifies heading levels (`<h1>`, `<h2>`, etc.) to use when rendering survey, page, panel, and question titles.
+   * An object that specifies HTML tags to use when rendering survey, page, panel, and question titles.
    *
    * Default value: `{ survey: "h3", page: "h4", panel: "h4", question: "h5" }`
    *
-   * If you want to modify heading levels for individual titles, handle `SurveyModel`'s [`onGetTitleTagName`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onGetTitleTagName) event.
+   * If you want to modify HTML tags for individual titles, handle `SurveyModel`'s [`onGetTitleTagName`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onGetTitleTagName) event.
    */
   titleTags: {
     survey: "h3",

diff --git a/packages/survey-core/src/survey.ts b/packages/survey-core/src/survey.ts
@@ -407,11 +407,11 @@ export class SurveyModel extends SurveyElementCore
    */
   public onGetQuestionTitle: EventBase<SurveyModel, GetQuestionTitleEvent> = this.addEvent<SurveyModel, GetQuestionTitleEvent>();
   /**
-   * An event that is raised when the survey calculates heading levels (`<h1>`, `<h2>`, etc.) for a survey, page, panel, and question title. Handle this event to change the heading level of individual titles.
+   * An event that is raised when the survey applies HTML tags to a survey, page, panel, and question title. Handle this event to change the HTML tag of individual titles.
    *
    * For information on event handler parameters, refer to descriptions within the interface.
    *
-   * If you want to specify heading levels for all titles, use the [`titleTags`](https://surveyjs.io/form-library/documentation/api-reference/settings#titleTags) object in [global settings](https://surveyjs.io/form-library/documentation/api-reference/settings).
+   * If you want to specify HTML tags for all titles, use the [`titleTags`](https://surveyjs.io/form-library/documentation/api-reference/settings#titleTags) object in [global settings](https://surveyjs.io/form-library/documentation/api-reference/settings).
    *
    * [View Demo](https://surveyjs.io/form-library/examples/survey-titletagnames/ (linkStyle))
    * @see onGetQuestionTitle
@@ -1569,29 +1569,56 @@ export class SurveyModel extends SurveyElementCore
     this.autoFocusFirstError = val;
   }
   /**
-   * Gets or sets the position of the Start, Next, Previous, and Complete navigation buttons and controls their visibility.
+   * Gets or sets the visibility of the Start, Next, Previous, and Complete navigation buttons.
    *
    * Possible values:
    *
-   * - `"bottom"` (default) - Displays the navigation buttons below survey content.
-   * - `"top"` - Displays the navigation buttons above survey content.
-   * - `"both"` - Displays the navigation buttons above and below survey content.
-   * - `"none"` - Hides the navigation buttons. This setting may be useful if you [implement custom external navigation](https://surveyjs.io/form-library/examples/external-form-navigation-system/).
+   * - `true` (default) - Displays the navigation buttons.
+   * - `false` - Hides the navigation buttons. This setting may be useful if you [implement custom external navigation](https://surveyjs.io/form-library/examples/external-form-navigation-system/).
+   * @see navigationButtonsLocation
    * @see autoAdvanceEnabled
    * @see showPrevButton
    * @see showCompleteButton
    */
-  public get showNavigationButtons(): string | any {
+  public get showNavigationButtons(): boolean | any {
     return this.getPropertyValue("showNavigationButtons");
   }
-  public set showNavigationButtons(val: string | any) {
-    if (val === true || val === undefined) {
-      val = "bottom";
+  public set showNavigationButtons(val: boolean | any) {
+    // if (val === true || val === undefined) {
+    //   val = "bottom";
+    // }
+    // if (val === false) {
+    //   val = "none";
+    // }
+    if (val === "both") {
+      val === "topBottom";
     }
-    if (val === false) {
-      val = "none";
+    if (val === true || val === false) {
+      this.setPropertyValue("showNavigationButtons", val);
+    } else if (val === "none") {
+      this.setPropertyValue("showNavigationButtons", false);
+    } else if (["top", "bottom", "both", "topBottom"].indexOf(val) > -1) {
+      this.setPropertyValue("showNavigationButtons", true);
+      this.navigationButtonsLocation = val;
     }
-    this.setPropertyValue("showNavigationButtons", val);
+  }
+  /**
+   * Gets or sets the position of the Start, Next, Previous, and Complete navigation buttons. Applies only if the [`showNavigationButtons`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showNavigationButtons) property is `true`.
+   *
+   * Possible values:
+   *
+   * - `"bottom"` (default) - Displays the navigation buttons below survey content.
+   * - `"top"` - Displays the navigation buttons above survey content.
+   * - `"topBottom"` - Displays the navigation buttons above and below survey content.
+   * @see autoAdvanceEnabled
+   * @see showPrevButton
+   * @see showCompleteButton
+   */
+  public get navigationButtonsLocation(): string | any {
+    return this.getPropertyValue("navigationButtonsLocation");
+  }
+  public set navigationButtonsLocation(val: string | any) {
+    this.setPropertyValue("navigationButtonsLocation", val);
   }
   /**
    * Specifies whether to display the Previous button. Set this property to `false` if respondents should not move backward along the survey.
@@ -3899,13 +3926,13 @@ export class SurveyModel extends SurveyElementCore
     if (this.isDesignMode) return "none";
     var page = this.activePage;
     if (!page) return "none";
-    if (page.navigationButtonsVisibility === "show") {
-      return this.showNavigationButtons === "none" ? "bottom" : this.showNavigationButtons;
-    }
     if (page.navigationButtonsVisibility === "hide") {
       return "none";
     }
-    return this.showNavigationButtons;
+    if (page.navigationButtonsVisibility === "show") {
+      return !this.showNavigationButtons ? "bottom" : this.navigationButtonsLocation;
+    }
+    return !this.showNavigationButtons ? "none" : this.navigationButtonsLocation;
   }
   public get isNavigationButtonsShowingOnTop(): boolean {
     return this.getIsNavigationButtonsShowingOn("top");
@@ -3915,7 +3942,7 @@ export class SurveyModel extends SurveyElementCore
   }
   private getIsNavigationButtonsShowingOn(buttonPosition: string): boolean {
     var res = this.isNavigationButtonsShowing;
-    return res == "both" || res == buttonPosition;
+    return res == "both" || res == "topBottom" || res == buttonPosition;
   }
   public get isEditMode(): boolean {
     return this.mode == "edit";
@@ -8362,9 +8389,13 @@ Serializer.addClass("survey", [
   "cookieName",
   { name: "partialSendEnabled:boolean", alternativeName: "sendResultOnPageNext" },
   {
-    name: "showNavigationButtons",
+    name: "showNavigationButtons:boolean",
+    default: true,
+  },
+  {
+    name: "navigationButtonsLocation",
     default: "bottom",
-    choices: ["none", "top", "bottom", "both"],
+    choices: ["top", "bottom", "topBottom"],
   },
   {
     name: "showPrevButton:boolean",

diff --git a/packages/survey-core/tests/jsonSchemaTests.ts b/packages/survey-core/tests/jsonSchemaTests.ts
@@ -31,13 +31,23 @@ QUnit.test("generate survey schema", function (assert) {
   );
   assert.equal(
     schema.properties.showNavigationButtons.type,
-    "string",
-    "showNavigationButtons is showNavigationButtons"
+    "boolean",
+    "showNavigationButtons is boolean"
   );
   assert.deepEqual(
     schema.properties.showNavigationButtons.enum,
-    ["none", "top", "bottom", "both"],
-    "showNavigationButtons has enum"
+    undefined,
+    "showNavigationButtons doen't have enum"
+  );
+  assert.equal(
+    schema.properties.navigationButtonsLocation.type,
+    "string",
+    "navigationButtonsLocation is navigationButtonsLocation"
+  );
+  assert.deepEqual(
+    schema.properties.navigationButtonsLocation.enum,
+    ["top", "bottom", "topBottom"],
+    "navigationButtonsLocation has enum"
   );
   assert.deepEqual(
     schema.properties.completedHtmlOnCondition.type,

diff --git a/packages/survey-core/tests/lowercasetests.ts b/packages/survey-core/tests/lowercasetests.ts
@@ -30,8 +30,14 @@ QUnit.test("navigationButtonsVisibility value is always lower-case", function (
   assert
 ) {
   var question = new PageModel("base");
+  assert.strictEqual(question.navigationButtonsVisibility, "inherit");
+  assert.strictEqual(question.showNavigationButtons, undefined);
   question.navigationButtonsVisibility = "HIDE";
   assert.strictEqual(question.navigationButtonsVisibility, "hide");
+  assert.strictEqual(question.showNavigationButtons, false);
+  question.navigationButtonsVisibility = "Inherit";
+  assert.strictEqual(question.navigationButtonsVisibility, "inherit");
+  assert.strictEqual(question.showNavigationButtons, undefined);
 });
 
 QUnit.test(

diff --git a/packages/survey-core/tests/surveytests.ts b/packages/survey-core/tests/surveytests.ts
@@ -16064,7 +16064,8 @@ QUnit.test("firstPageIsStartPage = true and clear&state='starting'", function (a
   assert.equal(survey.state, "starting", "starting state #1");
   assert.equal(survey.getPropertyValue("isStartedState"), true, "isStartedState #1");
   assert.equal(startButton.isVisible, true, "startButton is visible, #1");
-  assert.equal(survey.showNavigationButtons, "bottom", "Show navigation on bottom");
+  assert.equal(survey.showNavigationButtons, true, "Show navigation on bottom - true");
+  assert.equal(survey.navigationButtonsLocation, "bottom", "Show navigation on bottom");
   survey.start();
   assert.equal(survey.state, "running", "run survey");
   assert.equal(survey.getPropertyValue("isStartedState"), false, "isStartedState #2");
@@ -17604,7 +17605,8 @@ QUnit.test("getContainerContent - navigation", function (assert) {
   let survey = new SurveyModel(json);
   const getContainerContent = getContainerContentFunction(survey);
 
-  assert.equal(survey.showNavigationButtons, "bottom");
+  assert.equal(survey.showNavigationButtons, true);
+  assert.equal(survey.navigationButtonsLocation, "bottom");
   assert.equal(survey.progressBarType, "pages");
   assert.equal(survey.showProgressBar, "off");
 
@@ -17727,7 +17729,7 @@ QUnit.test("getContainerContent - progress (legacyProgressBarView)", function (a
     let survey = new SurveyModel(json);
     const getContainerContent = getContainerContentFunction(survey);
 
-    assert.equal(survey.showNavigationButtons, "none");
+    assert.equal(survey.showNavigationButtons, false);
     assert.equal(survey.progressBarType, "pages");
     assert.equal(survey.showProgressBar, "off");
 
@@ -17883,7 +17885,7 @@ QUnit.test("getContainerContent - progress", function (assert) {
   let survey = new SurveyModel(json);
   const getContainerContent = getContainerContentFunction(survey);
 
-  assert.equal(survey.showNavigationButtons, "none");
+  assert.equal(survey.showNavigationButtons, false);
   assert.equal(survey.progressBarType, "pages");
   assert.equal(survey.showProgressBar, "off");
 
@@ -18573,7 +18575,8 @@ QUnit.test("getContainerContent - navigation with page.navigationButtonsVisibili
     return result;
   }
 
-  assert.equal(survey.showNavigationButtons, "bottom");
+  assert.equal(survey.showNavigationButtons, true);
+  assert.equal(survey.navigationButtonsLocation, "bottom");
 
   assert.deepEqual(getContainerContent("header"), [], "nav none header");
   assert.deepEqual(getContainerContent("footer"), [], "nav none footer");
@@ -19771,7 +19774,7 @@ QUnit.test("getContainerContent - progress + advanced header (legacyProgressBarV
     survey.headerView = "advanced";
     const getContainerContent = getContainerContentFunction(survey);
 
-    assert.equal(survey.showNavigationButtons, "none");
+    assert.equal(survey.showNavigationButtons, false);
     assert.equal(survey.progressBarType, "pages");
     assert.equal(survey.showProgressBar, "off");
 
@@ -19889,7 +19892,7 @@ QUnit.test("getContainerContent - progress + advanced header", function (assert)
   survey.headerView = "advanced";
   const getContainerContent = getContainerContentFunction(survey);
 
-  assert.equal(survey.showNavigationButtons, "none");
+  assert.equal(survey.showNavigationButtons, false);
   assert.equal(survey.progressBarType, "pages");
   assert.equal(survey.showProgressBar, "off");