popin/demo/popin2.js

Create your custom popin

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};

/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {

/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId])
/******/ 			return installedModules[moduleId].exports;

/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			exports: {},
/******/ 			id: moduleId,
/******/ 			loaded: false
/******/ 		};

/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/ 		// Flag the module as loaded
/******/ 		module.loaded = true;

/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}


/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;

/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;

/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";

/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

	'use strict';

	var Popin = __webpack_require__(1);

	document.addEventListener('DOMContentLoaded', function () {
	  var popinInstance = new Popin();
	  popinInstance.init({ buttonSticky: true, afterClose: function afterClose() {
	      console.log('blabla');
	    } });

	  popinInstance.init({ className: 'test', closeButton: false, content: '<div><div class="popin-header"></div>popin ajax</div>' });
	  popinInstance.init({ className: 'test2', closeButton: false, content: '<div><div class="popin-header"></div>popin ajax 2</div>' });

	  function test() {
	    event.preventDefault();
	    console.log('click ici');
	    event.target.removeEventListener('click', null, false);
	  }
	  document.querySelector('.js-toto').addEventListener('click', test, false);
	}, false);

/***/ },
/* 1 */
/***/ function(module, exports) {

	"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) && (defaultOptions[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 value(e) {
	      var t = this,
	          n = { overlayVisible: !0, closeButton: !0 };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 };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 (e) {
	          e.preventDefault(), e.stopPropagation();var n = e.target;t.open(e, n, t.instanciedPopinsOptions[n.getAttribute("data-popin-id")]);
	        }, !1);
	      });
	    } }, { key: "click", value: function value() {} }, { key: "open", value: function value(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();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,
	          a = i.clientHeight,
	          p = this.getOffset(t),
	          l = n.buttonSticky ? p.top + "px" : document.body.scrollTop + 20 + "px";if ((n.buttonSticky || a > s ? (i.style.top = l, i.classList.add("popin--openJs")) : i.classList.add("popin--open"), n.closeButton)) {
	        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 value(e) {
	      var t = e.getBoundingClientRect();return { top: t.top + document.body.scrollTop, left: t.left + document.body.scrollLeft };
	    } }, { key: "close", value: function value(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 value(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"];

/***/ }
/******/ ]);