diff --git a/src/base-interfaces.ts b/src/base-interfaces.ts index a36f5d7e3f..0801378cd5 100644 --- a/src/base-interfaces.ts +++ b/src/base-interfaces.ts @@ -375,6 +375,7 @@ export interface ISurveyLayoutElement { component?: string; template?: string; data?: any; + index?: number; processResponsiveness?: (width: number) => void; } export interface IPlainDataOptions { diff --git a/src/survey.ts b/src/survey.ts index 835b964b1e..42ebb92964 100644 --- a/src/survey.ts +++ b/src/survey.ts @@ -1193,14 +1193,7 @@ export class SurveyModel extends SurveyElementCore advHeader.titlePositionY = "middle"; advHeader.descriptionPositionX = target.logoPosition === "right" ? "left" : "right"; advHeader.descriptionPositionY = "middle"; - advHeader.survey = target; - target.layoutElements.unshift({ - id: "advanced-header", - container: "header", - component: "sv-header", - data: advHeader, - processResponsiveness: width => advHeader.processResponsiveness(width) - }); + target.insertAdvancedHeader(advHeader); } } else { target.removeLayoutElement("advanced-header"); @@ -1208,6 +1201,18 @@ export class SurveyModel extends SurveyElementCore } }) headerView: "advanced" | "basic"; + protected insertAdvancedHeader(advHeader: Cover): void { + advHeader.survey = this; + this.layoutElements.push({ + id: "advanced-header", + container: "header", + component: "sv-header", + index: -100, + data: advHeader, + processResponsiveness: width => advHeader.processResponsiveness(width) + }); + } + private getNavigationCss(main: string, btn: string) { return new CssClassBuilder().append(main) .append(btn).toString(); @@ -7361,6 +7366,7 @@ export class SurveyModel extends SurveyElementCore } } } + containerLayoutElements.sort((a, b) => (a.index || 0) - (b.index || 0)); return containerLayoutElements; } public processPopupVisiblityChanged(question: Question, popup: PopupModel<any>, visible: boolean): void { @@ -7381,13 +7387,8 @@ export class SurveyModel extends SurveyElementCore this.removeLayoutElement("advanced-header"); const advHeader = new Cover(); advHeader.fromTheme(theme); - this.layoutElements.push({ - id: "advanced-header", - container: "header", - component: "sv-header", - data: advHeader, - processResponsiveness: width => advHeader.processResponsiveness(width) - }); + this.insertAdvancedHeader(advHeader); + this.headerView = "advanced"; } if (key === "isPanelless") { this.isCompact = theme[key]; diff --git a/tests/surveytests.ts b/tests/surveytests.ts index a8b4707c65..baa94ff23c 100644 --- a/tests/surveytests.ts +++ b/tests/surveytests.ts @@ -17250,7 +17250,8 @@ QUnit.test("getContainerContent - do not advanced header on completed page", fun assert.deepEqual(getContainerContent("header"), [{ "component": "sv-header", "container": "header", - "id": "advanced-header" + "id": "advanced-header", + "index": -100 }], "header for running survey"); assert.deepEqual(getContainerContent("footer"), [], ""); assert.deepEqual(getContainerContent("contentTop"), [], ""); @@ -17458,7 +17459,6 @@ QUnit.test("Use variables as default values in expression", function (assert) { title: "myA = {myA}", defaultValueExpression: "{myA}", }, - { type: "text", name: "q3", @@ -17573,6 +17573,60 @@ QUnit.test("getContainerContent - navigation with page.navigationButtonsVisibili assert.deepEqual(getContainerContent("right"), [], "default right"); }); +QUnit.test("getContainerContent - header elements order", function (assert) { + function getContainerContent(container: LayoutElementContainer) { + let result = survey.getContainerContent(container); + result.forEach(item => { + delete item["processResponsiveness"]; + delete item["data"]; + }); + return result; + } + + const json = { + pages: [ + { + "elements": [ + { + "type": "rating", + "name": "satisfaction", + }, + ] + }, + { + "elements": [ + { + "type": "radiogroup", + "name": "price to competitors", + }, + ] + }, + ] + }; + + let survey = new SurveyModel(json); + survey.addLayoutElement({ + id: "custom", + container: "header", + component: "sv-custom", + }); + survey.applyTheme({ header: {} } as any); + + assert.deepEqual(getContainerContent("header"), [ + { + "component": "sv-header", + "container": "header", + "id": "advanced-header", + "index": -100 + }, + { + "component": "sv-custom", + "container": "header", + "id": "custom" + } + ], "advanved header first, progress next"); +}); + QUnit.test("check title classes when readOnly changed", function (assert) { const survey = new SurveyModel({ elements: [{ @@ -18113,7 +18167,7 @@ QUnit.test("survey.toJSON() doesn't work correctly if questionsOnPageMode=single assert.equal(surveyJson.pages[0].elements.length, 3, "surveyJson elements count"); assert.equal(prepareJSON.pages[0].elements.length, 3, "prepareJSON elements count"); - assert.deepEqual (surveyJson, prepareJSON); + assert.deepEqual(surveyJson, prepareJSON); }); QUnit.test("survey.toJSON() doesn't work correctly if questionsOnPageMode=questionPerPage is used #7359, #2", function (assert) { const surveyJson = { @@ -18148,7 +18202,7 @@ QUnit.test("survey.toJSON() doesn't work correctly if questionsOnPageMode=questi assert.equal(surveyJson.pages[0].elements.length, 3, "surveyJson elements count"); assert.equal(prepareJSON.pages[0].elements.length, 3, "prepareJSON elements count"); - assert.deepEqual (surveyJson, prepareJSON); + assert.deepEqual(surveyJson, prepareJSON); }); QUnit.test("Bug on loading json with collapsed panel. It was fixed in v1.9.117, #7355", function (assert) {