stonewall開発日記12

前回の投稿を踏まえて、大きくリファクタリングした。変更点としては、

1. レイアウト対象の要素を配列からオブジェクトにし、位置やサイズを持たせるようにした。
2. 位置とサイズの計算だけをするcalculatePositionを作り、build内で呼ぶようにした。
3. レイアウト対象の要素をcellからstoneという名前に変更した。

calculatePositionはDOMに対して操作をしないように心がけて、元のサイズを測る時にcloneNodeを使ってみたのだけど、テキストの場合にうまくいかなかった。苦し紛れに元のサイズを保持しておき、計算してから戻すということをしている。さらにコールバック関数を受け取って引数にレイアウト対象オブジェクトの配列を返すようにしてあるので、jQueryとかと組み合わせるとエフェクトをつけやすい。

Tumblr with jQuery

あとは追加や削除した際に効率的にレイアウトする機能をつけてversion 1としたい。