// モーダル表示時に本文（モーダル外のコンテンツ）の縦スクロールをロックするため、toggleScrollLock関数とそのために必要な定数・変数を用意。
// 本文（モーダル外のコンテンツ）の縦スクロールバーを非表示にしないと、モーダル内に縦スクロールバーが出る場合に、モーダル外と合わせて2つ縦スクロールバーが出てしまう
const $window = $(window);
const $html = $('html');
let scrollTopVal = 0;
function toggleScrollLock(_scrollTopVal) {
	if ($html.hasClass('is_locked')) {
		$html.removeClass('is_locked');
		$window.scrollTop(_scrollTopVal);
	} else {
		$html.addClass('is_locked').css({
			top: -_scrollTopVal,
		});
	}
}
// htmlやbodyはheight:100%などを指定することが多いため、コンテンツ用のwrapperを用意し、リサイズ監視などはそちらで行う
const $ly_wrapper = $('#ly_wrapper');
// #ly_wrapperのResizeObserverを定義
const resizeObserver_wrapper = new ResizeObserver((entries) => {
  entries.forEach((entry) => {
    // #ly_wrapperの縦スクロールバーの有無を元に--scrollbarWを更新
    const scrollbarW = window.innerWidth - document.body.clientWidth;
    $html.css('--scrollbarW', `${scrollbarW}px`);
    // 縦スクロール可能かどうかをcan_scrollクラスの有無でCSSから参照可能にしておく（モーダル開閉時のガタつきを防ぐため）
    if ($html.css('--scrollbarW') !== '0px') {
      $ly_wrapper.addClass('can_scroll');
    } else {
      $ly_wrapper.removeClass('can_scroll');
    }
  });
});
resizeObserver_wrapper.observe($ly_wrapper[0]);

// .js_openModal毎にセット化
$('.js_openModal').each(function() {
  const $this = $(this);
  // 対象のdialog要素を$targetDialogに格納
  const $targetDialog = $($this.attr('href'));
  // 対象のdialog要素内の閉じるボタン
  const $closeBtn = $targetDialog.find('.dialog_closeBtn');
  // 対象のdialog要素内の背景
  const $backdrop = $targetDialog.find('.dialog_backdrop');

  // 対象のdialog要素が取得できたときのみif内を実行（エラー回避のため）
  if ($targetDialog.length) {
    // 対象dialogのResizeObserverを定義
    const resizeObserver_dialog = new ResizeObserver((entries) => {
      entries.forEach((entry) => {
        // 対象dialogの縦スクロールバーの有無を元に--dialogScrollbarWを更新
        const dialogScrollbarW = window.innerWidth - $targetDialog[0].clientWidth;
        $html.css('--dialogScrollbarW', `${dialogScrollbarW}px`);
        // 縦スクロール可能かどうかをcan_scrollクラスの有無でCSSから参照可能にしておく（モーダル開閉時のガタつきを防ぐため）
        if ($html.css('--dialogScrollbarW') !== '0px') {
          $targetDialog.addClass('can_scroll');
        } else {
          $targetDialog.removeClass('can_scroll');
        }
      });
    });
    // .js_openModalクリック時
    $this.on('click', function(event) {
      // a要素クリック時の標準の挙動（リンク）をキャンセル
      event.preventDefault();
      // jQueryオブジェクトから添字[0]でDOMを取得し、dialogネイティブのメソッド（showModal）でモーダルを表示
      $targetDialog[0].showModal();
      // スクロールをロック
      scrollTopVal = $window.scrollTop();
      toggleScrollLock(scrollTopVal);
      // ResizeObserverを有効化
      resizeObserver_dialog.observe($targetDialog[0]);
    });
    // 閉じるボタンおよび背景のクリック時
    $closeBtn.add($backdrop).on('click', function() {
      // ResizeObserverを無効化
      resizeObserver_dialog.unobserve($targetDialog[0]);
      // dialogネイティブのメソッドclose()でモーダルを閉じる
      $targetDialog[0].close();
      // スクロールロックを解除
      toggleScrollLock(scrollTopVal);
    });
  }
});