20 } |
33 } |
21 }); |
34 }); |
22 } |
35 } |
23 } |
36 } |
24 |
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 |
25 function new_tag (tag_name) { |
101 function new_tag (tag_name) { |
26 var tag_images = Builder.node("td", {className:"tag_images"}); |
102 var tag_images = Builder.node("td", {className:"tag_images", id:"tag_" + tag_name + "_images"}); |
27 |
103 |
28 $("tag_table").appendChild( |
104 tag_images._tag = tag_name; |
29 Builder.node("tr", [ |
105 tag_images._visibleCount = 0; |
30 Builder.node("td", {className:"tag"}, [ |
106 tag_images._images = new Array(); |
31 tag_name |
107 |
32 ]), |
108 var tag_row = Builder.node("tr", {className:"tag_row", id:"tag_" + tag_name}, [ |
33 tag_images |
109 Builder.node("td", {className:"tag", id:"tag_" + tag_name + "_tags"}, [ |
34 ]) |
110 _tag_name(tag_name) |
35 ); |
111 ]), |
36 } |
112 tag_images |
37 |
113 ]); |
38 function image_dropped (img, tag, e) { |
114 |
39 } |
115 tag_row._tag = tag_name; |
40 |
116 tag_row._tags = new Array(tag_name); |
41 function image_loaded (img) { |
117 |
42 } |
118 $("tag_table").appendChild(tag_row); |
43 |
119 } |
44 function image_click (img, ev) { |
120 |
45 |
121 function tag_add_tag (new_tag, tag) { |
46 } |
122 var tag_row = $("tag_" + tag); |
47 |
123 |
48 function init () { |
124 if (tag_row._tags.indexOf(new_tag) != -1) |
49 } |
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 */ |
50 |
319 |
51 var g_drag, g_hover, g_start, g_offset, g_targets; |
320 var g_drag, g_hover, g_start, g_offset, g_targets; |
52 function check_mouse_down (ev) { |
321 function check_mouse_down (ev) { |
53 var e = ev.element(); |
322 var e = ev.element(); |
54 |
323 |
55 if (e.hasClassName("image")) { |
324 if (!ev.isLeftClick()) |
|
325 return true; |
|
326 |
|
327 if (e.hasClassName("image") || e.hasClassName("draggable") || e.hasClassName("tag_image")) { |
56 g_drag = e; |
328 g_drag = e; |
57 g_start = false; |
329 g_start = false; |
58 |
330 |
59 var offset = e.cumulativeOffset(); |
331 var offset = e.cumulativeOffset(); |
60 |
332 |
122 } else { |
399 } else { |
123 for (var i=0;i<g_targets.length;i++) |
400 for (var i=0;i<g_targets.length;i++) |
124 if (Position.withinIncludingScrolloffsets(g_targets[i], px, py)) { |
401 if (Position.withinIncludingScrolloffsets(g_targets[i], px, py)) { |
125 drag_hover(g_drag, g_targets[i], ev); |
402 drag_hover(g_drag, g_targets[i], ev); |
126 g_hover = g_targets[i]; |
403 g_hover = g_targets[i]; |
|
404 break; |
127 } |
405 } |
128 } |
406 } |
129 |
407 |
130 ev.stop(); |
408 ev.stop(); |
131 return false; |
409 return false; |
132 } |
410 } |
133 } |
411 } |
134 |
412 |
135 function check_drag_hover (ev) { |
413 function check_drag_hover (ev) { |
|
414 if (g_start) { |
136 var e = ev.element(); |
415 var e = ev.element(); |
137 if (g_start) { |
416 |
138 |
417 if (e.hasClassName("tag_row")) { |
139 if (e.hasClassName("tag_images")) { |
|
140 drag_hover(g_drag, e, ev); |
418 drag_hover(g_drag, e, ev); |
141 g_hover = e; |
419 g_hover = e; |
142 } |
420 } |
143 } |
421 } |
144 } |
422 } |
145 |
423 |
146 function check_drag_nohover (ev) { |
424 function check_drag_nohover (ev) { |
|
425 if (g_start) { |
147 var e = ev.element(); |
426 var e = ev.element(); |
148 if (g_start) { |
|
149 |
427 |
150 if (g_hover && e == g_hover) { |
428 if (g_hover && e == g_hover) { |
151 drag_unhover(g_drag, g_hover, ev); |
429 drag_unhover(g_drag, g_hover, ev); |
152 g_hover = null; |
430 g_hover = null; |
153 } |
431 } |
154 } |
432 } |
155 } |
433 } |
156 |
434 |
157 var g_ghost; |
435 /* |
158 function drag_start (e) { |
436 * utility code |
159 g_ghost = Builder.node("img", { |
437 */ |
160 src: e.src |
438 function image_copy (img) { |
161 }); |
439 copy = Builder.node("img", { |
162 |
440 src: img.src, |
163 g_ghost._key = e.id; |
441 className: "tag_image", |
164 |
442 }); |
165 $('taggr').appendChild(g_ghost); |
443 |
166 |
444 copy._key = img._key; |
167 g_ghost.style.position = "absolute"; |
445 copy._tags = img._tags; |
168 } |
446 |
169 |
447 return copy; |
170 function drag_move (e, ev) { |
448 } |
171 g_ghost.style.left = ev.pointerX() - g_offset.left + "px"; |
449 |
172 g_ghost.style.top = ev.pointerY() - g_offset.top + "px"; |
450 function array_remove (a, i) { |
173 } |
451 a.splice(a.indexOf(i), 1); |
174 |
452 } |
175 function drag_end_drop (e, s, ev) { |
453 |
176 if (!s.images) |
454 /* |
177 s.images = new Array(); |
455 * events |
178 |
456 */ |
179 if (s.images.indexOf(g_ghost._key) != -1) |
|
180 return drag_end_fail(); |
|
181 |
|
182 g_ghost.id = s.id + "_" + g_ghost._key |
|
183 |
|
184 s.images.push(g_ghost._key) |
|
185 |
|
186 $('taggr').removeChild(g_ghost); |
|
187 s.appendChild(g_ghost); |
|
188 |
|
189 g_ghost.style.position = "static"; |
|
190 } |
|
191 |
|
192 function drag_end_fail (e, ev) { |
|
193 $('taggr').removeChild(g_ghost); |
|
194 } |
|
195 |
|
196 function drag_cleanup (e, ev) { |
|
197 g_ghost = null; |
|
198 } |
|
199 |
|
200 function drag_hover (e, s, ev) { |
|
201 s.addClassName("hover"); |
|
202 } |
|
203 |
|
204 function drag_unhover (e, s, ev) { |
|
205 s.removeClassName("hover"); |
|
206 } |
|
207 |
|
208 Event.observe(window, "load", init); |
|
209 Event.observe(document, "mousedown", check_mouse_down); |
457 Event.observe(document, "mousedown", check_mouse_down); |
210 Event.observe(document, "mouseup", check_mouse_up); |
458 Event.observe(document, "mouseup", check_mouse_up); |
211 Event.observe(document, "mousemove", check_mouse_move); |
459 Event.observe(document, "mousemove", check_mouse_move); |
212 Event.observe(document, "mouseover", check_drag_hover); |
460 Event.observe(document, "mouseover", check_drag_hover); |
213 Event.observe(document, "mouseout", check_drag_nohover); |
461 Event.observe(document, "mouseout", check_drag_nohover); |
214 Event.observe(document, "dragenter", check_drag_hover); |
462 Event.observe(document, "dragenter", check_drag_hover); // worth a try... |
215 Event.observe(document, "dragexit", check_drag_nohover); |
463 Event.observe(document, "dragexit", check_drag_nohover); |
216 |
464 |
217 |
|