Debug friendly な ON/OFF できるロールオーバー機能の実装

js jsdoit

SubmitボタンのonClickイベントの流れを追いたいのに、Submitボタンに仕掛けられたロールオーバー機能(mouseover等)にデバッガの制御を奪われて、しかもその先がMinifyされたライブラリで、イラッとしたことはありませんか?

デバッグ中はロールオーバーを一括でOFFにして、あとで戻せればいいじゃない? と思い、そのような機能を作ってみました。

jsdo.it で試せます http://jsdo.it/uupaa/DebugFriendlyRollover

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8" />
<title></title>
<style>
.rollover {
    outline: 5px solid green;
}
</style>
<script src="src/uupaa.js"></script>
<script>

uu.ready(function(uu, doc) {
    uu.add([
        uu.click(uu.button("rollover target button1"), fire),
        uu.click(uu.button("rollover target button2"), fire),
        uu.click(uu.button("rollover target button3"), fire),
        uu.click(uu.button("rollover target button4"), fire)
    ]);

    uu.rollover(uu.query("button"), "rollover");
});

function fire(evt) {
    alert("onclick");
}

function handleClick(evt, off) {
    if (off) {
        uu.rollover.disable();
        alert('ロールオーバーをOFFにしました')
    } else {
        uu.rollover.enable();
        alert('ロールオーバーをONにしました')
    }
}

(function(uu) {

// build struct
uu.rollover = uu.mix(uurollover, {
    enable:     uurolloverrebind.bind(null, true), // Function#bind(null, true)
    disable:    uurolloverrebind.bind(null, false) // Function#bind(null, false)
});
uu.unrollover = unrollover;


// uu.rollover - bind rollover handler
function uurollover(node,   // @param NodeArray/Node:
                    roll) { // @param ClassNameString/CallbackFunction:
    var db = uurollover._,
        ary = node.nodeType ? [node] : node, // toArray
        i = 0, iz = ary.length;

    for (; i < iz; ++i) {
        uu.event.hover(ary[i], roll, "rollover"); // hint("rollover")
        db.node.push(ary[i]);
        db.roll.push(roll);
        db.disable.push(false);
    }
}

// uu.unrollover - unbind rollover handler
function unrollover(node) { // @param NodeArray/Node(= void):
    var db = uurollover._,
        ary = node.nodeType ? [node] : node, // toArray
        i = 0, iz = ary.length, pos;

    for (; i < iz; ++i) {
        pos = db.node.indexOf(ary[i]);
        if (pos >= 0) {
            uu.event.unhover(ary[i]);
            db.node.splice(pos, 1); // remove
            db.roll.splice(pos, 1);
            db.disable.splice(pos, 1);
        }
    }
}

// inner - uu.rollover.rebind
function uurolloverrebind(enable) { // @param Boolean: true -> hover, false -> unhover
    var db = uurollover._,
        ary = db.node,
        i = 0, iz = ary.length, j, jz,
        fn = enable ? uu.event.hover : uu.event.unhover;

    for (; i < iz; ++i) {
        if (enable === db.disable[i]) {
            fn(ary[i], db.roll[i], "rollover");
            db.disable[i] = !enable;
        }
    }
}

// db
uurollover._ = {
    node: [],   // Node:
    roll: [],   // ClassNameString/CallbackFunction:
    disable: [] // Boolean:
};

})(uu);
</script>
</head><body>
<p>debug friendly な ON/OFF できるロールオーバー機能の実装</p>

<input type="button" value="rollover off()" onclick="handleClick(event, true)" />
<input type="button" value="rollover on()" onclick="handleClick(event, false)" />
<hr />

</body></html>

rollover がデバッグのジャマになるときは、コンソールに

uu.rollover.disable()

とタイプしてください。
uu.rollover を使って仕掛けた mouseover ハンドラなどが一括で外れます。


uupaa.js 0.8 上では uu.rollover → uu.event.rollover となる予定です
。