https://heathermaeerickson.com/release/locke/production/v0.0.141/js/artwork.js

1(function (w,d){
2    var OPP = w.OPP;
3    var Modal = OPP.Modal;
4    // Return unless required deps are available.
5    if (!Modal || !d.addEventListener) return;
6    (function () {
7        var zoomModal = d.getElementById('zoom-modal');
8        var zoomCorner = d.getElementById('zoom-corner');
9        var zoomDelay = 100;
10        var zoomTS = Date.now();
11
12        var handleSwipeLeft, handleSwipeRight, handleArrowLeft, handleArrowRight, mc;
13
14        function killEvent() { return false }
15
16        function showZoomModal(evt) {
17            var ts = evt.timestamp || Date.now();
18            var delta = ts - zoomTS;
19            if (!Modal.isOpen() && delta > zoomDelay) {
20                zoomTS = ts;
21                OPP.addClass(d.body, 'zoom-modal-open');
22                Modal.show(zoomModal);
23            }
24        }
25
26        function hideZoomModal(evt) {
27            var ts = evt.timestamp || Date.now();
28            var delta = ts - zoomTS;
29            if (Modal.isOpen() && delta > zoomDelay) {
30                zoomTS = ts;
31                OPP.removeClass(d.body, 'zoom-modal-open');
32                Modal.hide();
33            }
34        }
35
36        function makeLinkHandler(id) {
37            return function () {
38                var a;
39                if (Modal.isOpen()) {
40                    Modal.hide();
41                } else {
42                    a = d.getElementById(id);
43                    if (a && a.href) {
44                        w.location.href = a.href
45                    }
46                }
47            }
48        }
49
50        handleArrowLeft  = handleSwipeRight = makeLinkHandler('artwork-prev');
51        handleArrowRight = handleSwipeLeft  = makeLinkHandler('artwork-next');
52
53        // Handle left/right arrow keys
54        d.addEventListener('keydown', function (evt) {
55            // Ignore repeated events and event with active modifier keys.
56            if (evt.repeat || evt.altKey || evt.ctrlKey || evt.metaKey || evt.shiftKey) return;
57
58            // Prefer the standard `key` property if supported. Otherwise, use
59            // deprecated `which` or `keyCode` methods to match numeric code.
60            switch (evt.key || evt.which || evt.keyCode) {
61            case 'Escape': // key
62            case 27: // which or keyCode
63                hideZoomModal(evt);
64                break;
65            case 'ArrowLeft': // key
66            case 37: // which or keyCode
67                handleArrowLeft();
68                break;
69            case 'ArrowRight': // key
70            case 39: // which or keyCode
71                handleArrowRight();
72                break;
73            default:
74                return;
75            }
76
77            // prevent scrolling, etc.
78            evt.preventDefault();
79        }, true);
80
81        // Use Hammer.js to setup swipe left/right handlers
82        delete Hammer.defaults.cssProps.userSelect; // Do not disable text selection.
83        delete Hammer.defaults.cssProps.touchCallout; // Do not disable touch callout.
84        mc = new Hammer.Manager(d.documentElement, { recognizers: [
85            // RecognizerClass, [options], [recognizeWith, ...], [requireFailure, ...]
86            [Hammer.Swipe, { direction: Hammer.DIRECTION_HORIZONTAL }],
87            [Hammer.Tap]
88        ]});
89
90        mc.on("swipeleft", handleSwipeLeft);
91        mc.on("swiperight", handleSwipeRight);
92
93        // Return unless this page supports the zoom modal.
94        if (!zoomModal || !zoomCorner) return;
95
96        // Attach zoom modal show/hide event handlers.
97        zoomCorner.addEventListener('click', showZoomModal);
98        zoomModal.addEventListener('click', hideZoomModal);
99
100        // Listen for tap on (or in) artwork media element.
101        mc.on("tap", function (evt) {
102            var target = evt.target;
103            var mediaElem;
104            if (evt.pointerType !== 'touch') return;
105            if (target.id === 'media' || (
106                (mediaElem = d.getElementById('media')) &&
107                    mediaElem.contains(target)
108            )) {
109                // Disable click on media element if tap is detected.
110                target.onclick = killEvent;
111                showZoomModal(evt);
112            }
113        });
114    })();
115}(window,document));