https://www.stellajean.it/wp-content/plugins/stella-global-missions/assets/js/frontend.js?ver=1.0.11

1(function ($) {
2    'use strict';
3
4    var minZoom = 1;
5    var maxZoom = 4;
6    var zoomStep = 0.25;
7    var pinchStartDistance = null;
8    var pinchStartZoom = null;
9
10    function clamp(value, min, max) {
11        return Math.max(min, Math.min(max, value));
12    }
13
14    function getStageFromElement(element) {
15        var stage = $(element).closest('[data-sgm-map-stage]');
16        if (!stage.length) {
17            stage = $('[data-sgm-map-stage]').first();
18        }
19        return stage;
20    }
21
22    function getMapParts(stage) {
23        return {
24            stage: stage,
25            viewport: stage.find('[data-sgm-map-viewport]').first(),
26            map: stage.find('[data-sgm-map]').first()
27        };
28    }
29
30    function getZoom(stage) {
31        var map = getMapParts(stage).map;
32        var zoom = parseFloat(map.attr('data-zoom'));
33        return zoom && zoom >= minZoom ? zoom : minZoom;
34    }
35
36    function setZoom(stage, nextZoom, focusX, focusY) {
37        var parts = getMapParts(stage);
38        if (!parts.viewport.length || !parts.map.length) {
39            return;
40        }
41
42        var viewport = parts.viewport[0];
43        var map = parts.map;
44        var oldZoom = getZoom(stage);
45        var zoom = clamp(nextZoom, minZoom, maxZoom);
46
47        if (Math.abs(zoom - oldZoom) < 0.001) {
48            return;
49        }
50
51        var rect = viewport.getBoundingClientRect();
52        var localX = typeof focusX === 'number' ? focusX - rect.left : rect.width / 2;
53        var localY = typeof focusY === 'number' ? focusY - rect.top : rect.height / 2;
54        var contentX = (viewport.scrollLeft + localX) / oldZoom;
55        var contentY = (viewport.scrollTop + localY) / oldZoom;
56
57        map.attr('data-zoom', zoom.toFixed(2));
58        map.css('width', (zoom * 100) + '%');
59        stage.find('.sgm-map-front-zoom-reset').text(Math.round(zoom * 100) + '%');
60
61        viewport.scrollLeft = Math.max(0, (contentX * zoom) - localX);
62        viewport.scrollTop = Math.max(0, (contentY * zoom) - localY);
63
64        window.setTimeout(function () {
65            adjustPopupPosition(stage.find('.sgm-map-pin.is-active').first());
66        }, 80);
67    }
68
69    function resetZoom(stage) {
70        var parts = getMapParts(stage);
71        parts.map.attr('data-zoom', '1').css('width', '100%');
72        parts.viewport.scrollTop(0).scrollLeft(0);
73        stage.find('.sgm-map-front-zoom-reset').text('Reset');
74    }
75
76    function clearPopupPosition(pin) {
77        pin.removeClass('sgm-popup-below sgm-popup-align-left sgm-popup-align-right');
78    }
79
80    function adjustPopupPosition(pin) {
81        if (!pin || !pin.length || !pin.hasClass('is-active')) {
82            return;
83        }
84
85        var popup = pin.find('.sgm-map-popup').first();
86        var viewport = pin.closest('[data-sgm-map-viewport]');
87        if (!popup.length || !viewport.length) {
88            return;
89        }
90
91        clearPopupPosition(pin);
92
93        window.setTimeout(function () {
94            var popupRect = popup[0].getBoundingClientRect();
95            var viewRect = viewport[0].getBoundingClientRect();
96            var margin = 12;
97
98            if (popupRect.top < viewRect.top + margin) {
99                pin.addClass('sgm-popup-below');
100                popupRect = popup[0].getBoundingClientRect();
101            }
102
103            if (popupRect.left < viewRect.left + margin) {
104                pin.addClass('sgm-popup-align-left');
105                pin.removeClass('sgm-popup-align-right');
106            } else if (popupRect.right > viewRect.right - margin) {
107                pin.addClass('sgm-popup-align-right');
108                pin.removeClass('sgm-popup-align-left');
109            }
110        }, 20);
111    }
112
113    function activateMission(id, shouldZoom) {
114        $('.sgm-map-pin, .sgm-map-list-item').removeClass('is-active sgm-popup-below sgm-popup-align-left sgm-popup-align-right');
115        var pin = $('.sgm-map-pin[data-mission-id="' + id + '"]').addClass('is-active');
116        $('.sgm-map-list-item[data-mission-id="' + id + '"]').addClass('is-active');
117
118        if (shouldZoom && pin.length) {
119            zoomToPin(pin.first());
120        } else if (pin.length) {
121            adjustPopupPosition(pin.first());
122        }
123    }
124
125    function zoomToPin(pin) {
126        var stage = getStageFromElement(pin);
127        var parts = getMapParts(stage);
128        if (!parts.viewport.length || !parts.map.length) {
129            return;
130        }
131
132        var targetZoom = Math.max(getZoom(stage), 2.25);
133        setZoom(stage, targetZoom);
134
135        window.setTimeout(function () {
136            var viewport = parts.viewport[0];
137            var mapEl = parts.map[0];
138            var zoom = getZoom(stage);
139            var x = parseFloat(pin.attr('data-x'));
140            var y = parseFloat(pin.attr('data-y'));
141            if (isNaN(x) || isNaN(y)) {
142                return;
143            }
144
145            var targetX = (mapEl.offsetWidth * (x / 100));
146            var targetY = (mapEl.offsetHeight * (y / 100));
147            viewport.scrollTo({
148                left: Math.max(0, targetX - viewport.clientWidth / 2),
149                top: Math.max(0, targetY - viewport.clientHeight / 2),
150                behavior: 'smooth'
151            });
152
153            window.setTimeout(function () {
154                adjustPopupPosition(pin);
155            }, 340);
156        }, 50);
157    }
158
159    function touchDistance(touches) {
160        if (!touches || touches.length < 2) {
161            return null;
162        }
163        var dx = touches[0].clientX - touches[1].clientX;
164        var dy = touches[0].clientY - touches[1].clientY;
165        return Math.sqrt(dx * dx + dy * dy);
166    }
167
168    $(document).on('click', '.sgm-map-pin', function (e) {
169        if ($(e.target).closest('.sgm-map-popup a').length) {
170            return;
171        }
172        e.preventDefault();
173        activateMission($(this).data('mission-id'), false);
174    });
175
176    $(document).on('keydown', '.sgm-map-pin', function (e) {
177        if (e.key === 'Enter' || e.key === ' ') {
178            e.preventDefault();
179            activateMission($(this).data('mission-id'), true);
180        }
181    });
182
183    $(document).on('click', '.sgm-map-list-item', function (e) {
184        e.preventDefault();
185        var id = $(this).data('mission-id');
186        activateMission(id, true);
187        var stage = getStageFromElement(this);
188        if (stage.length && window.matchMedia('(max-width: 767px)').matches) {
189            $('html, body').animate({ scrollTop: stage.offset().top - 90 }, 250);
190        }
191    });
192
193    $(document).on('click', '.sgm-map-front-zoom-in', function (e) {
194        e.preventDefault();
195        var stage = getStageFromElement(this);
196        setZoom(stage, getZoom(stage) + zoomStep);
197    });
198
199    $(document).on('click', '.sgm-map-front-zoom-out', function (e) {
200        e.preventDefault();
201        var stage = getStageFromElement(this);
202        setZoom(stage, getZoom(stage) - zoomStep);
203    });
204
205    $(document).on('click', '.sgm-map-front-zoom-reset', function (e) {
206        e.preventDefault();
207        resetZoom(getStageFromElement(this));
208    });
209
210    $(document).on('wheel', '[data-sgm-map-viewport]', function (e) {
211        if (!e.ctrlKey && !e.metaKey) {
212            return;
213        }
214        e.preventDefault();
215        var stage = getStageFromElement(this);
216        var delta = e.originalEvent.deltaY < 0 ? zoomStep : -zoomStep;
217        setZoom(stage, getZoom(stage) + delta, e.originalEvent.clientX, e.originalEvent.clientY);
218    });
219
220    $(document).on('touchstart', '[data-sgm-map-viewport]', function (e) {
221        var touches = e.originalEvent.touches;
222        if (touches && touches.length === 2) {
223            pinchStartDistance = touchDistance(touches);
224            pinchStartZoom = getZoom(getStageFromElement(this));
225        }
226    });
227
228    $(document).on('touchmove', '[data-sgm-map-viewport]', function (e) {
229        var touches = e.originalEvent.touches;
230        var distance = touchDistance(touches);
231        if (!distance || !pinchStartDistance || !pinchStartZoom) {
232            return;
233        }
234        e.preventDefault();
235        var stage = getStageFromElement(this);
236        setZoom(stage, pinchStartZoom * (distance / pinchStartDistance));
237    });
238
239    $(document).on('touchend touchcancel', '[data-sgm-map-viewport]', function () {
240        pinchStartDistance = null;
241        pinchStartZoom = null;
242    });
243
244    $(document).on('click', function (e) {
245        if (!$(e.target).closest('.sgm-map-pin, .sgm-map-list-item, .sgm-map-front-toolbar').length) {
246            $('.sgm-map-pin, .sgm-map-list-item').removeClass('is-active sgm-popup-below sgm-popup-align-left sgm-popup-align-right');
247        }
248    });
249
250    $(window).on('load', function () {
251        $('[data-sgm-map-stage]').each(function () {
252            resetZoom($(this));
253        });
254    });
255
256    /* v1.0.7 - drag orizzontale fluido dei tasselli senza bloccare il click semplice. */
257    var tileDrag = {
258        active: false,
259        dragging: false,
260        startX: 0,
261        startY: 0,
262        scrollLeft: 0,
263        container: null,
264        blockClickUntil: 0
265    };
266
267    function sgmIsTouchLikePointer(e) {
268        if (e && e.pointerType && e.pointerType !== 'mouse') {
269            return true;
270        }
271
272        return window.matchMedia && window.matchMedia('(hover: none), (pointer: coarse)').matches;
273    }
274
275    $(document).on('pointerdown', '[data-sgm-tiles-drag]', function (e) {
276        if (e.button !== undefined && e.button !== 0) {
277            return;
278        }
279
280        /* iPhone/iPad: niente drag JS, lasciamo lo scroll laterale nativo di Safari. */
281        if (sgmIsTouchLikePointer(e)) {
282            tileDrag.active = false;

283            tileDrag.dragging = false;
284            tileDrag.container = null;
285            return;
286        }
287
288        tileDrag.active = true;
289        tileDrag.dragging = false;
290        tileDrag.startX = e.clientX;
291        tileDrag.startY = e.clientY;
292        tileDrag.scrollLeft = this.scrollLeft;
293        tileDrag.container = this;
294
295        $(this).addClass('is-dragging-ready');
296    });
297
298    $(document).on('pointermove', function (e) {
299        if (!tileDrag.active || !tileDrag.container) {
300            return;
301        }
302
303        var diffX = e.clientX - tileDrag.startX;
304        var diffY = e.clientY - tileDrag.startY;
305
306        /* Soglia più alta: un click normale sull'immagine non deve diventare drag. */
307        if (!tileDrag.dragging && Math.abs(diffX) > 12 && Math.abs(diffX) > Math.abs(diffY)) {
308            tileDrag.dragging = true;
309            $(tileDrag.container).addClass('is-dragging');
310        }
311
312        if (tileDrag.dragging) {
313            e.preventDefault();
314            tileDrag.container.scrollLeft = tileDrag.scrollLeft - diffX;
315        }
316    });
317
318    $(document).on('pointerup pointercancel', function () {
319        if (!tileDrag.active || !tileDrag.container) {
320            return;
321        }
322
323        if (tileDrag.dragging) {
324            tileDrag.blockClickUntil = Date.now() + 180;
325        }
326
327        $(tileDrag.container).removeClass('is-dragging-ready is-dragging');
328
329        tileDrag.active = false;
330        tileDrag.dragging = false;
331        tileDrag.container = null;
332    });
333
334    $(document).on('click', '[data-sgm-tiles-drag] .sgm-tile-card', function (e) {
335        if (Date.now() < tileDrag.blockClickUntil) {
336            e.preventDefault();
337            e.stopPropagation();
338        }
339    });
340
341})(jQuery);