You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
/** * dialogFx.js v1.0.0 * http://www.codrops.com
* * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php
* * Copyright 2014, Codrops * http://www.codrops.com
*/;( function( window ) { 'use strict';
var support = { animations : Modernizr.cssanimations }, animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' }, animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ], onEndAnimation = function( el, callback ) { var onEndCallbackFn = function( ev ) { if( support.animations ) { if( ev.target != this ) return; this.removeEventListener( animEndEventName, onEndCallbackFn ); } if( callback && typeof callback === 'function' ) { callback.call(); } }; if( support.animations ) { el.addEventListener( animEndEventName, onEndCallbackFn ); } else { onEndCallbackFn(); } };
function extend( a, b ) { for( var key in b ) { if( b.hasOwnProperty( key ) ) { a[key] = b[key]; } } return a; }
function DialogFx( el, options ) { this.el = el; this.options = extend( {}, this.options ); extend( this.options, options ); this.ctrlClose = this.el.querySelector( '[data-dialog-close]' ); this.isOpen = false; this._initEvents(); }
DialogFx.prototype.options = { // callbacks
onOpenDialog : function() { return false; }, onCloseDialog : function() { return false; } }
DialogFx.prototype._initEvents = function() { var self = this;
// close action
this.ctrlClose.addEventListener( 'click', this.toggle.bind(this) );
// esc key closes dialog
document.addEventListener( 'keydown', function( ev ) { var keyCode = ev.keyCode || ev.which; if( keyCode === 27 && self.isOpen ) { self.toggle(); } } );
this.el.querySelector( '.dialog__overlay' ).addEventListener( 'click', this.toggle.bind(this) ); }
DialogFx.prototype.toggle = function() { var self = this; if( this.isOpen ) { classie.remove( this.el, 'dialog--open' ); classie.add( self.el, 'dialog--close' ); onEndAnimation( this.el.querySelector( '.dialog__content' ), function() { classie.remove( self.el, 'dialog--close' ); } );
// callback on close
this.options.onCloseDialog( this ); } else { classie.add( this.el, 'dialog--open' );
// callback on open
this.options.onOpenDialog( this ); } this.isOpen = !this.isOpen; };
// add to global namespace
window.DialogFx = DialogFx;
})( window );
|