| author | ymh <ymh.work@gmail.com> |
| Fri, 16 May 2014 14:09:57 +0200 | |
| changeset 293 | fba23fde14ba |
| parent 284 | fa8035885814 |
| child 330 | 4f92e61f87ba |
| permissions | -rw-r--r-- |
| 284 | 1 |
|
2 |
define(['jquery', 'underscore', 'requtils', 'renderer/baseeditor'], function ($, _, requtils, BaseEditor) { |
|
|
293
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
3 |
'use strict'; |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
4 |
|
| 284 | 5 |
var Utils = requtils.getUtils(); |
6 |
||
7 |
/* NodeEditor Begin */ |
|
8 |
//var NodeEditor = Renderer.NodeEditor = Utils.inherit(Renderer._BaseEditor); |
|
9 |
var NodeEditor = Utils.inherit(BaseEditor); |
|
10 |
||
11 |
_(NodeEditor.prototype).extend({ |
|
12 |
template: _.template( |
|
|
293
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
13 |
'<h2><span class="Rk-CloseX">×</span><%-renkan.translate("Edit Node")%></span></h2>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
14 |
'<p><label><%-renkan.translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%-node.title%>"/></p>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
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><% } %>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
16 |
'<% if (options.show_node_editor_description) { %><p><label><%-renkan.translate("Description:")%></label><textarea class="Rk-Edit-Description"><%-node.description%></textarea></p><% } %>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
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><% } %>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
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>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
19 |
'<%= renkan.colorPicker %><span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span></div></div><% } %>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
20 |
'<% if (options.show_node_editor_image) { %><div class="Rk-Edit-ImgWrap"><div class="Rk-Edit-ImgPreview"><img src="<%-node.image || node.image_placeholder%>" />' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
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><% }%>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
22 |
'</div></div><p><label><%-renkan.translate("Image URL:")%></label><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></p>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
23 |
'<p><label><%-renkan.translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p><% } %>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
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><% } %>' |
| 284 | 25 |
), |
26 |
readOnlyTemplate: _.template( |
|
|
293
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
27 |
'<h2><span class="Rk-CloseX">×</span><% if (options.show_node_tooltip_color) { %><span class="Rk-UserColor" style="background:<%-node.color%>;"></span><% } %>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
28 |
'<span class="Rk-Display-Title"><% if (node.uri) { %><a href="<%-node.uri%>" target="_blank"><% } %><%-node.title%><% if (node.uri) { %></a><% } %></span></h2>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
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><% } %>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
30 |
'<% if (options.show_node_tooltip_description) { %><p class="Rk-Display-Description"><%-node.description%></p><% } %>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
31 |
'<% if (node.image && options.show_node_tooltip_image) { %><img class="Rk-Display-ImgPreview" src="<%-node.image%>" /><% } %>' + |
|
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
32 |
'<% 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><% } %>' |
| 284 | 33 |
), |
34 |
draw: function() { |
|
35 |
var _model = this.source_representation.model, |
|
36 |
_created_by = _model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan), |
|
37 |
_template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate ), |
|
38 |
_image_placeholder = this.options.static_url + "img/image-placeholder.png", |
|
39 |
_size = (_model.get("size") || 0); |
|
40 |
this.editor_$ |
|
41 |
.html(_template({ |
|
42 |
node: { |
|
43 |
has_creator: !!_model.get("created_by"), |
|
44 |
title: _model.get("title"), |
|
45 |
uri: _model.get("uri"), |
|
46 |
short_uri: Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40), |
|
47 |
description: _model.get("description"), |
|
48 |
image: _model.get("image") || "", |
|
49 |
image_placeholder: _image_placeholder, |
|
50 |
color: _model.get("color") || _created_by.get("color"), |
|
51 |
clip_path: _model.get("clip_path") || false, |
|
52 |
created_by_color: _created_by.get("color"), |
|
53 |
created_by_title: _created_by.get("title"), |
|
54 |
size: (_size > 0 ? "+" : "") + _size |
|
55 |
}, |
|
56 |
renkan: this.renkan, |
|
57 |
options: this.options, |
|
58 |
shortenText: Utils.shortenText |
|
59 |
})); |
|
60 |
this.redraw(); |
|
61 |
var _this = this, |
|
62 |
closeEditor = function() { |
|
63 |
_this.renderer.removeRepresentation(_this); |
|
64 |
paper.view.draw(); |
|
65 |
}; |
|
66 |
||
67 |
this.editor_$.find(".Rk-CloseX").click(closeEditor); |
|
68 |
||
69 |
this.editor_$.find(".Rk-Edit-Goto").click(function() { |
|
70 |
if (!_model.get("uri")) { |
|
71 |
return false; |
|
72 |
} |
|
73 |
}); |
|
74 |
||
75 |
if (this.renderer.isEditable()) { |
|
76 |
||
77 |
var onFieldChange = _(function() { |
|
78 |
_(function() { |
|
79 |
if (_this.renderer.isEditable()) { |
|
80 |
var _data = { |
|
81 |
title: _this.editor_$.find(".Rk-Edit-Title").val() |
|
82 |
}; |
|
83 |
if (_this.options.show_node_editor_uri) { |
|
84 |
_data.uri = _this.editor_$.find(".Rk-Edit-URI").val(); |
|
85 |
_this.editor_$.find(".Rk-Edit-Goto").attr("href",_data.uri || "#"); |
|
86 |
} |
|
87 |
if (_this.options.show_node_editor_image) { |
|
88 |
_data.image = _this.editor_$.find(".Rk-Edit-Image").val(); |
|
89 |
_this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _data.image || _image_placeholder); |
|
90 |
} |
|
91 |
if (_this.options.show_node_editor_description) { |
|
92 |
_data.description = _this.editor_$.find(".Rk-Edit-Description").val(); |
|
93 |
} |
|
94 |
_model.set(_data); |
|
95 |
_this.redraw(); |
|
96 |
} else { |
|
97 |
closeEditor(); |
|
98 |
} |
|
99 |
||
100 |
}).defer(); |
|
101 |
}).throttle(500); |
|
102 |
||
103 |
this.editor_$.on("keyup", function(_e) { |
|
104 |
if (_e.keyCode === 27) { |
|
105 |
closeEditor(); |
|
106 |
} |
|
107 |
}); |
|
108 |
||
109 |
this.editor_$.find("input, textarea").on("change keyup paste", onFieldChange); |
|
110 |
||
111 |
this.editor_$.find(".Rk-Edit-Image-File").change(function() { |
|
112 |
if (this.files.length) { |
|
113 |
var f = this.files[0], |
|
114 |
fr = new FileReader(); |
|
115 |
if (f.type.substr(0,5) !== "image") { |
|
116 |
alert(_this.renkan.translate("This file is not an image")); |
|
117 |
return; |
|
118 |
} |
|
119 |
if (f.size > (_this.options.uploaded_image_max_kb * 1024)) { |
|
120 |
alert(_this.renkan.translate("Image size must be under ") + _this.options.uploaded_image_max_kb + _this.renkan.translate("KB")); |
|
121 |
return; |
|
122 |
} |
|
123 |
fr.onload = function(e) { |
|
124 |
_this.editor_$.find(".Rk-Edit-Image").val(e.target.result); |
|
125 |
onFieldChange(); |
|
126 |
}; |
|
127 |
fr.readAsDataURL(f); |
|
128 |
} |
|
129 |
}); |
|
130 |
this.editor_$.find(".Rk-Edit-Title")[0].focus(); |
|
131 |
||
132 |
var _picker = _this.editor_$.find(".Rk-Edit-ColorPicker"); |
|
133 |
||
134 |
this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover( |
|
135 |
function(_e) { |
|
136 |
_e.preventDefault(); |
|
137 |
_picker.show(); |
|
138 |
}, |
|
139 |
function(_e) { |
|
140 |
_e.preventDefault(); |
|
141 |
_picker.hide(); |
|
142 |
} |
|
143 |
); |
|
144 |
||
145 |
_picker.find("li").hover( |
|
146 |
function(_e) { |
|
147 |
_e.preventDefault(); |
|
148 |
_this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); |
|
149 |
}, |
|
150 |
function(_e) { |
|
151 |
_e.preventDefault(); |
|
152 |
_this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Utils._USER_PLACEHOLDER(_this.renkan)).get("color")); |
|
153 |
} |
|
154 |
).click(function(_e) { |
|
155 |
_e.preventDefault(); |
|
156 |
if (_this.renderer.isEditable()) { |
|
157 |
_model.set("color", $(this).attr("data-color")); |
|
158 |
_picker.hide(); |
|
159 |
paper.view.draw(); |
|
160 |
} else { |
|
161 |
closeEditor(); |
|
162 |
} |
|
163 |
}); |
|
164 |
||
165 |
var shiftSize = function(n) { |
|
166 |
if (_this.renderer.isEditable()) { |
|
167 |
var _newsize = n+(_model.get("size") || 0); |
|
168 |
_this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize); |
|
169 |
_model.set("size", _newsize); |
|
170 |
paper.view.draw(); |
|
171 |
} else { |
|
172 |
closeEditor(); |
|
173 |
} |
|
174 |
}; |
|
175 |
||
176 |
this.editor_$.find(".Rk-Edit-Size-Down").click(function() { |
|
177 |
shiftSize(-1); |
|
178 |
return false; |
|
179 |
}); |
|
180 |
this.editor_$.find(".Rk-Edit-Size-Up").click(function() { |
|
181 |
shiftSize(1); |
|
182 |
return false; |
|
183 |
}); |
|
184 |
} else { |
|
185 |
if (typeof this.source_representation.highlighted === "object") { |
|
186 |
var titlehtml = this.source_representation.highlighted.replace(_(_model.get("title")).escape(),'<span class="Rk-Highlighted">$1</span>'); |
|
187 |
this.editor_$.find(".Rk-Display-Title" + (_model.get("uri") ? " a" : "")).html(titlehtml); |
|
188 |
if (this.options.show_node_tooltip_description) { |
|
189 |
this.editor_$.find(".Rk-Display-Description").html(this.source_representation.highlighted.replace(_(_model.get("description")).escape(),'<span class="Rk-Highlighted">$1</span>')); |
|
190 |
} |
|
191 |
} |
|
192 |
} |
|
193 |
this.editor_$.find("img").load(function() { |
|
194 |
_this.redraw(); |
|
195 |
}); |
|
196 |
}, |
|
197 |
redraw: function() { |
|
198 |
var _coords = this.source_representation.paper_coords; |
|
|
293
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
199 |
Utils.drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * 0.75, this.editor_$); |
| 284 | 200 |
this.editor_$.show(); |
201 |
paper.view.draw(); |
|
202 |
} |
|
203 |
}); |
|
204 |
||
205 |
/* NodeEditor End */ |
|
|
293
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
206 |
|
| 284 | 207 |
return NodeEditor; |
208 |
||
|
293
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
209 |
}); |