jquery.ganttViewのカスタマイズしてみました（まとめ）

ここ最近、暇を見つけてはjquery.ganttViewをカスタマイズしてきましたが、一段落ついたのでオリジナルとの違いをまとめておきます。

ベースになっているソース

GitHubにpushしてあるソースは、オリジナルのjquery.ganttViewからforkしていますが、実際はHelp me, hackers!で、jQueryのガントチャートライブラリをドラッグ＆ドロップとリサイズできるようにカスタマイズした2010年7月10日時点*1のkomagata/jquery.ganttViewが、これをベースになっています。

追加機能

オリジナルのjquery.ganttViewと比べ、2010年7月28日現在、GitHubにpushしたソースには以下の機能を追加しています。
http://github.com/nkmrshn/jquery.ganttView

リサイズ後の工数を正確に表示
ドラッグ後の開始日・終了日を正確に保存
読み取り専用属性、readOnlyの追加
工数に土日を含めるか否かを設定する、excludeWeekendsの追加
土日に色が付けられるよう、class属性の追加
曜日を表示する、showDayOfWeekの追加
外部ファイルによる祝祭日の設定およびshowHolidaysの追加
工数に祝祭日を含めるか否かを設定する、excludeHolidaysの追加
選択中は、行の色を変えられるようにclass属性を追加
表示後、動的に工程の追加、更新、削除の追加

最後まで修正に手間取ったバグ

右端にドラッグしようとすると、突然、マウスの動きが止まるなど挙動不審な動きをするバグがありました。この原因は、二つありました。

親要素にwidthの設定されていなかった

jQuery.UI.Draggableのcontainmentオプションで「parent」が指定されているにも関わらず、親要素のCSSでwidthが設定されていなかった為、もう一つ上にある親要素（ガントチャートの表示領域）のwidthが継承されていました。

リサイズ中もposition、top、leftのCSSが設定されていた

これは、リサイズ終了後に発生するstopイベントでも同様なのですが、resizeイベント中、jQuery.UI.Resizableはリサイズ対象要素のstyle属性にposition、top、leftを設定します。リサイズ後、stopイベントでこらら3つのCSS要素を削除しないと、開始日と終了日が保存されている変数の値が狂うバグがありました。リサイズ中もこれらを削除しないと、マウスを動かしている間、リサイズ対象となっている要素が表示範囲外に移動することがありました。

    resize: function(event, ui) {
        $(this).css("position", "");
        $(this).css("top", "");
        $(this).css("left", "0px");
    },

今後について

後は、「指定した日にスクロールさせる機能」や「並べ替え」、そして「互いの工程に関連線を描く」などが考えられますが、そもそも私がjQueryに慣れることがカスタマイズの目的なので*2、ここらへんで終了したいと思います。リファクタリングとかも残っているんですが、これは暇があったらにします。

*1:それ以後の修正、例えばjsPlumbなどのマージなどは、私の方には含まれていません。

*2:id:nkmrshn:20100710:1278721223