--- 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
--- 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 %}
--- 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)