Merge pull request #324 from paulcpederson/master

Third Nav
Esri · Aug 18, 2015 · f34dbf6 · f34dbf6
2 parents 749b2d5 + 8258a30
commit f34dbf6
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 35 deletions.
diff --git a/docs/source/layouts/_blank.html b/docs/source/layouts/_blank.html
@@ -45,7 +45,7 @@
     <footer class="footer leader-0">
       <div class="grid-container text-darker-gray link-dark-gray">
         <div class="column-24 padding-leader-1"><a href="#" class="avenir-light">Esri Home</a></div>
-        <div class="block-group block-group-5-up column-24">
+        <div class="block-group block-group-5-up tablet-block-group-2-up column-24">
           <div class="block">
             <h6 class="avenir-light font-size--2">Understanding GIS</h6>
             <ul class="font-size--3">

diff --git a/docs/source/page-layouts/type-comparison.html b/docs/source/page-layouts/type-comparison.html
@@ -6,7 +6,7 @@
 ---
 
 <header class="third-nav">
-  <a href="#" class="icon-ui-left js-overflow-left nav-overflow-left is-active"></a>
+  <a href="#" class="icon-ui-left js-overflow-left nav-overflow-left"></a>
   <div class="grid-container">
     <nav class="column-24 third-nav-container js-nav-overflow" role="navigation" aria-labelledby="thirdnav">
       <a class="third-nav-link is-active" href="#">English</a>
@@ -24,7 +24,7 @@
       <a class="third-nav-link" href="#">Arabic</a>
     </nav>
   </div>
-  <a href="#" class="icon-ui-right js-overflow-right nav-overflow-right is-active"></a>
+  <a href="#" class="icon-ui-right js-overflow-right nav-overflow-right"></a>
 </header>
 
 

diff --git a/lib/js/calcite-web.js b/lib/js/calcite-web.js
@@ -597,39 +597,27 @@
   // └───────────┘
   // sticks things to the window
   calcite.thirdNav = function () {
-    var elements = findElements('.js-nav-overflow');
+    var nav = document.querySelector('.js-nav-overflow');
+    var leftBtn = document.querySelector('.js-overflow-left');
+    var rightBtn = document.querySelector('.js-overflow-right');
 
-    var leftBtns = findElements('.js-overflow-left');
-    leftBtns.forEach( function (button) {
-      calcite.addEvent(button, calcite.click(), scrollLeft);
-    });
-
-    var rightBtns = findElements('.js-overflow-right');
-    rightBtns.forEach( function (button) {
-      calcite.addEvent(button, calcite.click(), scrollRight);
-    });
-
-    var allBtn = rightBtns.concat(leftBtns);
-
-    function scrollLeft (e) {
-      var nav = e.target.parentNode.querySelector('.js-nav-overflow');
-      nav.scrollLeft -= 100;
-    }
-    function scrollRight (e) {
-      var nav = e.target.parentNode.querySelector('.js-nav-overflow');
-      addClass(nav, 'is-scrolling');
-      nav.scrollLeft += 100;
+    function scroll (distance) {
+      nav.scrollLeft += distance;
     }
 
+    calcite.addEvent(leftBtn, calcite.click(), scroll.bind(null, -40));
+    calcite.addEvent(rightBtn, calcite.click(), scroll.bind(null, 40));
+
     function resize () {
-      if (hasClass(allBtn[0], 'is-active')) removeActive(allBtn);
-      elements.forEach( function (nav) {
-        if (nav.scrollWidth > nav.parentNode.offsetWidth + 24) addActive(allBtn);
-      });
+      calcite.removeClass(leftBtn, 'is-active');
+      calcite.removeClass(rightBtn, 'is-active');
+      if (nav.scrollLeft > 0) calcite.addClass(leftBtn, 'is-active');
+      if (nav.scrollLeft + nav.clientWidth + 5 < nav.scrollWidth) calcite.addClass(rightBtn, 'is-active');
     }
 
-    resize();
+    calcite.addEvent(nav, 'scroll', resize);
     calcite.addEvent(window, 'resize', resize);
+    resize();
   };
 
   // ┌────────────────────┐

diff --git a/lib/sass/calcite-web/patterns/_third-nav.scss b/lib/sass/calcite-web/patterns/_third-nav.scss
@@ -10,22 +10,26 @@
   background-color: $white;
   padding: $baseline/4 0;
   width: 100%;
+  text-indent: $baseline * .5;
 }
 
   @mixin third-nav-container () {
-    margin-left: $baseline * .5;
-    overflow-x: scroll;
+    overflow-x: auto;
     white-space: nowrap;
+    padding-bottom: 15px;
+    margin-bottom: -15px;
   }
 
   @mixin nav-overflow() {
     position: absolute;
     padding: 11px 6px;
     top: 0;
     margin: 0;
-    background-color: $white;
-    border-bottom: 1px solid $lightest-gray;
+    background-color: rgba(255,255,255,.8);
     display: none;
+    &:before {
+      padding-right: 0;
+    }
     &.is-active {
       display: block;
     }
@@ -34,13 +38,11 @@
     @mixin nav-overflow-left () {
       @include nav-overflow();
       left: 0px;
-      border-right: 1px solid $lightest-gray;
     }
 
     @mixin nav-overflow-right () {
       @include nav-overflow();
       right: 0px;
-      border-left: 1px solid $lightest-gray;
     }
 
   @mixin third-nav-link() {