803 lines
22 KiB
JavaScript
803 lines
22 KiB
JavaScript
;(function ($, hotspots, undefined) {
|
|
"use strict";
|
|
|
|
var Leaflet = L.noConflict();
|
|
|
|
var ua = window.navigator.userAgent,
|
|
isiOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i),
|
|
isWebkit = !!ua.match(/WebKit/i),
|
|
isWebkitiOS = isiOS && isWebkit,
|
|
isMobileSafari = isiOS && isWebkit && !ua.match(/CriOS/i),
|
|
getBrowserVersion = function(){
|
|
var temp,
|
|
M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
|
|
|
|
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
|
|
if ((temp = ua.match(/version\/(\d+)/i)) != null) {
|
|
M.splice(1, 1, temp[1]);
|
|
}
|
|
return parseInt(M[1]);
|
|
}
|
|
|
|
// Store all the leaflets on the page in an array for access later
|
|
var leaflets = [];
|
|
|
|
// Store all image maps on the page in an object for access later
|
|
var imageMaps = {};
|
|
|
|
// Store all the more info area hotspots in an object for access later
|
|
hotspots.infoSpots = {};
|
|
|
|
var mapSetup = function(){
|
|
$('.da-error').hide();
|
|
$('.hotspot-info').addClass('da-hidden');
|
|
|
|
var images = $('img.hotspots-image, picture.hotspots-image img'); // Select images as well as images inside picture elements
|
|
|
|
images.each(function(){
|
|
var img = $(this);
|
|
|
|
var tester = new Image();
|
|
|
|
tester.onload = function(){
|
|
markLoaded(img);
|
|
moreInfoSetup(img);
|
|
leafletSetup(img);
|
|
};
|
|
tester.src = img.attr('src');
|
|
});
|
|
|
|
if (isMobileSafari) {
|
|
window.onpageshow = function(event){
|
|
if (event.persisted) {
|
|
window.location.reload();
|
|
}
|
|
};
|
|
}
|
|
};
|
|
|
|
var markLoaded = function(img) {
|
|
img.data('status', 'loaded');
|
|
var container = img.parents('.hotspots-container').addClass('loaded');
|
|
img.attr('aria-hidden', true);
|
|
};
|
|
|
|
var stopAudioVideo = function(el) {
|
|
var iframe = el.querySelector( 'iframe[src*=youtube]');
|
|
var video = el.querySelector( 'video' );
|
|
var audio = el.querySelector( 'audio' );
|
|
if (iframe) {
|
|
var iframeSrc = iframe.src;
|
|
iframe.src = iframeSrc;
|
|
}
|
|
if (video) {
|
|
video.pause();
|
|
}
|
|
if (audio) {
|
|
audio.pause();
|
|
}
|
|
}
|
|
|
|
var moreInfoSetup = function(img) {
|
|
var container = img.parents('.hotspots-container');
|
|
|
|
if (container.data('layout') == 'tooltip') {
|
|
return;
|
|
}
|
|
|
|
if (container.data('layout') == 'lightbox') {
|
|
lightboxSetup(container, img);
|
|
return;
|
|
}
|
|
|
|
infoboxSetup(container, img);
|
|
};
|
|
|
|
var infoboxSetup = function(container, img) {
|
|
var initial = container.find('.hotspot-initial');
|
|
var content = container.find('.hotspots-placeholder');
|
|
initial.addClass('visible');
|
|
container.on('active.responsilight inactive.responsilight', function(e){
|
|
var data = $(e.target).data('areaData');
|
|
var info;
|
|
if (e.type === 'active') {
|
|
info = $(data.href);
|
|
} else {
|
|
info = initial;
|
|
}
|
|
|
|
var visibleContent = content.children('.visible');
|
|
stopAudioVideo(visibleContent.get(0));
|
|
visibleContent.removeClass('visible');
|
|
info.removeClass('da-hidden').addClass('visible').appendTo(content);
|
|
|
|
|
|
// Check for an embedded video player
|
|
var video = info.find('.wp-video');
|
|
if (video.length) {
|
|
if (!info.data('video-resized')) {
|
|
info.data('video-resized', true);
|
|
window.dispatchEvent(new Event('resize'));
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
var lightboxSetup = function(container, img) {
|
|
container.on('active.responsilight', function(e){
|
|
var data = $(e.target).data('areaData'),
|
|
info = $(data.href),
|
|
container = info.parent(),
|
|
target = $(e.target),
|
|
currentLightbox = $('.featherlight');
|
|
|
|
if (e.type === 'active' && currentLightbox.length === 0) {
|
|
$.featherlight('<div class="hotspot-info"></div>', {
|
|
closeLabel: drawattentionData.closeLabel,
|
|
closeSpeed: 250,
|
|
closeOnEsc: false,
|
|
afterContent: function(){
|
|
var content = $('.featherlight-inner'),
|
|
lb = $('.featherlight-content'),
|
|
mapNo = img.data('id');
|
|
|
|
info.appendTo(content).show();
|
|
lb.addClass('lightbox-' + mapNo);
|
|
|
|
// Fix accessibility issue - links not focusable by keyboard
|
|
var untabbables = info.find('a[tabindex=-1]');
|
|
untabbables.attr('tabindex', 0);
|
|
|
|
setTimeout(function(){
|
|
var img = content.find('img'),
|
|
contentHeight = content.get(0).scrollHeight,
|
|
imgHeight = img.height(),
|
|
lbHeight = lb.outerHeight();
|
|
|
|
if (contentHeight > lbHeight) {
|
|
var diff = contentHeight - lbHeight + 50,
|
|
newHeight = imgHeight - diff,
|
|
minHeight = $(window).innerHeight()/2;
|
|
|
|
newHeight = newHeight < minHeight ? minHeight : newHeight;
|
|
|
|
var naturalHeight = img.prop('naturalHeight');
|
|
|
|
if (newHeight < naturalHeight) {
|
|
img.css({'width': 'auto'});
|
|
img.animate({
|
|
'height': newHeight
|
|
}, 200);
|
|
}
|
|
}
|
|
}, 100);
|
|
|
|
lightboxAnchorLinks(content, target);
|
|
window.dispatchEvent(new Event('resize')); // Trigger window resize event for [video] shortcode JS
|
|
},
|
|
afterOpen: function() {
|
|
$('body').on('keyup', documentEsc);
|
|
},
|
|
afterClose: function(){
|
|
target.removeClass('hotspot-active');
|
|
$('body').off('keyup', documentEsc);
|
|
},
|
|
beforeClose: function(){
|
|
stopAudioVideo(document.querySelector('.featherlight-content'));
|
|
setTimeout(function(){
|
|
info.hide().appendTo(container);
|
|
}, 500); // delay hiding content and moving it back outside the lightbox
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
var documentEsc = function(e) {
|
|
if (e.keyCode === 27) {
|
|
$.featherlight.current().close();
|
|
}
|
|
};
|
|
|
|
var lightboxAnchorLinks = function(content, hotspot){
|
|
var links = content.find('.hotspot-content a[href^="#"]');
|
|
links.on('click', function(e){
|
|
e.preventDefault();
|
|
var targetEl = $(e.target.hash);
|
|
var current = $.featherlight.current();
|
|
if (!current) return
|
|
current.afterClose = function(){
|
|
hotspot.removeClass('hotspot-active');
|
|
$('html').removeClass('with-featherlight');
|
|
$('html, body').animate({
|
|
scrollTop: targetEl.offset().top
|
|
}, 500);
|
|
}
|
|
current.close();
|
|
});
|
|
};
|
|
|
|
var showTooltip = function(shape, areaData) {
|
|
var container = $(shape._map._container);
|
|
var content = $(areaData.href).html();
|
|
|
|
var tip = Leaflet.responsivePopup({
|
|
autoPan: false,
|
|
closeButton: areaData.trigger == 'click',
|
|
hasTip: container.width() > 840,
|
|
maxHeight: container.height() * .9,
|
|
offset: new Leaflet.Point(0,0)
|
|
});
|
|
|
|
tip.setContent(content);
|
|
shape.bindPopup(tip);
|
|
|
|
if (areaData.trigger === 'click') {
|
|
shape.on('click', function(e){
|
|
if (shape._path.classList.contains('hotspot-active')) {
|
|
shape.closePopup()
|
|
} else {
|
|
shape.openPopup();
|
|
}
|
|
});
|
|
} else {
|
|
shape.on('mouseover', function(){
|
|
shape.openPopup();
|
|
});
|
|
shape.on('mouseout', function(){
|
|
shape.closePopup();
|
|
});
|
|
}
|
|
|
|
container.on('click', function(e){
|
|
e.stopPropagation();
|
|
});
|
|
$(document).on('click', function(e){
|
|
shape.closePopup();
|
|
shape._path.classList.remove('hotspot-active');
|
|
});
|
|
};
|
|
|
|
var leafletSetup = function(img) {
|
|
var id = img.data('id');
|
|
var container = $('<div id="hotspots-map-container-' + id + '" class="hotspots-map-container"></div>');
|
|
var imgWidth = img.width();
|
|
var imgHeight = img.height();
|
|
|
|
container.css({
|
|
'width': imgWidth + 'px',
|
|
'height': imgHeight + 'px'
|
|
});
|
|
img.after(container);
|
|
|
|
// Check to be sure the container is on the page
|
|
// To prevent errors when loaded in Elementor popup
|
|
var containerTest = $('#hotspots-map-container-' + id);
|
|
if (!containerTest.length) {
|
|
return
|
|
}
|
|
|
|
var map = Leaflet.map('hotspots-map-container-' + id, {
|
|
attributionControl: false,
|
|
boxZoom: false,
|
|
crs: Leaflet.CRS.Simple,
|
|
doubleClickZoom: false,
|
|
dragging: false,
|
|
keyboard: false,
|
|
minZoom: -20,
|
|
scrollWheelZoom: false,
|
|
// tap: !isWebkitiOS,
|
|
tap: true,
|
|
touchZoom: false,
|
|
zoomControl: false,
|
|
zoomSnap: 0,
|
|
});
|
|
|
|
var domImg = img.get(0);
|
|
var natHeight = domImg.naturalHeight;
|
|
var natWidth = domImg.naturalWidth;
|
|
img.data('natW', natWidth);
|
|
img.data('natH', natHeight);
|
|
var bounds = [[0,0], [natHeight, natWidth]];
|
|
var imageLayer = Leaflet.imageOverlay(img.attr('src'), bounds).addTo(map);
|
|
map.fitBounds(bounds);
|
|
|
|
leaflets.push({
|
|
map: map,
|
|
img: img
|
|
});
|
|
|
|
drawSpots(img, map);
|
|
};
|
|
|
|
var showContextMenu = function(shape, areaData, e) {
|
|
var hash = areaData.href;
|
|
var container = $(shape._map._container);
|
|
|
|
if (!hash) {
|
|
return;
|
|
}
|
|
|
|
$('.da-address-wrapper').remove();
|
|
|
|
var windowAddress = window.location.href.split('#')[0];
|
|
var shapeAddress = windowAddress + hash;
|
|
var div = $('<div class="da-address-wrapper"></div>')
|
|
.css({
|
|
'left': e.originalEvent.pageX + 'px',
|
|
'top': e.originalEvent.pageY + 'px'
|
|
})
|
|
.append('<p>' + shapeAddress + '</p>')
|
|
.append('<span class="da-address-close">×</span>')
|
|
.appendTo(document.body);
|
|
|
|
div.find('.da-address-close').on('click', function(){
|
|
div.remove();
|
|
});
|
|
};
|
|
|
|
var drawSpots = function(img, map) {
|
|
var id = img.data('id');
|
|
|
|
/* If the image has a usemap attribute, detach the map and store it in the imageMaps object */
|
|
if (img[0].hasAttribute('usemap')) {
|
|
var mapName = img.attr('usemap').replace('#', '');
|
|
var imageMap = $('map[name="' + mapName + '"]');
|
|
imageMaps[id] = imageMap.detach();
|
|
img.removeAttr('usemap');
|
|
} else { /* Else we've already removed the image map, so we just need to get it */
|
|
var imageMap = imageMaps[id];
|
|
}
|
|
|
|
var areas = imageMap.find('area');
|
|
var container = img.parents('.hotspots-container');
|
|
|
|
areas.each(function(){
|
|
var area = $(this);
|
|
var shape = area.attr('shape');
|
|
var coords = area.attr('coords').split(',');
|
|
var areaData = {
|
|
style: area.data('color-scheme') ? area.data('color-scheme') : 'default',
|
|
title: area.attr('title'),
|
|
href: area.attr('href'),
|
|
spot: area.data('id'),
|
|
target: area.attr('target'),
|
|
action: area.data('action'),
|
|
layout: container.data('layout'),
|
|
trigger: container.data('trigger')
|
|
};
|
|
switch(shape) {
|
|
case 'circle':
|
|
renderCircle(coords, map, img, areaData);
|
|
break;
|
|
case 'rect':
|
|
renderPoly(coords, map, img, areaData);
|
|
break
|
|
case 'polygon':
|
|
renderPoly(coords, map, img, areaData);
|
|
break;
|
|
case 'poly': // Leaving this here for backward compatibility
|
|
renderPoly(coords, map, img, areaData);
|
|
break;
|
|
}
|
|
});
|
|
// A11y fixes after all the spots are drawn
|
|
a11yFixes(img, map);
|
|
|
|
// Link to area after all the spots are drawn
|
|
hotspots.linkToArea();
|
|
};
|
|
|
|
var renderCircle = function(coords, map, img, areaData) {
|
|
var x = coords[0];
|
|
var y = img.data('natH') - coords[1];
|
|
var rad = coords[2];
|
|
var circle = Leaflet.circle([y,x], {
|
|
radius: rad,
|
|
className: 'hotspot-' + areaData.style,
|
|
title: areaData.title
|
|
});
|
|
|
|
circle.on('add', function(e) {
|
|
var $circle = $(e.target.getElement());
|
|
$circle.data('areaData', areaData);
|
|
$circle.attr('tabindex', '0');
|
|
$circle.attr('aria-label', areaData.title);
|
|
$circle.attr('name', areaData.title);
|
|
});
|
|
|
|
circle.addTo(map);
|
|
|
|
// If this is a more info hotspot, add it to the infoSpots object
|
|
if (areaData.href.charAt(0) === '#') {
|
|
var spotName = areaData.href.replace('#', '');
|
|
hotspots.infoSpots[spotName] = circle;
|
|
}
|
|
|
|
shapeEvents(circle, areaData);
|
|
};
|
|
|
|
var renderPoly = function (coords, map, img, areaData) {
|
|
var xCoords = [];
|
|
var yCoords = [];
|
|
for (var i = 0; i < coords.length; i++) {
|
|
if (i % 2 == 0) {
|
|
xCoords.push(coords[i]);
|
|
} else {
|
|
yCoords.push(coords[i]);
|
|
}
|
|
}
|
|
|
|
var polyCoords = yCoords.map(function(coord, index) {
|
|
return [img.data('natH') - coord, xCoords[index]];
|
|
});
|
|
|
|
var poly = Leaflet.polygon(polyCoords, {
|
|
className: 'hotspot-' + areaData.style,
|
|
title: areaData.title
|
|
});
|
|
|
|
// Attach the area data to the path as soon as it's added to the map, a11y attributes
|
|
poly.on('add', function(e) {
|
|
var $poly = $(e.target.getElement());
|
|
$poly.data('areaData', areaData);
|
|
$poly.attr('tabindex', '0');
|
|
$poly.attr('aria-label', areaData.title);
|
|
$poly.attr('name', areaData.title);
|
|
});
|
|
|
|
poly.addTo(map);
|
|
|
|
// If this is a more info hotspot, add it to the infoSpots object
|
|
if (areaData.href.charAt(0) === '#') {
|
|
var spotName = areaData.href.replace('#', '');
|
|
hotspots.infoSpots[spotName] = poly;
|
|
}
|
|
|
|
shapeEvents(poly, areaData);
|
|
};
|
|
|
|
var shapeOver = function(shape, areaData, e) {
|
|
var $shape = $(e.target.getElement());
|
|
$shape.trigger('over.responsilight');
|
|
if (areaData.trigger === 'hover' && e.type !== 'touchstart' & e.type !== 'keypress') {
|
|
$shape.addClass('hotspot-active');
|
|
$shape.trigger('active.responsilight');
|
|
}
|
|
};
|
|
|
|
var shapeOut = function(shape, areaData, e) {
|
|
var $shape = $(e.target.getElement());
|
|
$shape.trigger('out.responsilight');
|
|
if (areaData.trigger === 'hover' && e.type !== 'keypress') {
|
|
$shape.removeClass('hotspot-active');
|
|
$shape.trigger('inactive.responsilight');
|
|
// If mouse user, blur hover spots when mouse moves out
|
|
if (e.type === 'mouseout') {
|
|
$shape.trigger('blur');
|
|
}
|
|
}
|
|
};
|
|
|
|
var shapeClick = function(shape, areaData, e) {
|
|
var $shape = $(e.target.getElement());
|
|
$shape.trigger('areaClick.responsilight');
|
|
if (areaData.trigger === 'hover' && e.type !== 'touchstart' && e.type !== 'keypress' && !isMobileSafari) {
|
|
return;
|
|
}
|
|
$shape.toggleClass('hotspot-active');
|
|
if ($shape.hasClass('hotspot-active')) {
|
|
$shape.trigger('active.responsilight');
|
|
} else {
|
|
$shape.trigger('inactive.responsilight');
|
|
}
|
|
var oldActive = $shape.siblings('.hotspot-active');
|
|
if (oldActive.length) {
|
|
oldActive.removeClass('hotspot-active');
|
|
}
|
|
};
|
|
|
|
var shapeEvents = function(shape, areaData) {
|
|
// Handle URL spots
|
|
if (areaData.action == 'url') {
|
|
if (areaData.title) {
|
|
shape.bindTooltip(areaData.title);
|
|
}
|
|
shape.on('click', function(e) {
|
|
if (areaData.target == '_new' && !isMobileSafari) { // new window
|
|
window.open(areaData.href, '_blank');
|
|
} else { // same window
|
|
var first = areaData.href.charAt(0);
|
|
var targetElem;
|
|
try {
|
|
targetElem = first === '#' ? $(areaData.href) : null;
|
|
} catch (error) {
|
|
targetElem = null
|
|
}
|
|
if (targetElem && targetElem.length) { // hash link to existing target
|
|
$('html, body').animate({
|
|
scrollTop: targetElem.offset().top - 50
|
|
}, 750, function(){ // callback after scrolling
|
|
history.pushState({}, '', areaData.href);
|
|
})
|
|
} else {
|
|
window.location = areaData.href;
|
|
}
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Show right-click context menu for logged-in admins only
|
|
if (drawattentionData.isLoggedIn && drawattentionData.isAdmin) {
|
|
shape.on('contextmenu', function(e){
|
|
showContextMenu(shape, areaData, e);
|
|
});
|
|
}
|
|
|
|
// Handle tooltip spots
|
|
if (areaData.layout === 'tooltip') {
|
|
showTooltip(shape, areaData);
|
|
}
|
|
|
|
// Add styled tooltip to all non-hover areas
|
|
if (areaData.action === 'url' || areaData.trigger === 'click' && areaData.layout !== 'tooltip') {
|
|
if (areaData.title) {
|
|
shape.bindTooltip(areaData.title);
|
|
}
|
|
}
|
|
|
|
// Handle all other spots
|
|
var moved = false;
|
|
|
|
shape.on('touchstart touchmove touchend click mouseover mouseout keypress focus blur', function(e){
|
|
switch(e.type) {
|
|
case 'touchstart':
|
|
moved = false;
|
|
break;
|
|
case 'touchmove':
|
|
moved = true;
|
|
break;
|
|
case 'touchend':
|
|
if (moved) {
|
|
return;
|
|
}
|
|
shapeOver(shape, areaData, e);
|
|
shapeClick(shape, areaData, e);
|
|
break;
|
|
case 'click':
|
|
shapeClick(shape, areaData, e);
|
|
break;
|
|
case 'keypress':
|
|
var key = e.originalEvent.which;
|
|
if ( key == 13 || key == 32) {
|
|
e.originalEvent.preventDefault();
|
|
shapeClick(shape, areaData, e);
|
|
}
|
|
break;
|
|
case 'mouseover':
|
|
if (!isMobileSafari || (isMobileSafari && getBrowserVersion < 13)) {
|
|
shapeOver(shape, areaData, e);
|
|
}
|
|
if (isMobileSafari && !(getBrowserVersion() >= 12)) {
|
|
shapeClick(shape, areaData, e);
|
|
}
|
|
break;
|
|
case 'focus':
|
|
shapeOver(shape, areaData, e);
|
|
break;
|
|
case 'blur':
|
|
shapeOut(shape, areaData, e);
|
|
break;
|
|
case 'mouseout':
|
|
shapeOut(shape, areaData, e);
|
|
break;
|
|
}
|
|
});
|
|
};
|
|
|
|
var a11yFixes = function(img, map){
|
|
let svg = img.siblings('.leaflet-container').find('.leaflet-overlay-pane svg');
|
|
let id = img.data('id');
|
|
|
|
// Add title and description to SVG
|
|
svg.prepend('<desc id="img-desc-' + id + '">' + img.data('image-description') + '</desc>');
|
|
svg.prepend('<title id="img-title-' + id + '">' + img.data('image-title') + '</title>');
|
|
|
|
// Use title and desc to describe the svg
|
|
svg.attr('aria-labelledby', 'img-title-' + id);
|
|
svg.attr('aria-describedby', 'img-desc-' + id);
|
|
|
|
// Make svg screen reader traversable
|
|
svg.attr('role', 'group');
|
|
|
|
// Create a traversable list
|
|
var group = svg.find('g').attr('role', 'list');
|
|
group.children().attr('role', 'listitem');
|
|
|
|
// Handle tooltips for the map
|
|
map.on('popupopen',function(popup) {
|
|
// shift focus to the popup when it opens
|
|
$(popup.popup._container).find('.leaflet-rrose-content').attr('tabindex','-1').focus();
|
|
|
|
// move the close button to the end of the popup content so screen readers reach it
|
|
// after the main popup content, not before
|
|
var close = $(popup.popup._container).find('.leaflet-rrose-close-button').detach();
|
|
close.attr('aria-label','Close item');
|
|
$(popup.popup._container).append(close);
|
|
|
|
$(document).on('keydown', function(e){
|
|
if (e.which == 27) {
|
|
map.closePopup();
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
// return focus to the icon we started from before opening the pop up
|
|
map.on('popupclose',function(popup) {
|
|
$(document).off('keydown');
|
|
$(popup.popup._source._path).focus();
|
|
});
|
|
|
|
};
|
|
|
|
hotspots.linkToArea = function(){ // Called after the shapes are drawn
|
|
var hash = window.location.hash;
|
|
if (!hash) return;
|
|
|
|
var spotName = hash.replace('#', '');
|
|
if (!hotspots.infoSpots.hasOwnProperty(spotName)) return;
|
|
|
|
Object.keys(hotspots.infoSpots).forEach(function(key) {
|
|
hotspots.infoSpots[key].closeTooltip()
|
|
})
|
|
|
|
hotspots.infoSpots[spotName].fire('click')
|
|
};
|
|
|
|
hotspots.setup = function(){
|
|
mapSetup();
|
|
};
|
|
|
|
hotspots.resizeTimer = null;
|
|
hotspots.resizing = false;
|
|
|
|
hotspots.init = function(){ // For backward compatibility - resets the size of the leaflet on demand
|
|
leaflets.forEach(function(item){
|
|
var isLoaded = item.img.data('status') === 'loaded';
|
|
|
|
if (!isLoaded) {
|
|
return;
|
|
}
|
|
|
|
item.img.next('.hotspots-map-container').css({
|
|
'width': item.img.width() + 'px',
|
|
'height': item.img.height() + 'px'
|
|
});
|
|
item.map.invalidateSize(true);
|
|
item.map.fitBounds([[0,0], [item.img.data('natH'), item.img.data('natW')]]);
|
|
});
|
|
};
|
|
|
|
hotspots.compatibilityFixes = function(){
|
|
if (window.Foundation) { /* Fix for Foundation firing tag change event indiscriminately when some items are clicked on the page */
|
|
$(window).on('change.zf.tabs', function(e) {
|
|
if (e.target.tagName !== 'INPUT') {
|
|
hotspots.init();
|
|
}
|
|
});
|
|
}
|
|
|
|
$(window).on('pageloaded load', function() { /* Listen for pageloaded and load events on the window */
|
|
hotspots.init();
|
|
});
|
|
|
|
$(window).on('et_hashchange', function() { /* Listen for Divi hashchange */
|
|
setTimeout(function() {
|
|
hotspots.init();
|
|
}, 1000);
|
|
});
|
|
|
|
$('.ult_tabs').on('click', '.ult_tab a', function() { /* Ultimate tabs */
|
|
setTimeout(function() {
|
|
hotspots.init();
|
|
}, 2000);
|
|
});
|
|
|
|
$('a[data-vc-accordion], .et_pb_tabs .et_pb_tabs_controls li, .et_pb_toggle_title').on('click', function() { /* Divi tabs, accordion, toggle */
|
|
setTimeout(function() {
|
|
hotspots.init();
|
|
}, 1000);
|
|
});
|
|
$('.vc_tta-tabs-container').on('click', '.vc_tta-tab', function() { /* Visual composer tabs */
|
|
setTimeout(function() {
|
|
hotspots.init();
|
|
}, 1000);
|
|
});
|
|
|
|
$('.ui-tabs-anchor, .nav-tabs > li').on('click', function() { /* UI Tabs */
|
|
setTimeout(function() {
|
|
hotspots.init();
|
|
}, 750);
|
|
});
|
|
|
|
$('.fl-accordion-button').on('click', function() { /* Beaver Builder accordion */
|
|
setTimeout(function() {
|
|
hotspots.init();
|
|
}, 500);
|
|
});
|
|
|
|
$('.responsive-tabs').on('click', '.responsive-tabs__list__item', function() { /* Responsive tabs */
|
|
hotspots.init();
|
|
});
|
|
|
|
$('.elementor-tabs').on('click', '.elementor-tab-title', function() { /* Elementor tabs */
|
|
hotspots.init();
|
|
});
|
|
|
|
$('.fl-tabs').on('click', 'a.fl-tabs-label', function() { /* Beaver Builder tabs */
|
|
hotspots.init();
|
|
});
|
|
|
|
$('.uabb-adv-accordion-button .uabb-tabs').on('click', function() { /* Ultimate Beaver Builder addons accordion and tabs */
|
|
setTimeout(function() {
|
|
hotspots.init();
|
|
}, 250);
|
|
});
|
|
$('.w-tabs-item').on('click', function() { /* Custom Woocommerce tabs */
|
|
setTimeout(function() {
|
|
hotspots.init();
|
|
}, 1000);
|
|
});
|
|
};
|
|
|
|
}(jQuery, window.hotspots = window.hotspots || {}));
|
|
|
|
jQuery(function(){
|
|
hotspots.setup();
|
|
hotspots.compatibilityFixes();
|
|
});
|
|
|
|
jQuery(document).on('elementor/popup/show', function(){
|
|
hotspots.setup();
|
|
hotspots.compatibilityFixes();
|
|
});
|
|
|
|
jQuery(window).on('resize orientationchange', function(e){
|
|
var $window = jQuery(this);
|
|
if (!hotspots.resizing) {
|
|
$window.trigger('resizeStart.responsilight');
|
|
hotspots.resizing = true;
|
|
}
|
|
clearTimeout(hotspots.resizeTimer);
|
|
hotspots.resizeTimer = setTimeout(function(){
|
|
hotspots.init();
|
|
$window.trigger('resizeComplete.responsilight');
|
|
hotspots.resizing = false;
|
|
}, 250);
|
|
});
|
|
|
|
jQuery(window).on('hashchange', function(){
|
|
hotspots.linkToArea();
|
|
});
|
|
|
|
window.onerror = function(errorMsg, url, lineNumber) { // This should be a fun little experiement!
|
|
var errorBox = jQuery('.da-error').show();
|
|
if (errorBox.length) {
|
|
var contents = errorBox.html();
|
|
errorBox.html(contents + '<br/><br/><strong>Error:</strong> ' + errorMsg + '<br/>Line ' + lineNumber + ': ' + url);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
/* Fix for Elementor bug - duplicating DA images when popup opens */
|
|
jQuery(document).on('elementor/popup/show', () => {
|
|
setTimeout(function(){
|
|
var imageContainers = jQuery('.hotspots-image-container');
|
|
imageContainers.each(function(){
|
|
var extraMapContainers = jQuery(this).find('.hotspots-map-container:not(:first)').remove(); // find all but the first one and remove them
|
|
});
|
|
}, 250);
|
|
} );
|