https://wp.harpers.org/wp-content/themes/timber/static/js/annotation.05960050.js

1"use strict";
2
3/* jshint esversion: 6 */
4
5document.addEventListener('DOMContentLoaded', function () {
6  var annotations = document.querySelectorAll('[data-component="annotation"]');
7
8  // add event listeners to all annotation points
9  annotations.forEach(function (annotation) {
10    var points = annotation.querySelectorAll('.annotation-point');
11    var popovers = annotation.querySelectorAll('.popover');
12
13    // Function to close all popovers
14    function closeAllPopovers() {
15      popovers.forEach(function (popover) {
16        popover.style.display = 'none';
17      });
18    }
19
20    // Add event listener for close buttons
21    popovers.forEach(function (popover) {
22      var closeButton = popover.querySelector('[data-close-popover]');
23      if (closeButton) {
24        closeButton.addEventListener('click', function (e) {
25          e.preventDefault();
26          e.stopPropagation();
27          popover.style.display = 'none';
28        });
29      }
30    });
31
32    // "clicking out" closes all popovers
33    annotation.addEventListener('click', function (e) {
34      e.preventDefault();
35      if (!e.target.classList.contains('annotation-point')) {
36        closeAllPopovers();
37      }
38    });
39    points.forEach(function (point, index) {
40      var timeout;
41
42      // show popover
43      function showPopover() {
44        clearTimeout(timeout);
45        popovers[index].style.display = 'block';
46        FloatingUIDOM.computePosition(point, popovers[index], {
47          placement: 'top',
48          middleware: [FloatingUIDOM.offset(10), FloatingUIDOM.flip(), FloatingUIDOM.shift({
49            padding: 5
50          })]
51        }).then(function (_ref) {
52          var x = _ref.x,
53            y = _ref.y;
54          Object.assign(popovers[index].style, {
55            left: "".concat(x, "px"),
56            top: "".concat(y, "px")
57          });
58        });
59      }
60      function hidePopover() {
61        clearTimeout(timeout);
62        popovers[index].style.display = 'none';
63      }
64      point.addEventListener('mouseenter', function () {
65        timeout = setTimeout(showPopover, 500);
66      });
67
68      // point.addEventListener('mouseleave', hidePopover);
69
70      point.addEventListener('click', function (e) {
71        e.preventDefault();
72        e.stopPropagation();
73        if (popovers[index].style.display === 'none') {
74          closeAllPopovers();
75          showPopover();
76        } else {
77          hidePopover();
78        }
79      });
80    });
81  });
82});