javascript Issue345：20180130 - no63。ナビゲーションに「地図」追加

Posted 2021-05-04

(function($, util) {

  window.issue345 = {

    $kodawariClone: $('span:contains("こだわり")').closest('.globalNav__item').clone(),

    start: function(pattern) {
      var that = this;

      $('.globalNav').addClass('issue345');

      switch (pattern) {
        case 1:
          that.setSwipearea();
          that.moveNav('こだわり');
          that.changeKodawariToMap();
          that.addKodawari();
          break;
        case 2:
          that.changeKodawariToMap();
          break;
        case 3:
          that.changeKodawariToMap();
          that.moveNav('地図');
          break;
        default:
          break;
      }
    },

    setSwipearea: function() {
      var $nav = $('.globalNav');

      $nav.addClass('issue345--swipe');
      $nav.wrap('<div class="issue345--swipe-wrapper" />');
    },

    changeKodawariToMap: function() {
      var $issue345 = $('.issue345');
      var $kodawari = $issue345.find('span:contains("こだわり")');

      var shopId = JSON.parse($('body').attr('data-r')).sid;
      var mapHref = 'https://r.gnavi.co.jp/' + shopId + '/map/?sc_lid=smp_map_01';

      // こだわりを地図に差し替え
      // こだわりページの場合はactiveを外す
      $kodawari.text('地図').css('margin-top', '-1px');
      $kodawari.parent().removeClass().addClass('ic-nav-map');
      $kodawari.closest('a').attr('href', mapHref);
      $kodawari.closest('.globalNav__item').removeClass('globalNav__item--active');
    },

    moveNav: function(navLabel) {
      $('span:contains("' + navLabel + '")').closest('.globalNav__item').appendTo($('.globalNav'));
    },

    addKodawari: function() {
      var that = this;
      that.$kodawariClone.appendTo($('.globalNav'));
    },

    setClass: function() {
      var menu       = $('.globalNav').length;
      var menuNumber = $('.globalNav').find('li').length;

      // メニューがない、あっても6ではない場合は終了
      if (!menu || menuNumber !== 6) return;

      // メニューが6の店舗のみ対象
      if (menuNumber === 6) {
        $('body').addClass('js-issue345-menu-is-valid');
      }
    }

  }

  // ローカルやFrontendでの実行パラメータ: ?ab_issue=345&ab_pattern=1
  // Optimizelyの実行コード              : window.issue345.start(1);
  util.abtestRun(345);

  // Optimizelyからのテスト対象店舗判別にclassが必要な場合
  window.issue345.setClass();

})(jQuery, util);