2009
01-03
14:16

[javascript][wordpress] WP-Syntaxで出力されたソースコードのコピペを支援するJavaScript

はじめに

名古屋に戻る前に，実家にてもうひとエントリ．

//
// ソースコードの領域をクリックしたときの処理．
// 選択したりできるとよさげ．
//

[wordpress] WP-Syntaxプラグインを導入してみた « 岩家ぶろぐ

というわけで，WP-Syntaxで出力されたソースコードを簡単にコピペできるようにしてくれるっぽいJavaScriptを書いてみました．jQuery依存ですけどね．

概要

010301

ソースコード領域をクリックすると，テキストエリアに切り替わり，テキストがすべて選択された状態になります．

010302

テキストエリアからフォーカスを外すと元に戻ります．

ちなみに，選択を解除すると次のような感じになります．編集なんかもできたりしますが，特に保存とかはされません．

010303

解説いくつか

ソースコード領域の取得

wp_syntax クラス下の code クラスの要素がそれにあたります．複数の wp_syntax クラスが存在することを考慮しておいたほうがいいでしょう．

そして，その要素内の文字列がソースコードとなります．

$( '.wp_syntax .code' ).each( function() {
  var sourcecode = $( this ).text();
  ...
} );

ソースコードの行数の取得

ソースコード文字列を改行で区切った配列のサイズで取得できます．

var rows = sourcecode.split( '\n' ).length;

．．．と思いきや，これだと IE（6も7も）でうまくいかないようですね．．．

行番号表示があるときは，その開始行と終了行の値をそれぞれ取得して計算することで行数を取得できるので，とりあえずの回避策としてみました．

if( 行番号表示がある場合 ) {
  var ln = 行番号表示領域の要素;
  var from = parseInt( ln.text().match( /^\D*(\d+)/ )[1] )     // 開始行
    , to   = parseInt( ln.text().match( /\D*(\d+)\D*$/ )[1] )  // 終了行
  ;
  var rows = to - from + 1;
}

ちなみに，この行数の値はテキストエリアを生成するときに利用します．

テキストエリアの生成

テキストエリアの高さをソースコードの行数とそろえるため，先で取得した行数の値を rows 属性にセットします．そして，自動折り返しを無効にするため，wrap="off" としておきます．（W3C的には invalid のようですが．．．）

さらに，テキストのスタイル（文字サイズや行高さ）をソースコード表示時とそろえるため， ... /wp-content/plugins/wp-syntax/wp-syntax.css 内の記述を参考に，同様の値をセットします．

あとは，ソースコードの代入やフォーカスが外れたときの処理の定義など行って，ソースコード領域の要素下に追加すれはOKです．

あ，元のソースコードをクリアしておくのも忘れずに，ですね．

ソースコード

そんな流れで書いたソースコードをひととおり，以下に載せておきます．もちろんクリック＆選択できますよｗ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

$( '.wp_syntax .code' ).each( function() {
  $( this ).click( function() {
    var __this = $( this );
    var sourcecode_text = __this.text()
      , sourcecode_html = __this.html()
    ;
    var click_handler = arguments.callee;
 
    var td_ln = __this.parent().find( '.line_numbers' );
 
    var rows = 1;
    // 行番号表示がある場合
    if( td_ln.get( 0 ) ) {
      var line_from = parseInt( td_ln.text().match( /^\D*(\d+)/ )[1]  ||  1 )     // 開始行
        , line_to   = parseInt( td_ln.text().match( /\D*(\d+)\D*$/ )[1]  ||  1 )  // 終了行
      ;
      rows = line_to - line_from + 1;
    }
    // 行番号表示がない場合
    else {
      rows = sourcecode_text.split( '\n' ).length;  // IE でうまくいかん
    }
 
    __this
      .unbind( 'click' )
      .empty()
      .append(
        $( '<textarea></textarea>' )
          .attr({
            rows: rows,
            wrap: 'off'  // 本来XHTMLではinvalid
          })
          .css({
            margin:     0,
            padding:    0,
            border:     'none',
            width:      $( '#content-left .post' ).width() - ( td_ln.width() + 8 ) - 8,
            color:      '#ffffff',
            background: '#000000',
            fontSize:   '12px',  // wp-syntax.css を変更した場合，ここも変更する
            lineHeight: '1.333'  // wp-syntax.css を変更した場合，ここも変更する
          })
          .val( sourcecode_text )
          .blur( function() {
            $( this )
              .parent()
                .empty()
                .click( click_handler )
                .html( sourcecode_html )
                .end()
            ;
          } )
          .appendTo( this )
          .focus()
          .get(0).select()
      )
    ;
   } );
} );

おわりに

以上，WP-Syntax が出力したソースコードのコピペを支援するようなJavaScriptをざっと書いてみました．

細かな修正はまた追々することにします．（必要にかられたら？）

こちらもあわせてどうぞ

↑ ページの先頭へ

Leave a Reply

↑ ページの先頭へ

最近の閲覧数

最近のエントリ

月別アーカイヴ

カテゴリー

タグ

最近のコメント

最近のトラックバック

メタ情報

直近のつぶやきを読み込みちゅう...