From: Jordan Humphreys Date: Thu, 28 Jun 2012 22:34:03 +0000 (-0700) Subject: Update navbar js. X-Git-Tag: v3.0.0.rc3~58 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=1593d458cb4bf00186e0bb2fcbeb5f1599b59aeb;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Update navbar js. --- diff --git a/marketing/docs/includes/_documentation_foot.php b/marketing/docs/includes/_documentation_foot.php index 7c9723f2a..889e37d4a 100644 --- a/marketing/docs/includes/_documentation_foot.php +++ b/marketing/docs/includes/_documentation_foot.php @@ -57,6 +57,7 @@ + diff --git a/marketing/includes/_footer.php b/marketing/includes/_footer.php index 6047e56bc..0b8a891e3 100644 --- a/marketing/includes/_footer.php +++ b/marketing/includes/_footer.php @@ -54,6 +54,7 @@ + diff --git a/marketing/javascripts/foundation.top-bar.js b/marketing/javascripts/foundation.top-bar.js new file mode 100644 index 000000000..0b5ddb43a --- /dev/null +++ b/marketing/javascripts/foundation.top-bar.js @@ -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 = $('
    • '); + + // Copy link to subnav + $titleLi.find('h5').html($link.html()); + $dropdown.prepend($titleLi); + $dropdown.prepend('
  • ← Back
    • '); + }); + + // 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 = $('
    • '), + $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 diff --git a/marketing/sass/docs/presentation.scss b/marketing/sass/docs/presentation.scss index 0a932769a..b59c0397d 100644 --- a/marketing/sass/docs/presentation.scss +++ b/marketing/sass/docs/presentation.scss @@ -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; } diff --git a/marketing/sass/presentation.scss b/marketing/sass/presentation.scss index 7a29f900d..b4fbcfcb8 100644 --- a/marketing/sass/presentation.scss +++ b/marketing/sass/presentation.scss @@ -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; } diff --git a/marketing/stylesheets/docs/presentation.css b/marketing/stylesheets/docs/presentation.css index ebefa75b3..0bb217682 100644 --- a/marketing/stylesheets/docs/presentation.css +++ b/marketing/stylesheets/docs/presentation.css @@ -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; } diff --git a/marketing/stylesheets/ie.css b/marketing/stylesheets/ie.css index 6b09ca337..7c1a0fe6f 100644 --- a/marketing/stylesheets/ie.css +++ b/marketing/stylesheets/ie.css @@ -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; } diff --git a/marketing/stylesheets/presentation.css b/marketing/stylesheets/presentation.css index 472f07d38..677c90f44 100644 --- a/marketing/stylesheets/presentation.css +++ b/marketing/stylesheets/presentation.css @@ -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; } diff --git a/vendor/assets/javascripts/foundation/app.js b/vendor/assets/javascripts/foundation/app.js index 04fe7504c..8b183ffba 100644 --- a/vendor/assets/javascripts/foundation/app.js +++ b/vendor/assets/javascripts/foundation/app.js @@ -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() {