livedoor ReaderでのOPMLインポート後画面の“チェックボックス操作”を再現するJavaScriptサンプル

昨日書いた「チェックボックスをマウスでなめるようにドラッグするだけで切り替えるJavaScriptのサンプル」に対して「livedoor Readerのとは少し違う」というツッコミがありましたので、再度サンプルを作り直してみました。

修正点は以下の通り。

• チェックボックスを囲むリストエレメントでも操作は有効
• リストエレメントもしくはチェックボックス上でmousedownしたらチェック状態を切り替える
• マウスをドラッグすると、他のチェックボックスは最初に切り替わったチェックボックスの状態へのみ切り替わる

(JavaScriptが無効なRSSリーダーから見ている場合はページを訪問してください。)

ソースコード

/* サンプルのli要素には class="sample_li" をつけてます。 */
/* require prototype.js */
if (typeof SAMPLE == "undefined") {
    var SAMPLE = {};
}
SAMPLE.isMousedown = false;
SAMPLE.isChecked = false;
SAMPLE.clickedElement = undefined;
SAMPLE.mousedown = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    SAMPLE.clickedElement = target;
    if (target.type == "checkbox") {
        target.click();
        SAMPLE.isMousedown = true;
        SAMPLE.isChecked = target.checked;
    }
    else if (target.className == "sample_li") {
        target = target.firstChild;
        if (target.type == "checkbox") {
            target.click();
            SAMPLE.isMousedown = true;
            SAMPLE.isChecked = target.checked;
        }
    }
}
SAMPLE.mouseup = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target == SAMPLE.clickedElement && target.type == "checkbox") {
        target.click();
    }
    SAMPLE.isMousedown = false;
}
SAMPLE.mouseover = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.className == "sample_li") {
        target = target.firstChild;
    }
    if (SAMPLE.isMousedown && target.type == "checkbox") {
        if (SAMPLE.isChecked && !target.checked || !SAMPLE.isChecked && target.checked) {
            target.click();
        }
    }
}
Event.observe(document, "mousedown", SAMPLE.mousedown);
Event.observe(document, "mouseup", SAMPLE.mouseup);
Event.observe(document, "mouseover", SAMPLE.mouseover);

確かにこのインタフェースなら使いやすいですね。