(function ($, window, document) { "use strict"; var $win = $(window), $doc = $(document);
var $bg = null;
initialize once the page loads
$(function popple_init() {
get the body
var $body = $('body'); if($body.length === 0){ $.error('Do not use popple until the DOM has loaded.'); }
add the bg to the body
$bg = $("<div></div>") .hide() .appendTo($body) .click(function(e){ e.preventDefault(); for(var i=$.popple.modals.length-1; i>=0; i--){ var $el = $.popple.modals[i]; var options = $el.modal('options'); if(options.bgClose) $el.modal('hide'); } });
add styles to the head
var styles = "BUILD-PUTS-CSS-HERE"; if (styles.length === 7){ $('head').append('<link href="popple.css" rel="stylesheet" type="text/css" />'); }else{ $('head').append(['<style type="text/css">',styles,'</style>'].join('')); } });
$.popple = { defaults: { bg: 'popple-bg popple-bg-diagonal', push: true, duration: 400, animation: 'popple-bounce', closer: true, bgClose: true, escClose: true }, modals: [], active: function(){ return $.popple.modals.length ? $.popple.modals[$.popple.modals.length-1] : null; }, push: function ($els, options) { var returnVal = null; $els.each(function(){ var $el = $(this), modal = $el.data('modal'); if (!modal){ $el.data('modal', modal = new Popple($el, options)); } if (options === 'push'){ modal.push(); }else if (options === 'pop'){ modal.pop(); }else if (options === 'options'){ returnVal = modal.options; return; }else if (modal.options.push){ modal.push(); } }); return returnVal || $els; }, pop: function () { if ($.popple.modals.length === 0){ return; } $.popple.modals[$.popple.modals.length - 1].data('modal').pop(); }, popAll: function () { for(var i=$.popple.modals.length-1; i>=0; i--){ $.popple.modals[i].data('modal').pop(); } } };
var winWidth = $win.width(); (function(){ var isWaiting = null; $win.on('resize', function(){ if (isWaiting){ return; } isWaiting = setTimeout(function(){ isWaiting = false; winWidth = $win.width(); for(var i=0; i<$.popple.modals.length; i++){ var $el = $.popple.modals[i]; $el.data('modal').center(); } }, 50); }); })();
var Popple = function(el, _options){ var $el = $(el), me = this;
expose options
me.options = $.extend({}, $.popple.defaults, typeof _options === 'object' && _options); $el.addClass('popple-modal') .on('click', '.popple-pop', function(){ me.pop(); }) .on('click', '.popple-pop-all', $.popple.popAll); if (me.options.closer){ $el.append("<div class='popple-pop popple-closer-x'>x</div>"); } me.center = function () { $el.css('left', Math.floor((winWidth - $el.width()) / 2) + 'px'); }; me.push = function () {
send 'push' notification
$el.trigger('push');
push it to our stack
$.popple.modals.push($el);
center horizontally
me.center();
update bg classes
$bg.removeClass().addClass(me.options.bg);
set durations
var dur = me.options.animation ? me.options.duration : 0; $el.add($bg).css({ 'animation-duration': dur+'ms', '-webkit-animation-duration': dur+'ms', '-moz-animation-duration': dur+'ms', '-o-animation-duration': dur+'ms', '-MS-animation-duration': dur+'ms' });
update the animation
if(typeof me.lastAnimation === 'string' && me.lastAnimation.length > 0){ $el.removeClass(me.lastAnimation); delete me.lastAnimation; } if(typeof me.options.animation === 'string' && me.options.animation.length > 0){ $el.addClass(me.options.animation); } if (me.options.animation === true){ $el.addClass($.popple.defaults.animation); }
animate in bg
$bg.show().removeClass('out').addClass('in');
animate modal in
$el.removeClass('push pop wake sleep').show().addClass('push');
send 'pushed' notification when done
if(dur){ setTimeout(function(){ $el.trigger('pushed'); }, dur); }else{ $el.trigger('pushed'); }
hide previous modal
if($.popple.modals.length > 1){ var $lastEl = $.popple.modals[$.popple.modals.length-2]; $lastEl.removeClass('push pop wake sleep').addClass('sleep'); } }; me.pop = function () {
check if we're in the stack
var index = $.inArray($el, $.popple.modals); if (index === -1){ return; }
send 'hide' notification
$el.trigger('pop');
remove from stack
$.popple.modals.splice(index, 1);
animate it out
$el.removeClass('push pop wake sleep').addClass('pop');
send 'hidden' notification when done
var dur = me.options.animation ? me.options.duration : 0;
show next or hide bg
if ($.popple.modals.length > 0) {
show the next modal
var $prev = $.popple.modals[$.popple.modals.length-1]; $prev.removeClass('push pop wake sleep').addClass('wake'); } else {
hide the bg if no more modals showing
$bg.removeClass('in out').addClass('out'); setTimeout(function(){ $bg.hide(); }, dur); }
send 'hidden' notification
setTimeout(function(){ $el.hide().trigger('popped'); }, dur); }; };
var old = $.fn.modal; $.fn.modal = function (options) { return $.popple.push(this, options); };
$.fn.modal.noConflict = function () { $.fn.modal = old; return $.fn.modal; };
$doc.keyup(function (e) { if (e.keyCode === 27){ //esc var $el = $.popple.active(); if ($el && $el.modal('options').escClose){ $el.modal('pop'); } } });
$doc.on('click', '[popple]', function(e){ e.preventDefault(); var $this = $(this), selector = $.trim($this.attr('popple')), $el = $(selector); $el.modal();
good idea bootstrap
$el.one('pop', function(){ $this.focus(); }); }); })(jQuery, window, document);
INITIALIZATION