Bug 567300, created personas slider

media/css/zamboni/zamboni.css

@@ -81,16 +81,16 @@ ul.errorlist {
 }
 
 .other-author-addons li .addonitem {
-	padding-left: 20px;
-	background-image: url(../../img/amo2009/icons/icons.png);
-	background-repeat: no-repeat;
-	background-position: 0px -200px;
+    padding-left: 20px;
+    background-image: url(../../img/amo2009/icons/icons.png);
+    background-repeat: no-repeat;
+    background-position: 0px -200px;
 }
 
 .html-rtl .other-author-addons li .addonitem {
-	padding-right: 20px;
-	padding-left: 0;
-	background-position: 100% -200px;
+    padding-right: 20px;
+    padding-left: 0;
+    background-position: 100% -200px;
 }
 
 .html-rtl.inverse .primary {
@@ -885,6 +885,10 @@ ul.license li.copyr { background-position: 0 -260px; }
     -moz-border-radius: 5px;
 }
 
+.featured.personas-home {
+    position:relative;
+}
+
 .personas-home .col1 {
     float: left;
     clear: left;
@@ -1779,7 +1783,7 @@ form .error .note.error {
 }
 #persona-summary .share-arrow {
     position: absolute;
-	z-index: 100;
+    z-index: 100;
 }
 #persona #more-personas {
     margin-bottom: 3em;
@@ -1984,3 +1988,50 @@ form .error .note.error {
 #discovery-modules .locales input {
     width: 20em;
 }
+
+/* Carousel arrows for personas carousel */
+
+.arrow {
+    display: block;
+    float: right;
+    width: 24px;
+    height: 24px;
+    border: 1px solid #7fcbd8;
+    -moz-border-radius: 13px;
+    cursor: pointer;
+    text-indent: -999px;
+    background: white;
+    position: absolute;
+    right: 108px;
+    overflow: hidden;
+}
+
+.arrow.prev {
+    top: -15px;
+}
+
+.arrow.next {
+    top: 355px;
+}
+
+.arrow:before {
+    content: "\00a0";
+    display: block; /* reduce the damage in FF3.0 */
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-style: solid;
+}
+
+.arrow.prev:before {
+    left: 6px;
+    top: 2px;
+    border-bottom-color: #0471ed;
+}
+
+.arrow.next:before {
+    left: 6px;
+    top: 9px;
+    border-top-color:#0471ed;
+}

media/js/zamboni/personas.js

@@ -15,7 +15,7 @@ function dispatchPersonaEvent(aType, aNode)
                    'SelectPersona': 'InstallBrowserTheme'};
     try {
         if (!aNode.hasAttribute("data-browsertheme"))
-			return;
+            return;
 
         $(aNode).attr("persona", $(aNode).attr("data-browsertheme"));
 
@@ -96,3 +96,114 @@ $.hasPersonas = function() {
 
     return body.getAttribute("personas") == "true";
 };
+
+// Vertical carousel component
+// Based on jQuery Infinite Carousel
+// http://jqueryfordesigners.com/jquery-infinite-carousel/
+
+function VerticalCarousel(container) {
+
+    this.container = $(container);
+    this.currentPage = 1;
+    this.items = this.container.find("> li");
+    this.numItems = this.items.length;
+    this.singleHeight = $(this.items[0]).height();
+    this.numVisible = Math.ceil(this.container.height() / this.singleHeight);
+    this.numPages = Math.ceil(this.numItems / this.numVisible);
+    this.prevButton = $("<a class='arrow prev'>^</a>");
+    this.nextButton = $("<a class='arrow next'>></a>");
+    this.container.before(this.prevButton);
+    this.container.after(this.nextButton);
+    this.interval = false;
+
+    //totally boss repeat hack
+
+    function repeat(str, n) {
+        return new Array( n + 1 ).join( str );
+    }
+
+    //pad out the last page if necessary
+
+    var padAmount = this.numItems % this.numVisible;
+    if (padAmount > 0) {
+        this.container.append(repeat('<li style="height:' + this.singleHeight + 'px" class="empty" />', padAmount));
+        this.items = this.container.find("> li");
+    }
+
+    this.items.filter(':first').before(this.items.slice(-this.numVisible).clone().addClass('cloned'));
+    this.items.filter(':last').after(this.items.slice(0, this.numVisible).clone().addClass('cloned'));
+    this.items = this.container.find("> li");
+
+    this.container.scrollTop(this.singleHeight * this.numVisible);
+
+}
+
+VerticalCarousel.prototype.gotoPage = function(page) {
+    var dir = page < this.currentPage ? -1 : 1,
+        n = Math.abs(this.currentPage - page),
+        top = this.singleHeight * dir * this.numVisible * n,
+        that=this;
+
+    if (this.container) {
+        this.container.filter(':not(:animated)').animate({
+            scrollTop: '+=' + top
+        },
+        500,
+        function() {
+            if (!that.container) return false;
+            if (page == 0) {
+                that.container.scrollTop(that.singleHeight * that.numVisible * that.numPages);
+                page = that.numPages;
+            } else if (page > that.numPages) {
+                that.container.scrollTop(that.singleHeight * that.numVisible);
+                page = 1;
+            }
+            that.currentPage = page;
+        });
+    }
+
+  return false;
+};
+VerticalCarousel.prototype.autoAdvance = function () {
+    clearInterval(this.interval);
+    var that = this;
+    this.interval = setInterval(function () {
+        that.gotoPage(that.currentPage+1);
+    }, 5000);
+};
+VerticalCarousel.prototype.pause = function () {
+    clearInterval(this.interval);
+    clearTimeout(this.interval);
+};
+VerticalCarousel.prototype.init = function () {
+    var that = this;
+    this.prevButton.click(function (e) {
+        that.gotoPage(that.currentPage-1);
+    });
+    this.nextButton.click(function (e) {
+        that.gotoPage(that.currentPage+1);
+    });
+
+    function doPause (e) {
+        that.pause();
+    }
+    function doResume(e) {
+        that.interval = setTimeout(function () {
+            that.autoAdvance();
+        },1000);
+    }
+
+    this.prevButton.mouseenter(doPause);
+    this.nextButton.mouseenter(doPause);
+    this.container.mouseenter(doPause);
+
+    this.prevButton.mouseleave(doResume);
+    this.nextButton.mouseleave(doResume);
+    this.container.mouseleave(doResume);
+
+    this.autoAdvance();
+};
+
+$(document).ready(function() {
+    (new VerticalCarousel($(".personas-slider"))).init();
+});