Merge lp:~zematynnad/ubuntu-webcatalog/fix_no_enlarger_845911 into lp:ubuntu-webcatalog

[Danny Tamez]

Fix for javascript errors after ajax returns more screenshots for app.

Overview
========
This branch fixes a condition where the screenshot enlarger was not being displayed when screenshots were obtained via ajax.

Details
========
Because the number of screenshots was critical to much of the logic in the screenshots.js page the ajax portion of it was causing some issues when it changed the number of screenshots. For example the setup_carouse function was only defined if there was originally more than one screenshot. So, when via ajax we now had more screenshots the function to set up the carousel was not defined.
So now what the script does is settle at the outset the number of screenshots (via ajax or not) so that the number change happens before any logic that depends on that number.
I also removed a small line of debug code in the html page.

To Run the Tests
=========
$fab bootstrap test

To View the Different Scenarios in the Browser
===============================================
0 screenshots: http://localhost:8000/cat/applications/gstreamer0.10-fluendo-plugins-wmv/
1 screenshot: http://localhost:8000/cat/applications/ubuntu-user-de-issue-201202/
1 screenshot after ajax: http://localhost:8000/cat/applications/skype/
2 or more screenshots: http://localhost:8000/cat/applications/precise/defcon/

=== modified file 'src/webcatalog/static/js/screenshots.js'
--- src/webcatalog/static/js/screenshots.js	2012-05-18 20:40:15 +0000
+++ src/webcatalog/static/js/screenshots.js	2012-05-29 18:49:22 +0000
@@ -1,64 +1,11 @@
 var setup_screenshots = function(num_screenshots, appName, combo_path, ajax_uri) {
     YUI({combine: true, comboBase: combo_path, root: 'yui/3.4.0/build/'}).use('io-base','uwc-carousel', function(Y) {
-
-        Y.on('domready', setupViewerPanel, false);
-        // viewer needs to be setup even if there is only one screenshot and no carousel is used
-        function setupViewerPanel(addedMoreViaAjax) {
-            // don't set up if there are no screenshots
-            if (num_screenshots == 0) {
-                // but do set up if we get called a second time when adding screenshots via ajax
-                if (!addedMoreViaAjax) {
-                    return;
-                }
-            }
-            var panel = new Y.Panel({
-                width: 860,
-                centered: true,
-                zIndex: 50,
-                modal: true,
-                visible: false,
-                render: false,
-                buttons: [
-                    {
-                        value: 'Close',
-                        section: 'footer',
-                        action: function(e) {
-                            e.preventDefault();
-                            panel.hide();
-                        }
-                    }
-                ]
-            });
-            var bb = panel.get('boundingBox');
-            var slides = Y.all('.slide img');
-            slides.on("click", function(e){
-                    var slide = e.currentTarget;
-                    var url = slide.getAttribute('src');
-                    heading = appName + ' - screeshot ';
-                    panel.setStdModContent(Y.WidgetStdMod.HEADER, heading);
-                    panel.setStdModContent(Y.WidgetStdMod.BODY, '<img width="800" src="' + url +'"/>');
-                    panel.render('#viewerPanel');
-                    panel.show();
-                }, this);
-        }
-
-        if (num_screenshots > 1) {
-            function setup_carousel() {
-                var caro = new Y.uwc.Carousel({
-                    nodeContainer: "#screenshots-carousel",
-                    controlsContainer: "#nocontrols",
-                    autoPlay: false,
-                    slideAnimDuration: 0.6
-                });
-                Y.all('.slide').removeClass('disabled');
-            }
-        }
-
         if (num_screenshots == 0) {
             var uri = ajax_uri;
             function complete(id, obj) {
                 var json = JSON.parse(obj.responseText);
-                if (json.length > 1) {
+                num_screenshots = json.length;
+                if (num_screenshots > 0) {
                     var content_div = document.createElement('div');
                     content_div.className = 'carousel-wrapper';
                     var carousel_div = document.createElement('div');
@@ -81,16 +28,62 @@
                     screenshots_div.get('childNodes').remove();
                     screenshots_div.appendChild(content_div);
                     setup_carousel();
-                    setupViewerPanel(true);
-                } else if (json.lenth == 1) {
-                    // in case we only got back 1 from ajax - still need the viewer
-                    setupViewerPanel(true);
-                }
+                    setupViewerPanel();
+                };
             };
             Y.on('io:complete', complete, Y);
             var request = Y.io(uri);
         } else {
             setup_carousel();
+            setupViewerPanel();
+        }
+
+        function setupViewerPanel() {
+            if (num_screenshots == 0) {
+                return;
+            }
+            var panel = new Y.Panel({
+                width: 860,
+                centered: true,
+                zIndex: 50,
+                modal: true,
+                visible: false,
+                render: false,
+                buttons: [
+                    {
+                        value: 'Close',
+                        section: 'footer',
+                        action: function(e) {
+                            e.preventDefault();
+                            panel.hide();
+                        }
+                    }
+                ]
+            });
+            var bb = panel.get('boundingBox');
+            var slides = Y.all('.slide img');
+            slides.on("click", function(e){
+                    var slide = e.currentTarget;
+                    var url = slide.getAttribute('src');
+                    heading = appName + ' - screeshot ';
+                    panel.setStdModContent(Y.WidgetStdMod.HEADER, heading);
+                    panel.setStdModContent(Y.WidgetStdMod.BODY, '<img width="800" src="' + url +'"/>');
+                    panel.render('#viewerPanel');
+                    panel.show();
+                }, this);
+        }
+
+        function setup_carousel() {
+            if (num_screenshots < 2) {
+                return;
+            }
+            var caro = new Y.uwc.Carousel({
+                nodeContainer: "#screenshots-carousel",
+                controlsContainer: "#nocontrols",
+                autoPlay: false,
+                slideAnimDuration: 0.6
+            });
+            Y.all('.slide').removeClass('disabled');
         }
     });
 }

=== modified file 'src/webcatalog/templates/webcatalog/screenshot_widget.html'
--- src/webcatalog/templates/webcatalog/screenshot_widget.html	2012-05-08 17:03:43 +0000
+++ src/webcatalog/templates/webcatalog/screenshot_widget.html	2012-05-29 18:49:22 +0000
@@ -1,5 +1,4 @@
 {% load url from future %}
-<div id='console'></div>
 <div id="screenshots_placeholder">
 {% if application.screenshots|length_is:0 %}
     <img src="http://screenshots.ubuntu.com/thumbnail-with-version/{{ application.package_name }}/ignored" />