Skip to content

Commit

Permalink
Split the showProgressBar property in two
Browse files Browse the repository at this point in the history 
Fixes #9302
  • Loading branch information
tsv2013 committed Jan 15, 2025
1 parent 46c8b36 commit 259b198
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 28 deletions.
73 changes: 55 additions & 18 deletions packages/survey-core/src/survey.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -452,6 +452,7 @@ export class SurveyModel extends SurveyElementCore
/**
* An event that is raised before the survey displays progress text. Handle this event to change the progress text in code.
* @see showProgressBar
* @see progressBarLocation
* @see progressBarType
*/
public onGetProgressText: EventBase<SurveyModel, GetProgressTextEvent> = this.addEvent<SurveyModel, GetProgressTextEvent>();
Expand Down Expand Up @@ -2922,6 +2923,31 @@ export class SurveyModel extends SurveyElementCore
/**
* Controls the visibility of the progress bar and specifies its position.
*
* [View Demo](https://surveyjs.io/form-library/examples/navigation-default/ (linkStyle))
* @see progressBarLocation
* @see progressBarType
* @see progressValue
*/
public get showProgressBar(): boolean {
return this.getPropertyValue("showProgressBar");
}
public set showProgressBar(newValue: boolean | string) {
this.setShowProgressBar(newValue);
}
protected setShowProgressBar(newValue: boolean | string) {
if (newValue === "off") {
newValue = false;
}
if (newValue === true || newValue === false) {
this.setPropertyValue("showProgressBar", newValue);
} else {
this.setPropertyValue("showProgressBar", true);
this.progressBarLocation = newValue;
}
}
/**
* Controls the location of the progress bar.
*
* Possible values:
*
* - `"off"` (default) - Hides the progress bar.
Expand All @@ -2934,14 +2960,15 @@ export class SurveyModel extends SurveyElementCore
* - `"both"` - *(Obsolete)* Use the `"topBottom"` property value instead.
*
* [View Demo](https://surveyjs.io/form-library/examples/navigation-default/ (linkStyle))
* @see showProgressBar
* @see progressBarType
* @see progressValue
*/
public get showProgressBar(): string {
return this.getPropertyValue("showProgressBar");
public get progressBarLocation(): string {
return this.getPropertyValue("progressBarLocation");
}
public set showProgressBar(newValue: string) {
this.setPropertyValue("showProgressBar", newValue.toLowerCase());
public set progressBarLocation(newValue: string) {
this.setPropertyValue("progressBarLocation", newValue.toLowerCase());
}
/**
* Specifies the type of information displayed by the progress bar. Applies only when [`showProgressBar`](#showProgressBar) is not `"off"`.
Expand Down Expand Up @@ -3014,12 +3041,14 @@ export class SurveyModel extends SurveyElementCore
*/
@property() progressBarInheritWidthFrom: "survey" | "container";
public get isShowProgressBarOnTop(): boolean {
if (!this.canShowProresBar()) return false;
return ["auto", "aboveheader", "belowheader", "topbottom", "top", "both"].indexOf(this.showProgressBar) !== -1;
if (!this.canShowProgressBar()) return false;
if (!this.showProgressBar) return false;
return ["auto", "aboveheader", "belowheader", "topbottom", "top", "both"].indexOf(this.progressBarLocation) !== -1;
}
public get isShowProgressBarOnBottom(): boolean {
if (!this.canShowProresBar()) return false;
return this.showProgressBar === "bottom" || this.showProgressBar === "both" || this.showProgressBar === "topbottom";
if (!this.canShowProgressBar()) return false;
if (!this.showProgressBar) return false;
return this.progressBarLocation === "bottom" || this.progressBarLocation === "both" || this.progressBarLocation === "topbottom";
}
public getProgressTypeComponent(): string {
return "sv-progress-" + this.progressBarType.toLowerCase();
Expand All @@ -3031,7 +3060,7 @@ export class SurveyModel extends SurveyElementCore
.append(this.css.progressBottom, this.isShowProgressBarOnBottom && (!container || container == "footer"))
.toString();
}
private canShowProresBar(): boolean {
private canShowProgressBar(): boolean {
return (
!this.isShowingPreview ||
!this.showPreviewBeforeComplete || this.previewMode != "allQuestions"
Expand Down Expand Up @@ -8133,10 +8162,10 @@ export class SurveyModel extends SurveyElementCore
const headerLayoutElement = this.findLayoutElement("advanced-header");
const advHeader = headerLayoutElement && headerLayoutElement.data as Cover;
let isBelowHeader = !advHeader || advHeader.hasBackground;
if (isStrCiEqual(this.showProgressBar, "aboveHeader")) {
if (isStrCiEqual(this.progressBarLocation, "aboveHeader")) {
isBelowHeader = false;
}
if (isStrCiEqual(this.showProgressBar, "belowHeader")) {
if (isStrCiEqual(this.progressBarLocation, "belowHeader")) {
isBelowHeader = true;
}
if (container === "header" && !isBelowHeader) {
Expand Down Expand Up @@ -8449,9 +8478,17 @@ Serializer.addClass("survey", [
},
{ name: "questionErrorLocation", default: "top", choices: ["top", "bottom"] },
{
name: "showProgressBar",
default: "off",
choices: ["off", "auto", "aboveheader", "belowheader", "bottom", "topbottom"],
name: "showProgressBar:boolean",
default: false,
onSetValue: (obj: any, value: any, jsonConv: any) => {
obj && obj.setShowProgressBar(value);
},

},
{
name: "progressBarLocation",
default: "auto",
choices: ["auto", "aboveheader", "belowheader", "bottom", "topbottom"],
},
{
name: "progressBarType",
Expand All @@ -8462,25 +8499,25 @@ Serializer.addClass("survey", [
"requiredQuestions",
"correctQuestions",
],
visibleIf: (obj: any) => { return obj.showProgressBar !== "off"; }
visibleIf: (obj: any) => { return obj.showProgressBar; }
},
{
name: "progressBarShowPageTitles:switch",
category: "navigation",
visibleIf: (obj: any) => { return obj.showProgressBar !== "off" && obj.progressBarType === "pages"; }
visibleIf: (obj: any) => { return obj.showProgressBar && obj.progressBarType === "pages"; }
},
{
name: "progressBarShowPageNumbers:switch",
default: false,
category: "navigation",
visibleIf: (obj: any) => { return obj.showProgressBar !== "off" && obj.progressBarType === "pages"; }
visibleIf: (obj: any) => { return obj.showProgressBar && obj.progressBarType === "pages"; }
},
{
name: "progressBarInheritWidthFrom",
default: "container",
choices: ["container", "survey"],
category: "navigation",
visibleIf: (obj: any) => { return obj.showProgressBar !== "off" && obj.progressBarType === "pages"; }
visibleIf: (obj: any) => { return obj.showProgressBar && obj.progressBarType === "pages"; }
},
{
name: "showTOC:switch",
Expand Down
9 changes: 5 additions & 4 deletions packages/survey-core/tests/lowercasetests.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,12 +112,13 @@ QUnit.test(
}
);

QUnit.test("SurveyModel showProgressBar value is always lower-case", function (
assert
) {
QUnit.test("SurveyModel showProgressBar value is always lower-case", function (assert) {
var survey = new SurveyModel();
assert.equal(survey.showProgressBar, false);
assert.strictEqual(survey.progressBarLocation, "auto");
assert.equal(survey.isShowProgressBarOnTop, false);
survey.showProgressBar = "TOP";
assert.strictEqual(survey.showProgressBar, "top");
assert.strictEqual(survey.progressBarLocation, "top");
assert.equal(survey.isShowProgressBarOnTop, true);
});

Expand Down
14 changes: 8 additions & 6 deletions packages/survey-core/tests/surveytests.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17608,7 +17608,7 @@ QUnit.test("getContainerContent - navigation", function (assert) {
assert.equal(survey.showNavigationButtons, true);
assert.equal(survey.navigationButtonsLocation, "bottom");
assert.equal(survey.progressBarType, "pages");
assert.equal(survey.showProgressBar, "off");
assert.equal(survey.showProgressBar, false);

assert.deepEqual(getContainerContent("header"), [], "default header");
assert.deepEqual(getContainerContent("footer"), [], "default footer");
Expand Down Expand Up @@ -17731,7 +17731,7 @@ QUnit.test("getContainerContent - progress (legacyProgressBarView)", function (a

assert.equal(survey.showNavigationButtons, false);
assert.equal(survey.progressBarType, "pages");
assert.equal(survey.showProgressBar, "off");
assert.equal(survey.showProgressBar, false);

assert.deepEqual(getContainerContent("header"), [], "default header");
assert.deepEqual(getContainerContent("footer"), [], "default footer");
Expand Down Expand Up @@ -17887,7 +17887,7 @@ QUnit.test("getContainerContent - progress", function (assert) {

assert.equal(survey.showNavigationButtons, false);
assert.equal(survey.progressBarType, "pages");
assert.equal(survey.showProgressBar, "off");
assert.equal(survey.showProgressBar, false);

assert.deepEqual(getContainerContent("header"), [], "default header");
assert.deepEqual(getContainerContent("footer"), [], "default footer");
Expand Down Expand Up @@ -19795,7 +19795,7 @@ QUnit.test("getContainerContent - progress + advanced header (legacyProgressBarV

assert.equal(survey.showNavigationButtons, false);
assert.equal(survey.progressBarType, "pages");
assert.equal(survey.showProgressBar, "off");
assert.equal(survey.showProgressBar, false);

assert.deepEqual(getContainerContent("header"), [{
"component": "sv-header",
Expand Down Expand Up @@ -19913,7 +19913,7 @@ QUnit.test("getContainerContent - progress + advanced header", function (assert)

assert.equal(survey.showNavigationButtons, false);
assert.equal(survey.progressBarType, "pages");
assert.equal(survey.showProgressBar, "off");
assert.equal(survey.showProgressBar, false);

assert.deepEqual(getContainerContent("header"), [{
"component": "sv-header",
Expand Down Expand Up @@ -20148,7 +20148,7 @@ QUnit.test("getContainerContent - progress settings", function (assert) {
const getContainerContent = getContainerContentFunction(survey);

assert.equal(settings.legacyProgressBarView, false, "show buttons progress for pages by default");
assert.equal(survey.showProgressBar, "off", "default show progress bar");
assert.equal(survey.showProgressBar, false, "default show progress bar");
assert.equal(survey.progressBarType, "pages", "default progress bar type");
assert.equal(survey.progressBarShowPageNumbers, false, "don't show page numbers in progress by default");
assert.equal(survey.progressBarShowPageTitles, false, "don't show page titles in progress by default");
Expand Down Expand Up @@ -20649,6 +20649,8 @@ QUnit.test("getContainerContent - do not show buttons progress in the single pag

assert.equal(survey.progressBarType, "pages");
assert.equal(survey.questionsOnPageMode, "standard");
assert.equal(survey.showProgressBar, true);
assert.equal(survey.progressBarLocation, "auto");
assert.deepEqual(getContainerContent("header"), [], "");
assert.deepEqual(getContainerContent("center"), [{
"component": "sv-progress-buttons",
Expand Down

0 comments on commit 259b198

Please sign in to comment.