https://www.coronabehandlung.de/lib/blocks/overlay-patient-stories/overlay-patient-stories.js

1import { FranklinBlock, overlayHostInstance } from '../../scripts/lib-franklin.js';
2
3export default class OverlayPatientStories extends FranklinBlock {
4  variants = [{ name: 'patientStories', test: true }];
5
6  async beforeBlockRender() {
7    // patient stories parameter
8    let showPatientContent = false;
9    let showPatientStoriesSubinfo = false;
10
11    if (this.inputData.body || this.inputData?.contentAtoms?.disclaimer) {
12      showPatientContent = true;
13    }
14
15    if (this.inputData.attribution || this.inputData.supportText) {
16      showPatientStoriesSubinfo = true;
17    }
18
19    this.inputData = {
20      patientStories: {
21        ...this.inputData,
22        showPatientContent,
23        showPatientStoriesSubinfo,
24      },
25    };
26  }
27
28  popupOverlay() {
29    const { content } = this.block.querySelector('template');
30    if (!content) {
31      console.error('No content found in overlay block');
32      return;
33    }
34
35    if (this.block.classList.contains('full')) {
36      overlayHostInstance().block.classList.add('full', 'core-overlay-host-full');
37    }
38
39    const overlayHost = overlayHostInstance();
40    if (!overlayHost) {
41      console.error('No overlay host found');
42      return;
43    }
44
45    const bodyHTML = content.querySelector('.patient-stories-body')?.outerHTML || '';
46    overlayHost.reset();
47    overlayHost.setBodyHTML(bodyHTML);
48
49    const footerHTML = content.querySelector('.patient-stories-footer')?.outerHTML || null;
50    const footerParent = overlayHost.block.querySelector('.core-overlay-host-content');
51    footerParent.classList.add('patient-modal');
52
53    if (footerHTML) {
54      overlayHost.setFooterHTML(footerHTML, true);
55    } else {
56      footerParent.classList.add('patient-modal-no-footer');
57    }
58
59    overlayHost.decorateItems();
60
61    this.block.classList.forEach((className) => {
62      overlayHostInstance().addCustomClass(className);
63    });
64
65    overlayHost.open();
66
67    const patientStoriesFooter = overlayHostInstance().block.querySelector('.patient-stories-footer');
68    const afterScroll = overlayHostInstance().block.querySelector('.core-overlay-host-after-scroll');
69    afterScroll.classList.add('hidden');
70
71    const scrollContainer = overlayHostInstance().block.querySelector('.core-overlay-host-scroll-container');
72
73    const addShadow = (element) => {
74      // Allow for a small tolerance due to potential sub-pixel rendering or rounding differences
75      const tolerance = 1;
76      const shouldAddShadow = Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) <= tolerance;
77
78      if (shouldAddShadow) {
79        patientStoriesFooter?.classList.add('no-shadow');
80      } else {
81        patientStoriesFooter?.classList.remove('no-shadow');
82      }
83    };
84    addShadow(scrollContainer);
85  }
86
87  /**
88   * Add listener to button to open overlay
89   */
90  async afterBlockRender() {
91    this.block.querySelector('.button').addEventListener('click', this.popupOverlay.bind(this));
92  }
93}