https://www.blueseventy.co.nz/cdn/shop/t/24/assets/p80-hotspot.js?v=135449252398330047571758227475

1class HotspotButton extends HTMLElement{constructor(){super(),this.parent=this.closest("hotspot-generator"),this.leftOffset=this.style.left?this.style.left.replace("%",""):null,this.topOffset=this.style.top?this.style.top.replace("%",""):null,this.hotspotTitle=this.querySelector("[data-hotspot-title]")?this.querySelector("[data-hotspot-title]").value:null,this.hotspotContent=this.querySelector("[data-hotspot-content]")?this.querySelector("[data-hotspot-content]").value:null,this.active=!1,this.index=this.getAttribute("data-index"),this.bind()}generateHTML(){this.classList.add("hotspot__button"),this.style.left=this.leftOffset+"%",this.style.top=this.topOffset+"%";const icon=document.createElement("div");icon.classList.add("hotspot__icon");const dot=document.createElement("span");dot.classList.add("hotspot__dot"),icon.appendChild(dot),this.appendChild(icon);const content=document.createElement("div");content.classList.add("hotspot__content");const titleInput=document.createElement("input");titleInput.type="text",titleInput.placeholder="Hotspot Title",titleInput.setAttribute("data-hotspot-title","");const contentTextarea=document.createElement("textarea");contentTextarea.placeholder="Hotspot Content",contentTextarea.setAttribute("data-hotspot-content","");const removeButton=document.createElement("button");removeButton.classList.add("hotspot__remove"),removeButton.setAttribute("data-remove-hotspot",""),removeButton.innerText="Remove Hotspot",content.appendChild(titleInput),content.appendChild(contentTextarea),content.appendChild(removeButton),this.appendChild(content)}bind(){const button=this,removeButton=button.querySelector("[data-remove-hotspot]"),hotspotTitle=button.querySelector("[data-hotspot-title]"),hotspotContent=button.querySelector("[data-hotspot-content]"),hotspotDot=button.querySelector("[data-hotspot-dot]"),showButton=button.querySelector(".hotspot__dot");hotspotTitle&&hotspotTitle.addEventListener("keyup",function(e){button.hotspotTitle=e.target.value}),hotspotContent&&hotspotContent.addEventListener("keyup",function(e){button.hotspotContent=e.target.value}),removeButton&&removeButton.addEventListener("click",function(e){button.remove()}),hotspotDot&&hotspotDot.addEventListener("click",function(){button.classList.contains("active")?(button.deactivate(),button.toggleAccordion()):(button.parentElement.querySelectorAll("hotspot-button").forEach(sibling=>{sibling.deactivate()}),button.activate(),button.toggleAccordion())}),showButton&&showButton.addEventListener("click",function(){button.querySelector(".hotspot__content")&&button.querySelector(".hotspot__content").classList.toggle("hidden")})}activate(){this.active||(this.classList.add("active"),this.active=!0)}deactivate(){this.active&&(this.active=!1,this.classList.remove("active"))}toggleAccordion(){const parent=this.closest(".hotspot-image");if(!parent)return;const accordion=parent.querySelector(`hotspot-accordion-component[data-index='${this.index}']`);accordion&&accordion.toggleAccordion()}}customElements.define("hotspot-button",HotspotButton);class HotspotSlide extends HTMLElement{constructor(){super(),this.hotspots=[],this.bind()}bind(){const hotspot=this;hotspot.querySelector("img").addEventListener("click",function(e){const bounding=e.target.getBoundingClientRect(),imageHeight=e.target.clientHeight,imageWidth=e.target.clientWidth,x=e.clientX-bounding.left,y=e.clientY-bounding.top,offsetLeft=(100*x/imageWidth).toFixed(0),offsetTop=(100*y/imageHeight).toFixed(0);hotspot.addHotspot(offsetLeft,offsetTop)})}addHotspot(offsetLeft,offsetTop){const hotspot=document.createElement("hotspot-button");hotspot.leftOffset=offsetLeft,hotspot.topOffset=offsetTop,hotspot.parent=this.closest("hotspot-generator"),hotspot.generateHTML(),hotspot.bind(),this.hotspots.push(hotspot),this.querySelector("[data-hotspot-image-container]").appendChild(this.hotspots[this.hotspots.length-1])}}customElements.define("hotspot-slide",HotspotSlide);class HotspotGenerator extends HTMLElement{constructor(){super(),this.exportButton=this.querySelector("[data-export]"),this.slideContainer=this.querySelector("[data-sli

1des]"),this.jsonToggle=this.querySelector("[data-toggle-json]"),this.jsonModal=this.querySelector("[data-modal]"),this.jsonOutput=this.querySelector("[data-json]"),this.bind()}bind(){const hotspot=this;this.exportButton.addEventListener("click",function(){hotspot.exportData()}),this.jsonToggle.addEventListener("click",function(e){e.preventDefault(),hotspot.toggleModal()}),document.addEventListener("click",function(e){e.target.classList.contains("modal-background")&&(hotspot.jsonModal.classList.remove("modal--active"),document.body.classList.remove("disable-scroll"))})}exportData(){const hotspots=this.querySelectorAll("hotspot-button");if(!hotspots.length)return;let data="";hotspots.forEach(hotspot=>{data+=`
2      <object>
3        <key>offsetLeft</key><value>${hotspot.leftOffset}</value>
4        <key>offsetTop</key><value>${hotspot.topOffset}</value>
5        <key>hotspotTitle</key><value>${hotspot.hotspotTitle}</value>
6        <key>hotspotContent</key><value>${hotspot.hotspotContent}</value>
7      </object>
8      `}),data&&(this.jsonOutput.innerHTML="<pre></pre>",this.jsonOutput.querySelector("pre").textContent=data,this.jsonModal.classList.add("modal--active"),document.body.classList.add("disable-scroll"))}toggleModal(){this.jsonModal.classList.contains("modal--active")?(this.jsonModal.classList.remove("modal--active"),document.body.classList.remove("disable-scroll")):(this.jsonModal.classList.add("modal--active"),document.body.classList.add("disable-scroll"))}}customElements.define("hotspot-generator",HotspotGenerator);
9//# sourceMappingURL=/cdn/shop/t/24/assets/p80-hotspot.js.map?v=135449252398330047571758227475