https://www.zavzpret.com/lib/blocks/hero-custom-placeholder-container/hero-custom-placeholder-container.js

1import { FranklinBlock, blockColorThemeStructure, blockColorThemeBlockIsActive } from '../../scripts/lib-franklin.js';
2
3export default class HeroCustomPlaceholderContainer extends FranklinBlock {
4  beforeBlockRenderColorThemingChildren(inputData) {
5    if (!blockColorThemeBlockIsActive(this.block)) return inputData;
6
7    // theming child blocks before rendering
8    const { hero, placeholderSlot } = inputData;
9
10    const heroTemplate = document.createElement('template');
11    heroTemplate.innerHTML = hero ?? '';
12
13    const colorTheme = this.block.dataset.collectionColorTheme;
14
15    if (hero && colorTheme) {
16      // Add color theme to hero block
17      heroTemplate.content.querySelector('.core-hero')?.classList.add(colorTheme);
18    }
19
20    return {
21      ...inputData,
22      hero: heroTemplate.innerHTML,
23      placeholderSlot,
24    };
25  }
26
27  async beforeBlockRender() {
28    // Check if parent container has color theme and inherit it BEFORE any color theming checks
29    const parentSection = this.block.closest('.section[data-collection-color-theme]');
30    const parentColorTheme = parentSection?.dataset?.collectionColorTheme;
31    if (parentColorTheme) {
32      // Set both the data attribute AND the class to satisfy blockColorThemeBlockIsActive checks
33      if (!this.block.dataset.collectionColorTheme) {
34        this.block.setAttribute('data-collection-color-theme', parentColorTheme);
35      }
36      // Add the color theme class if not already present
37      if (!this.block.classList.contains(parentColorTheme)) {
38        this.block.classList.add(parentColorTheme);
39      }
40    }
41
42    let { hero, placeholderSlot } = this.config;
43
44    // Apply color theming to children first
45    const themedData = this.beforeBlockRenderColorThemingChildren({ hero, placeholderSlot });
46    hero = themedData.hero;
47    placeholderSlot = themedData.placeholderSlot;
48
49    const heroWrapper = document.createElement('div');
50    heroWrapper.innerHTML = hero;
51
52    const newRow = document.createElement('div');
53
54    const rowName = document.createElement('div');
55    rowName.innerText = 'placeholder_slot';
56
57    const rowContent = document.createElement('div');
58    rowContent.innerHTML = placeholderSlot;
59
60    newRow.append(rowName);
61    newRow.append(rowContent);
62
63    heroWrapper.firstElementChild.firstElementChild.append(newRow);
64
65    this.inputData = { hero: heroWrapper.innerHTML };
66  }
67
68  afterBlockRenderColorTheming() {
69    const domTargets = [{ target: '.block.core-hero-custom-placeholder-container', classToAdd: 'surface' }];
70
71    const themeConfiguration = {
72      'color-theme-5-white-on-white': {
73        isDefaultVariant: true,
74        colorThemeCollection: 'data-color-theme-five',
75        colorModeValue: 'white-on-white',
76        domTargets: [...domTargets],
77      },
78      'color-theme-5-white-on-core-tinted': {
79        isMatch: this.block.classList.contains('color-theme-5-white-on-core-tinted'),
80        colorThemeCollection: 'data-color-theme-five',
81        colorModeValue: 'white-on-core-tinted',
82        domTargets: [...domTargets],
83      },
84      'color-theme-5-core-tinted-on-white': {
85        isMatch: this.block.classList.contains('color-theme-5-core-tinted-on-white'),
86        colorThemeCollection: 'data-color-theme-five',
87        colorModeValue: 'core-tinted-on-white',
88        domTargets: [...domTargets],
89      },
90    };
91
92    if (this.block.classList.contains('core-hero-custom-placeholder-container')) {
93      blockColorThemeStructure(this.block, themeConfiguration, true);
94    }
95  }
96
97  async afterBlockRender() {
98    // global standard rules for block padding ///////////////////////
99    this.block.classList.add('block-padding-standard');
100    this.block.classList.add('block-padding-desktop-x-0');
101    this.block.classList.add('block-padding-desktop-top-0');
102    this.block.classList.add('block-padding-mobile-x-0');
103    this.block.classList.add('block-padding-mobile-top-0');
104
105    if (blockColorThemeBlockIsActive(this.block) && this.block.classList.contains('core-hero-custom-placeholder-container')) {
106      this.afterBlockRenderColorTheming();
107    }
108  }
109}