https://www.plusnet.de/_Resources/Static/Packages/Plusnet.Website/…/ContentWithHotspots.chunk-572f848a.js

1var p=Object.defineProperty;var m=(l,e,t)=>e in l?p(l,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[e]=t;var n=(l,e,t)=>m(l,typeof e!="symbol"?e+"":e,t);import{L as u}from"./Logger.chunk-2e74b09e.js";import{A as v}from"./main.bundle-95265ef3.js";class f{constructor(e,t=["FormatD.HotspotEditor:Content.Hotspot"]){n(this,"editable",!0);n(this,"debug");n(this,"selectedElement");n(this,"domSection");n(this,"hotspotNodeTypes");n(this,"activeMouseDownListener");n(this,"activeMouseMoveListener");n(this,"activeMouseUpListener");this.domSection=e,this.hotspotNodeTypes=t,document.querySelector("body").classList.contains("neos-backend")&&this.initialize()}setEditable(e){!e&&this.selectedElement&&(this.selectedElement.removeEventListener("mousedown",this.activeMouseDownListener),this.selectedElement.removeEventListener("mouseup",this.activeMouseUpListener),this.selectedElement.removeEventListener("mousemove",this.activeMouseMoveListener),this.selectedElement=null),this.editable=e}initialize(){window.parent.addEventListener("fd-hotspot-editor:hotspotInspectorValueChanged",e=>{this._hotspotValueChangeHandler(e)}),document.addEventListener("Neos.NodeSelected",e=>{this.nodeSelectHandler(e)},!1)}_hotspotValueChangeHandler(e){const t=e.detail.coordinateId;if(!t.includes("x")&&!t.includes("y")||!this.selectedElement)return;const s=e.detail.coordinateValue;t.includes("x")&&this._moveElement(this.selectedElement,s,void 0),t.includes("y")&&this._moveElement(this.selectedElement,void 0,s)}nodeSelectHandler(e){const t=e.detail;if(this.hotspotNodeTypes.includes(e.detail.node.nodeType)&&this.editable){this.selectedElement=t.element;const s=this.selectedElement.parentElement.parentElement,o=e.detail.element.offsetTop,h=e.detail.element.offsetLeft;let a={x:0,y:0},r={x:0,y:0},d={x:0,y:0};o!==void 0&&h!==void 0&&(a.x=h,a.y=o),this.activeMouseUpListener=i=>{i.preventDefault();const c=i.composedPath().find(g=>g.className==="hotspots-container");this._dispatchHotspotDraggedEvent({x:d.x+r.x,y:d.y+r.y},c),a.x=d.x,a.y=d.y,c.removeEventListener("mouseup",this.activeMouseUpListener),c.removeEventListener("mousemove",this.activeMouseMoveListener),this.selectedElement&&this.selectedElement.removeEventListener("mousedown",this.activeMouseDownListener)},this.activeMouseDownListener=i=>{i.preventDefault(),s.addEventListener("mouseup",this.activeMouseUpListener),s.addEventListener("mousemove",this.activeMouseMoveListener),a.x=i.clientX-r.x,a.y=i.clientY-r.y,r.x=this.selectedElement.getBoundingClientRect().left-this.selectedElement.parentElement.parentElement.getBoundingClientRect().left,r.y=this.selectedElement.getBoundingClientRect().top-this.selectedElement.parentElement.parentElement.getBoundingClientRect().top},this.activeMouseMoveListener=i=>{i.preventDefault(),i.stopPropagation(),d.x=i.clientX-a.x,d.y=i.clientY-a.y,this._moveElement(this.selectedElement,d.x+r.x,d.y+r.y,"px")},this.selectedElement.addEventListener("mousedown",this.activeMouseDownListener)}else this.selectedElement&&(this.selectedElement.removeEventListener("mousedown",this.activeMouseDownListener),this.selectedElement.removeEventListener("mousedown",this.activeMouseUpListener),this.selectedElement.removeEventListener("mousedown",this.activeMouseMoveListener),this.selectedElement=null)}_dispatchHotspotDraggedEvent(e,t){t&&(e.x=e.x/t.offsetWidth*100,e.y=e.y/t.offsetHeight*100);const s=new CustomEvent("fd-hotspot-editor:hotspotDragged",{detail:{Payload:{pos:{xPosition:e.x,yPosition:e.y}}}});window.parent.dispatchEvent(s)}_moveElement(e,t,s,o){o=o||"%",t&&(e.style.left=String(t)+o),s&&(e.style.top=String(s)+o)}log(){this.debug&&console.log(...arguments)}}class y{constructor(e){n(this,"logger");n(this,"draggableHotspots");this.logger=e}getDraggableHotspotsNodeTypes(e){return["FormatD.HotspotEditor:Content.Hotspot","FormatD.DesignSystem:Content.HotspotWithLayer"]}createDraggableHotspots(e){return new f(e,this.getDraggableHotspotsNodeTypes(e))}initialize(e){this.initializeBackend(e);const t=e.querySelectorAll(".hotspots-area");t.length<1||this.initializeFrontend(e,t)}initializeBackend(e){this.draggableHotspots=this.createDraggableHotspots(e)}initializeFrontend(e,t){this.logger.log("initialized for: ",e),t.forEach(s=>{this.initializeHotspotArea(s)})}getLayersForHotspotArea(e){return Array.from(e.querySelectorAll(".hotspot-layer"))}initializeHotspotArea(e){this.logger.log("initializing hotspot area",e);const t=this.getLayersForHotspotArea(e);t.forEach(s=>{this.initializeLayer(e,s)}),t.length>0&&this.handleClickOutsideShowroomLayer(e,t)}initializeLayer(e,t){this.logger.log("initializing hotspot layer",t),t.querySelector(".hotspot-close").addEventListener("click",o=>

1{this.deactivateHotspot(t.dataset.hotspotId,e)});const s=e.querySelector('.hotspot[data-hotspot-id="'+t.dataset.hotspotId+'"]');return this.logger.log("initializing corresponding layer hotspot",s),s.addEventListener(window.fdds.Context.isBackend()?"contextmenu":"click",o=>{o.preventDefault(),this.activateHotspot(s.dataset.hotspotId,e)}),s}activateHotspot(e,t){this.logger.log("Activating hotspot",e),this.draggableHotspots.setEditable(!1);const s=t.querySelector('.hotspot-layer[data-hotspot-id="'+e+'"]');this.logger.log("Activating layer",s),s.classList.toggle("active"),this.toggleHotspotsVisibility(t)}deactivateHotspot(e,t){this.logger.log("Deactivating hotspot",e);const s=t.querySelector('.hotspot-layer[data-hotspot-id="'+e+'"]');this.logger.log("Deactivating layer",s),s.classList.toggle("active"),this.draggableHotspots.setEditable(!0),this.toggleHotspotsVisibility(t)}handleClickOutsideShowroomLayer(e,t){window.fdds.Context.isBackend()||document.addEventListener("click",s=>{for(const o of t)!o.classList.contains("active")||!o.contains(s.target)||s.target instanceof HTMLElement&&s.target.closest(".hotspot")===null&&this.deactivateHotspot(o.dataset.hotspotId,e)})}toggleHotspotsVisibility(e){e.querySelectorAll(".hotspot").forEach(s=>s.classList.toggle("hidden"))}}class x extends v{initialize(e){const t=new u("ContentWithHotspots");new y(t).initialize(e)}}export{y as ContentWithHotspot,x as default};