iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit for rotating announcement banner

This commit is contained in:
Alex Wolfe 2016-09-15 18:54:07 -07:00 committed by Naomi Black
parent c787fd2ff0
commit f4c4aee706
4 changed files with 86 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/_includes/_hero-home.jade
View File

@ -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
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

1
public/_includes/_scripts-include.jade
View File

@ -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")

26
public/resources/css/module/_announcement-bar.scss
View File

@ -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
*

51
public/resources/js/directives/banner.js Normal file
View File

@ -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);
};
}
};
}]);