桂小技

Posted on by 股下ニッパチ

こんにちは。ニッパチです。
最近暖かくなってきて朝起きるのが辛くなくなってうれしいです。
最近フロントエンドの業務が多くその時学んだ小技を備忘録もかねて紹介します。

ブロック要素内のクリック操作を無効化する

メイン画面とサイドメニューがあるような画面を想像してください。
この時、メイン画面である操作を行うとサイドメニューの操作を無効化したいときはCSS一発でいけます。

$('要素').on('イベント', (e) => {
  // 無効化
  $('無効化する要素').css('pointer-events', 'none');
  // 有効か
  $('無効化する要素').css('pointer-events', 'auto');
})

このようにpointer-eventsというプロパティに none を指定すると無効化されます。
再度有効化するときはautoを指定します。

確認ダイアログを表示

これもよくある実装だと思います。
真っ先に思い浮かんだのが jquery ui でしたが別の方法でやりたいと思って調べてたところbootstrapを使って実装しました。
bootstrapであればフレームワークを使っているのであれば標準装備されているでしょうし、取り掛かりやすいかと思います。

<div class="modal fade" id="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <p>操作を選択してください</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="modal-move-btn">移動</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal" id="modal-delete-btn">削除</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
  $('要素').on('click', (e) => {
    $('#modal').modal('show');
  });
  $('#modal-move-btn').on('click', (e) => {
    移動処理
  })
  $('#modal-delete-btn').on('click', (e) => {
    削除処理
  })
</script>

これによりモーダルが表示されるようになります。
ここから各ボタンのクリックイベントを設定させてあげる形になるかと思います。
ただ今回の業務で学んだことはこれをプロミス化したことなのでそれについても書いていきます。

<script>
const promisifyModal = (modal) => {
    const $modal = $(modal);
    return new Promise((resolve) => {
        $modal
            .data('modal-result', null)
            .off('hidden.bs.modal') // モーダルが閉じられたのを検知するイベント名
            .one('hidden.bs.modal', () => {
                resolve($modal.data('modal-result'));
                $modal.data('modal-result', null)
            })
            .modal('show')
    });
};
$('要素').on('click', async (e) => {
  const result = await promisifyModal('#modal');
  if (result === 'move') {
    移動処理
  }
  if (result === 'delete') {
    削除処理
  }
});
$('#modal-move-btn').on('click', (e) => {
  $('#modal').data('modal-result', 'move');
  $('#modal').modal('hide');
})
$('#modal-delete-btn').on('click', (e) => {
  $('#modal').data('modal-result', 'delete');
  $('#modal').modal('hide');
})
</script>

こうすることであるボタンを押してモーダル表示し、移動また削除がクリックされた時の動作をひとつのクリックイベント内で実現できました。

感想

まだまだ学ぶことが多いです。
以上