codeMini.js

"use strict";var demoNamespace={steps:[{url:"1.png",hotSpot:{pos:[2,120],size:[261,41]},tooltip:{pos:[149,139],orientation:"right",text:"Click to see the Cost Explorer panel"}},{url:"cost-explorer2.png",hotSpot:{pos:[484,174],size:[72,32]},tooltip:{pos:[548,190],orientation:"right",text:"Show each separate service in its color"}},{url:"cost-explorer2-by-service.png",hotSpot:{pos:[763,250],size:[35,253]},tooltip:{pos:[781,391],orientation:"right",text:"Click the bar to see the details on this expense"}},{url:"cost-explorer2-by-service-support.png",hotSpot:{pos:[601,123],size:[78,37]},tooltip:{pos:[672,139],orientation:"right",text:'Let\'s change the granularity to the "Monthly"'}},{url:"cost-explorer2-by-service-select.png",hotSpot:{pos:[596,217],size:[131,29]}},{url:"cost-explorer2-by-service-monthly.png",hotSpot:{pos:[862,128],size:[96,31]},tooltip:{pos:[860,140],orientation:"left",text:"Let's show the line graph instead of stack chart"}},{url:"cost-explorer-stack.png",hotSpot:{pos:[862,213],size:[119,28]}},{url:"cost-explorer-stack-line.png",hotSpot:{pos:[16,152],size:[134,39]}},{url:"reports.png",hotSpot:{pos:[16,577],size:[144,39]}},{url:"reservations.png"}],currentStep:-1,originalSize:[1230,740],overlayIsShown:!0,init:()=>{let e=document.getElementById("demoContainer");const t=document.getElementById("demo-image").clientWidth;e.clientWidth>t&&(e.style.width=t+"px");const o=document.getElementById("progressBar"),s=demoNamespace.steps.length,p=100/s;for(var n=0;n<s;n++){let e=document.createElement("div");e.id="step"+n,e.className="step",e.style.width=p+"%",e.setAttribute("title","Step "+(n+1)),e.addEventListener("click",function(e){return function(){demoNamespace.goToStep(0,e)}}(n),!0),o.appendChild(e)}},start:()=>{document.getElementById("start").style.display="none",document.getElementById("overlay").style.display="none",demoNamespace.goToStep(1),demoNamespace.overlayIsShown=!1},goToStep:(e,t)=>{demoNamespace.overlayIsShown&&(document.getElementById("start").style.display="none",document.getElementById("overlay").style.display="none"),null==t&&(1==e&&demoNamespace.currentStep==demoNamespace.steps.length-1||-1==e&&demoNamespace.currentStep<=0)?demoNamespace.hideHotSpot():null!=t&&(t<0||t>=demoNamespace.steps.length)?demoNamespace.hideHotSpot():(demoNamespace.currentStep=null!=t?t:demoNamespace.currentStep+e,demoNamespace.changeScreen(),demoNamespace.steps[demoNamespace.currentStep].hotSpot?demoNamespace.createHotSpot():demoNamespace.hideHotSpot(),demoNamespace.steps[demoNamespace.currentStep].tooltip?demoNamespace.createTooltip():demoNamespace.hideTooltip(),demoNamespace.setCurrentStepProgress())},setCurrentStepProgress:()=>{let e=document.getElementsByClassName("current-step");if(e.length>0)for(var t of e)t.classList.remove("current-step");document.getElementById("step"+demoNamespace.currentStep).classList.add("current-step")},recalculateSizePosition:(e,t)=>{let o=document.getElementById("demo-image");const s=o.clientWidth,p=o.clientHeight,n=s*e[0]/demoNamespace.originalSize[0],a=p*e[1]/demoNamespace.originalSize[1];if(t){return{pos:[n,a],size:[s*t[0]/demoNamespace.originalSize[0],p*t[1]/demoNamespace.originalSize[1]]}}return{pos:[n,a]}},createHotSpot:()=>{let e=demoNamespace.steps[demoNamespace.currentStep];const t=demoNamespace.recalculateSizePosition(e.hotSpot.pos,e.hotSpot.size);let o=document.getElementById("hotspotLink");o||(o=document.createElement("div"),document.getElementById("demoContainer").appendChild(o),o.id="hotspotLink",o.className="hotspot"),o.style.display="block",o.onclick=(()=>{demoNamespace.goToStep(1)}),o.style.width=t.size[0]+"px",o.style.height=t.size[1]+"px",o.style.left=t.pos[0]+"px",o.style.top=t.pos[1]+"px",o.blur()},createTooltip:()=>{let e=demoNamespace.steps[demoNamespace.currentStep];const t=demoNamespace.recalculateSizePosition(e.tooltip.pos);let o=document.getElementById("tooltipElement");o||(o=document.createElement("div"),document.getElementById("demoContainer").appendChild(o),o.id="tooltipElement"),o.style.display="block",o.className="tooltip-black "+e.tooltip.orientation,o.dataset.text=e.tooltip.text,o.style.left=t.pos[0]+"px",o.style.top=t.pos[1]+"px"},hideTooltip:()=>{let e=document.getElementById("tooltipElement");e&&(e.style.display="none")},hideHotSpot:()=>{let e=document.getElementById("hotspotLink");e&&(e.style.display="none")},changeScreen:()=>{let e=document.getElementById("demo-image");e&&(e.src="images/screens/"+demoNamespace.steps[demoNamespace.currentStep].url)}};document.addEventListener("DOMContentLoaded",function(e){demoNamespace.init()});