')
.appendTo(this.renderer.editor_$)
.css({
position: "absolute",
@@ -904,22 +916,22 @@
var NodeEditor = Renderer.NodeEditor = Rkns.Utils.inherit(_BaseEditor);
-Rkns._(NodeEditor.prototype).extend({
-template: Rkns._.template(
+_(NodeEditor.prototype).extend({
+template: _.template(
'
×<%-renkan.translate("Edit Node")%>
'
+ '
'
+ '<% if (options.show_node_editor_uri) { %>
<% } %>'
+ '<% if (options.show_node_editor_description) { %>
<% } %>'
+ '<% if (options.show_node_editor_size) { %>
<%-renkan.translate("Size:")%>-<%-node.size%>+
<% } %>'
- + '<% if (options.show_node_editor_color) { %>
<%-renkan.translate("Node color:")%>'
- + '<% _(Rkns.pickerColors).each(function(c) { %><% }); %>
<%- renkan.translate("Choose color") %> <% } %>'
+ + '<% if (options.show_node_editor_color) { %>
<%-renkan.translate("Node color:")%>'
+ + '<%= renkan.colorPicker %><%- renkan.translate("Choose color") %>
<% } %>'
+ '<% if (options.show_node_editor_image) { %>
'
+ '<% if (node.clip_path) { %>
<% }%>'
+ '
'
+ '
<% } %>'
+ '<% if (options.show_node_editor_creator && node.has_creator) { %>
<%-renkan.translate("Created by:")%> <%- shortenText(node.created_by_title, 25) %>
<% } %>'
),
-readOnlyTemplate: Rkns._.template(
+readOnlyTemplate: _.template(
'
'
+ '<% if (node.uri && options.show_node_tooltip_uri) { %>
<%-node.short_uri%>
<% } %>'
@@ -970,8 +982,8 @@
if (this.renderer.isEditable()) {
- var onFieldChange = Rkns._(function() {
- Rkns._(function() {
+ var onFieldChange = _(function() {
+ _(function() {
if (_this.renderer.isEditable()) {
var _data = {
title: _this.editor_$.find(".Rk-Edit-Title").val()
@@ -1058,7 +1070,7 @@
}
});
- function shiftSize(n) {
+ var shiftSize = function(n) {
if (_this.renderer.isEditable()) {
var _newsize = n+(_model.get("size") || 0);
_this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize);
@@ -1094,8 +1106,8 @@
var EdgeEditor = Renderer.EdgeEditor = Rkns.Utils.inherit(_BaseEditor);
-Rkns._(EdgeEditor.prototype).extend({
-template: Rkns._.template(
+_(EdgeEditor.prototype).extend({
+template: _.template(
'
×<%-renkan.translate("Edit Edge")%>
'
+ '
'
+ '<% if (options.show_edge_editor_uri) { %>
'
@@ -1104,14 +1116,14 @@
+ '<% _(ontology.properties).each(function(property) { var uri = ontology["base-uri"] + property.uri; %>
'
+ '<% }) %><% }) %><% } } %>'
- + '<% if (options.show_edge_editor_color) { %>
<%-renkan.translate("Edge color:")%>'
- + '<% _(Rkns.pickerColors).each(function(c) { %><% }); %>
<%- renkan.translate("Choose color") %> <% } %>'
+ + '<% if (options.show_edge_editor_color) { %>
<%-renkan.translate("Edge color:")%>'
+ + '<%= renkan.colorPicker %><%- renkan.translate("Choose color") %>
<% } %>'
+ '<% if (options.show_edge_editor_direction) { %>
<%- renkan.translate("Change edge direction") %>
<% } %>'
+ '<% if (options.show_edge_editor_nodes) { %>
<%-renkan.translate("From:")%><%- shortenText(edge.from_title, 25) %>
'
+ '
<%-renkan.translate("To:")%><%- shortenText(edge.to_title, 25) %>
<% } %>'
+ '<% if (options.show_edge_editor_creator && edge.has_creator) { %>
<%-renkan.translate("Created by:")%><%- shortenText(edge.created_by_title, 25) %>
<% } %>'
),
-readOnlyTemplate: Rkns._.template(
+readOnlyTemplate: _.template(
'
'
+ '<% if (options.show_edge_tooltip_uri && edge.uri) { %>
<%-edge.short_uri%>
<% } %>'
@@ -1144,7 +1156,7 @@
},
renkan: this.renkan,
shortenText: shortenText,
- options: this.options,
+ options: this.options
}));
this.redraw();
var _this = this,
@@ -1161,8 +1173,8 @@
if (this.renderer.isEditable()) {
- var onFieldChange = Rkns._(function() {
- Rkns._(function() {
+ var onFieldChange = _(function() {
+ _(function() {
if (_this.renderer.isEditable()) {
var _data = {
title: _this.editor_$.find(".Rk-Edit-Title").val()
@@ -1254,7 +1266,7 @@
var _NodeButton = Renderer._NodeButton = Rkns.Utils.inherit(_BaseButton);
-Rkns._(_NodeButton.prototype).extend({
+_(_NodeButton.prototype).extend({
setSectorSize: function() {
var sectorInner = this.source_representation.circle_radius;
if (sectorInner !== this.lastSectorInner) {
@@ -1279,7 +1291,7 @@
var NodeEditButton = Renderer.NodeEditButton = Rkns.Utils.inherit(_NodeButton);
-Rkns._(NodeEditButton.prototype).extend({
+_(NodeEditButton.prototype).extend({
_init: function() {
this.type = "Node-edit-button";
this.lastSectorInner = 0;
@@ -1299,7 +1311,7 @@
var NodeRemoveButton = Renderer.NodeRemoveButton = Rkns.Utils.inherit(_NodeButton);
-Rkns._(NodeRemoveButton.prototype).extend({
+_(NodeRemoveButton.prototype).extend({
_init: function() {
this.type = "Node-remove-button";
this.lastSectorInner = 0;
@@ -1333,7 +1345,7 @@
var NodeRevertButton = Renderer.NodeRevertButton = Rkns.Utils.inherit(_NodeButton);
-Rkns._(NodeRevertButton.prototype).extend({
+_(NodeRevertButton.prototype).extend({
_init: function() {
this.type = "Node-revert-button";
this.lastSectorInner = 0;
@@ -1355,7 +1367,7 @@
var NodeLinkButton = Renderer.NodeLinkButton = Rkns.Utils.inherit(_NodeButton);
-Rkns._(NodeLinkButton.prototype).extend({
+_(NodeLinkButton.prototype).extend({
_init: function() {
this.type = "Node-link-button";
this.lastSectorInner = 0;
@@ -1382,7 +1394,7 @@
var NodeEnlargeButton = Renderer.NodeEnlargeButton = Rkns.Utils.inherit(_NodeButton);
-Rkns._(NodeEnlargeButton.prototype).extend({
+_(NodeEnlargeButton.prototype).extend({
_init: function() {
this.type = "Node-enlarge-button";
this.lastSectorInner = 0;
@@ -1404,7 +1416,7 @@
var NodeShrinkButton = Renderer.NodeShrinkButton = Rkns.Utils.inherit(_NodeButton);
-Rkns._(NodeShrinkButton.prototype).extend({
+_(NodeShrinkButton.prototype).extend({
_init: function() {
this.type = "Node-shrink-button";
this.lastSectorInner = 0;
@@ -1426,7 +1438,7 @@
var EdgeEditButton = Renderer.EdgeEditButton = Rkns.Utils.inherit(_BaseButton);
-Rkns._(EdgeEditButton.prototype).extend({
+_(EdgeEditButton.prototype).extend({
_init: function() {
this.type = "Edge-edit-button";
this.sector = this.renderer.drawSector(this, _EDGE_BUTTON_INNER, _EDGE_BUTTON_OUTER, -270, -90, 1, "edit", this.renkan.translate("Edit"));
@@ -1442,7 +1454,7 @@
var EdgeRemoveButton = Renderer.EdgeRemoveButton = Rkns.Utils.inherit(_BaseButton);
-Rkns._(EdgeRemoveButton.prototype).extend({
+_(EdgeRemoveButton.prototype).extend({
_init: function() {
this.type = "Edge-remove-button";
this.sector = this.renderer.drawSector(this, _EDGE_BUTTON_INNER, _EDGE_BUTTON_OUTER, -90, 90, 1, "remove", this.renkan.translate("Remove"));
@@ -1472,7 +1484,7 @@
var EdgeRevertButton = Renderer.EdgeRevertButton = Rkns.Utils.inherit(_BaseButton);
-Rkns._(EdgeRevertButton.prototype).extend({
+_(EdgeRevertButton.prototype).extend({
_init: function() {
this.type = "Edge-revert-button";
this.sector = this.renderer.drawSector(this, _EDGE_BUTTON_INNER, _EDGE_BUTTON_OUTER, -135, 135, 1, "revert", this.renkan.translate("Cancel deletion"));
@@ -1490,7 +1502,7 @@
var MiniFrame = Renderer.MiniFrame = Rkns.Utils.inherit(_BaseRepresentation);
-Rkns._(MiniFrame.prototype).extend({
+_(MiniFrame.prototype).extend({
paperShift: function(_delta) {
this.renderer.offset = this.renderer.offset.subtract(_delta.divide(this.renderer.minimap.scale).multiply(this.renderer.scale));
this.renderer.redraw();
@@ -1505,7 +1517,7 @@
var Scene = Renderer.Scene = function(_renkan) {
this.renkan = _renkan;
- this.$ = Rkns.$(".Rk-Render");
+ this.$ = $(".Rk-Render");
this.representations = [];
this.$.html(this.template(_renkan));
this.onStatusChange();
@@ -1556,7 +1568,7 @@
this.minimap.miniframe.__representation = new MiniFrame(this, null);
}
- this.throttledPaperDraw = Rkns._(function() {
+ this.throttledPaperDraw = _(function() {
paper.view.draw();
}).throttle(100);
@@ -1677,7 +1689,7 @@
_event.preventDefault();
_allowScroll = true;
var res = {};
- Rkns._(_event.originalEvent.dataTransfer.types).each(function(t) {
+ _(_event.originalEvent.dataTransfer.types).each(function(t) {
try {
res[t] = _event.originalEvent.dataTransfer.getData(t);
} catch(e) {}
@@ -1747,9 +1759,9 @@
return false;
});
this.$.find(".Rk-TopBar-Button").mouseover(function() {
- Rkns.$(this).find(".Rk-TopBar-Tooltip").show();
+ $(this).find(".Rk-TopBar-Tooltip").show();
}).mouseout(function() {
- Rkns.$(this).find(".Rk-TopBar-Tooltip").hide();
+ $(this).find(".Rk-TopBar-Tooltip").hide();
});
bindClick(".Rk-Fold-Bins", "foldBins");
@@ -1763,7 +1775,7 @@
_this.redraw();
};
- var _thRedraw = Rkns._.throttle(function() {
+ var _thRedraw = _.throttle(function() {
_this.redraw();
},50);
@@ -1777,13 +1789,14 @@
_renkan.project.set({"title": $(this).val()});
});
- this.renkan.project.get("users").each(function(_user) {
- _this.addUser(_user);
- });
+ var _thRedrawUsers = _.throttle(function() {
+ _this.redrawUsers();
+ }, 100);
- this.renkan.project.on("add:users", function(_user) {
- _this.addUser(_user);
- });
+ _thRedrawUsers();
+
+ this.renkan.project.on("add:users remove:users", _thRedrawUsers);
+
this.renkan.project.on("add:nodes", function(_node) {
_this.addRepresentation("Node", _node);
_thRedraw();
@@ -1823,6 +1836,33 @@
});
}
+ if (_renkan.options.show_user_list) {
+ var $cpwrapper = this.$.find(".Rk-Users .Rk-Edit-ColorPicker-Wrapper"),
+ $cplist = this.$.find(".Rk-Users .Rk-Edit-ColorPicker");
+
+ $cpwrapper.hover(
+ function(_e) {
+ if (_this.isEditable()) {
+ _e.preventDefault();
+ $cplist.show();
+ }
+ },
+ function(_e) {
+ _e.preventDefault();
+ $cplist.hide();
+ }
+ );
+
+ $cplist.find("li").mouseenter(
+ function(_e) {
+ if (_this.isEditable()) {
+ _e.preventDefault();
+ _this.$.find(".Rk-CurrentUser-Color").css("background", $(this).attr("data-color"));
+ }
+ }
+ );
+ }
+
this.redraw();
window.setInterval(function() {
@@ -1852,11 +1892,12 @@
};
-Rkns._(Scene.prototype).extend({
-template: Rkns._.template(
+_(Scene.prototype).extend({
+template: _.template(
'<% if (options.show_top_bar) { %>
<% if (!options.editor_mode) { %>
<%- project.get("title") || translate("Untitled project")%>
'
+ '<% } else { %>
" placeholder="<%-translate("Untitled project")%>" /><% } %>'
- + '<% if (options.show_user_list) { %>
<% } %>'
+ + '<% if (options.show_user_list) { %>
'
+ + '<%= colorPicker %>
<unknown user><% } %>'
+ '<% if (options.home_button_url) {%>
<% } %>'
+ '<% if (options.show_fullscreen_button) { %>
<% } %>'
@@ -1992,13 +2033,13 @@
if (_img.width) {
showImage();
} else {
- Rkns.$(_img).on("load",showImage);
+ $(_img).on("load",showImage);
}
return _res;
},
addToBundles: function(_edgeRepr) {
- var _bundle = Rkns._(this.bundles).find(function(_bundle) {
+ var _bundle = _(this.bundles).find(function(_bundle) {
return (
( _bundle.from === _edgeRepr.from_representation && _bundle.to === _edgeRepr.to_representation )
|| ( _bundle.from === _edgeRepr.to_representation && _bundle.to === _edgeRepr.from_representation )
@@ -2013,7 +2054,7 @@
edges: [ _edgeRepr ],
getPosition: function(_er) {
var _dir = (_er.from_representation === this.from) ? 1 : -1;
- return _dir * ( Rkns._(this.edges).indexOf(_er) - (this.edges.length - 1) / 2 );
+ return _dir * ( _(this.edges).indexOf(_er) - (this.edges.length - 1) / 2 );
}
};
this.bundles.push(_bundle);
@@ -2038,6 +2079,7 @@
tip.text(this.renkan.translate("Auto-save enabled"));
}
}
+ this.redrawUsers();
},
setScale: function(_newScale, _offset) {
if (_newScale > _MIN_SCALE && _newScale < _MAX_SCALE) {
@@ -2113,27 +2155,64 @@
_this.addRepresentation(_type, _model);
});
},
-userTemplate: Rkns._.template(
+userTemplate: _.template(
'
<%=name%>'
),
-addUser: function(_user) {
- if (_user.get("_id") === this.renkan.current_user) {
- this.$.find(".Rk-CurrentUser-Name").text(_user.get("title"));
- this.$.find(".Rk-CurrentUser-Color").css("background", _user.get("color"));
- } else {
- this.$.find(".Rk-UserList").append(
- Rkns.$(
- this.userTemplate({
- name: _user.get("title"),
- background: _user.get("color")
- })
- )
- );
+redrawUsers: function() {
+ if (!this.renkan.options.show_user_list) {
+ return;
}
+ var allUsers = [].concat((this.renkan.project.current_user_list || {}).models || [], (this.renkan.project.get("users") || {}).models || []),
+ ulistHtml = '',
+ $userpanel = this.$.find(".Rk-Users"),
+ $name = $userpanel.find(".Rk-CurrentUser-Name"),
+ $cpwrapper = $userpanel.find(".Rk-Edit-ColorPicker-Wrapper"),
+ $cpitems = $userpanel.find(".Rk-Edit-ColorPicker li"),
+ $colorsquare = $userpanel.find(".Rk-CurrentUser-Color"),
+ _this = this;
+ $name.off("click").text(this.renkan.translate("
"));
+ $cpitems.off("mouseleave click");
+ allUsers.forEach(function(_user) {
+ if (_user.get("_id") === _this.renkan.current_user) {
+ $name.text(_user.get("title"));
+ if (_this.isEditable()) {
+ $name.click(function() {
+ var $this = $(this),
+ $input = $('').val(_user.get("title")).blur(function() {
+ _user.set("title", $(this).val());
+ _this.redrawUsers();
+ _this.redraw();
+ });
+ $this.empty().html($input);
+ $input.select();
+ });
+
+ $cpitems.click(
+ function(_e) {
+ _e.preventDefault();
+ if (_this.isEditable()) {
+ _user.set("color", $(this).attr("data-color"));
+ }
+ $(this).parent().hide();
+ }
+ ).mouseleave(function() {
+ $colorsquare.css("background", _user.get("color"));
+ });
+ $colorsquare.css("background", _user.get("color"));
+ }
+
+ } else {
+ ulistHtml += _this.userTemplate({
+ name: _user.get("title"),
+ background: _user.get("color")
+ });
+ }
+ });
+ $userpanel.find(".Rk-UserList").html(ulistHtml);
},
removeRepresentation: function(_representation) {
_representation.destroy();
- this.representations = Rkns._(this.representations).reject(
+ this.representations = _(this.representations).reject(
function(_repr) {
return _repr == _representation;
}
@@ -2143,16 +2222,16 @@
if (!_model) {
return undefined;
}
- return Rkns._(this.representations).find(function(_repr) {
+ return _(this.representations).find(function(_repr) {
return _repr.model === _model;
});
},
removeRepresentationsOfType: function(_type) {
- var _representations = Rkns._(this.representations).filter(function(_repr) {
+ var _representations = _(this.representations).filter(function(_repr) {
return _repr.type == _type;
}),
_this = this;
- Rkns._(_representations).each(function(_repr) {
+ _(_representations).each(function(_repr) {
_this.removeRepresentation(_repr);
});
},
@@ -2163,17 +2242,17 @@
}
},
unhighlightAll: function(_model) {
- Rkns._(this.representations).each(function(_repr) {
+ _(this.representations).each(function(_repr) {
_repr.unhighlight();
});
},
unselectAll: function(_model) {
- Rkns._(this.representations).each(function(_repr) {
+ _(this.representations).each(function(_repr) {
_repr.unselect();
});
},
redraw: function() {
- Rkns._(this.representations).each(function(_representation) {
+ _(this.representations).each(function(_representation) {
_representation.redraw(true);
});
if (this.minimap) {
@@ -2270,7 +2349,7 @@
this.addTempEdge(this.click_target, _point);
this.click_mode = _CLICKMODE_ENDEDGE;
this.notif_$.fadeOut(function() {
- Rkns.$(this).html(_renkan.translate("Click on a second node to complete the edge")).fadeIn();
+ $(this).html(_renkan.translate("Click on a second node to complete the edge")).fadeIn();
});
} else {
this.notif_$.hide();
@@ -2336,9 +2415,9 @@
x: _coords.x,
y: _coords.y
}
- };
+ },
_node = this.renkan.project.addNode(_data);
- this.getRepresentationByModel(_node).openEditor();
+ this.getRepresentationByModel(_node).openEditor();
}
paper.view.draw();
},
@@ -2356,7 +2435,7 @@
var newNode = {};
switch(_data["text/x-iri-specific-site"]) {
case "twitter":
- var snippet = Rkns.$('').html(_data["text/x-iri-selected-html"]),
+ var snippet = $('
').html(_data["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");
@@ -2364,7 +2443,7 @@
newNode.description = tweetdiv.find(".js-tweet-text:first").text();
break;
case "google":
- var snippet = Rkns.$('
').html(_data["text/x-iri-selected-html"]);
+ var snippet = $('
').html(_data["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();
@@ -2378,7 +2457,7 @@
newNode.description = (_data["text/plain"] || _data["text/x-iri-selected-text"]).replace(/[\s\n]+/gm,' ').trim();
}
if (_data["text/html"] || _data["text/x-iri-selected-html"]) {
- var snippet = Rkns.$('
').html(_data["text/html"] || _data["text/x-iri-selected-html"]);
+ var snippet = $('
').html(_data["text/html"] || _data["text/x-iri-selected-html"]);
var _svgimgs = snippet.find("image");
if (_svgimgs.length) {
newNode.image = _svgimgs.attr("xlink:href");
@@ -2538,6 +2617,6 @@
save: function() { },
open: function() { }
});
-}).call(window);
+})(window);
/* END paper-renderer.js */
diff -r f53a7999ae7b -r 15e048e00002 client/render-test.html
--- a/client/render-test.html Fri Jun 14 12:36:32 2013 +0200
+++ b/client/render-test.html Wed Jul 03 13:42:59 2013 +0200
@@ -25,9 +25,6 @@
var _renkan;
$(function() {
_renkan = new Rkns.Renkan({
- show_node_circles: false,
- clip_node_images: false,
- //node_images_fill_mode: true,
bins: [
{
title: "Projet Lignes de Temps",
