mooz deceives you

カーソルのセンタリング, もといパーセンテージ指定が可能な scrollSelectionIntoView

javascript, firefox

カーソルが画面内に来るようスクロールする関数

Firefox 拡張機能開発者向けのニッチなネタです.

以前 テキストボックスの値を変更した後、カーソルが画面内に入るようスクロールする関数 - mooz deceives you で「カーソルが画面内に来るようスクロールする関数」を紹介したのだけれど, この関数には「カーソルが一番下に来るようにスクロールされてしまう」という問題があった.

どうせなら一番下なんて恥ずかしがらず, 真ん中辺りへ来て欲しい. 先ほどのエントリを書いたときにもそう思ったのだけれど, 実現方法が分からなかったため, その辺りは表に出さずに済ませておいた.

で, 数日前のこと. ちょっと柔軟なscrollIntoView - caisuiの日記 というエントリを発見. 読んでみると, まさにやりたかったことが書いてある. なんでも nsISelection2 の scrollIntoView がパーセンテージ指定可能で良い感じらしい.

inputScrollSelectionIntoView

元記事ではテキストノードを対象としていたので, テキストボックス内部の selection (カーソル) に適用が可能な関数を書いてみた. この関数にテキストボックス要素を渡すと, カーソルが画面内に来るようテキストボックスのスクロールを行ってくれる. もちろん, パーセンテージ指定が可能.

function inputScrollSelectionIntoView(aInput, aVPercent, aHPercent) {
    let editor = aInput.editor || aInput
        .QueryInterface(Components.interfaces.nsIDOMNSEditableElement).editor;
    let selection = editor.selection;

    aVPercent = typeof aVPercent === "number" ? aVPercent : 50;
    aHPercent = typeof aHPercent === "number" ? aHPercent : 50;

    selection.QueryInterface(Components.interfaces.nsISelection2)
        .scrollIntoView(editor.selectionController.SELECTION_ANCHOR_REGION, true, aVPercent, aHPercent);
},

何をやっているか

XUL の textbox には直接 editor というプロパティが入っているのだけれど, HTML の input, textarea 要素にはそれがない. そこで nsIDOMNSEditableElement を要求し, 強引に editor を得ている.

editor があれば好き勝手が可能で, 今回のように selection を用いてごにょごにょしたり, undo / redo の細かな設定を行ったりすることができる.

というわけで, いまいち誰が得をするのか良く分からないエントリになってしまった. まあ少なくとも僕は恩恵を受けていて, KeySnail で設定ファイル中, エラーが起こった場所をハイライトするためにこの関数を活用している.

ツイートする

Google Devfest の Quiz

javascript, ruby

自分の書くコードは無駄に行数が多いよなあ. なぜだろうなあ. というようなことを, Google Devfest の Quiz で書いたコードを眺めていて思った. 現時点で自分が考えつくのは, 次の二つだろうか.

• アルゴリズムに無駄がある
• スカスカのコードが好き
  • 変数宣言と制御構文の間は必ず一行空けるなど
  • if () 改行 { のコーディングスタイル

ということでスカスカのコードを.

しかしアレだな. Google Chrome などで動かそうと思うと function のラムダ記法が使えないのでますます行数が増えるという. let も駄目だし.

V8 は速いところ JavaScript 1.7 に対応してください＞＜

ついでに Ruby 童貞も喪失.

ツイートする