https://www.boell.de/modules/contrib/grid/src/TwoClick/js/two-click-embedding.js?v=1.0.8

1(function ($, Drupal, once) {
2  function prepareReplaceTwoClickWithEmbed(container) {
3    const $button = $('.two-click__button-container', container);
4    $button.on('click', (event) => {
5      const playButton = event.currentTarget
6      const parent = playButton.closest('.two-click')
7      const disclaimer = parent.querySelector('.two-click__disclaimer')
8
9      // if disclaimer is on screen, we enable it via a change event on the input of the disclaimer
10      if (disclaimer.classList.contains('show')) {
11        disclaimer.querySelector('input[type=checkbox]').checked = true
12        setTimeout( () => {
13          event = new Event('change');
14          disclaimer.dispatchEvent(event); //
15        }, 250)  //add some delay for the animation
16      }
17      else disclaimer.classList.add('show') // first we show the disclaimer
18    });
19
20
21  }
22
23  function replaceTwoClickWithEmbed(container) {
24
25    const embed = container.dataset.embed === container.dataset.originalEmbed ? container.dataset.embed : container.dataset.originalEmbed
26    const $embed = $(atob(embed));
27    const $twoClickContainer = $('.two-click__container', container);
28
29    $embed.outerWidth("100%");
30
31    const $disclaimerContainer = $(container).find('.two-click__disclaimer');
32    $disclaimerContainer.find('input[type="checkbox"]').prop("checked", true);
33
34    container.dataset.embed = $twoClickContainer.prop('outerHTML');
35    $twoClickContainer.replaceWith($embed);
36
37    const iframeEmbeddedEvent = new CustomEvent("two-click-iframe-embedded", {
38      detail: {twoClickContainer: container},
39      bubbles: true,
40      cancelable: true,
41      composed: false,
42    });
43    document.dispatchEvent(iframeEmbeddedEvent);
44  }
45
46  function replaceEmbedWithTwoClick(container) {
47    const embed = container.dataset.embed;
48    const $embed = $(embed);
49    const $container = $(container);
50    const $iframe = $container.find('iframe');
51
52    const $disclaimerContainer = $container.find('.two-click__disclaimer');
53    $disclaimerContainer.find('input[type="checkbox"]').prop("checked", false);
54
55    container.dataset.embed = btoa($iframe.prop('outerHTML')) ?? "";
56    if ($iframe.length === 0) $container.prepend($embed);
57
58    $iframe.replaceWith($embed);
59    prepareReplaceTwoClickWithEmbed(container)
60
61    const iframeReplacedEvent = new CustomEvent("two-click-iframe-replaced", {
62      detail: {twoClickContainer: container},
63      bubbles: true,
64      cancelable: true,
65      composed: false,
66    });
67    document.dispatchEvent(iframeReplacedEvent);
68  }
69
70  Drupal.behaviors.grid_two_click_embedding = {
71    attach: function (context, settings) {
72
73      const elements = once('two-click', '.two-click', context);
74      if (!elements.length) return;
75
76      elements.forEach((element) => {
77        prepareReplaceTwoClickWithEmbed(element)
78        const $disclaimerContainer = $(element).find('.two-click__disclaimer');
79
80        $disclaimerContainer.on('change', (event) => {
81          const input = $(event.currentTarget).find('input[type=checkbox]')[0]
82          const checked =  input.checked
83
84
85          setTimeout( () => {
86            $disclaimerContainer.toggleClass('show')
87            $disclaimerContainer.toggleClass('disclaimer-clicked')
88
89            if (!checked) replaceEmbedWithTwoClick(element)
90            else replaceTwoClickWithEmbed(element)
91          }, 250) //add some delay for the animation
92
93
94        });
95      });
96    }
97  }
98
99  const registerVideoControlsHandler = (element) => {
100
101    element.querySelector('.close')?.addEventListener('click', (event) => {
102      element.classList.remove('is-hovering')
103      element.classList.add('in-grid')
104      element.classList.add('is-closed')
105      const twoClickContainer = element.querySelector('.two-click')
106      if (twoClickContainer.classList.contains('has-embed')) replaceEmbedWithTwoClick(twoClickContainer) // stop the video by force
107
108    })
109  }
110
111
112  Drupal.behaviors.grid_video_hover_box = {
113    attach: function (context, settings) {
114
115      const elements = once('grid-video-hover-box', '.video-hover.hover-active.in-grid', context);
116      if (!elements.length) return;
117
118      const firstGridBox = elements[0].closest('.grid-box')
119
120
121      const options = {
122        rootMargin: "0px",
123      };
124
125      const handleIntersect = (entries, observer) => {

126        entries.forEach((entry) => {
127
128          const element = entry.target
129          registerVideoControlsHandler(element)
130
131          if (element.classList.contains('is-closed')) return
132
133          if (entry.isIntersecting) {
134            //Elvis has ENTERED the building
135            element.classList.add('in-grid')
136            element.classList.remove('is-hovering')
137          } else {
138            //Elvis has LEFT the building
139            element.classList.add('is-hovering')
140            element.classList.remove('in-grid')
141            element.classList.remove('is-cinema')
142          }
143        });
144      }
145
146      const observer = new IntersectionObserver(handleIntersect, options);
147      const target = firstGridBox.querySelector(".video-hover.hover-active");
148
149      observer.observe(target);
150
151      document.addEventListener('two-click-iframe-embedded', (event) => {
152        const twoClickContainer = event.detail.twoClickContainer
153        const container = twoClickContainer.closest('.video-container')
154        if (!container) return;
155        container.classList.add('playing')
156
157      });
158
159      document.addEventListener('two-click-iframe-replaced', (event) => {
160        const twoClickContainer = event.detail.twoClickContainer
161        const container = twoClickContainer.closest('.video-container')
162        if (!container) return;
163        container.classList.remove('playing')
164      });
165
166    }
167  }
168})(jQuery, Drupal, once);