parpue.net » millon http://parpue.net Flash, Flex, デザイン等自分の好きなことを好きなようにやってます Wed, 12 Aug 2009 17:46:04 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 ModalBox.js にタイムアウト処理などを加える http://parpue.net/web/29 http://parpue.net/web/29#comments Tue, 01 Jul 2008 03:37:43 +0000 okm http://parpue.net/?p=29 ■ModalBoxでつくるMacOS X風ダイアログ
■modalbox.js

modalbox

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

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

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

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

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

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

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

クラス定義

>>text
JAVASCRIPT:
  1. // Dialogerクラス for ModalBox 1.6.0
  2.   function Dialoger(){
  3.       var ref = this;
  4.       this.timeout = 0 // msec, if 0, do nothing.
  5.       this.timeoutId = null;
  6.       this.disableCache = true;
  7.  
  8.       this.beforeLoad = null;
  9.       this.afterLoad = null;
  10.       this.afterHide = null;
  11.       this.afterResize = null;
  12.       this.onShow = null;
  13.       this.onUpdate = null;
  14.  
  15.       // okm append event for timeout
  16.       this.onFail = null;
  17.       this.onTimeout = null;

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

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

>>text
JAVASCRIPT:
  1. this.show = function(url, option){
  2.           /** add events **/
  3.           option.beforeLoad = function() {
  4.               if(ref.timeout> 0){
  5.                   ref.timeoutId = window.setTimeout(
  6.                       function() {
  7.                           ref.onTimeoutHandler();
  8.                       },
  9.                       ref.timeout
  10.                   ); // setTimeout
  11.               }
  12.               ref.beforeLoadHandler();
  13.           };

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

>>text
JAVASCRIPT:
  1. if(this.disableCache){
  2.               date = new Date();
  3.               if(option.params != null){
  4.                    option.params += "&";
  5.               }else{
  6.                    option.params = "";
  7.               }
  8.               option.params += "cahce_=" + date.getTime();
  9.           }
  10.           option.autoFocusing = false;
  11.           Modalbox.show(url, option);

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

>>text
JAVASCRIPT:
  1. this.onTimeoutHandler = function(){
  2.           window.clearTimeout(this.timeoutId);
  3.           if(this.onTimeout){
  4.               this.onTimeout();
  5.           }
  6.       }

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

>>text
JAVASCRIPT:
  1. <script type="text/javascript" src="modalbox/lib/prototype.js"></script>
  2. <script type="text/javascript" src="modalbox/lib/scriptaculous.js?load=effects"></script>
  3. <script type="text/javascript" src="modalbox/modalbox.js"></script>
  4. <link rel="stylesheet" href="modalbox/modalbox.css" type="text/css" media="screen" />
  5. <script type="text/javascript" src="dialoger.js"></script>
  6. <script type="text/javascript">
  7. <!--
  8. var dialoger = new Dialoger();
  9. dialoger.timeout = 5000; // 5秒でタイムアウト
  10. // タイムアウト処理
  11. dialoger.onTimeout = function(){
  12.     alert("タイムアウトしました");
  13. }
  14. // 表示時の処理
  15. dialoger.onShow = function(){
  16.     alert("とりあえずダイアログを表示！");
  17. }
  18. function Test(){
  19.     var url = "dialog_timeout.php";
  20.     var option = new Object;
  21.     option.title = "ダイアログタイムアウトテスト";
  22.     option.width = 400;
  23.     option.height = 200;
  24.     dialoger.show(url, option);
  25. }
  26. -->
  27. </script>

■　実行テスト

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

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

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

↓　Dialoger.js の全ソース

>>text
JAVASCRIPT:
  1. // Dialogerクラス for ModalBox 1.6.0
  2.   function Dialoger(){
  3.       var ref = this;
  4.       this.timeout = 0 // msec, if 0, do nothing.
  5.       this.timeoutId = null;
  6.       this.disableCache = true;
  7.  
  8.       this.beforeLoad = null;
  9.       this.afterLoad = null;
  10.       this.afterHide = null;
  11.       this.afterResize = null;
  12.       this.onShow = null;
  13.       this.onUpdate = null;
  14.  
  15.       // okm append event for timeout
  16.       this.onFail = null;
  17.       this.onTimeout = null;
  18.  
  19.       this.width = null;
  20.       this.height = null;
  21.  
  22.       this.overlayClose = false;
  23.       this.overlayOpacity = 0.5;
  24.       this.slideDownDuration = 0.3;
  25.  
  26.       this.show = function(url, option){
  27.           /** add events **/
  28.           option.beforeLoad = function() {
  29.               if(ref.timeout> 0){
  30.                   ref.timeoutId = window.setTimeout(
  31.                       function() {
  32.                           ref.onTimeoutHandler();
  33.                       },
  34.                       ref.timeout
  35.                   ); // setTimeout
  36.               }
  37.               ref.beforeLoadHandler();
  38.           };
  39.  
  40.           // dialoger default
  41.           option.overlayOpacity = 0.5;
  42.           option.slideDownDuration = 0.3;
  43.  
  44.           option.afterLoad = function(){
  45.               window.clearTimeout(ref.timeoutId);
  46.               ref.afterLoadHandler();
  47.           };
  48.           option.afterHide = function(){
  49.               ref.afterHideHandler();
  50.           };
  51.           option.onShow = function(){
  52.               ref.onShowHandler();
  53.           };
  54.           option.onUpdate = function(){
  55.               ref.onUpdateHandler();
  56.           };
  57.           option.onFail = function(){
  58.               ref.onFailHandler();
  59.           }
  60.  
  61.           if(option.height != undefined){
  62.               ref.height = option.height;
  63.           }
  64.           if(option.width != undefined){
  65.               ref.width = option.width;
  66.           }
  67.  
  68.           if(option.overlayClose == undefined){
  69.               option.overlayClose = ref.overlayClose;
  70.           }
  71.           if(option.oveelayOpacity == undefined){
  72.               option.overlayOpacity = ref.overlayOpacity;
  73.           }
  74.           if(option.slideDownDuration == undefined){
  75.               option.slideDownDuration = ref.slideDownDuration;
  76.           }
  77.  
  78.           if(option.method == undefined){
  79.               option.method = "get";
  80.           }
  81.  
  82.           if(this.disableCache){
  83.               date = new Date();
  84.               if(option.params != null){
  85.                    option.params += "&";
  86.               }else{
  87.                    option.params = "";
  88.               }
  89.               option.params += "cahce_=" + date.getTime();
  90.           }
  91.           option.autoFocusing = false;
  92.           Modalbox.show(url, option);
  93.       }
  94.  
  95.       /* Events */
  96.       this.beforeLoadHandler = function(){
  97.       if(this.beforeLoad) this.beforeLoad();
  98.       }
  99.       this.afterLoadHandler = function(){
  100.       if(this.afterLoad) this.afterLoad();
  101.  
  102.       }
  103.       this.afterHideHandler = function(){
  104.       if(this.afterHide) this.afterHide();
  105.       }
  106.       this.afterResizeHandler = function(){
  107.       if(this.afterResize) this.afterResize();
  108.       }
  109.       this.onShowHandler = function(){
  110.       if(this.onShow) this.onShow();
  111.       }
  112.       this.onUpdateHandler = function(){
  113.       if(this.onUpdate) this.onUpdate();
  114.       }
  115.       this.onFailHandler = function(){
  116.       if(this.onFail){
  117.               this.onFail();
  118.           }else{
  119.               Modalbox.hide();
  120.           }
  121.       }
  122.       this.onTimeoutHandler = function(){
  123.           window.clearTimeout(this.timeoutId);       
  124.       if(this.onTimeout){
  125.               this.onTimeout();
  126.           }
  127.       }
  128.  
  129.       this.activate = function(){
  130.           Modalbox.activate();
  131.       }
  132.       this.deactivate = function(){
  133.           Modalbox.deactivate();
  134.       }
  135.   }

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

>>text
PHP:
  1. <?
  2. sleep(7);
  3. echo 'タイムアウト時に閉じる処理入れないと、<br/>遅れて取得できたとき普通に表示されます。<br/>';
  4. echo '<a href="#" onClick="Modalbox.hide();">閉じる</a>';
  5. ?>
]]> http://parpue.net/web/29/feed 0 音楽スタジオ検索 / メンバー募集 millon.jp http://parpue.net/web/23 http://parpue.net/web/23#comments Fri, 27 Jun 2008 01:45:19 +0000 okm http://parpue.net/?p=23 millon
オープンソース・ジャパン株式会社（以下、OSJ）は、音楽制作やライブ活動などを趣味とするユーザー向けポータルサイト「millon.jp（ミロン・ジェー・ピー）」を開発、ベータ公開しました。

millon.jp/

プレスリリース全文へ

全国の音楽リハーサルスタジオの検索・各音楽スポットへのイベント、メンボ記事の貼り付けが可能です。
携帯電話からのスタジオ検索にも対応しております。
ぜひご利用ください。

]]> http://parpue.net/web/23/feed 0