dynamic-popup.min.js

"use strict";function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}();!function(a){if("function"==typeof bootstrap)bootstrap("DynamicPopup",a);else if("object"==typeof exports&&"object"==typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define(a);else if("undefined"!=typeof ses){if(!ses.ok())return;ses.makeDynamicPopup=a}else{if("undefined"==typeof window&&"undefined"==typeof self)throw new Error("This environment was not anticipated by DynamicPopup. Please file a bug.");var b="undefined"!=typeof window?window:self,c=b.DynamicPopup;b.DynamicPopup=a(),b.DynamicPopup.noConflict=function(){return b.DynamicPopup=c,this}}}(function(){!function(){for(var a=0,b=["ms","moz","webkit","o"],c=0;c<b.length&&!window.requestAnimationFrame;++c)window.requestAnimationFrame=window[b[c]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[b[c]+"CancelAnimationFrame"]||window[b[c]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(b,c){var d=(new Date).getTime(),e=Math.max(0,16-(d-a)),f=window.setTimeout(function(){b(d+e)},e);return a=d+e,f}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)})}();var a=function(){function a(b){var c,d=this;return _classCallCheck(this,a),this.__uid=(new Date).getTime(),this.el=b.el,this.content=b.content,this.classes="string"==typeof b.className?[b.className]:b.className,this.direction=b.direction||"bottom",this.popup=null,this.chevron=null,this.defaultChevronWidth=16,this.asyncElements=["img"],this.prefetch=b.prefetch,this.initialWidth=0,this.baseClass="dynamic-popup",this.contentBase=this.baseClass+"__content",this.chevronBase=this.baseClass+"__chevron",this.position=function(){d._position()},this.onClickEl=function(){d._onClickEl()},this.onClickAnyWhere=function(a){d._onClickAnyWhere(a)},this.el.addEventListener("click",this.onClickEl),this.styles=(c={},_defineProperty(c,"."+this.baseClass,["position: absolute","opacity: 0","background: rgba(0, 0, 0, .85)","color: #fff","will-change: top, left","-webkit-transform: translateZ(0)","transform: translateZ(0)"]),_defineProperty(c,"."+this.baseClass+" img",["vertical-align: middle"]),_defineProperty(c,"."+this.chevronBase,["position: absolute","opacity: 0","color: rgba(0, 0, 0, .85)","width: "+this.defaultChevronWidth+"px","will-change: top, left","-webkit-transform: translateZ(0)","transform: translateZ(0)"]),c),this.stylize(),this.prefetch&&this.preFetchResources(),this}return _createClass(a,[{key:"bindEvents",value:function(){var a=this;window.addEventListener("resize",this.position),window.addEventListener("scroll",this.position),document.body.addEventListener("click",this.onClickAnyWhere),[].forEach.call(this.popup.querySelectorAll(this.asyncElements.join(",")),function(b){b.complete||b.addEventListener("load",a.position)})}},{key:"unbindEvents",value:function(){var a=this;window.removeEventListener("resize",this.position),window.removeEventListener("scroll",this.position),document.body.removeEventListener("click",this.onClickAnyWhere),[].forEach.call(this.popup.querySelectorAll(this.asyncElements.join(",")),function(b){b.removeEventListener("load",a.position)})}},{key:"stylize",value:function(){function a(a,b,c,d){"insertRule"in a?a.insertRule(b+"{"+c+"}",d):"addRule"in a&&a.addRule(b,c,d)}var b="dynamic-popup-styles",c=document.getElementById(b);if(!c){var d=function(){var a=document.createElement("style");return a.id=b,a.appendChild(document.createTextNode("")),document.head.insertBefore(a,document.head.firstChild),a.sheet}();for(var e in this.styles)if(this.styles.hasOwnProperty(e)){var f=!0,g=!1,h=void 0;try{for(var i,j=this.styles[e][Symbol.iterator]();!(f=(i=j.next()).done);f=!0){var k=i.value;a(d,e,k)}}catch(l){g=!0,h=l}finally{try{!f&&j["return"]&&j["return"]()}finally{if(g)throw h}}}}}},{key:"preFetchResources",value:function(){var a=document.createElement("div");a.innerHTML=this.content,[].forEach.call(a.querySelectorAll(this.asyncElements.join(",")),function(a){var b=document.createElement(a.tagName);b.src=a.src})}},{key:"render",value:function(){var a=this;this.popup=document.createElement("div"),this.popup.setAttribute("data-dynamic-popup",this.__uid),this.popup.classList.add(this.baseClass),this.popupContent=document.createElement("div"),this.popupContent.style.position="relative",this.popupContent.innerHTML=this.content,this.popupContent.classList.add(this.contentBase),this.chevron=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.chevron.setAttribute("viewBox","0 0 2 2"),this.chevron.setAttribute("preserveAspectRatio","xMinYMin meet"),this.chevron.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),this.chevron.classList.add(this.chevronBase);var b=document.createElementNS("http://www.w3.org/2000/svg","polygon");b.setAttribute("points","1,0.8 0,2 2,2"),b.setAttribute("style","fill:currentColor"),this.chevron.appendChild(b);var c=!0,d=!1,e=void 0;try{for(var f,g=this.classes[Symbol.iterator]();!(c=(f=g.next()).done);c=!0){var h=f.value;this.popup.classList.add(h),this.popupContent.classList.add(h+"__content"),this.chevron.classList.add(h+"__chevron")}}catch(i){d=!0,e=i}finally{try{!c&&g["return"]&&g["return"]()}finally{if(d)throw e}}this.popup.appendChild(this.popupContent),this.popup.appendChild(this.chevron),document.body.appendChild(this.popup),setTimeout(function(){a.initialWidth=a.initialWidth||a.popup.getBoundingClientRect().width,a.position()},1)}},{key:"destroy",value:function(){this.popup&&(this.unbindEvents(),this.popup.parentNode.removeChild(this.popup),this.popup=null,this.chevron=null)}},{key:"_onClickEl",value:function(){this.popup?this.popup&&this.destroy():(this.render(),this.bindEvents())}},{key:"_onClickAnyWhere",value:function(a){var b=this;if(this.popup){var c=a.target,d=this._dir(c,"parentNode");d.push(c);var e=d.filter(function(a){return a==b.el}).length,f=d.filter(function(a){return a==b.popup}).length;f||e||this.destroy()}}},{key:"_dir",value:function(a,b){for(var c=[];(a=a[b])&&9!==a.nodeType;)1===a.nodeType&&c.push(a);return c}},{key:"readDOMValues",value:function(a){var b=this;setTimeout(function(){var c=function(){var a=document.body.scrollTop,b=document.documentElement.scrollTop;return Math.max(a,b)}(),d=function(){var a=document.body.scrollLeft,b=document.documentElement.scrollLeft;return Math.max(a,b)}(),e=b.el.getBoundingClientRect(),f=b.popup.getBoundingClientRect(),g=.8*b.chevron.getBoundingClientRect().width;a({scrollTop:c,scrollLeft:d,targetPosition:e,popupPosition:f,gapWidth:g})},1)}},{key:"_position",value:function(){var a=this;requestAnimationFrame(function(){a.readDOMValues(function(b){var c=b.scrollTop,d=b.scrollLeft,e=b.targetPosition,f=b.popupPosition,g=b.gapWidth,h=a.direction,i=window.innerWidth,j=window.innerHeight,k=e.top+c,l=e.left+d,m=e.width,n=e.height,o=a.initialWidth,p=f.width,q=f.height,r={top:k-q-g,bottom:k+n+g,left:k+n/2-q/2,right:k+n/2-q/2},s={top:l+m/2-p/2,bottom:l+m/2-p/2,left:l-p-g,right:l+m+g},t={top:{top:"auto",bottom:"0",left:l-s.top+m/2+"px","-webkit-transform":"rotate(180deg) translate(50%, -100%) translateZ(0)",transform:"rotate(180deg) translate(50%, -100%) translateZ(0)"},bottom:{bottom:"auto",top:"0",left:l-s.top+m/2+"px","-webkit-transform":"rotate(0deg) translate(-50%, -100%) translateZ(0)",transform:"rotate(0deg) translate(-50%, -100%) translateZ(0)"},left:{bottom:"auto",top:q/2+"px",left:p+"px","-webkit-transform":"rotate(90deg) translate(-50%, 0%) translateZ(0)",transform:"rotate(90deg) translate(-50%, 0%) translateZ(0)"},right:{bottom:"auto",top:q/2+"px",left:"0","-webkit-transform":"rotate(-90deg) translate(50%, -100%) translateZ(0)",transform:"rotate(-90deg) translate(50%, -100%) translateZ(0)"}},u=s[h],v=r[h],w=t[h],x=0>=u,y=u+p>=i,z=0>=v-c,A=v+q-c>=j;if(x&&(("top"===h||"bottom"===h)&&(u-=u,w.left=l+m/2+"px"),"left"===a.direction&&(u=s.right,w=t.right)),y&&(("top"===h||"bottom"===h)&&(u=i+d-(o+2),(0>=u||0===o)&&(u=i+d-p),w.left=l-u+m/2+"px"),"right"===h&&s.left>0&&(u=s.left,w=t.left)),z){if("right"===h||"left"===h){var B=c-v;B>q/4||(v+=B,w.top=parseInt(w.top,10)-B+"px")}if("top"===h){v=r.bottom;var C=w.left;w=t.bottom,w.left=C}}if(A){if("right"===h||"left"===h){var B=v+q-c-j;B>q/4||(v-=B,w.top=parseInt(w.top,10)+B+"px")}if("bottom"===h){v=r.top;var C=w.left;w=t.top,w.left=C}}requestAnimationFrame(function(){var b="; left: "+u+"px; top: "+v+"px";a.popup.style.cssText.match(/opacity/)||(b+="; opacity: 1"),a.popup.style.cssText+=b;var c="";for(var d in w)w.hasOwnProperty(d)&&(c+="; "+d+": "+w[d]);a.chevron.style.cssText.match(/opacity/)||(c+="; opacity: 1"),a.chevron.style.cssText+=c})})})}}]),a}();return a});