Djember関連。
スコア編集画面のレスポンスが、スマホだとどうにも重かったので、
悩んだ挙句、編集機能をモーダルウィンドウに変更してみた。
一応、いろいろとチューニングもしてみたんだけどね。
１画面で処理するDOMが多すぎるらしくって、貧弱なスマホのブラウザだと
どうしてももっさり感が出てしまう感じ。
モーダルウィンドウに変更しても、やる事はそんなに変わらないので
あんまり効果は無いかと思ったけど、意外に動作がスムーズになった気がする。
やっぱり、１画面内のDOMの数が格段に減ったからかなー。
ちなみに、変更後のモーダルウィンドウはこんな感じ。
Bootstrapのモーダルウィンドウをベースに、コントロールを配置し、
OKボタンのクリックイベントで親画面に情報を返すところは楽勝だった。
ところが、困ったのが再生機能。
再生中にモーダルウィンドウを閉じてしまうと停止ボタンが消えてしまうので、音声を止められなくなる。
もちろん、親画面の再生／停止ボタンでも止められるんだけど、どうにも格好悪い。
いっちゃんスマートなのは、モーダルウィンドウが閉じたタイミングで音声も停止するのがいいんだけど、
モーダルウィンドウはボタンだけでなく、モーダルウィンドウ以外の場所をクリックしてもウィンドウが閉じる。
じゃぁ、どのイベントで停止すりゃいいんだ？って話。（前置きが長かった・・・）
WordPressやってる人なら、なんとなくピンとくるかと思うけど、
イベントをフックしてやればいいんだよね。
ただ、WordPressと違って、イベントをフックするための処理なんてないから、
自分でなんとかせにゃならん。
bootstrap.jsをひたすら眺め、モーダルウィンドウの定義がどこに設定されているかを調べたところ、
こんな１行を発見。（簡単に言っているけど、ここまでで半日くらいかかった）
[code lang=”javascript” line=”1″]
$.fn.modal.Constructor = Modal
[/code]
この変数「Modal」に各種のメソッドやイベント定義がなされている。
じゃ、こいつの中のウィンドウを閉じるメソッド「hide」を上書きしてやろう。
こんな感じ。
[code lang=”javascript” line=”1″]
// dialog消去時、再生中なら停止
var hide_org = $.fn.modal.Constructor.prototype.hide;
$.fn.modal.Constructor.prototype.hide = function() {
stopRhythm();
return hide_org.apply(this, arguments);
}
[/code]
元々ある「hide」と言う関数定義を変数に保存しておき、独自の関数を再定義。
「stopRhythm」は音声を停止する関数ね。
で、それを呼んだ後に、元々の関数を呼んでやる。
こうする事で、イベントをフックしたのと同じような動きになる。
無事、モーダルウィンドウが閉じると自動的に音声が止まるようになった。
めでたしめでたし。
コメント