--- 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;
}
--- /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
--- 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;
--- 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);
--- 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"