← All changes | assets/build/blocks/image-hotspot/view.js +3 -0 2.7.5 → 2.16.0 View file →

		@@ -1,0 +1,3 @@
	1	+(()=>{"use strict";const t=class{constructor(t){t&&(this.element=t,this.tooltipContent=this.element.querySelector(".ablocks-image-hotspot__tooltip-content"),this.pins=this.element.querySelectorAll(".ablocks-image-hotspot__pin"),this.activeTooltipIndex=null,this.tooltipContent&&this.pins.length&&(this.tooltipContent.style.display="none",this.initPins()))}initPins(){this.pins.forEach((t,o)=>{const i=t.dataset.trigger;this.updatePinPosition(t),"onClick"===i?t.addEventListener("click",()=>this.handleTooltip(o,t)):t.addEventListener("mouseover",()=>this.handleTooltip(o,t))}),window.addEventListener("resize",()=>{if(this.pins.forEach(t=>this.updatePinPosition(t)),null!==this.activeTooltipIndex){const t=this.pins[this.activeTooltipIndex];t&&this.updateTooltipPosition(t)}})}getResponsiveAxis(t){const o=window.innerWidth,i=JSON.parse(t.dataset.xaxis),e=JSON.parse(t.dataset.yaxis);return{xAxis:o<=480?i.mobile??i.tablet??i.desktop:o<=800?i.tablet??i.desktop:i.desktop,
	2	+yAxis:o<=480?e.mobile??e.tablet??e.desktop:o<=800?e.tablet??e.desktop:e.desktop}}updatePinPosition(t){const{xAxis:o,yAxis:i}=this.getResponsiveAxis(t);t.style.left=`${o}%`,t.style.top=`${i}%`}updateTooltipPosition(t){const{xAxis:o,yAxis:i}=this.getResponsiveAxis(t);let e=parseFloat(o),s=parseFloat(i);this.tooltipContent.style.left=`${e}%`,this.tooltipContent.style.top=`${s}%`,this.tooltipContent.style.display="block";const n=this.tooltipContent.getBoundingClientRect(),l=window.innerWidth,a=window.innerHeight;n.left<0?e=5:n.right>l&&(e=95),n.top<0?s=5:n.bottom>a&&(s=95)}handleTooltip(t,o){const i=this.element.querySelectorAll(".ablocks-block--image-hotspot-child");if(!i)return;if(this.tooltipContent.querySelector(".ablocks-icon.ablocks-icon--close").addEventListener("click",()=>{this.tooltipContent.style.display="none"}),null!==this.activeTooltipIndex){const t=i[this.activeTooltipIndex]?.children[0];t&&(t.classList.remove("ablocks-image-hotspot__tooltip--active"),
	3	+this.tooltipContent.style.display="none")}this.activeTooltipIndex=t;const e=i[t]?.children[0];e&&(e.classList.add("ablocks-image-hotspot__tooltip--active"),this.updateTooltipPosition(o))}};document.addEventListener("DOMContentLoaded",()=>{!function(t,o,i="ablocksInitialized"){t&&("function"==typeof t.forEach?t:[t]).forEach(t=>{t&&t.dataset&&!t.dataset[i]&&(t.dataset[i]="1",o(t))})}(document.querySelectorAll(".ablocks-block--image-hotspot"),o=>{new t(o)},"ablocksHotspotInit")})})();