javascript 问题381：yyyymmdd - no72。メニューページ回游施策_ph2

Posted 2021-05-04

@keyframes toNext {
    0% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}
@keyframes toPrev {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}
@keyframes fromNext {
    0% {
        left: 100%;
    }
    100% {
        left: 0;
    }
}
@keyframes fromPrev {
    0% {
        left: -100%;
    }
    100% {
        left: 0;
    }
}

.issue381 {
    width: 100%;
    overflow: hidden;
    z-index: 3;
    #gnHeader {
        position: relative;
        z-index: 4;
    }
    .modal_container {
        display: none;
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        z-index: 11;
        background: #fff;
        &.active {
            z-index: 14;
        }
        &.initAnimation {
            animation: fromNext 300ms ease 0s 1 forwards;
        }
        &.toNext {
            animation: toNext 300ms ease 0s 1 forwards;
        }
        &.fromNext {
            animation: fromNext 300ms ease 0s 1 forwards;
        }
        &.toPrev {
            animation: toPrev 300ms ease 0s 1 forwards;
        }
        &.fromPrev {
            animation: fromPrev 300ms ease 0s 1 forwards;
        }
        &.next {
            left: 100%;
        }
        &.prev {
            left: -100%;
        }
        .modal_inner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: scroll;
            z-index: 11;
            .close_modal_btn {
                position: fixed;
                top: 0;
                width: 100%;
                height: 36px;
                z-index: 12;
            }
            .section.section--border_bottom.-bg-white {
                position: relative;
                width: 100%;
                height: 100%;
                padding-top: 36px;
                margin-bottom: 0;
                overflow: scroll;
                .image.image--hero {
                    background-color: #eee;
                }
                .l-box--detail {
                    padding-bottom: 86px;
                }
                .pagination {
                    position: fixed;
                    bottom: 0;
                    text-align: center;
                    z-index: 12;
                }
            }
        }
    }
    .blackBack {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .4;
        background-color: #333;
        z-index: 13;
    }
}

;(function ($, util) {
  var animateDuration = 300;
  var afterEffectDuration = 600;
  var removeClassName = 'toPrev fromPrev toNext fromNext';

  var init = function init(caseNumber) {
    $('body').css({
      'position': 'relative',
      'z-index': 2
    });
    $('#page').addClass('issue381');

    if ($('.section.section--border_bottom.-bg-white').length === 0) return;
    createModalList();
    calcListCount();
    showModalList();
    $('.close_modal_btn').on('click', closeModal);
    $('.pagination a').on('click', paginationEvent);
    $(window).on('orientationchange', function () {
      setTimeout(function () {
        if ($('.open').length === 0) return;
        resetModal();
      }, 400);
    });
  };



  /**
   * 一覧に戻るボタンの生成
   */
  var createCloseBtn = function createCloseBtn($modalContainer) {
    var closeBtn;
    if ($('.headerNav').length === 0) {
      closeBtn = '<div class="headerNav close_modal_btn"><a><div><p>一覧に戻る</p></div></a></div>';
    } else {
      closeBtn = $('.headerNav').clone(false);
      closeBtn.addClass('close_modal_btn');
      closeBtn.find('a div p').text('一覧に戻る');
    }

    $modalContainer.prepend(closeBtn);
    $modalContainer.wrapInner('<div class="modal_inner" />');

    // pagination時の背景カバー
    $('#page').append('<div class="blackBack" />');
  };



  /**
   * メニュー詳細の各々をラッピング
   */
  var createModalList = function createModalList() {
    $('.section.section--border_bottom.-bg-white').wrap('<div class="modal_container" />');
    var $modalContainer = $('.modal_container');
    createCloseBtn($modalContainer);
  };



  /**
   * メニュー詳細の数をpaginationに反映
   */
  var calcListCount = function calcListCount() {
    var $modalContainer = $('.modal_container');
    var $pageEl = $('.modal_container .pagination .pagination__text p');
    var $pageNum = $pageEl.find('span:first-child');
    var $pageSum = $pageEl.find('span:last-child');

    for (var i = 0, num = 1, max = $pageEl.length; i < max; i++) {
      var page = i + 1;
      $pageNum[i].innerHTML = page;
      $pageSum[i].innerHTML = max;
      // disable付与
      if (i === 0) {
        $modalContainer
          .first().find('.section .pagination .pagination__prev a p')
          .removeClass('ic-arr-l').addClass('ic-arr-l-disable');
      } else if (i === (max - 1)) {
        $modalContainer
          .last().find('.section .pagination .pagination__next a p')
          .removeClass('ic-arr-r').addClass('ic-arr-r-disable');
      }
    }
  };



  /**
   * width, heightの付与
   */
  var adjustModalSize = function adjustModalSize() {
    $('.modal_container').css({
      'width': $(window).width(),
      'height': $(window).height()
    });

    $('.modal_container.active .section').css({
      'height': $(window).height() - $('.modal_container .headerNav').height()
    });
  };



  /**
   * 背景カバー
   */
  var addBackGroundBlack = function addBackGroundBlack() {
    $('.blackBack').show();
    setTimeout(function () {
      $('.blackBack').hide();
    }, afterEffectDuration);
  };



  /**
   * クリックされたメニュー詳細を取得
   */
  var getClickedList = function getClickedList(text) {
    var findText = '.modal_container .section.section--border_bottom.-bg-white:contains("' + text + '")';
    return $(findText).parents('.modal_container');
  };



  /**
   * prev, nextクラスを付与
   */
  var addPrevNextClass = function addPrevNextClass() {
    var delClassName = 'prev next ' + removeClassName;
    $('.modal_container').removeClass(delClassName);

    var $activeEl = $('.modal_container.active');
    if ($activeEl.prev().hasClass('modal_container')) {
      $activeEl.prev().addClass('prev');
    }
    if ($activeEl.next().hasClass('modal_container')) {
      $activeEl.next().addClass('next');
    }
  }



  /**
   * prev, nextのアニメーション
   */
  var animatePrevNextEl = function animatePrevNextEl($activeEl, targetName) {
    switch (targetName) {
      case 'prev':
        $('.active').addClass('fromPrev');
        $activeEl.removeClass('initAnimation')
        $('.next').addClass('toNext');
        break;
      case 'next':
        $('.active').addClass('fromNext');
        $activeEl.removeClass('initAnimation')
        $('.prev').addClass('toPrev');
        break;
    }
  }


  /**
   * pagination、closeボタンが表示されないことがあるので、
   * android用にスタイルを追加と削除
   */
  var resetModalStyle = function resetModalStyle() {
    $activeEl = $('.active');
    setTimeout(function () {
      $activeEl.children('.modal_inner').css({
        'z-index': 16,
        'left': 0
      });
      $activeEl.find('.modal_inner .close_modal_btn').css({
        'z-index': 18,
        'left': 0
      })
      $activeEl.find('.modal_inner .section .pagination').css({
        'z-index': 18,
        'left': 0
      })
    }, animateDuration);
  };



  /**
   * pagination、closeボタンが表示されないことがあるので、
   * android用にスタイルを追加と削除
   */
  var removeModalStyle = function removeModalStyle() {
    $activeEl = $('.active');
    $activeEl.children('.modal_inner').removeAttr('style')
    $activeEl.find('.modal_inner .close_modal_btn').removeAttr('style');
    $activeEl.find('.modal_inner .section .pagination').removeAttr('style');
  };



  /**
   * メニュークリック時(右から詳細スクロール表示)
   */
  var scrollPosition; // modalを開いた時位置を保持
  var showModalList = function showModalList() {
    var $modalList;

    $('.listGroup .listGroup__item a').on('click', function (e) {
      e.preventDefault();
      scrollPosition = $(window).scrollTop();

      var text = $(this).find('.media .media__body .heading--big').text();
      if (!text) return;
      text = text.replace(/(^\s+)|(\s+$)/, '');
      $modalList = getClickedList(text);
      if ($modalList.length !== 1) return;

      // 埋め込まれたメニュー詳細を表示
      $('.modal_container .section').show();
      $modalList.show();
      $modalList.addClass('active open');
      adjustModalSize();


      $('.active').addClass('initAnimation'); // 初期アニメーション
      addPrevNextClass(); // prev, nextクラスを付与
      resetModalStyle();

      // 600ms後にタップ可能
      setTimeout(function () {
        $('body').css({ 'position': 'fixed' }); // 背景固定
        isFinished = true;
      }, afterEffectDuration)
    });
  };



  /**
   * スクロールした位置をtopに戻す
   */
  var initScrollPosition = function initScrollPosition($activeEl, isPagination) {
    if (isPagination) {
      setTimeout(function () {
        $activeEl.find('.section').scrollTop(0);
      }, afterEffectDuration);
    } else {
      $activeEl.find('.section').scrollTop(0);
    }
  }



  /**
   * pagination
   */
  var isFinished = false;
  var paginationEvent = function paginationEvent(e) {
    e.preventDefault();
    if (!isFinished) return;

    removeModalStyle();

    isFinished = false
    var $activeEl = $('.modal_container.active');
    var isPrev = $(this).parent().hasClass('pagination__prev');
    var $targetEl;
    var targetName;
    if (isPrev) {
      if (!$activeEl.prev().hasClass('modal_container')) {
        isFinished = true;
        return;
      }
      targetName = 'prev';
      $targetEl = $('.prev');
    } else {
      if (!$activeEl.next().hasClass('modal_container')) {
        isFinished = true;
        return;
      }
      targetName = 'next'
      $targetEl = $('.next');
    }


    $activeEl.removeClass('active');
    initScrollPosition($activeEl, true);
    addBackGroundBlack(); // z-indexの関係上active削除後に背景カバー

    $targetEl.show().addClass('active');
    addPrevNextClass(); // prev, nextクラスを付与
    animatePrevNextEl($activeEl, targetName); // アニメーション
    resetModalStyle();


    // 600ms後にタップ可能
    setTimeout(function () {
      $('.prev').removeClass(removeClassName);
      $('.next').removeClass(removeClassName);
      isFinished = true;
    }, afterEffectDuration);
  };



  /**
   * resize時にmodalをリセット
   */
  var timer = false;
  var resetModal = function resetModal() {
    var $windowWidth = $(window).width();
    if (timer !== false) { clearTimeout(timer); };
    timer = setTimeout(function () {
      adjustModalSize(); // width, heightの調整
      $('.active').css({ 'left': 0 });
      addPrevNextClass();
    }, animateDuration);
  };



  /**
   *  モーダルを閉じる
   */
  var closeModal = function closeModal(e){
    e.preventDefault();
    if (!isFinished) return;
    isFinished = false

    // body固定解除
    $('body').css({ 'position': 'relative' });
    $(window).scrollTop(scrollPosition);

    var $activeEl = $('.active');
    var delClassName = 'initAnimation ' + removeClassName
    $activeEl.removeClass(delClassName).addClass('toNext');

    removeModalStyle()

    setTimeout(function(){
      initScrollPosition($activeEl, false);
      // modal_containerのスタイルすべてを削除
      delClassName = 'open active prev next ' + delClassName;
      $('.modal_container')
        .removeClass(delClassName)
        .removeAttr('style')
        .hide();
    }, animateDuration);
  };



  // 381: issue番号
  window.issue381 = {
    start: init
  };
  util.abtestRun(381);

}(jQuery, util));