スマホのウェブページでスワイプ

思っていたより難解な条件設定が必用でした。

• ターゲット域を外れた時
• スワイプの方向（ラジアン）
• 速いスワイプで慣性をもたせる（勢いでビュワーんと動く、あの余韻）
• スマホはX,Y座標が小数点まで戻る(物理デバイス≠ブラウザのサイズ)
• UIの動きは移動量、移動時間、移動方向で決める
• マウスのドラッグでスワイプをシミュレーション
• パソコンでのマウスイベントはmouseoutは内包するエレメントでも発生する
• パソコンでのmousemoveで内包するエレメントが選択されてしまう
• 各種プロパティを初期化するタイミング
• ちゅんラヂの音量調整に使える様に機能調整したら複雑怪奇になってしまった
  それでも実用に堪える機能として実装できました (^_^;)
• なお、スマホのブラウザで本来のスワイプ動作要素ではそれが優先しますので、利用箇所は限定的です。

スワイプはスマホのブラウザ、またはPCブラウザのデベロッパーモードにてスマホ・シミュレーションで確認できます。
素のPCブラウザではマウスイベントでスワイプ牴牾(左クリックしたまま+マウス移動)の動きも実装しました。

“__petit_swipe.js”がスワイプ検出用のリエントラントなクラス記述です。同一ページ内に複数のスワープエリアがあっても動作します。
それ以外の記述はこのHTMLの中に押し込めてあります。
なおテストしながら機能をカット＆トライを続けたところ、条件判断が多く複雑怪奇になりました。

ECMAScript 2015 以降の構文を使っていますのでレガシーブラウザ(IE11など)では機能しません。