DrawerJSでリサイズしてもドロワーを閉じないようにする

ドロワーメニュー（横からスッと滑りこんでくるメニューです。）を使うとき、DrawerJSをよく使います。

git.blivesta.com

きれいな動きでお気に入りなんですけど、デフォルトでは画面をリサイズするとドロワーが閉じてしまいます。

画面向きを変えたり、URLバーが消えるだけでも消えてしまうので、ちょっと使い勝手がよくありません。

ちょっとした修正で改善できたので、備忘録を兼ねてメモ。

触るファイルは drawer.js のみ！！

ダウンロードすると drawer-master/dist/js/drawer.js があるので、これを開きます。

リサイズ時に発生している問題なので、おもむろに resize で検索。

72行目あたりに

          $(window).on('resize.' + namespace, function close() {
            __.close.call(_this);
            return _this.iScroll.refresh();
          });

という記述があります。

それを・・・こうします。

          // $(window).on('resize.' + namespace, function close() {
          //   __.close.call(_this);
          //   return _this.iScroll.refresh();
          // });

コメントアウトですね。

これだけでリサイズしても、ドロワーメニューは閉じなくなります。

でも閉じないよ・・・

これだけだと開いたはいいけど、閉じれないメニューが出来てしまいました。

なので、もうちょっと修正。

先程のコメントアウトしたもののすぐ下に以下を追加。

          // $(window).on('resize.' + namespace, function close() {
          //   __.close.call(_this);
          //   return _this.iScroll.refresh();
          // });

          // これを追加します。
          $('.drawer-overlay').on('click', function(e) {
            e.preventDefault();
            __.close.call(_this);
            return _this.iScroll.refresh();
          });

$('.drawer-overlay')が後ろのオーバーレイになりますので、これをクリックしたら、__.close.call(_this);を呼んで、iScrollをリフレッシュしてやってるんですね。

これでリサイズしても閉じないドロワーが出来ました。

drawerjs使ってる（使いたい）人で同じように困ってる人の助けになれば幸いです。

ではでは〜。