| 1 |
/*========================================= |
| 2 |
* photonicModal - Based on the animatedModal script |
| 3 |
* |
| 4 |
* animatedModal.js: Version 1.0 |
| 5 |
* author: João Pereira |
| 6 |
* website: http://www.joaopereira.pt |
| 7 |
* email: [email protected] |
| 8 |
* Licensed MIT |
| 9 |
=========================================*/ |
| 10 |
|
| 11 |
(function ($) { |
| 12 |
$.fn.photonicModal = function(options) { |
| 13 |
var modal = $(this); |
| 14 |
var $body = $('body'); |
| 15 |
|
| 16 |
//Defaults |
| 17 |
var settings = $.extend({ |
| 18 |
modalTarget:'photonicModal', |
| 19 |
closeCSS: '', |
| 20 |
closeFromRight: 0, |
| 21 |
width:'80%', |
| 22 |
height:'100%', |
| 23 |
top:'0px', |
| 24 |
left:'0px', |
| 25 |
zIndexIn: '9999', |
| 26 |
zIndexOut: '-9999', |
| 27 |
color: '#39BEB9', |
| 28 |
opacityIn:'1', |
| 29 |
opacityOut:'0', |
| 30 |
animatedIn:'zoomIn', |
| 31 |
animatedOut:'zoomOut', |
| 32 |
animationDuration:'.6s', |
| 33 |
overflow:'auto', |
| 34 |
|
| 35 |
// Callbacks |
| 36 |
beforeOpen: function() {}, |
| 37 |
afterOpen: function() {}, |
| 38 |
beforeClose: function() {}, |
| 39 |
afterClose: function() {} |
| 40 |
}, options); |
| 41 |
|
| 42 |
var overlay = document.querySelectorAll('.photonicModalOverlay'), |
| 43 |
scrollable = $(document).find('.photonicModalOverlayScrollable'); |
| 44 |
|
| 45 |
if (!overlay) { |
| 46 |
overlay = document.createElement('div'); |
| 47 |
overlay.className = 'photonicModalOverlay'; |
| 48 |
|
| 49 |
scrollable = document.createElement('div'); |
| 50 |
scrollable.className = 'photonicModalOverlayScrollable'; |
| 51 |
$(scrollable).appendTo($(overlay)); |
| 52 |
|
| 53 |
$body.append(overlay); |
| 54 |
} |
| 55 |
scrollable = $(scrollable); |
| 56 |
|
| 57 |
var closeIcon = $(modal).find('.photonicModalClose'); |
| 58 |
if (closeIcon.length === 0) { |
| 59 |
closeIcon = document.createElement('a'); |
| 60 |
closeIcon.className = 'photonicModalClose ' + settings.closeCSS; |
| 61 |
$(closeIcon).css({'right': settings.closeFromRight}); |
| 62 |
$(closeIcon).html('×'); |
| 63 |
$(closeIcon).attr('href', '#'); |
| 64 |
$(closeIcon).prependTo($(modal)).show(); |
| 65 |
} |
| 66 |
|
| 67 |
closeIcon = $(modal).find('.photonicModalClose'); |
| 68 |
|
| 69 |
// var id = $body.find('#'+settings.modalTarget); |
| 70 |
var id = document.querySelector('#'+settings.modalTarget); |
| 71 |
|
| 72 |
// Default Classes |
| 73 |
// id.addClass('photonicModal'); |
| 74 |
// id.addClass(settings.modalTarget+'-off'); |
| 75 |
|
| 76 |
//Init styles |
| 77 |
var initStyles = { |
| 78 |
'width':settings.width, |
| 79 |
'height':settings.height, |
| 80 |
'top':settings.top, |
| 81 |
'left':settings.left, |
| 82 |
'background-color':settings.color, |
| 83 |
'overflow-y':settings.overflow, |
| 84 |
'z-index':settings.zIndexOut, |
| 85 |
'opacity':settings.opacityOut, |
| 86 |
'-webkit-animation-duration':settings.animationDuration, |
| 87 |
'-moz-animation-duration':settings.animationDuration, |
| 88 |
'-ms-animation-duration':settings.animationDuration, |
| 89 |
'animation-duration':settings.animationDuration |
| 90 |
}; |
| 91 |
//Apply stles |
| 92 |
// id.css(initStyles); |
| 93 |
|
| 94 |
if (id) { |
| 95 |
id.className = 'photonicModal ' + settings.modalTarget + '-off'; |
| 96 |
id.style.cssText += initStyles.reduce(function (a, v, i) { |
| 97 |
return a + i + ': ' + v + ';'; |
| 98 |
}); |
| 99 |
|
| 100 |
open(id); |
| 101 |
} |
| 102 |
|
| 103 |
closeIcon.click(function(event) { |
| 104 |
event.preventDefault(); |
| 105 |
document.body.style.overflow = 'hidden'; |
| 106 |
|
| 107 |
settings.beforeClose(); //beforeClose |
| 108 |
if (photonicUtils.hasClass(id, settings.modalTarget+'-on')) { |
| 109 |
photonicUtils.removeClass(id, settings.modalTarget+'-on'); |
| 110 |
photonicUtils.addClass(id, settings.modalTarget+'-off'); |
| 111 |
} |
| 112 |
|
| 113 |
if (photonicUtils.hasClass(id, settings.modalTarget+'-off')) { |
| 114 |
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose); |
| 115 |
} |
| 116 |
|
| 117 |
id.css('overflow-y', 'hidden').slideUp(); |
| 118 |
overlay.style.overflowY = 'hidden'; |
| 119 |
overlay.style.display = 'none'; |
| 120 |
}); |
| 121 |
|
| 122 |
function open(id) { |
| 123 |
document.body.style.overflow = 'hidden'; |
| 124 |
|
| 125 |
if (id.hasClass(settings.modalTarget+'-off')) { |
| 126 |
id.removeClass(settings.modalTarget+'-off'); |
| 127 |
id.addClass(settings.modalTarget+'-on'); |
| 128 |
} |
| 129 |
|
| 130 |
if (id.hasClass(settings.modalTarget+'-on')) { |
| 131 |
settings.beforeOpen(); |
| 132 |
id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn}); |
| 133 |
id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen); |
| 134 |
} |
| 135 |
|
| 136 |
overlay.style.overflowY = settings.overflow; |
| 137 |
overlay.style.display = 'block'; |
| 138 |
|
| 139 |
id.appendTo(scrollable).css('overflow-y', settings.overflow).hide().slideDown('slow'); // No "hide()" causes slideDown to not work the first time :-S |
| 140 |
} |
| 141 |
|
| 142 |
function afterClose () { |
| 143 |
id.css({'z-index':settings.zIndexOut}); |
| 144 |
settings.afterClose(); //afterClose |
| 145 |
} |
| 146 |
|
| 147 |
function afterOpen () { |
| 148 |
settings.afterOpen(); //afterOpen |
| 149 |
} |
| 150 |
}; // End photonicModal.js |
| 151 |
}(jQuery)); |
| 152 |
|
| 153 |
|
