popin/lib/popin.js

Create your custom popin

"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),Popin=function(){function e(t){var n=this;_classCallCheck(this,e);var o={overlay:!0};if(t)for(var i in t)o.hasOwnProperty(i)&&(o[i]=t[i]);if(this.popins=document.querySelectorAll(o&&o.popin?o.popin:".js-popin"),this.isDevice="ontouchstart"in document.documentElement,this.instanciedPopins=[],this.instanciedPopinsOptions=[],this.openedPopins=[],o.overlay){var s=document.createElement("div");s.id="popin-overlay",s.className="popin-overlay",document.body.appendChild(s),this.overlay=document.getElementById("popin-overlay"),this.overlay.addEventListener("click",function(e){var t=n.instanciedPopinsOptions[n.openedPopins[n.openedPopins.length-1]];n.close(t)},!1)}}return _createClass(e,[{key:"init",value:function(e){var t=this,n={overlayVisible:!0,closeButton:!0,buttonSticky:!1,beforeOpen:null,afterOpen:null,beforeClose:null,afterClose:null,disableAfterClose:null};if(e)for(var o in e)e.hasOwnProperty(o)&&(n[o]=e[o]);n.className&&(this[n.className]=document.querySelectorAll("."+n.className)),[].forEach.call(this[n.className]?this[n.className]:this.popins,function(e,o){var i={overlayVisible:n.overlayVisible,closeButton:n.closeButton,buttonSticky:n.buttonSticky,popinId:n.content?"popin-"+t.instanciedPopins.length:e.getAttribute("data-target"),beforeOpen:n.beforeOpen,afterOpen:n.afterOpen,beforeClose:n.beforeClose,afterClose:n.afterClose,disableAfterClose:n.disableAfterClose,link:e,firstOpen:!0};if(n.content){var s=document.createElement("div");s.id="popin-"+t.instanciedPopins.length,s.className="popin",s.innerHTML=n.content,document.body.appendChild(s)}e.setAttribute("data-popin-id",t.instanciedPopins.length),e.setAttribute("data-className",n.className?n.className:"js-popin"),t.instanciedPopins.push(i.popinId),t.instanciedPopinsOptions.push(i),e.addEventListener("click",function(n){n.preventDefault(),n.stopPropagation();var o=e;t.open(n,o,t.instanciedPopinsOptions[o.getAttribute("data-popin-id")])},!1)})}},{key:"click",value:function(){}},{key:"open",value:function(e,t,n){var o=this;if(t.getAttribute("data-disable"))return!1;this.openedPopins.length>0&&document.getElementById(this.instanciedPopins[this.openedPopins.length-1]).classList.add("popin--closeJs"),n.beforeOpen&&"function"==typeof n.beforeOpen&&n.beforeOpen(t);var i=document.getElementById(n.popinId);n.overlayVisible&&0==this.openedPopins.length&&this.overlay.classList.add("popin-overlay--visible"),this.openedPopins.push(t.getAttribute("data-popin-id"));var s=document.documentElement.clientHeight,l=i.clientHeight,a=this.getOffset(t),p=n.buttonSticky?a.top+"px":document.body.scrollTop+20+"px";if(n.buttonSticky||l>s?(i.style.top=p,i.classList.add("popin--openJs")):i.classList.add("popin--open"),n.closeButton&&n.firstOpen){n.firstOpen=!1;var r=i.querySelectorAll(".js-popin-linkClose");[].forEach.call(r,function(e,t){e.addEventListener("click",function(e){e.preventDefault(),e.stopPropagation(),o.close(n)})})}n.afterOpen&&"function"==typeof n.afterOpen&&n.afterOpen()}},{key:"getOffset",value:function(e){var t=e.getBoundingClientRect();return{top:t.top+document.body.scrollTop,left:t.left+document.body.scrollLeft}}},{key:"close",value:function(e){if(!e)var e={};e.beforeClose&&"function"==typeof e.beforeClose&&e.beforeClose();var t=this.openedPopins[this.openedPopins.length-1],n=document.getElementById(this.instanciedPopins[t]);n.classList.remove("popin--open","popin--openJs"),n.style.top="",this.openedPopins.splice(this.openedPopins.length-1,1),this.openedPopins.length>0&&document.getElementById(this.instanciedPopins[this.openedPopins.length-1]).classList.remove("popin--closeJs"),0==this.openedPopins.length&&this.overlay.classList.remove("popin-overlay--visible"),e.afterClose&&"function"==typeof e.afterClose&&e.afterClose(),this.disable(t)}},{key:"disable",value:function(e){var t=this.instanciedPopinsOptions[e],n=document.querySelector('[data-popin-id="'+e+'"]');t.disableAfterClose&&n.setAttribute("data-disable",!0)}}]),e}();exports["default"]=Popin,module.exports=exports["default"];