| author | rougeronj |
| Tue, 05 May 2015 17:59:14 +0200 | |
| changeset 445 | 705a2e9c6c9d |
| parent 435 | e529b633c339 |
| child 447 | e246651b6626 |
| 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({ |
|
|
435
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
12 |
_init: function() { |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
13 |
BaseEditor.prototype._init.apply(this); |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
14 |
this.template = this.options.templates['templates/nodeeditor.html']; |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
15 |
this.readOnlyTemplate = this.options.templates['templates/nodeeditor_readonly.html']; |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
16 |
}, |
| 284 | 17 |
draw: function() { |
18 |
var _model = this.source_representation.model, |
|
19 |
_created_by = _model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan), |
|
20 |
_template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate ), |
|
21 |
_image_placeholder = this.options.static_url + "img/image-placeholder.png", |
|
22 |
_size = (_model.get("size") || 0); |
|
23 |
this.editor_$ |
|
24 |
.html(_template({ |
|
25 |
node: { |
|
26 |
has_creator: !!_model.get("created_by"), |
|
27 |
title: _model.get("title"), |
|
28 |
uri: _model.get("uri"), |
|
29 |
short_uri: Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40), |
|
30 |
description: _model.get("description"), |
|
31 |
image: _model.get("image") || "", |
|
32 |
image_placeholder: _image_placeholder, |
|
33 |
color: _model.get("color") || _created_by.get("color"), |
|
34 |
clip_path: _model.get("clip_path") || false, |
|
35 |
created_by_color: _created_by.get("color"), |
|
36 |
created_by_title: _created_by.get("title"), |
|
| 330 | 37 |
size: (_size > 0 ? "+" : "") + _size, |
38 |
shape: _model.get("shape") || "circle" |
|
| 284 | 39 |
}, |
40 |
renkan: this.renkan, |
|
41 |
options: this.options, |
|
42 |
shortenText: Utils.shortenText |
|
43 |
})); |
|
44 |
this.redraw(); |
|
45 |
var _this = this, |
|
46 |
closeEditor = function() { |
|
|
435
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
47 |
_this.editor_$.off("keyup"); |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
48 |
_this.editor_$.find("input, textarea, select").off("change keyup paste"); |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
49 |
_this.editor_$.find(".Rk-Edit-Image-File").off('change'); |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
50 |
_this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").off('hover'); |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
51 |
_this.editor_$.find(".Rk-Edit-Size-Down").off('click'); |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
52 |
_this.editor_$.find(".Rk-Edit-Size-Up").off('click'); |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
53 |
_this.editor_$.find(".Rk-Edit-Image-Del").off('click'); |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
54 |
_this.editor_$.find(".Rk-Edit-ColorPicker").find("li").off('hover click'); |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
55 |
_this.editor_$.find(".Rk-CloseX").off('click'); |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
56 |
_this.editor_$.find(".Rk-Edit-Goto").off('click'); |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
57 |
|
| 284 | 58 |
_this.renderer.removeRepresentation(_this); |
59 |
paper.view.draw(); |
|
60 |
}; |
|
61 |
||
62 |
this.editor_$.find(".Rk-CloseX").click(closeEditor); |
|
63 |
||
64 |
this.editor_$.find(".Rk-Edit-Goto").click(function() { |
|
65 |
if (!_model.get("uri")) { |
|
66 |
return false; |
|
67 |
} |
|
68 |
}); |
|
69 |
||
70 |
if (this.renderer.isEditable()) { |
|
71 |
||
| 433 | 72 |
var onFieldChange = _.throttle(function() { |
73 |
_.defer(function() { |
|
74 |
if (_this.renderer.isEditable()) { |
|
75 |
var _data = { |
|
76 |
title: _this.editor_$.find(".Rk-Edit-Title").val() |
|
77 |
}; |
|
78 |
if (_this.options.show_node_editor_uri) { |
|
79 |
_data.uri = _this.editor_$.find(".Rk-Edit-URI").val(); |
|
80 |
_this.editor_$.find(".Rk-Edit-Goto").attr("href",_data.uri || "#"); |
|
81 |
} |
|
82 |
if (_this.options.show_node_editor_image) { |
|
83 |
_data.image = _this.editor_$.find(".Rk-Edit-Image").val(); |
|
84 |
_this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _data.image || _image_placeholder); |
|
85 |
} |
|
86 |
if (_this.options.show_node_editor_description) { |
|
87 |
_data.description = _this.editor_$.find(".Rk-Edit-Description").val(); |
|
88 |
} |
|
89 |
if (_this.options.change_shapes) { |
|
90 |
if(_model.get("shape")!==_this.editor_$.find(".Rk-Edit-Shape").val()){ |
|
91 |
_data.shape = _this.editor_$.find(".Rk-Edit-Shape").val(); |
|
| 284 | 92 |
} |
| 433 | 93 |
} |
94 |
_model.set(_data); |
|
95 |
_this.redraw(); |
|
96 |
} else { |
|
97 |
closeEditor(); |
|
98 |
} |
|
99 |
}); |
|
100 |
}, 500); |
|
101 |
||
| 284 | 102 |
this.editor_$.on("keyup", function(_e) { |
103 |
if (_e.keyCode === 27) { |
|
104 |
closeEditor(); |
|
105 |
} |
|
106 |
}); |
|
107 |
||
| 330 | 108 |
this.editor_$.find("input, textarea, select").on("change keyup paste", onFieldChange); |
| 284 | 109 |
|
| 385 | 110 |
if(_this.options.allow_image_upload) { |
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); |
|
| 284 | 128 |
} |
| 385 | 129 |
}); |
130 |
} |
|
| 284 | 131 |
this.editor_$.find(".Rk-Edit-Title")[0].focus(); |
132 |
||
133 |
var _picker = _this.editor_$.find(".Rk-Edit-ColorPicker"); |
|
134 |
||
135 |
this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover( |
|
136 |
function(_e) { |
|
137 |
_e.preventDefault(); |
|
138 |
_picker.show(); |
|
139 |
}, |
|
140 |
function(_e) { |
|
141 |
_e.preventDefault(); |
|
142 |
_picker.hide(); |
|
143 |
} |
|
144 |
); |
|
145 |
||
146 |
_picker.find("li").hover( |
|
147 |
function(_e) { |
|
148 |
_e.preventDefault(); |
|
149 |
_this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); |
|
150 |
}, |
|
151 |
function(_e) { |
|
152 |
_e.preventDefault(); |
|
153 |
_this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Utils._USER_PLACEHOLDER(_this.renkan)).get("color")); |
|
154 |
} |
|
155 |
).click(function(_e) { |
|
156 |
_e.preventDefault(); |
|
157 |
if (_this.renderer.isEditable()) { |
|
158 |
_model.set("color", $(this).attr("data-color")); |
|
159 |
_picker.hide(); |
|
160 |
paper.view.draw(); |
|
161 |
} else { |
|
162 |
closeEditor(); |
|
163 |
} |
|
164 |
}); |
|
165 |
||
166 |
var shiftSize = function(n) { |
|
167 |
if (_this.renderer.isEditable()) { |
|
168 |
var _newsize = n+(_model.get("size") || 0); |
|
169 |
_this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize); |
|
170 |
_model.set("size", _newsize); |
|
171 |
paper.view.draw(); |
|
172 |
} else { |
|
173 |
closeEditor(); |
|
174 |
} |
|
175 |
}; |
|
176 |
||
177 |
this.editor_$.find(".Rk-Edit-Size-Down").click(function() { |
|
178 |
shiftSize(-1); |
|
179 |
return false; |
|
180 |
}); |
|
181 |
this.editor_$.find(".Rk-Edit-Size-Up").click(function() { |
|
182 |
shiftSize(1); |
|
183 |
return false; |
|
184 |
}); |
|
| 433 | 185 |
|
|
384
6a7930a0d4d1
Close #60 - Add a trash icon to delete the image URL
rougeronj
parents:
331
diff
changeset
|
186 |
this.editor_$.find(".Rk-Edit-Image-Del").click(function() { |
|
435
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
187 |
_this.editor_$.find(".Rk-Edit-Image").val(''); |
|
e529b633c339
Add shape management, correction on shape manip[ulation on the client, correct 404 error on space creation, increment version
ymh <ymh.work@gmail.com>
parents:
434
diff
changeset
|
188 |
onFieldChange(); |
|
384
6a7930a0d4d1
Close #60 - Add a trash icon to delete the image URL
rougeronj
parents:
331
diff
changeset
|
189 |
return false; |
|
6a7930a0d4d1
Close #60 - Add a trash icon to delete the image URL
rougeronj
parents:
331
diff
changeset
|
190 |
}); |
| 284 | 191 |
} else { |
192 |
if (typeof this.source_representation.highlighted === "object") { |
|
193 |
var titlehtml = this.source_representation.highlighted.replace(_(_model.get("title")).escape(),'<span class="Rk-Highlighted">$1</span>'); |
|
194 |
this.editor_$.find(".Rk-Display-Title" + (_model.get("uri") ? " a" : "")).html(titlehtml); |
|
195 |
if (this.options.show_node_tooltip_description) { |
|
196 |
this.editor_$.find(".Rk-Display-Description").html(this.source_representation.highlighted.replace(_(_model.get("description")).escape(),'<span class="Rk-Highlighted">$1</span>')); |
|
197 |
} |
|
198 |
} |
|
199 |
} |
|
200 |
this.editor_$.find("img").load(function() { |
|
201 |
_this.redraw(); |
|
202 |
}); |
|
203 |
}, |
|
204 |
redraw: function() { |
|
|
445
705a2e9c6c9d
Add popup_editor and editor_panel option to allow the editor panel to bin in an external div
rougeronj
parents:
435
diff
changeset
|
205 |
if (this.options.popup_editor){ |
|
705a2e9c6c9d
Add popup_editor and editor_panel option to allow the editor panel to bin in an external div
rougeronj
parents:
435
diff
changeset
|
206 |
var _coords = this.source_representation.paper_coords; |
|
705a2e9c6c9d
Add popup_editor and editor_panel option to allow the editor panel to bin in an external div
rougeronj
parents:
435
diff
changeset
|
207 |
Utils.drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * 0.75, this.editor_$); |
|
705a2e9c6c9d
Add popup_editor and editor_panel option to allow the editor panel to bin in an external div
rougeronj
parents:
435
diff
changeset
|
208 |
} |
| 284 | 209 |
this.editor_$.show(); |
210 |
paper.view.draw(); |
|
211 |
} |
|
| 433 | 212 |
}).value(); |
|
434
0d5998b32a7c
clean, and finalize lodash migration
ymh <ymh.work@gmail.com>
parents:
433
diff
changeset
|
213 |
|
| 284 | 214 |
/* NodeEditor End */ |
|
293
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
215 |
|
| 284 | 216 |
return NodeEditor; |
217 |
||
|
293
fba23fde14ba
Correct jshint errors and force it on build
ymh <ymh.work@gmail.com>
parents:
284
diff
changeset
|
218 |
}); |