121 lines
4.9 KiB
JavaScript
121 lines
4.9 KiB
JavaScript
/*! elementor-pro - v3.21.0 - 30-04-2024 */
|
|
"use strict";
|
|
(self["webpackChunkelementor_pro"] = self["webpackChunkelementor_pro"] || []).push([["hotspot"],{
|
|
|
|
/***/ "../modules/hotspot/assets/js/frontend/handlers/hotspot.js":
|
|
/*!*****************************************************************!*\
|
|
!*** ../modules/hotspot/assets/js/frontend/handlers/hotspot.js ***!
|
|
\*****************************************************************/
|
|
/***/ ((__unused_webpack_module, exports) => {
|
|
|
|
|
|
|
|
Object.defineProperty(exports, "__esModule", ({
|
|
value: true
|
|
}));
|
|
exports["default"] = void 0;
|
|
class Hotspot extends elementorModules.frontend.handlers.Base {
|
|
getDefaultSettings() {
|
|
return {
|
|
selectors: {
|
|
hotspot: '.e-hotspot',
|
|
tooltip: '.e-hotspot__tooltip'
|
|
}
|
|
};
|
|
}
|
|
getDefaultElements() {
|
|
const selectors = this.getSettings('selectors');
|
|
return {
|
|
$hotspot: this.$element.find(selectors.hotspot),
|
|
$hotspotsExcludesLinks: this.$element.find(selectors.hotspot).filter(':not(.e-hotspot--no-tooltip)'),
|
|
$tooltip: this.$element.find(selectors.tooltip)
|
|
};
|
|
}
|
|
bindEvents() {
|
|
const tooltipTrigger = this.getCurrentDeviceSetting('tooltip_trigger'),
|
|
tooltipTriggerEvent = 'mouseenter' === tooltipTrigger ? 'mouseleave mouseenter' : tooltipTrigger;
|
|
if (tooltipTriggerEvent !== 'none') {
|
|
this.elements.$hotspotsExcludesLinks.on(tooltipTriggerEvent, event => this.onHotspotTriggerEvent(event));
|
|
}
|
|
}
|
|
onDeviceModeChange() {
|
|
this.elements.$hotspotsExcludesLinks.off();
|
|
this.bindEvents();
|
|
}
|
|
onHotspotTriggerEvent(event) {
|
|
const elementTarget = jQuery(event.target),
|
|
isHotspotButtonEvent = elementTarget.closest('.e-hotspot__button').length,
|
|
isTooltipMouseLeave = 'mouseleave' === event.type && (elementTarget.is('.e-hotspot--tooltip-position') || elementTarget.parents('.e-hotspot--tooltip-position').length),
|
|
isMobile = 'mobile' === elementorFrontend.getCurrentDeviceMode(),
|
|
isHotspotLink = elementTarget.closest('.e-hotspot--link').length,
|
|
triggerTooltip = !(isHotspotLink && isMobile && ('mouseleave' === event.type || 'mouseenter' === event.type));
|
|
if (triggerTooltip && (isHotspotButtonEvent || isTooltipMouseLeave)) {
|
|
const currentHotspot = jQuery(event.currentTarget);
|
|
this.elements.$hotspot.not(currentHotspot).removeClass('e-hotspot--active');
|
|
currentHotspot.toggleClass('e-hotspot--active');
|
|
}
|
|
}
|
|
|
|
// Fix bad UX of "Sequenced Animation" when editing other controls
|
|
editorAddSequencedAnimation() {
|
|
this.elements.$hotspot.toggleClass('e-hotspot--sequenced', 'yes' === this.getElementSettings('hotspot_sequenced_animation'));
|
|
}
|
|
hotspotSequencedAnimation() {
|
|
const elementSettings = this.getElementSettings(),
|
|
isSequencedAnimation = elementSettings.hotspot_sequenced_animation;
|
|
if ('no' === isSequencedAnimation) {
|
|
return;
|
|
}
|
|
|
|
// Start sequenced animation when element on viewport
|
|
const hotspotObserver = elementorModules.utils.Scroll.scrollObserver({
|
|
callback: event => {
|
|
if (event.isInViewport) {
|
|
hotspotObserver.unobserve(this.$element[0]);
|
|
|
|
// Add delay for each hotspot
|
|
this.elements.$hotspot.each((index, element) => {
|
|
if (0 === index) {
|
|
return;
|
|
}
|
|
const sequencedAnimation = elementSettings.hotspot_sequenced_animation_duration,
|
|
sequencedAnimationDuration = sequencedAnimation ? sequencedAnimation.size : 1000,
|
|
animationDelay = index * (sequencedAnimationDuration / this.elements.$hotspot.length);
|
|
element.style.animationDelay = animationDelay + 'ms';
|
|
});
|
|
}
|
|
}
|
|
});
|
|
hotspotObserver.observe(this.$element[0]);
|
|
}
|
|
setTooltipPositionControl() {
|
|
const elementSettings = this.getElementSettings(),
|
|
isDirectionAnimation = 'undefined' !== typeof elementSettings.tooltip_animation && elementSettings.tooltip_animation.match(/^e-hotspot--(slide|fade)-direction/);
|
|
if (isDirectionAnimation) {
|
|
this.elements.$tooltip.removeClass('e-hotspot--tooltip-animation-from-left e-hotspot--tooltip-animation-from-top e-hotspot--tooltip-animation-from-right e-hotspot--tooltip-animation-from-bottom');
|
|
this.elements.$tooltip.addClass('e-hotspot--tooltip-animation-from-' + elementSettings.tooltip_position);
|
|
}
|
|
}
|
|
onInit() {
|
|
super.onInit(...arguments);
|
|
this.hotspotSequencedAnimation();
|
|
this.setTooltipPositionControl();
|
|
if (window.elementor) {
|
|
elementor.listenTo(elementor.channels.deviceMode, 'change', () => this.onDeviceModeChange());
|
|
}
|
|
}
|
|
onElementChange(propertyName) {
|
|
if (propertyName.startsWith('tooltip_position')) {
|
|
this.setTooltipPositionControl();
|
|
}
|
|
if (propertyName.startsWith('hotspot_sequenced_animation')) {
|
|
this.editorAddSequencedAnimation();
|
|
}
|
|
}
|
|
}
|
|
exports["default"] = Hotspot;
|
|
|
|
/***/ })
|
|
|
|
}]);
|
|
//# sourceMappingURL=hotspot.70886883c622dd8d5eb2.bundle.js.map
|