Team:UCLA/Template/Javascript
From 2014.igem.org
Samichaels (Talk | contribs) |
Samichaels (Talk | contribs) |
||
Line 144: | Line 144: | ||
}); | }); | ||
</script> | </script> | ||
- | |||
- | |||
- | |||
- | |||
<!--CLASSIE--> | <!--CLASSIE--> | ||
Line 204: | Line 200: | ||
<!--SLIDING SIDE MENU--> | <!--SLIDING SIDE MENU--> | ||
- | + | (function( 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 ); | ||
</script> | </script> | ||
</html> | </html> |
Revision as of 23:40, 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 ); (function( 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 );