Improved drag-and-drop. Added ontologies for edges
authorveltr
Wed, 27 Feb 2013 19:04:36 +0100
changeset 68 803dbeb7c919
parent 67 d341117f9370
child 69 f0873867143a
Improved drag-and-drop. Added ontologies for edges
client/css/renkan.css
client/data/properties.json
client/js/i18n.js
client/js/ldtjson-bin.js
client/js/main.js
client/js/models.js
client/js/paper-renderer.js
client/js/twitter-bin.js
client/js/wikipedia-bin.js
client/render-test.html
--- a/client/css/renkan.css	Tue Feb 26 19:04:37 2013 +0100
+++ b/client/css/renkan.css	Wed Feb 27 19:04:36 2013 +0100
@@ -213,7 +213,7 @@
     display: block; float: right; width: 18px; height: 17px; margin: 1px 0; border: none; background: url(../img/goto.png);
 }
 
-.Rk-Edit-Title, .Rk-Edit-URI, .Rk-Edit-Image, .Rk-Edit-Image-File {
+.Rk-Edit-Title, .Rk-Edit-URI, .Rk-Edit-Image, .Rk-Edit-Image-File, .Rk-Edit-Vocabulary {
     font-size: 12px; width: 225px;
 }
 
@@ -275,6 +275,14 @@
     width: 20px;
 }
 
+.Rk-Edit-Vocabulary-Class {
+	color: #999999; font-style: italic; font-weight: bold;
+}
+
+.Rk-Edit-Vocabulary-Property {
+	padding-left: 20px;
+}
+
 .Rk-ZoomButtons {
     position: absolute; left: 0; top: 0; cursor: pointer;
 }
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/data/properties.json	Wed Feb 27 19:04:36 2013 +0100
@@ -0,0 +1,60 @@
+[
+	{
+		"label": "Dublin Core Metadata",
+		"base-uri": "http://purl.org/dc/elements/1.1/",
+		"properties": [
+			{
+				"uri": "contributor",
+				"label": "has contributor"
+			}, {
+				"uri": "coverage",
+				"label": "covers"
+			}, {
+				"uri": "creator",
+				"label": "created by"
+			}, {
+				"uri": "date",
+				"label": "has date"
+			}, {
+				"uri": "publisher",
+				"label": "published by"
+			}, {
+				"uri": "source",
+				"label": "has source"
+			}, {
+				"uri": "subject",
+				"label": "has subject"
+			}
+		]
+	}, {
+		"label": "SKOS Documentation properties",
+		"base-uri": "http://www.w3.org/2004/02/skos/core#",
+		"properties": [
+			{
+				"uri": "note",
+				"label": "has note"
+			}, {
+				"uri": "definition",
+				"label": "has definition"
+			}, {
+				"uri": "example",
+				"label": "has example"
+			}
+		]
+	}, {
+		"label": "SKOS Semantic relations",
+		"base-uri": "http://www.w3.org/2004/02/skos/core#",
+		"properties": [
+			{
+				"uri": "broader",
+				"label": "has broader"
+			}, {
+				"uri": "narrower",
+				"label": "has narrower"
+			}, {
+				"uri": "related",
+				"label": "has related"
+			}
+		]
+	}
+]
--- a/client/js/i18n.js	Tue Feb 26 19:04:37 2013 +0100
+++ b/client/js/i18n.js	Wed Feb 27 19:04:36 2013 +0100
@@ -38,6 +38,27 @@
         "Do you really wish to remove edge ": "Voulez-vous réellement supprimer le lien ",
         "This file is not an image": "Ce fichier n'est pas une image",
         "Image size must be under ": "L'image doit peser moins de ",
-        "KB": "ko"
+        "KB": "ko",
+        "Choose from vocabulary:": "Choisir dans un vocabulaire :",
+        "SKOS Documentation properties": "SKOS: Propriétés documentaires",
+        "has note": "a pour note",
+        "has example": "a pour exemple",
+        "has definition": "a pour définition",
+        "SKOS Semantic relations": "SKOS: Relations sémantiques",
+        "has broader": "a pour concept plus large",
+        "has narrower": "a pour concept plus étroit",
+        "has related": "a pour concept apparenté",
+        "Dublin Core Metadata": "Métadonnées Dublin Core",
+        "has contributor": "a pour contributeur",
+        "covers": "couvre",
+        "created by": "créé par",
+        "has date": "a pour date",
+        "published by": "édité par",
+        "has source": "a pour source",
+        "has subject": "a pour sujet",
+        "Dragged resource": "Ressource glisée-déposée",
+        "Search the Web": "Rechercher en ligne",
+        "Search in Bins": "Rechercher dans les chutiers",
+        "(untitled)": "(sans titre)"
     }
 }
--- a/client/js/ldtjson-bin.js	Tue Feb 26 19:04:37 2013 +0100
+++ b/client/js/ldtjson-bin.js	Wed Feb 27 19:04:36 2013 +0100
@@ -3,12 +3,12 @@
 Rkns.Ldt.ProjectBin = Rkns.Utils.inherit(Rkns._BaseBin);
 
 Rkns.Ldt.ProjectBin.prototype.tagTemplate = Rkns._.template(
-    '<li class="Rk-Bin-Item" data-image="<%-static_url%>img/ldt-tag.png" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/search/?search=<%=encodedtitle%>&field=all" data-title="<%-title%>" data-description="Tag \'<%-title%>\'">'
+    '<li class="Rk-Bin-Item" draggable="true" data-image="<%-static_url%>img/ldt-tag.png" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/search/?search=<%=encodedtitle%>&field=all" data-title="<%-title%>" data-description="Tag \'<%-title%>\'">'
     + '<img class="Rk-Ldt-Tag-Icon" src="<%-static_url%>img/ldt-tag.png" /><h4><%=htitle%></h4><div class="Rk-Clear"></div></li>'
 );
 
 Rkns.Ldt.ProjectBin.prototype.annotationTemplate = Rkns._.template(
-    '<li class="Rk-Bin-Item" data-image="<%=image%>" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/player/<%=mediaid%>/#id=<%=annotationid%>" data-title="<%-title%>" data-description="<%-description%>">'
+    '<li class="Rk-Bin-Item" draggable="true" data-image="<%=image%>" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/player/<%=mediaid%>/#id=<%=annotationid%>" data-title="<%-title%>" data-description="<%-description%>">'
     + '<img class="Rk-Ldt-Annotation-Icon" src="<%=image%>"/><h4><%=htitle%></h4><p><%=hdescription%></p><p>Start: <%=start%>, End: <%=end%>, Duration: <%=duration%></p><div class="Rk-Clear"></div></li>'
 );
 
@@ -149,7 +149,7 @@
 Rkns.Ldt.ResultsBin = Rkns.Utils.inherit(Rkns._BaseBin);
 
 Rkns.Ldt.ResultsBin.prototype.segmentTemplate = Rkns._.template(
-    '<li class="Rk-Bin-Item" data-image="<%=image%>" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/player/<%=mediaid%>/<%=projectid%>/<%=cuttingid%>/#id=<%=annotationid%>" data-title="<%-title%>" data-description="<%-description%>">'
+    '<li class="Rk-Bin-Item" draggable="true" data-image="<%=image%>" data-uri="<%=ldt_platform%>ldtplatform/ldt/front/player/<%=mediaid%>/#id=<%=annotationid%>" data-title="<%-title%>" data-description="<%-description%>">'
     + '<img class="Rk-Ldt-Annotation-Icon" src="<%=image%>"/><h4><%=htitle%></h4><p><%=hdescription%></p><p>Start: <%=start%>, End: <%=end%>, Duration: <%=duration%></p><div class="Rk-Clear"></div></li>'
 );
 
@@ -168,9 +168,12 @@
         var rxbase = searchstr.replace(/(\W)/g,'\\$1'),
             _rgxp = new RegExp('('+rxbase+')','gi'),
             rxtest = new RegExp(rxbase,'i')
+    } else {
+    	var rxbase = this.search.replace(/(\W)/g,'\\$1'),
+            _rgxp = new RegExp('('+rxbase+')','gi');
     }
     function highlight(_text) {
-        return searchstr ? _text.replace(_rgxp, "<span class='searchmatch'>$1</span>") : _text;
+        return _text.replace(_rgxp, "<span class='searchmatch'>$1</span>");
     }
     function convertTC(_ms) {
         function pad(_n) {
@@ -220,8 +223,8 @@
             end: convertTC(_end),
             duration: convertTC(_duration),
             mediaid: _segment.iri_id,
-            projectid: _segment.project_id,
-            cuttingid: _segment.cutting_id,
+            //projectid: _segment.project_id,
+            //cuttingid: _segment.cutting_id,
             annotationid: _segment.element_id,
             image: _img
         });
--- a/client/js/main.js	Tue Feb 26 19:04:37 2013 +0100
+++ b/client/js/main.js	Wed Feb 27 19:04:36 2013 +0100
@@ -26,6 +26,8 @@
 
 Rkns._ = _;
 
+Rkns.VERSION = '0.2';
+
 Rkns.pickerColors = ["#8f1919", "#a80000", "#d82626", "#ff0000", "#e87c7c", "#ff6565", "#f7d3d3", "#fecccc", "#8f5419", "#a85400", "#d87f26", "#ff7f00", "#e8b27c", "#ffb265", "#f7e5d3", "#fee5cc", "#8f8f19", "#a8a800", "#d8d826", "#feff00", "#e8e87c", "#feff65", "#f7f7d3", "#fefecc", "#198f19", "#00a800", "#26d826", "#00ff00", "#7ce87c", "#65ff65", "#d3f7d3", "#ccfecc", "#198f8f", "#00a8a8", "#26d8d8", "#00feff", "#7ce8e8", "#65feff", "#d3f7f7", "#ccfefe", "#19198f", "#0000a8", "#2626d8", "#0000ff", "#7c7ce8", "#6565ff", "#d3d3f7", "#ccccfe", "#8f198f", "#a800a8", "#d826d8", "#ff00fe", "#e87ce8", "#ff65fe", "#f7d3f7", "#feccfe", "#000000", "#242424", "#484848", "#6d6d6d", "#919191", "#b6b6b6", "#dadada", "#ffffff"];
 
 Rkns._BaseBin = function(_renkan, _opts) {
@@ -87,6 +89,8 @@
 /* Point of entry */
 
 Rkns.Renkan = function(_opts) {
+    var _this = this;
+    
     if (typeof _opts.language !== "string" || typeof Rkns.i18n[_opts.language] == "undefined") {
         _opts.language = "en";
     }
@@ -108,10 +112,22 @@
     if (typeof _opts.read_only !== "boolean") {
         _opts.read_only = false;
     }
+    if (typeof _opts.properties !== "object") {
+    	_opts.properties = [];
+    }
+    if (typeof _opts.property_files === "object") {
+    	Rkns._(_opts.property_files).each(function(f) {
+    		Rkns.$.getJSON(f, function(data) {
+    			_this.properties = _this.properties.concat(data);
+    		});
+    	});
+    }
     this.project = new Rkns.Models.Project();
     this.language = _opts.language;
     this.static_url = _opts.static_url;
+    this.show_bins = _opts.show_bins;
     this.read_only = _opts.read_only;
+    this.properties = _opts.properties;
     this.translate = function(_text) {
     	return (Rkns.i18n[_opts.language] || Rkns.i18n[_opts.language.substr(0,2)] || {})[_text] || _text;
     }
@@ -121,19 +137,13 @@
     this.$ = Rkns.$("#" + _opts.container);
     this.$
         .addClass("Rk-Main")
-        .html(this.template(_opts));
+        .html(this.template(this));
     this.renderer = new Rkns.Renderer.Scene(this);
     this.tabs = [];
     this.search_engines = [];
-    this.selected_bin_item = undefined;
 
     this.current_user_list = new Rkns.Models.UsersList();
     
-    var _this = this;
-    this.$.mouseup(function() {
-        _this.selected_bin_item = undefined;
-        _this.$.find(".Rk-Bin-Item.dragging").removeClass("dragging");
-    });
     if (!_opts.search.length) {
         this.$.find(".Rk-Web-Search-Form").detach();
     } else {
@@ -185,19 +195,6 @@
                 _this.$.find(".Rk-Bin-Main").slideUp();
                 _mainDiv.slideDown();
             }
-        }).on("mousedown", ".Rk-Bin-Item", function() {
-            if (_this.read_only) {
-                return false;
-            }
-            var _t = Rkns.$(this);
-            _t.addClass("dragging");
-            _this.selected_bin_item = {
-                uri : $(_t).attr("data-uri"),
-                title : $(_t).attr("data-title"),
-                description : $(_t).attr("data-description"),
-                image: $(_t).attr("data-image")
-            }
-            return false;
         }).on("mouseover", ".Rk-Bin-Item", function(_e) {
             var _t = Rkns.$(this);
             if (_t && $(_t).attr("data-uri")) {
@@ -210,6 +207,12 @@
             }
         }).mouseout(function() {
             _this.renderer.unhighlightAll();
+        }).on("dragstart", ".Rk-Bin-Item", function(e) {
+            var _t = Rkns.$(this);
+        	e.originalEvent.dataTransfer.setData("text/x-iri-title",$(_t).attr("data-title"));
+        	e.originalEvent.dataTransfer.setData("text/x-iri-description",$(_t).attr("data-description"));
+        	e.originalEvent.dataTransfer.setData("text/x-iri-uri",$(_t).attr("data-uri"));
+        	e.originalEvent.dataTransfer.setData("text/x-iri-image",$(_t).attr("data-image"));
         });
     Rkns.$(window).resize(function() {
         _this.resizeBins();
@@ -227,11 +230,11 @@
 }
 
 Rkns.Renkan.prototype.template = Rkns._.template(
-    '<% if (show_bins) { %><div class="Rk-Title"><h1>Hyper Plateau</h1></div><div class="Rk-Bins">'
-    + '<form class="Rk-Web-Search-Form Rk-Search-Form"><input class="Rk-Web-Search-Input Rk-Search-Input" type="search" placeholder="Search the Web" />'
+    '<% if (show_bins) { %><div class="Rk-Title"><h1><%- translate("Renkan") %></h1></div><div class="Rk-Bins">'
+    + '<form class="Rk-Web-Search-Form Rk-Search-Form"><input class="Rk-Web-Search-Input Rk-Search-Input" type="search" placeholder="<%- translate("Search the Web") %>" />'
     + '<div class="Rk-Search-Select"><div class="Rk-Search-Current"></div><ul class="Rk-Search-List"></ul></div>'
     + '<input type="submit" value="" class="Rk-Web-Search-Submit Rk-Search-Submit" /></form>'
-    + '<form class="Rk-Bins-Search-Form Rk-Search-Form"><input class="Rk-Bins-Search-Input Rk-Search-Input" type="search" placeholder="Search in Bins" />'
+    + '<form class="Rk-Bins-Search-Form Rk-Search-Form"><input class="Rk-Bins-Search-Input Rk-Search-Input" type="search" placeholder="<%- translate("Search in Bins") %>" />'
     + '<input type="submit" value="" class="Rk-Bins-Search-Submit Rk-Search-Submit" /></form>'
     + '<ul class="Rk-Bin-List"></ul></div><% } %><div class="Rk-Render Rk-Render-<% if (show_bins) { %>Panel<% } else { %>Full<% } %>"></div>'
 );
--- a/client/js/models.js	Tue Feb 26 19:04:37 2013 +0100
+++ b/client/js/models.js	Wed Feb 27 19:04:36 2013 +0100
@@ -22,7 +22,7 @@
             
             if (typeof options !== "undefined") {
                 options._id = options._id || options.id || Models.getUID(this);
-                options.title = options.title || "(untitled " + this.type + ")";
+                options.title = options.title || "";
                 options.description = options.description || "";
                 options.uri = options.uri || "";
                 
--- a/client/js/paper-renderer.js	Tue Feb 26 19:04:37 2013 +0100
+++ b/client/js/paper-renderer.js	Wed Feb 27 19:04:36 2013 +0100
@@ -288,8 +288,9 @@
             this.node_image.position = this.paper_coords;
         }
     }
+    this.last_circle_radius = this.circle_radius;
     
-    this.title.content = this.model.get("title");
+    this.title.content = this.model.get("title") || this.renderer.renkan.translate("(untitled)");
     this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
     this.circle.strokeColor = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
     this.edit_button.moveTo(this.paper_coords);
@@ -304,9 +305,9 @@
                 _this.node_image.remove();
             }
             _this.renderer.node_layer.activate();
-            var _ratio = Math.min(1, 2 * _this.circle_radius / _image.width, 2 * _this.circle_radius / _image.height );
+            var _ratio = Math.min(2 / _image.width, 2 / _image.height );
             var _raster = new paper.Raster(_image);
-            var _clip = new paper.Path.Circle([0, 0], _this.circle_radius);
+            var _clip = new paper.Path.Circle([0, 0], 1);
             _raster.scale(_ratio);
             _this.node_image = new paper.Group(_clip, _raster);
             _this.node_image.opacity = .9;
@@ -314,8 +315,11 @@
              * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug).
             */
             _this.node_image.clipped = true;
-            _this.node_image.position = _this.paper_coords;
             _this.node_image.__representation = _this;
+		    var square = new paper.Size(_this.circle_radius, _this.circle_radius),
+		    	topleft = _this.paper_coords.subtract(square),
+		    	bounds = new paper.Rectangle(topleft, square.multiply(2));
+		    _this.node_image.fitBounds(bounds);
             _clip.__representation = _this;
             paper.view.draw();
         }
@@ -655,10 +659,10 @@
     + '<p><label><%-translate("Description:")%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'
     + '<p><span class="Rk-Editor-Label"><%-translate("Size:")%></span><a href="#" class="Rk-Edit-Size-Down">-</a><span class="Rk-Edit-Size-Value"><%=node.size%></span><a href="#" class="Rk-Edit-Size-Up">+</a></p>'
     + '<div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-translate("Node color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%=node.color%>;"><span class="Rk-Edit-ColorTip"></span></span><ul class="Rk-Edit-ColorPicker">'
-    + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "<li data-color=\'" + c + "\' style=\'background: " + c + "\'></li>"},"")); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'
+    + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'
     + '<img class="Rk-Edit-ImgPreview" src="<%=node.image || node.image_placeholder%>" />'
     + '<p><label><%-translate("Image URL:")%></label><input class="Rk-Edit-Image" type="text" value="<%=node.image%>"/></p>'
-    + '<p><label><%-translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file"/></p>'    
+    + '<p><label><%-translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p>'    
     + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span> <span class="Rk-UserColor" style="background:<%=node.created_by_color%>;"></span><%=node.created_by_title%></p>'
 );
 
@@ -752,6 +756,7 @@
         	var _newsize = n+(_model.get("size") || 0);
         	_this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize);
         	_model.set("size", _newsize);
+			paper.view.draw();
         }
         
         this.editor_$.find(".Rk-Edit-Size-Down").click(function() {
@@ -807,8 +812,13 @@
     '<h2><span class="Rk-CloseX">&times;</span><%-translate("Edit Edge")%></span></h2>'
     + '<p><label><%-translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%=edge.title%>"/></p>'
     + '<p><label><%-translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%=edge.uri%>"/><a class="Rk-Edit-Goto" href="<%=edge.uri%>" target="_blank"></a></p>'
+    + '<% if (properties.length) { %><p><label><%-translate("Choose from vocabulary:")%></label><select class="Rk-Edit-Vocabulary">'
+    + '<% _(properties).each(function(ontology) { %><option class="Rk-Edit-Vocabulary-Class" value=""><%- translate(ontology.label) %></option>'
+    + '<% _(ontology.properties).each(function(property) { var uri = ontology["base-uri"] + property.uri; %><option class="Rk-Edit-Vocabulary-Property" value="<%- uri %>'
+    + '"<% if (uri === edge.uri) { %> selected<% } %>><%- translate(property.label) %></option>'
+    + '<% }) %><% }) %></select></p><% } %>'
     + '<div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-translate("Edge color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%=edge.color%>;"><span class="Rk-Edit-ColorTip"></span></span><ul class="Rk-Edit-ColorPicker">'
-    + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "<li data-color=\'" + c + "\' style=\'background: " + c + "\'></li>"},"")); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'
+    + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'
     + '<p><span class="Rk-Editor-Label"><%-translate("From:")%></span><span class="Rk-UserColor" style="background:<%=edge.from_color%>;"></span><%=edge.from_title%></p>'
     + '<p><span class="Rk-Editor-Label"><%-translate("To:")%></span><span class="Rk-UserColor" style="background:<%=edge.to_color%>;"></span><%=edge.to_title%></p>'
     + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%=edge.created_by_color%>;"></span><%=edge.created_by_title%></p>'
@@ -843,7 +853,8 @@
                 created_by_color: _created_by.get("color"),
                 created_by_title: _created_by.get("title")
             },
-            translate: this.renderer.renkan.translate
+            translate: this.renderer.renkan.translate,
+            properties: this.renderer.renkan.properties
         }));
     this.redraw();
     var _this = this;
@@ -861,11 +872,21 @@
 	                uri: _this.editor_$.find(".Rk-Edit-URI").val()
 	            }
 	            _model.set(_data);
-	            _this.redraw();
+	            _this.edge_representation.redraw();
+	            paper.view.draw();
     		}).defer();
     	}).throttle(500);
     	
-        this.editor_$.find("input, textarea").bind("keyup change paste", onFieldChange);
+        this.editor_$.find("input").bind("keyup change paste", onFieldChange);
+        this.editor_$.find(".Rk-Edit-Vocabulary").change(function() {
+        	var e = $(this),
+        		v = e.val();
+        	if (v) {
+        		_this.editor_$.find(".Rk-Edit-Title").val(e.find(":selected").text());
+        		_this.editor_$.find(".Rk-Edit-URI").val(v);
+        		onFieldChange();
+        	}
+        });
         this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
             function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
             function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
@@ -1177,9 +1198,6 @@
     this.canvas_$.dblclick(function(_event) {
         _this.onDoubleClick(_event);
     });
-    this.canvas_$.mouseenter(function(_event) {
-        _this.onMouseEnter(_event);
-    });
     this.canvas_$.on("dragover", function(_event) {
     	_event.stopPropagation();
     	_event.preventDefault();
@@ -1199,6 +1217,7 @@
     		var snippet = Rkns.$('<div>').html(res["text/html"]);
     		newNode.image = snippet.find("img").attr("src") || '';
     		newNode.uri = snippet.find("a").attr("href");
+    		newNode.title = snippet.find("[title]").attr("title");
     	}
     	if (res["text/uri-list"]) {
     		newNode.uri = res["text/uri-list"];
@@ -1209,8 +1228,14 @@
     			newNode.title = "";
     		}
     	}
+    	var fields = ["title", "description", "uri", "image"];
+    	for (var i = 0; i < fields.length; i++) {
+    		var f = fields[i];
+    		if (res["text/x-iri-" + f]) {
+    			newNode[f] = res["text/x-iri-" + f];
+    		}
+    	}
     	if (newNode.title || newNode.description || newNode.uri) {
-    		console.log(newNode);
     		var _off = _this.canvas_$.offset(),
             _point = new paper.Point([
                 _event.originalEvent.pageX - _off.left,
@@ -1658,31 +1683,3 @@
     }
     paper.view.draw();
 }
-
-Rkns.Renderer.Scene.prototype.onMouseEnter = function(_event) {
-    var _newEl = this.renkan.selected_bin_item;
-    if (_newEl && !this.renkan.read_only) {
-        var _off = this.canvas_$.offset(),
-            _point = new paper.Point([
-                _event.pageX - _off.left,
-                _event.pageY - _off.top
-            ]),
-            _coords = this.toModelCoords(_point),
-            _data = {
-                id: Rkns.Utils.getUID('node'),
-                created_by: this.renkan.current_user,
-                uri: _newEl.uri,
-                title: _newEl.title,
-                description: _newEl.description,
-                image: _newEl.image,
-                position: {
-                    x: _coords.x,
-                    y: _coords.y
-                }
-            };
-        var _node = this.renkan.project.addNode(_data);
-        this.renkan.selected_bin_item = null;
-        this.is_dragging = true;
-        this.click_target = this.getRepresentationByModel(_node);
-    }
-}
\ No newline at end of file
--- a/client/js/twitter-bin.js	Tue Feb 26 19:04:37 2013 +0100
+++ b/client/js/twitter-bin.js	Wed Feb 27 19:04:36 2013 +0100
@@ -25,7 +25,7 @@
 Rkns.Twitter.Bin = Rkns.Utils.inherit(Rkns._BaseBin);
 
 Rkns.Twitter.Bin.prototype.tweetTemplate = Rkns._.template(
-    '<li class="Rk-Twitter-Tweet Rk-Bin-Item" data-uri="http://twitter.com/<%=tweet.from_user%>/status/<%=tweet.id_str%>" '
+    '<li class="Rk-Twitter-Tweet Rk-Bin-Item" draggable="true" data-uri="http://twitter.com/<%=tweet.from_user%>/status/<%=tweet.id_str%>" '
     + 'data-title="Tweet by @<%=tweet.from_user%>" data-description="<%-tweet.text%>" data-image="<%=tweet.profile_image_url%>">'
     + '<img class="Rk-Twitter-TwImage" src="<%=tweet.profile_image_url%>" />'
     + '<h4 class="Rk-Twitter-TwTitle"><a href="http://twitter.com/<%=tweet.from_user%>" target="_blank">@<%=tweet.from_user%></a> (<%=tweet.from_user_name%>)</h4>'
--- a/client/js/wikipedia-bin.js	Tue Feb 26 19:04:37 2013 +0100
+++ b/client/js/wikipedia-bin.js	Wed Feb 27 19:04:36 2013 +0100
@@ -35,7 +35,7 @@
 Rkns.Wikipedia.Bin = Rkns.Utils.inherit(Rkns._BaseBin);
 
 Rkns.Wikipedia.Bin.prototype.resultTemplate = Rkns._.template(
-    '<li class="Rk-Wikipedia-Result Rk-Bin-Item" data-uri="<%-url%>" '
+    '<li class="Rk-Wikipedia-Result Rk-Bin-Item" draggable="true" data-uri="<%-url%>" '
     + 'data-title="Wikipedia: <%-title%>" data-description="<%-description%>" data-image="<%-static_url%>img/wikipedia.png">'
     + '<img class="Rk-Wikipedia-Icon" src="<%-static_url%>img/wikipedia.png"></div><h4 class="Rk-Wikipedia-Title"><a href="<%-url%>" target="_blank"><%=htitle%></a></h4>'
     + '<p class="Rk-Wikipedia-Snippet"><%=hdescription%></p></li>'
--- a/client/render-test.html	Tue Feb 26 19:04:37 2013 +0100
+++ b/client/render-test.html	Wed Feb 27 19:04:36 2013 +0100
@@ -47,6 +47,7 @@
                             type: Rkns.Twitter.Search
                         }
                     ],
+                    property_files: [ "data/properties.json" ],
                     user_id: "u-iri",
                     language: "fr"
                 });