# HG changeset patch
# User veltr
# Date 1363166364 -3600
# Node ID cc9deb3b3e134b2918fdc9c96fe0bc2446e0f025
# Parent  dbd90c7844245471c863ab950a1b86c50554d4b1
Added simple Resource bin

diff -r dbd90c784424 -r cc9deb3b3e13 client/css/renkan.css
--- a/client/css/renkan.css	Mon Mar 11 14:43:52 2013 +0100
+++ b/client/css/renkan.css	Wed Mar 13 10:19:24 2013 +0100
@@ -560,6 +560,10 @@
     margin-left: 54px;
 }
 
+.Rk-ListBin-Image {
+	float: left; max-width: 100px; max-height: 75px; margin-right: 2px;
+}
+
 .Rk-Ldt-Icon, .Rk-Ldt-Title-Icon {
     background: url(../img/search-logos.png); background-position: 0 -100px; background-repeat: no-repeat;
 }
diff -r dbd90c784424 -r cc9deb3b3e13 client/js/list-bin.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/js/list-bin.js	Wed Mar 13 10:19:24 2013 +0100
@@ -0,0 +1,71 @@
+Rkns.ListBin = Rkns.Utils.inherit(Rkns._BaseBin);
+
+Rkns.ListBin.prototype.resultTemplate = Rkns._.template(
+    '<li class="Rk-Bin-Item Rk-ListBin-Item" draggable="true" data-uri="<%-url%>" '
+    + 'data-title="<%-title%>" data-description="<%-description%>" data-image="<%-image%>">'
+    + '<% if (image) { %><img class="Rk-ListBin-Image" src="<%-image%>"><% } %></div><h4 class="Rk-ListBin-Title"><a href="<%-url%>" target="_blank"><%=htitle%></a></h4>'
+    + '<% if (description) { %><p class="Rk-ListBin-Description"><%=hdescription%></p><% } %><% if (image) { %><div style="clear: both;"></div><% } %></li>'
+);
+
+Rkns.ListBin.prototype._init = function(_renkan, _opts) {
+	this.renkan = _renkan;
+    this.title_$.html(_opts.title);
+    if (_opts.list) {
+    	this.data = _opts.list;
+    }
+    this.refresh();
+}
+
+Rkns.ListBin.prototype.render = function(searchstr) {
+    if (searchstr) {
+    	var _rgxp = new RegExp('('+(searchstr).replace(/(\W)/g,'\\$1')+')','gi'),
+    		rxtest = new RegExp(searchstr.replace(/(\W)/g,'\\$1'),'i');
+    }
+    function highlight(_text) {
+    	if (searchstr) {
+    		return _text.replace(_rgxp, "<span class='searchmatch'>$1</span>");
+    	} else {
+    		return _text;
+    	}
+    }
+    var _html = "",
+        _this = this,
+        count = 0;
+    Rkns._(this.data).each(function(_element) {
+        var title = _element.title || _element.url || "",
+            url = _element.url || "",
+            description = _element.description || "",
+            image = _element.image || "";
+        if (searchstr && !rxtest.test(title) && !rxtest.test(description)) {
+            return;
+        }
+        count++;
+        _html += _this.resultTemplate({
+            url: url,
+            title: title,
+            htitle: highlight(title),
+            image: image,
+            description: description,
+            hdescription: highlight(description),
+            static_url: _this.renkan.static_url
+        });
+    });
+    _this.main_$.html(_html);
+    if (searchstr && count) {
+        this.count_$.text(count).show();
+    } else {
+        this.count_$.hide();
+    }
+    if (searchstr && !count) {
+        this.$.hide();
+    } else {
+        this.$.show();
+    }
+    this.renkan.resizeBins();
+}
+    
+Rkns.ListBin.prototype.refresh = function() {
+    if (this.data) {
+    	this.render();
+    }
+}
\ No newline at end of file
diff -r dbd90c784424 -r cc9deb3b3e13 client/js/main.js
--- a/client/js/main.js	Mon Mar 11 14:43:52 2013 +0100
+++ b/client/js/main.js	Wed Mar 13 10:19:24 2013 +0100
@@ -129,12 +129,16 @@
     		});
     	});
     }
+    if (typeof _opts.clip_images === "undefined") {
+    	_opts.clip_images = true;
+    }
     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.clip_images = _opts.clip_images;
     
     this.translate = function(_text) {
     	return (Rkns.i18n[_opts.language] || Rkns.i18n[_opts.language.substr(0,2)] || {})[_text] || _text;
diff -r dbd90c784424 -r cc9deb3b3e13 client/js/paper-renderer.js
--- a/client/js/paper-renderer.js	Mon Mar 11 14:43:52 2013 +0100
+++ b/client/js/paper-renderer.js	Wed Mar 13 10:19:24 2013 +0100
@@ -8,6 +8,7 @@
     _EDGE_BUTTON_OUTER: 40,
     _NODE_FONT_SIZE: 10,
     _EDGE_FONT_SIZE: 9,
+    _EDGE_DISTANCE: 3,
     _NODE_MAX_CHAR: 50,
     _EDGE_MAX_CHAR: 40,
     _ARROW_LENGTH: 16,
@@ -303,7 +304,9 @@
     }
     this.last_circle_radius = this.circle_radius;
     
-    this.title.content = this.model.get("title") || this.renderer.renkan.translate("(untitled)");
+    var _text = this.model.get("title") || this.renderer.renkan.translate("(untitled)");
+    this.title.content = _text.length > Rkns.Renderer._NODE_MAX_CHAR ? (_text.substr(0,Rkns.Renderer._NODE_MAX_CHAR) + '…') : _text;
+
     this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
     var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
     this.circle.strokeColor = _color;
@@ -321,14 +324,18 @@
             _this.renderer.node_layer.activate();
             var _ratio = Math.min(2 / _image.width, 2 / _image.height );
             var _raster = new paper.Raster(_image);
-            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;
-            /* This is a workaround to allow clipping at group level
-             * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug).
-            */
-            _this.node_image.clipped = true;
+            if (_this.renderer.renkan.clip_images) {
+	            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;
+	            /* This is a workaround to allow clipping at group level
+	             * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug).
+	            */
+	            _this.node_image.clipped = true;
+            } else {
+            	_this.node_image = _raster;
+            }
             _this.node_image.__representation = _this;
 		    var square = new paper.Size(_this.circle_radius, _this.circle_radius),
 		    	topleft = _this.paper_coords.subtract(square),
@@ -493,11 +500,13 @@
         _v = _p1a.subtract(_p0a),
         _r = _v.length,
         _u = _v.divide(_r),
+        _ortho = new paper.Point([- _u.y, _u.x]),
         _group_pos = this.bundle.getPosition(this),
-        _delta = new paper.Point([- _u.y, _u.x]).multiply( 12 * _group_pos ),
+        _delta = _ortho.multiply( 12 * _group_pos ),
         _p0b = _p0a.add(_delta), /* Adding a 4 px difference */
         _p1b = _p1a.add(_delta), /* to differentiate inbound and outbound links */
         _a = _v.angle,
+        _textdelta = _ortho.multiply(-Rkns.Renderer._EDGE_DISTANCE),
         _handle = _v.divide(3),
         _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
     this.paper_coords = _p0b.add(_p1b).divide(2);
@@ -513,13 +522,16 @@
     this.arrow_angle = _a;
     if (_a > 90) {
         _a -= 180;
+        _textdelta = _textdelta.multiply(-1);
     }
     if (_a < -90) {
         _a += 180;
+        _textdelta = _textdelta.multiply(-1);
     }
     this.text.rotate(_a - this.text_angle);
-    this.text.content = this.model.get("title");
-    this.text.position = this.paper_coords;
+    var _text = this.model.get("title");
+    this.text.content = _text.length > Rkns.Renderer._EDGE_MAX_CHAR ? (_text.substr(0,Rkns.Renderer._EDGE_MAX_CHAR) + '…') : _text;
+    this.text.position = this.paper_coords.add(_textdelta);
     this.text_angle = _a;
     this.edit_button.moveTo(this.paper_coords);
     this.remove_button.moveTo(this.paper_coords);
diff -r dbd90c784424 -r cc9deb3b3e13 client/render-test.html
--- a/client/render-test.html	Mon Mar 11 14:43:52 2013 +0100
+++ b/client/render-test.html	Wed Mar 13 10:19:24 2013 +0100
@@ -16,6 +16,7 @@
         <script src="js/i18n.js"></script>
         <script src="js/models.js"></script>
         <script src="js/full-json.js"></script>
+        <script src="js/list-bin.js"></script>
         <script src="js/ldtjson-bin.js"></script>
         <script src="js/twitter-bin.js"></script>
         <script src="js/wikipedia-bin.js"></script>
@@ -26,6 +27,20 @@
                 _renkan = new Rkns.Renkan({
                     url: "data/simple-persist.php",
                     bins: [
+                    	{
+                    		bin: Rkns.ListBin,
+                    		title: "Ressources",
+                    		list: [
+                    			{
+                    				url: "http://www.google.com/",
+                    				title: "Google",
+                    				description: "Search engine",
+                    				image: "http://www.google.fr/images/srpr/logo4w.png"
+                    			}, {
+                    				url: "http://www.twitter.com/"
+                    			}
+                    		]
+                    	}
                     ],
                     search: [
                         {
@@ -49,7 +64,8 @@
                     ],
                     property_files: [ "data/properties.json" ],
                     user_id: "u-iri",
-                    language: "fr"
+                    language: "fr",
+                    //clip_images: false
                 });
                 Rkns.jsonIO(_renkan, {
                     url: "data/simple-persist.php"