diff --git a/README.md b/README.md index 4bd2208..84e5920 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ exit-intent-popup # Features +* Supports multipopups on one page (N+). * Fully customizable via HTML and CSS. * Can use third party forms to collect emails. * Support for embeddable CSS fonts, including Google Fonts. @@ -19,32 +20,39 @@ Simply include the script and call its `init` function with any options you choo ``` -You can also add HTML and CSS directly on the page. The popup element you wish to use must have an id of `bio_ep`. +You can also add HTML and CSS directly on the page. The popup element you wish to use must have an id of `bio_ep_1`. ```html + #bio_ep_bg_1 {} // background + #bio_ep_1 {} // popup + #bio_ep_close_1 {} // close button + -
+
@@ -55,20 +63,21 @@ You can also add HTML and CSS directly on the page. The popup element you wish Using HTML and CSS ```javascript -bioEp.init({ - html: '
' + + +Object.create(bioEp).init({ + html: '
' + 'Claim your discount!' + 'HOLD ON!' + 'Click the button below to get a special discount' + 'This offer will NOT show again!' + - 'CLAIM YOUR DISCOUNT' + + 'CLAIM YOUR DISCOUNT' + '
', - css: '#bio_ep {width: 400px; height: 300px; color: #333; background-color: #fafafa; text-align: center;}' + - '#bio_ep_content {padding: 24px 0 0 0; font-family: "Titillium Web";}' + - '#bio_ep_content span:nth-child(2) {display: block; color: #f21b1b; font-size: 32px; font-weight: 600;}' + - '#bio_ep_content span:nth-child(3) {display: block; font-size: 16px;}' + - '#bio_ep_content span:nth-child(4) {display: block; margin: -5px 0 0 0; font-size: 16px; font-weight: 600;}' + - '.bio_btn {display: inline-block; margin: 18px 0 0 0; padding: 7px; color: #fff; font-size: 14px; font-weight: 600; background-color: #70bb39; border: 1px solid #47ad0b; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; border-radius: 0; text-decoration: none;}', + css: '#bio_ep_1 {width: 400px; height: 300px; color: #333; background-color: #fafafa; text-align: center;}' + + '#bio_ep_content_1 {padding: 24px 0 0 0; font-family: "Titillium Web";}' + + '#bio_ep_content_1 span:nth-child(2) {display: block; color: #f21b1b; font-size: 32px; font-weight: 600;}' + + '#bio_ep_content_1 span:nth-child(3) {display: block; font-size: 16px;}' + + '#bio_ep_content_1 span:nth-child(4) {display: block; margin: -5px 0 0 0; font-size: 16px; font-weight: 600;}' + + '.bio_btn_1 {display: inline-block; margin: 18px 0 0 0; padding: 7px; color: #fff; font-size: 14px; font-weight: 600; background-color: #70bb39; border: 1px solid #47ad0b; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; border-radius: 0; text-decoration: none;}', fonts: ['//fonts.googleapis.com/css?family=Titillium+Web:300,400,600'], cookieExp: 0 }); @@ -77,12 +86,34 @@ bioEp.init({ Using an image ```javascript -bioEp.init({ +Object.create(bioEp).init({ + id: '1', width: 394, height: 298, - html: 'Claim your discount!', + html: 'Claim your discount 1!', cookieExp: 0 }); + +Object.create(bioEp).init({ + id: '2', + width: 394, + height: 298, + html: 'Claim your discount 2!', + cookieExp: 0, + showOnDelay: true, + delay: 2 +}); + +Object.create(bioEp).init({ + id: '3', + width: 394, + height: 298, + html: 'Claim your discount 3!', + cookieExp: 0, + showOnDelay: true, + delay: 4 +}); + ``` # Options @@ -91,6 +122,7 @@ All options must be added to the init function as an object. Name | Type | Default | Description -----|------|---------|------------ +**id** | string | 1 | Unique id for multiple popups on one page **width** | integer | 400 | The width of the popup. This can be overridden by adding your own CSS for the #bio_ep element. **height** | integer | 220 | The height of the popup. This can be overridden by adding your own CSS for the #bio_ep element. **html** | string | blank | The HTML code to be placed within the popup. HTML can be added through this function or on the page itself within a element. @@ -106,4 +138,4 @@ Name | Type | Default | Description MIT license, feel free to use however you wish! -Created by [beeker.io](http://beeker.io/exit-intent-popup-script-tutorial) \ No newline at end of file +Created by [beeker.io](http://beeker.io/exit-intent-popup-script-tutorial) diff --git a/index.html b/index.html index 0a00821..0d257dd 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,27 @@ +

A popup will show in 2 seconds.

Move your cusor above this window after 5 seconds.

\ No newline at end of file diff --git a/js/bioep.js b/js/bioep.js index 6241207..c1b15d9 100644 --- a/js/bioep.js +++ b/js/bioep.js @@ -1,307 +1,339 @@ -window.bioEp = { - // Private variables - bgEl: {}, - popupEl: {}, - closeBtnEl: {}, - shown: false, - overflowDefault: "visible", - transformDefault: "", - - // Popup options - width: 400, - height: 220, - html: "", - css: "", - fonts: [], - delay: 5, - showOnDelay: false, - cookieExp: 30, - showOncePerSession: false, - onPopup: null, - - // Object for handling cookies, taken from QuirksMode - // http://www.quirksmode.org/js/cookies.html - cookieManager: { - // Create a cookie - create: function(name, value, days, sessionOnly) { - var expires = ""; - - if(sessionOnly) - expires = "; expires=0" - else if(days) { - var date = new Date(); - date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); - expires = "; expires=" + date.toGMTString(); - } - - document.cookie = name + "=" + value + expires + "; path=/"; - }, - - // Get the value of a cookie - get: function(name) { - var nameEQ = name + "="; - var ca = document.cookie.split(";"); - - for(var i = 0; i < ca.length; i++) { - var c = ca[i]; - while (c.charAt(0) == " ") c = c.substring(1, c.length); - if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); - } - - return null; - }, - - // Delete a cookie - erase: function(name) { - this.create(name, "", -1); - } - }, - - // Handle the bioep_shown cookie - // If present and true, return true - // If not present or false, create and return false - checkCookie: function() { - // Handle cookie reset - if(this.cookieExp <= 0) { - // Handle showing pop up once per browser session. - if(this.showOncePerSession && this.cookieManager.get("bioep_shown_session") == "true") - return true; - - this.cookieManager.erase("bioep_shown"); - return false; - } - - // If cookie is set to true - if(this.cookieManager.get("bioep_shown") == "true") - return true; - - return false; - }, - - // Add font stylesheets and CSS for the popup - addCSS: function() { - // Add font stylesheets - for(var i = 0; i < this.fonts.length; i++) { - var font = document.createElement("link"); - font.href = this.fonts[i]; - font.type = "text/css"; - font.rel = "stylesheet"; - document.head.appendChild(font); - } - - // Base CSS styles for the popup - var css = document.createTextNode( - "#bio_ep_bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3; z-index: 10001;}" + - "#bio_ep {display: none; position: fixed; width: " + this.width + "px; height: " + this.height + "px; font-family: 'Titillium Web', sans-serif; font-size: 16px; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); background-color: #fff; box-shadow: 0px 1px 4px 0 rgba(0,0,0,0.5); z-index: 10002;}" + - "#bio_ep_close {position: absolute; left: 100%; margin: -8px 0 0 -12px; width: 20px; height: 20px; color: #fff; font-size: 12px; font-weight: bold; text-align: center; border-radius: 50%; background-color: #5c5c5c; cursor: pointer;}" + - this.css - ); - - // Create the style element - var style = document.createElement("style"); - style.type = "text/css"; - style.appendChild(css); - - // Insert it before other existing style - // elements so user CSS isn't overwritten - document.head.insertBefore(style, document.getElementsByTagName("style")[0]); - }, - - // Add the popup to the page - addPopup: function() { - // Add the background div - this.bgEl = document.createElement("div"); - this.bgEl.id = "bio_ep_bg"; - document.body.appendChild(this.bgEl); - - // Add the popup - if(document.getElementById("bio_ep")) - this.popupEl = document.getElementById("bio_ep"); - else { - this.popupEl = document.createElement("div"); - this.popupEl.id = "bio_ep"; - this.popupEl.innerHTML = this.html; - document.body.appendChild(this.popupEl); - } - - // Add the close button - if(document.getElementById("bio_ep_close")) - this.closeBtnEl = document.getElementById("bio_ep_close"); - else { - this.closeBtnEl = document.createElement("div"); - this.closeBtnEl.id = "bio_ep_close"; - this.closeBtnEl.appendChild(document.createTextNode("X")); - this.popupEl.insertBefore(this.closeBtnEl, this.popupEl.firstChild); - } - }, - - // Show the popup - showPopup: function() { - if(this.shown) return; - - this.bgEl.style.display = "block"; - this.popupEl.style.display = "block"; - - // Handle scaling - this.scalePopup(); - - // Save body overflow value and hide scrollbars - this.overflowDefault = document.body.style.overflow; - document.body.style.overflow = "hidden"; - - this.shown = true; - - this.cookieManager.create("bioep_shown", "true", this.cookieExp, false); - this.cookieManager.create("bioep_shown_session", "true", 0, true); - - if(typeof this.onPopup === "function") { - this.onPopup(); - } - }, - - // Hide the popup - hidePopup: function() { - this.bgEl.style.display = "none"; - this.popupEl.style.display = "none"; - - // Set body overflow back to default to show scrollbars - document.body.style.overflow = this.overflowDefault; - }, - - // Handle scaling the popup - scalePopup: function() { - var margins = { width: 40, height: 40 }; - var popupSize = { width: bioEp.popupEl.offsetWidth, height: bioEp.popupEl.offsetHeight }; - var windowSize = { width: window.innerWidth, height: window.innerHeight }; - var newSize = { width: 0, height: 0 }; - var aspectRatio = popupSize.width / popupSize.height; - - // First go by width, if the popup is larger than the window, scale it - if(popupSize.width > (windowSize.width - margins.width)) { - newSize.width = windowSize.width - margins.width; - newSize.height = newSize.width / aspectRatio; - - // If the height is still too big, scale again - if(newSize.height > (windowSize.height - margins.height)) { - newSize.height = windowSize.height - margins.height; - newSize.width = newSize.height * aspectRatio; - } - } - - // If width is fine, check for height - if(newSize.height === 0) { - if(popupSize.height > (windowSize.height - margins.height)) { - newSize.height = windowSize.height - margins.height; - newSize.width = newSize.height * aspectRatio; - } - } - - // Set the scale amount - var scaleTo = newSize.width / popupSize.width; - - // If the scale ratio is 0 or is going to enlarge (over 1) set it to 1 - if(scaleTo <= 0 || scaleTo > 1) scaleTo = 1; - - // Save current transform style - if(this.transformDefault === "") - this.transformDefault = window.getComputedStyle(this.popupEl, null).getPropertyValue("transform"); - - // Apply the scale transformation - this.popupEl.style.transform = this.transformDefault + " scale(" + scaleTo + ")"; - }, - - // Event listener initialisation for all browsers - addEvent: function (obj, event, callback) { - if(obj.addEventListener) - obj.addEventListener(event, callback, false); - else if(obj.attachEvent) - obj.attachEvent("on" + event, callback); - }, - - // Load event listeners for the popup - loadEvents: function() { - // Track mouseout event on document - this.addEvent(document, "mouseout", function(e) { - e = e ? e : window.event; - - // If this is an autocomplete element. - if(e.target.tagName.toLowerCase() == "input") - return; - - // Get the current viewport width. - var vpWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); - - // If the current mouse X position is within 50px of the right edge - // of the viewport, return. - if(e.clientX >= (vpWidth - 50)) - return; - - // If the current mouse Y position is not within 50px of the top - // edge of the viewport, return. - if(e.clientY >= 50) - return; - - // Reliable, works on mouse exiting window and - // user switching active program - var from = e.relatedTarget || e.toElement; - if(!from) - bioEp.showPopup(); - }.bind(this)); - - // Handle the popup close button - this.addEvent(this.closeBtnEl, "click", function() { - bioEp.hidePopup(); - }); - - // Handle window resizing - this.addEvent(window, "resize", function() { - bioEp.scalePopup(); - }); - }, - - // Set user defined options for the popup - setOptions: function(opts) { - this.width = (typeof opts.width === 'undefined') ? this.width : opts.width; - this.height = (typeof opts.height === 'undefined') ? this.height : opts.height; - this.html = (typeof opts.html === 'undefined') ? this.html : opts.html; - this.css = (typeof opts.css === 'undefined') ? this.css : opts.css; - this.fonts = (typeof opts.fonts === 'undefined') ? this.fonts : opts.fonts; - this.delay = (typeof opts.delay === 'undefined') ? this.delay : opts.delay; - this.showOnDelay = (typeof opts.showOnDelay === 'undefined') ? this.showOnDelay : opts.showOnDelay; - this.cookieExp = (typeof opts.cookieExp === 'undefined') ? this.cookieExp : opts.cookieExp; - this.showOncePerSession = (typeof opts.showOncePerSession === 'undefined') ? this.showOncePerSession : opts.showOncePerSession; - this.onPopup = (typeof opts.onPopup === 'undefined') ? this.onPopup : opts.onPopup; - }, - - // Ensure the DOM has loaded - domReady: function(callback) { - (document.readyState === "interactive" || document.readyState === "complete") ? callback() : this.addEvent(document, "DOMContentLoaded", callback); - }, - - // Initialize - init: function(opts) { - // Handle options - if(typeof opts !== 'undefined') - this.setOptions(opts); - - // Add CSS here to make sure user HTML is hidden regardless of cookie - this.addCSS(); - - // Once the DOM has fully loaded - this.domReady(function() { - // Handle the cookie - if(bioEp.checkCookie()) return; - - // Add the popup - bioEp.addPopup(); - - // Load events - setTimeout(function() { - bioEp.loadEvents(); - - if(bioEp.showOnDelay) - bioEp.showPopup(); - }, bioEp.delay * 1000); - }); - } -} +let bioEp = { + // Private variables + bgEl: {}, + popupEl: {}, + closeBtnEl: {}, + shown: false, + overflowDefault: "visible", + transformDefault: "", + + // Popup options + id:'1', + width: 400, + height: 220, + html: "", + css: "", + fonts: [], + delay: 5, + showOnDelay: false, + cookieExp: 30, + showOncePerSession: false, + onPopup: null, + + // Object for handling cookies, taken from QuirksMode + // http://www.quirksmode.org/js/cookies.html + cookieManager: { + // Create a cookie + create: function(name, value, days, sessionOnly) { + var expires = ""; + + if(sessionOnly){ + expires = "; expires=0" + }else if(days) { + var date = new Date(); + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + expires = "; expires=" + date.toGMTString(); + } + + document.cookie = name + "=" + value + expires + "; path=/"; + }, + + // Get the value of a cookie + get: function(name) { + var nameEQ = name + "="; + var ca = document.cookie.split(";"); + + for(var i = 0; i < ca.length; i++) { + var c = ca[i]; + while (c.charAt(0) == " ") + { + c = c.substring(1, c.length); + } + if (c.indexOf(nameEQ) === 0){ + return c.substring(nameEQ.length, c.length); + } + } + + return null; + }, + + // Delete a cookie + erase: function(name) { + this.create(name, "", -1); + } + }, + + // Handle the bioep_shown cookie + // If present and true, return true + // If not present or false, create and return false + checkCookie: function() { + // Handle cookie reset + if(this.cookieExp <= 0) { + // Handle showing pop up once per browser session. + if(this.showOncePerSession && this.cookieManager.get("bioep_shown_session_"+ this.id) == "true"){ + return true; + } + + this.cookieManager.erase("bioep_shown_"+ this.id); + return false; + } + + // If cookie is set to true + if(this.cookieManager.get("bioep_shown_"+ this.id) == "true"){ + return true; + } + + return false; + }, + + // Add font stylesheets and CSS for the popup + addCSS: function() { + // Add font stylesheets + for(var i = 0; i < this.fonts.length; i++) { + var font = document.createElement("link"); + font.href = this.fonts[i]; + font.type = "text/css"; + font.rel = "stylesheet"; + document.head.appendChild(font); + } + + // Base CSS styles for the popup + var css = document.createTextNode( + "#bio_ep_bg_"+ this.id +" {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3; z-index: 100101;}" + + "#bio_ep_"+ this.id +" {display: none; position: fixed; width: " + this.width + "px; height: " + this.height + "px; font-family: 'Titillium Web', sans-serif; font-size: 16px; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); background-color: #fff; box-shadow: 0px 1px 4px 0 rgba(0,0,0,0.5); z-index: 100102;}" + + "#bio_ep_close_"+ this.id +" {position: absolute; left: 100%; margin: -8px 0 0 -12px; width: 20px; height: 20px; color: #fff; font-size: 12px; font-weight: bold; text-align: center; border-radius: 50%; background-color: #5c5c5c; cursor: pointer; line-height: 20px;}" + + this.css + ); + + // Create the style element + var style = document.createElement("style"); + style.appendChild(css); + + // Insert it before other existing style + // elements so user CSS isn't overwritten + var headFirstChild = document.head.firstElementChild; + document.head.insertBefore(style, headFirstChild); + }, + + // Add the popup to the page + addPopup: function() { + + // Add the background div + this.bgEl = document.createElement("div"); + this.bgEl.id = "bio_ep_bg_"+ this.id; + document.body.appendChild(this.bgEl); + + // Add the popup + if(document.getElementById("bio_ep_"+ this.id)){ + this.popupEl = document.getElementById("bio_ep_"+ this.id); + }else{ + this.popupEl = document.createElement("div"); + this.popupEl.id = "bio_ep_"+ this.id; + this.popupEl.innerHTML = this.html; + document.body.appendChild(this.popupEl); + } + + // Add the close button + if(document.getElementById("bio_ep_close_"+ this.id)){ + this.closeBtnEl = document.getElementById("bio_ep_close_"+ this.id); + }else{ + this.closeBtnEl = document.createElement("div"); + this.closeBtnEl.id = "bio_ep_close_"+ this.id; + this.closeBtnEl.appendChild(document.createTextNode("X")); + this.popupEl.insertBefore(this.closeBtnEl, this.popupEl.firstChild); + } + }, + + // Show the popup + showPopup: function() { + if(this.shown){ + return; + } + + this.bgEl.style.display = "block"; + this.popupEl.style.display = "block"; + + // Handle scaling + this.scalePopup(); + + // Save body overflow value and hide scrollbars + this.overflowDefault = document.body.style.overflow; + document.body.style.overflow = "hidden"; + + this.shown = true; + + this.cookieManager.create("bioep_shown_"+ this.id, "true", this.cookieExp, false); + this.cookieManager.create("bioep_shown_session_"+ this.id, "true", 0, true); + + if(typeof this.onPopup === "function") { + this.onPopup(); + } + }, + + // Hide the popup + hidePopup: function() { + this.bgEl.style.display = "none"; + this.popupEl.style.display = "none"; + + // Set body overflow back to default to show scrollbars + document.body.style.overflow = this.overflowDefault; + }, + + // Handle scaling the popup + scalePopup: function() { + let $this = this; + var margins = { width: 40, height: 40 }; + var popupSize = { width: $this.popupEl.offsetWidth, height: $this.popupEl.offsetHeight }; + var windowSize = { width: window.innerWidth, height: window.innerHeight }; + var newSize = { width: 0, height: 0 }; + var aspectRatio = popupSize.width / popupSize.height; + + // First go by width, if the popup is larger than the window, scale it + if(popupSize.width > (windowSize.width - margins.width)) { + newSize.width = windowSize.width - margins.width; + newSize.height = newSize.width / aspectRatio; + + // If the height is still too big, scale again + if(newSize.height > (windowSize.height - margins.height)) { + newSize.height = windowSize.height - margins.height; + newSize.width = newSize.height * aspectRatio; + } + } + + // If width is fine, check for height + if(newSize.height === 0) { + if(popupSize.height > (windowSize.height - margins.height)) { + newSize.height = windowSize.height - margins.height; + newSize.width = newSize.height * aspectRatio; + } + } + + // Set the scale amount + var scaleTo = newSize.width / popupSize.width; + + // If the scale ratio is 0 or is going to enlarge (over 1) set it to 1 + if(scaleTo <= 0 || scaleTo > 1){ + scaleTo = 1; + } + + // Save current transform style + if(this.transformDefault === ""){ + this.transformDefault = window.getComputedStyle(this.popupEl, null).getPropertyValue("transform"); + } + + // Apply the scale transformation + this.popupEl.style.transform = this.transformDefault + " scale(" + scaleTo + ")"; + }, + + // Event listener initialisation for all browsers + addEvent: function (obj, event, callback) { + if(obj.addEventListener){ + obj.addEventListener(event, callback, false); + }else if(obj.attachEvent){ + obj.attachEvent("on" + event, callback); + } + }, + + // Load event listeners for the popup + loadEvents: function() { + let $this = this; + + // Track mouseout event on document + this.addEvent(document, "mouseout", function(e) { + e = e ? e : window.event; + + // If this is an autocomplete element. + if(e.target.tagName.toLowerCase() == "input"){ + return; + } + + // Get the current viewport width. + var vpWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); + + // If the current mouse X position is within 50px of the right edge + // of the viewport, return. + if(e.clientX >= (vpWidth - 50)){ + return; + } + + // If the current mouse Y position is not within 50px of the top + // edge of the viewport, return. + if(e.clientY >= 50){ + return; + } + + // Reliable, works on mouse exiting window and + // user switching active program + var from = e.relatedTarget || e.toElement; + if(!from){ + $this.showPopup(); + } + + }.bind(this)); + + // Handle the popup close button + this.addEvent(this.closeBtnEl, "click", function() { + $this.hidePopup(); + }); + + // Handle window resizing + this.addEvent(window, "resize", function() { + $this.scalePopup(); + }); + }, + + // Set user defined options for the popup + setOptions: function(opts) { + this.id = (typeof opts.id === 'undefined') ? this.id : opts.id; + this.width = (typeof opts.width === 'undefined') ? this.width : opts.width; + this.height = (typeof opts.height === 'undefined') ? this.height : opts.height; + this.html = (typeof opts.html === 'undefined') ? this.html : opts.html; + this.css = (typeof opts.css === 'undefined') ? this.css : opts.css; + this.fonts = (typeof opts.fonts === 'undefined') ? this.fonts : opts.fonts; + this.delay = (typeof opts.delay === 'undefined') ? this.delay : opts.delay; + this.showOnDelay = (typeof opts.showOnDelay === 'undefined') ? this.showOnDelay : opts.showOnDelay; + this.cookieExp = (typeof opts.cookieExp === 'undefined') ? this.cookieExp : opts.cookieExp; + this.showOncePerSession = (typeof opts.showOncePerSession === 'undefined') ? this.showOncePerSession : opts.showOncePerSession; + this.onPopup = (typeof opts.onPopup === 'undefined') ? this.onPopup : opts.onPopup; + }, + + // Ensure the DOM has loaded + domReady: function(callback) { + (document.readyState === "interactive" || document.readyState === "complete") ? callback() : this.addEvent(document, "DOMContentLoaded", callback); + }, + + // Initialize + init: function(opts) { + + let $this = this; + + // Handle options + if(typeof opts !== 'undefined'){ + this.setOptions(opts); + } + + // Add CSS here to make sure user HTML is hidden regardless of cookie + this.addCSS(); + + // Once the DOM has fully loaded + this.domReady(function() { + // Handle the cookie + if($this.checkCookie()){ + return; + } + + // Add the popup + $this.addPopup(); + + // Load events + setTimeout(function() { + $this.loadEvents(); + + if($this.showOnDelay){ + $this.showPopup(); + } + + }, $this.delay * 1000); + }); + } +} \ No newline at end of file diff --git a/js/bioep.min.js b/js/bioep.min.js index e40d023..5296984 100644 --- a/js/bioep.min.js +++ b/js/bioep.min.js @@ -1,10 +1 @@ -window.bioEp={bgEl:{},popupEl:{},closeBtnEl:{},shown:!1,overflowDefault:"visible",transformDefault:"",width:400,height:220,html:"",css:"",fonts:[],delay:5,showOnDelay:!1,cookieExp:30,showOncePerSession:!1,onPopup:null,cookieManager:{create:function(a,b,d,c){var e="";c?e="; expires=0":d&&(c=new Date,c.setTime(c.getTime()+864E5*d),e="; expires="+c.toGMTString());document.cookie=a+"="+b+e+"; path=/"},get:function(a){a+="=";for(var b=document.cookie.split(";"),d=0;d=this.cookieExp){if(this.showOncePerSession&&"true"==this.cookieManager.get("bioep_shown_session"))return!0;this.cookieManager.erase("bioep_shown");return!1}return"true"==this.cookieManager.get("bioep_shown")?!0:!1},addCSS:function(){for(var a=0;ad-40&&(e=d-40,f=e/g,f>c-40&&(f=c-40,e=f*g));0===f&&b>c-40&&(e=(c-40)*g);a=e/a;if(0>=a|| -1=Math.max(document.documentElement.clientWidth,window.innerWidth|| -0)-50||50<=a.clientY||a.relatedTarget||a.toElement||bioEp.showPopup())}.bind(this));this.addEvent(this.closeBtnEl,"click",function(){bioEp.hidePopup()});this.addEvent(window,"resize",function(){bioEp.scalePopup()})},setOptions:function(a){this.width="undefined"===typeof a.width?this.width:a.width;this.height="undefined"===typeof a.height?this.height:a.height;this.html="undefined"===typeof a.html?this.html:a.html;this.css="undefined"===typeof a.css?this.css:a.css;this.fonts="undefined"===typeof a.fonts? -this.fonts:a.fonts;this.delay="undefined"===typeof a.delay?this.delay:a.delay;this.showOnDelay="undefined"===typeof a.showOnDelay?this.showOnDelay:a.showOnDelay;this.cookieExp="undefined"===typeof a.cookieExp?this.cookieExp:a.cookieExp;this.showOncePerSession="undefined"===typeof a.showOncePerSession?this.showOncePerSession:a.showOncePerSession;this.onPopup="undefined"===typeof a.onPopup?this.onPopup:a.onPopup},domReady:function(a){"interactive"===document.readyState||"complete"===document.readyState? -a():this.addEvent(document,"DOMContentLoaded",a)},init:function(a){"undefined"!==typeof a&&this.setOptions(a);this.addCSS();this.domReady(function(){bioEp.checkCookie()||(bioEp.addPopup(),setTimeout(function(){bioEp.loadEvents();bioEp.showOnDelay&&bioEp.showPopup()},1E3*bioEp.delay))})}}; \ No newline at end of file +let bioEp={bgEl:{},popupEl:{},closeBtnEl:{},shown:!1,overflowDefault:"visible",transformDefault:"",id:"1",width:400,height:220,html:"",css:"",fonts:[],delay:5,showOnDelay:!1,cookieExp:30,showOncePerSession:!1,onPopup:null,cookieManager:{create:function(t,e,i,o){var s="";if(o)s="; expires=0";else if(i){var n=new Date;n.setTime(n.getTime()+24*i*60*60*1e3),s="; expires="+n.toGMTString()}document.cookie=t+"="+e+s+"; path=/"},get:function(t){for(var e=t+"=",i=document.cookie.split(";"),o=0;os-t&&(h.width=s-t,h.height=h.width/d,h.height>n-e&&(h.height=n-e,h.width=h.height*d)),0===h.height&&o>n-e&&(h.height=n-e,h.width=h.height*d);var l=h.width/i;(l<=0||l>1)&&(l=1),""===this.transformDefault&&(this.transformDefault=window.getComputedStyle(this.popupEl,null).getPropertyValue("transform")),this.popupEl.style.transform=this.transformDefault+" scale("+l+")"},addEvent:function(t,e,i){t.addEventListener?t.addEventListener(e,i,!1):t.attachEvent&&t.attachEvent("on"+e,i)},loadEvents:function(){let t=this;this.addEvent(document,"mouseout",function(e){if("input"!=(e=e||window.event).target.tagName.toLowerCase()){var i=Math.max(document.documentElement.clientWidth,window.innerWidth||0);if(!(e.clientX>=i-50))if(!(e.clientY>=50))e.relatedTarget||e.toElement||t.showPopup()}}.bind(this)),this.addEvent(this.closeBtnEl,"click",function(){t.hidePopup()}),this.addEvent(window,"resize",function(){t.scalePopup()})},setOptions:function(t){this.id=void 0===t.id?this.id:t.id,this.width=void 0===t.width?this.width:t.width,this.height=void 0===t.height?this.height:t.height,this.html=void 0===t.html?this.html:t.html,this.css=void 0===t.css?this.css:t.css,this.fonts=void 0===t.fonts?this.fonts:t.fonts,this.delay=void 0===t.delay?this.delay:t.delay,this.showOnDelay=void 0===t.showOnDelay?this.showOnDelay:t.showOnDelay,this.cookieExp=void 0===t.cookieExp?this.cookieExp:t.cookieExp,this.showOncePerSession=void 0===t.showOncePerSession?this.showOncePerSession:t.showOncePerSession,this.onPopup=void 0===t.onPopup?this.onPopup:t.onPopup},domReady:function(t){"interactive"===document.readyState||"complete"===document.readyState?t():this.addEvent(document,"DOMContentLoaded",t)},init:function(t){let e=this;void 0!==t&&this.setOptions(t),this.addCSS(),this.domReady(function(){e.checkCookie()||(e.addPopup(),setTimeout(function(){e.loadEvents(),e.showOnDelay&&e.showPopup()},1e3*e.delay))})}}; \ No newline at end of file