|
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) {
|
|
|
102 |
var tag_images = Builder.node("td", {className:"tag_images", id:"tag_" + tag_name + "_images"});
|
|
|
103 |
|
|
|
104 |
tag_images._tag = tag_name;
|
|
|
105 |
tag_images._visibleCount = 0;
|
|
|
106 |
tag_images._images = new Array();
|
|
|
107 |
|
|
|
108 |
var tag_row = Builder.node("tr", {className:"tag_row", id:"tag_" + tag_name}, [
|
|
|
109 |
Builder.node("td", {className:"tag", id:"tag_" + tag_name + "_tags"}, [
|
|
|
110 |
_tag_name(tag_name)
|
|
|
111 |
]),
|
|
|
112 |
tag_images
|
|
|
113 |
]);
|
|
|
114 |
|
|
|
115 |
tag_row._tag = tag_name;
|
|
|
116 |
tag_row._tags = new Array(tag_name);
|
|
|
117 |
|
|
|
118 |
$("tag_table").appendChild(tag_row);
|
|
|
119 |
}
|
|
|
120 |
|
|
|
121 |
function tag_add_tag (new_tag, tag) {
|
|
|
122 |
var tag_row = $("tag_" + tag);
|
|
|
123 |
|
|
|
124 |
if (tag_row._tags.indexOf(new_tag) != -1)
|
|
|
125 |
return false;
|
|
|
126 |
|
|
|
127 |
tag_row._tags.push(new_tag);
|
|
|
128 |
|
|
|
129 |
$("tag_" + tag + "_tags").appendChild(_tag_name(new_tag));
|
|
|
130 |
|
|
|
131 |
/*
|
|
|
132 |
new Ajax.Request("taggr2.py", {
|
|
|
133 |
parameters: {
|
|
|
134 |
act: 'tag',
|
|
|
135 |
tag: new_tag,
|
|
|
136 |
img: $("tag_" + tag + "_images")._images,
|
|
|
137 |
},
|
|
|
138 |
method: 'get'
|
|
|
139 |
});
|
|
|
140 |
*/
|
|
|
141 |
}
|
|
|
142 |
|
|
|
143 |
function tag_remove_tag (tag_name) {
|
|
|
144 |
var tag_row = $("tag_" + tag_name + "_name").up(1);
|
|
|
145 |
array_remove(tag_row._tags, tag_name);
|
|
|
146 |
|
|
|
147 |
$("tag_" + tag_row._tag + "_tags").removeChild($("tag_" + tag_name + "_name"));
|
|
|
148 |
|
|
|
149 |
if (tag_row._tags.length == 0)
|
|
|
150 |
$("tag_table").removeChild(tag_row);
|
|
|
151 |
}
|
|
|
152 |
|
|
|
153 |
function get_tag (tag_name, postfix) {
|
|
|
154 |
return $("tag_" + $("tag_" + tag_name).up(1)._tag + "_" + postfix);
|
|
|
155 |
}
|
|
|
156 |
|
|
|
157 |
function tag_add_image (orig_img, copy_img, tag, saveToDB) {
|
|
|
158 |
var tag_images = $('tag_' + tag + '_images');
|
|
|
159 |
|
|
|
160 |
if (tag_images._images.indexOf(orig_img._key) != -1)
|
|
|
161 |
return false;
|
|
|
162 |
|
|
|
163 |
if (!copy_img)
|
|
|
164 |
copy_img = image_copy(orig_img);
|
|
|
165 |
|
|
|
166 |
tag_images._images.push(orig_img._key)
|
|
|
167 |
orig_img._tags.push(tag);
|
|
|
168 |
|
|
|
169 |
copy_img.id = "tag_" + tag + "_img_" + orig_img._key
|
|
|
170 |
copy_img._tag = tag;
|
|
|
171 |
|
|
|
172 |
tag_images.appendChild(copy_img);
|
|
|
173 |
tag_images._visibleCount++;
|
|
|
174 |
|
|
|
175 |
if (saveToDB) {
|
|
|
176 |
new Ajax.Request("taggr2.py", {
|
|
|
177 |
parameters: {
|
|
|
178 |
act: 'tag',
|
|
|
179 |
img: orig_img._key,
|
|
|
180 |
tag: tag,
|
|
|
181 |
},
|
|
|
182 |
method: 'get'
|
|
|
183 |
|
|
|
184 |
});
|
|
|
185 |
}
|
|
|
186 |
}
|
|
|
187 |
|
|
|
188 |
function tag_add_images (images, tag_name) {
|
|
|
189 |
var tag_images = $('tag_' + tag_name + '_images');
|
|
|
190 |
var copy_img, img_keys = new Array();
|
|
|
191 |
|
|
|
192 |
images.each(function(orig_img){
|
|
|
193 |
tag_add_image(orig_img, null, tag_name, false);
|
|
|
194 |
img_keys.push(orig_img._key);
|
|
|
195 |
});
|
|
|
196 |
|
|
|
197 |
new Ajax.Request("taggr2.py", {
|
|
|
198 |
parameters: {
|
|
|
199 |
act: 'tag',
|
|
|
200 |
img: img_keys,
|
|
|
201 |
tag: tag_name,
|
|
|
202 |
},
|
|
|
203 |
method: 'get'
|
|
|
204 |
|
|
|
205 |
});
|
|
|
206 |
}
|
|
|
207 |
|
|
|
208 |
function tag_remove_image (img_key, tag_name) {
|
|
|
209 |
var tag_images = $("tag_" + tag_name + "_images");
|
|
|
210 |
|
|
|
211 |
tag_images.removeChild($("tag_" + tag_name + "_img_" + img_key));
|
|
|
212 |
array_remove(tag_images._images, img_key);
|
|
|
213 |
|
|
|
214 |
if (tag_images._images.length == 0)
|
|
|
215 |
$("tag_" + tag_name).hide();
|
|
|
216 |
|
|
|
217 |
new Ajax.Request("taggr2.py", {
|
|
|
218 |
parameters: {
|
|
|
219 |
act: 'untag',
|
|
|
220 |
img: img_key,
|
|
|
221 |
tag: tag_name,
|
|
|
222 |
},
|
|
|
223 |
method: 'get',
|
|
|
224 |
});
|
|
|
225 |
}
|
|
|
226 |
|
|
|
227 |
function hide_tag_image (tag, img) {
|
|
|
228 |
$("tagimg_" + tag + "_" + img).hide();
|
|
|
229 |
|
|
|
230 |
if (--$("tag_" + tag + "_images")._visibleCount == 0)
|
|
|
231 |
$("tag_" + tag).hide();
|
|
|
232 |
}
|
|
|
233 |
|
|
|
234 |
function show_tag_image (tag, img) {
|
|
|
235 |
$("tagimg_" + tag + "_" + img).hide();
|
|
|
236 |
|
|
|
237 |
if ($("tag_" + tag + "_images")._visibleCount++ == 0)
|
|
|
238 |
$("tag_" + tag).show();
|
|
|
239 |
}
|
|
|
240 |
|
|
|
241 |
/*
|
|
|
242 |
* Frontend image drag code
|
|
|
243 |
*/
|
|
|
244 |
var g_ghost;
|
|
|
245 |
function drag_start (e) {
|
|
|
246 |
if (e.hasClassName("image") || e.hasClassName("tag_image"))
|
|
|
247 |
g_ghost = image_copy(e);
|
|
|
248 |
else {
|
|
|
249 |
var name;
|
|
|
250 |
|
|
|
251 |
if (e.hasClassName("tag_name"))
|
|
|
252 |
name = e._tag;
|
|
|
253 |
else
|
|
|
254 |
name = $F($('new_tag'));
|
|
|
255 |
|
|
|
256 |
g_ghost = Builder.node("span", {className: 'dragged'}, [name]);
|
|
|
257 |
}
|
|
|
258 |
|
|
|
259 |
$('taggr').appendChild(g_ghost);
|
|
|
260 |
|
|
|
261 |
g_ghost.style.position = "absolute";
|
|
|
262 |
}
|
|
|
263 |
|
|
|
264 |
function drag_move (e, ev) {
|
|
|
265 |
g_ghost.style.left = ev.pointerX() - g_offset.left + "px";
|
|
|
266 |
g_ghost.style.top = ev.pointerY() - g_offset.top + "px";
|
|
|
267 |
}
|
|
|
268 |
|
|
|
269 |
function drag_end_drop (e, s, ev) {
|
|
|
270 |
g_ghost.style.position = "static";
|
|
|
271 |
$('taggr').removeChild(g_ghost);
|
|
|
272 |
|
|
|
273 |
if (e.hasClassName("image") || e.hasClassName("tag_image")) {
|
|
|
274 |
var selection = $$(".selection");
|
|
|
275 |
|
|
|
276 |
if (selection.length)
|
|
|
277 |
tag_add_images($$(".selection"), s._tag);
|
|
|
278 |
else
|
|
|
279 |
tag_add_image(e, g_ghost, s._tag, true);
|
|
|
280 |
|
|
|
281 |
/*
|
|
|
282 |
if (!tag_add_image(e, g_ghost, s._tag, true))
|
|
|
283 |
// it was already in there
|
|
|
284 |
Effect.Shake("tagimg_" + s._tag + "_" + g_ghost._key);
|
|
|
285 |
*/
|
|
|
286 |
} else if (e.hasClassName("tag_name")) {
|
|
|
287 |
null; // breakpoint
|
|
|
288 |
} else {
|
|
|
289 |
tag_add_tag($F($('new_tag')), s._tag);
|
|
|
290 |
}
|
|
|
291 |
}
|
|
|
292 |
|
|
|
293 |
function drag_end_fail (e, ev) {
|
|
|
294 |
if (e.hasClassName("tag_image")) {
|
|
|
295 |
tag_remove_image(e._key, e._tag);
|
|
|
296 |
$('taggr').removeChild(g_ghost);
|
|
|
297 |
} else if (e.hasClassName("tag_name")) {
|
|
|
298 |
tag_remove_tag(e._tag);
|
|
|
299 |
} else {
|
|
|
300 |
$('taggr').removeChild(g_ghost);
|
|
|
301 |
}
|
|
|
302 |
}
|
|
|
303 |
|
|
|
304 |
function drag_cleanup (e, ev) {
|
|
|
305 |
g_ghost = null;
|
|
|
306 |
}
|
|
|
307 |
|
|
|
308 |
function drag_hover (e, s, ev) {
|
|
|
309 |
s.addClassName("hover");
|
|
|
310 |
}
|
|
|
311 |
|
|
|
312 |
function drag_unhover (e, s, ev) {
|
|
|
313 |
s.removeClassName("hover");
|
|
|
314 |
}
|
|
|
315 |
|
|
|
316 |
/*
|
|
|
317 |
* Backend image click/drag code
|
|
|
318 |
*/
|
|
|
319 |
|
|
23
|
320 |
var g_drag, g_hover, g_start, g_offset, g_targets;
|
|
|
321 |
function check_mouse_down (ev) {
|
|
|
322 |
var e = ev.element();
|
|
24
|
323 |
|
|
|
324 |
if (!ev.isLeftClick())
|
|
|
325 |
return true;
|
|
23
|
326 |
|
|
24
|
327 |
if (e.hasClassName("image") || e.hasClassName("draggable") || e.hasClassName("tag_image")) {
|
|
23
|
328 |
g_drag = e;
|
|
|
329 |
g_start = false;
|
|
|
330 |
|
|
|
331 |
var offset = e.cumulativeOffset();
|
|
|
332 |
|
|
|
333 |
g_offset = {
|
|
|
334 |
'left': ev.pointerX() - offset.left,
|
|
|
335 |
'top': ev.pointerY() - offset.top
|
|
|
336 |
};
|
|
|
337 |
|
|
|
338 |
g_hover = null;
|
|
|
339 |
|
|
24
|
340 |
g_targets = $$(".tag_row");
|
|
23
|
341 |
|
|
|
342 |
} else if (e.hasClassName("directory_link")) {
|
|
|
343 |
toggle_dir(e);
|
|
|
344 |
|
|
|
345 |
} else {
|
|
|
346 |
return true;
|
|
|
347 |
}
|
|
|
348 |
|
|
|
349 |
ev.stop();
|
|
|
350 |
return false;
|
|
|
351 |
}
|
|
|
352 |
|
|
|
353 |
function check_mouse_up (ev) {
|
|
|
354 |
if (g_drag) {
|
|
|
355 |
if (g_start) {
|
|
|
356 |
if (g_hover) {
|
|
|
357 |
drag_unhover(g_drag, g_hover, ev);
|
|
|
358 |
drag_end_drop(g_drag, g_hover, ev);
|
|
|
359 |
} else
|
|
|
360 |
drag_end_fail(g_drag, ev);
|
|
|
361 |
|
|
|
362 |
drag_cleanup(g_drag);
|
|
24
|
363 |
} else if (g_drag.hasClassName("image") || g_drag.hasClassName("tag_image")) {
|
|
|
364 |
// in case image_click blocks and we get a mouse_move during it
|
|
|
365 |
var tmp = g_drag;
|
|
|
366 |
g_drag = null;
|
|
|
367 |
|
|
|
368 |
image_click(tmp, ev);
|
|
|
369 |
}
|
|
23
|
370 |
|
|
|
371 |
g_start = null;
|
|
|
372 |
g_drag = null;
|
|
|
373 |
g_hover = null;
|
|
|
374 |
|
|
|
375 |
ev.stop();
|
|
|
376 |
return false;
|
|
|
377 |
}
|
|
|
378 |
}
|
|
|
379 |
|
|
|
380 |
function check_mouse_move (ev) {
|
|
|
381 |
if (g_drag) {
|
|
|
382 |
if (!g_start) {
|
|
|
383 |
drag_start(g_drag);
|
|
|
384 |
g_start = true;
|
|
|
385 |
}
|
|
|
386 |
|
|
|
387 |
drag_move(g_drag, ev);
|
|
|
388 |
|
|
|
389 |
Position.prepare();
|
|
|
390 |
|
|
|
391 |
var px = ev.pointerX();
|
|
|
392 |
var py = ev.pointerY();
|
|
|
393 |
|
|
|
394 |
if (g_hover) {
|
|
|
395 |
if (!Position.withinIncludingScrolloffsets(g_hover, px, py)) {
|
|
|
396 |
drag_unhover(g_drag, g_hover, ev);
|
|
|
397 |
g_hover = null;
|
|
|
398 |
}
|
|
|
399 |
} else {
|
|
|
400 |
for (var i=0;i<g_targets.length;i++)
|
|
|
401 |
if (Position.withinIncludingScrolloffsets(g_targets[i], px, py)) {
|
|
|
402 |
drag_hover(g_drag, g_targets[i], ev);
|
|
|
403 |
g_hover = g_targets[i];
|
|
24
|
404 |
break;
|
|
23
|
405 |
}
|
|
|
406 |
}
|
|
|
407 |
|
|
|
408 |
ev.stop();
|
|
|
409 |
return false;
|
|
|
410 |
}
|
|
|
411 |
}
|
|
|
412 |
|
|
|
413 |
function check_drag_hover (ev) {
|
|
|
414 |
if (g_start) {
|
|
24
|
415 |
var e = ev.element();
|
|
23
|
416 |
|
|
24
|
417 |
if (e.hasClassName("tag_row")) {
|
|
23
|
418 |
drag_hover(g_drag, e, ev);
|
|
|
419 |
g_hover = e;
|
|
|
420 |
}
|
|
|
421 |
}
|
|
|
422 |
}
|
|
|
423 |
|
|
|
424 |
function check_drag_nohover (ev) {
|
|
24
|
425 |
if (g_start) {
|
|
23
|
426 |
var e = ev.element();
|
|
|
427 |
|
|
|
428 |
if (g_hover && e == g_hover) {
|
|
|
429 |
drag_unhover(g_drag, g_hover, ev);
|
|
|
430 |
g_hover = null;
|
|
|
431 |
}
|
|
|
432 |
}
|
|
|
433 |
}
|
|
|
434 |
|
|
24
|
435 |
/*
|
|
|
436 |
* utility code
|
|
|
437 |
*/
|
|
|
438 |
function image_copy (img) {
|
|
|
439 |
copy = Builder.node("img", {
|
|
|
440 |
src: img.src,
|
|
|
441 |
className: "tag_image",
|
|
23
|
442 |
});
|
|
|
443 |
|
|
24
|
444 |
copy._key = img._key;
|
|
|
445 |
copy._tags = img._tags;
|
|
|
446 |
|
|
|
447 |
return copy;
|
|
23
|
448 |
}
|
|
|
449 |
|
|
24
|
450 |
function array_remove (a, i) {
|
|
|
451 |
a.splice(a.indexOf(i), 1);
|
|
23
|
452 |
}
|
|
|
453 |
|
|
24
|
454 |
/*
|
|
|
455 |
* events
|
|
|
456 |
*/
|
|
23
|
457 |
Event.observe(document, "mousedown", check_mouse_down);
|
|
|
458 |
Event.observe(document, "mouseup", check_mouse_up);
|
|
|
459 |
Event.observe(document, "mousemove", check_mouse_move);
|
|
|
460 |
Event.observe(document, "mouseover", check_drag_hover);
|
|
|
461 |
Event.observe(document, "mouseout", check_drag_nohover);
|
|
24
|
462 |
Event.observe(document, "dragenter", check_drag_hover); // worth a try...
|
|
23
|
463 |
Event.observe(document, "dragexit", check_drag_nohover);
|
|
|
464 |
|