19 '<%= renkan.colorPicker %><span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span></div></div><% } %>' + |
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%>" />' + |
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><% }%>' + |
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><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></p>' + |
22 '</div></div><p><label><%-renkan.translate("Image URL:")%></label><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></p>' + |
23 '<p><label><%-renkan.translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p><% } %>' + |
23 '<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><% } %>' |
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><% } %>' |
25 ), |
33 ), |
26 readOnlyTemplate: _.template( |
34 readOnlyTemplate: _.template( |
27 '<h2><span class="Rk-CloseX">×</span><% if (options.show_node_tooltip_color) { %><span class="Rk-UserColor" style="background:<%-node.color%>;"></span><% } %>' + |
35 '<h2><span class="Rk-CloseX">×</span><% if (options.show_node_tooltip_color) { %><span class="Rk-UserColor" style="background:<%-node.color%>;"></span><% } %>' + |
28 '<span class="Rk-Display-Title"><% if (node.uri) { %><a href="<%-node.uri%>" target="_blank"><% } %><%-node.title%><% if (node.uri) { %></a><% } %></span></h2>' + |
36 '<span class="Rk-Display-Title"><% if (node.uri) { %><a href="<%-node.uri%>" target="_blank"><% } %><%-node.title%><% if (node.uri) { %></a><% } %></span></h2>' + |
29 '<% if (node.uri && options.show_node_tooltip_uri) { %><p class="Rk-Display-URI"><a href="<%-node.uri%>" target="_blank"><%-node.short_uri%></a></p><% } %>' + |
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><% } %>' + |
49 image_placeholder: _image_placeholder, |
57 image_placeholder: _image_placeholder, |
50 color: _model.get("color") || _created_by.get("color"), |
58 color: _model.get("color") || _created_by.get("color"), |
51 clip_path: _model.get("clip_path") || false, |
59 clip_path: _model.get("clip_path") || false, |
52 created_by_color: _created_by.get("color"), |
60 created_by_color: _created_by.get("color"), |
53 created_by_title: _created_by.get("title"), |
61 created_by_title: _created_by.get("title"), |
54 size: (_size > 0 ? "+" : "") + _size |
62 size: (_size > 0 ? "+" : "") + _size, |
|
63 shape: _model.get("shape") || "circle" |
55 }, |
64 }, |
56 renkan: this.renkan, |
65 renkan: this.renkan, |
57 options: this.options, |
66 options: this.options, |
58 shortenText: Utils.shortenText |
67 shortenText: Utils.shortenText |
59 })); |
68 })); |
76 |
85 |
77 var onFieldChange = _(function() { |
86 var onFieldChange = _(function() { |
78 _(function() { |
87 _(function() { |
79 if (_this.renderer.isEditable()) { |
88 if (_this.renderer.isEditable()) { |
80 var _data = { |
89 var _data = { |
81 title: _this.editor_$.find(".Rk-Edit-Title").val() |
90 title: _this.editor_$.find(".Rk-Edit-Title").val() |
82 }; |
91 }; |
83 if (_this.options.show_node_editor_uri) { |
92 if (_this.options.show_node_editor_uri) { |
84 _data.uri = _this.editor_$.find(".Rk-Edit-URI").val(); |
93 _data.uri = _this.editor_$.find(".Rk-Edit-URI").val(); |
85 _this.editor_$.find(".Rk-Edit-Goto").attr("href",_data.uri || "#"); |
94 _this.editor_$.find(".Rk-Edit-Goto").attr("href",_data.uri || "#"); |
86 } |
95 } |
89 _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _data.image || _image_placeholder); |
98 _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _data.image || _image_placeholder); |
90 } |
99 } |
91 if (_this.options.show_node_editor_description) { |
100 if (_this.options.show_node_editor_description) { |
92 _data.description = _this.editor_$.find(".Rk-Edit-Description").val(); |
101 _data.description = _this.editor_$.find(".Rk-Edit-Description").val(); |
93 } |
102 } |
|
103 if (_this.options.change_shapes) { |
|
104 _data.shape = _this.editor_$.find(".Rk-Edit-Shape").val(); |
|
105 _data.shape_changed = true; |
|
106 } |
94 _model.set(_data); |
107 _model.set(_data); |
95 _this.redraw(); |
108 _this.redraw(); |
96 } else { |
109 } else { |
97 closeEditor(); |
110 closeEditor(); |
98 } |
111 } |
99 |
|
100 }).defer(); |
112 }).defer(); |
101 }).throttle(500); |
113 }).throttle(500); |
102 |
114 |
103 this.editor_$.on("keyup", function(_e) { |
115 this.editor_$.on("keyup", function(_e) { |
104 if (_e.keyCode === 27) { |
116 if (_e.keyCode === 27) { |
105 closeEditor(); |
117 closeEditor(); |
106 } |
118 } |
107 }); |
119 }); |
108 |
120 |
109 this.editor_$.find("input, textarea").on("change keyup paste", onFieldChange); |
121 this.editor_$.find("input, textarea, select").on("change keyup paste", onFieldChange); |
110 |
122 |
111 this.editor_$.find(".Rk-Edit-Image-File").change(function() { |
123 this.editor_$.find(".Rk-Edit-Image-File").change(function() { |
112 if (this.files.length) { |
124 if (this.files.length) { |
113 var f = this.files[0], |
125 var f = this.files[0], |
114 fr = new FileReader(); |
126 fr = new FileReader(); |