[Aipo5] ダイアログのサイズを変える

オープンソースのグループウェア、Aipo5のカスタマイズに関するちょっとしたテクニック（それほどでもないけど）です。

ちょっとしばらくどうしたものかと困っていた問題。Aipo5のダイアログサイズを変える方法です。

Aipo5のダイアログはスタイルシートで幅が550pxに指定されていまして。こういうのはHTMLのSTYLE指定で何とかしたいところですが、通常ダイアログは２つのvelocimacro （#ALdialogheader と #ALdialogfooter） を使って記述していると思いますので、そう簡単には行きません。サイズはダイアログに指定されているので、その中に表示している自前のコンテンツのサイズを変えてもうまく行きません。マクロの中身見て直接書くなんてばかばかしいし、どうしたものか。。。（と、ここまで書いてマクロに引数があるかも？と思い、調べてみましたが、ありませんでした。ほっとしました(笑)。無駄な記事書いてアホを晒さなくてよかった

Aipo5のダイアログは、aipo.common.showDialogというダイアログで表示していると思いますが、この関数の第4引数には、ダイアログが表示されたときに（前か？）実行される関数を指定できます。最初のフォーカス位置を指定する場合に使っているかもしれませんが、この中で動的にダイアログのサイズを変えてやろうという魂胆。

Firebugで見ると、ダイアログは'modalDialog'というidのdiv要素です。が、これ実はdojoの dijit.layout.ContentPane というdijitの成れの果て（？）(Aipo５ではdijoの1.0.2がバンドルされています)。なので単純にHTML要素のエレメントの幅を変えるだけではなく、dijitのresizeメソッドを呼び出すべきだということだ。

以下の例では幅と高さを指定していますが、幅だけ800pxにしたいなら、resize({W:800})とやればよいだけです。あと、dijitの範疇の話ですがDOMのサイズを変えてから、引数無しでreizeメソッドを呼び出しても同じことですな。

ダイアログを表示させる側のHTML

<button type="button"
    onclick="onclickShowMyDialog();"
>ダイアログ表示</button>

<script type='text/javascript'><--
function onclickShowMyDialog() {
    var url = '$!jslink.getPortletById($!portlet.ID). addQueryData("template","～Screen").addQueryData("foo","bar")';
    aipo.common.showDialog( url, '$!portlet.ID',
        onloadMyDialog);
}
function onloadMyDialog() {
    dijit.byId("modalDialog").resize("w:800,h:500");
}
//-->
</script>

しっかし、Java,Aipo,javascript,dojo,velocityと盛りだくさんで、おなかいっぱい。

おなかいっぱいでおめでたいけど、そう簡単ではなかったので以下に訂正。

というのも上の方法で幅を変えると最初にダイアログを表示したときに、ダイアログが中央に来ない。表示してから要素の幅を変えているからずれるのだ。表示位置の調整も必要ってことで少々オオゴトになった（笑）。上のonloadMyDialogを下のに置き換えなきゃならんです。

//外部スタイルシートの指定値を取ってくる関数
Element.prototype.getComputedStyleValue = function (name) {
	if(this.currentStyle){
		return this.currentStyle[name];
	} else{
		return document.defaultView.getComputedStyle(this, null).getPropertyValue(name);
	}
}
function onloadMyDialog() {
	var dijitModalDialog = dijit.byId("modalDialog");
	var elemModalDialog = dijitModalDialog.domNode;
	var newWidth = 800;//新しく設定したい幅。
	var oldWidth = parseInt(elemModalDialog.getComputedStyleValue("width"));
	if(oldWidth != newWidth) {
		var oldLeft = parseInt(elemModalDialog.getComputedStyleValue("left"));
		var newLeft = oldLeft - (newWidth - oldWidth)/2; 
		elemModalDialog.style.left = newLeft + "px";
		elemModalDialog.style.width = newWidth + "px";
		dijitModalDialog.resize();
	}
}

(参考：JavascriptでCSSのプロパティ値を取得する方法)