homepage promo for Favorite Add-ons contest winners (bug 771387)

apps/discovery/modules.py

@@ -283,3 +283,8 @@ class ValentinesDay(CollectionPromo):
 class Olympics(TemplatePromo):
     slug = 'Olympics'
     template = 'discovery/modules/olympics.html'
+
+
+class ContestWinners(TemplatePromo):
+    slug= 'Contest Winners'
+    template = 'discovery/modules/contest-winners.html'

apps/discovery/templates/discovery/modules/contest-winners.html

@@ -0,0 +1,24 @@
+<li class="panel">
+  <div id="contest-winners">
+    <ul class="pages">
+      <li class="page">
+        <div id="caroline" class="contest-winner feature promo">
+          <a href="{{ url('addons.detail', 'firebug')|urlparams(src='hp-contest-winners') }}" target="_blank"><span></span></a>
+        </div>
+      </li><li class="page">
+        <div id="jason" class="contest-winner feature promo">
+          <a href="{{ url('addons.detail', 'downthemall')|urlparams(src='hp-contest-winners') }}" target="_blank"><span></span></a>
+        </div>
+      </li><li class="page">
+        <div id="josh" class="contest-winner feature promo">
+          <a href="{{ url('addons.detail', 'lastpass-password-manager')|urlparams(src='hp-contest-winners') }}" target="_blank"><span></span></a>
+        </div>
+      </li>
+    </ul>
+    <nav class="pager">
+      <a href="#" class="dot selected"></a>
+      <a href="#" class="dot"></a>
+      <a href="#" class="dot"></a>
+    </nav>
+  </div>
+</li>

media/css/impala/carousel.less

@@ -56,6 +56,15 @@
     }
 }
 
+.pages {
+    position: relative;
+    height: 271px;
+    top: 0;
+    left: 0;
+    .transition-duration(.3s);
+    .transition-property(top bottom);
+}
+
 .slider {
     white-space: nowrap;
     position: relative;
@@ -76,6 +85,7 @@
     -webkit-transition: none;
 }
 
+.pages > li,
 .slider > li {
     width: 100%;
     white-space: normal;

media/css/impala/promos.less

@@ -462,6 +462,52 @@
     background: url(../../img/zamboni/discovery_pane/promos/olympics-bg-large.png) 20% 0;
 }
 
+#contest-winners {
+    position: relative;
+    .contest-winner {
+        span {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+        }
+    }
+    #caroline {
+        background: url(../../img/zamboni/discovery_pane/promos/contest-caroline.jpg) 100% 0 no-repeat;
+    }
+    #josh {
+        background: url(../../img/zamboni/discovery_pane/promos/contest-josh.jpg) 100% 0 no-repeat;
+    }
+    #jason {
+        background: url(../../img/zamboni/discovery_pane/promos/contest-jason.jpg) 100% 0 no-repeat;
+    }
+    .pager {
+        position: absolute;
+        width: 90px;
+        left: 50%;
+        margin-left: -45px;
+        top: 245px;
+        a {
+            background: url(../../img/zamboni/discovery_pane/pager-nav.png) 100% 0 no-repeat;
+            width: 16px;
+            height: 17px;
+            padding: 0px;
+            margin-right: 12px;
+            background-position: -31px -1px;
+        }
+        a:last-child {
+            margin-right: 0;
+        }
+        a:hover {
+            background-position: -16px -1px;
+        }
+        a.selected {
+            background-position: 0 -1px;
+        }
+    }
+}
+
 .addons li {
     float: left;
     width: 30%;

media/css/zamboni/discovery-pane.css

@@ -372,6 +372,19 @@ section#featured-addons {
     box-shadow: none;
 }
 
+.pages {
+    position: relative;
+    height: 271px;
+    top: 0;
+    left: 0;
+    transition-duration: .3s;
+    transition-property: top, bottom;
+    -moz-transition-duration: .3s;
+    -moz-transition-property: top, bottom;
+    -webkit-transition-duration: .3s;
+    -webkit-transition-property: top, bottom;
+}
+
 .slider {
     white-space: nowrap;
     position: relative;
@@ -387,6 +400,7 @@ section#featured-addons {
     -webkit-transition: none;
 }
 
+.pages > li,
 .slider > li {
     width: 100%;
     white-space: normal;

media/js/impala/homepage.js

@@ -12,6 +12,10 @@
             btnPrev: $('.prev', $promos),
             btnNext: $('.next', $promos)
         });
+
+        // Intialize the pager for any paging promos
+        $('.pager', $promos).promoPager();
+
         $('.addons h3', $promos).truncate({dir: 'h'});
         $('.addons .desc', $promos).truncate({dir: 'v'});
         $('.install', $promos).installButton();

media/js/impala/promos.js

@@ -33,3 +33,46 @@ function initPromos($context, module_context, version, platform) {
         }
     });
 }
+
+$.fn.promoPager = function() {
+    $.each(this, function(index, pager) {
+        var $dots = $('.dot', pager);
+        $dots.click(_pd(function(ev) {
+            $('.selected', pager).removeClass('selected');
+            setPage(pager, $dots, $dots.index(ev.target));
+        }));
+    });
+
+    function setPage(pager, dots, pageNum) {
+        var offset = -271 * pageNum + 'px';
+        dots.eq(pageNum).addClass('selected');
+        $(pager).siblings('.pages').css('top', offset);
+    }
+};
+
+(function() {
+    $('#caroline').click(function() {
+        dcsMultiTrack('DCS.dcssip', 'addons.mozilla.org',
+                      'DCS.dcsuri', '/en-US/firefox/',
+                      'WT.ti', 'Link: Firebug',
+                      'WT.dl', 99,
+                      'WT.z_convert', 'FavoriteAdd-ons'
+        );
+    });
+    $('#jason').click(function() {
+        dcsMultiTrack('DCS.dcssip', 'addons.mozilla.org',
+                      'DCS.dcsuri', '/en-US/firefox/',
+                      'WT.ti', 'Link: DownThemAll!',
+                      'WT.dl', 99,
+                      'WT.z_convert', 'FavoriteAdd-ons'
+        );
+    });
+    $('#josh').click(function() {
+        dcsMultiTrack('DCS.dcssip', 'addons.mozilla.org',
+                      'DCS.dcsuri', '/en-US/firefox/',
+                      'WT.ti', 'Link: LastPass',
+                      'WT.dl', 99,
+                      'WT.z_convert', 'FavoriteAdd-ons'
+        );
+    });
+});

media/js/zamboni/discovery_pane.js

@@ -55,6 +55,10 @@ $(document).ready(function(){
             btnPrev: '#promos .nav-prev a',
             circular: true
         });
+
+        // Intialize the pager for any paging promos
+        $('.pager', $promos).promoPager();
+
         initTrunc();
         // Initialize install button.
         $('.install', $promos).installButton();

migrations/448-promo-contestwinners-src.sql

@@ -0,0 +1,2 @@
+INSERT INTO download_sources (name, type, created)
+    VALUES ('hp-contest-winners', 'full', NOW());