Insertion.Beforeクラス - Backstage of theater.js

【抜粋】
Insertion.Before = Class.create();
Insertion.Before.prototype = Object.extend(new Abstract.Insertion('beforeBegin'), {
  initializeRange: function() {
    this.range.setStartBefore(this.element);
  },

  insertContent: function(fragments) {
    fragments.each((function(fragment) {
      this.element.parentNode.insertBefore(fragment, this.element);
    }).bind(this));
  }
});

基準要素の直前に要素を挿入するクラスです。インスタンス作成時に処理が行われ、各メソッドは外部から使用されることはありません。

Abstract.Insertionクラスの引数に'beforeBegin'を設定してインスタンスを生成、継承しています。

initializeRangeメソッド

this.rangeは親クラスAbstract.Insertionのinitializeメソッドで作成されるRangeオブジェクトです。setStartBeforeメソッドにより、開始位置を要素の直前に設定します。Mozilla系ブラウザでcreateContextualFragmentメソッドを使うための準備です。

insertContentメソッド

引数fragmentsはinitializeメソッド*1内で、contentFromAnonymousTableメソッドにより作成されるか、もしくはRagenオブジェクトのcreateContextualFragmentメソッドにより作成されます。どちらもArrayオブジェクトで、挿入する要素オブジェクトが格納されています。このため、eachメソッドが使えます。基準要素の親要素からinsertBeforeメソッドを使用して、引数の配列fragmentsの各要素を、基準要素の直前に順に追加しています。bindメソッド*2は、クロージャ内でthisを有効にするために使用されています。

【例】
<html>
<head>
<title></title>
<style>
<!--
div{
  border:solid blue 2px;
  margin:5px;
  padding:5px;
}
-->
</style>
<script language="javascript" src="prototype.js" charset="utf-8"></script>
<script>
<!--
var counter = 0;
function test(){
  var blue = (255 - counter * 20);
  blue = (blue < 0) ? 0 : blue;
  var color = "rgb(255, 255, " + blue + ")";
  var str = "<div>BBBB<div>" + counter + "</div></div>"
          + "<script>"
          + "$('test').style.backgroundColor = '" + color + "';"
          + "counter++;"
          + "</script>";

  new Insertion.Before('test', str); 
}
//-->
</script>
</head>
<body>
<div id="test">AAAA</div>
<button onclick="test();">TEST</button>
</body>
</html>

TESTボタンで基準要素の直前に追加します。追加するごとに子要素のカウンタをアップしています。また、スクリプトタグで基準要素の背景を少しずつ黄色にしています。*3

テーブル途中の行追加は、tr要素を対象とすることで可能です。v1.4.0では、IEでtr要素を対象とすることができません。v1.5.0以降では対象となります。＞＞こちら＜＜を参照してください。

テーブル先頭への行追加は次のInsertion.Topクラスを使用します。

*1:親クラスAbstract.Insertionのinitializeメソッド

*2:前述Functionクラスの追加メソッド

*3:Operaではカウンタが上がらない不具合があります。原因はStringクラスに対する拡張」で追加されているevalScriptsメソッドです。v1.4.0の不具合です。正式リリースでない最新v1.5.0_rc0では改善されています。