"
Team:Manchester/js/every-overlay.js
From 2014.igem.org
(function() { var triggerOverviewBttn = document.getElementById( 'trigger-overview' ), triggerTeamBttn = document.getElementById( 'trigger-team' ), // triggerBetaBttn = document.getElementById( 'trigger-beta'), overlay = document.querySelector( 'div.overlay' ), overlay2 = document.querySelector( 'div.overlay2'), // overlay3 = document.querySelector( 'div.overlay3'), closeBttn = overlay.querySelector( 'button.overlay-close' ), closeBttn2 = overlay2.querySelector( 'button.overlay-close2' ), // closeBttn3 = overlay3.querySelector( 'button.overlay-close3' ), transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], support = { transitions : Modernizr.csstransitions };
function toggleOverlay() { if( classie.has( overlay, 'open' ) ) { classie.remove( overlay, 'open' ); classie.add( overlay, 'close' ); var onEndTransitionFn = function( ev ) { if( support.transitions ) { if( ev.propertyName !== 'visibility' ) return; this.removeEventListener( transEndEventName, onEndTransitionFn ); } classie.remove( overlay, 'close' ); }; if( support.transitions ) { overlay.addEventListener( transEndEventName, onEndTransitionFn ); } else { onEndTransitionFn(); } } else if( !classie.has( overlay, 'close' ) ) { classie.add( overlay, 'open' ); } } // toggleOverlay
function toggleOverlay2() { if( classie.has( overlay2, 'open' ) ) { classie.remove( overlay2, 'open' ); classie.add( overlay2, 'close' ); var onEndTransitionFn = function( ev ) { if( support.transitions ) { if( ev.propertyName !== 'visibility' ) return; this.removeEventListener( transEndEventName, onEndTransitionFn ); } classie.remove( overlay2, 'close' ); }; if( support.transitions ) { overlay2.addEventListener( transEndEventName, onEndTransitionFn ); } else { onEndTransitionFn(); } } else if( !classie.has( overlay2, 'close' ) ) { classie.add( overlay2, 'open' ); } } // toggleOverlay2
// function toggleOverlay3() {
// if( classie.has( overlay3, 'open' ) ) {
// classie.remove( overlay3, 'open' );
// classie.add( overlay3, 'close' );
// var onEndTransitionFn = function( ev ) {
// if( support.transitions ) {
// if( ev.propertyName !== 'visibility' ) return;
// this.removeEventListener( transEndEventName, onEndTransitionFn );
// }
// classie.remove( overlay3, 'close' );
// };
// if( support.transitions ) {
// overlay3.addEventListener( transEndEventName, onEndTransitionFn );
// }
// else {
// onEndTransitionFn();
// }
// }
// else if( !classie.has( overlay3, 'close' ) ) {
// classie.add( overlay3, 'open' );
// }
// } // toggleOverlay2
triggerOverviewBttn.addEventListener( 'click', toggleOverlay ); triggerTeamBttn.addEventListener( 'click', toggleOverlay2 ); // triggerBetaBttn.addEventListener( 'click', toggleOverlay3 ); closeBttn.addEventListener( 'click', toggleOverlay ); closeBttn2.addEventListener( 'click', toggleOverlay2 ); // closeBttn3.addEventListener( 'click', toggleOverlay3 );
})();
