"
Team:Manchester/js/every-overlay.js
From 2014.igem.org
(Every overlay JS) |
|||
| Line 2: | Line 2: | ||
var triggerOverviewBttn = document.getElementById( 'trigger-overview' ), | var triggerOverviewBttn = document.getElementById( 'trigger-overview' ), | ||
triggerTeamBttn = document.getElementById( 'trigger-team' ), | triggerTeamBttn = document.getElementById( 'trigger-team' ), | ||
| - | + | triggerBetaBttn = document.getElementById( 'trigger-sponsors'), | |
overlay = document.querySelector( 'div.overlay' ), | overlay = document.querySelector( 'div.overlay' ), | ||
overlay2 = document.querySelector( 'div.overlay2'), | overlay2 = document.querySelector( 'div.overlay2'), | ||
| - | + | overlay3 = document.querySelector( 'div.overlay3'), | |
closeBttn = overlay.querySelector( 'button.overlay-close' ), | closeBttn = overlay.querySelector( 'button.overlay-close' ), | ||
closeBttn2 = overlay2.querySelector( 'button.overlay-close2' ), | closeBttn2 = overlay2.querySelector( 'button.overlay-close2' ), | ||
| - | + | closeBttn3 = overlay3.querySelector( 'button.overlay-close3' ), | |
transEndEventNames = { | transEndEventNames = { | ||
'WebkitTransition': 'webkitTransitionEnd', | 'WebkitTransition': 'webkitTransitionEnd', | ||
| Line 72: | Line 72: | ||
| - | + | 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' ); | |
| - | + | } | |
| - | + | } // toggleOverlay3 | |
triggerOverviewBttn.addEventListener( 'click', toggleOverlay ); | triggerOverviewBttn.addEventListener( 'click', toggleOverlay ); | ||
triggerTeamBttn.addEventListener( 'click', toggleOverlay2 ); | triggerTeamBttn.addEventListener( 'click', toggleOverlay2 ); | ||
| - | + | triggerBetaBttn.addEventListener( 'click', toggleOverlay3 ); | |
closeBttn.addEventListener( 'click', toggleOverlay ); | closeBttn.addEventListener( 'click', toggleOverlay ); | ||
closeBttn2.addEventListener( 'click', toggleOverlay2 ); | closeBttn2.addEventListener( 'click', toggleOverlay2 ); | ||
| - | + | closeBttn3.addEventListener( 'click', toggleOverlay3 ); | |
})(); | })(); | ||
Latest revision as of 23:00, 14 August 2014
(function() { var triggerOverviewBttn = document.getElementById( 'trigger-overview' ), triggerTeamBttn = document.getElementById( 'trigger-team' ), triggerBetaBttn = document.getElementById( 'trigger-sponsors'), 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' );
}
} // toggleOverlay3
triggerOverviewBttn.addEventListener( 'click', toggleOverlay ); triggerTeamBttn.addEventListener( 'click', toggleOverlay2 ); triggerBetaBttn.addEventListener( 'click', toggleOverlay3 ); closeBttn.addEventListener( 'click', toggleOverlay ); closeBttn2.addEventListener( 'click', toggleOverlay2 ); closeBttn3.addEventListener( 'click', toggleOverlay3 );
})();
