]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Update navbar js.
authorJordan Humphreys <jordan@mailyard.net>
Thu, 28 Jun 2012 22:34:03 +0000 (15:34 -0700)
committerJordan Humphreys <jordan@mailyard.net>
Thu, 28 Jun 2012 22:34:03 +0000 (15:34 -0700)
marketing/docs/includes/_documentation_foot.php
marketing/includes/_footer.php
marketing/javascripts/foundation.top-bar.js [new file with mode: 0644]
marketing/sass/docs/presentation.scss
marketing/sass/presentation.scss
marketing/stylesheets/docs/presentation.css
marketing/stylesheets/ie.css
marketing/stylesheets/presentation.css
vendor/assets/javascripts/foundation/app.js

index 7c9723f2a3e50faaf4c1aeb745563d0226e6012f..889e37d4a1958bdaa50d85da80abfb3c7c295c00 100644 (file)
@@ -57,6 +57,7 @@
        <script src="../javascripts/foundation/jquery.placeholder.min.js"></script>
        <script src="../javascripts/foundation/modernizr.foundation.js"></script>
        <script src="../javascripts/foundation/jquery.tooltips.js"></script>
+       <script src="../javascripts/foundation.top-bar.js"></script>
        <script src="../javascripts/foundation/app.js"></script>
        <script src="presentation.js"></script>
        <script src="http://www.zurb.com/assets/zurb.mega-drop.js"></script>
index 6047e56bc5a3e7be2d67b47a6f17e77204a3bda1..0b8a891e34ae437ad1f2e8b63c12353b62d61577 100644 (file)
@@ -54,6 +54,7 @@
        <script src="javascripts/foundation/jquery.customforms.js"></script>
        <script src="javascripts/foundation/jquery.placeholder.min.js"></script>
        <script src="javascripts/foundation/jquery.tooltips.js"></script>
+  <script src="javascripts/foundation.top-bar.js"></script>
        <script src="javascripts/foundation/app.js"></script>
        <script src="swipe.js"></script>
        <script src="github.js"></script>
diff --git a/marketing/javascripts/foundation.top-bar.js b/marketing/javascripts/foundation.top-bar.js
new file mode 100644 (file)
index 0000000..0b5ddb4
--- /dev/null
@@ -0,0 +1,109 @@
+(function ($) {
+  var currentIndex = 0;
+
+  function onMobile() {
+    return $(window).width() < 768;
+  }
+
+  function initializeMarkup($topbar) {
+    var $attached = $topbar.find('.attached');
+
+    // Pull element out of the DOM for manipulation
+    $attached.detach();
+
+    console.log($attached, $attached.find('li.has-dropdown>a'));
+
+    $attached.find('li.has-dropdown>a').each(function () {
+      var $link = $(this),
+          $dropdown = $link.siblings('ul.dropdown'),
+          $titleLi = $('<li class="title show-on-phones js-generated"><h5></h5></li>');
+
+      // Copy link to subnav
+      $titleLi.find('h5').html($link.html());
+      $dropdown.prepend($titleLi);
+      $dropdown.prepend('<li class="back show-on-phones js-generated"><a href="">&larr; Back</a></li>');
+    });
+
+    // Put element back in the DOM
+    $attached.appendTo($topbar);
+  }
+
+  $('.top-bar .name').on('click', function (event) {
+    var $this = $(this);
+    console.log('clicked');
+    if (onMobile()) {
+      event.preventDefault();
+      console.log('mobile');
+      if (!$this.hasClass('top-bar-initialized')) {
+        console.log('add initialized');
+        initializeMarkup($this.closest('.top-bar'));
+        $this.addClass('top-bar-initialized');
+      }
+
+      $this.closest('.top-bar').toggleClass('expanded');
+    }
+  });
+
+  $('body.ie8 .has-dropdown, body.ie7 .has-dropdown').live({
+    mouseenter: function() {
+      $(this).children('.dropdown').show();
+    },
+    mouseleave: function() {
+      $(this).children('.dropdown').hide();
+    }
+  });
+
+  $('.top-bar .has-dropdown>a').live('click', function (event) {
+    if (onMobile()) {
+      var $this = $(this),
+          $selectedLi = $this.closest('li'),
+          $nextLevelUl = $selectedLi.find('>ul'),
+          $titleLi = $('<li class="title show-on-phones js-generated"><h5></h5></li>'),
+          $attached = $this.closest('.attached'),
+          $topbar = $this.closest('.top-bar'),
+          $largestUl;
+
+      event.preventDefault();
+
+      currentIndex += 1;
+
+      $selectedLi.addClass('active');
+      $attached.css({'left': '-' + 100 * currentIndex + '%'});
+      $attached.find('>.name').css({'left': 100 * currentIndex + '%'});
+
+      if (currentIndex === 1) {
+        $largestUl = $nextLevelUl;
+        $nextLevelUl.find('ul.dropdown').each(function () {
+          if ($(this).outerHeight() > $largestUl.outerHeight()) {
+            $largestUl = $(this);
+          }
+        });
+        $attached.css({'height': $largestUl.outerHeight() + 45 + 'px'});
+      }
+    }
+  });
+
+  $('.top-bar .has-dropdown .back').live('click', function (event) {
+    var $this = $(this),
+        $activeLi = $this.closest('li.active'),
+        $attached = $this.closest('.attached'),
+        $topbar = $this.closest('.top-bar'),
+        $previousLevelUl = $activeLi.closest('ul');
+
+    event.preventDefault();
+
+    currentIndex -= 1;
+
+    $attached.css({'left': '-' + 100 * currentIndex + '%'});
+    $attached.find('>.name').css({'left': 100 * currentIndex + '%'});
+
+    if (currentIndex === 0) {
+      $attached.css({'height': ''});
+    }
+
+    setTimeout(function () {
+      $activeLi.removeClass('active');
+    }, 200);
+  });
+
+}(jQuery));
\ No newline at end of file
index 0a932769ade1723a87cc52660d36f760803bc38a..b59c0397d9702c5e3062707ee368f18420d41e70 100644 (file)
@@ -71,7 +71,8 @@ header .subheader { position: relative; top: -18px; }
   .top-bar .attached > .name span { padding-left: 0 !important; }
 }
 @media only screen and (max-width: 767px) {
-  .top-bar { height: auto !important; }
+  .top-bar { overflow: hidden; height: 45px; }
+  .top-bar.expanded { height: auto !important; }
   .top-bar .name span { margin-left: 0px !important; }
   .top-bar .attached > ul > li > a, .top-bar .attached > ul > li > span { padding-left: 0px; padding-right: 0px; }
   .top-bar .attached > ul > li.download a { margin-bottom: 30px !important; margin-top: 10px; }
index 7a29f900dd0396bb3e3c355f7af425bc8d5fa2f4..b4fbcfcb8ff15cf0e00b64a0b12977fca4d82be7 100644 (file)
@@ -129,7 +129,8 @@ header#homepage .button:hover { background: #006582; }
   .top-bar .attached > .name span { padding-left: 0 !important; }
 }
 @media only screen and (max-width: 767px) {
-  .top-bar { height: auto !important; }
+  .top-bar { overflow: hidden; height: 45px; }
+  .top-bar.expanded { height: auto !important; }
   .top-bar .name span { margin-left: 0px !important; }
   .top-bar .attached > ul > li > a, .top-bar .attached > ul > li > span { padding-left: 0px; padding-right: 0px; }
   .top-bar .attached > ul > li.download a { margin-bottom: 30px !important; margin-top: 10px; }
index ebefa75b3e2a91c606927bc1cf8e4b36dd297b92..0bb21768244edc62cb08b1e4f4c15fead7bdb930 100644 (file)
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* Requires: normalize.css -box-sizing.htc */
 /* Global Reset & Standards ---------------------- */
 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@@ -810,17 +811,17 @@ div.orbit div.orbit-slide { width: 100%; height: 100%; }
 /* Timer ---------------------- */
 div.orbit-wrapper div.timer { width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; right: 10px; opacity: .6; cursor: pointer; z-index: 31; }
 
-div.orbit-wrapper span.rotator { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: -20px; background: url('../../images/foundation/orbit/rotator-black.png?1340846519') no-repeat; z-index: 3; }
+div.orbit-wrapper span.rotator { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: -20px; background: url('../../images/foundation/orbit/rotator-black.png?1340839300') no-repeat; z-index: 3; }
 
 div.orbit-wrapper span.mask { display: block; width: 20px; height: 40px; position: absolute; top: 0; right: 0; z-index: 2; overflow: hidden; }
 
 div.orbit-wrapper span.rotator.move { left: 0; }
 
-div.orbit-wrapper span.mask.move { width: 40px; left: 0; background: url('../../images/foundation/orbit/timer-black.png?1340846519') repeat 0 0; }
+div.orbit-wrapper span.mask.move { width: 40px; left: 0; background: url('../../images/foundation/orbit/timer-black.png?1340839300') repeat 0 0; }
 
-div.orbit-wrapper span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0; background: url('../../images/foundation/orbit/pause-black.png?1340846519') no-repeat; z-index: 4; opacity: 0; }
+div.orbit-wrapper span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0; background: url('../../images/foundation/orbit/pause-black.png?1340839300') no-repeat; z-index: 4; opacity: 0; }
 
-div.orbit-wrapper span.pause.active { background: url('../../images/foundation/orbit/pause-black.png?1340846519') no-repeat 0 -40px; }
+div.orbit-wrapper span.pause.active { background: url('../../images/foundation/orbit/pause-black.png?1340839300') no-repeat 0 -40px; }
 
 div.orbit-wrapper div.timer:hover span.pause, div.orbit-wrapper span.pause.active { opacity: 1; }
 
@@ -834,17 +835,17 @@ div.orbit-wrapper div.slider-nav { display: block; }
 
 div.orbit-wrapper div.slider-nav span { width: 39px; height: 50px; text-indent: -9999px; position: absolute; z-index: 30; top: 50%; margin-top: -25px; cursor: pointer; }
 
-div.orbit-wrapper div.slider-nav span.right { background: url('../../images/foundation/orbit/right-arrow.png?1340862868'); background-size: 100%; right: 0; }
+div.orbit-wrapper div.slider-nav span.right { background: url('../../images/foundation/orbit/right-arrow.png?1340918712'); background-size: 100%; right: 0; }
 
-div.orbit-wrapper div.slider-nav span.left { background: url('../../images/foundation/orbit/left-arrow.png?1340846519'); background-size: 100%; left: 0; }
+div.orbit-wrapper div.slider-nav span.left { background: url('../../images/foundation/orbit/left-arrow.png?1340839300'); background-size: 100%; left: 0; }
 
-.lt-ie9 div.orbit-wrapper div.slider-nav span.right { background: url('../../images/foundation/orbit/right-arrow-small.png?1340862688'); }
-.lt-ie9 div.orbit-wrapper div.slider-nav span.left { background: url('../../images/foundation/orbit/left-arrow-small.png?1340862688'); }
+.lt-ie9 div.orbit-wrapper div.slider-nav span.right { background: url('../../images/foundation/orbit/right-arrow-small.png?1340918712'); }
+.lt-ie9 div.orbit-wrapper div.slider-nav span.left { background: url('../../images/foundation/orbit/left-arrow-small.png?1340918712'); }
 
 /* Bullet Nav ---------------------- */
 ul.orbit-bullets { position: absolute; z-index: 30; list-style: none; bottom: -40px; left: 50%; margin-left: -50px; padding: 0; }
 
-ul.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url('../../images/foundation/orbit/bullets.jpg?1340846477') no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; }
+ul.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url('../../images/foundation/orbit/bullets.jpg?1340839282') no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; }
 
 ul.orbit-bullets li.active { color: #222; background-position: -8px 0; }
 
@@ -859,7 +860,7 @@ div.orbit, div.orbit-wrapper { width: 100% !important; }
 
 ul.orbit-bullets { position: absolute; z-index: 30; list-style: none; bottom: -50px; left: 50%; margin-left: -50px; padding: 0; }
 
-ul.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url('../../images/foundation/orbit/bullets.jpg?1340846477') no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; }
+ul.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url('../../images/foundation/orbit/bullets.jpg?1340839282') no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; }
 
 ul.orbit-bullets li.has-thumb { background: none; width: 100px; height: 75px; }
 
@@ -991,10 +992,10 @@ header .subheader { position: relative; top: -18px; }
   .top-bar .attached > .name span > a { width: auto; padding: 0 !important; text-indent: 0 !important; }
   .top-bar .attached > ul > li > a, .top-bar .attached > ul > li > span { height: 45px !important; text-indent: 0; }
   .top-bar .attached > ul > li > a.button { height: auto !important; } }
-<<<<<<< HEAD
 @media only screen and (device-width: 1280px) { .top-bar { height: 45px !important; }
   .top-bar .attached > .name span { padding-left: 0 !important; } }
-@media only screen and (max-width: 767px) { .top-bar { height: auto !important; }
+@media only screen and (max-width: 767px) { .top-bar { overflow: hidden; height: 45px; }
+  .top-bar.expanded { height: auto !important; }
   .top-bar .name span { margin-left: 0px !important; }
   .top-bar .attached > ul > li > a, .top-bar .attached > ul > li > span { padding-left: 0px; padding-right: 0px; }
   .top-bar .attached > ul > li.download a { margin-bottom: 30px !important; margin-top: 10px; }
@@ -1004,12 +1005,7 @@ header .subheader { position: relative; top: -18px; }
   .touch .top-bar .attached { height: 45px !important; }
   .touch .top-bar .attached > ul.right { overflow: hidden; height: 45px !important; } }
 @media only screen and (orientation: landscape) { .touch .top-bar .attached > ul.right { height: 45px !important; overflow: hidden !important; } }
-@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .top-bar .attached > .name span > a.toggle-nav { background-image: url('../../images/plus-toggle-2-retina.png?1340842456'); background-size: 100% 100%; } }
-=======
-@media only screen and (max-device-width: 1280px) { .top-bar .attached > .name span { padding-left: 0 !important; } }
-@media only screen and (max-width: 767px) { .top-bar .attached > w.name span { margin-left: 0px !important; } }
-@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .top-bar .attached > .name span > a.toggle-nav { background-image: url('../../images/plus-toggle-2-retina.png?1340846519'); background-size: 100% 100%; } }
->>>>>>> Fixed the forms and prefixes to work everywhere
+@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .top-bar .attached > .name span > a.toggle-nav { background-image: url('../../images/plus-toggle-2-retina.png?1340839300'); background-size: 100% 100%; } }
 #megaDrop li { list-style: none; }
 
 #megaDrop .show-on-phones, #megaDrop .sitemap-link { display: none !important; }
index 6b09ca337ecaa0cf095cb32acc95ef03fe4e58bf..7c1a0fe6f1ff7921c061d5c0f68b2cd0ae58db7e 100644 (file)
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* This is for all IE specfific style less than IE9. We hate IE. */
 .lt-ie8 .row { max-width: 1000px; }
 
index 472f07d38ef6ec9403d7d73f7d1c0c69a25b4a4f..677c90f446ce848738b89a16c371f0c9fb2ca9e9 100644 (file)
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* Requires: normalize.css -box-sizing.htc */
 /* Global Reset & Standards ---------------------- */
 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@@ -810,17 +811,17 @@ div.orbit div.orbit-slide { width: 100%; height: 100%; }
 /* Timer ---------------------- */
 div.orbit-wrapper div.timer { width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; right: 10px; opacity: .6; cursor: pointer; z-index: 31; }
 
-div.orbit-wrapper span.rotator { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: -20px; background: url('../images/foundation/orbit/rotator-black.png?1340842456') no-repeat; z-index: 3; }
+div.orbit-wrapper span.rotator { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: -20px; background: url('../images/foundation/orbit/rotator-black.png?1340839300') no-repeat; z-index: 3; }
 
 div.orbit-wrapper span.mask { display: block; width: 20px; height: 40px; position: absolute; top: 0; right: 0; z-index: 2; overflow: hidden; }
 
 div.orbit-wrapper span.rotator.move { left: 0; }
 
-div.orbit-wrapper span.mask.move { width: 40px; left: 0; background: url('../images/foundation/orbit/timer-black.png?1340842456') repeat 0 0; }
+div.orbit-wrapper span.mask.move { width: 40px; left: 0; background: url('../images/foundation/orbit/timer-black.png?1340839300') repeat 0 0; }
 
-div.orbit-wrapper span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0; background: url('../images/foundation/orbit/pause-black.png?1340842456') no-repeat; z-index: 4; opacity: 0; }
+div.orbit-wrapper span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0; background: url('../images/foundation/orbit/pause-black.png?1340839300') no-repeat; z-index: 4; opacity: 0; }
 
-div.orbit-wrapper span.pause.active { background: url('../images/foundation/orbit/pause-black.png?1340842456') no-repeat 0 -40px; }
+div.orbit-wrapper span.pause.active { background: url('../images/foundation/orbit/pause-black.png?1340839300') no-repeat 0 -40px; }
 
 div.orbit-wrapper div.timer:hover span.pause, div.orbit-wrapper span.pause.active { opacity: 1; }
 
@@ -834,17 +835,17 @@ div.orbit-wrapper div.slider-nav { display: block; }
 
 div.orbit-wrapper div.slider-nav span { width: 39px; height: 50px; text-indent: -9999px; position: absolute; z-index: 30; top: 50%; margin-top: -25px; cursor: pointer; }
 
-div.orbit-wrapper div.slider-nav span.right { background: url('../images/foundation/orbit/right-arrow.png?1340900207'); background-size: 100%; right: 0; }
+div.orbit-wrapper div.slider-nav span.right { background: url('../images/foundation/orbit/right-arrow.png?1340918712'); background-size: 100%; right: 0; }
 
-div.orbit-wrapper div.slider-nav span.left { background: url('../images/foundation/orbit/left-arrow.png?1340842456'); background-size: 100%; left: 0; }
+div.orbit-wrapper div.slider-nav span.left { background: url('../images/foundation/orbit/left-arrow.png?1340839300'); background-size: 100%; left: 0; }
 
-.lt-ie9 div.orbit-wrapper div.slider-nav span.right { background: url('../images/foundation/orbit/right-arrow-small.png?1340900207'); }
-.lt-ie9 div.orbit-wrapper div.slider-nav span.left { background: url('../images/foundation/orbit/left-arrow-small.png?1340900207'); }
+.lt-ie9 div.orbit-wrapper div.slider-nav span.right { background: url('../images/foundation/orbit/right-arrow-small.png?1340918712'); }
+.lt-ie9 div.orbit-wrapper div.slider-nav span.left { background: url('../images/foundation/orbit/left-arrow-small.png?1340918712'); }
 
 /* Bullet Nav ---------------------- */
 ul.orbit-bullets { position: absolute; z-index: 30; list-style: none; bottom: -40px; left: 50%; margin-left: -50px; padding: 0; }
 
-ul.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url('../images/foundation/orbit/bullets.jpg?1340842444') no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; }
+ul.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url('../images/foundation/orbit/bullets.jpg?1340839282') no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; }
 
 ul.orbit-bullets li.active { color: #222; background-position: -8px 0; }
 
@@ -859,7 +860,7 @@ div.orbit, div.orbit-wrapper { width: 100% !important; }
 
 ul.orbit-bullets { position: absolute; z-index: 30; list-style: none; bottom: -50px; left: 50%; margin-left: -50px; padding: 0; }
 
-ul.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url('../images/foundation/orbit/bullets.jpg?1340842444') no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; }
+ul.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url('../images/foundation/orbit/bullets.jpg?1340839282') no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; }
 
 ul.orbit-bullets li.has-thumb { background: none; width: 100px; height: 75px; }
 
@@ -1070,7 +1071,8 @@ header#homepage .button:hover { background: #006582; }
   .top-bar .attached > ul > li > a.button { height: auto !important; } }
 @media only screen and (device-width: 1280px) { .top-bar { height: 45px !important; }
   .top-bar .attached > .name span { padding-left: 0 !important; } }
-@media only screen and (max-width: 767px) { .top-bar { height: auto !important; }
+@media only screen and (max-width: 767px) { .top-bar { overflow: hidden; height: 45px; }
+  .top-bar.expanded { height: auto !important; }
   .top-bar .name span { margin-left: 0px !important; }
   .top-bar .attached > ul > li > a, .top-bar .attached > ul > li > span { padding-left: 0px; padding-right: 0px; }
   .top-bar .attached > ul > li.download a { margin-bottom: 30px !important; margin-top: 10px; }
index 04fe7504ca12816fd10fdc921c1eb1ae9bac94df..8b183ffbabc83eb88d600d544afacfdef04c5977 100644 (file)
@@ -58,6 +58,7 @@ jQuery(document).ready(function ($) {
   /* DROPDOWN NAV ------------- */
 
   var lockNavBar = false;
+  if (Modernizr.touch) {
   $('.nav-bar a.flyout-toggle').on('click.fndtn touchstart.fndtn mousedown.fndtn mouseup.fndtn mouseover.fndtn mouseout.fndtn', function(e) {
     e.preventDefault();
     console.log($(this).data('events'));
@@ -70,7 +71,6 @@ jQuery(document).ready(function ($) {
     }
     lockNavBar = true;
   });
-  if (Modernizr.touch) {
     $('.nav-bar>li.has-flyout').addClass('is-touch');
   } else {
     $('.nav-bar>li.has-flyout').hover(function() {