https://approcess.com/site_assets/js/objects/figure-description-toggle.js

1import dataLayer from '../utilities/data-layer.js';
2
3class Figure {
4  constructor(element) {
5    this.element = element;
6    this.button = element.querySelector('.figure-description-toggle');
7    this.buttonAction = element.querySelector('.figure-description-toggle__action');
8    this.caption = element.querySelector('figcaption');
9    this.isVisible = false;
10
11    if (this.button && this.caption) {
12      this.button.addEventListener('click', () => {
13        this.toggle();
14      });
15    }
16  }
17
18  toggle() {
19    if (!this.isVisible) {
20      this.buttonAction.innerHTML = 'Hide';
21      this.isVisible = true;
22      this.button.setAttribute('is-active', this.isVisible);
23      this.caption.setAttribute('aria-hidden', !this.isVisible);
24
25      dataLayer.push({
26        type: 'event',
27        event: 'Interaction',
28        event_type: `${this.button.dataset.type === 'Video' ? 'Video Transcript' : 'Image Description'}`,
29        event_detail: 'Open'
30      });
31    } else {
32      this.buttonAction.innerHTML = 'Show';
33      this.isVisible = false;
34      this.button.setAttribute('is-active', this.isVisible);
35      this.caption.setAttribute('aria-hidden', !this.isVisible);
36
37      dataLayer.push({
38        type: 'event',
39        event: 'Interaction',
40        event_type: `${this.button.dataset.type === 'Video' ? 'Video Transcript' : 'Image Description'}`,
41        event_detail: 'Close'
42      });
43    }
44  }
45}
46
47export default Figure;