Merge lp:~elachuni/ubuntu-webcatalog/carousel into lp:ubuntu-webcatalog

[Anthony Lenton]

Added a YUI carousel widget for the front page exhibits display.

Overview
========
This branch adds a YUI carousel widget for the front page exhibits display.

Details
=======
Instead of using YUI3's carousel control, I reused the controls and stripped down the code from the carousel widget on the Ubuntu One homepage.

If Javascript is disabled, the first exhibit in the list will just remain displayed, with no controls available. The list is shuffled before rendering on the template, so (ignoring cache expirations) a different exhibit will be rendered on the front page each time.

If Javascript is enabled, the exhibits will be displayed in a random order, and cycle every 5 seconds.

Thanks to the combo loader the front page uses only 20 requests, 12 of which are for the different department icons. Without the combo loader it would take up 41 extra requests.

[Anthony Lenton (elachuni)]

Brief screencast of the exhibits widget: http://people.canonical.com/~anthony/exhibits_widget.ogv

[Michael Nelson (michael.nelson)]

On Tue, Mar 6, 2012 at 12:34 AM, Anthony Lenton
<email address hidden> wrote:
> Anthony Lenton has proposed merging lp:~elachuni/ubuntu-webcatalog/carousel into lp:ubuntu-webcatalog with lp:~elachuni/ubuntu-webcatalog/convoy as a prerequisite.
>
> Requested reviews:
>  Canonical Consumer Applications Hackers (canonical-ca-hackers)
>
> For more details, see:
> https://code.launchpad.net/~elachuni/ubuntu-webcatalog/carousel/+merge/96023
>
> Overview
> ========
> This branch adds a YUI carousel widget for the front page exhibits display.
>
> Details
> =======
> Instead of using YUI3's carousel control, I reused the controls and stripped down the code from the carousel widget on the Ubuntu One homepage.

Cool!

>
> If Javascript is disabled, the first exhibit in the list will just remain displayed, with no controls available.  The list is shuffled before rendering on the template, so (ignoring cache expirations) a different exhibit will be rendered on the front page each time.
>
> If Javascript is enabled, the exhibits will be displayed in a random order, and cycle every 5 seconds.
>
> Thanks to the combo loader the front page uses only 20 requests, 12 of which are for the different department icons.  Without the combo loader it would take up 41 extra requests.

That's excellent! Do we have a bug for doing the department icons as a
single sprite? Would it be worth doing that?

Thanks for the screencast too... looks very nice!

> === added file 'src/webcatalog/static/css/carousel.css'
> --- src/webcatalog/static/css/carousel.css      1970-01-01 00:00:00 +0000
> +++ src/webcatalog/static/css/carousel.css      2012-03-05 23:33:18 +0000
> @@ -0,0 +1,96 @@
> +.carousel-wrapper {
> +    position: relative;
> +    height: 200px;
> +    overflow: hidden;
> +}
> +.container  {

Should that class be more specific? carouselcontainer or even
ccontainer? I remember a time where every site had a <div
class="container"> wrapping the page. Ah, it's probably just inherited
from u1?

> === added file 'src/webcatalog/static/images/arrow-sprite.png'
> Binary files src/webcatalog/static/images/arrow-sprite.png      1970-01-01 00:00:00 +0000 and src/webcatalog/static/images/arrow-sprite.png     2012-03-05 23:33:18 +0000 differ
> === added directory 'src/webcatalog/static/js'
> === added file 'src/webcatalog/static/js/carousel.js'
> --- src/webcatalog/static/js/carousel.js        1970-01-01 00:00:00 +0000
> +++ src/webcatalog/static/js/carousel.js        2012-03-05 23:33:18 +0000
> @@ -0,0 +1,181 @@
> +YUI.add('uwc-carousel', function(Y) {
> +    Y.namespace('uwc');
> +    function Carousel(config){
> +        Carousel.superclass.constructor.apply(this, arguments);
> +    }
> +    Y.extend(Carousel, Y.Base, {

Why are we creating our own Carousel module here? Can we ask U1 to
publish theirs on the yui gallery? It'd be great to not be maintaining
this code (or, on the other side, improving code that others can reuse
too). Did you try even just pointing YUI at U1's carousel module, if
that's possible?

> +        initializer: function(cfg) {
> +            var nodeListSlides,
> +                nodeCarousel,
> +                nodeContainer = this.get("nodeContai...

[Michael Nelson (michael.nelson)]

review: Approve

[lp:~elachuni/ubuntu-webcatalog/carousel]

68. By Anthony Lenton on 2012-03-06

A couple of minor fixes per code review.

69. By Anthony Lenton on 2012-03-06

Removed unnecessary container class.

=== modified file 'django_project/config/main.cfg'
--- django_project/config/main.cfg	2012-03-05 17:41:06 +0000
+++ django_project/config/main.cfg	2012-03-06 17:02:19 +0000
@@ -50,7 +50,7 @@
                               webcatalog.context_processors.google_analytics_id
                               webcatalog.context_processors.user_agent
 
-static_root = ./src/webcatalog/static/
+static_root = ./django_project/static/
 static_url = /assets/
 admin_media_prefix = /assets/admin/
 
@@ -93,6 +93,7 @@
 sca_api_url = https://sc.staging.ubuntu.com/api/2.0/
 disk_apt_cache_location = /tmp/webcat_cache
 default_distro = natty
+convoy_root = ./src/webcatalog/static/
 
 [google]
 google_analytics_id = UA-1018242-36

=== modified file 'src/webcatalog/schema.py'
--- src/webcatalog/schema.py	2012-01-06 18:36:08 +0000
+++ src/webcatalog/schema.py	2012-03-06 17:02:19 +0000
@@ -62,6 +62,7 @@
     webcatalog.preload_api_service_roots = BoolConfigOption()
     webcatalog.oauth_data_store = StringConfigOption(
         default='webcatalog.models.oauthtoken.DataStore')
+    webcatalog.convoy_root = StringConfigOption()
 
     google = ConfigSection()
     google.google_analytics_id = StringConfigOption()

=== added file 'src/webcatalog/static/css/carousel.css'
--- src/webcatalog/static/css/carousel.css	1970-01-01 00:00:00 +0000
+++ src/webcatalog/static/css/carousel.css	2012-03-06 17:02:19 +0000
@@ -0,0 +1,96 @@
+.carousel-wrapper {
+    position: relative;
+    height: 200px;
+    overflow: hidden;
+}
+#carousel  {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    background: #333;
+    display: block;
+}
+#carousel .next, #carousel .prev {
+    background: url(/assets/images/arrow-sprite.png) no-repeat 0 0;
+    position: absolute;
+    z-index: 20;
+    width: 33px;
+    height: 66px;
+    margin-top: -33px;
+}
+#carousel .next:active, #carousel .prev:active {
+    margin-top: -32px;
+    outline: none;
+}
+#carousel .next span, #carousel .prev span {
+    position:absolute;
+    left: -9999em;
+    height: 0;
+    width: 0;
+}
+#carousel .prev {
+    left: 0;
+    top: 50%;
+    background-position:0 0;
+}
+#carousel .prev:hover, #carousel .prev:focus {
+    outline: none;
+    background-position: 0 -116px;
+}
+#carousel .next {
+    right: 0;
+    top: 50%;
+    background-position: 0 -232px;
+}
+#carousel .next:hover, #carousel .next:focus {
+    outline: none;
+    background-position: 0 -348px;
+}
+#carousel .pagination {
+    position: absolute;
+    z-index: 20;
+    left: 50%;
+    top: 87%;
+    margin-left: -35px;
+}
+#carousel .pagination li {
+    float: left;
+    margin-right: 10px;
+}
+#carousel .pagination li a {
+    display: block;
+    height: 10px;
+    width: 10px;
+    background: #aea79f;
+    border-radius: 20px;
+}
+#carousel .pagination li a:hover, #carousel .pagination li a:focus,
+#carousel .pagination li a.active:hover, #carousel .pagination li a.active:focus {
+    background-color: #dd4814;
+}
+#carousel .pagination li a.active {
+    background-color: #fff;
+}
+#carousel .pagination li a span {
+    position: absolute;
+    left: -999em;
+}
+#carousel .carousel {
+    width: 10000px;
+    overflow: hidden;
+    position: relative;
+}
+#carousel .carousel li {
+    position: relative;
+    display: block;
+    background: #333;
+    float: left;
+}
+#carousel .carousel a {
+    cursor: hand;
+}
+#carousel .carousel .disabled {
+    display: none;
+}

=== added file 'src/webcatalog/static/images/arrow-sprite.png'
Binary files src/webcatalog/static/images/arrow-sprite.png	1970-01-01 00:00:00 +0000 and src/webcatalog/static/images/arrow-sprite.png	2012-03-06 17:02:19 +0000 differ
=== added directory 'src/webcatalog/static/js'
=== added file 'src/webcatalog/static/js/carousel.js'
--- src/webcatalog/static/js/carousel.js	1970-01-01 00:00:00 +0000
+++ src/webcatalog/static/js/carousel.js	2012-03-06 17:02:19 +0000
@@ -0,0 +1,181 @@
+YUI.add('uwc-carousel', function(Y) {
+    Y.namespace('uwc');
+    function Carousel(config){
+        Carousel.superclass.constructor.apply(this, arguments);
+    }
+    Y.extend(Carousel, Y.Base, {
+        initializer: function(cfg) {
+            var nodeListSlides,
+                nodeCarousel,
+                nodeContainer = this.get("nodeContainer"),
+                carouselClassName = this.get("carouselClassName");
+            this.interval = null;
+            this.curSlide = 0;
+            nodeListSlides = this.getCarouselNodeList();
+            this.nodeCarousel = nodeContainer.one("."+ carouselClassName);
+            // Ensure Carousel is position: relative
+            this.nodeCarousel.setStyle("position", "relative");
+            this.numSlides = nodeListSlides.size();
+            // init animation
+            this.caroAnim = new Y.Anim({
+                node: this.nodeCarousel
+            });
+            this.caroAnim.set("duration", this.get("slideAnimDuration"));
+            this.caroAnim.set("easing", this.get("slideEasing"));
+            this.caroAnim.on("end", function(){
+                this.updatePagination();
+            }, this);
+
+            // Create next/prev
+            this.generateControls();
+            // Create Paging
+            this.generatePagination();
+            this.updatePagination();
+            // We are ready display everything.
+            this.nodeCarousel.removeClass("hidden");
+            if (this.get("autoPlay")) {
+                this.autoPlay();
+            }
+        },
+        getCarouselNodeList: function() {
+            var nodeContainer = this.get("nodeContainer"),
+                carouselClassName = this.get("carouselClassName");
+            return nodeContainer.all("." + carouselClassName + " li");
+        },
+        updatePagination: function() {
+            var nodeContainer = this.get("nodeContainer"),
+                paginationListItems;
+            paginationListItems = nodeContainer.all(".pagination li a");
+            paginationListItems.each(function(a){
+                var nodeClassName = a.get("className");
+                if (parseInt(nodeClassName.replace("p-", ""), 10) === this.curSlide) {
+                    a.addClass("active");
+                } else {
+                    a.removeClass("active");
+                }
+            }, this);
+        },
+        generatePagination: function() {
+            var pageText = 'Page',
+                nodeContainer = this.get("nodeContainer"),
+                ol = document.createElement('ol'),
+                li, a, sp, txt;
+
+            ol.className = "pagination";
+            for (var i=0, j=this.numSlides; i < j; i++){
+                li = document.createElement('li');
+                a = document.createElement('a');
+                sp = document.createElement('span');
+                a.href = '#';
+                txt = document.createTextNode(pageText+(i+1));
+                sp.appendChild(txt);
+                a.appendChild(sp);
+                a.className = 'p-'+i;
+                li.appendChild(a);
+                ol.appendChild(li);
+            }
+            nodeContainer.append(ol);
+            olNode = Y.one(ol);
+            olNode.on("click", function(e){
+                var targetClass;
+                e.preventDefault();
+                if (this.caroAnim.get("running") === false) {
+                    if (e && this.autoPlayTimer) {
+                        clearInterval(this.autoPlayTimer);
+                    }
+                    targetClass = e.target.get("className");
+                    this.gotoSlide(parseInt(targetClass.replace("p-", ""), 10));
+                }
+            }, this);
+        },
+        generateControls: function() {
+            var prev = Y.Node.create('<a href="#" class="prev"><span>Previous Slide</span></a>'),
+                next = Y.Node.create('<a href="#" class="next"><span>Next Slide</span></a>'),
+                nodeContainer = this.get("nodeContainer");
+
+            next.on("click", this.next, this);
+            prev.on("click", this.prev, this);
+            nodeContainer.appendChild(prev);
+            nodeContainer.appendChild(next);
+        },
+        advance: function(e, val){
+            if (e) {
+                e.preventDefault();
+            }
+            if (e && this.autoPlayTimer) {
+                clearInterval(this.autoPlayTimer);
+            }
+            if (this.caroAnim.get("running") === true) {
+                return;
+            }
+            this.gotoSlide(val);
+        },
+        next: function(e){
+            this.advance(e, this.curSlide + 1);
+        },
+        prev: function(e){
+            this.advance(e, this.curSlide - 1);
+        },
+        gotoSlide: function(nSlideIndex, duration) {
+            var xOffSet, slideWidth;
+            slideWidth = parseInt(this.nodeCarousel.one("li").getStyle("width"), 10);
+            duration = (duration === 0) ? duration : (duration || this.get("slideAnimDuration"));
+            this.nSlideIndex = nSlideIndex;
+            if (nSlideIndex < 0) {
+                this.animateTo(-(slideWidth * (this.numSlides-1)), duration);
+                this.curSlide = this.numSlides - 1;
+            } else if (nSlideIndex >= (this.numSlides)) {
+                this.animateTo(0, duration);
+                this.curSlide = 0;
+            } else {
+                xOffSet = -slideWidth * nSlideIndex;
+                this.animateTo(xOffSet, duration);
+                this.curSlide = nSlideIndex;
+            }
+
+        },
+        autoPlay: function() {
+            var that = this;
+            this.autoPlayTimer = setInterval(function(){
+               that.next();
+            }, that.get("slideAnimInterval"));
+        },
+        animateTo: function(value, duration) {
+            var origDuration;
+            if (duration === 0) {
+                this.nodeCarousel.setStyle("left", value);
+            } else {
+                if (duration) {
+                    origDuration = this.caroAnim.get("duration");
+                    this.caroAnim.set("duration", duration);
+                }
+                this.caroAnim.set("to", { "left": value });
+                this.caroAnim.run();
+                this.caroAnim.set("duration", origDuration);
+            }
+        },
+    }, {
+        NAME: "carousel",
+        ATTRS: {
+            carouselClassName: { value: "carousel"},
+            containerHeight: { value: null },
+            containerWidth: { value: null },
+            nodeContainer: {
+                setter: function(sel) {
+                    var n = Y.one(sel);
+                    if (!n) {
+                        Y.log('UWC:Carousel - invalid selector provided: ' + sel);
+                    }
+                    return n;
+                }
+            },
+            slideAnimDuration: { value: 1 },
+            slideAnimInterval: { value: 5000 },
+            slideEasing: { value: Y.Easing.easeBoth },
+            autoPlay: { value: true }
+        }
+    });
+    Y.uwc.Carousel = Carousel;
+}, '0.0.1', {
+    requires: ['base', 'node', 'anim', 'event']
+});

=== modified file 'src/webcatalog/templates/webcatalog/application_detail.html'
--- src/webcatalog/templates/webcatalog/application_detail.html	2012-03-05 17:41:06 +0000
+++ src/webcatalog/templates/webcatalog/application_detail.html	2012-03-06 17:02:19 +0000
@@ -8,7 +8,7 @@
 {{ block.super }}
 <script src="{{ STATIC_URL }}yui/3.4.0/build/yui/yui-min.js"></script>
 <script>
-YUI({debug: false, combine: true, comboBase: '{% url wc-combo %}?', root: 'yui/3.4.0/build/'}).use('io-base', 'node-base', function (Y) {
+YUI({combine: true, comboBase: '{% url wc-combo %}?', root: 'yui/3.4.0/build/'}).use('io-base', 'node-base', function (Y) {
     function complete(id, obj){
         var reviews_html = obj.responseText;
         var reviews_div = Y.one('#reviews_placeholder');

=== modified file 'src/webcatalog/templates/webcatalog/exhibits_widget.html'
--- src/webcatalog/templates/webcatalog/exhibits_widget.html	2012-03-01 22:42:00 +0000
+++ src/webcatalog/templates/webcatalog/exhibits_widget.html	2012-03-06 17:02:19 +0000
@@ -1,41 +1,32 @@
+<div class="carousel-wrapper">
+    <div id="carousel">
+        <ol class="carousel">
+        {% autoescape off %}
+        {% comment %}
+All slides except the first one start off with a "disabled" class, which will
+make them "display: none".  This will avoid loading pointless remote resources
+(banners) if Javascript is disabled.  The "disabled" class is then removed via
+Javascript.
+        {% endcomment %}
+        {% for exhibit in exhibits %}
+        <li class="slide{% if forloop.counter > 1%} disabled{% endif %}">
+            <a href="{{ exhibit.destination_url }}">
+        {{ exhibit.html }}
+            </a>
+        </li>
+        {% endfor %}
+        {% endautoescape %}
+        </ol>
+    </div>
+</div>
 <script type="text/javascript">
-    var activeExhibit = {{ active }};
-    var images = new Array();
-
-    function switchExhibit() {
-        var tags = document.getElementsByClassName('exhibit-container');
-        var nExhibits = tags.length;
-        activeExhibit = (activeExhibit + 1) % nExhibits;
-        for (var i in tags) {
-            if (i == activeExhibit) {
-                tags[i].classList.add('enabled');
-            }
-            else {
-                tags[i].classList.remove('enabled');
-            }
-        }
-        setTimeout(switchExhibit, 10000);
-    };
-
-    function preLoadBanners() {
-        for (var i = 0; i < preLoadBanners.arguments.length; i++) {
-            images[i] = new Image()
-            images[i].src = preLoadBanners.arguments[i]
-        }
-    }
-
-    window.onload = function() {
-        preLoadBanners({% for exhibit in exhibits %}"{{ exhibit.banner_url }}"{% if not forloop.last %}, {% endif %}{% endfor %});
-        setTimeout(switchExhibit, 10000);
-    }
+YUI({combine: true, comboBase: '{% url wc-combo %}?', root: 'yui/3.4.0/build/'}).use('uwc-carousel', function(Y) {
+    var caro = new Y.uwc.Carousel({
+        nodeContainer: "#carousel",
+        containerHeight: 200,
+        containerWidth: 912,
+        autoPlay: true
+    });
+    Y.all('.slide').removeClass('disabled');
+});
 </script>
-
-{% autoescape off %}
-{% for exhibit in exhibits %}
-<div class="exhibit-container{% ifequal forloop.counter0 active %} enabled{% endifequal %}">
-    <a href="{{ exhibit.destination_url }}">
-{{ exhibit.html }}
-    </a>
-</div>
-{% endfor %}
-{% endautoescape %}
\ No newline at end of file

=== modified file 'src/webcatalog/templates/webcatalog/index.html'
--- src/webcatalog/templates/webcatalog/index.html	2012-03-01 22:41:05 +0000
+++ src/webcatalog/templates/webcatalog/index.html	2012-03-06 17:02:19 +0000
@@ -5,6 +5,12 @@
 {% block header %}{% trans "Ubuntu Apps Directory" %}{% endblock %}
 {% block search %}{% endblock %}
 
+{% block head_extra %}
+    <link rel="stylesheet" type="text/css" href="{% url wc-combo %}?light/css/reset.css&light/css/styles.css&css/webcatalog.css&light/css/forms.css&css/carousel.css"/>
+    <script src="{% url wc-combo %}?yui/3.4.0/build/yui/yui-min.js&js/carousel.js"></script>
+{% endblock %}
+
+
 {% block content %}
 
 {% if exhibits %}

=== modified file 'src/webcatalog/tests/test_views.py'
--- src/webcatalog/tests/test_views.py	2012-03-05 17:41:06 +0000
+++ src/webcatalog/tests/test_views.py	2012-03-06 17:02:19 +0000
@@ -419,17 +419,7 @@
 
         response = self.client.get(reverse('wc-index'))
 
-        self.assertContains(response, '<div class="exhibit-container',
-            count=1)
-
-    def test_only_one_exhibit_enabled(self):
-        for i in range(3):
-            self.factory.make_exhibit(published=True)
-
-        response = self.client.get(reverse('wc-index'))
-
-        self.assertContains(response,
-            '<div class="exhibit-container enabled">', count=1)
+        self.assertContains(response, '<li class="slide', count=1)
 
 
 class OverviewTestCase(TestCaseWithFactory):

=== modified file 'src/webcatalog/views.py'
--- src/webcatalog/views.py	2012-03-05 17:41:06 +0000
+++ src/webcatalog/views.py	2012-03-06 17:02:19 +0000
@@ -24,7 +24,7 @@
 
 import operator
 import os
-from random import randint
+from random import shuffle
 from urllib import urlencode
 
 from convoy.combo import combine_files, parse_qs
@@ -114,13 +114,13 @@
 def index(request):
     depts = Department.objects.filter(parent=None).order_by('name')
     depts = depts.order_by('name')
-    exhibits = Exhibit.objects.filter(Q(display=True) |
-        Q(display=None, published=True,))
+    exhibits = list(Exhibit.objects.filter(Q(display=True) |
+        Q(display=None, published=True,)))
+    shuffle(exhibits)
 
     context = RequestContext(request, dict={
         'depts': depts,
         'exhibits': exhibits,
-        'active': randint(0, max(exhibits.count() - 1, 1)),
     })
     return render_to_response('webcatalog/index.html',
         context_instance=context)
@@ -217,7 +217,7 @@
             content_type = "text/javascript"
         elif fnames[0].endswith(".css"):
             content_type = "text/css"
-        content = combine_files(fnames, os.path.abspath(settings.STATIC_ROOT),
+        content = combine_files(fnames, os.path.abspath(settings.CONVOY_ROOT),
               resource_prefix=settings.MEDIA_URL, rewrite_urls=True)
         # We're turning the generator returned by combine_files into a string
         # here since GZipMiddleware would consume it if not. See Bug #822888.