banner(scrolling): add scrolling to the banner

public/_includes/_hero-home.jade

@@ -6,9 +6,9 @@ header(class="background-sky l-relative")
         a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) Get Started
 
 
-    banner(image="/resources/images/logos/angular2/angular.svg" text="Angular 2.0 Final Release Now Live!" button="Learn More")
+    announcement-bar
       .announcement-bar-slide.clearfix
-        img(src="/resources/images/logos/angular2/angular.svg")
+        img(src="/resources/images/logos/angular2/angular.svg" width="40")
         p Angular 2.0 Final Release Now Live!
         a(href="http://angularjs.blogspot.com/2016/09/angular2-final.html" target="_blank" class="button " + "md-button") Learn More
 

public/_includes/_scripts-include.jade

@@ -28,7 +28,7 @@ script(src="/resources/js/directives/cheatsheet.js")
 script(src="/resources/js/directives/api-list.js")
 script(src="/resources/js/directives/bio.js")
 script(src="/resources/js/directives/bold.js")
-script(src="/resources/js/directives/banner.js")
+script(src="/resources/js/directives/announcement-bar.js")
 script(src="/resources/js/directives/code.js")
 script(src="/resources/js/directives/copy.js")
 script(src="/resources/js/directives/code-tabs.js")

public/resources/css/module/_announcement-bar.scss

@@ -20,21 +20,73 @@ $announcement-bar-width: 752px;
 */
 
 #{$announcement-bar} {
-  background: $white;
   bottom: 0;
-  box-sizing: border-box;
-  color: $blue-grey-500;
-  height: $announcement-bar-height;
   left: 50%;
   margin-bottom: -($announcement-bar-height / 2);
   margin-left: -($announcement-bar-width / 2);
-  overflow: hidden;
-  padding: $unit * 4;
   position: absolute;
   width: $announcement-bar-width;
 
+  @include respond-to('mobile') {
+    height: auto;
+    margin: 0;
+    position: static;
+    text-align: center;
+    width: auto;
+  }
+}
+
+// SLIDES CONTAINER
+#{$announcement-bar}-slides {
+  background: $white;
+  box-shadow: 0 4px 4px rgba($black, 0.24), 0 0 4px rgba($black, 0.12);
+  box-sizing: border-box;
+  color: $blue-grey-500;
+  height: $announcement-bar-height;
+  overflow: hidden;
+  position: relative;
+  width: $announcement-bar-width;
+
+  @include respond-to('mobile') {
+    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+    height: 240px;
+    margin: 0;
+    padding: ($unit * 4) ($unit * 6);
+    text-align: center;
+    width: auto;
+  }
+}
+
+// INDIVIDUAL SLIDE
+#{$announcement-bar}-slide {
+  bottom: 0;
+  box-sizing: border-box;
+  height: $announcement-bar-height;
+  left: 0;
+  margin-bottom: -$announcement-bar-height;
+  opacity: 0;
+  padding: $unit * 4;
+  position: absolute;
+  right: 0;
+  transition: all .8s;
+  width: $announcement-bar-width;
+  z-index: $layer-1;
+
+  @include respond-to('mobile') {
+    height: auto;
+    margin: 0;
+    padding:0;
+    width: auto;
+    transition: opacity .8s;
+    visibility: hidden;
+  }
+
   img, p {
     float: left;
+
+    @include respond-to('mobile') {
+      float: none;
+    }
   }
 
   img {
@@ -66,56 +118,57 @@ $announcement-bar-width: 752px;
       box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
       color: $blue-500;
     }
-  }
-
-
-  #{$announcement-bar}-slide {
-    bottom: 0;
-    box-sizing: border-box;
-    height: $announcement-bar-height;
-    left: 0;
-    margin-bottom: -$announcement-bar-height;
-    opacity: 0;
-    padding: $unit * 4;
-    position: absolute;
-    right: 0;
-    transition: all .8s;
-    width: $announcement-bar-width;
-    z-index: $layer-1;
-
-    &.is-visible  {
-      margin-bottom: 0;
-      opacity: 1;
-      z-index: $layer-2;
-    }
-  }
-
-
-  /*
-  * Mobile Styles
-  *
-  */
 
     @include respond-to('mobile') {
-    height: auto;
-    margin: 0;
-    padding: ($unit * 4) ($unit * 6);
-    position: static;
-    text-align: center;
-    width: auto;
-
-    &.shadow-2 {
-      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
-    }
-
-    img, p {
-      float: none;
-    }
-
-    .button {
       float: none;
       display: block;
       margin-top: $unit * 2;
     }
   }
+
+
+  &.is-visible  {
+    margin-bottom: 0;
+    opacity: 1;
+    z-index: $layer-2;
+
+    @include respond-to('mobile') {
+      position: static;
+      visibility: visible;
+    }
+  }
 }
+
+// NAV BAR
+#{$announcement-bar} nav {
+  bottom: -($unit * 5);
+  color: $blue-grey-500;
+  left: 0;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  z-index: $layer-1;
+
+  button {
+    background: $blue-grey-50;
+    border: none;
+    border-radius: 100px;
+    height: $unit + 4;
+    margin: 0 ($unit / 2);
+    outline: none;
+    overflow: hidden;
+    text-indent: -3000px;
+    width: $unit + 4;
+
+    &.is-selected,
+    &.selected  {
+      background: $blue-grey-100;
+    }
+  }
+}
+
+
+
+
+
+

public/resources/js/directives/announcement-bar.js

@@ -0,0 +1,72 @@
+/*eslint no-unused-vars: "angularIO" */
+
+/*
+* Announcement Bar Banner Directive
+*
+* A rotating announcement banners used to display
+* important updates and news.
+*/
+
+angularIO.directive('announcementBar', ['$interval', function($interval) {
+  return {
+    restrict: 'E',
+    scope: {},
+    transclude: true,
+    replace: true,
+    template:
+      '<div class="announcement-bar">' +
+        '<div class="announcement-bar-slides" ng-transclude></div>' +
+        '<nav class="announcement-bar-nav">'+
+          '<button ng-class="{ selected: currentSlide === key }" ng-repeat="(key, slide) in slides" ng-click="changeSlide($event, key)">{{key}}</button>' +
+        '</nav>' +
+      '</div>',
+
+    link: function(scope, element, attrs) {
+      // REGISTER ELEMENTS
+      scope.slides = angular.element(element[0].getElementsByClassName('announcement-bar-slide'));
+      var slideLenth = scope.slides.length;
+
+      // SHOW FIRST SLIDE
+      scope.currentSlide = 0;
+      angular.element(scope.slides[0]).addClass('is-visible');
+
+
+      /*
+      * Change Slide Using Nav
+      *
+      */
+
+      scope.changeSlide = function(event, slideNum) {
+        // CANCEL TIMEOUT AND CHANGE SLIDE
+        $interval.cancel(scope.timeoutId)
+        scope.slides.removeClass('is-visible');
+        angular.element(scope.slides[slideNum]).addClass('is-visible');
+        scope.currentSlide = slideNum;
+      };
+
+
+      /*
+      * Start Slideshow Cyle
+      *
+      */
+
+      scope.timeoutId = $interval(function() {
+        // INCREMENT
+        scope.currentSlide = scope.currentSlide + 1;
+
+        // HIDE ALL SLIDES
+        scope.slides.removeClass('is-visible');
+
+        // RESET ON LAST SLIDE
+        if((scope.currentSlide) > (slideLenth - 1))  {
+          scope.currentSlide = 0;
+        }
+
+        // SHOW SLIDE
+        angular.element(scope.slides[scope.currentSlide]).addClass('is-visible');
+      }, 5000);
+    }
+  };
+}]);
+
+

public/resources/js/directives/banner.js

@@ -1,51 +0,0 @@
-/*eslint no-unused-vars: "angularIO" */
-
-/*
-* Announcement Bar Banner Directive
-*
-* A rotating announcement banners used to display
-* important updates and news.
-*/
-
-angularIO.directive('banner', ['$interval', function($interval) {
-  return {
-    restrict: 'E',
-    transclude: true,
-    compile: function(tElement, attrs) {
-      var template =
-        '<div class="announcement-bar shadow-2 clearfix" ng-transclude></div>';
-
-      // UPDATE ELEMENT WITH NEW TEMPLATE
-      tElement.html(template);
-
-      // RETURN ELEMENT
-      return function(scope, element, attrs) {
-        var slides = angular.element(element[0].getElementsByClassName('announcement-bar-slide'));
-        var slideLenth = slides.length;
-        var currentSlide = 1;
-
-        // SHOW FIRST SLIDE
-        angular.element(slides[0]).addClass('is-visible');
-
-
-        // START SLIDESHOW CYCLE
-        var timeoutId = $interval(function() {
-
-          if((currentSlide + 1) <= slideLenth)  {
-            slides.removeClass('is-visible');
-            angular.element(slides[currentSlide]).addClass('is-visible');
-          }
-          else {
-            // RESET ON LAST SLIDE
-            currentSlide = 0;
-            slides.removeClass('is-visible');
-            angular.element(slides[currentSlide]).addClass('is-visible');
-          }
-
-          // INCREMENT
-          currentSlide = currentSlide + 1;
-        }, 5000);
-      };
-    }
-  };
-}]);