bookmarklet evolution
authorveltr
Fri, 01 Mar 2013 19:14:30 +0100
changeset 70 47b3125130a2
parent 69 f0873867143a
child 71 9af0874ce43f
bookmarklet evolution
client/css/renkan.css
client/js/i18n.js
client/js/main.js
client/js/paper-renderer.js
--- a/client/css/renkan.css	Thu Feb 28 19:13:08 2013 +0100
+++ b/client/css/renkan.css	Fri Mar 01 19:14:30 2013 +0100
@@ -41,6 +41,10 @@
     border: none;
 }
 
+html {
+	overflow: hidden;
+}
+
 body {
     font-size: 10px; font-family: Arial, Helvetica, sans-serif;
     background: #ffffff; color: #000000;
@@ -300,8 +304,18 @@
 	padding-left: 20px;
 }
 
+.Rk-Fold-Bins {
+	position: absolute; top: 5px; width: 12px; text-align: center; font-size: 16px; cursor: pointer;
+	line-height: 16px; padding: 4px; color: #ffffff; background: #666666; border-radius: 0 6px 6px 0;
+	font-weight: bold;
+}
+
+.Rk-Fold-Bins:hover {
+	background: #333333;
+}
+
 .Rk-ZoomButtons {
-    position: absolute; left: 0; top: 0; cursor: pointer;
+    position: absolute; left: 0; top: 35px; cursor: pointer;
 }
 
 .Rk-ZoomIn, .Rk-ZoomOut {
@@ -380,7 +394,7 @@
     width: 180px; margin-left: 15px; font-size: 13px;
     position: absolute; right: 0; top: 25px; background: #ffffff;
     box-shadow: 1px 1px 2px #505050; display: none;
-    border: 1px solid #cccccc;
+    border: 1px solid #cccccc; z-index: 2;
 }
 
 .Rk-Search-List li {
--- a/client/js/i18n.js	Thu Feb 28 19:13:08 2013 +0100
+++ b/client/js/i18n.js	Fri Mar 01 19:14:30 2013 +0100
@@ -60,6 +60,9 @@
         "Dragged resource": "Ressource glisée-déposée",
         "Search the Web": "Rechercher en ligne",
         "Search in Bins": "Rechercher dans les chutiers",
-        "(untitled)": "(sans titre)"
+        "(untitled)": "(sans titre)",
+        "Select contents:": "Sélectionner des contenus :",
+        "Drag items from this website, drop them in Renkan": "Glissez des éléments de ce site web vers Renkan",
+        "Drag this button to your bookmark bar. When on a third-party website, click it to enable drag-and-drop from the website to Renkan.": "Glissez ce bouton vers votre barre de favoris. Ensuite, depuis un site tiers, cliquez dessus pour activer 'Drag-to-Add' puis glissez des éléments de ce site vers Renkan"
     }
 }
--- a/client/js/main.js	Thu Feb 28 19:13:08 2013 +0100
+++ b/client/js/main.js	Fri Mar 01 19:14:30 2013 +0100
@@ -129,9 +129,6 @@
     		});
     	});
     }
-    if (typeof _opts.bookmarklet_url !== "string") {
-        _opts.bookmarklet_url = "js/bookmarklet.js";
-    }
     this.project = new Rkns.Models.Project();
     this.language = _opts.language;
     this.static_url = _opts.static_url;
@@ -139,16 +136,6 @@
     this.read_only = _opts.read_only;
     this.properties = _opts.properties;
     
-    function getAbsoluteURL(url) {
-        var tmp = document.createElement('img');
-        tmp.src = url;
-        var res = tmp.src;
-        tmp.src = null;
-        return res;
-    }
-    
-    this.bookmarklet_url = getAbsoluteURL(_opts.bookmarklet_url);
-    
     this.translate = function(_text) {
     	return (Rkns.i18n[_opts.language] || Rkns.i18n[_opts.language.substr(0,2)] || {})[_text] || _text;
     }
@@ -201,7 +188,7 @@
             function() { _select.slideDown(); }
         );
         this.$.find(".Rk-Search-Select").mouseleave(
-            function() { _select.slideUp(); }
+            function() { _select.hide(); }
         );
         this.setSearchEngine(0);
     }
--- a/client/js/paper-renderer.js	Thu Feb 28 19:13:08 2013 +0100
+++ b/client/js/paper-renderer.js	Fri Mar 01 19:14:30 2013 +0100
@@ -30,6 +30,11 @@
         get: function(attr) {
             return this[attr] || false;
         }
+    },
+    _BOOKMARKLET_CODE: function(_renkan) {
+    	return "(function(a,b,c,d,e,f,h,i,j,l,m,n,o,p,q,r){a=document;b=a.body;c=a.location.href;j='draggable';m='text/x-iri-';d=a.createElement('div');d.innerHTML='<p_style=\"position:fixed;top:0;right:0;font:bold_18px_sans-serif;color:#fff;background:#909;padding:10px;z-index:100000;\">"
+	    + _renkan.translate("Drag items from this website, drop them in Renkan").replace(/ /g,"_")
+	    + "</p>'.replace(/_/g,String.fromCharCode(32));b.appendChild(d);e=[{r:/https?:\\/\\/[^\\/]*twitter\\.com\\//,s:'.tweet',n:'twitter'},{r:/https?:\\/\\/[^\\/]*google\\.[^\\/]+\\//,s:'.g',n:'google'},{r:/^http:\\/\\/ldt\\.iri\\.centrepompidou\\.fr/,s:'.Ldt-AnnotationsList-li,.Ldt-Polemic-TweetDiv,.Ldt-Segments-Segment',n:'ldt'}];f=false;e.forEach(function(g){if(g.r.test(c)){f=g;}});if(f){h=function(){Array.prototype.forEach.call(a.querySelectorAll(f.s),function(i){i[j]=true})};window.setInterval(h,500);h();};a.addEventListener('dragstart',function(k){l=k.dataTransfer;l.setData(m+'source-uri',c);l.setData(m+'source-title',a.title);n=k.target;if(f){o=n;while(!o.attributes[j]){o=o.parentNode;if(o==b){break;}}}if(f&&o.attributes[j]){p=o.cloneNode(true);l.setData(m+'specific-site',f.n)}else{q=a.getSelection();if(q.type==='Range'||!q.type){p=q.getRangeAt(0).cloneContents();}else{p=n.cloneNode();}}r=a.createElement('div');r.appendChild(p);l.setData('text/x-iri-selected-text',r.textContent.trim());l.setData('text/x-iri-selected-html',r.innerHTML);},false);})();"
     }
 }
 
@@ -672,23 +677,23 @@
 
 Rkns.Renderer.NodeEditor.prototype.template = Rkns._.template(
     '<h2><span class="Rk-CloseX">&times;</span><%-translate("Edit Node")%></span></h2>'
-    + '<p><label><%-translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%=node.title%>"/></p>'
-    + '<p><label><%-translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%=node.uri%>"/><a class="Rk-Edit-Goto" href="<%=node.uri%>" target="_blank"></a></p>'
-    + '<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">'
+    + '<p><label><%-translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%-node.title%>"/></p>'
+    + '<p><label><%-translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%-node.uri%>"/><a class="Rk-Edit-Goto" href="<%-node.uri%>" target="_blank"></a></p>'
+    + '<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">'
     + '<% _(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>'
+    + '<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" 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>'
+    + '<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>'
 );
 
 Rkns.Renderer.NodeEditor.prototype.readOnlyTemplate = Rkns._.template(
-    '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%=node.color%>;"></span><%-node.title%></span></h2>'
+    '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%-node.color%>;"></span><%-node.title%></span></h2>'
     + '<p><a href="<%-node.uri%>" target="_blank"><%-node.uri%></a></p>'
     + '<p><%-node.description%></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>'
+    + '<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>'
 );
 
 Rkns.Renderer.NodeEditor.prototype.draw = function() {
@@ -828,27 +833,27 @@
 
 Rkns.Renderer.EdgeEditor.prototype.template = Rkns._.template(
     '<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>'
+    + '<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">'
+    + '<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">'
     + '<% _(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>'
+    + '<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>'
 );
 
 Rkns.Renderer.EdgeEditor.prototype.readOnlyTemplate = Rkns._.template(
-    '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%=edge.color%>;"></span><%- edge.title %></span></h2>'
+    '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%-edge.color%>;"></span><%- edge.title %></span></h2>'
     + '<p><a href="<%-edge.uri%>" target="_blank"><%-edge.uri%></a></p>'
     + '<p><%-edge.description%></p>'
-    + '<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>'
+    + '<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>'
 );
 
 Rkns.Renderer.EdgeEditor.prototype.draw = function() {
@@ -1171,6 +1176,21 @@
 
 /* */
 
+Rkns.Renderer.MiniFrame = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
+
+Rkns.Renderer.MiniFrame.prototype.paperShift = function(_delta) {
+	this.renderer.offset = this.renderer.offset.subtract(_delta.divide(this.renderer.minimap.scale).multiply(this.renderer.scale));
+    this.renderer.resetCoords();
+    this.renderer.redraw();
+}
+
+Rkns.Renderer.MiniFrame.prototype.mouseup = function(_delta) {
+	this.renderer.click_target = null;
+    this.renderer.is_dragging = false;
+}
+
+/* */
+
 Rkns.Renderer.Scene = function(_renkan) {
     this.renkan = _renkan;
     this.$ = Rkns.$(".Rk-Render");
@@ -1203,7 +1223,7 @@
     this.minimap.rectangle.strokeColor = '#cccccc';
     this.minimap.rectangle.strokeWidth = 4;
     this.minimap.offset = new paper.Point(this.minimap.size.divide(2));
-    this.minimap.scale = .25;
+    this.minimap.scale = .1;
     
     this.node_layer.activate();
     this.minimap.cliprectangle = new paper.Path.Rectangle(this.minimap.topleft, this.minimap.size);
@@ -1214,11 +1234,14 @@
     this.minimap.miniframe.fillColor = '#f0f0ff';
     this.minimap.miniframe.strokeColor = '#8080ff';
     this.minimap.miniframe.strokeWidth = 2;
+    this.minimap.miniframe.__representation = new Rkns.Renderer.MiniFrame(this, null);
     
     this.bundles = [];
     this.click_mode = false;
     var _tool = new paper.Tool(),
-        _this = this;
+        _this = this,
+        _allowScroll = true;
+    
     _tool.minDistance = Rkns.Renderer._MIN_DRAG_DISTANCE;
     _tool.onMouseMove = function(_event) {
         _this.onMouseMove(_event);
@@ -1233,7 +1256,9 @@
         _this.onMouseUp(_event);
     });
     this.canvas_$.mousewheel(function(_event, _delta) {
-        _this.onScroll(_event, _delta);
+        if (_allowScroll) {
+        	_this.onScroll(_event, _delta);
+        }
     });
     this.canvas_$.dblclick(function(_event) {
         _this.onDoubleClick(_event);
@@ -1241,10 +1266,17 @@
     this.canvas_$.on("dragover", function(_event) {
     	_event.stopPropagation();
     	_event.preventDefault();
-    })
+    });
+    this.canvas_$.on("dragenter", function(_e) {
+    	_allowScroll = false;
+    });
+    this.canvas_$.on("dragleave", function(_e) {
+    	_allowScroll = true;
+    });
     this.canvas_$.on("drop", function(_event) {
     	_event.stopPropagation();
     	_event.preventDefault();
+    	_allowScroll = true;
     	if (_this.renkan.read_only) {
     		return;
     	}
@@ -1253,29 +1285,82 @@
     		return res[t] = _event.originalEvent.dataTransfer.getData(t);
     	});
     	var newNode = {};
-    	if (res["text/x-iri-source-uri"]) {
-    		newNode.uri = res["text/x-iri-source-uri"];
-    	}
-    	if (res["text/plain"]) {
-    		newNode.description = res["text/plain"].replace(/[\s\n]+/gm,' ').trim();
-    	}
-    	if (res["text/html"]) {
-    		var snippet = Rkns.$('<div>').html(res["text/html"]);
-    		newNode.image = snippet.find("img").attr("src") || '';
-    		newNode.uri = snippet.find("a").attr("href") || newNode.uri;
-    		newNode.title = snippet.find("[title]").attr("title");
-    	}
-    	if (res["text/uri-list"]) {
-    		newNode.uri = res["text/uri-list"];
-    	}
-    	if (res["text/x-moz-url"] && !newNode.title) {
-    		newNode.title = (res["text/x-moz-url"].split("\n")[1] || "").trim();
-    		if (newNode.title === newNode.uri) {
-    			newNode.title = false;
-    		}
-    	}
-    	if (res["text/x-iri-source-title"] && !newNode.title) {
-    		newNode.title = res["text/x-iri-source-title"];
+    	console.log(res);
+    	switch(res["text/x-iri-specific-site"]) {
+    		case "twitter":
+    			var snippet = Rkns.$('<div>').html(res["text/x-iri-selected-html"]),
+    				tweetdiv = snippet.find(".tweet")
+    			newNode.title = _renkan.translate("Tweet by ") + tweetdiv.attr("data-name");
+    			newNode.uri = "http://twitter.com/" + tweetdiv.attr("data-screen-name") + "/status/" + tweetdiv.attr("data-tweet-id");
+    			newNode.image = tweetdiv.find(".avatar").attr("src");
+    			newNode.description = tweetdiv.find(".js-tweet-text:first").text();
+    		break;
+    		case "google":
+    			var snippet = Rkns.$('<div>').html(res["text/x-iri-selected-html"]);
+    			newNode.title = snippet.find("h3:first").text().trim();
+    			newNode.uri = snippet.find("h3 a").attr("href");
+    			newNode.description = snippet.find(".st:first").text().trim();
+    		break;
+    		case "ldt":
+    			var snippet = Rkns.$('<div>').html(res["text/x-iri-selected-html"]),
+    				tweetel = snippet.children().first();
+				if (tweetel.hasClass("Ldt-AnnotationsList-li")) {
+					newNode.title = tweetel.find(".Ldt-AnnotationsList-Title").text().trim();
+					newNode.description = tweetel.find(".Ldt-AnnotationsList-Description").text().trim();
+					newNode.image = tweetel.find(".Ldt-AnnotationsList-Thumbnail").attr("src");
+					var url = tweetel.find("a").attr("href");
+					if (/^https?:\/\//.test(url)) {
+						newNode.uri = url;
+					} else {
+						newNode.uri = res["text/x-iri-source-uri"].replace(/#.*$/,'') + '#' + url.replace(/^.*#/,'')
+					}
+					newNode.color = tweetel[0].style.backgroundColor;
+				}
+				if (tweetel.hasClass("Ldt-Polemic-TweetDiv")) {
+					newNode.title = _renkan.translate("Annotation from PolemicTweet");
+					newNode.uri = res["text/x-iri-source-uri"].replace(/#.*$/,'') + '#id=' + tweetel.attr("annotation-id");
+					newNode.description = tweetel.attr("tweet-title");
+					newNode.color = tweetel.attr("polemic-color");
+				}
+				if (tweetel.hasClass("Ldt-Segments-Segment")) {
+					var text = tweetel.attr("segment-text").split(/<[^>]+>/g);
+					newNode.title = text[0];
+					newNode.description = text.slice(1).join("");
+					
+					newNode.uri = res["text/x-iri-source-uri"].replace(/#.*$/,'');
+					var match = tweetel.attr("trace-info").match(/segment-id:([\d\w_-]+)/);
+					if (match) {
+						 newNode.uri += '#id=' + match[1];
+					}
+					newNode.color = tweetel.attr("data-base-color");
+				}
+    		break;
+    		case undefined:
+	    	default:
+		    	if (res["text/x-iri-source-uri"]) {
+		    		newNode.uri = res["text/x-iri-source-uri"];
+		    	}
+		    	if (res["text/plain"] || res["text/x-iri-selected-text"]) {
+		    		newNode.description = (res["text/plain"] || res["text/x-iri-selected-text"]).replace(/[\s\n]+/gm,' ').trim();
+		    	}
+		    	if (res["text/html"] || res["text/x-iri-selected-html"]) {
+		    		var snippet = Rkns.$('<div>').html(res["text/html"] || res["text/x-iri-selected-html"]);
+		    		newNode.image = snippet.find("img").attr("src") || '';
+		    		newNode.uri = snippet.find("a").attr("href") || newNode.uri;
+		    		newNode.title = snippet.find("[title]").attr("title");
+		    	}
+		    	if (res["text/uri-list"]) {
+		    		newNode.uri = res["text/uri-list"];
+		    	}
+		    	if (res["text/x-moz-url"] && !newNode.title) {
+		    		newNode.title = (res["text/x-moz-url"].split("\n")[1] || "").trim();
+		    		if (newNode.title === newNode.uri) {
+		    			newNode.title = false;
+		    		}
+		    	}
+		    	if (res["text/x-iri-source-title"] && !newNode.title) {
+		    		newNode.title = res["text/x-iri-source-title"];
+		    	}
     	}
     	var fields = ["title", "description", "uri", "image"];
     	for (var i = 0; i < fields.length; i++) {
@@ -1298,6 +1383,7 @@
                 title: newNode.title || _this.renkan.translate("Dragged resource"),
                 description: newNode.description || "",
                 image: newNode.image || "",
+                color: newNode.color || undefined,
                 position: {
                     x: _coords.x,
                     y: _coords.y
@@ -1368,22 +1454,42 @@
             _this.notif_$.text(_renkan.translate("Click on a first node to start the edge")).fadeIn();
         }
     });
-    this.$.find(".Rk-Bookmarklet-Button").click(function(){
-    	_this.notif_$
-    		.text(_renkan.translate("Drag this bookmarklet to your bookmark bar. When on a third-party website, click it to enable drag-and-drop from the website to Renkan."))
-    		.fadeIn()
-    		.delay(5000)
-    		.fadeOut();
-		return false;
-    });
+    this.$.find(".Rk-Bookmarklet-Button")
+	    .attr("href","javascript:" + Rkns.Renderer._BOOKMARKLET_CODE(_renkan))
+		.click(function(){
+	    	_this.notif_$
+	    		.text(_renkan.translate("Drag this button to your bookmark bar. When on a third-party website, click it to enable drag-and-drop from the website to Renkan."))
+	    		.fadeIn()
+	    		.delay(5000)
+	    		.fadeOut();
+			return false;
+	    });
     this.$.find(".Rk-TopBar-Button").mouseover(function() {
         Rkns.$(this).find(".Rk-TopBar-Tooltip").show();
     }).mouseout(function() {
         Rkns.$(this).find(".Rk-TopBar-Tooltip").hide();
     });
+    this.$.find(".Rk-Fold-Bins").click(function() {
+    	var bins = _renkan.$.find(".Rk-Bins");
+    	if (bins.offset().left < 0) {
+    		bins.animate({left: 0},250);
+    		_this.$.animate({left: 300},250,function() {
+    			var w = _this.$.width();
+    			paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]);
+    		});
+    		$(this).html("&laquo;");
+    	} else {
+    		bins.animate({left: -300},250);
+    		_this.$.animate({left: 0},250,function() {
+    			var w = _this.$.width();
+    			paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]);
+    		});
+    		$(this).html("&raquo;");
+    	}
+    });
     
     paper.view.onResize = function(_event) {
-        _this.offset = _this.offset.add(_event.delta.divide(2));
+    	_this.offset = _this.offset.add(_event.delta.divide(2));
         _this.resetCoords();
         _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size)
         _this.minimap.rectangle.fitBounds(_this.minimap.topleft.subtract([2,2]), _this.minimap.size.add([4,4]));
@@ -1446,13 +1552,12 @@
     + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddNode-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Add Node")%></div></div></div>'
     + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddEdge-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Add Edge")%></div></div></div>'
     + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Save-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Archive Project")%></div></div></div>'
-    + '<div class="Rk-TopBar-Separator"></div><a class="Rk-TopBar-Button Rk-Bookmarklet-Button" href="javascript:(function(){a=document;'
-    + 'b=function(c){d=a.createElement(\'script\');d.type=\'text/javascript\';d.src=c;a.getElementsByTagName(\'head\')[0].appendChild(d);};'
-    + 'b(\'<%- bookmarklet_url %>\');})();"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents">'
-    + '<%-translate("Renkan \'Drag and Add\' bookmarklet")%></div></div></a>'
+    + '<div class="Rk-TopBar-Separator"></div><a class="Rk-TopBar-Button Rk-Bookmarklet-Button" href="#"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents">'
+    + '<%-translate("Renkan \'Drag-to-Add\' bookmarklet")%></div></div></a>'
     + '<div class="Rk-TopBar-Separator"></div></div>'
     + '<% } %>'
     + '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>'
+    + '<% if (show_bins) { %><div class="Rk-Fold-Bins">&laquo;</div><% } %>'
     + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%-translate("Zoom In")%>"></div><div class="Rk-ZoomOut" title="<%-translate("Zoom Out")%>"></div></div>'
     + '</div>'
 );
@@ -1507,8 +1612,8 @@
         this.minimap.scale = _scale;
     }
     if (nodes.length === 1) {
-        this.minimap.offset = this.minimap.size.divide(2).subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]));
-        this.minimap.scale = .25;
+    	this.minimap.scale = .1;
+        this.minimap.offset = this.minimap.size.divide(2).subtract(new paper.Point([nodes.at(0).get("position").x, nodes.at(0).get("position").y]).multiply(this.minimap.scale));
     }
     this.redraw();
 }