Merge pull request #8271 from surveyjs/bug/8260-hide-nav-in-single-pa…

…ge-mode Fixed #8260 - Hide the progress bar if questionsOnPageMode: "singlePage"
surveyjs · May 14, 2024 · 62bee96 · 62bee96
2 parents 7f740cd + f994844
commit 62bee96
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 28 deletions.
diff --git a/src/survey.ts b/src/survey.ts
@@ -6556,7 +6556,7 @@ export class SurveyModel extends SurveyElementCore
  if (this.checkIsCurrentPageHasErrors(false)) return;
  const curPage = this.currentPage;
  const goNextPage = () => {
- if(curPage !== this.currentPage) return;
+ if (curPage !== this.currentPage) return;
  if (!this.isLastPage) {
  this.nextPage();
  } else {
@@ -7526,32 +7526,34 @@ export class SurveyModel extends SurveyElementCore
  }
  }
  } else if (this.state === "running" && isStrCiEqual(layoutElement.id, this.progressBarComponentName)) {
- const headerLayoutElement = this.findLayoutElement("advanced-header");
- const advHeader = headerLayoutElement && headerLayoutElement.data as Cover;
- let isBelowHeader = !advHeader || advHeader.hasBackground;
- if (isStrCiEqual(this.showProgressBar, "aboveHeader")) {
- isBelowHeader = false;
- }
- if (isStrCiEqual(this.showProgressBar, "belowHeader")) {
- isBelowHeader = true;
- }
- if (container === "header" && !isBelowHeader) {
- layoutElement.index = -150;
- if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
- containerLayoutElements.push(layoutElement);
+ if (this.questionsOnPageMode != "singlePage") {
+ const headerLayoutElement = this.findLayoutElement("advanced-header");
+ const advHeader = headerLayoutElement && headerLayoutElement.data as Cover;
+ let isBelowHeader = !advHeader || advHeader.hasBackground;
+ if (isStrCiEqual(this.showProgressBar, "aboveHeader")) {
+ isBelowHeader = false;
  }
- }
- if (container === "center" && isBelowHeader) {
- if (!!layoutElement.index) {
- delete layoutElement.index;
+ if (isStrCiEqual(this.showProgressBar, "belowHeader")) {
+ isBelowHeader = true;
  }
- if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
- containerLayoutElements.push(layoutElement);
+ if (container === "header" && !isBelowHeader) {
+ layoutElement.index = -150;
+ if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
+ containerLayoutElements.push(layoutElement);
+ }
  }
- }
- if (container === "footer") {
- if (this.isShowProgressBarOnBottom && !this.isShowStartingPage) {
- containerLayoutElements.push(layoutElement);
+ if (container === "center" && isBelowHeader) {
+ if (!!layoutElement.index) {
+ delete layoutElement.index;
+ }
+ if (this.isShowProgressBarOnTop && !this.isShowStartingPage) {
+ containerLayoutElements.push(layoutElement);
+ }
+ }
+ if (container === "footer") {
+ if (this.isShowProgressBarOnBottom && !this.isShowStartingPage) {
+ containerLayoutElements.push(layoutElement);
+ }
  }
  }
  } else if (isStrCiEqual(layoutElement.id, "buttons-navigation")) {

diff --git a/tests/surveytests.ts b/tests/surveytests.ts
@@ -19544,7 +19544,8 @@ QUnit.test("showPreview & updateProgress & updateVisibleIndexes", function (
  },
  {
  elements: [
- { type: "paneldynamic", name: "q2", panelCount: 10,
+ {
+ type: "paneldynamic", name: "q2", panelCount: 10,
  elements: [{ type: "text", name: "q3", visibleIf: "{q1} = 1" }]
  },
  { type: "text", name: "q4", visibleIf: "{q1} = 1" }
@@ -19556,10 +19557,10 @@ QUnit.test("showPreview & updateProgress & updateVisibleIndexes", function (
  let progressCounter = 0;
  let visibleChangedCounter = 0;
  survey.onProgressText.add((sender, options) => {
- progressCounter ++;
+ progressCounter++;
  });
  survey.onQuestionVisibleChanged.add((sender, options) => {
- visibleChangedCounter ++;
+ visibleChangedCounter++;
  });
  survey.showPreview();
  assert.equal(progressCounter, 1, "progressCounter");
@@ -19628,4 +19629,46 @@ QUnit.test("check panel's visibleRows are updated sync when running condidtions
  assert.equal(panel.visibleRows.length, 1);
  assert.equal(panel.visibleRows[0].visibleElements[0].name, "nps-score");
  settings.animationEnabled = false;
-});
+});
+
+QUnit.test("getContainerContent - do not show buttons progress in the single page mode", function (assert) {
+ const json = {
+ showNavigationButtons: "none",
+ showProgressBar: "auto",
+ pages: [
+ {
+ "elements": [
+ {
+ "type": "text",
+ "name": "q1",
+ },
+ ]
+ },
+ ]
+ };
+
+ let survey = new SurveyModel(json);
+ const getContainerContent = getContainerContentFunction(survey);
+
+ assert.equal(survey.questionsOnPageMode, "standard");
+ assert.deepEqual(getContainerContent("header"), [], "");
+ assert.deepEqual(getContainerContent("center"), [{
+ "component": "sv-progress-buttons",
+ "id": "progress-buttons"
+ }], "Progress is shown");
+ assert.deepEqual(getContainerContent("footer"), [], "");
+ assert.deepEqual(getContainerContent("contentTop"), [], "");
+ assert.deepEqual(getContainerContent("contentBottom"), [], "");
+ assert.deepEqual(getContainerContent("left"), [], "");
+ assert.deepEqual(getContainerContent("right"), [], "");
+
+ survey.questionsOnPageMode = "singlePage";
+
+ assert.deepEqual(getContainerContent("header"), [], "");
+ assert.deepEqual(getContainerContent("center"), [], "Buttons progress is not shown in the single page mode");
+ assert.deepEqual(getContainerContent("footer"), [], "");
+ assert.deepEqual(getContainerContent("contentTop"), [], "");
+ assert.deepEqual(getContainerContent("contentBottom"), [], "");
+ assert.deepEqual(getContainerContent("left"), [], "");
+ assert.deepEqual(getContainerContent("right"), [], "");
+});