Merge pull request #7404 from surveyjs/bug/PT342-progress-above-header

Fixed surveyjs/private-tasks#342 - Progress bar should always be under the header
surveyjs · Nov 23, 2023 · c36c4c1 · c36c4c1
2 parents 55d544f + 9a87bd2
commit c36c4c1
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 19 deletions.
diff --git 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
@@ -1193,21 +1193,26 @@ 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");
       }
     }
   }) 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
@@ -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) {