freefielder.jp

/* Lflick.js 
   Sleipnir Mobile の TouchPaging - L字フリックでタブを閉じる - の
   JavaScriptエミュレーション。iPhoneの Mobile Safariのみで動作。
   May 2011 (c) tyz_freefielder.jp http://freefielder.jp/  */

var lf_startX;
var lf_startY;
var lf_vflag = false;
var lf_hflag = false;
var lf_begintime;
var lf_moveX;
var lf_moveY;
var lf_isConfirm;

var Lflick = function( flag ){
 lf_isConfirm = flag;
 var ua = navigator.userAgent ;
 if( ua.indexOf( 'iPhone' ) != -1 && ua.indexOf( 'Safari' ) != -1 ){  // .....(1)
  if( ua.indexOf( 'Sleipnir') == -1){
   document.addEventListener( 'touchstart' , lf_touchstart , false);
   document.addEventListener( 'touchmove' , lf_touchmove ,false );
   document.addEventListener( 'touchend' , lf_touchend ,false );
  }
 }
}

var lf_touchstart = function( evt ){
 if( evt.touches.length == 1 ){     // .....(2)
  lf_vflag = true;
  lf_hflag = false;
  lf_startX = evt.touches[0].pageX - window.pageXOffset;
  lf_startY = evt.touches[0].pageY - window.pageYOffset;
  lf_begintime = new Date().getTime();
  lf_moveX = 0;
  lf_moveY = 0;
 }
};

var lf_touchmove = function( evt ){     // .....(3)
 var currenttime = new Date().getTime();
 lf_moveX = evt.touches[0].pageX -window.pageXOffset - lf_startX ;
 lf_moveY = evt.touches[0].pageY- window.pageYOffset - lf_startY ;
 if( lf_vflag ){
  if( lf_moveX > window.innerWidth/14 && lf_moveY > window.innerHeight/4 ){ // .....(4)
   lf_vflag = false;
   lf_hflag = true;
   lf_startY = evt.touches[0].pageY - window.pageYOffset;
  }
 }
 if( currenttime - lf_begintime > 700 ){ lf_vflag = false; lf_hflag = false ;}     // .....(5)
};

var lf_touchend = function(evt){      // .....(6)
 if( lf_hflag && lf_moveX > window.innerWidth/4 && Math.abs( lf_moveY ) < window.innerHeight/14 ){     //  ......(7)
  if( lf_isConfirm ){
   document.removeEventListener( 'touchstart' , lf_touchstart , false );     //  ......(8)
   document.removeEventListener( 'touchmove' , lf_touchmove , false );
   document.removeEventListener( 'touchend' , lf_touchend , false );
   var cfm = confirm( 'close window?' ) ;
   if( cfm){
    window.open();     //  ......(9)
    self.close();
   }else{
    document.addEventListener( 'touchstart' , lf_touchstart , false );
    document.addEventListener( 'touchmove' , lf_touchmove , false );
    document.addEventListener( 'touchend' , lf_touchend , false );
   }
  }else{
   window.open();
   self.close();
  }
 }
 lf_vflag = false;
 lf_hflag = false;
};

Safariであればイベントリスナを追加し、そうでなければこれ以上何もしない。

タッチが開始されてから、横(X軸)方向に一定量(画面の横幅の1/14)動いた瞬間を検知します。その時点までに、縦(Y軸)方向に一定以上(画面の縦幅の1/4以上)動いていなければ追跡終了。これは「L字を描く」動作ではない、と判断します。
もしY軸方向に一定量移動していたならば「この瞬間が↓から→への移動方向の変化地点である」と判断して、一旦Y軸方向の値をリセットして追跡継続。

横(X軸)方向に一定量(画面の横幅の1/4)以上動いていて、且つ縦(Y軸)方向の動きが一定量(画面の縦幅の1/14)以内に収まっていればめでたく「L字」完成。

ダイアログのボタンにタッチする操作でイベントが検知されるのを防ぐため、いちおうイベントリスナを無効にしてからダイアログを表示します。キャンセルされたらイベントリスナを元に戻します。