Implemented #7053 - Use a height property of cover like min-height

surveyjs · Oct 20, 2023 · 08819bf · 08819bf
1 parent 95ecc0f
commit 08819bf
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 3 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;
+  processResponsiveness?: (width: number) => void;
 }
 export interface IPlainDataOptions {
   includeEmpty?: boolean;

diff --git a/src/header.ts b/src/header.ts
@@ -121,6 +121,7 @@ export class Cover extends Base {
   }
 
   public cells: CoverCell[] = [];
+  @property({ defaultValue: 0 }) public actualHeight: number;
   @property() public height: number;
   @property() public inheritWidthFrom: "survey" | "container";
   @property() public textAreaWidth: number;
@@ -150,7 +151,7 @@ export class Cover extends Base {
   @property() backgroundImageClasses: string;
 
   public get renderedHeight(): string {
-    return this.height && (this.survey && !this.survey.isMobile || !this.survey) ? this.height + "px" : undefined;
+    return this.height && (this.survey && !this.survey.isMobile || !this.survey) ? Math.max(this.height, this.actualHeight + 40) + "px" : undefined;
   }
   public get renderedtextAreaWidth(): string {
     return this.textAreaWidth ? this.textAreaWidth + "px" : undefined;
@@ -192,6 +193,37 @@ export class Cover extends Base {
       this.updateBackgroundImageClasses();
     }
   }
+
+  public calculateActualHeight(logoHeight: number, titleHeight: number, descriptionHeight: number): number {
+    const positionsY = ["top", "middle", "bottom"];
+    const logoIndex = positionsY.indexOf(this.logoPositionY);
+    const titleIndex = positionsY.indexOf(this.titlePositionY);
+    const descriptionIndex = positionsY.indexOf(this.descriptionPositionY);
+    const positionsX = ["left", "center", "right"];
+    const logoIndexX = positionsX.indexOf(this.logoPositionX);
+    const titleIndexX = positionsX.indexOf(this.titlePositionX);
+    const descriptionIndexX = positionsX.indexOf(this.descriptionPositionX);
+    const heights = [
+      [0, 0, 0],
+      [0, 0, 0],
+      [0, 0, 0]
+    ];
+    heights[logoIndex][logoIndexX] = logoHeight;
+    heights[titleIndex][titleIndexX] += titleHeight;
+    heights[descriptionIndex][descriptionIndexX] += descriptionHeight;
+    return heights.reduce((total, rowArr) => total + Math.max(...rowArr), 0);
+  }
+  public processResponsiveness(width: number): void {
+    if (this.survey && this.survey.rootElement) {
+      const logoEl = this.survey.rootElement.querySelectorAll(".sv-header__logo")[0];
+      const titleEl = this.survey.rootElement.querySelectorAll(".sv-header__title")[0];
+      const descriptionEl = this.survey.rootElement.querySelectorAll(".sv-header__description")[0];
+      const logoHeight = logoEl ? logoEl.getBoundingClientRect().height : 0;
+      const titleHeight = titleEl ? titleEl.getBoundingClientRect().height : 0;
+      const descriptionHeight = descriptionEl ? descriptionEl.getBoundingClientRect().height : 0;
+      this.actualHeight = this.calculateActualHeight(logoHeight, titleHeight, descriptionHeight);
+    }
+  }
 }
 
 Serializer.addClass(

diff --git a/src/survey.ts b/src/survey.ts
@@ -1196,7 +1196,8 @@ export class SurveyModel extends SurveyElementCore
             id: "cover",
             container: "header",
             component: "sv-header",
-            data: cover
+            data: cover,
+            processResponsiveness: width => cover.processResponsiveness(width)
           });
         }
       } else {
@@ -4620,6 +4621,7 @@ export class SurveyModel extends SurveyElementCore
   }
   private processResponsiveness(width: number, mobileWidth: number): boolean {
     const isMobile = width < mobileWidth;
+    this.layoutElements.forEach(layoutElement => layoutElement.processResponsiveness && layoutElement.processResponsiveness(width));
     if (this.isMobile === isMobile) {
       return false;
     } else {
@@ -7365,7 +7367,8 @@ export class SurveyModel extends SurveyElementCore
           id: "cover",
           container: "header",
           component: "sv-header",
-          data: newCoverModel
+          data: newCoverModel,
+          processResponsiveness: width => newCoverModel.processResponsiveness(width)
         });
       }
       if (key === "isPanelless") {

diff --git a/tests/headerTests.ts b/tests/headerTests.ts
@@ -226,4 +226,37 @@ QUnit.test("cell calculations - test width",
     assert.equal(cover.textAreaWidth, 120, "cover text width");
     assert.equal(cover.cells[0].textAreaWidth, "120px", "cell text width");
   }
+);
+
+QUnit.test("calculateActualHeight",
+  function (assert) {
+    const cover = new Cover();
+
+    cover.logoPositionX = "left";
+    cover.logoPositionY = "middle";
+    cover.titlePositionX = "right";
+    cover.titlePositionY = "middle";
+    cover.descriptionPositionX = "right";
+    cover.descriptionPositionY = "middle";
+
+    let logoHeight = 201;
+    let titleHeight = 22;
+    let descriptionHeight = 303;
+
+    let actualHeight = cover.calculateActualHeight(logoHeight, titleHeight, descriptionHeight);
+    assert.equal(actualHeight, titleHeight + descriptionHeight);
+    cover.actualHeight = actualHeight;
+    assert.equal(cover.renderedHeight, "365px", "title + description + 40");
+
+    actualHeight = cover.calculateActualHeight(logoHeight, titleHeight, 0);
+    assert.equal(actualHeight, logoHeight);
+    cover.actualHeight = actualHeight;
+    assert.equal(cover.renderedHeight, "256px", "default height");
+
+    logoHeight = 271;
+    actualHeight = cover.calculateActualHeight(logoHeight, titleHeight, 0);
+    assert.equal(actualHeight, logoHeight);
+    cover.actualHeight = actualHeight;
+    assert.equal(cover.renderedHeight, "311px", "logo + 40");
+  }
 );