7 /* NodeEditor Begin */ |
7 /* NodeEditor Begin */ |
8 //var NodeEditor = Renderer.NodeEditor = Utils.inherit(Renderer._BaseEditor); |
8 //var NodeEditor = Renderer.NodeEditor = Utils.inherit(Renderer._BaseEditor); |
9 var NodeEditor = Utils.inherit(BaseEditor); |
9 var NodeEditor = Utils.inherit(BaseEditor); |
10 |
10 |
11 _(NodeEditor.prototype).extend({ |
11 _(NodeEditor.prototype).extend({ |
12 template: _.template( |
12 _init: function() { |
13 '<h2><span class="Rk-CloseX">×</span><%-renkan.translate("Edit Node")%></span></h2>' + |
13 BaseEditor.prototype._init.apply(this); |
14 '<p><label><%-renkan.translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%-node.title%>"/></p>' + |
14 this.template = this.options.templates['templates/nodeeditor.html']; |
15 '<% if (options.show_node_editor_uri) { %><p><label><%-renkan.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><% } %>' + |
15 this.readOnlyTemplate = this.options.templates['templates/nodeeditor_readonly.html']; |
16 '<% if (options.show_node_editor_description) { %><p><label><%-renkan.translate("Description:")%></label><textarea class="Rk-Edit-Description"><%-node.description%></textarea></p><% } %>' + |
16 }, |
17 '<% if (options.show_node_editor_size) { %><p><span class="Rk-Editor-Label"><%-renkan.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><% } %>' + |
|
18 '<% if (options.show_node_editor_color) { %><div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-renkan.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>' + |
|
19 '<%= renkan.colorPicker %><span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span></div></div><% } %>' + |
|
20 '<% if (options.show_node_editor_image) { %><div class="Rk-Edit-ImgWrap"><div class="Rk-Edit-ImgPreview"><img src="<%-node.image || node.image_placeholder%>" />' + |
|
21 '<% if (node.clip_path) { %><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none"><path style="stroke-width: .02; stroke:red; fill-opacity:.3; fill:red;" d="<%- node.clip_path %>"/></svg><% }%>' + |
|
22 '</div></div><p><label><%-renkan.translate("Image URL:")%></label><div><a class="Rk-Edit-Image-Del" href="#"></a><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></div></p>' + |
|
23 '<% if (options.allow_image_upload) { %><p><label><%-renkan.translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p><% }%><% } %>' + |
|
24 '<% if (options.show_node_editor_creator && node.has_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span> <span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- shortenText(node.created_by_title, 25) %></p><% } %>' + |
|
25 '<% if (options.change_shapes) { %><p><label><%-renkan.translate("Shapes available")%>:</label> <select class="Rk-Edit-Shape">' + |
|
26 '<option class="Rk-Edit-Vocabulary-Property" value="circle"<% if (node.shape === "circle") { %> selected<% } %>><%- renkan.translate("Circle") %></option>' + |
|
27 '<option class="Rk-Edit-Vocabulary-Property" value="rectangle"<% if (node.shape === "rectangle") { %> selected<% } %>><%- renkan.translate("Square") %></option>' + |
|
28 '<option class="Rk-Edit-Vocabulary-Property" value="diamond"<% if (node.shape === "diamond") { %> selected<% } %>><%- renkan.translate("Diamond") %></option>' + |
|
29 '<option class="Rk-Edit-Vocabulary-Property" value="polygon"<% if (node.shape === "polygon") { %> selected<% } %>><%- renkan.translate("Hexagone") %></option>' + |
|
30 '<option class="Rk-Edit-Vocabulary-Property" value="ellipse"<% if (node.shape === "ellipse") { %> selected<% } %>><%- renkan.translate("Ellipse") %></option>' + |
|
31 '<option class="Rk-Edit-Vocabulary-Property" value="star"<% if (node.shape === "star") { %> selected<% } %>><%- renkan.translate("Star") %></option>' + |
|
32 '</select></p><% } %>' |
|
33 ), |
|
34 readOnlyTemplate: _.template( |
|
35 '<h2><span class="Rk-CloseX">×</span><% if (options.show_node_tooltip_color) { %><span class="Rk-UserColor" style="background:<%-node.color%>;"></span><% } %>' + |
|
36 '<span class="Rk-Display-Title"><% if (node.uri) { %><a href="<%-node.uri%>" target="_blank"><% } %><%-node.title%><% if (node.uri) { %></a><% } %></span></h2>' + |
|
37 '<% if (node.uri && options.show_node_tooltip_uri) { %><p class="Rk-Display-URI"><a href="<%-node.uri%>" target="_blank"><%-node.short_uri%></a></p><% } %>' + |
|
38 '<% if (options.show_node_tooltip_description) { %><p class="Rk-Display-Description"><%-node.description%></p><% } %>' + |
|
39 '<% if (node.image && options.show_node_tooltip_image) { %><img class="Rk-Display-ImgPreview" src="<%-node.image%>" /><% } %>' + |
|
40 '<% if (node.has_creator && options.show_node_tooltip_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- shortenText(node.created_by_title, 25) %></p><% } %>' |
|
41 ), |
|
42 draw: function() { |
17 draw: function() { |
43 var _model = this.source_representation.model, |
18 var _model = this.source_representation.model, |
44 _created_by = _model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan), |
19 _created_by = _model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan), |
45 _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate ), |
20 _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate ), |
46 _image_placeholder = this.options.static_url + "img/image-placeholder.png", |
21 _image_placeholder = this.options.static_url + "img/image-placeholder.png", |