javascript 期386：20180517 - no74。ナビゲーションメニュー改修

Posted 2021-05-03

; (function ($) {
  var caseMap = {
    '1': function () { },
    '2': function () {
      followingGNav();
      hideReserveBtn();
    },
    '3': function () {
      followingGNav();
    },
    '4': function () {
      followingGNav();
      reCreateGNav();
      addFlexStyle();
    },
    '5': function () {
      followingGNav();
      addFlexStyle();
    },
    '6': function () {
      moveGNav();
    },
    '7': function () {
      moveGNav();
      followingGNav();
      hideReserveBtn();
    },
    '8': function () {
      moveGNav();
      followingGNav();
    },
  };



  /**
   * urlにplanを含むページは除外
   */
  var isPlan = function isPlan() {
    return location.href.indexOf('/plan') !== -1;
  };



  var init = function init(caseNumber) {
    // 共通処理
    if ($('.globalNav').length === 0 || $('.globalNav .globalNav__item').length === 0) return;
    $('#page').addClass('issue386');
    renameGNav();
    reStyleMapNav();

    // /plan以下のディレクトリは除外
    if (isPlan()) return;

    // caseMap毎のfunction実行
    caseMap[caseNumber.toString()]();
  };



  /**
   * #1~#8まで共通施策
   * ナビゲーションバーの座席メニューのテキスト全角「・」を半角「/」に変更
   */
  var renameGNav = function renameGNav(caseNumber) {
    var navNameEl = $('.globalNav .globalNav__item').find('span');
    for (var i = 0, max = navNameEl.length; i < max; i++) {
      var text = navNameEl[i].innerHTML;
      if (text.indexOf('・') !== -1) {
        navNameEl[i].innerHTML = text.replace('・', '/');
      }
    }
  };



  var setMapHeight = function setMapHeight() {
    if ($('#map_info').hasClass('open')) return;

    setTimeout(function () {
      var $map = $('#map');
      var mapH = $map.height() + 15;
      $map.css('height', mapH)

      var $mapToapp = $('#map_toapp');
      var mapToappH = $mapToapp.position().top + 15;
      $mapToapp.css('top', mapToappH);
    }, 1000);
  };



  /**
   * mapページの場合、map高さを調整
   */
  var reStyleMapNav = function reStyleMapNav() {
    if(location.href.indexOf('/map') === -1) return;
    setMapHeight();

    $(window).on('orientationchange', function () {
      setMapHeight();
    });

    $('#map_name').on('click', function () {
      var $mapInfo = $('#map_info');
      if ($(this).children('.icon_datauri').hasClass('open')) {
        var infoH = $mapInfo.height() + 15;
        setTimeout(function () {
          $mapInfo.css('height', infoH).addClass('open');
        }, 500);
      } else {
        $mapInfo.removeClass('open')
        setMapHeight();
      }
    });
  }



  /**
   * ナビゲーションバーの追従時のclassをadd/remove
   */
  var setGNavPosition = function setGNavPosition($gNav, $addMarginTarget, offsetTop) {
    if (offsetTop <= $(window).scrollTop()) {
      $addMarginTarget.css('height', $gNav.outerHeight(true));
      $gNav.addClass('fixedNav');
    } else {
      $gNav.removeClass('fixedNav');
      $addMarginTarget.css('height', 0);
    }
  };



  /**
   * ナビゲーションバーの追従
   */
  var followingGNav = function followingGNav() {
    var $gNav = $('.globalNav');
    $gNav.after('<div class="marginTarget" style="width:100%;" />');
    var $addMarginTarget = $('.marginTarget');

    var offsetTop = $gNav.offset().top;
    setGNavPosition($gNav, $addMarginTarget, offsetTop);

    $(window).on('scroll', function () {
      setGNavPosition($gNav, $addMarginTarget, offsetTop);
    });

    $(window).on('orientationchange', function () {
      setTimeout(function () {
        setGNavPosition($gNav, $addMarginTarget, offsetTop);
      }, 400);
    });
  };



  /**
   * 「ネット予約する」ボタンを非表示
   */
  var hideReserveBtn = function hideReserveBtn() {
    if ($('#js-reserve-btn').length === 0) return;
    $('#js-reserve-btn').hide(); // index.jsの中でopacity:1で表示されている
  };



  /**
   * globalNavを再生成
   * ・押せないボタンはグレーアウト
   * ・座席ボタンがなければ「席」を入れる
   * ・クーポンがなければ「クーポン」は削除
   */
  var reCreateGNav = function reCreateGNav() {
    var regExpGNavText = {
      '0': /メニュー/,
      '1': /^席$|^(席\/貸切)$|^(席\/個室)$|^個室$|^(個室\/貸切)$|^貸切$/,
      '2': /写真/,
      '3': /クーポン/,
      '4': /口コミ/,
      '5': /地図/
    };

    var gNavText = {
      '0': 'メニュー',
      '1': '席',
      '2': '写真',
      '3': 'クーポン',
      '4': '口コミ',
      '5': '地図'
    };

    var $navNameEl = $('.globalNav .globalNav__item').find('span');
    if ($navNameEl.length === 0) return;
    var $gNav = $('.globalNav');
    for (var i = 0, max = Object.keys(gNavText).length; i < max; i++) {
      var $gNavItemClone = $('.globalNav li.globalNav__item').first().clone();
      var num = i + 1;
      var target = '.globalNav li.globalNav__item:nth-child(' + num + ')';
      var $target = $(target);

      // 前に挿入
      if (
        $target.length !== 0
        && !(regExpGNavText[i.toString()]).test($target.find('span')[0].innerHTML)
      ) {
        $gNavItemClone.find('span')[0].innerHTML = gNavText[i.toString()];
        $gNavItemClone.addClass('disableItem');
        if (gNavText[i.toString()] === 'クーポン') {
          $gNavItemClone.addClass('js-coupon');
        }
        $target.before($gNavItemClone);
      } else if ($target.length === 0) { // 後ろに挿入
        $gNavItemClone.find('span')[0].innerHTML = gNavText[i.toString()];
        $gNavItemClone.addClass('disableItem');
        $gNav.append($gNavItemClone);

        // active要素をcloneした場合
        if ($('.disableItem').hasClass('globalNav__item--active')) {
          $('.disableItem').removeClass('globalNav__item--active');
        }
      }
    }

    $('.js-coupon').remove();

    $('.disableItem').on('click', function () {
      return false;
    });
  };



  /**
   * gnavをflexに変更
   */
  var addFlexStyle = function addFlexStyle() {
    $('.globalNav').addClass('globalNav--flex');
  };



  /**
   * gnavの位置を移動
   */
  var moveGNavPosition = function moveGNavPosition($target, isBefore, targetStyle) {
    if (isBefore) {
      $target.before($('.globalNav'));
    } else {
      $target.after($('.globalNav'));
    }
    if (!targetStyle) return;
    $target.css(targetStyle);
  };



  /**
   * gnavの移動位置に合わせて条件分岐
   */
  var moveGNav = function moveGNav() {
    var page = $('body').attr('data-pageid');
    if (page !== 'top') return;
    if ($('.topHeader').length === 0 && $('.headerCV').length === 0) return;
    $('#page.issue386').addClass('gNav__under');


    var $topHeaderFooter = $('.topHeader__footer');
    var $topHeaderLayout = $('.topHeader__layout');
    var $pointUse = $('.point-use');
    var style = { 'margin-bottom': '12px' };
    if ($topHeaderFooter.length !== 0) {
      moveGNavPosition($topHeaderFooter, false, style);
    } else if ($topHeaderLayout.length !== 0) {
      moveGNavPosition($topHeaderLayout, false, style);
    } else if ($pointUse.length !== 0) {
      moveGNavPosition($pointUse, true, false);
    } else {
      style = {
        'padding-top': '16px',
        'margin-top': '25px',
        'box-shadow': 'none'
      };
      moveGNavPosition($('.headerCV'), true, style);
    }
  };



  var abtestRun = function abtestRun(issueUrl) {
    if (
      location.href.match(/ab_issue=(.+)/) &&
      location.href.match(/ab_pattern=(.)/) &&
      location.hostname.match(/localhost|frontend/)
    ) {
      var issueNum = parseInt(location.href.match(/ab_issue=(\d+)/)[1], 10);
      var pattern = parseInt(location.href.match(/ab_pattern=(\d+)/)[1], 10);

      if (issueUrl === issueNum) {
        window.addEventListener('load', function () {
          window['issue' + issueNum].start(pattern);
        });
      }
    }
  };

  // 386: issue番号
  window.issue386 = {
    start: init
  };
  abtestRun(386);


}(jQuery));