Merge lp:~daker/loco-team-portal/picasa-plugin into lp:loco-team-portal

[Adnane Belmadiaf]

Added picasa jQuery plugin.

[Chris Johnston (cjohnston)]

Looks good.. I still want to talk about moving it out like twidenash at some point for other developers to use.

review: Approve

[Tarmac WebDev (tarmac-webdev)]

Attempt to merge into lp:loco-directory failed due to conflicts:

text conflict in loco_directory/media/css/newstyle.css

[lp:~daker/loco-team-portal/picasa-plugin]

455. By Adnane Belmadiaf on 2011-07-17

* Fixed merge conflicts in newstyle.css

=== modified file 'loco_directory/media/css/newstyle.css'
--- loco_directory/media/css/newstyle.css	2011-07-15 23:16:10 +0000
+++ loco_directory/media/css/newstyle.css	2011-07-17 11:46:43 +0000
@@ -591,7 +591,7 @@
     margin: 0.5em 0;
 }
 
-.teams-legend{
+.teams-legend {
     width:50%;
     padding:5px 0;
     margin:5px 25% 0;
@@ -601,3 +601,27 @@
     box-shadow:0 1px 1px  #DFDFDF;
     border-radius:8px;
 }
+
+/* Team photos feed */
+div#flickr, div#picasa, div#pixie {
+    width:100%;
+}
+
+div#flickr a.lightbox img {
+    border: 5px solid #b3aaa4;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+div#picasa a.lightbox img {
+    border: 5px solid #b3aaa4;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+div#pixie a.lightbox img {
+    border: 5px solid #b3aaa4;
+    margin-left: 5px;
+    margin-right: 5px;
+
+}

=== added file 'loco_directory/media/js/jquery-picasa.js'
--- loco_directory/media/js/jquery-picasa.js	1970-01-01 00:00:00 +0000
+++ loco_directory/media/js/jquery-picasa.js	2011-07-17 11:46:43 +0000
@@ -0,0 +1,69 @@
+/*
+ * jQuery Picasa plugin 0.1.0 (Based on jQuery Flickr plugin)
+ * Requires jQuery 1.4.2
+ *
+ * Copyright 2011, Adnane Belmadiaf <[e-mail]>
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+
+(function ($) {
+    $.fn.extend({   
+        //This is where you write your plugin's name
+        picasa: function (options) {
+            var defaults = {
+                id: null,
+                amount: 16,
+                lightbox_class: 'lightbox'
+            },
+                html_elements = this,
+                data = { 
+                    kind: 'photo',
+                    alt: 'json',
+                    access: 'public',
+                    thumbsize: '72',
+                    hl: 'en_US'
+                };
+            options =  $.extend(defaults, options);
+            
+            function parseResponse(data) {
+                var title = "Untitled";
+                var link = "#";
+                var images = [], image, link;
+                $.each(data.feed.entry, function (i, rPhoto) {
+                    if(rPhoto.media$group.media$content[0].url) {
+                        link = rPhoto.media$group.media$content[0].url;
+                    }
+                    if(rPhoto.media$group.media$content[0].url) {
+                        link = rPhoto.media$group.media$content[0].url;
+                    }
+                    image = $('<img>').attr({
+                        src: rPhoto.media$group.media$content[0].url + '?imgmax=75&crop=1',
+                        alt: rPhoto.media$group.media$title.$t
+                    });
+                    link = $('<a>').addClass(options.lightbox_class).attr({
+                        title: rPhoto.media$group.media$title.$t,
+                        href: rPhoto.media$group.media$content[0].url
+                    }).append(image);
+                    images.push(link);
+                });
+                
+                $(html_elements).each(function (i, html_element) {
+                    var index;
+                    for (index in images) {
+                        if (images.hasOwnProperty(index)) {
+                            $(html_element).append(images[index]);
+                        }
+                    }
+                });
+                // Reinitiale the lightbox with the new photo's
+                $('a.' + options.lightbox_class).lightBox();
+            }
+
+            $.getJSON('http://picasaweb.google.com/data/feed/base/user/' + options.id + '?' + $.param(data) + '&max-results=' + options.amount, parseResponse);
+            
+            // Return the html objects untouched (the photo's are added when loaded)
+            return this;
+        } // End of picasa command
+    });
+}(jQuery));

=== modified file 'loco_directory/media/js/jquery-pixie.js'
--- loco_directory/media/js/jquery-pixie.js	2011-04-01 17:30:56 +0000
+++ loco_directory/media/js/jquery-pixie.js	2011-07-17 11:46:43 +0000
@@ -2,7 +2,7 @@
  * jQuery Pixie plugin 0.1.0 (Based on jQuery Flickr plugin)
  * Requires jQuery 1.4.2
  *
- * Copyright 2011, Adnane Belmadiaf
+ * Copyright 2011, Adnane Belmadiaf <[e-mail]>
  * Dual licensed under the MIT or GPL Version 2 licenses.
  * http://jquery.org/license
  */

=== modified file 'loco_directory/templates/teams/team_detail.html'
--- loco_directory/templates/teams/team_detail.html	2011-06-13 11:17:32 +0000
+++ loco_directory/templates/teams/team_detail.html	2011-07-17 11:46:43 +0000
@@ -4,10 +4,10 @@
 {% block title %}{% trans team.name %} | {% trans "Ubuntu LoCo Team Directory" %} {% endblock %}
 
 {% block sub_nav_links %}
-			<a class="sub-nav-item" href="{% url team-list %}" title="{% trans "Back to Teams List" %}">{% trans "Back to Teams List" %}</a>
-			{% if is_member %}{% else %} <a class="sub-nav-item" href="https://launchpad.net/~{{ team.lp_name }}/+join">{% trans "Join This Team!" %}</a>{% endif %}
-        	{% if is_admin %}<a class="sub-nav-item" href="{% url team-edit team.lp_name %}" title="{% trans "Edit Details" %}">{% trans "Edit Details" %}</a>{% endif %}
-        	{% if is_admin and not team.active %}<a class="sub-nav-item" href="{% url select-other-team team.lp_name %}" title="{% trans "Merge with another team" %}">{% trans "Merge team" %}</a>{% endif %}
+            <a class="sub-nav-item" href="{% url team-list %}" title="{% trans "Back to Teams List" %}">{% trans "Back to Teams List" %}</a>
+            {% if is_member %}{% else %} <a class="sub-nav-item" href="https://launchpad.net/~{{ team.lp_name }}/+join">{% trans "Join This Team!" %}</a>{% endif %}
+            {% if is_admin %}<a class="sub-nav-item" href="{% url team-edit team.lp_name %}" title="{% trans "Edit Details" %}">{% trans "Edit Details" %}</a>{% endif %}
+            {% if is_admin and not team.active %}<a class="sub-nav-item" href="{% url select-other-team team.lp_name %}" title="{% trans "Merge with another team" %}">{% trans "Merge team" %}</a>{% endif %}
             {% if is_member %}<a class="sub-nav-item" href="{% url team-event-new team.lp_name %}" title="{% trans "Add New Event" %}">{% trans "Add New Event" %}</a>{% endif %}
             {% if is_member %}<a class="sub-nav-item" href="{% url team-meeting-new team.lp_name %}" title="{% trans "Add New Meeting" %}">{% trans "Add New Meeting" %}</a>{% endif %}
 {% endblock %}
@@ -17,9 +17,19 @@
 <script type="text/javascript" src="{{MEDIA_URL}}jquery/jquery.js"></script>
 {% if team.flickr_id or team.picasa_id or team.pixie_id %}
 <script type="text/javascript" src="{{MEDIA_URL}}js/jquery.lightbox-0.5.min.js"></script>
+<link rel="stylesheet" href="{{MEDIA_URL}}css/jquery.lightbox-0.5.css" type="text/css" media="screen" />
+{% endif %}
+
+{% if team.flickr_id %}
 <script type="text/javascript" src="{{MEDIA_URL}}js/jquery-flickr.js"></script>
+{% endif %}
+
+{% if team.picasa_id %}
+<script type="text/javascript" src="{{MEDIA_URL}}js/jquery-picasa.js"></script>
+{% endif %}
+
+{% if team.pixie_id %}
 <script type="text/javascript" src="{{MEDIA_URL}}js/jquery-pixie.js"></script>
-<link rel="stylesheet" href="{{MEDIA_URL}}css/jquery.lightbox-0.5.css" type="text/css" media="screen" />
 {% endif %}
 
 <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}/css/twidenash.css" />
@@ -29,36 +39,19 @@
 $(function() {
     var perPage = '16';
     $('.twidenash').twidenash();
-    
+
     {% if team.flickr_id %}
         $('#flickr').flickr({ key: "{{ flickr_api_key }}", id: "{{ team.flickr_id }}", amount: 6 });
     {% endif %}
+
     {% if team.picasa_id %}
-        var picasa_userId = '{{ team.picasa_id }}';
-        $.getJSON('http://picasaweb.google.com/data/feed/base/user/'+ picasa_userId +'?alt=json&kind=photo'+
-         '&access=public&thumbsize=72&max-results=' + perPage + '&hl=en_US&callback=?',
-        function(data) {
-	      $.each(data.feed.entry, function(i,item) {
-                 var altLink = "#";
-	         if(item.media$group.media$content[0].url) {
-		       altLink = item.media$group.media$content[0].url;
-                 }
-	         var title = "Untitled";
-	         if(item.media$group.media$description.$t) {
-		      title = item.media$group.media$description.$t;
-	         }
-	        $("<img/>").attr("src",item.media$group.media$thumbnail[0].url).attr("width",75).attr("height",75).attr("title", title)
-	          .appendTo("#picasa")
-	          .wrap("<a class='lightbox' href='"+item.media$group.media$content[0].url+"'</a>");
-	      });
-             $("a.lightbox").lightBox();
-        });
+        $('#picasa').picasa({ id: "{{ team.picasa_id }}", amount: perPage });
     {% endif %}
-    
+
     {% if team.pixie_id %}
         $('#pixie').pixie({ key: "{{ pixie_api_key }}", id: "{{ team.pixie_id }}", amount: perPage });
     {% endif %}
-    
+
     if ($(location).attr('hash') == "#chat") {
         $('#webchat').show('fast', function() {
             $(window).scrollTop($('#webchat').position().top);
@@ -67,25 +60,7 @@
 });
 </script>
 {% if team.flickr_id or team.picasa_id or team.pixie_id %}
-<style type="text/css"> 
-div#flickr a.lightbox img {
-	border: 5px solid #b3aaa4;
-	margin-left: 5px;
-	margin-right: 5px;
-}
-
-div#picasa a.lightbox img {
-	border: 5px solid #b3aaa4;
-	margin-left: 5px;
-	margin-right: 5px;
-}
-
-div#pixie a.lightbox img {
-	border: 5px solid #b3aaa4;
-	margin-left: 5px;
-	margin-right: 5px;
-}
-</style> 
+
 {% endif %}
 <link type="application/rss+xml" rel="alternate" title="{% trans "Team Events (RSS)" %}" href="{% url team-events-rss team.lp_name %}" />
 {% endblock %}
@@ -227,9 +202,9 @@
     {% with team.name as team_name %}
     <h2>{% blocktrans %}Photos from {{ team_name }}{% endblocktrans %}</h2>
     {% endwith %}
-    <div style="width:100%;" id="flickr"> </div>
-    <div style="width:100%;" id="picasa"> </div> 
-    <div style="width:100%;" id="pixie"> </div> 
+    <div id="flickr"> </div>
+    <div id="picasa"> </div>
+    <div id="pixie"> </div>
 </article>
 {% endif %}