From ae7cd33cbde829467609df9a912a14558cc06128 Mon Sep 17 00:00:00 2001
From: Craig Cook <craigcook@gmail.com>
Date: Tue, 19 Jun 2012 23:15:56 -0700
Subject: [PATCH 01/10] Menu progress

---
 apps/firefox/templates/firefox/base-resp.html |  19 +-
 media/css/firefox/menu-resp.less              | 175 ++++++++++++++++++
 media/css/firefox/template-resp.less          |   2 +-
 media/css/sandstone/sandstone-resp.less       | 100 +++++++++-
 media/img/sandstone/arrow-go.png              | Bin 0 -> 281 bytes
 media/img/sandstone/icn-menu.png              | Bin 0 -> 396 bytes
 media/img/sandstone/menu-point.png            | Bin 0 -> 129 bytes
 media/js/nav-main-resp.js                     | 143 ++++++++++++++
 templates/base-resp.html                      |  62 ++++++-
 9 files changed, 479 insertions(+), 22 deletions(-)
 create mode 100644 media/css/firefox/menu-resp.less
 create mode 100644 media/img/sandstone/arrow-go.png
 create mode 100644 media/img/sandstone/icn-menu.png
 create mode 100644 media/img/sandstone/menu-point.png
 create mode 100644 media/js/nav-main-resp.js

diff --git a/apps/firefox/templates/firefox/base-resp.html b/apps/firefox/templates/firefox/base-resp.html
index c87c6b026a8..a330be6d440 100644
--- a/apps/firefox/templates/firefox/base-resp.html
+++ b/apps/firefox/templates/firefox/base-resp.html
@@ -17,10 +17,11 @@
 {% endblock %}
 
 {% block site_header_nav %}
-<nav role="navigation" id="nav-main">
-  <ul role="menubar">
+<nav id="nav-main" role="navigation">
+  <a class="toggle" href="#nav-main-menu">{{_('Menu')}}</a>
+  <ul id="nav-main-menu" role="menubar">
     <li class="first" id="nav-main-features"><a href="/en-US/firefox/features/" tabindex="0" aria-owns="nav-main-features-submenu" aria-haspopup="true">Desktop</a>
-      <ul aria-expanded="false" id="nav-main-features-submenu">
+      <ul aria-expanded="false" id="nav-main-features-submenu" class="submenu">
         <li class="first"><a href="{{ url('firefox.features') }}" tabindex="-1">Features</a></li>
         <li><a href="{{ url('firefox.customize') }}" tabindex="-1">Customize</a></li>
         <li><a href="{{ url('firefox.performance') }}" tabindex="-1">Performance</a></li>
@@ -29,15 +30,15 @@
       </ul>
     </li>
     <li id="nav-main-mobile"><a href="/en-US/mobile/" tabindex="0" aria-owns="nav-main-mobile-submenu" aria-haspopup="true">Mobile</a>
-      <ul aria-expanded="false" id="nav-main-mobile-submenu">
-        <li class="first"><a href="/en-US/mobile/" tabindex="-1">Download</a></li>
+      <ul aria-expanded="false" id="nav-main-mobile-submenu" class="submenu">
+        <li class="first"><a href="/en-US/mobile/" tabindex="-1">Overview</a></li>
         <li><a href="/en-US/mobile/features/" tabindex="-1">Features</a></li>
         <li><a href="https://addons.mozilla.org/en-US/mobile/?browse=featured" tabindex="-1">Customize</a></li>
         <li class="last"><a href="/en-US/mobile/faq/" tabindex="-1">FAQ</a></li>
       </ul>
     </li>
     <li id="nav-main-releases" class=""><a href="/en-US/firefox/channel/" tabindex="0" aria-owns="nav-main-releases-submenu" aria-haspopup="true">Releases</a>
-      <ul aria-expanded="false" id="nav-main-releases-submenu">
+      <ul aria-expanded="false" id="nav-main-releases-submenu" class="submenu">
         <li class="first"><a href="/en-US/firefox/channel/" tabindex="-1">Overview</a></li>
         <li><a href="/en-US/firefox/aurora/" tabindex="-1">Firefox Aurora</a></li>
         <li><a href="/beta/" tabindex="-1">Firefox Beta</a></li>
@@ -46,20 +47,20 @@
       </ul>
     </li>
     <li id="nav-main-addons"><a href="https://addons.mozilla.org/" tabindex="0" aria-owns="nav-main-addons-submenu" aria-haspopup="true">Add-ons</a>
-      <ul aria-expanded="false" id="nav-main-addons-submenu">
+      <ul aria-expanded="false" id="nav-main-addons-submenu" class="submenu">
         <li class="first"><a href="https://addons.mozilla.org/firefox/" tabindex="-1">Desktop Add-ons</a></li>
         <li><a href="https://addons.mozilla.org/mobile/" tabindex="-1">Mobile Add-ons</a></li>
         <li class="last"><a href="http://www.getpersonas.com/" tabindex="-1">Personas</a></li>
       </ul>
       </li>
       <li id="nav-main-support"><a href="http://support.mozilla.org/" tabindex="0" aria-owns="nav-main-support-submenu" aria-haspopup="true">Support</a>
-      <ul aria-expanded="false" id="nav-main-support-submenu">
+      <ul aria-expanded="false" id="nav-main-support-submenu" class="submenu">
         <li class="first"><a href="http://support.mozilla.org/en-US/kb/" tabindex="-1">Desktop Support</a></li>
         <li class="last"><a href="http://support.mozilla.org/mobile" tabindex="-1">Mobile Support</a></li>
       </ul>
     </li>
     <li class="last" id="nav-main-about"><a href="/en-US/firefox/about/" tabindex="0" aria-owns="nav-main-about-submenu" aria-haspopup="true">About</a>
-      <ul aria-expanded="false" id="nav-main-about-submenu">
+      <ul aria-expanded="false" id="nav-main-about-submenu" class="submenu">
         <li class="first"><a href="http://blog.mozilla.com/" tabindex="-1">Blog</a></li>
         <li><a href="/en-US/firefox/about/" tabindex="-1">About Firefox</a></li>
         <li><a href="http://www.mozilla.org/join" tabindex="-1">Join Mozilla</a></li>
diff --git a/media/css/firefox/menu-resp.less b/media/css/firefox/menu-resp.less
new file mode 100644
index 00000000000..45aa5db30d5
--- /dev/null
+++ b/media/css/firefox/menu-resp.less
@@ -0,0 +1,175 @@
+/* Top Level Menu Items */
+
+#nav-main-menu {
+    .inline-block;
+    margin: 0;
+
+    li {
+        position: relative;
+
+        &.hover a {
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAHAQMAAADpvlVZAAAAAXNSR0IArs4c6QAAAAZQTFRFAAAA////pdmf3QAAAAF0Uk5TAEDm2GYAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AMBEjcKOURVdQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAdSURBVAjXY2BiYGBnYOBvYJA/wGD/gKH+A8P/HwAiJAX9mUp9sAAAAABJRU5ErkJggg==);
+            background-repeat: no-repeat;
+            background-position: center bottom;
+            outline: 0;
+        }
+    }
+
+}
+
+/* Second-level Menu Items */
+
+.js #nav-main li.hover .submenu {
+    left: 0;
+    opacity: 1;
+    -moz-transition: opacity 0.2s ease-in-out;
+    -webkit-transition: opacity 0.2s ease-in-out;
+    transition: opacity 0.2s ease-in-out;
+}
+
+#nav-main .submenu,
+#nav-main .submenu li {
+    height: auto;
+    border: 0;
+    float: none;
+    display: block;
+}
+
+#nav-main .submenu {
+    position: absolute;
+    z-index: 100;
+    left: -999em;
+    top: 44px;
+    opacity: 0;
+    width: 190px;
+    text-shadow: 1px 1px 0 #fff, 0 0 5px #fff;
+    background: #fff;
+    padding: 1px 0;
+    border-bottom: 1px solid #ddd;
+
+    li,
+    li.hover {
+        background-image: none;
+
+        a,
+        a:link,
+        a:visited,
+        span {
+            overflow: hidden;
+            padding: 7px 10px;
+            margin: 0;
+            height: auto;
+            float: none;
+            display: block;
+            font-size: 11px;
+            border: 0;
+            background: none;
+            position: relative;
+            -moz-transition: background 0.1s ease-in;
+            -webkit-transition: background 0.1s ease-in;
+            transition: background 0.1s ease-in;
+        }
+
+        a,
+        a:hover,
+        a:focus,
+        a:active {
+            background-image: none;
+            background: rgb(227,235,244);
+            background: rgba(152,178,201,0.2);
+            -moz-transition: background 0.1s ease-out;
+            -webkit-transition: background 0.1s ease-out;
+            transition: background 0.1s ease-out;
+        }
+    }
+
+}
+/* Currently active menu items */
+
+#nav-mail ul li.current {
+    span,
+    a,
+    a:link,
+    a:visited {
+        background: #fbfdff;
+        padding-right: 30px;
+        padding-bottom: 15px;
+    }
+
+    ul span,
+    ul a,
+    ul a:link,
+    ul a:visited {
+        background: none;
+        height: auto;
+        padding: 8px 10px;
+    }
+}
+
+/* }}} */
+/* {{{ Dark Background Header */
+
+.darkbg #nav-main ul li {
+
+    a,
+    a:link,
+    a:visited,
+    span {
+        color: #fff;
+        border-color: #555;
+    }
+
+    li a,
+    li a:link,
+    li a:visited,
+    li span {
+        color: #484848;
+    }
+
+    a:hover,
+    &:hover a,
+    .hover a,
+    .hover a:link,
+    .hover a:visited {
+        background: #ccc;
+        color: #484848;
+    }
+
+}
+
+/* Mobile Layout: 320px */
+@media only screen and (max-width: @breakTablet) {
+    
+    #nav-main-menu {
+        margin: 15px 0 0 -10px;
+
+        li.hover a {
+            background-image: none;
+        }
+
+    }
+
+    #nav-main-menu .submenu,
+    .js #nav-main li.hover .submenu {
+        left: 60px;
+        top: auto;
+        margin-top: -8px;
+        display: none;
+        background: #fff;
+        border-radius: 10px;
+        box-shadow: 0 2px 3px rgba(0,0,0,.35);
+        opacity: 1;
+        padding: 0;
+    }
+    
+    #nav-main-menu .submenu a,
+    #nav-main-menu .submenu a:link,
+    #nav-main-menu .submenu a:visited {
+        -moz-transition: none 0s;
+        -webkit-transition: none 0s;
+        transition: none 0s;
+    }
+
+    
+}
+
diff --git a/media/css/firefox/template-resp.less b/media/css/firefox/template-resp.less
index 965d8de359c..ee8888f045d 100644
--- a/media/css/firefox/template-resp.less
+++ b/media/css/firefox/template-resp.less
@@ -1,5 +1,5 @@
 @import "../sandstone/sandstone-resp.less";
-@import "menu.less";
+@import "menu-resp.less";
 
 #masthead h1 {
     padding: @baseLine 0;
diff --git a/media/css/sandstone/sandstone-resp.less b/media/css/sandstone/sandstone-resp.less
index 2eabd2f6d03..206deb7ba43 100644
--- a/media/css/sandstone/sandstone-resp.less
+++ b/media/css/sandstone/sandstone-resp.less
@@ -359,6 +359,10 @@ input[type=text]:focus {
 
 }
 
+#nav-main .toggle {
+    display: none; /* Hidden in non-mobile views */
+}
+
 
 /* }}} */
 /* {{{ Header Breadcrumbs */
@@ -712,7 +716,6 @@ nav.menu-bar {
 
 
     #masthead {
-
         h2 {
             padding-top: @baseLine / 2;
             padding-bottom: @baseLine / 2;
@@ -720,7 +723,8 @@ nav.menu-bar {
 
         nav {
             float: none;
-            padding-top: @baseLine / 2;
+            padding-top: 10px;
+            margin-left: 10px;
 
             ul li {
                 display: block;
@@ -833,9 +837,97 @@ nav.menu-bar {
             margin-bottom: @baseLine;
         }
     }
-
+    
+    #nav-main {
+        .toggle {
+            display: block;
+            width: 28px;
+            height: 28px;
+            background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAbCAYAAABvCO8sAAABU0lEQVRIx82Wz0rDQBCHd5MhwUshDZFCscSUSHLKoVCt+NaC+AAiXpNLCoEeAr0Y0oMgMf87g/QBatnBhT3sYfnYmd9+u9J13dfpdPqk6/ooFI6+7+XhcHiDxWKxCYLgmwO43W43MJlMBtu2OymlSp4Yx1EQCzRNG2kKxYMORBwgOC6UA08HBaytGIZBcPSQWICwNMuyO8MwlAKbppHEktjMe1xfM5X0k4Bn7fB9/88ppdbBuRvrur4srZ7nveA9fOQITVmW74BqW4dh+IWhGRSHRkvTdE2m6WazWc1hmv1+bwCVUnU5T4M4QJbBOXAAiQVt27KZhljQdV2GzbzlCA2x/r9p8LHmNU1VVZcFZ7lcPjuO88ARmqIoPgDVtoqiqOR4nuI4XoFlWe18Pv/hME2e51f8f5rxN6YsaiMWXXzJZRpiEXCXJMmNaZpKgfhwE3B3BGJ212JCzaPDAAAAAElFTkSuQmCC);
+            text-indent: -999em;
+            overflow: hidden;
+        }
+    
+        #nav-main-menu li {
+            display: block;
+            float: none;
+            margin: 0 10px;
+            border-bottom: 1px solid #f2f2f2;
+        }
+        
+        #nav-main-menu li:last-child {
+            border: 0;
+        }
+        
+        #nav-main-menu a {
+            display: block;
+            text-transform: none;
+            padding: 12px 35px 12px 10px;
+            margin: 0 -10px;
+            background: 94% 50% no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=);
+        }
+        
+        #nav-main-menu a:hover,
+        #nav-main-menu a:focus,
+        #nav-main-menu a:active {
+            color: #fff;
+            text-decoration: none;
+            text-shadow: 1px 1px 0 rgba(0,0,0,.25);
+            background-color: #247ac1;
+            background-position: 94% 50%;
+            background-repeat: no-repeat;
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -moz-linear-gradient(#43a6e2, #247ac1);
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -ms-linear-gradient(#43a6e2, #247ac1);
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -o-linear-gradient(#43a6e2, #247ac1);
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -webkit-linear-gradient(#43a6e2, #247ac1);
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), linear-gradient(#43a6e2, #247ac1);
+        }
+        
+        #nav-main-menu li.first > a {
+            border-radius: 10px 10px 0 0;
+        }
+        #nav-main-menu li.last > a {
+            border-radius: 0 0 10px 10px;
+        }        
+    }
+    
+    #nav-main-menu {
+        background: #fff;
+        position: absolute;
+        z-index: 99;
+        width: 200px;
+        margin: 15px 0 0 -10px;
+        left: -999em;
+        top: 35px;
+        overflow: visible;
+        .border-radius(10px);
+        .box-shadow(0 1px 3px 0 rgba(0,0,0,.5));
+    }
+        
+    #nav-main:hover #nav-main-menu,
+    #nav-main-menu:target { 
+        left: auto; 
+    }
+    
+    .js #nav-main-menu { 
+        left: auto; 
+        display: none;
+    }
+        
+    #nav-main-menu:before {
+        content: "";
+        display: block;
+        width: 28px;
+        height: 10px;
+        background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAOCAYAAADez2d9AAAASElEQVR42r3NSQoAMAgEQf//6Q7klICIe4HehhZg7e6LIj7KxXiMxlCMxDC0xnBoiRFQipGQilEQitHAFaORGWOAGmPQF2OHHKIJP+tDsbI5AAAAAElFTkSuQmCC);
+        position: absolute;
+        left: 10px;
+        top: -10px;
+    }
+    
 }
 
+
 /* Wide Mobile Layout: 480px */
 @media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
 
@@ -861,7 +953,7 @@ nav.menu-bar {
 
     #colophon {
         .row {
-            width: @widthMobileLandscape - @gridGutterWidth;
+            width: auto;
             padding: 0;
         }
     }
diff --git a/media/img/sandstone/arrow-go.png b/media/img/sandstone/arrow-go.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4ec27668e9f5b8918642fe04e1bee09186b42ca
GIT binary patch
literal 281
zcmV+!0p|XRP)<h;3K|Lk000e1NJLTq000mG000jN1ONa4M|y{(0002sNkl<Z7*}Ip
zfCE7((apj$1Xvkx0qHsBi!ByPPZq?bWNMAw+~_9TIntAGDEY6ldV>4ZxJJ9#c$Iie
zjcc%*B{LDHl5O3o_1Ts72qnVH75Ay^g2J8J8ysh5RW|14RyfR(f;iWBLqK<Q3k=3K
zr&m|!w`VoyWK`>HkTnA;NShbDAZiv2#!WBks3`8ps?Q7QC|~ej0c5ND|1@OS+L}|*
zm>1SoGxxtE7Dq~^IL#<1562}fnqj^uxi+jFmvoZJl9XDUx)~VkrnpWH?5vrCLz;o%
fO-S<6Mhs~HlUQtx7;g|i00000NkvXXu0mjf#0qyn

literal 0
HcmV?d00001

diff --git a/media/img/sandstone/icn-menu.png b/media/img/sandstone/icn-menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..a72c4ab82cca2d13ceda73e9d82ed39a2c428da9
GIT binary patch
literal 396
zcmV;70dxL|P)<h;3K|Lk000e1NJLTq000~S000{Z1^@s6ZwT)!0003~Nkl<ZNXN~V
z&q~8U5Qle@A;C)_4Us~z#FR*K%AruL_|}5>03u$KOA3J=0=*d0gCH^gJA?EAYT3bs
zJ?vrm*qPscyV7;t*XeZnr0e=96pp^{<>7F6gT-R834-981GwF8H!zt@2HUnfDWyuD
z7{^f%3p7m|X$r-I4n!OvI4+a}PX`68tr&(uaP*K^fUq>nvOB{tlmeTkk;IbN%zIp4
zGnMp{fM@OSegDrXrPjf@8|%8hEUljBz2H53<Ooe!mhXUSTZduzg`pV~hek`&bWNt|
zX0ut%VVeDZZvd52bvaLiI6#)cIdA}p1#R21nTA-<bzO$dyyXZDvHrhl@UiAKO;uHw
z1!uWjK0A){z!93FC_Vtywu+*t<anOqI9`EeS?zp2|KTuAp66Hmf12?(rYveB7F~SF
qWg21;aF-;>jcJ-nf%tF}aCZb^cGqG;&7;Er0000<MNUMnLSTZH=(I}!

literal 0
HcmV?d00001

diff --git a/media/img/sandstone/menu-point.png b/media/img/sandstone/menu-point.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f5cb6a2f28a8ce88ee73b8fe148e687dcab7a39
GIT binary patch
literal 129
zcmeAS@N?(olHy`uVBq!ia0vp^(m>3|!3HGnolma?QXZZzjv*Dd_MY|RVld!fas2=P
zCEt@N4IR~u_u9k~-oEQrvO9IOqUTsZ&k=(y#|kn!1p~S!PUs30=(>17bn!&V<OZqa
d3*yP`GK)CvUpsHyWC=8r!PC{xWt~$(697|vE;s-H

literal 0
HcmV?d00001

diff --git a/media/js/nav-main-resp.js b/media/js/nav-main-resp.js
new file mode 100644
index 00000000000..84f642c433e
--- /dev/null
+++ b/media/js/nav-main-resp.js
@@ -0,0 +1,143 @@
+$(document).ready(function() {
+  if ($('#nav-main').length === 0) {
+    return;
+  }
+
+  var main_menuitems = $('#nav-main [tabindex="0"]');
+  var prev_li, new_li, focused_item;
+
+  $('#nav-main [role="menubar"] > li').bind('mouseover focusin', function(event) {
+    new_li = $(this);
+    if (!prev_li || prev_li.attr('id') !== new_li.attr('id')) {
+      // Open the menu
+      new_li.addClass('hover').find('[aria-expanded="false"]').attr('aria-expanded', 'true');
+      if (prev_li) {
+        // Close the last selected menu 
+        prev_li.dequeue();
+      }
+    } else {
+      prev_li.clearQueue();
+    }
+  }).bind('mouseout focusout', function(event) {
+    prev_li = $(this);
+    prev_li.delay(100).queue(function() {
+      if (prev_li) {
+        prev_li.clearQueue();
+        // Close the menu
+        prev_li.removeClass('hover').find('[aria-expanded="true"]').attr('aria-expanded', 'false');
+        prev_li = null;
+        if (focused_item) {
+          focused_item.get(0).blur();
+        }
+      }
+    });
+  }).each(function(menu_idx) {
+    var menu = $(this).find('[role="menu"]');
+    var menuitems = $(this).find('a');
+
+    menuitems.mouseover(function(event) {
+      this.focus(); // Sometimes $(this).focus() doesn"t work
+    }).focus(function() {
+      focused_item = $(this);
+    }).each(function(item_idx) {
+      // Enable keyboard navigation
+      $(this).keydown(function(event) {
+        var target;
+        switch (event.keyCode) {
+          case 33: // Page Up
+          case 36: // Home
+            target = menuitems.first();
+            break;
+          case 34: // Page Down
+          case 35: // End
+            target = menuitems.last();
+            break;
+          case 38: // Up
+            target = (item_idx > 0) ? menuitems.eq(item_idx - 1)
+                                    : menuitems.last();
+            break;
+          case 40: // Down
+            target = (item_idx < menuitems.length - 1) ? menuitems.eq(item_idx + 1)
+                                                       : menuitems.first();
+            break;
+          case 37: // Left
+            target = (menu_idx > 0) ? main_menuitems.eq(menu_idx - 1)
+                                    : main_menuitems.last();
+            break;
+          case 39: // Right
+            target = (menu_idx < main_menuitems.length - 1) ? main_menuitems.eq(menu_idx + 1)
+                                                            : main_menuitems.first();
+            break;
+        }
+        if (target) {
+          target.get(0).focus(); // Sometimes target.focus() doesn't work
+          return false;
+        }
+        return true;
+      });
+    });
+  });
+  
+  
+  // Set up nav dropdowns  
+  $("#nav-main .toggle").click(function() {
+    if ( $("#nav-main-menu, #nav-main-menu .submenu").is(":visible") ) {
+      $("#nav-main-menu, #nav-main-menu .submenu").slideUp(100).attr("aria-hidden", "true");
+    }
+    else {
+      $("#nav-main-menu").slideToggle(150).removeAttr("aria-hidden");
+      $("#nav-main-menu .submenu").hide().attr("aria-hidden", "true");
+    }
+    return false;
+  });
+  
+  $("#nav-main-menu a[aria-haspopup='true']").click(function() {
+    new_foo = $(this);
+    if (!prev_foo || prev_foo.attr('id') !== new_foo.attr('id')) {
+      // Open the menu
+      new_foo.addClass('hover').find('[aria-expanded="false"]').attr('aria-expanded', 'true');
+      if (prev_foo) {
+        // Close the last selected menu 
+        prev_foo.dequeue();
+      }
+    } else {
+      prev_foo.clearQueue();
+    }
+    
+    
+//    $("#nav-main-menu .submenu:visible").hide();
+    if ( $(this).next(".submenu").is(":visible") ) {
+      $(this).next(".submenu").slideUp(100).attr("aria-expanded", "false");
+    }
+    else {
+      $(this).next(".submenu").slideDown(150).attr("aria-expanded", "true");
+    }
+    return false;
+  });
+
+  // Hide dropdowns when anything else is clicked
+  $(document).bind('click', function(e) {
+    var $clicked = $(e.target);
+    if (! $clicked.parents().is("#nav-main") )
+      $("#nav-main-menu, #nav-main-menu .submenu").hide().attr("aria-hidden", "true");
+      $("#nav-main .toggle").removeClass("open");
+  });
+  
+  // or gets focus
+  $("a, input, textarea, button, :focus").bind('focus', function(e) {
+    var $focused = $(e.target);
+    if (! $focused.parents().is("#nav-main")) {
+      $("#nav-main-menu, #nav-main-menu .submenu").hide().attr("aria-hidden", "true");
+      $("#nav-main .toggle").removeClass("open");
+    }
+  });
+
+  // With JavaScript enabled, we can provide a full navigation with #nav-main.
+  // Now "hide" the duplicated #footer-menu from AT.
+  $('#footer-menu').attr('role', 'presentation');
+});
+
+// Reset menus on resize
+$(window).resize(function(){
+  $("#nav-main-menu, #nav-main-menu .submenu").removeAttr("style");
+});
diff --git a/templates/base-resp.html b/templates/base-resp.html
index 350d7730ccf..c92d10857ae 100644
--- a/templates/base-resp.html
+++ b/templates/base-resp.html
@@ -38,13 +38,14 @@
         <a href="http://www.mozilla.org/" id="tabzilla">{{ _('Mozilla') }}</a>
 
         {% block site_header_nav %}
-        <nav id="nav-main" role="navigation">
-        <ol>
-            <li><a href="{{ url('mozorg.mission') }}">{{_('Mission')}}</a></li>
-            <li><a href="{{ url('mozorg.about') }}">{{_('About')}}</a></li>
-            <li><a href="{{ url('mozorg.projects') }}">{{_('Projects')}}</a></li>
-            <li><a href="{{ url('mozorg.contribute') }}">{{_('Get Involved')}}</a></li>
-        </ol>
+        <nav id="nav-main" role="menubar">
+          <a class="toggle" href="#nav-main-menu">{{_('Menu')}}</a>
+          <ul role="menu" id="nav-main-menu">
+            <li role="menuitem" class="first"><a href="{{ url('mozorg.mission') }}">{{_('Mission')}}</a></li>
+            <li role="menuitem"><a href="{{ url('mozorg.about') }}">{{_('About')}}</a></li>
+            <li role="menuitem"><a href="{{ url('mozorg.projects') }}">{{_('Projects')}}</a></li>
+            <li role="menuitem" class="last"><a href="{{ url('mozorg.contribute') }}">{{_('Get Involved')}}</a></li>
+          </ul>
         </nav>
         {% endblock %}
 
@@ -159,7 +160,7 @@ <h3>{{_('Thank you for signing up!')}}</h3>
       </footer>
     {% endblock %}
 
-    <script src="//mozilla.org/tabzilla/media/js/tabzilla.js"></script>
+    <script src="/tabzilla/media/js/tabzilla.js"></script>
     </div><!-- close #outer-wrapper -->
 
     {% block site_js %}
@@ -170,5 +171,50 @@ <h3>{{_('Thank you for signing up!')}}</h3>
     {% block webtrends %}
      {% include "includes/webtrends.html" %}
     {% endblock %}
+    
+<script>
+  // mobile dropdown menu
+  $("#nav-main .toggle").click(function() {
+    if ( $("#nav-main-menu").is(":visible") ) {
+      $("#nav-main-menu:visible").slideUp(100).attr("aria-expanded", "false");
+      $("#nav-main .toggle.open").removeClass("open");
+    }
+    else {
+      $("#nav-main-menu").slideToggle(150).attr("aria-expanded", "true");
+      $(this).toggleClass("open");
+    }
+    return false;
+  });
+
+/*
+  // Hide menu when anything else is clicked
+  $(document).bind('click', function(e) {
+    var $clicked = $(e.target);
+    if (! $clicked.parents("#nav-main"))
+      $("#nav-main-menu").hide().attr("aria-expanded", "false");
+      $("#nav-main .toggle").removeClass("open");
+  });
+  
+  // or gets focus
+  $("a, input, textarea, button, :focus").bind('focus', function(e) {
+    var $focused = $(e.target);
+    if (! $focused.parents("#nav-main")) {
+      $("#nav-main-menu").hide().attr("aria-expanded", "false");
+      $("#nav-main .toggle").removeClass("open");
+    }
+  });
+*/
+
+  // reset the menu for wider windows   
+  $(window).resize(function() {
+    if ( $(window).width() >= 761 ) {
+      $("#nav-main-menu").removeAttr("style").attr("aria-expanded", "true");
+    }
+    else if ( $(window).width() <= 760 ) {
+      $("#nav-main-menu").removeAttr("style").attr("aria-expanded", "false");
+    }
+  });
+  </script>
+    
   </body>
 </html>

From 4966e0746cb098bd153eefc1ffb7e5885b20a5a0 Mon Sep 17 00:00:00 2001
From: Craig Cook <craigcook@gmail.com>
Date: Wed, 20 Jun 2012 12:35:09 -0700
Subject: [PATCH 02/10] Multi-level mobile menu sort of working

---
 media/css/firefox/menu.less | 67 ++++++++++++++++++++++++++++++++-----
 media/js/nav-main-resp.js   |  2 +-
 media/js/nav-main.js        | 61 +++++++++++++++++++++++++++++++++
 3 files changed, 120 insertions(+), 10 deletions(-)

diff --git a/media/css/firefox/menu.less b/media/css/firefox/menu.less
index d88fcf3cba9..7ce3f1cfd8d 100644
--- a/media/css/firefox/menu.less
+++ b/media/css/firefox/menu.less
@@ -1,6 +1,6 @@
 /* Top Level Menu Items */
 
-#nav-main ul {
+#nav-main-menu {
     .inline-block;
     margin: 0;
 
@@ -12,8 +12,8 @@
         a:link,
         a:visited,
         span {
-           z-index: 100;
-           position: relative;
+            z-index: 100;
+            position: relative;
         }
 
         &.hover a {
@@ -28,7 +28,7 @@
 
 /* Second-level Menu Items */
 
-.js #nav-main li.hover ul {
+.js #nav-main li.hover .submenu {
     left: 0;
     opacity: 1;
     -moz-transition: opacity 0.2s ease-in-out;
@@ -36,20 +36,19 @@
     transition: opacity 0.2s ease-in-out;
 }
 
-#nav-main li ul,
-#nav-main li ul li {
+#nav-main .submenu,
+#nav-main .submenu li {
     height: auto;
     border: 0;
     float: none;
     display: block;
 }
 
-#nav-main li ul {
+#nav-main .submenu {
     position: absolute;
     left: -999em;
-    top: 48px;
+    top: 44px;
     opacity: 0;
-    z-index: 999;
     width: 190px;
     text-shadow: 1px 1px 0 #fff, 0 0 5px #fff;
     background: #fff;
@@ -59,6 +58,7 @@
     li,
     li.hover {
         background-image: none;
+        z-index: 120;
 
         a,
         a:link,
@@ -146,3 +146,52 @@
 
 }
 
+/* Mobile Layout: 320px */
+@media only screen and (max-width: @breakTablet) {
+    
+    #nav-main-menu {
+        margin: 15px 0 0 -10px;
+
+        li {
+//            z-index: 100;
+    
+            a,
+            a:link,
+            a:visited,
+            span {
+//               z-index: 100;
+            }
+    
+            &.hover a {
+                background-image: none;
+            }
+        }
+
+    }
+
+    #nav-main-menu .submenu,
+    .js #nav-main li.hover .submenu {
+        z-index: 120;
+        left: 60px;
+        top: auto;
+        margin-top: -5px;
+        display: none;
+        background: #fff;
+        border-radius: 10px;
+        box-shadow: 0 2px 3px rgba(0,0,0,.35);
+        opacity: 1;
+        padding: 0;
+    }
+    
+    #nav-main-menu .submenu a,
+    #nav-main-menu .submenu a:link,
+    #nav-main-menu .submenu a:visited {
+        z-index: 130;
+        -moz-transition: none 0s;
+        -webkit-transition: none 0s;
+        transition: none 0s;
+    }
+
+    
+}
+
diff --git a/media/js/nav-main-resp.js b/media/js/nav-main-resp.js
index 84f642c433e..5e4aa5de76d 100644
--- a/media/js/nav-main-resp.js
+++ b/media/js/nav-main-resp.js
@@ -105,7 +105,7 @@ $(document).ready(function() {
     }
     
     
-//    $("#nav-main-menu .submenu:visible").hide();
+    $("#nav-main-menu .submenu:visible").hide();
     if ( $(this).next(".submenu").is(":visible") ) {
       $(this).next(".submenu").slideUp(100).attr("aria-expanded", "false");
     }
diff --git a/media/js/nav-main.js b/media/js/nav-main.js
index 2652771cfec..97ccecd192b 100644
--- a/media/js/nav-main.js
+++ b/media/js/nav-main.js
@@ -78,7 +78,68 @@ $(document).ready(function() {
     });
   });
 
+if ( $(window).width() <= 760 ) {
+  
+  // mobile dropdown menu
+  $("#nav-main .toggle").click(function() {
+    if ( $("#nav-main-menu").is(":visible") ) {
+      $("#nav-main-menu:visible").slideUp(100).attr("aria-expanded", "false");
+      $("#nav-main .toggle.open").removeClass("open");
+    }
+    else {
+      $("#nav-main-menu").slideToggle(150).attr("aria-expanded", "true");
+      $(this).toggleClass("open");
+    }
+    return false;
+  });
+  
+  $("#nav-main-menu a[aria-haspopup='true']").click(function(){
+    if ( $(this).next(".submenu").is(":visible") ) {
+      $(this).next(".submenu").slideUp(100).attr("aria-expanded", "false");
+    }
+    else {
+      $(this).next(".submenu").slideDown(150).attr("aria-expanded", "true");
+    }
+    return false;
+  });
+
+/*
+  // Hide menu when anything else is clicked
+  $(document).bind('click', function(e) {
+    var $clicked = $(e.target);
+    if (! $clicked.parents("#nav-main"))
+      $("#nav-main-menu, #nav-main-menu .submenu").hide().attr("aria-expanded", "false");
+      $("#nav-main .toggle").removeClass("open");
+  });
+ 
+  // or gets focus
+  $("a, input, textarea, button, :focus").bind('focus', function(e) {
+    var $focused = $(e.target);
+    if (! $focused.parents("#nav-main")) {
+      $("#nav-main-menu, #nav-main-menu .submenu").hide().attr("aria-expanded", "false");
+      $("#nav-main .toggle").removeClass("open");
+    }
+  });
+*/
+
+  
+} // endif
+  
+    // reset the menu for wider windows   
+  $(window).resize(function() {
+    if ( $(window).width() >= 761 ) {
+      $("#nav-main-menu").removeAttr("style").removeAttr("aria-hidden");
+    }
+    else if ( $(window).width() <= 760 ) {
+      $("#nav-main-menu").removeAttr("style").attr("aria-hidden", "true");
+    }
+  });
+  
+
+
   // With JavaScript enabled, we can provide a full navigation with #nav-main.
   // Now "hide" the duplicated #footer-menu from AT.
   $('#footer-menu').attr('role', 'presentation');
+
+  
 });

From 9e07ae67fbb40fdebced97057b6397401d836115 Mon Sep 17 00:00:00 2001
From: Michael Gauthier <mike@silverorange.com>
Date: Wed, 20 Jun 2012 17:03:12 -0300
Subject: [PATCH 03/10] Remove trailing whitespace.

---
 media/js/nav-main-resp.js | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/media/js/nav-main-resp.js b/media/js/nav-main-resp.js
index 5e4aa5de76d..2b9590ce005 100644
--- a/media/js/nav-main-resp.js
+++ b/media/js/nav-main-resp.js
@@ -12,7 +12,7 @@ $(document).ready(function() {
       // Open the menu
       new_li.addClass('hover').find('[aria-expanded="false"]').attr('aria-expanded', 'true');
       if (prev_li) {
-        // Close the last selected menu 
+        // Close the last selected menu
         prev_li.dequeue();
       }
     } else {
@@ -77,9 +77,9 @@ $(document).ready(function() {
       });
     });
   });
-  
-  
-  // Set up nav dropdowns  
+
+
+  // Set up nav dropdowns
   $("#nav-main .toggle").click(function() {
     if ( $("#nav-main-menu, #nav-main-menu .submenu").is(":visible") ) {
       $("#nav-main-menu, #nav-main-menu .submenu").slideUp(100).attr("aria-hidden", "true");
@@ -90,21 +90,20 @@ $(document).ready(function() {
     }
     return false;
   });
-  
+
   $("#nav-main-menu a[aria-haspopup='true']").click(function() {
     new_foo = $(this);
     if (!prev_foo || prev_foo.attr('id') !== new_foo.attr('id')) {
       // Open the menu
       new_foo.addClass('hover').find('[aria-expanded="false"]').attr('aria-expanded', 'true');
       if (prev_foo) {
-        // Close the last selected menu 
+        // Close the last selected menu
         prev_foo.dequeue();
       }
     } else {
       prev_foo.clearQueue();
     }
-    
-    
+
     $("#nav-main-menu .submenu:visible").hide();
     if ( $(this).next(".submenu").is(":visible") ) {
       $(this).next(".submenu").slideUp(100).attr("aria-expanded", "false");
@@ -122,7 +121,7 @@ $(document).ready(function() {
       $("#nav-main-menu, #nav-main-menu .submenu").hide().attr("aria-hidden", "true");
       $("#nav-main .toggle").removeClass("open");
   });
-  
+
   // or gets focus
   $("a, input, textarea, button, :focus").bind('focus', function(e) {
     var $focused = $(e.target);

From 3ffcc867ebb906606f02bbbad0eef55ae48578b3 Mon Sep 17 00:00:00 2001
From: Michael Gauthier <mike@silverorange.com>
Date: Mon, 25 Jun 2012 03:21:00 -0300
Subject: [PATCH 04/10] Responsive menu JavaScript.

---
 apps/firefox/templates/firefox/base-resp.html |   4 +-
 media/css/firefox/menu-resp.less              |  23 +-
 media/css/sandstone/sandstone-resp.less       |  18 +
 media/js/nav-main-resp.js                     | 362 +++++++++++++++---
 templates/base-resp.html                      |   2 +-
 5 files changed, 341 insertions(+), 68 deletions(-)

diff --git a/apps/firefox/templates/firefox/base-resp.html b/apps/firefox/templates/firefox/base-resp.html
index a330be6d440..2564d2eff0d 100644
--- a/apps/firefox/templates/firefox/base-resp.html
+++ b/apps/firefox/templates/firefox/base-resp.html
@@ -18,7 +18,7 @@
 
 {% block site_header_nav %}
 <nav id="nav-main" role="navigation">
-  <a class="toggle" href="#nav-main-menu">{{_('Menu')}}</a>
+  <span class="toggle" role="button" aria-controls="nav-main-menu" tabindex="0">{{_('Menu')}}</span>
   <ul id="nav-main-menu" role="menubar">
     <li class="first" id="nav-main-features"><a href="/en-US/firefox/features/" tabindex="0" aria-owns="nav-main-features-submenu" aria-haspopup="true">Desktop</a>
       <ul aria-expanded="false" id="nav-main-features-submenu" class="submenu">
@@ -81,7 +81,7 @@ <h2><img src="{{ media('img/firefox/template/header-logo.png') }}" alt="Mozilla
 {% endblock %}
 
 {% block site_js %}
-  {{ js('firefox') }}
+  {{ js('firefox-resp') }}
 {% endblock %}
 
 {% block webtrends %}
diff --git a/media/css/firefox/menu-resp.less b/media/css/firefox/menu-resp.less
index 45aa5db30d5..57728c0de6b 100644
--- a/media/css/firefox/menu-resp.less
+++ b/media/css/firefox/menu-resp.less
@@ -39,7 +39,7 @@
     position: absolute;
     z-index: 100;
     left: -999em;
-    top: 44px;
+    top: 43px;
     opacity: 0;
     width: 190px;
     text-shadow: 1px 1px 0 #fff, 0 0 5px #fff;
@@ -106,7 +106,6 @@
     }
 }
 
-/* }}} */
 /* {{{ Dark Background Header */
 
 .darkbg #nav-main ul li {
@@ -137,9 +136,11 @@
 
 }
 
+/* }}} */
+
 /* Mobile Layout: 320px */
 @media only screen and (max-width: @breakTablet) {
-    
+
     #nav-main-menu {
         margin: 15px 0 0 -10px;
 
@@ -151,17 +152,20 @@
 
     #nav-main-menu .submenu,
     .js #nav-main li.hover .submenu {
-        left: 60px;
-        top: auto;
+        left: -999em;
         margin-top: -8px;
-        display: none;
         background: #fff;
-        border-radius: 10px;
-        box-shadow: 0 2px 3px rgba(0,0,0,.35);
+        .border-radius(10px);
+        .box-shadow(0 2px 3px rgba(0,0,0,.35));
         opacity: 1;
         padding: 0;
     }
-    
+
+    .js #nav-main li .submenu {
+        xleft: 80px;
+        xtop: 0px;
+    }
+
     #nav-main-menu .submenu a,
     #nav-main-menu .submenu a:link,
     #nav-main-menu .submenu a:visited {
@@ -170,6 +174,5 @@
         transition: none 0s;
     }
 
-    
 }
 
diff --git a/media/css/sandstone/sandstone-resp.less b/media/css/sandstone/sandstone-resp.less
index 206deb7ba43..48b211ab01b 100644
--- a/media/css/sandstone/sandstone-resp.less
+++ b/media/css/sandstone/sandstone-resp.less
@@ -846,6 +846,7 @@ nav.menu-bar {
             background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAbCAYAAABvCO8sAAABU0lEQVRIx82Wz0rDQBCHd5MhwUshDZFCscSUSHLKoVCt+NaC+AAiXpNLCoEeAr0Y0oMgMf87g/QBatnBhT3sYfnYmd9+u9J13dfpdPqk6/ooFI6+7+XhcHiDxWKxCYLgmwO43W43MJlMBtu2OymlSp4Yx1EQCzRNG2kKxYMORBwgOC6UA08HBaytGIZBcPSQWICwNMuyO8MwlAKbppHEktjMe1xfM5X0k4Bn7fB9/88ppdbBuRvrur4srZ7nveA9fOQITVmW74BqW4dh+IWhGRSHRkvTdE2m6WazWc1hmv1+bwCVUnU5T4M4QJbBOXAAiQVt27KZhljQdV2GzbzlCA2x/r9p8LHmNU1VVZcFZ7lcPjuO88ARmqIoPgDVtoqiqOR4nuI4XoFlWe18Pv/hME2e51f8f5rxN6YsaiMWXXzJZRpiEXCXJMmNaZpKgfhwE3B3BGJ212JCzaPDAAAAAElFTkSuQmCC);
             text-indent: -999em;
             overflow: hidden;
+            cursor: pointer;
         }
     
         #nav-main-menu li {
@@ -860,10 +861,14 @@ nav.menu-bar {
         }
         
         #nav-main-menu a {
+            cursor: pointer;
             display: block;
             text-transform: none;
             padding: 12px 35px 12px 10px;
             margin: 0 -10px;
+        }
+
+        #nav-main-menu a.submenu-item {
             background: 94% 50% no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=);
         }
         
@@ -876,9 +881,21 @@ nav.menu-bar {
             background-color: #247ac1;
             background-position: 94% 50%;
             background-repeat: no-repeat;
+            background-image: -moz-linear-gradient(#43a6e2, #247ac1);
+            background-image: -ms-linear-gradient(#43a6e2, #247ac1);
+            background-image: -o-linear-gradient(#43a6e2, #247ac1);
+            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43a6e2), color-stop(100%,#247ac1));
+            background-image: -webkit-linear-gradient(#43a6e2, #247ac1);
+            background-image: linear-gradient(#43a6e2, #247ac1);
+        }
+        
+        #nav-main-menu a.submenu-item:hover,
+        #nav-main-menu a.submenu-item:focus,
+        #nav-main-menu a.submenu-item:active {
             background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -moz-linear-gradient(#43a6e2, #247ac1);
             background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -ms-linear-gradient(#43a6e2, #247ac1);
             background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -o-linear-gradient(#43a6e2, #247ac1);
+            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43a6e2), color-stop(100%,#247ac1));
             background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -webkit-linear-gradient(#43a6e2, #247ac1);
             background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), linear-gradient(#43a6e2, #247ac1);
         }
@@ -886,6 +903,7 @@ nav.menu-bar {
         #nav-main-menu li.first > a {
             border-radius: 10px 10px 0 0;
         }
+
         #nav-main-menu li.last > a {
             border-radius: 0 0 10px 10px;
         }        
diff --git a/media/js/nav-main-resp.js b/media/js/nav-main-resp.js
index 2b9590ce005..e4ca7a5a756 100644
--- a/media/js/nav-main-resp.js
+++ b/media/js/nav-main-resp.js
@@ -1,24 +1,31 @@
+/* vim: set expandtab tabstop=2 shiftwidth=2 softtabstop=2: */
+
 $(document).ready(function() {
+
+  // If there's no nav-main element, don't initialize the menu.
   if ($('#nav-main').length === 0) {
     return;
   }
 
-  var main_menuitems = $('#nav-main [tabindex="0"]');
+  var main_menuitems = $('#nav-main ul [tabindex="0"]');
   var prev_li, new_li, focused_item;
 
   $('#nav-main [role="menubar"] > li').bind('mouseover focusin', function(event) {
     new_li = $(this);
-    if (!prev_li || prev_li.attr('id') !== new_li.attr('id')) {
-      // Open the menu
-      new_li.addClass('hover').find('[aria-expanded="false"]').attr('aria-expanded', 'true');
-      if (prev_li) {
+
+    if (prev_li) {
+      if (prev_li.attr('id') !== new_li.attr('id')) {
         // Close the last selected menu
         prev_li.dequeue();
+      } else {
+        prev_li.clearQueue();
       }
-    } else {
-      prev_li.clearQueue();
     }
+
+    // Open the menu
+    new_li.addClass('hover').find('[aria-expanded="false"]').attr('aria-expanded', 'true');
   }).bind('mouseout focusout', function(event) {
+
     prev_li = $(this);
     prev_li.delay(100).queue(function() {
       if (prev_li) {
@@ -31,16 +38,16 @@ $(document).ready(function() {
         }
       }
     });
+
   }).each(function(menu_idx) {
     var menu = $(this).find('[role="menu"]');
     var menuitems = $(this).find('a');
 
     menuitems.mouseover(function(event) {
-      this.focus(); // Sometimes $(this).focus() doesn"t work
+      this.focus(); // Sometimes $(this).focus() doesn't work
     }).focus(function() {
       focused_item = $(this);
     }).each(function(item_idx) {
-      // Enable keyboard navigation
       $(this).keydown(function(event) {
         var target;
         switch (event.keyCode) {
@@ -48,22 +55,27 @@ $(document).ready(function() {
           case 36: // Home
             target = menuitems.first();
             break;
+
           case 34: // Page Down
           case 35: // End
             target = menuitems.last();
             break;
+
           case 38: // Up
             target = (item_idx > 0) ? menuitems.eq(item_idx - 1)
                                     : menuitems.last();
             break;
+
           case 40: // Down
             target = (item_idx < menuitems.length - 1) ? menuitems.eq(item_idx + 1)
                                                        : menuitems.first();
             break;
+
           case 37: // Left
             target = (menu_idx > 0) ? main_menuitems.eq(menu_idx - 1)
                                     : main_menuitems.last();
             break;
+
           case 39: // Right
             target = (menu_idx < main_menuitems.length - 1) ? main_menuitems.eq(menu_idx + 1)
                                                             : main_menuitems.first();
@@ -78,65 +90,305 @@ $(document).ready(function() {
     });
   });
 
+  var NavMain = {};
+
+  /**
+   * Whether or not min/max width media queries are supported in CSS
+   *
+   * If not supported, the small mode is never triggered.
+   *
+   * @var Boolean
+   */
+  NavMain.hasMediaQueryWidths = (function() {
+    return !(/MSIE\ (4|5|6|7|8)/.test(navigator.userAgent));
+  })();
+
+  /**
+   * Whether or not the main nav is in small mode
+   *
+   * @var Boolean
+   */
+  NavMain.smallMode = false;
 
-  // Set up nav dropdowns
-  $("#nav-main .toggle").click(function() {
-    if ( $("#nav-main-menu, #nav-main-menu .submenu").is(":visible") ) {
-      $("#nav-main-menu, #nav-main-menu .submenu").slideUp(100).attr("aria-hidden", "true");
+  /**
+   * Whether or not the main menu is opened in small mode
+   *
+   * @var Boolean
+   */
+  NavMain.smallMenuOpen = false;
+
+  /**
+   * Jquery object representing the currently opened sub-menu
+   * in small-mode
+   *
+   * @var jQuery
+   */
+  NavMain.currentSmallSubmenu = null;
+
+  /**
+   * Main menu items in the menubar
+   *
+   * @var jQuery
+   */
+  NavMain.mainMenuItems = null;
+
+  /**
+   * Main menu items in the menubar
+   *
+   * @var jQuery
+   */
+  NavMain.mainMenuLinks = null;
+
+  /**
+   * Removes the href attribute from menu items with submenus
+   *
+   * This prevents load bar from appearing on iOS when you press
+   * an item.
+   */
+  NavMain.unlinkMainMenuItems = function()
+  {
+    NavMain.mainMenuLinks.each(function(i, n) {
+      var node = $(n);
+      if (node.siblings('.submenu')) {
+        node.attr('data-old-href', node.attr('href'));
+        node.removeAttr('href');
+      }
+    });
+  };
+
+  /**
+   * Returns the href attribute back to main menu links
+   */
+  NavMain.relinkMainMenuLinks = function()
+  {
+    NavMain.mainMenuLinks.each(function(i, n) {
+      var node = $(n);
+      if (node.attr('data-old-href')) {
+        node.attr('href', node.attr('data-old-href'));
+        node.removeAttr('data-old-href');
+      }
+    });
+  };
+
+  NavMain.init = function()
+  {
+    NavMain.mainMenuItems = $('#nav-main [role="menubar"] > li');
+    NavMain.mainMenuLinks = $('#nav-main [role="menubar"] > li > [tabindex="0"]');
+
+    if (NavMain.hasMediaQueryWidths) {
+      $(window).resize(NavMain.handleResize);
+      NavMain.handleResize();
     }
-    else {
-      $("#nav-main-menu").slideToggle(150).removeAttr("aria-hidden");
-      $("#nav-main-menu .submenu").hide().attr("aria-hidden", "true");
+
+    // set up small-mode menu toggle button
+    $('#nav-main .toggle')
+      .click(function(e) {
+        e.preventDefault();
+        NavMain.toggleSmallMenu();
+      })
+      .keydown(function(e) {
+        if (e.keyCode == 13) {
+          NavMain.toggleSmallMenu();
+        }
+      });
+
+    // On touch-enabled devices, hijack the click event and just make it focus
+    // the item. This prevents flashing menus on iOS and prevents clicking on
+    // a top-level item causing navigation on Android.
+    if ('ontouchstart' in window) {
+      NavMain.mainMenuLinks.click(function(e) {
+        e.preventDefault();
+        this.focus();
+      });
     }
-    return false;
-  });
 
-  $("#nav-main-menu a[aria-haspopup='true']").click(function() {
-    new_foo = $(this);
-    if (!prev_foo || prev_foo.attr('id') !== new_foo.attr('id')) {
-      // Open the menu
-      new_foo.addClass('hover').find('[aria-expanded="false"]').attr('aria-expanded', 'true');
-      if (prev_foo) {
-        // Close the last selected menu
-        prev_foo.dequeue();
-      }
+    // With JavaScript enabled, we can provide a full navigation with
+    // #nav-main. Now "hide" the duplicated #footer-menu from AT.
+    $('#footer-menu').attr('role', 'presentation');
+  };
+
+  NavMain.toggleSmallMenu = function()
+  {
+    if (NavMain.smallMenuOpen) {
+      NavMain.closeSmallMenu();
     } else {
-      prev_foo.clearQueue();
+      NavMain.openSmallMenu();
     }
+  };
 
-    $("#nav-main-menu .submenu:visible").hide();
-    if ( $(this).next(".submenu").is(":visible") ) {
-      $(this).next(".submenu").slideUp(100).attr("aria-expanded", "false");
+  NavMain.handleResize = function()
+  {
+    var width = $(window).width();
+
+    if (width <= 760 && !NavMain.smallMode) {
+      NavMain.enterSmallMode();
     }
-    else {
-      $(this).next(".submenu").slideDown(150).attr("aria-expanded", "true");
+
+    if (width > 760 && NavMain.smallMode) {
+      NavMain.leaveSmallMode();
     }
-    return false;
-  });
+  };
 
-  // Hide dropdowns when anything else is clicked
-  $(document).bind('click', function(e) {
-    var $clicked = $(e.target);
-    if (! $clicked.parents().is("#nav-main") )
-      $("#nav-main-menu, #nav-main-menu .submenu").hide().attr("aria-hidden", "true");
-      $("#nav-main .toggle").removeClass("open");
-  });
+  NavMain.enterSmallMode = function()
+  {
+      NavMain.unlinkMainMenuItems();
+
+      $('#nav-main-menu').attr('aria-hidden', 'true');
 
-  // or gets focus
-  $("a, input, textarea, button, :focus").bind('focus', function(e) {
+      $(document).click(NavMain.handleDocumentClick);
+      $('a, input, textarea, button, :focus')
+        .focus(NavMain.handleDocumentFocus);
+
+      NavMain.smallMode = true;
+      console.log('small');
+  };
+
+  NavMain.leaveSmallMode = function()
+  {
+      NavMain.relinkMainMenuLinks();
+
+      $('#nav-main-menu').removeAttr('aria-hidden');
+
+      $(document).unbind('click', NavMain.handleDocumentClick);
+      $('a, input, textarea, button, :focus')
+        .unbind('focus', NavMain.handleDocumentFocus);
+
+      NavMain.smallMode = false;
+      NavMain.smallMenuOpen = false;
+      console.log('big');
+  };
+
+  NavMain.handleDocumentClick = function(e)
+  {
+    if (NavMain.smallMode) {
+      var $clicked = $(e.target);
+      if (!$clicked.parents().is('#nav-main')) {
+        NavMain.closeSmallMenu();
+      }
+    }
+  };
+
+  NavMain.handleDocumentFocus = function(e)
+  {
     var $focused = $(e.target);
-    if (! $focused.parents().is("#nav-main")) {
-      $("#nav-main-menu, #nav-main-menu .submenu").hide().attr("aria-hidden", "true");
-      $("#nav-main .toggle").removeClass("open");
+    if (!$focused.parents().is('#nav-main')) {
+      NavMain.closeSmallMenu();
     }
-  });
+  };
 
-  // With JavaScript enabled, we can provide a full navigation with #nav-main.
-  // Now "hide" the duplicated #footer-menu from AT.
-  $('#footer-menu').attr('role', 'presentation');
-});
+  NavMain.openSmallMenu = function()
+  {
+    if (NavMain.smallMenuOpen) {
+      return;
+    }
+
+    $('#nav-main-menu')
+      .slideToggle(150)
+      .removeAttr('aria-hidden');
+
+    $('#nav-main .toggle').addClass('open');
+
+    // add click handler and set submenu class on submenus
+    NavMain.mainMenuLinks
+      .addClass('submenu-item')
+      .click(NavMain.handleSubmenuClick);
+
+    // focus first item
+    $('#nav-main-menu [tabindex=0]').get(0).focus();
+
+    NavMain.smallMenuOpen = true;
+  };
+
+  NavMain.handleSubmenuClick = function(e)
+  {
+    e.preventDefault();
+    var menu = $(this).siblings('.submenu');
+    NavMain.openSmallSubmenu(menu);
+  };
+
+  NavMain.handleToggleKeypress = function(e)
+  {
+    if (e.keyCode == 13) {
+      NavMain.toggleSmallMenu();
+    }
+  };
+
+  NavMain.closeSmallMenu = function()
+  {
+    if (!NavMain.smallMenuOpen) {
+      return;
+    }
+
+    $('#nav-main-menu, #nav-main-menu .submenu')
+      .slideUp(100)
+      .attr('aria-hidden', 'true');
+
+    $('#nav-main .toggle').removeClass('open');
+
+    // remove submenu click handler and CSS class
+    NavMain.mainMenuLinks
+      .addClass('submenu-item')
+      .unbind('click', NavMain.handleSubmenuClick);
+
+    if (NavMain.currentSmallSubmenu) {
+      NavMain.closeSmallSubmenu(NavMain.currentSmallSubmenu);
+    }
+    NavMain.currentSmallSubmenu = null;
+
+    NavMain.smallMenuOpen = false;
+  };
+
+  NavMain.openSmallSubmenu = function(menu)
+  {
+    // close previous menu
+    if ( NavMain.currentSmallSubmenu
+      && NavMain.currentSmallSubmenu.get(0).id !== menu.get(0).id) {
+      NavMain.closeSmallSubmenu(NavMain.currentSmallSubmenu);
+    }
+
+    // skip current menu
+    if ( NavMain.currentSmallSubmenu
+      && NavMain.currentSmallSubmenu.get(0).id === menu.get(0).id) {
+      // still focus first item
+      menu.find('a').get(0).focus();
+      return;
+    }
+
+    menu
+      .stop(true)
+      .css(
+        {
+          'left'         : '80px',
+          'top'          : '0',
+          'display'      : 'none',
+          'opacity'      : '1',
+          'height'       : 'auto',
+          'marginTop'    : '-8px',
+          'marginBottom' : '0'
+        }
+      )
+      .slideDown(150)
+      .attr('aria-expanded', 'true');
+
+    // focus first item
+    menu.find('a').get(0).focus();
+
+    NavMain.currentSmallSubmenu = menu;
+  };
+
+  NavMain.closeSmallSubmenu = function(menu)
+  {
+    menu
+      .stop(true)
+      .fadeOut(100, function() {
+      menu
+        .css('left', '-999em')
+        .css('top', '0')
+        .attr('aria-expanded', 'false');
+    });
+  };
+
+
+  NavMain.init();
 
-// Reset menus on resize
-$(window).resize(function(){
-  $("#nav-main-menu, #nav-main-menu .submenu").removeAttr("style");
 });
diff --git a/templates/base-resp.html b/templates/base-resp.html
index c92d10857ae..6fc0996b258 100644
--- a/templates/base-resp.html
+++ b/templates/base-resp.html
@@ -39,7 +39,7 @@
 
         {% block site_header_nav %}
         <nav id="nav-main" role="menubar">
-          <a class="toggle" href="#nav-main-menu">{{_('Menu')}}</a>
+          <span class="toggle" role="button" aria-controls="nav-main-menu" tabindex="0">{{_('Menu')}}</span>
           <ul role="menu" id="nav-main-menu">
             <li role="menuitem" class="first"><a href="{{ url('mozorg.mission') }}">{{_('Mission')}}</a></li>
             <li role="menuitem"><a href="{{ url('mozorg.about') }}">{{_('About')}}</a></li>

From 4ae8b4477fcfcdd04ceba7138b05e65c7d276ac4 Mon Sep 17 00:00:00 2001
From: Michael Gauthier <mike@silverorange.com>
Date: Mon, 25 Jun 2012 03:23:57 -0300
Subject: [PATCH 05/10] Use 4 spaces instead of 2 spaces for indent in JS code.

---
 media/js/nav-main-resp.js | 690 +++++++++++++++++++-------------------
 1 file changed, 343 insertions(+), 347 deletions(-)

diff --git a/media/js/nav-main-resp.js b/media/js/nav-main-resp.js
index e4ca7a5a756..86fdfec8e8d 100644
--- a/media/js/nav-main-resp.js
+++ b/media/js/nav-main-resp.js
@@ -1,394 +1,390 @@
-/* vim: set expandtab tabstop=2 shiftwidth=2 softtabstop=2: */
-
 $(document).ready(function() {
 
-  // If there's no nav-main element, don't initialize the menu.
-  if ($('#nav-main').length === 0) {
-    return;
-  }
-
-  var main_menuitems = $('#nav-main ul [tabindex="0"]');
-  var prev_li, new_li, focused_item;
+    // If there's no nav-main element, don't initialize the menu.
+    if ($('#nav-main').length === 0) {
+        return;
+    }
 
-  $('#nav-main [role="menubar"] > li').bind('mouseover focusin', function(event) {
-    new_li = $(this);
+    var main_menuitems = $('#nav-main ul [tabindex="0"]');
+    var prev_li, new_li, focused_item;
 
-    if (prev_li) {
-      if (prev_li.attr('id') !== new_li.attr('id')) {
-        // Close the last selected menu
-        prev_li.dequeue();
-      } else {
-        prev_li.clearQueue();
-      }
-    }
+    $('#nav-main [role="menubar"] > li').bind('mouseover focusin', function(event) {
+        new_li = $(this);
 
-    // Open the menu
-    new_li.addClass('hover').find('[aria-expanded="false"]').attr('aria-expanded', 'true');
-  }).bind('mouseout focusout', function(event) {
-
-    prev_li = $(this);
-    prev_li.delay(100).queue(function() {
-      if (prev_li) {
-        prev_li.clearQueue();
-        // Close the menu
-        prev_li.removeClass('hover').find('[aria-expanded="true"]').attr('aria-expanded', 'false');
-        prev_li = null;
-        if (focused_item) {
-          focused_item.get(0).blur();
+        if (prev_li) {
+            if (prev_li.attr('id') !== new_li.attr('id')) {
+                // Close the last selected menu
+                prev_li.dequeue();
+            } else {
+                prev_li.clearQueue();
+            }
         }
-      }
-    });
 
-  }).each(function(menu_idx) {
-    var menu = $(this).find('[role="menu"]');
-    var menuitems = $(this).find('a');
-
-    menuitems.mouseover(function(event) {
-      this.focus(); // Sometimes $(this).focus() doesn't work
-    }).focus(function() {
-      focused_item = $(this);
-    }).each(function(item_idx) {
-      $(this).keydown(function(event) {
-        var target;
-        switch (event.keyCode) {
-          case 33: // Page Up
-          case 36: // Home
-            target = menuitems.first();
-            break;
-
-          case 34: // Page Down
-          case 35: // End
-            target = menuitems.last();
-            break;
-
-          case 38: // Up
-            target = (item_idx > 0) ? menuitems.eq(item_idx - 1)
-                                    : menuitems.last();
-            break;
-
-          case 40: // Down
-            target = (item_idx < menuitems.length - 1) ? menuitems.eq(item_idx + 1)
-                                                       : menuitems.first();
-            break;
-
-          case 37: // Left
-            target = (menu_idx > 0) ? main_menuitems.eq(menu_idx - 1)
-                                    : main_menuitems.last();
-            break;
-
-          case 39: // Right
-            target = (menu_idx < main_menuitems.length - 1) ? main_menuitems.eq(menu_idx + 1)
-                                                            : main_menuitems.first();
-            break;
-        }
-        if (target) {
-          target.get(0).focus(); // Sometimes target.focus() doesn't work
-          return false;
-        }
-        return true;
-      });
-    });
-  });
-
-  var NavMain = {};
-
-  /**
-   * Whether or not min/max width media queries are supported in CSS
-   *
-   * If not supported, the small mode is never triggered.
-   *
-   * @var Boolean
-   */
-  NavMain.hasMediaQueryWidths = (function() {
-    return !(/MSIE\ (4|5|6|7|8)/.test(navigator.userAgent));
-  })();
-
-  /**
-   * Whether or not the main nav is in small mode
-   *
-   * @var Boolean
-   */
-  NavMain.smallMode = false;
-
-  /**
-   * Whether or not the main menu is opened in small mode
-   *
-   * @var Boolean
-   */
-  NavMain.smallMenuOpen = false;
-
-  /**
-   * Jquery object representing the currently opened sub-menu
-   * in small-mode
-   *
-   * @var jQuery
-   */
-  NavMain.currentSmallSubmenu = null;
-
-  /**
-   * Main menu items in the menubar
-   *
-   * @var jQuery
-   */
-  NavMain.mainMenuItems = null;
-
-  /**
-   * Main menu items in the menubar
-   *
-   * @var jQuery
-   */
-  NavMain.mainMenuLinks = null;
-
-  /**
-   * Removes the href attribute from menu items with submenus
-   *
-   * This prevents load bar from appearing on iOS when you press
-   * an item.
-   */
-  NavMain.unlinkMainMenuItems = function()
-  {
-    NavMain.mainMenuLinks.each(function(i, n) {
-      var node = $(n);
-      if (node.siblings('.submenu')) {
-        node.attr('data-old-href', node.attr('href'));
-        node.removeAttr('href');
-      }
-    });
-  };
-
-  /**
-   * Returns the href attribute back to main menu links
-   */
-  NavMain.relinkMainMenuLinks = function()
-  {
-    NavMain.mainMenuLinks.each(function(i, n) {
-      var node = $(n);
-      if (node.attr('data-old-href')) {
-        node.attr('href', node.attr('data-old-href'));
-        node.removeAttr('data-old-href');
-      }
+        // Open the menu
+        new_li.addClass('hover').find('[aria-expanded="false"]').attr('aria-expanded', 'true');
+    }).bind('mouseout focusout', function(event) {
+
+        prev_li = $(this);
+        prev_li.delay(100).queue(function() {
+            if (prev_li) {
+                prev_li.clearQueue();
+                // Close the menu
+                prev_li.removeClass('hover').find('[aria-expanded="true"]').attr('aria-expanded', 'false');
+                prev_li = null;
+                if (focused_item) {
+                    focused_item.get(0).blur();
+                }
+            }
+        });
+
+    }).each(function(menu_idx) {
+        var menu = $(this).find('[role="menu"]');
+        var menuitems = $(this).find('a');
+
+        menuitems.mouseover(function(event) {
+            this.focus(); // Sometimes $(this).focus() doesn't work
+        }).focus(function() {
+            focused_item = $(this);
+        }).each(function(item_idx) {
+            $(this).keydown(function(event) {
+                var target;
+                switch (event.keyCode) {
+                    case 33: // Page Up
+                    case 36: // Home
+                        target = menuitems.first();
+                        break;
+
+                    case 34: // Page Down
+                    case 35: // End
+                        target = menuitems.last();
+                        break;
+
+                    case 38: // Up
+                        target = (item_idx > 0) ? menuitems.eq(item_idx - 1)
+                                                                        : menuitems.last();
+                        break;
+
+                    case 40: // Down
+                        target = (item_idx < menuitems.length - 1) ? menuitems.eq(item_idx + 1)
+                                                                                                             : menuitems.first();
+                        break;
+
+                    case 37: // Left
+                        target = (menu_idx > 0) ? main_menuitems.eq(menu_idx - 1)
+                                                                        : main_menuitems.last();
+                        break;
+
+                    case 39: // Right
+                        target = (menu_idx < main_menuitems.length - 1) ? main_menuitems.eq(menu_idx + 1)
+                                                                                                                        : main_menuitems.first();
+                        break;
+                }
+                if (target) {
+                    target.get(0).focus(); // Sometimes target.focus() doesn't work
+                    return false;
+                }
+                return true;
+            });
+        });
     });
-  };
 
-  NavMain.init = function()
-  {
-    NavMain.mainMenuItems = $('#nav-main [role="menubar"] > li');
-    NavMain.mainMenuLinks = $('#nav-main [role="menubar"] > li > [tabindex="0"]');
+    var NavMain = {};
+
+    /**
+     * Whether or not min/max width media queries are supported in CSS
+     *
+     * If not supported, the small mode is never triggered.
+     *
+     * @var Boolean
+     */
+    NavMain.hasMediaQueryWidths = (function() {
+        return !(/MSIE\ (4|5|6|7|8)/.test(navigator.userAgent));
+    })();
+
+    /**
+     * Whether or not the main nav is in small mode
+     *
+     * @var Boolean
+     */
+    NavMain.smallMode = false;
+
+    /**
+     * Whether or not the main menu is opened in small mode
+     *
+     * @var Boolean
+     */
+    NavMain.smallMenuOpen = false;
 
-    if (NavMain.hasMediaQueryWidths) {
-      $(window).resize(NavMain.handleResize);
-      NavMain.handleResize();
-    }
+    /**
+     * Jquery object representing the currently opened sub-menu
+     * in small-mode
+     *
+     * @var jQuery
+     */
+    NavMain.currentSmallSubmenu = null;
 
-    // set up small-mode menu toggle button
-    $('#nav-main .toggle')
-      .click(function(e) {
-        e.preventDefault();
-        NavMain.toggleSmallMenu();
-      })
-      .keydown(function(e) {
-        if (e.keyCode == 13) {
-          NavMain.toggleSmallMenu();
+    /**
+     * Main menu items in the menubar
+     *
+     * @var jQuery
+     */
+    NavMain.mainMenuItems = null;
+
+    /**
+     * Main menu items in the menubar
+     *
+     * @var jQuery
+     */
+    NavMain.mainMenuLinks = null;
+
+    /**
+     * Removes the href attribute from menu items with submenus
+     *
+     * This prevents load bar from appearing on iOS when you press
+     * an item.
+     */
+    NavMain.unlinkMainMenuItems = function()
+    {
+        NavMain.mainMenuLinks.each(function(i, n) {
+            var node = $(n);
+            if (node.siblings('.submenu')) {
+                node.attr('data-old-href', node.attr('href'));
+                node.removeAttr('href');
+            }
+        });
+    };
+
+    /**
+     * Returns the href attribute back to main menu links
+     */
+    NavMain.relinkMainMenuLinks = function()
+    {
+        NavMain.mainMenuLinks.each(function(i, n) {
+            var node = $(n);
+            if (node.attr('data-old-href')) {
+                node.attr('href', node.attr('data-old-href'));
+                node.removeAttr('data-old-href');
+            }
+        });
+    };
+
+    NavMain.init = function()
+    {
+        NavMain.mainMenuItems = $('#nav-main [role="menubar"] > li');
+        NavMain.mainMenuLinks = $('#nav-main [role="menubar"] > li > [tabindex="0"]');
+
+        if (NavMain.hasMediaQueryWidths) {
+            $(window).resize(NavMain.handleResize);
+            NavMain.handleResize();
         }
-      });
-
-    // On touch-enabled devices, hijack the click event and just make it focus
-    // the item. This prevents flashing menus on iOS and prevents clicking on
-    // a top-level item causing navigation on Android.
-    if ('ontouchstart' in window) {
-      NavMain.mainMenuLinks.click(function(e) {
-        e.preventDefault();
-        this.focus();
-      });
-    }
 
-    // With JavaScript enabled, we can provide a full navigation with
-    // #nav-main. Now "hide" the duplicated #footer-menu from AT.
-    $('#footer-menu').attr('role', 'presentation');
-  };
-
-  NavMain.toggleSmallMenu = function()
-  {
-    if (NavMain.smallMenuOpen) {
-      NavMain.closeSmallMenu();
-    } else {
-      NavMain.openSmallMenu();
-    }
-  };
+        // set up small-mode menu toggle button
+        $('#nav-main .toggle')
+            .click(function(e) {
+                e.preventDefault();
+                NavMain.toggleSmallMenu();
+            })
+            .keydown(function(e) {
+                if (e.keyCode == 13) {
+                    NavMain.toggleSmallMenu();
+                }
+            });
+
+        // On touch-enabled devices, hijack the click event and just make it focus
+        // the item. This prevents flashing menus on iOS and prevents clicking on
+        // a top-level item causing navigation on Android.
+        if ('ontouchstart' in window) {
+            NavMain.mainMenuLinks.click(function(e) {
+                e.preventDefault();
+                this.focus();
+            });
+        }
 
-  NavMain.handleResize = function()
-  {
-    var width = $(window).width();
+        // With JavaScript enabled, we can provide a full navigation with
+        // #nav-main. Now "hide" the duplicated #footer-menu from AT.
+        $('#footer-menu').attr('role', 'presentation');
+    };
+
+    NavMain.toggleSmallMenu = function()
+    {
+        if (NavMain.smallMenuOpen) {
+            NavMain.closeSmallMenu();
+        } else {
+            NavMain.openSmallMenu();
+        }
+    };
 
-    if (width <= 760 && !NavMain.smallMode) {
-      NavMain.enterSmallMode();
-    }
+    NavMain.handleResize = function()
+    {
+        var width = $(window).width();
 
-    if (width > 760 && NavMain.smallMode) {
-      NavMain.leaveSmallMode();
-    }
-  };
+        if (width <= 760 && !NavMain.smallMode) {
+            NavMain.enterSmallMode();
+        }
 
-  NavMain.enterSmallMode = function()
-  {
-      NavMain.unlinkMainMenuItems();
+        if (width > 760 && NavMain.smallMode) {
+            NavMain.leaveSmallMode();
+        }
+    };
 
-      $('#nav-main-menu').attr('aria-hidden', 'true');
+    NavMain.enterSmallMode = function()
+    {
+        NavMain.unlinkMainMenuItems();
 
-      $(document).click(NavMain.handleDocumentClick);
-      $('a, input, textarea, button, :focus')
-        .focus(NavMain.handleDocumentFocus);
+        $('#nav-main-menu').attr('aria-hidden', 'true');
 
-      NavMain.smallMode = true;
-      console.log('small');
-  };
+        $(document).click(NavMain.handleDocumentClick);
+        $('a, input, textarea, button, :focus')
+            .focus(NavMain.handleDocumentFocus);
 
-  NavMain.leaveSmallMode = function()
-  {
-      NavMain.relinkMainMenuLinks();
+        NavMain.smallMode = true;
+    };
 
-      $('#nav-main-menu').removeAttr('aria-hidden');
+    NavMain.leaveSmallMode = function()
+    {
+        NavMain.relinkMainMenuLinks();
 
-      $(document).unbind('click', NavMain.handleDocumentClick);
-      $('a, input, textarea, button, :focus')
-        .unbind('focus', NavMain.handleDocumentFocus);
+        $('#nav-main-menu').removeAttr('aria-hidden');
 
-      NavMain.smallMode = false;
-      NavMain.smallMenuOpen = false;
-      console.log('big');
-  };
+        $(document).unbind('click', NavMain.handleDocumentClick);
+        $('a, input, textarea, button, :focus')
+            .unbind('focus', NavMain.handleDocumentFocus);
 
-  NavMain.handleDocumentClick = function(e)
-  {
-    if (NavMain.smallMode) {
-      var $clicked = $(e.target);
-      if (!$clicked.parents().is('#nav-main')) {
-        NavMain.closeSmallMenu();
-      }
-    }
-  };
+        NavMain.smallMode = false;
+        NavMain.smallMenuOpen = false;
+    };
 
-  NavMain.handleDocumentFocus = function(e)
-  {
-    var $focused = $(e.target);
-    if (!$focused.parents().is('#nav-main')) {
-      NavMain.closeSmallMenu();
-    }
-  };
+    NavMain.handleDocumentClick = function(e)
+    {
+        if (NavMain.smallMode) {
+            var $clicked = $(e.target);
+            if (!$clicked.parents().is('#nav-main')) {
+                NavMain.closeSmallMenu();
+            }
+        }
+    };
 
-  NavMain.openSmallMenu = function()
-  {
-    if (NavMain.smallMenuOpen) {
-      return;
-    }
+    NavMain.handleDocumentFocus = function(e)
+    {
+        var $focused = $(e.target);
+        if (!$focused.parents().is('#nav-main')) {
+            NavMain.closeSmallMenu();
+        }
+    };
 
-    $('#nav-main-menu')
-      .slideToggle(150)
-      .removeAttr('aria-hidden');
+    NavMain.openSmallMenu = function()
+    {
+        if (NavMain.smallMenuOpen) {
+            return;
+        }
 
-    $('#nav-main .toggle').addClass('open');
+        $('#nav-main-menu')
+            .slideToggle(150)
+            .removeAttr('aria-hidden');
 
-    // add click handler and set submenu class on submenus
-    NavMain.mainMenuLinks
-      .addClass('submenu-item')
-      .click(NavMain.handleSubmenuClick);
+        $('#nav-main .toggle').addClass('open');
 
-    // focus first item
-    $('#nav-main-menu [tabindex=0]').get(0).focus();
+        // add click handler and set submenu class on submenus
+        NavMain.mainMenuLinks
+            .addClass('submenu-item')
+            .click(NavMain.handleSubmenuClick);
 
-    NavMain.smallMenuOpen = true;
-  };
+        // focus first item
+        $('#nav-main-menu [tabindex=0]').get(0).focus();
 
-  NavMain.handleSubmenuClick = function(e)
-  {
-    e.preventDefault();
-    var menu = $(this).siblings('.submenu');
-    NavMain.openSmallSubmenu(menu);
-  };
+        NavMain.smallMenuOpen = true;
+    };
 
-  NavMain.handleToggleKeypress = function(e)
-  {
-    if (e.keyCode == 13) {
-      NavMain.toggleSmallMenu();
-    }
-  };
+    NavMain.handleSubmenuClick = function(e)
+    {
+        e.preventDefault();
+        var menu = $(this).siblings('.submenu');
+        NavMain.openSmallSubmenu(menu);
+    };
 
-  NavMain.closeSmallMenu = function()
-  {
-    if (!NavMain.smallMenuOpen) {
-      return;
-    }
+    NavMain.handleToggleKeypress = function(e)
+    {
+        if (e.keyCode == 13) {
+            NavMain.toggleSmallMenu();
+        }
+    };
 
-    $('#nav-main-menu, #nav-main-menu .submenu')
-      .slideUp(100)
-      .attr('aria-hidden', 'true');
+    NavMain.closeSmallMenu = function()
+    {
+        if (!NavMain.smallMenuOpen) {
+            return;
+        }
 
-    $('#nav-main .toggle').removeClass('open');
+        $('#nav-main-menu, #nav-main-menu .submenu')
+            .slideUp(100)
+            .attr('aria-hidden', 'true');
 
-    // remove submenu click handler and CSS class
-    NavMain.mainMenuLinks
-      .addClass('submenu-item')
-      .unbind('click', NavMain.handleSubmenuClick);
+        $('#nav-main .toggle').removeClass('open');
 
-    if (NavMain.currentSmallSubmenu) {
-      NavMain.closeSmallSubmenu(NavMain.currentSmallSubmenu);
-    }
-    NavMain.currentSmallSubmenu = null;
+        // remove submenu click handler and CSS class
+        NavMain.mainMenuLinks
+            .addClass('submenu-item')
+            .unbind('click', NavMain.handleSubmenuClick);
 
-    NavMain.smallMenuOpen = false;
-  };
-
-  NavMain.openSmallSubmenu = function(menu)
-  {
-    // close previous menu
-    if ( NavMain.currentSmallSubmenu
-      && NavMain.currentSmallSubmenu.get(0).id !== menu.get(0).id) {
-      NavMain.closeSmallSubmenu(NavMain.currentSmallSubmenu);
-    }
+        if (NavMain.currentSmallSubmenu) {
+            NavMain.closeSmallSubmenu(NavMain.currentSmallSubmenu);
+        }
+        NavMain.currentSmallSubmenu = null;
 
-    // skip current menu
-    if ( NavMain.currentSmallSubmenu
-      && NavMain.currentSmallSubmenu.get(0).id === menu.get(0).id) {
-      // still focus first item
-      menu.find('a').get(0).focus();
-      return;
-    }
+        NavMain.smallMenuOpen = false;
+    };
 
-    menu
-      .stop(true)
-      .css(
-        {
-          'left'         : '80px',
-          'top'          : '0',
-          'display'      : 'none',
-          'opacity'      : '1',
-          'height'       : 'auto',
-          'marginTop'    : '-8px',
-          'marginBottom' : '0'
+    NavMain.openSmallSubmenu = function(menu)
+    {
+        // close previous menu
+        if ( NavMain.currentSmallSubmenu
+            && NavMain.currentSmallSubmenu.get(0).id !== menu.get(0).id) {
+            NavMain.closeSmallSubmenu(NavMain.currentSmallSubmenu);
         }
-      )
-      .slideDown(150)
-      .attr('aria-expanded', 'true');
-
-    // focus first item
-    menu.find('a').get(0).focus();
-
-    NavMain.currentSmallSubmenu = menu;
-  };
-
-  NavMain.closeSmallSubmenu = function(menu)
-  {
-    menu
-      .stop(true)
-      .fadeOut(100, function() {
-      menu
-        .css('left', '-999em')
-        .css('top', '0')
-        .attr('aria-expanded', 'false');
-    });
-  };
 
+        // skip current menu
+        if ( NavMain.currentSmallSubmenu
+            && NavMain.currentSmallSubmenu.get(0).id === menu.get(0).id) {
+            // still focus first item
+            menu.find('a').get(0).focus();
+            return;
+        }
 
-  NavMain.init();
+        menu
+            .stop(true)
+            .css(
+                {
+                    'left'         : '80px',
+                    'top'          : '0',
+                    'display'      : 'none',
+                    'opacity'      : '1',
+                    'height'       : 'auto',
+                    'marginTop'    : '-8px',
+                    'marginBottom' : '0'
+                }
+            )
+            .slideDown(150)
+            .attr('aria-expanded', 'true');
+
+        // focus first item
+        menu.find('a').get(0).focus();
+
+        NavMain.currentSmallSubmenu = menu;
+    };
+
+    NavMain.closeSmallSubmenu = function(menu)
+    {
+        menu
+            .stop(true)
+            .fadeOut(100, function() {
+            menu
+                .css('left', '-999em')
+                .css('top', '0')
+                .attr('aria-expanded', 'false');
+        });
+    };
+
+
+    NavMain.init();
 
 });

From 0f5b73ee2bacd1930be6e3b0d1e2ed4218d9cfbc Mon Sep 17 00:00:00 2001
From: Michael Gauthier <mike@silverorange.com>
Date: Mon, 25 Jun 2012 03:49:23 -0300
Subject: [PATCH 06/10] move rest of menu functions inside NavMain object.

---
 media/js/nav-main-resp.js | 208 +++++++++++++++++++++++---------------
 1 file changed, 125 insertions(+), 83 deletions(-)

diff --git a/media/js/nav-main-resp.js b/media/js/nav-main-resp.js
index 86fdfec8e8d..193b5fea6a7 100644
--- a/media/js/nav-main-resp.js
+++ b/media/js/nav-main-resp.js
@@ -5,89 +5,6 @@ $(document).ready(function() {
         return;
     }
 
-    var main_menuitems = $('#nav-main ul [tabindex="0"]');
-    var prev_li, new_li, focused_item;
-
-    $('#nav-main [role="menubar"] > li').bind('mouseover focusin', function(event) {
-        new_li = $(this);
-
-        if (prev_li) {
-            if (prev_li.attr('id') !== new_li.attr('id')) {
-                // Close the last selected menu
-                prev_li.dequeue();
-            } else {
-                prev_li.clearQueue();
-            }
-        }
-
-        // Open the menu
-        new_li.addClass('hover').find('[aria-expanded="false"]').attr('aria-expanded', 'true');
-    }).bind('mouseout focusout', function(event) {
-
-        prev_li = $(this);
-        prev_li.delay(100).queue(function() {
-            if (prev_li) {
-                prev_li.clearQueue();
-                // Close the menu
-                prev_li.removeClass('hover').find('[aria-expanded="true"]').attr('aria-expanded', 'false');
-                prev_li = null;
-                if (focused_item) {
-                    focused_item.get(0).blur();
-                }
-            }
-        });
-
-    }).each(function(menu_idx) {
-        var menu = $(this).find('[role="menu"]');
-        var menuitems = $(this).find('a');
-
-        menuitems.mouseover(function(event) {
-            this.focus(); // Sometimes $(this).focus() doesn't work
-        }).focus(function() {
-            focused_item = $(this);
-        }).each(function(item_idx) {
-            $(this).keydown(function(event) {
-                var target;
-                switch (event.keyCode) {
-                    case 33: // Page Up
-                    case 36: // Home
-                        target = menuitems.first();
-                        break;
-
-                    case 34: // Page Down
-                    case 35: // End
-                        target = menuitems.last();
-                        break;
-
-                    case 38: // Up
-                        target = (item_idx > 0) ? menuitems.eq(item_idx - 1)
-                                                                        : menuitems.last();
-                        break;
-
-                    case 40: // Down
-                        target = (item_idx < menuitems.length - 1) ? menuitems.eq(item_idx + 1)
-                                                                                                             : menuitems.first();
-                        break;
-
-                    case 37: // Left
-                        target = (menu_idx > 0) ? main_menuitems.eq(menu_idx - 1)
-                                                                        : main_menuitems.last();
-                        break;
-
-                    case 39: // Right
-                        target = (menu_idx < main_menuitems.length - 1) ? main_menuitems.eq(menu_idx + 1)
-                                                                                                                        : main_menuitems.first();
-                        break;
-                }
-                if (target) {
-                    target.get(0).focus(); // Sometimes target.focus() doesn't work
-                    return false;
-                }
-                return true;
-            });
-        });
-    });
-
     var NavMain = {};
 
     /**
@@ -123,6 +40,20 @@ $(document).ready(function() {
      */
     NavMain.currentSmallSubmenu = null;
 
+    /**
+     * Jquery object representing the previously focused main menu item
+     *
+     * @var jQuery
+     */
+    NavMain.previousMenuItem = null;
+
+    /**
+     * Jquery object representing the currently focused sub-menu item
+     *
+     * @var jQuery
+     */
+    NavMain.currentSubmenuItem = null;
+
     /**
      * Main menu items in the menubar
      *
@@ -173,6 +104,11 @@ $(document).ready(function() {
         NavMain.mainMenuItems = $('#nav-main [role="menubar"] > li');
         NavMain.mainMenuLinks = $('#nav-main [role="menubar"] > li > [tabindex="0"]');
 
+        NavMain.mainMenuItems
+            .bind('mouseover focusin', NavMain.handleFocusIn)
+            .bind('mouseout focusout', NavMain.handleFocusOut)
+            .each(NavMain.initSubmenu);
+
         if (NavMain.hasMediaQueryWidths) {
             $(window).resize(NavMain.handleResize);
             NavMain.handleResize();
@@ -205,6 +141,112 @@ $(document).ready(function() {
         $('#footer-menu').attr('role', 'presentation');
     };
 
+    NavMain.handleFocusIn = function(e)
+    {
+        var item = $(this);
+
+        if (NavMain.previousMenuItem) {
+            if (NavMain.previousMenuItem.attr('id') !== item.attr('id')) {
+                // Close the last selected menu
+                NavMain.previousMenuItem.dequeue();
+            } else {
+                NavMain.previousMenuItem.clearQueue();
+            }
+        }
+
+        // Open the menu
+        item
+            .addClass('hover')
+            .find('[aria-expanded="false"]')
+            .attr('aria-expanded', 'true');
+    };
+
+    NavMain.initSubmenu = function(menu_idx)
+    {
+        var menu = $(this).find('[role="menu"]');
+        var menuItems = $(this).find('a');
+
+        menuItems.mouseover(function(e) {
+            this.focus(); // Sometimes $(this).focus() doesn't work
+        }).focus(function() {
+            NavMain.currentSubmenuItem = $(this);
+        }).each(function(item_idx) {
+            $(this).keydown(function(e) {
+                var target;
+                switch (e.keyCode) {
+                    case 33: // Page Up
+                    case 36: // Home
+                        target = menuItems.first();
+                        break;
+
+                    case 34: // Page Down
+                    case 35: // End
+                        target = menuItems.last();
+                        break;
+
+                    case 38: // Up
+                        target = (item_idx > 0)
+                            ? menuItems.eq(item_idx - 1)
+                            : menuItems.last();
+
+                        break;
+
+                    case 40: // Down
+                        target = (item_idx < menuItems.length - 1)
+                            ? menuItems.eq(item_idx + 1)
+                            : menuItems.first();
+
+                        break;
+
+                    case 37: // Left
+                    console.log(menu_idx);
+                        target = (menu_idx > 0)
+                            ? NavMain.mainMenuLinks.eq(menu_idx - 1)
+                            : NavMain.mainMenuLinks.last();
+                            console.log(target);
+
+                        break;
+
+                    case 39: // Right
+                        target = (menu_idx < NavMain.mainMenuLinks.length - 1)
+                            ? NavMain.mainMenuLinks.eq(menu_idx + 1)
+                            : NavMain.mainMenuLinks.first();
+
+                        break;
+                }
+                if (target) {
+                    target.get(0).focus(); // Sometimes target.focus() doesn't work
+                    return false;
+                }
+                return true;
+            });
+        });
+    };
+
+    NavMain.handleFocusOut = function(e)
+    {
+        NavMain.previousMenuItem = $(this);
+        NavMain.previousMenuItem
+            .delay(100)
+            .queue(function() {
+                if (NavMain.previousMenuItem) {
+                    // Close the menu
+                    NavMain.previousMenuItem
+                        .clearQueue()
+                        .removeClass('hover')
+                        .find('[aria-expanded="true"]')
+                        .attr('aria-expanded', 'false');
+
+                    NavMain.previousMenuItem = null;
+
+                    // If there was a focused sub-menu item, blur it
+                    if (NavMain.currentSubmenuItem) {
+                        NavMain.currentSubmenuItem.get(0).blur();
+                    }
+                }
+            });
+    };
+
     NavMain.toggleSmallMenu = function()
     {
         if (NavMain.smallMenuOpen) {

From 4e42e17f020b2d1980053e23e3352423337d445c Mon Sep 17 00:00:00 2001
From: Michael Gauthier <mike@silverorange.com>
Date: Mon, 25 Jun 2012 03:52:36 -0300
Subject: [PATCH 07/10] Reorder functions to be more logical.

---
 media/js/nav-main-resp.js | 158 +++++++++++++++++++-------------------
 1 file changed, 78 insertions(+), 80 deletions(-)

diff --git a/media/js/nav-main-resp.js b/media/js/nav-main-resp.js
index 193b5fea6a7..69aaa929c0a 100644
--- a/media/js/nav-main-resp.js
+++ b/media/js/nav-main-resp.js
@@ -68,37 +68,6 @@ $(document).ready(function() {
      */
     NavMain.mainMenuLinks = null;
 
-    /**
-     * Removes the href attribute from menu items with submenus
-     *
-     * This prevents load bar from appearing on iOS when you press
-     * an item.
-     */
-    NavMain.unlinkMainMenuItems = function()
-    {
-        NavMain.mainMenuLinks.each(function(i, n) {
-            var node = $(n);
-            if (node.siblings('.submenu')) {
-                node.attr('data-old-href', node.attr('href'));
-                node.removeAttr('href');
-            }
-        });
-    };
-
-    /**
-     * Returns the href attribute back to main menu links
-     */
-    NavMain.relinkMainMenuLinks = function()
-    {
-        NavMain.mainMenuLinks.each(function(i, n) {
-            var node = $(n);
-            if (node.attr('data-old-href')) {
-                node.attr('href', node.attr('data-old-href'));
-                node.removeAttr('data-old-href');
-            }
-        });
-    };
-
     NavMain.init = function()
     {
         NavMain.mainMenuItems = $('#nav-main [role="menubar"] > li');
@@ -161,6 +130,30 @@ $(document).ready(function() {
             .attr('aria-expanded', 'true');
     };
 
+    NavMain.handleFocusOut = function(e)
+    {
+        NavMain.previousMenuItem = $(this);
+        NavMain.previousMenuItem
+            .delay(100)
+            .queue(function() {
+                if (NavMain.previousMenuItem) {
+                    // Close the menu
+                    NavMain.previousMenuItem
+                        .clearQueue()
+                        .removeClass('hover')
+                        .find('[aria-expanded="true"]')
+                        .attr('aria-expanded', 'false');
+
+                    NavMain.previousMenuItem = null;
+
+                    // If there was a focused sub-menu item, blur it
+                    if (NavMain.currentSubmenuItem) {
+                        NavMain.currentSubmenuItem.get(0).blur();
+                    }
+                }
+            });
+    };
+
     NavMain.initSubmenu = function(menu_idx)
     {
         var menu = $(this).find('[role="menu"]');
@@ -199,11 +192,9 @@ $(document).ready(function() {
                         break;
 
                     case 37: // Left
-                    console.log(menu_idx);
                         target = (menu_idx > 0)
                             ? NavMain.mainMenuLinks.eq(menu_idx - 1)
                             : NavMain.mainMenuLinks.last();
-                            console.log(target);
 
                         break;
 
@@ -223,39 +214,6 @@ $(document).ready(function() {
         });
     };
 
-    NavMain.handleFocusOut = function(e)
-    {
-        NavMain.previousMenuItem = $(this);
-        NavMain.previousMenuItem
-            .delay(100)
-            .queue(function() {
-                if (NavMain.previousMenuItem) {
-                    // Close the menu
-                    NavMain.previousMenuItem
-                        .clearQueue()
-                        .removeClass('hover')
-                        .find('[aria-expanded="true"]')
-                        .attr('aria-expanded', 'false');
-
-                    NavMain.previousMenuItem = null;
-
-                    // If there was a focused sub-menu item, blur it
-                    if (NavMain.currentSubmenuItem) {
-                        NavMain.currentSubmenuItem.get(0).blur();
-                    }
-                }
-            });
-    };
-
-    NavMain.toggleSmallMenu = function()
-    {
-        if (NavMain.smallMenuOpen) {
-            NavMain.closeSmallMenu();
-        } else {
-            NavMain.openSmallMenu();
-        }
-    };
-
     NavMain.handleResize = function()
     {
         var width = $(window).width();
@@ -296,6 +254,37 @@ $(document).ready(function() {
         NavMain.smallMenuOpen = false;
     };
 
+    /**
+     * Removes the href attribute from menu items with submenus
+     *
+     * This prevents load bar from appearing on iOS when you press
+     * an item.
+     */
+    NavMain.unlinkMainMenuItems = function()
+    {
+        NavMain.mainMenuLinks.each(function(i, n) {
+            var node = $(n);
+            if (node.siblings('.submenu')) {
+                node.attr('data-old-href', node.attr('href'));
+                node.removeAttr('href');
+            }
+        });
+    };
+
+    /**
+     * Returns the href attribute back to main menu links
+     */
+    NavMain.relinkMainMenuLinks = function()
+    {
+        NavMain.mainMenuLinks.each(function(i, n) {
+            var node = $(n);
+            if (node.attr('data-old-href')) {
+                node.attr('href', node.attr('data-old-href'));
+                node.removeAttr('data-old-href');
+            }
+        });
+    };
+
     NavMain.handleDocumentClick = function(e)
     {
         if (NavMain.smallMode) {
@@ -314,6 +303,22 @@ $(document).ready(function() {
         }
     };
 
+    NavMain.handleToggleKeypress = function(e)
+    {
+        if (e.keyCode == 13) {
+            NavMain.toggleSmallMenu();
+        }
+    };
+
+    NavMain.toggleSmallMenu = function()
+    {
+        if (NavMain.smallMenuOpen) {
+            NavMain.closeSmallMenu();
+        } else {
+            NavMain.openSmallMenu();
+        }
+    };
+
     NavMain.openSmallMenu = function()
     {
         if (NavMain.smallMenuOpen) {
@@ -337,20 +342,6 @@ $(document).ready(function() {
         NavMain.smallMenuOpen = true;
     };
 
-    NavMain.handleSubmenuClick = function(e)
-    {
-        e.preventDefault();
-        var menu = $(this).siblings('.submenu');
-        NavMain.openSmallSubmenu(menu);
-    };
-
-    NavMain.handleToggleKeypress = function(e)
-    {
-        if (e.keyCode == 13) {
-            NavMain.toggleSmallMenu();
-        }
-    };
-
     NavMain.closeSmallMenu = function()
     {
         if (!NavMain.smallMenuOpen) {
@@ -376,6 +367,13 @@ $(document).ready(function() {
         NavMain.smallMenuOpen = false;
     };
 
+    NavMain.handleSubmenuClick = function(e)
+    {
+        e.preventDefault();
+        var menu = $(this).siblings('.submenu');
+        NavMain.openSmallSubmenu(menu);
+    };
+
     NavMain.openSmallSubmenu = function(menu)
     {
         // close previous menu

From 4b1d26f53de386c9bafec2c6db929e033b8fc8d7 Mon Sep 17 00:00:00 2001
From: Michael Gauthier <mike@silverorange.com>
Date: Mon, 25 Jun 2012 03:55:02 -0300
Subject: [PATCH 08/10] Remove unnecessary indentation and move
 document.ready() call to bottom instead of wrapping all code.

---
 media/js/nav-main-resp.js | 781 +++++++++++++++++++-------------------
 1 file changed, 390 insertions(+), 391 deletions(-)

diff --git a/media/js/nav-main-resp.js b/media/js/nav-main-resp.js
index 69aaa929c0a..0cc2f3d2ed2 100644
--- a/media/js/nav-main-resp.js
+++ b/media/js/nav-main-resp.js
@@ -1,430 +1,429 @@
-$(document).ready(function() {
-
-    // If there's no nav-main element, don't initialize the menu.
-    if ($('#nav-main').length === 0) {
-        return;
+(function() {
+
+// If there's no nav-main element, don't initialize the menu.
+if ($('#nav-main').length === 0) {
+    return;
+}
+
+var NavMain = {};
+
+/**
+ * Whether or not min/max width media queries are supported in CSS
+ *
+ * If not supported, the small mode is never triggered.
+ *
+ * @var Boolean
+ */
+NavMain.hasMediaQueryWidths = (function() {
+    return !(/MSIE\ (4|5|6|7|8)/.test(navigator.userAgent));
+})();
+
+/**
+ * Whether or not the main nav is in small mode
+ *
+ * @var Boolean
+ */
+NavMain.smallMode = false;
+
+/**
+ * Whether or not the main menu is opened in small mode
+ *
+ * @var Boolean
+ */
+NavMain.smallMenuOpen = false;
+
+/**
+ * Jquery object representing the currently opened sub-menu
+ * in small-mode
+ *
+ * @var jQuery
+ */
+NavMain.currentSmallSubmenu = null;
+
+/**
+ * Jquery object representing the previously focused main menu item
+ *
+ * @var jQuery
+ */
+NavMain.previousMenuItem = null;
+
+/**
+ * Jquery object representing the currently focused sub-menu item
+ *
+ * @var jQuery
+ */
+NavMain.currentSubmenuItem = null;
+
+/**
+ * Main menu items in the menubar
+ *
+ * @var jQuery
+ */
+NavMain.mainMenuItems = null;
+
+/**
+ * Main menu items in the menubar
+ *
+ * @var jQuery
+ */
+NavMain.mainMenuLinks = null;
+
+NavMain.init = function()
+{
+    NavMain.mainMenuItems = $('#nav-main [role="menubar"] > li');
+    NavMain.mainMenuLinks = $('#nav-main [role="menubar"] > li > [tabindex="0"]');
+
+    NavMain.mainMenuItems
+        .bind('mouseover focusin', NavMain.handleFocusIn)
+        .bind('mouseout focusout', NavMain.handleFocusOut)
+        .each(NavMain.initSubmenu);
+
+    if (NavMain.hasMediaQueryWidths) {
+        $(window).resize(NavMain.handleResize);
+        NavMain.handleResize();
     }
 
-    var NavMain = {};
-
-    /**
-     * Whether or not min/max width media queries are supported in CSS
-     *
-     * If not supported, the small mode is never triggered.
-     *
-     * @var Boolean
-     */
-    NavMain.hasMediaQueryWidths = (function() {
-        return !(/MSIE\ (4|5|6|7|8)/.test(navigator.userAgent));
-    })();
-
-    /**
-     * Whether or not the main nav is in small mode
-     *
-     * @var Boolean
-     */
-    NavMain.smallMode = false;
-
-    /**
-     * Whether or not the main menu is opened in small mode
-     *
-     * @var Boolean
-     */
-    NavMain.smallMenuOpen = false;
-
-    /**
-     * Jquery object representing the currently opened sub-menu
-     * in small-mode
-     *
-     * @var jQuery
-     */
-    NavMain.currentSmallSubmenu = null;
-
-    /**
-     * Jquery object representing the previously focused main menu item
-     *
-     * @var jQuery
-     */
-    NavMain.previousMenuItem = null;
-
-    /**
-     * Jquery object representing the currently focused sub-menu item
-     *
-     * @var jQuery
-     */
-    NavMain.currentSubmenuItem = null;
-
-    /**
-     * Main menu items in the menubar
-     *
-     * @var jQuery
-     */
-    NavMain.mainMenuItems = null;
-
-    /**
-     * Main menu items in the menubar
-     *
-     * @var jQuery
-     */
-    NavMain.mainMenuLinks = null;
-
-    NavMain.init = function()
-    {
-        NavMain.mainMenuItems = $('#nav-main [role="menubar"] > li');
-        NavMain.mainMenuLinks = $('#nav-main [role="menubar"] > li > [tabindex="0"]');
-
-        NavMain.mainMenuItems
-            .bind('mouseover focusin', NavMain.handleFocusIn)
-            .bind('mouseout focusout', NavMain.handleFocusOut)
-            .each(NavMain.initSubmenu);
-
-        if (NavMain.hasMediaQueryWidths) {
-            $(window).resize(NavMain.handleResize);
-            NavMain.handleResize();
-        }
-
-        // set up small-mode menu toggle button
-        $('#nav-main .toggle')
-            .click(function(e) {
-                e.preventDefault();
+    // set up small-mode menu toggle button
+    $('#nav-main .toggle')
+        .click(function(e) {
+            e.preventDefault();
+            NavMain.toggleSmallMenu();
+        })
+        .keydown(function(e) {
+            if (e.keyCode == 13) {
                 NavMain.toggleSmallMenu();
-            })
-            .keydown(function(e) {
-                if (e.keyCode == 13) {
-                    NavMain.toggleSmallMenu();
-                }
-            });
-
-        // On touch-enabled devices, hijack the click event and just make it focus
-        // the item. This prevents flashing menus on iOS and prevents clicking on
-        // a top-level item causing navigation on Android.
-        if ('ontouchstart' in window) {
-            NavMain.mainMenuLinks.click(function(e) {
-                e.preventDefault();
-                this.focus();
-            });
-        }
-
-        // With JavaScript enabled, we can provide a full navigation with
-        // #nav-main. Now "hide" the duplicated #footer-menu from AT.
-        $('#footer-menu').attr('role', 'presentation');
-    };
-
-    NavMain.handleFocusIn = function(e)
-    {
-        var item = $(this);
-
-        if (NavMain.previousMenuItem) {
-            if (NavMain.previousMenuItem.attr('id') !== item.attr('id')) {
-                // Close the last selected menu
-                NavMain.previousMenuItem.dequeue();
-            } else {
-                NavMain.previousMenuItem.clearQueue();
             }
-        }
+        });
 
-        // Open the menu
-        item
-            .addClass('hover')
-            .find('[aria-expanded="false"]')
-            .attr('aria-expanded', 'true');
-    };
-
-    NavMain.handleFocusOut = function(e)
-    {
-        NavMain.previousMenuItem = $(this);
-        NavMain.previousMenuItem
-            .delay(100)
-            .queue(function() {
-                if (NavMain.previousMenuItem) {
-                    // Close the menu
-                    NavMain.previousMenuItem
-                        .clearQueue()
-                        .removeClass('hover')
-                        .find('[aria-expanded="true"]')
-                        .attr('aria-expanded', 'false');
-
-                    NavMain.previousMenuItem = null;
-
-                    // If there was a focused sub-menu item, blur it
-                    if (NavMain.currentSubmenuItem) {
-                        NavMain.currentSubmenuItem.get(0).blur();
-                    }
-                }
-            });
-    };
-
-    NavMain.initSubmenu = function(menu_idx)
-    {
-        var menu = $(this).find('[role="menu"]');
-        var menuItems = $(this).find('a');
-
-        menuItems.mouseover(function(e) {
-            this.focus(); // Sometimes $(this).focus() doesn't work
-        }).focus(function() {
-            NavMain.currentSubmenuItem = $(this);
-        }).each(function(item_idx) {
-            $(this).keydown(function(e) {
-                var target;
-                switch (e.keyCode) {
-                    case 33: // Page Up
-                    case 36: // Home
-                        target = menuItems.first();
-                        break;
-
-                    case 34: // Page Down
-                    case 35: // End
-                        target = menuItems.last();
-                        break;
-
-                    case 38: // Up
-                        target = (item_idx > 0)
-                            ? menuItems.eq(item_idx - 1)
-                            : menuItems.last();
-
-                        break;
-
-                    case 40: // Down
-                        target = (item_idx < menuItems.length - 1)
-                            ? menuItems.eq(item_idx + 1)
-                            : menuItems.first();
-
-                        break;
-
-                    case 37: // Left
-                        target = (menu_idx > 0)
-                            ? NavMain.mainMenuLinks.eq(menu_idx - 1)
-                            : NavMain.mainMenuLinks.last();
-
-                        break;
-
-                    case 39: // Right
-                        target = (menu_idx < NavMain.mainMenuLinks.length - 1)
-                            ? NavMain.mainMenuLinks.eq(menu_idx + 1)
-                            : NavMain.mainMenuLinks.first();
-
-                        break;
-                }
-                if (target) {
-                    target.get(0).focus(); // Sometimes target.focus() doesn't work
-                    return false;
-                }
-                return true;
-            });
+    // On touch-enabled devices, hijack the click event and just make it focus
+    // the item. This prevents flashing menus on iOS and prevents clicking on
+    // a top-level item causing navigation on Android.
+    if ('ontouchstart' in window) {
+        NavMain.mainMenuLinks.click(function(e) {
+            e.preventDefault();
+            this.focus();
         });
-    };
+    }
 
-    NavMain.handleResize = function()
-    {
-        var width = $(window).width();
+    // With JavaScript enabled, we can provide a full navigation with
+    // #nav-main. Now "hide" the duplicated #footer-menu from AT.
+    $('#footer-menu').attr('role', 'presentation');
+};
 
-        if (width <= 760 && !NavMain.smallMode) {
-            NavMain.enterSmallMode();
-        }
+NavMain.handleFocusIn = function(e)
+{
+    var item = $(this);
 
-        if (width > 760 && NavMain.smallMode) {
-            NavMain.leaveSmallMode();
+    if (NavMain.previousMenuItem) {
+        if (NavMain.previousMenuItem.attr('id') !== item.attr('id')) {
+            // Close the last selected menu
+            NavMain.previousMenuItem.dequeue();
+        } else {
+            NavMain.previousMenuItem.clearQueue();
         }
-    };
-
-    NavMain.enterSmallMode = function()
-    {
-        NavMain.unlinkMainMenuItems();
-
-        $('#nav-main-menu').attr('aria-hidden', 'true');
-
-        $(document).click(NavMain.handleDocumentClick);
-        $('a, input, textarea, button, :focus')
-            .focus(NavMain.handleDocumentFocus);
-
-        NavMain.smallMode = true;
-    };
-
-    NavMain.leaveSmallMode = function()
-    {
-        NavMain.relinkMainMenuLinks();
-
-        $('#nav-main-menu').removeAttr('aria-hidden');
-
-        $(document).unbind('click', NavMain.handleDocumentClick);
-        $('a, input, textarea, button, :focus')
-            .unbind('focus', NavMain.handleDocumentFocus);
-
-        NavMain.smallMode = false;
-        NavMain.smallMenuOpen = false;
-    };
-
-    /**
-     * Removes the href attribute from menu items with submenus
-     *
-     * This prevents load bar from appearing on iOS when you press
-     * an item.
-     */
-    NavMain.unlinkMainMenuItems = function()
-    {
-        NavMain.mainMenuLinks.each(function(i, n) {
-            var node = $(n);
-            if (node.siblings('.submenu')) {
-                node.attr('data-old-href', node.attr('href'));
-                node.removeAttr('href');
+    }
+
+    // Open the menu
+    item
+        .addClass('hover')
+        .find('[aria-expanded="false"]')
+        .attr('aria-expanded', 'true');
+};
+
+NavMain.handleFocusOut = function(e)
+{
+    NavMain.previousMenuItem = $(this);
+    NavMain.previousMenuItem
+        .delay(100)
+        .queue(function() {
+            if (NavMain.previousMenuItem) {
+                // Close the menu
+                NavMain.previousMenuItem
+                    .clearQueue()
+                    .removeClass('hover')
+                    .find('[aria-expanded="true"]')
+                    .attr('aria-expanded', 'false');
+
+                NavMain.previousMenuItem = null;
+
+                // If there was a focused sub-menu item, blur it
+                if (NavMain.currentSubmenuItem) {
+                    NavMain.currentSubmenuItem.get(0).blur();
+                }
             }
         });
-    };
-
-    /**
-     * Returns the href attribute back to main menu links
-     */
-    NavMain.relinkMainMenuLinks = function()
-    {
-        NavMain.mainMenuLinks.each(function(i, n) {
-            var node = $(n);
-            if (node.attr('data-old-href')) {
-                node.attr('href', node.attr('data-old-href'));
-                node.removeAttr('data-old-href');
+};
+
+NavMain.initSubmenu = function(menu_idx)
+{
+    var menu = $(this).find('[role="menu"]');
+    var menuItems = $(this).find('a');
+
+    menuItems.mouseover(function(e) {
+        this.focus(); // Sometimes $(this).focus() doesn't work
+    }).focus(function() {
+        NavMain.currentSubmenuItem = $(this);
+    }).each(function(item_idx) {
+        $(this).keydown(function(e) {
+            var target;
+            switch (e.keyCode) {
+                case 33: // Page Up
+                case 36: // Home
+                    target = menuItems.first();
+                    break;
+
+                case 34: // Page Down
+                case 35: // End
+                    target = menuItems.last();
+                    break;
+
+                case 38: // Up
+                    target = (item_idx > 0)
+                        ? menuItems.eq(item_idx - 1)
+                        : menuItems.last();
+
+                    break;
+
+                case 40: // Down
+                    target = (item_idx < menuItems.length - 1)
+                        ? menuItems.eq(item_idx + 1)
+                        : menuItems.first();
+
+                    break;
+
+                case 37: // Left
+                    target = (menu_idx > 0)
+                        ? NavMain.mainMenuLinks.eq(menu_idx - 1)
+                        : NavMain.mainMenuLinks.last();
+
+                    break;
+
+                case 39: // Right
+                    target = (menu_idx < NavMain.mainMenuLinks.length - 1)
+                        ? NavMain.mainMenuLinks.eq(menu_idx + 1)
+                        : NavMain.mainMenuLinks.first();
+
+                    break;
             }
-        });
-    };
-
-    NavMain.handleDocumentClick = function(e)
-    {
-        if (NavMain.smallMode) {
-            var $clicked = $(e.target);
-            if (!$clicked.parents().is('#nav-main')) {
-                NavMain.closeSmallMenu();
+            if (target) {
+                target.get(0).focus(); // Sometimes target.focus() doesn't work
+                return false;
             }
-        }
-    };
+            return true;
+        });
+    });
+};
 
-    NavMain.handleDocumentFocus = function(e)
-    {
-        var $focused = $(e.target);
-        if (!$focused.parents().is('#nav-main')) {
-            NavMain.closeSmallMenu();
-        }
-    };
+NavMain.handleResize = function()
+{
+    var width = $(window).width();
 
-    NavMain.handleToggleKeypress = function(e)
-    {
-        if (e.keyCode == 13) {
-            NavMain.toggleSmallMenu();
-        }
-    };
+    if (width <= 760 && !NavMain.smallMode) {
+        NavMain.enterSmallMode();
+    }
+
+    if (width > 760 && NavMain.smallMode) {
+        NavMain.leaveSmallMode();
+    }
+};
+
+NavMain.enterSmallMode = function()
+{
+    NavMain.unlinkMainMenuItems();
+
+    $('#nav-main-menu').attr('aria-hidden', 'true');
 
-    NavMain.toggleSmallMenu = function()
-    {
-        if (NavMain.smallMenuOpen) {
+    $(document).click(NavMain.handleDocumentClick);
+    $('a, input, textarea, button, :focus')
+        .focus(NavMain.handleDocumentFocus);
+
+    NavMain.smallMode = true;
+};
+
+NavMain.leaveSmallMode = function()
+{
+    NavMain.relinkMainMenuLinks();
+
+    $('#nav-main-menu').removeAttr('aria-hidden');
+
+    $(document).unbind('click', NavMain.handleDocumentClick);
+    $('a, input, textarea, button, :focus')
+        .unbind('focus', NavMain.handleDocumentFocus);
+
+    NavMain.smallMode = false;
+    NavMain.smallMenuOpen = false;
+};
+
+/**
+ * Removes the href attribute from menu items with submenus
+ *
+ * This prevents load bar from appearing on iOS when you press
+ * an item.
+ */
+NavMain.unlinkMainMenuItems = function()
+{
+    NavMain.mainMenuLinks.each(function(i, n) {
+        var node = $(n);
+        if (node.siblings('.submenu')) {
+            node.attr('data-old-href', node.attr('href'));
+            node.removeAttr('href');
+        }
+    });
+};
+
+/**
+ * Returns the href attribute back to main menu links
+ */
+NavMain.relinkMainMenuLinks = function()
+{
+    NavMain.mainMenuLinks.each(function(i, n) {
+        var node = $(n);
+        if (node.attr('data-old-href')) {
+            node.attr('href', node.attr('data-old-href'));
+            node.removeAttr('data-old-href');
+        }
+    });
+};
+
+NavMain.handleDocumentClick = function(e)
+{
+    if (NavMain.smallMode) {
+        var $clicked = $(e.target);
+        if (!$clicked.parents().is('#nav-main')) {
             NavMain.closeSmallMenu();
-        } else {
-            NavMain.openSmallMenu();
         }
-    };
+    }
+};
 
-    NavMain.openSmallMenu = function()
-    {
-        if (NavMain.smallMenuOpen) {
-            return;
-        }
+NavMain.handleDocumentFocus = function(e)
+{
+    var $focused = $(e.target);
+    if (!$focused.parents().is('#nav-main')) {
+        NavMain.closeSmallMenu();
+    }
+};
 
-        $('#nav-main-menu')
-            .slideToggle(150)
-            .removeAttr('aria-hidden');
+NavMain.handleToggleKeypress = function(e)
+{
+    if (e.keyCode == 13) {
+        NavMain.toggleSmallMenu();
+    }
+};
+
+NavMain.toggleSmallMenu = function()
+{
+    if (NavMain.smallMenuOpen) {
+        NavMain.closeSmallMenu();
+    } else {
+        NavMain.openSmallMenu();
+    }
+};
 
-        $('#nav-main .toggle').addClass('open');
+NavMain.openSmallMenu = function()
+{
+    if (NavMain.smallMenuOpen) {
+        return;
+    }
 
-        // add click handler and set submenu class on submenus
-        NavMain.mainMenuLinks
-            .addClass('submenu-item')
-            .click(NavMain.handleSubmenuClick);
+    $('#nav-main-menu')
+        .slideToggle(150)
+        .removeAttr('aria-hidden');
 
-        // focus first item
-        $('#nav-main-menu [tabindex=0]').get(0).focus();
+    $('#nav-main .toggle').addClass('open');
 
-        NavMain.smallMenuOpen = true;
-    };
+    // add click handler and set submenu class on submenus
+    NavMain.mainMenuLinks
+        .addClass('submenu-item')
+        .click(NavMain.handleSubmenuClick);
 
-    NavMain.closeSmallMenu = function()
-    {
-        if (!NavMain.smallMenuOpen) {
-            return;
-        }
+    // focus first item
+    $('#nav-main-menu [tabindex=0]').get(0).focus();
 
-        $('#nav-main-menu, #nav-main-menu .submenu')
-            .slideUp(100)
-            .attr('aria-hidden', 'true');
+    NavMain.smallMenuOpen = true;
+};
 
-        $('#nav-main .toggle').removeClass('open');
+NavMain.closeSmallMenu = function()
+{
+    if (!NavMain.smallMenuOpen) {
+        return;
+    }
 
-        // remove submenu click handler and CSS class
-        NavMain.mainMenuLinks
-            .addClass('submenu-item')
-            .unbind('click', NavMain.handleSubmenuClick);
+    $('#nav-main-menu, #nav-main-menu .submenu')
+        .slideUp(100)
+        .attr('aria-hidden', 'true');
 
-        if (NavMain.currentSmallSubmenu) {
-            NavMain.closeSmallSubmenu(NavMain.currentSmallSubmenu);
-        }
-        NavMain.currentSmallSubmenu = null;
-
-        NavMain.smallMenuOpen = false;
-    };
-
-    NavMain.handleSubmenuClick = function(e)
-    {
-        e.preventDefault();
-        var menu = $(this).siblings('.submenu');
-        NavMain.openSmallSubmenu(menu);
-    };
-
-    NavMain.openSmallSubmenu = function(menu)
-    {
-        // close previous menu
-        if ( NavMain.currentSmallSubmenu
-            && NavMain.currentSmallSubmenu.get(0).id !== menu.get(0).id) {
-            NavMain.closeSmallSubmenu(NavMain.currentSmallSubmenu);
-        }
+    $('#nav-main .toggle').removeClass('open');
 
-        // skip current menu
-        if ( NavMain.currentSmallSubmenu
-            && NavMain.currentSmallSubmenu.get(0).id === menu.get(0).id) {
-            // still focus first item
-            menu.find('a').get(0).focus();
-            return;
-        }
+    // remove submenu click handler and CSS class
+    NavMain.mainMenuLinks
+        .addClass('submenu-item')
+        .unbind('click', NavMain.handleSubmenuClick);
 
-        menu
-            .stop(true)
-            .css(
-                {
-                    'left'         : '80px',
-                    'top'          : '0',
-                    'display'      : 'none',
-                    'opacity'      : '1',
-                    'height'       : 'auto',
-                    'marginTop'    : '-8px',
-                    'marginBottom' : '0'
-                }
-            )
-            .slideDown(150)
-            .attr('aria-expanded', 'true');
+    if (NavMain.currentSmallSubmenu) {
+        NavMain.closeSmallSubmenu(NavMain.currentSmallSubmenu);
+    }
+    NavMain.currentSmallSubmenu = null;
+
+    NavMain.smallMenuOpen = false;
+};
+
+NavMain.handleSubmenuClick = function(e)
+{
+    e.preventDefault();
+    var menu = $(this).siblings('.submenu');
+    NavMain.openSmallSubmenu(menu);
+};
+
+NavMain.openSmallSubmenu = function(menu)
+{
+    // close previous menu
+    if ( NavMain.currentSmallSubmenu
+        && NavMain.currentSmallSubmenu.get(0).id !== menu.get(0).id) {
+        NavMain.closeSmallSubmenu(NavMain.currentSmallSubmenu);
+    }
 
-        // focus first item
+    // skip current menu
+    if ( NavMain.currentSmallSubmenu
+        && NavMain.currentSmallSubmenu.get(0).id === menu.get(0).id) {
+        // still focus first item
         menu.find('a').get(0).focus();
+        return;
+    }
 
-        NavMain.currentSmallSubmenu = menu;
-    };
+    menu
+        .stop(true)
+        .css(
+            {
+                'left'         : '80px',
+                'top'          : '0',
+                'display'      : 'none',
+                'opacity'      : '1',
+                'height'       : 'auto',
+                'marginTop'    : '-8px',
+                'marginBottom' : '0'
+            }
+        )
+        .slideDown(150)
+        .attr('aria-expanded', 'true');
 
-    NavMain.closeSmallSubmenu = function(menu)
-    {
-        menu
-            .stop(true)
-            .fadeOut(100, function() {
-            menu
-                .css('left', '-999em')
-                .css('top', '0')
-                .attr('aria-expanded', 'false');
-        });
-    };
+    // focus first item
+    menu.find('a').get(0).focus();
 
+    NavMain.currentSmallSubmenu = menu;
+};
+
+NavMain.closeSmallSubmenu = function(menu)
+{
+    menu
+        .stop(true)
+        .fadeOut(100, function() {
+        menu
+            .css('left', '-999em')
+            .css('top', '0')
+            .attr('aria-expanded', 'false');
+    });
+};
 
-    NavMain.init();
+$(document).ready(NavMain.init);
 
-});
+})();

From e30075d267129ddcd1cea81be4b3330cf3d1fc66 Mon Sep 17 00:00:00 2001
From: Michael Gauthier <mike@silverorange.com>
Date: Mon, 25 Jun 2012 03:56:52 -0300
Subject: [PATCH 09/10] Add new JS bundle for responsive nav-main.

---
 settings/base.py | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/settings/base.py b/settings/base.py
index db828e9e315..084c799571d 100644
--- a/settings/base.py
+++ b/settings/base.py
@@ -225,6 +225,12 @@ def JINJA_CONFIG():
             'js/nav-main.js',
             'js/footer-email-form.js',
         ),
+        'firefox-resp': (
+            'js/libs/jquery-1.7.1.min.js',
+            'js/global.js',
+            'js/nav-main-resp.js',
+            'js/footer-email-form.js',
+        ),
         'firefox_central': (
             'js/mozilla-video-tools.js',
             'js/firefox/central.js',

From faf4de3ed7f9d9673d6603ecf20fec31f1121772 Mon Sep 17 00:00:00 2001
From: Steven Garrity <steven@silverorange.com>
Date: Mon, 25 Jun 2012 11:22:27 -0300
Subject: [PATCH 10/10] Re-relativize tabzilla

---
 templates/base-resp.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/base-resp.html b/templates/base-resp.html
index 6fc0996b258..989904ff499 100644
--- a/templates/base-resp.html
+++ b/templates/base-resp.html
@@ -7,7 +7,7 @@
 
     <title>{% block page_title_prefix %}Mozilla — {% endblock %}{% block page_title %}{% endblock %}{% block page_title_suffix %} — mozilla.org{% endblock %}</title>
 
-    <link href="//mozilla.org/tabzilla/media/css/tabzilla.css" rel="stylesheet">
+    <link href="/tabzilla/media/css/tabzilla.css" rel="stylesheet">
 
     <!--[if lte IE 8]>
     <script src="/media/js/libs/html5shiv.js"></script>