| author | terom |
| Sun, 20 Jan 2008 01:52:00 +0000 | |
| changeset 25 | 4b3cf12848c2 |
| parent 24 | 001f52cd057e |
| permissions | -rw-r--r-- |
| 24 | 1 |
/* |
2 |
* dir-list manipulation |
|
3 |
*/ |
|
| 23 | 4 |
function toggle_dir (header_a_tag) {
|
5 |
var div = Element.next(header_a_tag); |
|
6 |
||
7 |
if (div._have_contents) {
|
|
| 24 | 8 |
if (div.visible()) {
|
| 23 | 9 |
Effect.BlindUp(div, {duration: 0.5});
|
| 24 | 10 |
func = hide_tag_image; |
11 |
} else {
|
|
| 23 | 12 |
Effect.BlindDown(div, {duration: 0.5});
|
| 24 | 13 |
func = show_tag_image; |
14 |
} |
|
15 |
||
16 |
Element.up(header_a_tag)._images.each(function(key){
|
|
17 |
$("img_" + key)._tags.each(function(tag){
|
|
18 |
func(tag, key); |
|
19 |
}); |
|
20 |
}); |
|
21 |
||
| 23 | 22 |
} else {
|
23 |
||
24 |
new Ajax.Updater(div, "taggr2.py", {
|
|
25 |
parameters: {
|
|
26 |
act: "dirlist", |
|
27 |
path: div.id, |
|
28 |
}, |
|
29 |
method: 'get', |
|
30 |
onSuccess: function () {
|
|
31 |
Effect.BlindDown(div, {duration: 0.5});
|
|
32 |
div._have_contents = true; |
|
33 |
} |
|
34 |
}); |
|
35 |
} |
|
36 |
} |
|
37 |
||
| 24 | 38 |
var g_last_select; |
39 |
function image_click (img, ev) {
|
|
40 |
var updiv = img.up(2); |
|
| 23 | 41 |
|
| 24 | 42 |
if (img.hasClassName("selection")) {
|
43 |
img.removeClassName("selection");
|
|
44 |
||
45 |
} else if (ev.shiftKey && g_last_select && g_last_select.up(2) == updiv) {
|
|
46 |
var from = Math.min(img._offset, g_last_select._offset); |
|
47 |
var to = Math.max(img._offset, g_last_select._offset); |
|
48 |
||
49 |
for (var i = from; i <= to; i++) {
|
|
50 |
$("img_" + updiv._images[i]).addClassName("selection");
|
|
51 |
} |
|
52 |
||
53 |
g_last_select = img; |
|
54 |
} else {
|
|
55 |
||
56 |
g_last_select = img; |
|
57 |
img.addClassName("selection");
|
|
58 |
} |
|
| 23 | 59 |
} |
60 |
||
| 24 | 61 |
function selection_clear () {
|
62 |
$$(".selection").each(function(e){
|
|
63 |
e.removeClassName("selection");
|
|
64 |
}); |
|
| 23 | 65 |
} |
66 |
||
| 24 | 67 |
/* |
68 |
* image-loading callback |
|
69 |
*/ |
|
70 |
function image_info (img, offset, key, tags) {
|
|
71 |
img._key = key; |
|
72 |
img._tags = $A(tags); |
|
73 |
img._offset = offset; |
|
74 |
||
75 |
img._tags.each(function(tag){
|
|
76 |
if (!$('tag_' + tag + '_images'))
|
|
77 |
new_tag(tag); |
|
| 23 | 78 |
|
| 24 | 79 |
tag_add_image(img, null, tag, false); |
80 |
}); |
|
81 |
||
82 |
var dir = img.up(2); |
|
83 |
||
84 |
if (!dir._images) |
|
85 |
dir._images = new Array(); |
|
86 |
||
87 |
dir._images.push(img._key); |
|
| 23 | 88 |
} |
89 |
||
| 24 | 90 |
/* |
91 |
* tag list manipulation code |
|
92 |
*/ |
|
93 |
function _tag_name (tag_name) {
|
|
94 |
var tag_name_p = Builder.node("p", {id:"tag_" + tag_name + "_name", className: "draggable tag_name"}, [tag_name]);
|
|
95 |
||
96 |
tag_name_p._tag = tag_name; |
|
97 |
||
98 |
return tag_name_p; |
|
| 23 | 99 |
} |
100 |
||
| 24 | 101 |
function new_tag (tag_name) {
|
|
25
4b3cf12848c2
tweaks/bugfixes (e.g. support adding multiple tags to an image at once)
terom
parents:
24
diff
changeset
|
102 |
if ($("tag_" + tag_name)) {
|
|
4b3cf12848c2
tweaks/bugfixes (e.g. support adding multiple tags to an image at once)
terom
parents:
24
diff
changeset
|
103 |
$("tag_" + tag_name).show().scrollTo();
|
|
4b3cf12848c2
tweaks/bugfixes (e.g. support adding multiple tags to an image at once)
terom
parents:
24
diff
changeset
|
104 |
} |
|
4b3cf12848c2
tweaks/bugfixes (e.g. support adding multiple tags to an image at once)
terom
parents:
24
diff
changeset
|
105 |
|
| 24 | 106 |
var tag_images = Builder.node("td", {className:"tag_images", id:"tag_" + tag_name + "_images"});
|
107 |
||
108 |
tag_images._tag = tag_name; |
|
109 |
tag_images._visibleCount = 0; |
|
110 |
tag_images._images = new Array(); |
|
111 |
||
112 |
var tag_row = Builder.node("tr", {className:"tag_row", id:"tag_" + tag_name}, [
|
|
113 |
Builder.node("td", {className:"tag", id:"tag_" + tag_name + "_tags"}, [
|
|
114 |
_tag_name(tag_name) |
|
115 |
]), |
|
116 |
tag_images |
|
117 |
]); |
|
118 |
||
119 |
tag_row._tag = tag_name; |
|
120 |
tag_row._tags = new Array(tag_name); |
|
121 |
||
122 |
$("tag_table").appendChild(tag_row);
|
|
|
25
4b3cf12848c2
tweaks/bugfixes (e.g. support adding multiple tags to an image at once)
terom
parents:
24
diff
changeset
|
123 |
|
|
4b3cf12848c2
tweaks/bugfixes (e.g. support adding multiple tags to an image at once)
terom
parents:
24
diff
changeset
|
124 |
return true; |
| 24 | 125 |
} |
126 |
||
127 |
function tag_add_tag (new_tag, tag) {
|
|
128 |
var tag_row = $("tag_" + tag);
|
|
129 |
||
130 |
if (tag_row._tags.indexOf(new_tag) != -1) |
|
131 |
return false; |
|
132 |
||
133 |
tag_row._tags.push(new_tag); |
|
134 |
||
135 |
$("tag_" + tag + "_tags").appendChild(_tag_name(new_tag));
|
|
136 |
||
137 |
/* |
|
138 |
new Ajax.Request("taggr2.py", {
|
|
139 |
parameters: {
|
|
140 |
act: 'tag', |
|
141 |
tag: new_tag, |
|
142 |
img: $("tag_" + tag + "_images")._images,
|
|
143 |
}, |
|
144 |
method: 'get' |
|
145 |
}); |
|
146 |
*/ |
|
147 |
} |
|
148 |
||
149 |
function tag_remove_tag (tag_name) {
|
|
150 |
var tag_row = $("tag_" + tag_name + "_name").up(1);
|
|
151 |
array_remove(tag_row._tags, tag_name); |
|
152 |
||
153 |
$("tag_" + tag_row._tag + "_tags").removeChild($("tag_" + tag_name + "_name"));
|
|
154 |
||
155 |
if (tag_row._tags.length == 0) |
|
156 |
$("tag_table").removeChild(tag_row);
|
|
157 |
} |
|
158 |
||
159 |
function get_tag (tag_name, postfix) {
|
|
160 |
return $("tag_" + $("tag_" + tag_name).up(1)._tag + "_" + postfix);
|
|
161 |
} |
|
162 |
||
163 |
function tag_add_image (orig_img, copy_img, tag, saveToDB) {
|
|
164 |
var tag_images = $('tag_' + tag + '_images');
|
|
165 |
||
166 |
if (tag_images._images.indexOf(orig_img._key) != -1) |
|
167 |
return false; |
|
168 |
||
169 |
if (!copy_img) |
|
170 |
copy_img = image_copy(orig_img); |
|
171 |
||
172 |
tag_images._images.push(orig_img._key) |
|
173 |
orig_img._tags.push(tag); |
|
174 |
||
175 |
copy_img.id = "tag_" + tag + "_img_" + orig_img._key |
|
176 |
copy_img._tag = tag; |
|
177 |
||
178 |
tag_images.appendChild(copy_img); |
|
179 |
tag_images._visibleCount++; |
|
180 |
||
181 |
if (saveToDB) {
|
|
182 |
new Ajax.Request("taggr2.py", {
|
|
183 |
parameters: {
|
|
184 |
act: 'tag', |
|
185 |
img: orig_img._key, |
|
|
25
4b3cf12848c2
tweaks/bugfixes (e.g. support adding multiple tags to an image at once)
terom
parents:
24
diff
changeset
|
186 |
tag: $("tag_" + tag)._tags,
|
| 24 | 187 |
}, |
188 |
method: 'get' |
|
189 |
||
190 |
}); |
|
191 |
} |
|
192 |
} |
|
193 |
||
194 |
function tag_add_images (images, tag_name) {
|
|
195 |
var tag_images = $('tag_' + tag_name + '_images');
|
|
196 |
var copy_img, img_keys = new Array(); |
|
197 |
||
198 |
images.each(function(orig_img){
|
|
199 |
tag_add_image(orig_img, null, tag_name, false); |
|
200 |
img_keys.push(orig_img._key); |
|
201 |
}); |
|
202 |
||
203 |
new Ajax.Request("taggr2.py", {
|
|
204 |
parameters: {
|
|
205 |
act: 'tag', |
|
206 |
img: img_keys, |
|
|
25
4b3cf12848c2
tweaks/bugfixes (e.g. support adding multiple tags to an image at once)
terom
parents:
24
diff
changeset
|
207 |
tag: $("tag_" + tag_name)._tags,
|
| 24 | 208 |
}, |
209 |
method: 'get' |
|
210 |
||
211 |
}); |
|
212 |
} |
|
213 |
||
214 |
function tag_remove_image (img_key, tag_name) {
|
|
215 |
var tag_images = $("tag_" + tag_name + "_images");
|
|
216 |
||
217 |
tag_images.removeChild($("tag_" + tag_name + "_img_" + img_key));
|
|
218 |
array_remove(tag_images._images, img_key); |
|
219 |
||
220 |
if (tag_images._images.length == 0) |
|
221 |
$("tag_" + tag_name).hide();
|
|
222 |
||
223 |
new Ajax.Request("taggr2.py", {
|
|
224 |
parameters: {
|
|
225 |
act: 'untag', |
|
226 |
img: img_key, |
|
|
25
4b3cf12848c2
tweaks/bugfixes (e.g. support adding multiple tags to an image at once)
terom
parents:
24
diff
changeset
|
227 |
tag: $("tag_" + tag_name)._tags,
|
| 24 | 228 |
}, |
229 |
method: 'get', |
|
230 |
}); |
|
231 |
} |
|
232 |
||
233 |
function hide_tag_image (tag, img) {
|
|
|
25
4b3cf12848c2
tweaks/bugfixes (e.g. support adding multiple tags to an image at once)
terom
parents:
24
diff
changeset
|
234 |
$("tag_" + tag + "_img_" + img).hide();
|
| 24 | 235 |
|
236 |
if (--$("tag_" + tag + "_images")._visibleCount == 0)
|
|
237 |
$("tag_" + tag).hide();
|
|
238 |
} |
|
239 |
||
240 |
function show_tag_image (tag, img) {
|
|
|
25
4b3cf12848c2
tweaks/bugfixes (e.g. support adding multiple tags to an image at once)
terom
parents:
24
diff
changeset
|
241 |
$("tag_" + tag + "_img_" + img).show();
|
| 24 | 242 |
|
243 |
if ($("tag_" + tag + "_images")._visibleCount++ == 0)
|
|
244 |
$("tag_" + tag).show();
|
|
245 |
} |
|
246 |
||
247 |
/* |
|
248 |
* Frontend image drag code |
|
249 |
*/ |
|
250 |
var g_ghost; |
|
251 |
function drag_start (e) {
|
|
252 |
if (e.hasClassName("image") || e.hasClassName("tag_image"))
|
|
253 |
g_ghost = image_copy(e); |
|
254 |
else {
|
|
255 |
var name; |
|
256 |
||
257 |
if (e.hasClassName("tag_name"))
|
|
258 |
name = e._tag; |
|
259 |
else |
|
260 |
name = $F($('new_tag'));
|
|
261 |
||
262 |
g_ghost = Builder.node("span", {className: 'dragged'}, [name]);
|
|
263 |
} |
|
264 |
||
265 |
$('taggr').appendChild(g_ghost);
|
|
266 |
||
267 |
g_ghost.style.position = "absolute"; |
|
268 |
} |
|
269 |
||
270 |
function drag_move (e, ev) {
|
|
271 |
g_ghost.style.left = ev.pointerX() - g_offset.left + "px"; |
|
272 |
g_ghost.style.top = ev.pointerY() - g_offset.top + "px"; |
|
273 |
} |
|
274 |
||
275 |
function drag_end_drop (e, s, ev) {
|
|
276 |
g_ghost.style.position = "static"; |
|
277 |
$('taggr').removeChild(g_ghost);
|
|
278 |
||
279 |
if (e.hasClassName("image") || e.hasClassName("tag_image")) {
|
|
280 |
var selection = $$(".selection");
|
|
281 |
||
282 |
if (selection.length) |
|
283 |
tag_add_images($$(".selection"), s._tag);
|
|
284 |
else |
|
285 |
tag_add_image(e, g_ghost, s._tag, true); |
|
286 |
||
287 |
/* |
|
288 |
if (!tag_add_image(e, g_ghost, s._tag, true)) |
|
289 |
// it was already in there |
|
290 |
Effect.Shake("tagimg_" + s._tag + "_" + g_ghost._key);
|
|
291 |
*/ |
|
292 |
} else if (e.hasClassName("tag_name")) {
|
|
293 |
null; // breakpoint |
|
294 |
} else {
|
|
295 |
tag_add_tag($F($('new_tag')), s._tag);
|
|
296 |
} |
|
297 |
} |
|
298 |
||
299 |
function drag_end_fail (e, ev) {
|
|
300 |
if (e.hasClassName("tag_image")) {
|
|
301 |
tag_remove_image(e._key, e._tag); |
|
302 |
$('taggr').removeChild(g_ghost);
|
|
303 |
} else if (e.hasClassName("tag_name")) {
|
|
304 |
tag_remove_tag(e._tag); |
|
305 |
} else {
|
|
306 |
$('taggr').removeChild(g_ghost);
|
|
307 |
} |
|
308 |
} |
|
309 |
||
310 |
function drag_cleanup (e, ev) {
|
|
311 |
g_ghost = null; |
|
312 |
} |
|
313 |
||
314 |
function drag_hover (e, s, ev) {
|
|
315 |
s.addClassName("hover");
|
|
316 |
} |
|
317 |
||
318 |
function drag_unhover (e, s, ev) {
|
|
319 |
s.removeClassName("hover");
|
|
320 |
} |
|
321 |
||
322 |
/* |
|
323 |
* Backend image click/drag code |
|
324 |
*/ |
|
325 |
||
| 23 | 326 |
var g_drag, g_hover, g_start, g_offset, g_targets; |
327 |
function check_mouse_down (ev) {
|
|
328 |
var e = ev.element(); |
|
| 24 | 329 |
|
330 |
if (!ev.isLeftClick()) |
|
331 |
return true; |
|
| 23 | 332 |
|
| 24 | 333 |
if (e.hasClassName("image") || e.hasClassName("draggable") || e.hasClassName("tag_image")) {
|
| 23 | 334 |
g_drag = e; |
335 |
g_start = false; |
|
336 |
||
337 |
var offset = e.cumulativeOffset(); |
|
338 |
||
339 |
g_offset = {
|
|
340 |
'left': ev.pointerX() - offset.left, |
|
341 |
'top': ev.pointerY() - offset.top |
|
342 |
}; |
|
343 |
||
344 |
g_hover = null; |
|
345 |
||
| 24 | 346 |
g_targets = $$(".tag_row");
|
| 23 | 347 |
|
348 |
} else if (e.hasClassName("directory_link")) {
|
|
349 |
toggle_dir(e); |
|
350 |
||
351 |
} else {
|
|
352 |
return true; |
|
353 |
} |
|
354 |
||
355 |
ev.stop(); |
|
356 |
return false; |
|
357 |
} |
|
358 |
||
359 |
function check_mouse_up (ev) {
|
|
360 |
if (g_drag) {
|
|
361 |
if (g_start) {
|
|
362 |
if (g_hover) {
|
|
363 |
drag_unhover(g_drag, g_hover, ev); |
|
364 |
drag_end_drop(g_drag, g_hover, ev); |
|
365 |
} else |
|
366 |
drag_end_fail(g_drag, ev); |
|
367 |
||
368 |
drag_cleanup(g_drag); |
|
| 24 | 369 |
} else if (g_drag.hasClassName("image") || g_drag.hasClassName("tag_image")) {
|
370 |
// in case image_click blocks and we get a mouse_move during it |
|
371 |
var tmp = g_drag; |
|
372 |
g_drag = null; |
|
373 |
||
374 |
image_click(tmp, ev); |
|
375 |
} |
|
| 23 | 376 |
|
377 |
g_start = null; |
|
378 |
g_drag = null; |
|
379 |
g_hover = null; |
|
380 |
||
381 |
ev.stop(); |
|
382 |
return false; |
|
383 |
} |
|
384 |
} |
|
385 |
||
386 |
function check_mouse_move (ev) {
|
|
387 |
if (g_drag) {
|
|
388 |
if (!g_start) {
|
|
389 |
drag_start(g_drag); |
|
390 |
g_start = true; |
|
391 |
} |
|
392 |
||
393 |
drag_move(g_drag, ev); |
|
394 |
||
395 |
Position.prepare(); |
|
396 |
||
397 |
var px = ev.pointerX(); |
|
398 |
var py = ev.pointerY(); |
|
399 |
||
400 |
if (g_hover) {
|
|
401 |
if (!Position.withinIncludingScrolloffsets(g_hover, px, py)) {
|
|
402 |
drag_unhover(g_drag, g_hover, ev); |
|
403 |
g_hover = null; |
|
404 |
} |
|
405 |
} else {
|
|
406 |
for (var i=0;i<g_targets.length;i++) |
|
407 |
if (Position.withinIncludingScrolloffsets(g_targets[i], px, py)) {
|
|
408 |
drag_hover(g_drag, g_targets[i], ev); |
|
409 |
g_hover = g_targets[i]; |
|
| 24 | 410 |
break; |
| 23 | 411 |
} |
412 |
} |
|
413 |
||
414 |
ev.stop(); |
|
415 |
return false; |
|
416 |
} |
|
417 |
} |
|
418 |
||
419 |
function check_drag_hover (ev) {
|
|
420 |
if (g_start) {
|
|
| 24 | 421 |
var e = ev.element(); |
| 23 | 422 |
|
| 24 | 423 |
if (e.hasClassName("tag_row")) {
|
| 23 | 424 |
drag_hover(g_drag, e, ev); |
425 |
g_hover = e; |
|
426 |
} |
|
427 |
} |
|
428 |
} |
|
429 |
||
430 |
function check_drag_nohover (ev) {
|
|
| 24 | 431 |
if (g_start) {
|
| 23 | 432 |
var e = ev.element(); |
433 |
||
434 |
if (g_hover && e == g_hover) {
|
|
435 |
drag_unhover(g_drag, g_hover, ev); |
|
436 |
g_hover = null; |
|
437 |
} |
|
438 |
} |
|
439 |
} |
|
440 |
||
| 24 | 441 |
/* |
442 |
* utility code |
|
443 |
*/ |
|
444 |
function image_copy (img) {
|
|
445 |
copy = Builder.node("img", {
|
|
446 |
src: img.src, |
|
447 |
className: "tag_image", |
|
| 23 | 448 |
}); |
449 |
||
| 24 | 450 |
copy._key = img._key; |
451 |
copy._tags = img._tags; |
|
452 |
||
453 |
return copy; |
|
| 23 | 454 |
} |
455 |
||
| 24 | 456 |
function array_remove (a, i) {
|
457 |
a.splice(a.indexOf(i), 1); |
|
| 23 | 458 |
} |
459 |
||
| 24 | 460 |
/* |
461 |
* events |
|
462 |
*/ |
|
| 23 | 463 |
Event.observe(document, "mousedown", check_mouse_down); |
464 |
Event.observe(document, "mouseup", check_mouse_up); |
|
465 |
Event.observe(document, "mousemove", check_mouse_move); |
|
466 |
Event.observe(document, "mouseover", check_drag_hover); |
|
467 |
Event.observe(document, "mouseout", check_drag_nohover); |
|
| 24 | 468 |
Event.observe(document, "dragenter", check_drag_hover); // worth a try... |
| 23 | 469 |
Event.observe(document, "dragexit", check_drag_nohover); |
470 |