2012-07-15

ヒントとcss transform

と、ご指摘頂いたので hints-ext.js の css transform 対応に挑戦しました。

http://github.com/caisui/vimperator/blob/master/plugin/hints-ext.js

処理コストがそこそこかかるのと現行そんなに利用されていないと思うので
デフォルトはoff にしています。

let use_hints_ext_tranform=1

で有効になります。

off だと

となるところ、on では

こうなります。

件の caret mode も

となります。

また、off でも

:js window.setTimeout(function () hints.addSimpleMap(["<C-t>"], function () hints.relocation_transform()), 0)

のように記述しておけば、transform 無視ヒント状態から transform 考慮状態に移行できます。

css transform 周りメモ

css transformの影響を受ける
- Element.getBoundingClientRect, Element.getClientRects
css transformの影響を受けない
- offsetXXX(top,left,width,height)
- Range.getBoundingClientRect, Range.getClientRects
rotate(-45deg) 近辺のとき label の位置が残念になる

2012-06-24

ページ上の単語で補完

Firefox vimperator javascript

ページ上の単語を completer に出したいなと思って書きました。

現状、単語の区切り方がよろしくない(特に日本語)せいか、微妙です。

COMMAND_LINE,INSERT からの補完

vimperatorrc に

:js <<EOF
userContext.word_completer_maps = [
    [[modes.COMMAND_LINE, modes.INSERT], ["<C-Space>"], {screen: true}],
];
EOF

のように設定します。

の状態から (割り当てた map) を実行すると

単語補完に遷移します。
ここでは、hintMatcher を利用して絞ることができます。
(= migemo hint matcher を利用していれば、migemo で絞れます)

単語を指定後、を押せば、

commandline や input 要素に復帰します。
(commandline や input 要素で何か特殊なことをやっている場合は、正常に動作しません)

Map.arg を使用したショートカット

上記のように作成したものの、を複数回押したくありません。
そこで、予めコマンドを登録しておいて、単語選択のみで実行できる方法を追加しました。

:js <<EOF
userContext.word_completer_shortcut = {
    modes: [modes.NORMAL],
    maps: ["<C-t>"],
    extra: {screen: true},
    t: "tabopen",
    o: "open",
    e: "eijiro",
    w: "tabopen wikipedia",
};
EOF

のように設定しておくと、t で

となり、で "tabopen "として実行されます。

{screen: true} について

画像では、判別できないので補足です。

"screen: true"を設定すると、ページ全体ではなく、現状見えている部位から補完します。
よって、ページ先頭で補完をcall すれば、ページ末尾付近の単語が抽出されません。

source:https://github.com/caisui/vimperator/blob/master/plugin/word-completer.js

2011-12-17

vimperator で ES.next

Firefox vimperator javascript ES.next

ES.next を vimperator で動かせるようにしてみた。

正しくない点が多々あると思います。
特に、「<|」はさっぱりです。

http://github.com/caisui/vimperator/blob/master/plugin/es.next.js

使用するには、 id:Constellation さんの es.next.jsが必要です。

~/vimperator 直下に配置あるいは

let es_next_js="path"

と指定すれば、読込みます。

実行は

:es [option] expression

です。

--ast	AST を echo します
--echo	結果をecho します
--test	javascript への変換結果を echo します(不恰好です。デバッグ用)
--bare	globalObject を userContext にします(無しの場合は、Object.create(userContext)
--time	実行し、実行時間を表示
--file	ファイルを読込実行
--scratchpad	scratchpad で ES.next 編集実行 (要 scratchpad.js)

動作確認サンプルです。

Scratchpad の SS

起動時にES.next と表示

構文解析中のエラーはnotify します。

参考
ECMAScript 6th 2011-11-07 Draft - hogehoge @teramako
ECMAScript 6th の構文をまとめてみた - hogehoge @teramako
ECMAScript Syntax Grammar 6th Edition / Draft
http://d.hatena.ne.jp/Constellation/20111110/1320930811

2011-12-04

ヒント

Firefox vimperator javascript hint

Highlightに問題があったので修正しました。

hints-ext.js更新しました。

標準のHint っぽく text を表示
で HintNumber を戻す
use_hintchars_ex=2を追加
~~highlight "Hint>.x" を追加~~
highlight "HintExt::before" を追加
hint.addModeEx を追加
use_hints_ext_caret,use_hints_ext_visual を追加

use_hintchars_ex=2を追加

let use_hintchars_ex=2

ヒント選択時のキータイプ数を揃えます。

が

となります。

要は、押すパターンが無くなります。

Hint>.x

修正に伴い更新

HintExt::before

入力 HintNumber の style です。
標準では、何も設定しておりません。

hi HintExt::before opacity: .6;

とし "h" を入力した状態だと

こんな感じになります。

hi HintExt::before display: none;

とすれば、入力済みを消せます。

_vimperatorrcには、plugin による組込のため、

autocmd VimperatorEnter ".*" :hi HintExt::before opacity: .6;

とする必要があります。

hint.addModeEx を追加

ヒントの対象を ElementNode 以外への拡張用関数です。

hints.addModeEx(
    mode,    // 拡張ヒントの割り当て(addMode と同様)
    prompt,  // プロンプト表記(addMode と同様)
    action,  // 選択対象の実行処理(addMode と同様)
    generate // 後述(サンプルで)
);

となります。

使用例

hints.addModeEx("z", "test", function (val) {
    alert(val);
}, function (win, screen) {
    let w = screen.right  - screen.left;
    let h = screen.bottom - screen.top;
    let l = screen.left;
    let t = screen.top;
    // generator も OK
    return [
	{value: 1 , rect: [plugins.hintsExt.Rect(l       , t       , l + w/2 , t + h/2)], text: "msg 1", showText: true},
	{value: 2 , rect: [plugins.hintsExt.Rect(l + w/2 , t       , l + w   , t + h/2)], text: "msg 2", showText: true},
	{value: 3 , rect: [plugins.hintsExt.Rect(l       , t + h/2 , l + w/2 , t + h  )], text: "msg 3", showText: true},
	{value: 4 , rect: [plugins.hintsExt.Rect(l + w/2 , t + h/2 , l + w   , t + h  )], text: "msg 4", showText: true},
    ];
});

とすると「;z」で

となります。

use_hints_ext_caret,use_hints_ext_visual を追加

hint.addModeExをうけて、 hints-caret を組込みました。

let use_hints_ext_caret="C"
let use_hints_ext_visual="V"

で、";C" で caret mode へ
で、";V" で visual mode へ移行できます。

2011-11-05

highlighter をキーボードで

Firefox vimperator javascript devtools

Firefox 標準の Inspector の highlighter が素敵です。(nightly)

しかし、マウスベース操作なため、vimperator的に残念だったので、専用 modeを作ってみた。

https://github.com/caisui/vimperator/blob/master/plugin/inspectorUI.js

特徴はこんな感じ

caret(単なるboxですが)をマウスポイントの代りに動かす独自 map
独自commandを組込
DOM Inspecotr を call できる
(残念仕様ですが)Chrome に対しても動作

mappings

h	caret を caret size の半分上へ移動
j	caret を caret size の半分左へ移動
k	caret を caret size の半分下へ移動
l	caret を caret size の半分右へ移動
gh,b	caret を Node の境界へ移動(左)
gj	caret を Node の境界へ移動(下)
gk	caret を Node の境界へ移動(上)
gl,w	caret を Node の境界へ移動(右)
gg	caret を window の top へ
	caret を window の bottom へ
^	caret を window の left へ
$	caret を window の right へ
	caret 範囲内にある Node を小さい順に切り替え
	のリバース
	breadcrumbs を右へ移動(Firefox 10 じゃないとエラー)
	breadcrumbs を左へ移動(Firefox 10 じゃないとエラー)
	次の Node を選択
	前の Node を選択
zo	caret を拡大
zi	caret を縮小
zt	ハイライトされている Node を画面 top へ
zz	ハイライトされている Node を画面中央へ
zb	ハイライトされている Node を画面 bottom へ
d	ハイライトされている Node を削除
e	ハイライトされている Node の xml をecho
y	ハイライトされている Node の xml をclipboardへ
i	ハイライトされている Node を DOM Inspector で開く(要 DOM Inspector)
o	ハイライトされている Node を Object Inspector で開く(要 DOM Inspector)
r	ハイライトされている Node に適用されている Style Rule 一覧を echo
gc	ハイライト対象を chrome に切り替え(toggle)
?	map 一覧を表示
Esc	Inspector 終了
	highlighter の透過(toggle)

command はまだ貧弱ですが、こんな感じ

:dom [--scratchpad] [--position=replace|beforebegin|afterbegin|beforeend|afeterend] expression

ハイライトNode に挿入

挿入位置は、--positionで調整可(default は beforeend)
また、--scratchpad で scratch pad に記述した内容を挿入
(要 scratchpad.js)

:style value

ハイライトNode の style 属性を調整 (completer 装備)

:javascript expression

標準の:javascript そのままです(echo も移植してます)

2011-10-22

Vimperator で CoffeeScript

Firefox vimperator javascript

CoffeeScript がどんなものか使ってみたくなったので、組み込んでみた。

vimperator/coffee-script.js at master · caisui/vimperator · GitHub

:coffee で CoffeeScript 実行(heredoc 対応)
:source コマンドを CoffeeScript 読込に対応
plugin に対応

使用するには、GitHub - jashkenas/coffeescript: Unfancy JavaScriptの extra/coffee-script.jsを~/vimperator/直下に置く必要があります。
(let coffeescript=path で任意の位置に変更できます。)

:coffee c="oneline";Array.forEach content.document.querySelectorAll(".#{c}"), (e)->e.classList.remove(c)

な感じで実行できます。

coffee --test setTimeout (-> alert "test"), 100

で

(function() {
  setTimeout((function() {
    return alert("test");
  }), 100);
}).call(this);

のように変換結果を echo します。

plugin ディレクトリに

のような Script を放り込んでおけば起動時に読込ます。
ただし、読込順序はjavascript なpluginを全て読み込んだ後です。

また、 completer は注意が必要です。
completer は返り値があると挙動が変る(commands.jsのこの辺り)のでわざわざ最後にnullが必要になっちゃいます。

後、e4x が通らないのでHelp が書けません。

2011-08-19

scratchpad

Firefox vimperator javascript devtools

Scratchpad の orion を vimperatorから扱えるようにしてみた。

(たぶん、Firefox 9で且つset!devtools.editor.component=orionで設定されている必要あります)

plugin はhttps://github.com/caisui/vimperator/blob/master/plugin/scratchpad.jsです。

オプション

-c	Browser(Chrome Window Scope)で open(ついでに"let"もキーワードにします)
-ft	mode の指定(javascript, java, html, css, xml)
-r	read only で開く
-w	既に開いている Scratchpad で開く

サブコマンド

javascript	javascript の実行結果を開く
file	指定ファイルを開く( ~/vimperator/color/style.css のような指定)
script	script タグの内容を表示(複数指定可、無指定時は、全て)

サブコマンドを利用しない場合は、引数は uri になります。

:scratchpad resource://gre/modules/Services.jsm

サブコマンド利用の場合は、そこそこ補完が動きます。

:scratchpad javascript window.openLinkIn

お馴染な vimperator の javascript 補完

Scratchpad の orion

後、

:tabopen chrome://browser/content/scratchpad.xul

で動いてくれると尚嬉しいのですが、mozilla-central: changeset 75456:f69a10f23bf334215464758d71ad900542856f5aでは、NS_ERROR_DOM_SECURITY_ERRが出て動作しませんでした。

2011/08/24 21:31
tabopen で開けるように fix したっぽく読めたので、該当個所を末尾に移動