@odopod/odo-hotspots/dist/odo-hotspots.min.js

A component which positions and opens hotspots.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("tiny-emitter")):"function"==typeof define&&define.amd?define(["tiny-emitter"],e):t.OdoHotspots=e(t.TinyEmitter)}(this,function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e={ClassName:{HOTSPOT:"odo-hotspot",HOTSPOT_LEFT:"odo-hotspot--left",HOTSPOT_RIGHT:"odo-hotspot--right",HOTSPOT_TOP:"odo-hotspot--top",HOTSPOT_BOTTOM:"odo-hotspot--bottom",BUTTON:"odo-hotspot__button",CONTENT:"odo-hotspot__content",LOADED:"is-loaded",OPEN:"is-open"},EventType:{INITIALIZED:"odohotspotsinitialized",WILL_OPEN:"odohotspotswillopen",WILL_CLOSE:"odohotspotswillclose"}},o=0;var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},s=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},n=function(){function t(o,s){i(this,t),this.parent=s,this.isOpen=!1,this.wrapper=o,this.button=o.querySelector("."+e.ClassName.BUTTON),this.content=o.querySelector("."+e.ClassName.CONTENT),this.percentPosition=this.parseWrapperPosition(),this.size=this.getContentSize(),this.side=this.getSide(),this.anchor=this.getAnchor(),this.position=this.getWrapperPosition()}return t.prototype.parseWrapperPosition=function(){var t=this.wrapper.getAttribute("data-position").split(",");return{x:parseFloat(t[0]),y:parseFloat(t[1])}},t.prototype.getContentSize=function(){return{width:this.content.offsetWidth,height:this.content.offsetHeight}},t.prototype.getSide=function(){return this.wrapper.classList.contains(e.ClassName.HOTSPOT_LEFT)?e.ClassName.HOTSPOT_LEFT:this.wrapper.classList.contains(e.ClassName.HOTSPOT_RIGHT)?e.ClassName.HOTSPOT_RIGHT:null},t.prototype.getAnchor=function(){return this.wrapper.classList.contains(e.ClassName.HOTSPOT_TOP)?e.ClassName.HOTSPOT_TOP:this.wrapper.classList.contains(e.ClassName.HOTSPOT_BOTTOM)?e.ClassName.HOTSPOT_BOTTOM:null},t.prototype.refresh=function(){var t=this;this.percentPosition=this.parseWrapperPosition(),this.size=this.getContentSize(),this.position=this.getWrapperPosition(),this.refreshId=requestAnimationFrame(function(){t._removeContentPosition(),t.setPosition()})},t.prototype._setWrapperPosition=function(){this.wrapper.style.left=this.percentPosition.x+"%",this.wrapper.style.top=this.percentPosition.y+"%"},t.prototype.getWrapperPosition=function(){var t=Math.round(this.parent.size.width*this.percentPosition.x/100),e=Math.round(this.parent.size.height*this.percentPosition.y/100);return{left:t,top:e,right:t+Math.round(this.wrapper.offsetWidth),bottom:e+Math.round(this.wrapper.offsetHeight)}},t.prototype._getOptimalSide=function(){var t=this.position.right+this.size.width<=this.parent.size.width,o=this.position.left-this.size.width>=0;return o&&t||!o&&!t?this.percentPosition.x<50?e.ClassName.HOTSPOT_RIGHT:e.ClassName.HOTSPOT_LEFT:t?e.ClassName.HOTSPOT_RIGHT:e.ClassName.HOTSPOT_LEFT},t.prototype._getOptimalAnchor=function(){var t=this.position.bottom-this.size.height>=0,o=this.position.top+this.size.height<=this.parent.size.height;return o&&t||!o&&!t?this.percentPosition.y>50?e.ClassName.HOTSPOT_TOP:e.ClassName.HOTSPOT_BOTTOM:t?e.ClassName.HOTSPOT_TOP:e.ClassName.HOTSPOT_BOTTOM},t.prototype._setContentPosition=function(){null===this.side&&this.wrapper.classList.add(this._getOptimalSide()),null===this.anchor&&this.wrapper.classList.add(this._getOptimalAnchor())},t.prototype._removeContentPosition=function(){null===this.side&&this.wrapper.classList.remove(e.ClassName.HOTSPOT_LEFT,e.ClassName.HOTSPOT_RIGHT),null===this.anchor&&this.wrapper.classList.remove(e.ClassName.HOTSPOT_TOP,e.ClassName.HOTSPOT_BOTTOM)},t.prototype.setPosition=function(){this._setWrapperPosition(),this._setContentPosition()},t.prototype.show=function(){this.wrapper.classList.add(e.ClassName.OPEN),this.content.setAttribute("aria-hidden",!1),this.button.setAttribute("aria-describedby",this.content.id),this.isOpen=!0},t.prototype.hide=function(){this.wrapper.classList.remove(e.ClassName.OPEN),this.content.setAttribute("aria-hidden",!0),this.button.removeAttribute("aria-describedby"),this.isOpen=!1},t.prototype.setA11yAttributes=function(){var t;(t=this.content).id||(o+=1,t.id="odo-hotspots"+o),this.content.setAttribute("aria-hidden",!0),this.content.setAttribute("role","tooltip")},t.prototype._removeA11yAttributes=function(){this.button.removeAttribute("aria-hidden"),this.content.removeAttribute("role")},t.prototype.dispose=function(){cancelAnimationFrame(this.refreshId),this._removeContentPosition(),this._removeA11yAttributes(),this.wrapper.style.left="",this.wrapper.style.top="",this.wrapper=null,this.button=null,this.content=null,this.parent=null},t}(),r=function(t){function e(o){i(this,e);var n=s(this,t.call(this));return n.element=o,n.size=n._getContainerSize(),n.hotspots=n._getHotspots(),n._noopElement=n._getFirstBodyDescendant(),n._noop=function(){},n._activeHotspot=null,n._bindEvents(),n.hotspots.forEach(function(t){t.setA11yAttributes(),t.setPosition()}),n.element.classList.add(e.ClassName.LOADED),n.dispatchEvent(e.EventType.INITIALIZED),n}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.getElementsByClass=function(t){return Array.from(this.element.querySelectorAll("."+t))},e.prototype._getFirstBodyDescendant=function(){for(var t=this.element;t;){var e=t.parentElement;if(e===document.body)return t;t=e}return null},e.prototype._getHotspots=function(){var t=this;return this.getElementsByClass(e.ClassName.HOTSPOT).map(function(e){return new n(e,t)})},e.prototype._getHotspotByWrapper=function(t){for(var e=0,o=this.hotspots.length;e<o;e++)if(this.hotspots[e].wrapper===t)return this.hotspots[e];return null},e.prototype._getContainerSize=function(){return{width:this.element.offsetWidth,height:this.element.offsetHeight}},e.prototype.dispatchEvent=function(t,e){var o={defaultPrevented:!1,preventDefault:function(){this.defaultPrevented=!0}};return e&&(o.hotspot=e),this.emit(t,o),o.defaultPrevented},e.prototype._bindEvents=function(){var t=this;this._clickHandler=this._handleHotspotClick.bind(this),this._resizeHandler=function(t,e,o){var i,s,n,r,p;function a(){var h=Date.now()-r;h<e&&h>=0?i=setTimeout(a,e-h):(i=null,o||(p=t.apply(n,s),n=s=null))}null==e&&(e=100);var h=function(){n=this,s=arguments,r=Date.now();var h=o&&!i;return i||(i=setTimeout(a,e)),h&&(p=t.apply(n,s),n=s=null),p};return h.clear=function(){i&&(clearTimeout(i),i=null)},h.flush=function(){i&&(p=t.apply(n,s),n=s=null,clearTimeout(i),i=null)},h}(this._handleResize.bind(this),200),this._loadHandler=this._handleLoad.bind(this),this._outerClickHandler=this._handleOuterClick.bind(this),window.addEventListener("resize",this._resizeHandler,!1),window.addEventListener("load",this._loadHandler,!1),this.hotspots.forEach(function(e){e.button.addEventListener("click",t._clickHandler,!1)})},e.prototype.closeAllHotspots=function(){var t=this;this.hotspots.forEach(function(e){t.closeHotspot(e)})},e.prototype.toggleHotspot=function(t){t.isOpen?this.closeHotspot(t):this.openHotspot(t)},e.prototype.openHotspot=function(t){var o=this;t.isOpen||this.dispatchEvent(e.EventType.WILL_OPEN,t)||(this.closeAllHotspots(),t.show(),this.setActiveHotspot(t),setTimeout(function(){o._listenForOuterClicks()},0))},e.prototype.closeHotspot=function(t){t.isOpen&&!this.dispatchEvent(e.EventType.WILL_CLOSE,t)&&(t.hide(),this.setActiveHotspot(null),this._removeOuterClick())},e.prototype._listenForOuterClicks=function(){this._noopElement.addEventListener("click",this._noop,!1),this._noopElement.style.WebkitTapHighlightColor="transparent",document.body.addEventListener("click",this._outerClickHandler,!1)},e.prototype._removeOuterClick=function(){this._noopElement.removeEventListener("click",this._noop,!1),this._noopElement.style.WebkitTapHighlightColor="",document.body.removeEventListener("click",this._outerClickHandler,!1)},e.prototype._handleHotspotClick=function(t){t.preventDefault();var e=this._getHotspotByWrapper(t.currentTarget.parentElement);this.toggleHotspot(e)},e.prototype._handleOuterClick=function(t){this.getActiveHotspot().content.contains(t.target)||this.closeHotspot(this.getActiveHotspot())},e.prototype._handleResize=function(){this.refresh()},e.prototype._handleLoad=function(){window.removeEventListener("load",this._loadHandler,!1),this.refresh()},e.prototype.getActiveHotspot=function(){return this._activeHotspot},e.prototype.setActiveHotspot=function(t){this._activeHotspot=t},e.prototype.refresh=function(){this.size=this._getContainerSize(),this.hotspots.forEach(function(t){t.refresh()})},e.prototype.dispose=function(){var t=this;this.closeAllHotspots(),this.hotspots.forEach(function(e){e.button.removeEventListener("click",t._clickHandler,!1),e.dispose()}),this.hotspots=null,window.removeEventListener("load",this._loadHandler,!1),window.removeEventListener("resize",this._resizeHandler,!1),this.element.classList.remove(e.ClassName.LOADED),this.element=null,this._activeHotspot=null,this._noopElement=null},e}(t);return Object.assign(r,e),r});
//# sourceMappingURL=odo-hotspots.min.js.map