initial commit for rotating announcement banner

public/_includes/_hero-home.jade

@@ -5,7 +5,14 @@ header(class="background-sky l-relative")
         h1.text-headline #{title}<br>#{subtitle}
         a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) Get Started
 
-    .announcement-bar.shadow-2.clearfix
+
+    banner(image="/resources/images/logos/angular2/angular.svg" text="Angular 2.0 Final Release Now Live!" button="Learn More")
+      .announcement-bar-slide.clearfix
         img(src="/resources/images/logos/angular2/angular.svg")
         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
+
+      .announcement-bar-slide.clearfix
+        img(src="/resources/images/logos/ng-europe/ng-europe-logo.png")
+        p Join us for <strong>ng-europe in Paris</strong>, France this October!
+        a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Register now

public/_includes/_scripts-include.jade

@@ -28,6 +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/code.js")
 script(src="/resources/js/directives/copy.js")
 script(src="/resources/js/directives/code-tabs.js")

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

@@ -10,6 +10,7 @@
 * Variables
 */
 
+$announcement-bar: '.announcement-bar';
 $announcement-bar-height: 104px;
 $announcement-bar-width: 752px;
 
@@ -18,7 +19,7 @@ $announcement-bar-width: 752px;
 * Class
 */
 
-.announcement-bar {
+#{$announcement-bar} {
   background: $white;
   bottom: 0;
   box-sizing: border-box;
@@ -67,6 +68,29 @@ $announcement-bar-width: 752px;
     }
   }
 
+
+  #{$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
   *

public/resources/js/directives/banner.js

@@ -0,0 +1,51 @@
+/*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);
+      };
+    }
+  };
+}]);