Team:UCLA/Template/Javascript

From 2014.igem.org

Revision as of 23:41, 6 August 2014

( function( window ) { 'use strict'; function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } var hasClass, addClass, removeClass; if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); }; } else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); }; } function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c ); } window.classie = { hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass }; })( window ); var body = document.body, mask = document.createElement("div"), toggleSlideLeft = document.querySelector( ".toggle-slide-left" ), toggleSlideRight = document.querySelector( ".toggle-slide-right" ), toggleSlideTop = document.querySelector( ".toggle-slide-top" ), toggleSlideBottom = document.querySelector( ".toggle-slide-bottom" ), togglePushLeft = document.querySelector( ".toggle-push-left" ), togglePushRight = document.querySelector( ".toggle-push-right" ), togglePushTop = document.querySelector( ".toggle-push-top" ), togglePushBottom = document.querySelector( ".toggle-push-bottom" ), slideMenuLeft = document.querySelector( ".slide-menu-left" ), slideMenuRight = document.querySelector( ".slide-menu-right" ), slideMenuTop = document.querySelector( ".slide-menu-top" ), slideMenuBottom = document.querySelector( ".slide-menu-bottom" ), pushMenuLeft = document.querySelector( ".push-menu-left" ), pushMenuRight = document.querySelector( ".push-menu-right" ), pushMenuTop = document.querySelector( ".push-menu-top" ), pushMenuBottom = document.querySelector( ".push-menu-bottom" ), activeNav ; mask.className = "mask"; /* slide menu left */ toggleSlideLeft.addEventListener( "click", function(){ classie.add( body, "sml-open" ); document.body.appendChild(mask); activeNav = "sml-open"; } ); /* slide menu right */ toggleSlideRight.addEventListener( "click", function(){ classie.add( body, "smr-open" ); document.body.appendChild(mask); activeNav = "smr-open"; } ); /* slide menu top */ toggleSlideTop.addEventListener( "click", function(){ classie.add( body, "smt-open" ); document.body.appendChild(mask); activeNav = "smt-open"; } ); /* slide menu bottom */ toggleSlideBottom.addEventListener( "click", function(){ classie.add( body, "smb-open" ); document.body.appendChild(mask); activeNav = "smb-open"; } ); /* push menu left */ togglePushLeft.addEventListener( "click", function(){ classie.add( body, "pml-open" ); document.body.appendChild(mask); activeNav = "pml-open"; } ); /* push menu right */ togglePushRight.addEventListener( "click", function(){ classie.add( body, "pmr-open" ); document.body.appendChild(mask); activeNav = "pmr-open"; } ); /* push menu top */ togglePushTop.addEventListener( "click", function(){ classie.add( body, "pmt-open" ); document.body.appendChild(mask); activeNav = "pmt-open"; } ); /* push menu bottom */ togglePushBottom.addEventListener( "click", function(){ classie.add( body, "pmb-open" ); document.body.appendChild(mask); activeNav = "pmb-open"; } ); /* hide active menu if mask is clicked */ mask.addEventListener( "click", function(){ classie.remove( body, activeNav ); activeNav = ""; document.body.removeChild(mask); } ); /* hide active menu if close menu button is clicked */ [].slice.call(document.querySelectorAll(".close-menu")).forEach(function(el,i){ el.addEventListener( "click", function(){ classie.remove( body, activeNav ); activeNav = ""; document.body.removeChild(mask); } ); }); })( window );