[ECMAScript]: MochiKit を使ってみました。

ReST を docutils でレンダリングした Django オンラインドキュメント和訳へ、 MochiKit でセクションへの link を付けてみました。「¶」ってやつです。 HTML ファイルでは極力何もせず JavaScript でごにょごにょする方向で。

templates/doc/base.html

HTML ファイルでは JavaScript起動用の init.js を読み込みます。ページ毎に読み込みたい JavaScript 外部ファイルの path も記述します。 var load では、次に読み込む init.js に lib_urls でファイルパスが記述されている path へのショートカット(?)でも指定できます。

<script language="javascript" type="text/javascript">
    var load = [/*"Visual", */];
    load.push("/static/doc-ja/js/logic.js", "/static/doc-ja/js/connect.js");

    window.onload = function ()
    {
        var i = document.createElement("script");
        i.id = "init";
        i.src = "/static/init.js";
        i.type = "application/x-javascript";
        i.charset = "UTF-8";
        document.body.appendChild(i);
    };
</script>

/static/init.js

JavaScript起動用の init.js です。 var load_lists はデフォルトで読み込む JavaScript 外部ファイルの path です。 HTML ファイルで指定された var load を load_lists へ詰め込んでいきます。詰め込み終わったら loading(load_lists) で読み込みます。

lib_urls = {
    "MochiKit":             "/static/lib/MochiKit/packed/MochiKit.js",
    "MochiKit_selected":    "/static/lib/MochiKit/packed/selected.js",

    "Async":                "/static/lib/MochiKit/Async.js",
    "Base":                 "/static/lib/MochiKit/Base.js",
    "Color":                "/static/lib/MochiKit/Color.js",
    "Controls":             "/static/lib/MochiKit/Controls.js",
    "DOM":                  "/static/lib/MochiKit/DOM.js",
    "DateTime":             "/static/lib/MochiKit/DateTime.js",
    "DragAndDrop":          "/static/lib/MochiKit/DragAndDrop.js",
    "Format":               "/static/lib/MochiKit/Format.js",
    "Iter":                 "/static/lib/MochiKit/Iter.js",
    "Logging":              "/static/lib/MochiKit/Logging.js",
    "LoggingPane":          "/static/lib/MochiKit/LoggingPane.js",
    "MochiKit":             "/static/lib/MochiKit/MochiKit.js",
    "MockDOM":              "/static/lib/MochiKit/MockDOM.js",
    "Position":             "/static/lib/MochiKit/Position.js",
    "Selector":             "/static/lib/MochiKit/Selector.js",
    "Signal":               "/static/lib/MochiKit/Signal.js",
    "Sortable":             "/static/lib/MochiKit/Sortable.js",
    "Style":                "/static/lib/MochiKit/Style.js",
    "Test":                 "/static/lib/MochiKit/Test.js",
    "Visual":               "/static/lib/MochiKit/Visual.js",
};

var load_lists = ["MochiKit_selected", ];
try{
    load_lists = load_lists.concat(load);
}catch(e){}

function js_load(lib)
{
    var l = document.createElement("script");
    l.id = lib;
    l.src = lib;
    l.type = "application/x-javascript";
    l.charset = "UTF-8";
    document.body.appendChild(l);
}

function loading (load_lists)
{
    for ( var i=0; a = load_lists[i]; i++ ) {
            if (lib_urls[a]){
                    a = lib_urls[a];
            }
            js_load(a);
    }
}

loading(load_lists);

/static/doc-ja/js/logic.js

関数記述用です。やっと MochiKit が出てきましたw

function is_not_empty (element)
{
    var permalink = map(itemgetter("id"), getElementsByTagAndClassName("span", "permalink", element));

    if (permalink.length >= 1)
    {
            return permalink[0];
    } else {
            return false;
    }
};

function add_permalink (d)
{
    var permalink = $(d.id);
    var permalink_span = is_not_empty(permalink);

    if (!permalink_span)
    {
            var link = getNodeAttribute(permalink, "id");
            var span = SPAN({"id": "permalink-"+link}, A({"href": "#"+link}, "¶"));
            setElementClass(span, "permalink");
            insertSiblingNodesAfter(permalink.childNodes[0], span);
    }
};

/static/doc-ja/js/connect.js

MochiKit で、 CSS selector で指定した element に関数を割り当てます。

map(
    function(selected){
            connect(selected, "onmouseover", function(){add_permalink(this);});
    },
    $$("a[id]")
)

やってることはこれだけですが、 160kBくらいの MochiKit library を load しなければなりません。 MochiKit の配布物には圧縮 script が同梱されているので、これを使ってカスタムセレクトのパッケージを作ってみます。オリジナルの MochiKit 個別パッケージが格納されている MochiKit ディレクトリの親ディレクトリで scripts/pack.py コマンドを実行します。

$ cd mochikit_trunk
$ ./scripts/pack.py Base Iter DOM Style Signal Selector >static/lib/MochiKit/packed/selected.js

大体半分くらいのファイルサイズになるようです。デカ！