Home > WEB | javascript | millon > ModalBox.js にタイムアウト処理などを加える

ModalBox.js にタイムアウト処理などを加える

2008-07-01 (火) 12:37
WEB | javascript | millon
javascript | millon | modalbox

■ModalBoxでつくるMacOS X風ダイアログ
■modalbox.js

このライブラリ、millon.jpで随所に利用しています。
アップデートも頻繁で、今も進化を続けているようです。

サイトで利用する際、新しいリクエストをダイアログに表示する場合、
データの取得をタイムアウトする処理がなかったので、どうにか追加してみた。
（進化してるからそのうち追加されそうだけど）

ModalBoxには↓のようなCallBackが用意されています。(ver.1.6.0)

beforeLoad - コンテンツロード前に呼ばれる
afterLoad - コンテンツロード後に呼ばれる
beforeHide - ダイアログが隠れる前に呼ばれる
afterHide - ダイアログが隠れた後に呼ばれる
afterResize - ダイアログのサイズ変更後に呼ばれる
onShow - ダイアログが表示されたときに呼ばれる
onUpdate - ダイアログのコンテンツが更新されたときに呼ばれる

これにタイムアウトなどの処理を加えたいと思います。

こういう外部のライブラリを使う場合、
僕はなるべく元ファイルには手を入れず、まるごとラップしたクラスに処理を追加するようにしています。

Dialoger というModalBoxをラップするような、新しいクラスを作ることにしました。

クラス定義

>>text

JAVASCRIPT:

// Dialogerクラス for ModalBox 1.6.0
function Dialoger(){
var ref = this;
this.timeout = 0 // msec, if 0, do nothing.
this.timeoutId = null;
this.disableCache = true;
this.beforeLoad = null;
this.afterLoad = null;
this.afterHide = null;
this.afterResize = null;
this.onShow = null;
this.onUpdate = null;
// okm append event for timeout
this.onFail = null;
this.onTimeout = null;

もともとあるイベントも追加したいイベントも
メンバー変数として定義します。

↓ModalBox.show()を動かすためのメンバー関数 show()を作成し、
その中でタイムアウトのための処理を追加します。
optionオブジェクトのtimeoutに 0以上の値が入っていた場合、
タイムアウト処理が有効になるようにします。

>>text

JAVASCRIPT:

this.show = function(url, option){
/** add events **/
option.beforeLoad = function() {
if(ref.timeout> 0){
ref.timeoutId = window.setTimeout(
function() {
ref.onTimeoutHandler();
},
ref.timeout
); // setTimeout
}
ref.beforeLoadHandler();
};

ついでにshow()の途中に、キャッシュを完全に無効にする場合の処理を追加しています。
現在のタイムスタンプを、取得するURLの後にパラメータとして追加しています。

>>text

JAVASCRIPT:

if(this.disableCache){
date = new Date();
if(option.params != null){
option.params += "&";
}else{
option.params = "";
}
option.params += "cahce_=" + date.getTime();
}
option.autoFocusing = false;
Modalbox.show(url, option);

↓ タイムアウトした場合は onTimeout を動作させます。

>>text

JAVASCRIPT:

this.onTimeoutHandler = function(){
window.clearTimeout(this.timeoutId);
if(this.onTimeout){
this.onTimeout();
}
}

ModalBoxを表示するHTML内に
実際に Dialogerクラスのインタスタンスを生成して、
ModalBoxの表示のタイムアウトをハンドルする例です。↓

>>text

JAVASCRIPT:

<script type="text/javascript" src="modalbox/lib/prototype.js"></script>
<script type="text/javascript" src="modalbox/lib/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="modalbox/modalbox.js"></script>
<link rel="stylesheet" href="modalbox/modalbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="dialoger.js"></script>
<script type="text/javascript">
<!--
var dialoger = new Dialoger();
dialoger.timeout = 5000; // 5秒でタイムアウト
// タイムアウト処理
dialoger.onTimeout = function(){
alert("タイムアウトしました");
}
// 表示時の処理
dialoger.onShow = function(){
alert("とりあえずダイアログを表示！");
}
function Test(){
var url = "dialog_timeout.php";
var option = new Object;
option.title = "ダイアログタイムアウトテスト";
option.width = 400;
option.height = 200;
dialoger.show(url, option);
}
-->
</script>

■　実行テスト

■■ここをクリックでダイアログのタイムアウトテスト■■

↑ 途中でタイムアウトします。

いかがでございましょう・・・あんまいろんなブラウザでテストしてないですがｗ

↓　Dialoger.js の全ソース

>>text

JAVASCRIPT:

// Dialogerクラス for ModalBox 1.6.0
function Dialoger(){
var ref = this;
this.timeout = 0 // msec, if 0, do nothing.
this.timeoutId = null;
this.disableCache = true;
this.beforeLoad = null;
this.afterLoad = null;
this.afterHide = null;
this.afterResize = null;
this.onShow = null;
this.onUpdate = null;
// okm append event for timeout
this.onFail = null;
this.onTimeout = null;
this.width = null;
this.height = null;
this.overlayClose = false;
this.overlayOpacity = 0.5;
this.slideDownDuration = 0.3;
this.show = function(url, option){
/** add events **/
option.beforeLoad = function() {
if(ref.timeout> 0){
ref.timeoutId = window.setTimeout(
function() {
ref.onTimeoutHandler();
},
ref.timeout
); // setTimeout
}
ref.beforeLoadHandler();
};
// dialoger default
option.overlayOpacity = 0.5;
option.slideDownDuration = 0.3;
option.afterLoad = function(){
window.clearTimeout(ref.timeoutId);
ref.afterLoadHandler();
};
option.afterHide = function(){
ref.afterHideHandler();
};
option.onShow = function(){
ref.onShowHandler();
};
option.onUpdate = function(){
ref.onUpdateHandler();
};
option.onFail = function(){
ref.onFailHandler();
}
if(option.height != undefined){
ref.height = option.height;
}
if(option.width != undefined){
ref.width = option.width;
}
if(option.overlayClose == undefined){
option.overlayClose = ref.overlayClose;
}
if(option.oveelayOpacity == undefined){
option.overlayOpacity = ref.overlayOpacity;
}
if(option.slideDownDuration == undefined){
option.slideDownDuration = ref.slideDownDuration;
}
if(option.method == undefined){
option.method = "get";
}
if(this.disableCache){
date = new Date();
if(option.params != null){
option.params += "&";
}else{
option.params = "";
}
option.params += "cahce_=" + date.getTime();
}
option.autoFocusing = false;
Modalbox.show(url, option);
}
/* Events */
this.beforeLoadHandler = function(){
if(this.beforeLoad) this.beforeLoad();
}
this.afterLoadHandler = function(){
if(this.afterLoad) this.afterLoad();
}
this.afterHideHandler = function(){
if(this.afterHide) this.afterHide();
}
this.afterResizeHandler = function(){
if(this.afterResize) this.afterResize();
}
this.onShowHandler = function(){
if(this.onShow) this.onShow();
}
this.onUpdateHandler = function(){
if(this.onUpdate) this.onUpdate();
}
this.onFailHandler = function(){
if(this.onFail){
this.onFail();
}else{
Modalbox.hide();
}
}
this.onTimeoutHandler = function(){
window.clearTimeout(this.timeoutId);
if(this.onTimeout){
this.onTimeout();
}
}
this.activate = function(){
Modalbox.activate();
}
this.deactivate = function(){
Modalbox.deactivate();
}
}

一応タイムアウトさせてるPHP

>>text

PHP:

<?
sleep(7);
echo 'タイムアウト時に閉じる処理入れないと、<br/>遅れて取得できたとき普通に表示されます。<br/>';
echo '<a href="#" onClick="Modalbox.hide();">閉じる</a>';
?>

Comments:0

Trackbacks:0

Trackback URL for this entry: http://parpue.net/web/29/trackback
Listed below are links to weblogs that reference: ModalBox.js にタイムアウト処理などを加える from parpue.net

Home > WEB | javascript | millon > ModalBox.js にタイムアウト処理などを加える

最近の記事

カテゴリ