1/** 2 * Creates and initialises the popup. 3 * 4 * @class 5 * @extends Responsiville.Debug 6 * @extends Responsiville.Events 7 * 8 * @author Nevma, [email protected] 9 * @license Nevma Copyright (c) http://www.nevma.gr 10 * 11 * @fires Responsiville.Popup#init 12 * 13 * @classdesc A popup utility which takes a piece of HTML and shows it in a new 14 * layer on top of the rest of the contents of a web page. 15 * 16 * @param {Object} options The initialisation options of the module. 17 * 18 * @property {Object} options The options that define the object 19 * behaviour. 20 * @property {boolean} options.debug Whether to print debug messages in 21 * the browser console. 22 * @property {boolean} options.slug A special codename for the 23 * instance of the element, to be 24 * used as a class on its container 25 * and as a key in arrays where it is 26 * grouped with other elements of its 27 * kind. 28 * @property {string} options.activator The selector of the element which 29 * acticates, that is opens, the 30 * popup. 31 * @property {string} options.element The element that holds the popup 32 * contents. Usually stays hidden 33 * somewhere inside the page. 34 * @property {string} options.contents The HTML with the popup contents, 35 * if the element property is not 36 * set. 37 * @property {string} options.layerEffect The effect of the background layer 38 * opening. 39 * @property {int} options.layerDelay The delay before the background 40 * layer opens and closes. 41 * @property {int} options.layerDuration The duration of the background 42 * layer effect. 43 * @property {string} options.popupEffect The effect of the popup contents 44 * opening. 45 * @property {int} options.popupDelay The delay before the popup 46 * contents open and close. 47 * @property {int} options.popupDuration The duration of the popup contents 48 * effect. 49 * @property {string} options.popupDuration The duration of the popup contents 50 * effect. 51 * @property {int} options.resizeDelay The delay before the popup resize 52 * action occurs. 53 * @property {int} options.resizeDuration The duration of the popup resize 54 * action. 55 * @property {int} options.width The desired width of the popup in 56 * px, vh, vw, % or even auto. 57 * @property {int} options.height The desired height of the popup in 58 * px, vh, vw, %. 59 * @property {int} options.maxWidth The desired max width of the popup 60 * in px, vh, vw, %. 61 * @property {int} options.maxHeight The desired max height of the 62 * popup in px, vh, vw, %. 63 * @property {int} options.minWidth The desired min width of the popup 64 * in px, vh, vw, %. 65 * @property {int} options.minHeight The desired min height of the 66 * popup in px, vh, vw, %. 67 * @property {boolean} options.overflow If set to false, the default, the 68 * popup respects the max width and 69 * height properties and allows for 70 * internal overflow scroll. If set 71 * to true then the popup can stretch 72 * its contents further from the max 73 * width and height and cause the 74 * page to overflow scroll instead. 75 * Useful when you know that you are 76 * going to have long contents. 77 * @property {string} options.closePosition Whether the popup close button 78 * will be positioned in the popup or 79 * out of it. 80 * @property {int} options.startZIndex The z-index from which the popup 81 * should beging its layout and be 82 * safely visible on top of 83 * everything else. 84 * @property {string} options.enter Comma separated list of 85 * breakpoints in which the popup 86 * enters, wihch means it is enabled. 87 * @property {string} options.leave Comma separated list of 88 * breakpoints in which the popup 89 * leaves, which means it is 90 * disabled. 91 */ 92Responsiville.Popup=function(options){if(!Responsiville.Main.getInstance()){throw new Error('Responsiville instantiation error: the framework has not been initialised, call new Responsiville::Main() and then Responsiville::init().')} 93this.options={};this.options=jQuery.extend(this.options,Responsiville.Popup.defaults,options);
93this.codeName='responsiville.popup';this.responsiville=Responsiville.Main.getInstance();this.contents=null;this.enabled=!1;this.open=!1;this.$body=this.responsiville.$body;this.$document=this.responsiville.$document;this.$window=this.responsiville.$window;this.$close=null;this.$contentsWrapper=null;this.$contents=null;this.$contentsInner=null;this.$activator=jQuery();if(this.options.slug==''){Responsiville.Popup.elementsCounter=Responsiville.Popup.elementsCounter!==undefined?++Responsiville.Popup.elementsCounter:0;this.options.slug=this.codeName.replace('.','-')+'-'+Responsiville.Popup.elementsCounter} 94if(typeof options.activator!='undefined'){this.$activator=jQuery(this.options.activator);if(this.$activator.length===0){this.log('Responsiville.Popup instantiation error: no activator found ('+this.options.activator+').');return} 95for(var key in this.options){var value=this.$activator.data('responsiville-popup-'+key.toLowerCase());if(typeof value!=='undefined'){this.options[key]=value}} 96this.$activator.data('responsiville-api',this);this.$activator.data('responsiville-popup-api',this)} 97if(this.$activator.length>0){this.$activator.addClass(this.options.slug)} 98if(this.$activator.length>0){var htmlBreakpoints=Responsiville.determineEnableDisableBreakpoints({enter:this.$activator.data('responsiville-popup-enter'),leave:this.$activator.data('responsiville-popup-leave')});if(htmlBreakpoints!==null){this.options.enter=htmlBreakpoints.enter;this.options.leave=htmlBreakpoints.leave}} 99this.initHTML();this.initContents();this.setupEvents();this.log('popup initialised');this.fireEvent('init')};Responsiville.extend(Responsiville.Popup,Responsiville.Debug.Extensions);Responsiville.extend(Responsiville.Popup,Responsiville.Events);Responsiville.Popup.AUTO_RUN=typeof RESPONSIVILLE_AUTO_INIT!=='undefined'?RESPONSIVILLE_AUTO_INIT:!0;Responsiville.Popup.defaults={debug:!1,slug:'',activator:'.responsiville-popup-activator',element:!1,contents:!1,layerEffect:'fade',layerDelay:50,layerDuration:100,popupEffect:'fade',popupDelay:200,popupDuration:300,resizeDelay:100,resizeDuration:200,width:!1,height:!1,maxWidth:'60vw',maxHeight:'90vh',minWidth:'25vw',minHeight:!1,overflow:!1,closePosition:'out',closeTitle:'Close popup',startZIndex:9999,enter:'small, mobile, tablet, laptop, desktop, large, xlarge',leave:''};Responsiville.Popup.autoRun=function(){jQuery(Responsiville.Popup.defaults.activator).each(function(){new Responsiville.Popup({debug:Responsiville.Main.getInstance().options.debug,activator:this})})};Responsiville.Popup.prototype.initHTML=function(){this.$contentsWrapper=jQuery('<div class="responsiville-popup-contents-wrapper '+this.options.slug+'"/>').appendTo(this.$body);if(this.options.overflow){this.$contentsWrapper.addClass('responsiville-popup-overflow')} 100this.$contents=jQuery('<div class="responsiville-popup-contents"/>').appendTo(this.$contentsWrapper);this.$contentsInner=jQuery('<div class="responsiville-popup-contents-inner"/>').appendTo(this.$contents);this.$close=jQuery('<button class="responsiville-popup-close" title="'+this.options.closeTitle+'"><span>Close</span></button>');if(this.options.closePosition=='out'){this.$contentsWrapper.addClass('responsiville-popup-close-out');this.$close.appendTo(this.$contentsWrapper)}else{this.$contentsWrapper.addClass('responsiville-popup-close-in');this.$close.appendTo(this.$contents)}};Responsiville.Popup.prototype.initContents=function(){if(this.$activator.length>0){var href=this.$activator.attr('href');if(href){this.setContents(jQuery(href))}else{this.setContents(jQuery(this.options.element))}}else{if(this.options.element){this.setContents(jQuery(this.options.element))}else{this.setContents(this.options.contents)}}};Responsiville.Popup.prototype.setupEvents=function(){var k,length;var breakpointsEnter=Responsiville.splitAndTrim(this.options.enter);for(k=0,length=breakpointsEnter.length;k<length;k++){this.responsiville.on('enter.'+breakpointsEnter[k],this.getBoundFunction(this.enable))} 101var breakpointsLeave=Responsiville.splitAndTrim(this.options.leave);for(k=0,length=breakpointsLeave.length;k<length;k++){this.responsiville.on('enter.'+breakpointsLeave[k],this.getBoundFunction(this.disable))} 102if(this.responsiville.is(this.options.enter)){this.enable()}};Responsiville.Popup.prototype.enable=function(){if(this.enabled){return} 103this.log('enable popup');if(this.$activator.length>0){this.$activator.on('click',this.getBoundFunction(this.openPopup))} 104this.$contentsWrapper.on('click',this.getBoundFunction(this.closePopup));this.$contents.on('click',this.getBoundFunction(this.contentsClick));this.$close.on('click',this.getBoundFunction(this.closePopup));this.$document.on('keydown',this.getBoundFunction(this.documentKeyDown));this.responsiville.on('resize',this.getBoundFunction(this.resize));this.enabled=!0};Responsiville.Popup.prototype.disable=function(){if(!this.enabled){return} 105this.log('disable popup');this.enabled=!1};Responsiville.Popup.prototype.contentsClick=function(event){event.stopPropagation()};Responsiville.Popup.prototype.documentKeyDown=function(event){if(!this.open){return} 106var ESCAPE_KEY_CODE=27;var keyPressed=event.charCode||event.keyCode;if(keyPressed==ESCAPE_KEY_CODE){this.closePopup()}};Responsiville.Popup.prototype.setContents=function(contents){this.contents=contents;this.$contentsInner.html(jQuery(this.contents).clone(!0));this.$contentsInner.find('.responsiville-popup-close-button').on('click',this.getBoundFunction(this.closePopup));if(this.open){this.resize()} 107Responsiville.onImagesLoaded(this.$contentsInner.find('img').toArray(),{single:(function(){if(this.open){this.resize()}}).bind(this)})};Responsiville.Popup.prototype.calculateContentsDimensions=function(){jQuery('<div class="responsiville-popup-calculate-dimensions '+this.options.slug+'"/>').append(this.$contents.contents().clone()).appendTo(this.$body);var $tempContents=jQuery('.responsiville-popup-calculate-dimensions.'+this.options.slug);var availableWidth=this.$body.outerWidth();var availableHeight=window.innerHeight;if(this.options.width){this.log('adjusting for set width');$tempContents.css('width',this.options.width)}else{var currentWidth=$tempContents.outerWidth();$tempContents.css('width',availableWidth);var maxWidth=$tempContents.outerWidth();if(currentWidth<maxWidth){this.log('adjusting for viewport width');$tempContents.css('width',availableWidth)}else{this.log('not adjusting for viewport width');$tempContents.css('width',currentWidth)}} 108if(this.options.maxWidth){var currentWidth=$tempContents.outerWidth();$tempContents.css('width',this.options.maxWidth);var maxWidth=$tempContents.outerWidth();if(currentWidth>maxWidth){this.log('adjusting for max width');$tempContents.css('width',this.options.maxWidth)}else{this.log('not adjusting for max width');$tempContents.css('width',currentWidth)}} 109if(this.options.minWidth){var currentWidth=$tempContents.outerWidth();$tempContents.css('width',this.options.minWidth);var minWidth=$tempContents.outerWidth();if(currentWidth<minWidth){this.log('adjusting for min width');$tempContents.css('width',this.options.minWidth)}else{this.log('not adjusting for min width');$tempContents.css('width',currentWidth)}} 110if(this.options.height){this.log('adjusting for set height');$tempContents.css('height',this.options.height)} 111if(!this.options.overflow){if(this.options.maxHeight){var currentHeight=$tempContents.outerHeight();$tempContents.css('height',this.options.maxHeight);var maxHeight=$tempContents.outerHeight();if(currentHeight>maxHeight){this.log('adjusting for max height');$tempContents.css('height',maxHeight)}else{this.log('not adjusting for max height');$tempContents.css('height',currentHeight)}}else{var currentHeight=$tempContents.outerHeight();$tempContents.css('height',availableHeight);var maxHeight=$tempContents.outerHeight();if(currentHeight>maxHeight){this.log('adjusting for viewport height');$tempContents.css('height',maxHeight)}else{this.log('not adjusting for viewport height');$tempContents.css('height',currentHeight)}}} 112if(this.options.minHeight){var currentHeight=$tempContents.outerHeight();$tempContents.css('height',this.options.minHeight);var minHeight=$tempContents.outerHeight();if(currentHeight<minHeight){this.log('adjusting for min height');$tempContents.css('height',minHeight)}else{this.log('not adjusting for min height');$tempContents.css('height',currentHeight)}} 113var dimensions={width:Math.ceil($tempContents.outerWidth()),height:Math.ceil($tempContents.outerHeight())} 114if(dimensions.width%2==1){dimensions.width++} 115if(dimensions.height%2==1){dimensions.height++} 116$tempContents.remove();return dimensions};Responsiville.Popup.prototype.parseInt=function(number){var result=window.parseInt(number);if(window.isNaN(result)){return 0}else{return result}} 117Responsiville.Popup.prototype.showContentsWrapper=function(callback){if(this.options.layerEffect=='fade'){this.$contents.css('opacity',0);this.$contentsWrapper.css({'opacity':0,'display':'block','z-index':this.options.startZIndex});this.$contentsWrapper.velocity({opacity:1},{delay:this.options.layerDelay,duration:this.options.layerDuration,complete:(function(){if(callback!==undefined){callback()}}).bind(this)})}else if(this.options.layerEffect=='none'){this.$contentsWrapper.css({'display':'block','z-index':this.options.startZIndex})}};Responsiville.Popup.prototype.hideContentsWrapper=function(callback){if(this.options.layerEffect=='fade'){this.$contentsWrapper.velocity({opacity:0}
117,{delay:this.options.layerDelay,duration:this.options.layerDuration,complete:(function(){this.$contentsWrapper.css({'display':'none','z-index':-1});if(callback!==undefined){callback()}}).bind(this)})}else if(this.options.layerEffect=='none'){this.$contentsWrapper.css({'display':'none','z-index':-1})}};Responsiville.Popup.prototype.resize=function(){if(!this.open){return} 118this.fireEvent('beforeResize');var dimensions=this.calculateContentsDimensions();this.$contents.addClass('responsiville-popup-resizing');this.$contents.velocity('stop').velocity({width:dimensions.width,height:dimensions.height},{delay:this.options.resizeDelay,duration:this.options.resizeDuration,complete:(function(){this.$contents.removeClass('responsiville-popup-resizing');this.fireEvent('resize')}).bind(this)})};Responsiville.Popup.prototype.showContents=function(callback){this.$contentsWrapper.css({'display':'block','z-index':this.options.startZIndex});if(this.options.popupEffect=='fade'){var dimensions=this.calculateContentsDimensions();if(this.options.overflow){this.$contents.css({'display':'block','position':'relative','top':'auto','left':'50%','width':dimensions.width,'height':dimensions.height,'transform':'translateX(-50%)','margin':'5rem 0'})}else{this.$contents.css({'display':'block','position':'fixed','top':'50%','left':'50%','width':dimensions.width,'height':dimensions.height,'transform':'translateX(-50%) translateY(-50%)'})} 119this.$contents.velocity({opacity:[1,0]},{delay:this.options.popupDelay,duration:this.options.popupDuration,complete:(function(){if(callback!==undefined){callback()}}).bind(this)})}else if(this.options.popupEffect=='none'){this.$contents.css({'position':'fixed','top':'50%','left':'50%','transform':'translateX(-50%) translateY(-50%)'})}};Responsiville.Popup.prototype.hideContents=function(callback){if(this.options.popupEffect=='fade'){this.$contents.velocity({opacity:[0,1]},{delay:this.options.popupDelay,duration:this.options.popupDuration,complete:(function(){this.$contents.css({'display':'none'});if(callback!==undefined){callback()}}).bind(this)})}else if(this.options.popupEffect=='none'){this.$contents.css({'display':'none'})}};Responsiville.Popup.prototype.openPopup=function(){if(!this.enabled){return} 120this.log('open popup');this.fireEvent('opening');this.$body.addClass('responsiville-popup-body-open');this.$contentsWrapper.addClass('responsiville-popup-open');this.showContentsWrapper((function(){this.showContents((function(){this.open=!0;this.fireEvent('open')}).bind(this))}).bind(this));return!1};Responsiville.Popup.prototype.closePopup=function(){if(!this.enabled){return} 121this.log('close popup');this.fireEvent('closing');this.hideContents((function(){this.hideContentsWrapper((function(){this.open=!1;this.$body.removeClass('responsiville-popup-body-open');this.$contentsWrapper.removeClass('responsiville-popup-open');this.fireEvent('close')}).bind(this))}).bind(this));return!1} 122;
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.