# HG changeset patch
# User cavaliet
# Date 1366648432 -7200
# Node ID 55fc6d4a329ea252effa91a50a964140dced2d43
# Parent  24ba279c68c4c6c8629720454cf3be106f3307b8
Senseetive api : display images on tag hover

diff -r 24ba279c68c4 -r 55fc6d4a329e src/egonomy/static/egonomy/css/egonomy.css
--- a/src/egonomy/static/egonomy/css/egonomy.css	Mon Apr 22 13:18:46 2013 +0200
+++ b/src/egonomy/static/egonomy/css/egonomy.css	Mon Apr 22 18:33:52 2013 +0200
@@ -383,4 +383,14 @@
 }
 .senapi_text {
 	
+}
+#info_tag{
+    background-color: white;
+    border: 1px solid #AAAAAA;
+    pointer-events: none;
+    position: absolute;
+    z-index: 1000;
+}
+#info_tag img{
+    margin: 5px;
 }
\ No newline at end of file
diff -r 24ba279c68c4 -r 55fc6d4a329e src/egonomy/templates/egonomy_create_fragment.html
--- a/src/egonomy/templates/egonomy_create_fragment.html	Mon Apr 22 13:18:46 2013 +0200
+++ b/src/egonomy/templates/egonomy_create_fragment.html	Mon Apr 22 18:33:52 2013 +0200
@@ -39,17 +39,28 @@
                                     	s = '<div id="tabs" style="height: 320px;"><ul><li><a href="#tabs-1">Mots-clés</a></li><li><a href="#tabs-2">Images</a></li></ul>'
                                             + '<div id="tabs-1" style="overflow-y: scroll; overflow-x: hidden; height: 250px;">'
                                             + '<ul id="add_senseetive_tags">';
+                                        var images = data["images"];
+                                        var m = images.length;
                                         for(var i=0;i<n;i++){
-                                            s += '<li><span class="clickable addable_tag">' + keywords[i] + '</span></li>';
+                                        	// We search if images have been tagged with the current tag. 
+                                        	var img_urls = "";
+                                        	for(var j=0;j<m;j++){
+                                        		kws = images[j]["keywords"];
+                                        		var nb_kws = kws.length;
+                                        		for(var k=0;k<nb_kws;k++){
+                                        			if(keywords[i]==kws[k]){
+                                        			    img_urls += ((img_urls=="") ? "" : ",") + images[j].url_height;
+                                        			}
+                                        		}
+                                        	}
+                                            s += '<li><span class="clickable addable_tag" data="' + img_urls + '">' + keywords[i] + '</span></li>';
                                         }
                                         s += '</ul><span id="senseetive_tags" class="right clickable">+ {% trans 'Add all Senseetive keywords to yours' %}</span>'
 	                                        +'</div><div id="tabs-2" style="overflow-y: scroll; overflow-x: hidden; height: 250px;">'
 	                                        +'<ul>';
 	                                    // Add pictures
-	                                    var images = data["images"];
-	                                    var n = images.length;
-	                                    for(var i=0;i<n;i++){
-                                            s += '<li class="senapi_li"><img src="' + images[i].url + '" class="senapi_img" alt="' + images[i].title + '"/><span class="senapi_text">' + images[i].title + '</span></li>';
+	                                    for(var i=0;i<m;i++){
+                                            s += '<li class="senapi_li"><img src="' + images[i].url_width + '" class="senapi_img" alt="' + images[i].title + '"/><span class="senapi_text">' + images[i].title + '</span></li>';
                                         }
 	                                    s += '</ul>'
 	                                        +'</div></div>';
@@ -66,6 +77,23 @@
                                         		addTags([this.textContent]);
                                         	});
                                         });
+                                        // Functions to show tag's images
+                                        $("#senseetive_holder .addable_tag").hover(
+                                        	function(e){
+                                        		urls = $(this).attr("data").split(",");
+                                        		var s = "";
+                                        		var n = urls.length;
+                                        		for(i=0;i<n;i++){
+                                        			s += '<img src="' + urls[i] + '" alt=""/>';
+                                        		}
+                                        		$("#info_tag").html(s);
+                                        		$("#info_tag").css({'top':e.pageY-110,'right':$(window).width()-e.pageX});
+                                        		$("#info_tag").show();
+                                        	},
+                                        	function(e){
+                                        		$("#info_tag").hide();
+                                        	}
+                                        );
                                     }
                                 },
                                 error: function(jqXHR, textStatus, errorThrown) {
@@ -246,5 +274,8 @@
                         </ul>
                     </div>
                 </div>
+                <div id="info_tag" style="display:none;">
+                  <p>coucou</p>
+                </div>
 {% endblock %}
 
diff -r 24ba279c68c4 -r 55fc6d4a329e src/egonomy/views.py
--- a/src/egonomy/views.py	Mon Apr 22 13:18:46 2013 +0200
+++ b/src/egonomy/views.py	Mon Apr 22 18:33:52 2013 +0200
@@ -328,11 +328,12 @@
         # We allow ourselves to loop in a loop because we know images_data has only 10 entries.
         for img in images:
             if img.id==i["id"]:
-                # Get the thumbnail
-                thumb = get_thumbnail(img.image_file, '100', format='PNG', crop='center', quality=99)
-                i["url"] = thumb.url
+                # Get the thumbnail with fixed width
+                i["url_width"] = get_thumbnail(img.image_file, '100', format='PNG', crop='center', quality=99).url
+                # Get the thumbnail with fixed height
+                i["url_height"] = get_thumbnail(img.image_file, 'x100', format='PNG', crop='center', quality=99).url
                 break
-        
+    
     # We sort the keywords by descending score
     keywords = sorted(keywords, key=keywords.get, reverse=True)