1 /* |
|
2 * dir-list manipulation |
|
3 */ |
|
4 function toggle_dir (header_a_tag) { |
|
5 var div = Element.next(header_a_tag); |
|
6 |
|
7 if (div._have_contents) { |
|
8 if (div.visible()) { |
|
9 Effect.BlindUp(div, {duration: 0.5}); |
|
10 func = hide_tag_image; |
|
11 } else { |
|
12 Effect.BlindDown(div, {duration: 0.5}); |
|
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 |
|
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 |
|
38 var g_last_select; |
|
39 function image_click (img, ev) { |
|
40 var updiv = img.up(2); |
|
41 |
|
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 } |
|
59 } |
|
60 |
|
61 function selection_clear () { |
|
62 $$(".selection").each(function(e){ |
|
63 e.removeClassName("selection"); |
|
64 }); |
|
65 } |
|
66 |
|
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); |
|
78 |
|
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); |
|
88 } |
|
89 |
|
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; |
|
99 } |
|
100 |
|
101 function new_tag (tag_name) { |
|
102 if ($("tag_" + tag_name)) { |
|
103 $("tag_" + tag_name).show().scrollTo(); |
|
104 } |
|
105 |
|
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); |
|
123 |
|
124 return true; |
|
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, |
|
186 tag: $("tag_" + tag)._tags, |
|
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, |
|
207 tag: $("tag_" + tag_name)._tags, |
|
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, |
|
227 tag: $("tag_" + tag_name)._tags, |
|
228 }, |
|
229 method: 'get', |
|
230 }); |
|
231 } |
|
232 |
|
233 function hide_tag_image (tag, img) { |
|
234 $("tag_" + tag + "_img_" + img).hide(); |
|
235 |
|
236 if (--$("tag_" + tag + "_images")._visibleCount == 0) |
|
237 $("tag_" + tag).hide(); |
|
238 } |
|
239 |
|
240 function show_tag_image (tag, img) { |
|
241 $("tag_" + tag + "_img_" + img).show(); |
|
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 |
|
326 var g_drag, g_hover, g_start, g_offset, g_targets; |
|
327 function check_mouse_down (ev) { |
|
328 var e = ev.element(); |
|
329 |
|
330 if (!ev.isLeftClick()) |
|
331 return true; |
|
332 |
|
333 if (e.hasClassName("image") || e.hasClassName("draggable") || e.hasClassName("tag_image")) { |
|
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 |
|
346 g_targets = $$(".tag_row"); |
|
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); |
|
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 } |
|
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]; |
|
410 break; |
|
411 } |
|
412 } |
|
413 |
|
414 ev.stop(); |
|
415 return false; |
|
416 } |
|
417 } |
|
418 |
|
419 function check_drag_hover (ev) { |
|
420 if (g_start) { |
|
421 var e = ev.element(); |
|
422 |
|
423 if (e.hasClassName("tag_row")) { |
|
424 drag_hover(g_drag, e, ev); |
|
425 g_hover = e; |
|
426 } |
|
427 } |
|
428 } |
|
429 |
|
430 function check_drag_nohover (ev) { |
|
431 if (g_start) { |
|
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 |
|
441 /* |
|
442 * utility code |
|
443 */ |
|
444 function image_copy (img) { |
|
445 copy = Builder.node("img", { |
|
446 src: img.src, |
|
447 className: "tag_image", |
|
448 }); |
|
449 |
|
450 copy._key = img._key; |
|
451 copy._tags = img._tags; |
|
452 |
|
453 return copy; |
|
454 } |
|
455 |
|
456 function array_remove (a, i) { |
|
457 a.splice(a.indexOf(i), 1); |
|
458 } |
|
459 |
|
460 /* |
|
461 * events |
|
462 */ |
|
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); |
|
468 Event.observe(document, "dragenter", check_drag_hover); // worth a try... |
|
469 Event.observe(document, "dragexit", check_drag_nohover); |
|
470 |
|