https://www.paxlovid.com/lib/blocks/content-container/content-container.js

1import { FranklinBlock, blockColorThemeStructure, blockColorThemeBlockIsActive } from '../../scripts/lib-franklin.js';
2
3export default class ContentContainer extends FranklinBlock {
4  variants = [
5    { name: 'grid', test: this.block.classList.contains('grid') },
6    { name: 'grid-3', test: this.block.classList.contains('grid-3') },
7  ];
8
9  hasFullTextBlockVariants = ['one-by-three', 'three-by-one'];
10
11  beforeBlockRender() {
12    const { textBlock, contentBlocks, disclaimer, collectionTitle } = this.config;
13
14
15    const textTemplate = document.createElement('template');
16    textTemplate.innerHTML = textBlock;
17
18    // When no core-text intro block is authored, flag the block so the grid/column
19    // wrapper can drop its top margin (which only exists to separate it from the intro).
20    const hasIntroTextBlock = !!textTemplate.content.textContent.trim();
21    if (!hasIntroTextBlock) {
22      this.block.classList.add('no-intro-textblock');
23    }
24
25    const noRulerVariants = ['one-by-three', 'three-by-one', 'grid-3'];
26    const showDivider = [...(this.block?.classList ?? [])].every((className) => !noRulerVariants.includes(className));
27
28    this.inputData = {
29      [this.variant]: {},
30      textblock: textTemplate.innerHTML,
31      contentBlocks,
32      disclaimer,
33      showDivider,
34      collectionTitle,
35    };
36
37    if (showDivider) {
38      this.block.classList.add('has-divider');
39    }
40
41    if (this.block.classList.contains('one-by-three') || this.block.classList.contains('three-by-one')) {
42      delete this.inputData.textblock;
43      delete this.inputData.disclaimer;
44    }
45  }
46
47  /**
48   * Function to construct and target the proper DOM elements based on variant for color theming
49   */
50  afterBlockRenderColorTheming() {
51    const parentCollectionSection = this.block?.parentElement;
52    const parentThemeAttr = Array.from(parentCollectionSection?.attributes || []).find((attr) => attr.name.includes('data-collection-color-theme'));
53    if (!parentThemeAttr) return;
54
55    // content blocks 1-6
56    const themeOneCoreTintedClasses = ['color-theme-1-core-tinted'];
57    const hasThemeOneCoreTinted = themeOneCoreTintedClasses.includes(parentThemeAttr?.value);
58
59    const collectionBlockConfiguration = {
60      // theme 1
61      'color-theme-1-white': {
62        isDefaultVariant: true,
63        colorThemeCollection: 'data-color-theme-one',
64        colorModeValue: 'white',

65        // domTargets: not needed for collections since appled the data attr to inherit
66        collectionWrappers: [{ target: ':scope > .core-content-container', classToAdd: 'surface' }],
67      },
68      'color-theme-1-core-tinted': {
69        isMatch: hasThemeOneCoreTinted,
70        colorThemeCollection: 'data-color-theme-one',
71        colorModeValue: 'core-tinted',
72        // domTargets: not needed for collections since appled the data attr to inherit
73        collectionWrappers: [{ target: ':scope > .core-content-container', classToAdd: 'surface' }],
74      },
75    };
76
77    blockColorThemeStructure(this.block, collectionBlockConfiguration, true);
78  }
79
80  // eslint-disable-next-line class-methods-use-this
81  afterBlockRender = () => {
82    // global standard rules for block padding
83    this.block.classList.add('block-padding-standard');
84
85    if (this.block.classList.contains('2-column')) {
86      const contentBlocks = this.block.querySelectorAll('.core-content');
87      contentBlocks.forEach((block) => block.classList.add('column-2'));
88    }
89
90    this.block.querySelectorAll('.core-content').forEach((block) => {
91      block.classList.add('embedded-content');
92    });
93
94    const bottomDisclaimerVariants = ['grid-3', '2-column'];
95
96    const isBottomDisclaimerVariant = [...(this.block?.classList ?? [])].some((className) => bottomDisclaimerVariants.includes(className));
97
98    // grid wrapper classes
99
100    const gridWrapper = this.block.querySelector('.core-content-container-grid-wrapper, .core-content-container-column-wrapper');
101    if (gridWrapper && isBottomDisclaimerVariant) {
102      gridWrapper.classList.add('bottom-disclaimer');
103    }
104
105    if (this.block.classList.contains('2-column')) {
106      if (gridWrapper) {
107        gridWrapper.classList.add('column-2');
108      }
109    }
110
111    if (!this.block.classList.contains('grid-3') && !this.block.classList.contains('2-column') && this.block.classList.contains('grid')) {
112      if (gridWrapper) {
113        gridWrapper.classList.add('grid-2');
114      }
115    }
116
117    if (this.block.classList.contains('grid-3')) {
118      if (gridWrapper) {
119        gridWrapper.classList.add('grid-3');
120      }
121      const contentBlocks = this.block.querySelectorAll('.core-content');
122      contentBlocks.forEach((block) => {
123        block.classList.add('center');
124        block.classList.add('reset-last-margin');
125      });
126    }
127
128    if (gridWrapper && this.block.querySelector('.core-content.icon-list')) {
129      gridWrapper.classList.add('icon-list-grid');
130      const tiles = [...gridWrapper.querySelectorAll('.core-content-wrapper')];
131      const total = tiles.length;
132      const isLeftHeavy = this.block.classList.contains('left-heavy');
133      const leftCount = isLeftHeavy ? Math.min(3, total - 1) : Math.max(1, total - 3);
134      let leftRow = 1;
135      let rightRow = 1;
136      tiles.forEach((tile, i) => {
137        if (i < leftCount) {
138          tile.style.gridColumn = '1';
139          tile.style.gridRow = String(leftRow);
140          leftRow += 1;
141        } else {
142          tile.style.gridColumn = '2';
143          tile.style.gridRow = String(rightRow);
144          rightRow += 1;
145        }
146      });
147    }
148
149    if (blockColorThemeBlockIsActive(this.block)) this.afterBlockRenderColorTheming();
150  };
151}