[#308] Fixed Layout masonry is not applied when nested Layout is used.

components/00-base/layout/layout.js

@@ -4,7 +4,7 @@
  */
 function CivicThemeLayout(el) {
   this.el = el;
-  this.grid = el.querySelector('.ct-layout__inner');
+  this.grid = el.querySelector(':scope > .ct-layout__inner');
   const gridStyle = getComputedStyle(this.grid);
 
   if (gridStyle.gridTemplateRows === 'masonry' || this.grid.hasAttribute('data-masonry')) {
@@ -13,15 +13,16 @@
 
   this.grid.setAttribute('data-masonry', true);
 
-  this.stl = this.grid.querySelector('.ct-layout__sidebar_top_left');
-  this.str = this.grid.querySelector('.ct-layout__sidebar_top_right');
-  this.sbl = this.grid.querySelector('.ct-layout__sidebar_bottom_left');
-  this.sbr = this.grid.querySelector('.ct-layout__sidebar_bottom_right');
+  this.stl = this.grid.querySelector(':scope > .ct-layout__sidebar_top_left');
+  this.str = this.grid.querySelector(':scope > .ct-layout__sidebar_top_right');
+  this.sbl = this.grid.querySelector(':scope > .ct-layout__sidebar_bottom_left');
+  this.sbr = this.grid.querySelector(':scope > .ct-layout__sidebar_bottom_right');
 
   // Only enable masonry if all 4 elements are present.
   if (this.stl && this.str && this.sbl && this.sbr) {
     // Prepare redraw variables.
     this.gap = parseFloat(gridStyle.gridRowGap);
+    // Items include all children of the grid, not just the 4 sidebar regions.
     this.items = Array.from(this.grid.children);
     this.height = 0;
 
@@ -31,7 +32,17 @@
         this.masonryRedraw();
       });
     });
-    this.resizeObserver.observe(this.grid);
+
+    // Observe all children of the grid items rather than the items themselves:
+    // this allows us to detect changes in the height of the children rather
+    // tnan of the grid items as their height will not change when children
+    // combined heights is less than a single grid row height.
+    this.items.forEach((item) => {
+      Array.from(item.children).forEach((child) => {
+        this.resizeObserver.observe(child);
+      });
+    });
+
     this.masonryRedraw();
   }
 }
@@ -51,9 +62,20 @@
  * Reposition grid elements.
  */
 CivicThemeLayout.prototype.masonryRedraw = function () {
-  // Ignore redraw if grid items total height hasn't changed since last redraw.
-  const newHeight = this.items.reduce((t, el) => t + el.getBoundingClientRect().height, 0);
+  // Calculate the new height of all children.
+  //
+  // Although masonry layout is applied only if the element has the
+  // CSS variable --js-masonry-enabled set and we could have check for this
+  // variable to preserve height reclaulation, this variable can be assigned
+  // within a specific media query. Therefore, we need to calculate the height
+  // in case --js-masonry-enabled is assigned to the element after the viewport
+  // has been resized.
+  const newHeight = this.items.reduce((totalHeight, item) => {
+    const childrenHeight = Array.from(item.children).reduce((childTotal, child) => childTotal + child.getBoundingClientRect().height, 0);
+    return totalHeight + childrenHeight;
+  }, 0);
 
+  // Proceed only if the height has changed.
   if (newHeight !== this.height) {
     this.height = newHeight;
 
@@ -69,7 +91,6 @@
   }
 };
 
-// Initialize CivicThemeLayout on every element.
 document.querySelectorAll('.ct-layout').forEach((layout) => {
   // eslint-disable-next-line no-new
   new CivicThemeLayout(layout);

components/00-base/layout/layout.stories.js

@@ -21,29 +21,24 @@ export const Layout = (parentKnobs = {}) => {
     sidebar_bottom_right: knobBoolean('Show bottom right sidebar', true, parentKnobs.sidebar_bottom_right, parentKnobs.knobTab) ? placeholder('Bottom right sidebar', useLargePlaceholders ? randomInt(30, 100) : 0) : '',
     hide_sidebar_right: knobBoolean('Hide right sidebar', false, parentKnobs.hide_sidebar_right, parentKnobs.knobTab),
     is_contained: knobBoolean('Is contained', false, parentKnobs.is_contained, parentKnobs.knobTab),
-    vertical_spacing: knobRadios(
-      'Vertical spacing',
-      {
-        None: 'none',
-        Top: 'top',
-        Bottom: 'bottom',
-        Both: 'both',
-      },
-      'none',
-      parentKnobs.vertical_spacing,
-      parentKnobs.knobTab,
-    ),
   };
 
   const showNested = knobBoolean('Show nested layout', false, parentKnobs.show_nested_layout, parentKnobs.knobTab);
 
-  knobs.content = showNested ? CivicThemeLayout({
+  // Show nested only if parent content is shown.
+  knobs.content = knobs.content && showNested ? CivicThemeLayout({
     ...{
-      sidebar_top_left: placeholder('Nested top left sidebar', useLargePlaceholders ? randomInt(30, 100) : 0),
-      sidebar_bottom_left: placeholder('Nested bottom left sidebar', useLargePlaceholders ? randomInt(30, 100) : 0),
-      content: placeholder('Nested content', useLargePlaceholders ? randomInt(500, 1000) : 0),
-      sidebar_top_right: placeholder('Nested top right sidebar', useLargePlaceholders ? randomInt(30, 100) : 0),
-      sidebar_bottom_right: placeholder('Nested bottom right sidebar', useLargePlaceholders ? randomInt(30, 100) : 0),
+      sidebar_top_left: knobBoolean('Show nested top left sidebar', true, parentKnobs.nested_sidebar_top_left, parentKnobs.knobTab) ? placeholder('Nested top left sidebar', useLargePlaceholders ? randomInt(30, 100) : 0) : '',
+      sidebar_top_left_attributes: 'data-story-nested-layout',
+      sidebar_bottom_left: knobBoolean('Show nested bottom left sidebar', true, parentKnobs.nested_sidebar_bottom_left, parentKnobs.knobTab) ? placeholder('Nested bottom left sidebar', useLargePlaceholders ? randomInt(30, 100) : 0) : '',
+      sidebar_bottom_left_attributes: 'data-story-nested-layout',
+      content: knobBoolean('Show nested content', true, parentKnobs.nested_content, parentKnobs.knobTab) ? placeholder('Nested content', useLargePlaceholders ? randomInt(500, 1000) : 0) : '',
+      content_attributes: 'data-story-nested-layout',
+      sidebar_top_right: knobBoolean('Show nested top right sidebar', true, parentKnobs.nested_sidebar_top_right, parentKnobs.knobTab) ? placeholder('Nested top right sidebar', useLargePlaceholders ? randomInt(30, 100) : 0) : '',
+      sidebar_top_right_attributes: 'data-story-nested-layout',
+      sidebar_bottom_right: knobBoolean('Show nested bottom right sidebar', true, parentKnobs.nested_sidebar_bottom_right, parentKnobs.knobTab) ? placeholder('Nested bottom right sidebar', useLargePlaceholders ? randomInt(30, 100) : 0) : '',
+      sidebar_bottom_right_attributes: 'data-story-nested-layout',
+      attributes: 'data-story-nested-layout',
     },
     ...slotKnobs([
       'content_top',
@@ -53,6 +48,19 @@ export const Layout = (parentKnobs = {}) => {
 
   const showOutlines = knobBoolean('Show outlines', false, parentKnobs.show_outlines, parentKnobs.knobTab);
 
+  knobs.vertical_spacing = knobRadios(
+    'Vertical spacing',
+    {
+      None: 'none',
+      Top: 'top',
+      Bottom: 'bottom',
+      Both: 'both',
+    },
+    'none',
+    parentKnobs.vertical_spacing,
+    parentKnobs.knobTab,
+  );
+
   const attributesTab = 'Attributes';
   knobs.sidebar_top_left_attributes = knobs.sidebar_top_left ? knobText('Top left sidebar attributes', '', parentKnobs.sidebar_top_left_attributes, attributesTab) : '';
   knobs.sidebar_bottom_left_attributes = knobs.sidebar_bottom_left ? knobText('Bottom left sidebar attributes', '', parentKnobs.sidebar_bottom_left_attributes, attributesTab) : '';

components/00-base/layout/layout.stories.scss

@@ -2,6 +2,21 @@
 // Layout component stories.
 //
 
+@use 'sass:color';
+
+// Nested layout.
+.ct-layout {
+  .ct-layout {
+    .story-placeholder {
+      $_color: #6b5394;
+
+      background-color: color.adjust($_color, $alpha: -0.7);
+      border: dashed 1px color.adjust($_color, $alpha: -0.3);
+      color: color.adjust($_color, $lightness: -30%);
+    }
+  }
+}
+
 .story-layout-outlines {
   $_viewport-color: blue;
   $_layout-color: green;

components/00-base/storybook/storybook.generators.utils.js

@@ -10,7 +10,7 @@ export const themes = () => ({
   dark: 'Dark',
 });
 
-export const placeholder = (content = 'Content placeholder', words = 0, cssClass = 'story-placeholder') => `<div class="${cssClass}">${content}${words > 0 ? ` ${randomSentence(words)}` : ''}</div>`;
+export const placeholder = (content = 'Content placeholder', words = 0, cssClass = 'story-placeholder') => `<div class="${cssClass}" contenteditable="true">${content}${words > 0 ? ` ${randomSentence(words)}` : ''}</div>`;
 
 export const code = (content) => `<code>${content}</code>`;
 

components/00-base/storybook/storybook.generators.utils.test.js

@@ -15,17 +15,17 @@ describe('Domain-Specific Generators', () => {
   describe('placeholder', () => {
     it('returns placeholder with default parameters', () => {
       expect(placeholder())
-        .toBe('<div class="story-placeholder">Content placeholder</div>');
+        .toBe('<div class="story-placeholder" contenteditable="true">Content placeholder</div>');
     });
 
     it('returns placeholder with custom content and class', () => {
       expect(placeholder('Custom content', 0, 'custom-class'))
-        .toBe('<div class="custom-class">Custom content</div>');
+        .toBe('<div class="custom-class" contenteditable="true">Custom content</div>');
     });
 
     it('returns placeholder with random sentence', () => {
       const result = placeholder('Custom content', 5);
-      expect(result.startsWith('<div class="story-placeholder">Custom content '))
+      expect(result.startsWith('<div class="story-placeholder" contenteditable="true">Custom content '))
         .toBe(true);
     });
   });