javascript/taggr.js
author terom
Thu, 17 Jan 2008 01:56:04 +0000
changeset 23 10841abbc01f
child 24 001f52cd057e
permissions -rw-r--r--
taggr2, which is starting to shape up
function toggle_dir (header_a_tag) {
    var div = Element.next(header_a_tag);
    
    if (div._have_contents) {
        if (div.visible())
            Effect.BlindUp(div, {duration: 0.5});
        else
            Effect.BlindDown(div, {duration: 0.5});
    } else {

        new Ajax.Updater(div, "taggr2.py", {
            parameters: {
                act: "dirlist",
                path: div.id,
            },
            method: 'get',
            onSuccess: function () {
                Effect.BlindDown(div, {duration: 0.5});
                div._have_contents = true;
            }
        });
    }
}

function new_tag (tag_name) {
    var tag_images = Builder.node("td", {className:"tag_images"});

    $("tag_table").appendChild(
        Builder.node("tr", [
            Builder.node("td", {className:"tag"}, [
                tag_name
            ]),
            tag_images
        ])
    );
}

function image_dropped (img, tag, e) {
}

function image_loaded (img) {
}

function image_click (img, ev) {

}

function init () {
}

var g_drag, g_hover, g_start, g_offset, g_targets;
function check_mouse_down (ev) {
    var e = ev.element();

    if (e.hasClassName("image")) {
        g_drag = e;
        g_start = false;
        
        var offset = e.cumulativeOffset();

        g_offset = {
            'left': ev.pointerX() - offset.left,
            'top': ev.pointerY() - offset.top
        };

        g_hover = null;

        g_targets = $$(".tag_images");

    } else if (e.hasClassName("directory_link")) {
        toggle_dir(e);

    } else {
        return true;
    }
    
    ev.stop();
    return false;
}

function check_mouse_up (ev) {
    if (g_drag) {
        if (g_start) {
            if (g_hover) {
                drag_unhover(g_drag, g_hover, ev);
                drag_end_drop(g_drag, g_hover, ev);
            } else
                drag_end_fail(g_drag, ev);
            
            drag_cleanup(g_drag);
        } else
            image_click(g_drag, ev);

        g_start = null;
        g_drag = null;
        g_hover = null;

        ev.stop();
        return false;
    }   
}

function check_mouse_move (ev) {
    if (g_drag) {
        if (!g_start) {
            drag_start(g_drag);
            g_start = true;
        }

        drag_move(g_drag, ev);
        
        Position.prepare();

        var px = ev.pointerX();
        var py = ev.pointerY();

        if (g_hover) {
            if (!Position.withinIncludingScrolloffsets(g_hover, px, py)) {
                drag_unhover(g_drag, g_hover, ev);
                g_hover = null;
            }
        } else {
            for (var i=0;i<g_targets.length;i++)
                if (Position.withinIncludingScrolloffsets(g_targets[i], px, py)) {
                    drag_hover(g_drag, g_targets[i], ev);
                    g_hover = g_targets[i];
                }
        }

        ev.stop();
        return false;
    }
}

function check_drag_hover (ev) {
        var e = ev.element();
    if (g_start) {

        if (e.hasClassName("tag_images")) {
            drag_hover(g_drag, e, ev);
            g_hover = e;
        }
    }
}

function check_drag_nohover (ev) {
        var e = ev.element();
    if (g_start) {

        if (g_hover && e == g_hover) {
            drag_unhover(g_drag, g_hover, ev);
            g_hover = null;
        }
    }
}

var g_ghost;
function drag_start (e) {
    g_ghost = Builder.node("img", {
        src: e.src
    });

    g_ghost._key = e.id;

    $('taggr').appendChild(g_ghost);

    g_ghost.style.position = "absolute";
}

function drag_move (e, ev) {
    g_ghost.style.left = ev.pointerX() - g_offset.left + "px";
    g_ghost.style.top = ev.pointerY() - g_offset.top + "px";
}

function drag_end_drop (e, s, ev) {
    if (!s.images)
        s.images = new Array();

    if (s.images.indexOf(g_ghost._key) != -1)
        return drag_end_fail();

    g_ghost.id = s.id + "_" + g_ghost._key

    s.images.push(g_ghost._key)

    $('taggr').removeChild(g_ghost);
    s.appendChild(g_ghost);

    g_ghost.style.position = "static";
}

function drag_end_fail (e, ev) {
    $('taggr').removeChild(g_ghost);
}

function drag_cleanup (e, ev) {
    g_ghost = null;
}

function drag_hover (e, s, ev) {
    s.addClassName("hover");
}

function drag_unhover (e, s, ev) {
    s.removeClassName("hover");
}

Event.observe(window, "load", init);
Event.observe(document, "mousedown", check_mouse_down);
Event.observe(document, "mouseup", check_mouse_up);
Event.observe(document, "mousemove", check_mouse_move);
Event.observe(document, "mouseover", check_drag_hover);
Event.observe(document, "mouseout", check_drag_nohover);
Event.observe(document, "dragenter", check_drag_hover);
Event.observe(document, "dragexit", check_drag_nohover);