Operaの備忘録のぺえじ

2009-08-25

■ [customize][UserJS]テキストエリアで自動リサイズ

scrollHeightを使ったテキストエリア自動リサイズいいね - by edvakf in hatenaを自分の環境に導入しようとしたときにつまづいた部分もあったのでメモしておきます。

ユーザーCSS

最初に、すべてのテキストエリアに自動リサイズを適用させるつもりなのでuser.cssに書き足す。

textarea {
    padding   : 2px !important;
    max-height: none !important;
    overflow  : hidden !important;
}

paddingは絶対必要ではないんですが、付けておいたほうが色々楽なので付けました(好きな数値でいいです)。理由は後述します。まあ余白ゼロのテキストエリアは正直使いにくいのでそういう意味でも。

ユーザーJSのダウンロード

http://misttrap.s101.xrea.com/arc/textarea-resize.js

  • PADDING_TOP_AND_BOTTOMはuser.cssで設定した上下paddingの合計です。
  • 少し回りくどいことをやっているんですけど、これは、scrollHeightを高さに代入するだけだとなぜか数ピクセル足りなくなってページスクロールに支障が出るサイトがあったためです(このブログの編集画面がそうでした)。結局理由は分からなかったのですが何ピクセル不足しているかは分かるので継ぎ足しています。最初にpaddingを決め打ちしたのはここの処理の負担を減らすためです。

あとひとつだけ

http://misttrap.s101.xrea.com/arc/auto-indent.js

  • 以前作ったオートインデント用ユーザーJSで、改行したときに自動リサイズが行われないのは不便なのでinputイベントを自前で発生させるようにしました。
  • 一応preventDefault無しでもそれらしいインデントは可能なんですけど、その方法だとカーソルが良い位置に行かないんですよね。
コメントを書く

2009-08-22

■ [UserJS]ローカルファイルのページタイトルを分かりやすくしたい

Vimのタブに表示されるようなパスにする正規表現 | memoileを参考にして作りましたが、表示の仕方は自分好みのものになっています。

ダウンロード

http://misttrap.s101.xrea.com/arc/localhost-retitle.js

コメントを書く

2009-08-11

■ [UserJS]maximize-image.js

画像ファイルを最大化表示するユーザーJSです。

ダウンロード

http://misttrap.s101.xrea.com/arc/maximize-image.js

仕様？

  • 最大化っていうとなんだか曖昧ですけど、具体的には画像クリックで画面いっぱいに収まるように拡大もしくは縮小しています。autosizer系と違って他には何も出来ないです。
  • 最大化していない状況でのことなんですが、開いた画像の横幅が描画領域より大きくて高さが描画領域より小さいと余計な縦スクロールバーが出てきます(横スクロールバーの高さを勘定に入れていないため)。これをなんとかするためのコードも入っています、というかこれをなんとかするのが最初の目的でした。
  • 画像のサイズはいきなり取得できる場合が多いですが、ファイルサイズが大きいと失敗するようです。確実なのはdocument.onloadを待つことですが(image.onloadは発生しないケース有)、不便なので最初からクリックできるようにしてdocument.onloadでアスペクト比を補正しています。
コメントを書く