javascript Issue10：20180611 - no78。メニューページ回游施策_ph1（再）

Posted 2021-05-03

; (function ($, util) {
  window.issue10 = {

    showReserveCourse: function ($originList, pattern){
      var $reserveEl = $originList.find('.media__body.media__body--middle .text--big:contains("ネット予約コース")');
      if($reserveEl.length === 0) return;

      var $reserveList = $reserveEl.parents('li.listGroup__item');
      if(pattern === 2) $originList.prepend($reserveList);
      $reserveList.show();

      // パラメーター付与
      var href = $reserveList.find('a').attr('href');
      $reserveList.find('a').attr('href', href + '?sc_lid=r-smp_plan_bottom_menu');
    },



    // 「ネット予約コース」、「おすすめ・売れ筋」にクラスとアイコンを追加
    addIcon: function ($target) {
      var classNameList = '.media__body.media__body--middle .text--big';
      var targetText = $target.find(classNameList).text();
      targetText = targetText.replace(/\s+/g, '');
      var $addIconEl = $target.find(classNameList);
      if (!$addIconEl || $addIconEl.length === 0) return;

      var tag;
      var className;
      switch (targetText) {
        case "おすすめ・売れ筋":
        case "売れ筋ランキング":
        case "売れ筋メニュー":
          tag = '<span class="ic-crown" />';
          className = 'recommend';
          break;
        case "ネット予約コース":
          tag = '<span class="ic-calendar" />';
          className = 'reserve';
          break;
      }

      $target.children().addClass(className);
      // 「ネット予約コース」一つのみの場合の重複回避
      if ($addIconEl.children().length === 0) $addIconEl.wrapInner(tag);
    },



    // 計測パラメーターを付与
    addParameter: function ($cloneMenuEl) {
      var $linkTag = $cloneMenuEl.find('a');
      var count = 0;
      for (var i = 0, max = $linkTag.length; i < max; i++) {
        var parameter = '';
        if ($linkTag[i].className.indexOf('recommend') !== -1) {
          parameter = '?sc_lid=r-smp_rec_tab';
        } else if ($linkTag[i].className.indexOf('reserve') !== -1) {
          parameter = '?sc_lid=r-smp_plan_menu';
        } else {
          count ++;
          parameter = '?sc_lid=r-smp_menu_tab' + count;
        }
        var href = $linkTag[i].href.split('?')[0];
        $linkTag[i].href = href + parameter;
      }
    },



    // メニューのcloneと追加
    cloneTarget: function ($originList) {
      var self = this;
      var $cloneMenuEl = $originList.clone();
      if ($cloneMenuEl.length === 0) return;
      $cloneMenuEl.attr({ 'id': 'list' });

      var $reserveEl = $cloneMenuEl.find('.media__body.media__body--middle .text--big:contains("ネット予約コース")').parents('li.listGroup__item');
      self.addIcon($reserveEl);

      var $lastChild = $cloneMenuEl.children('li:last-child');
      self.addIcon($lastChild);
      self.addParameter($cloneMenuEl);

      $('.globalNav.globalNav--kamei').after($cloneMenuEl);
    },



    /**
     * スクロール実装のためにulをラッピング
     */
    wrapSwipeMenu: function ($list) {
      $list.wrap('<div id="issue10ScrollWrapper" />');
    },



    getActiveEl: function ($list) {
      var text = $('.titlebar.titlebar--tint-s .titlebar__body h1.heading--big').text();
      var targetText = '.text--big:contains("' + text + '")';
      var $target = $list.find(targetText);

      $('.titlebar.titlebar--tint-s').hide();
      $target.parents('li.listGroup__item').addClass('active').show();
    },



    /**
     * active要素の中央寄せ
     */
    addPosition: function ($list) {
      var $active = $('.active');
      if($active.length === 0) return;
      var windowCenter = $(window).width() / 2;
      var activeElWidth = $active.outerWidth(true);
      var activeElPosition = $active.position().left;
      var activeElCenter = activeElPosition + (activeElWidth / 2);
      var distance = activeElCenter - windowCenter;
      if(distance <= 0) return;
      $list.scrollLeft(distance);
    },



    // メニュータブ一覧ページ
    modifyReserveCourse: function() {
      $('#page').addClass('pattern2');
      var $reserveEl = $('.listGroup.listGroup--space-small .listGroup__item .ic-calendar');
      if ($reserveEl.length === 0) return;

      var $listGroup = $reserveEl.parents('.listGroup');
      var $li = $reserveEl.parents('li');
      $('.globalNav').after($li);
      $li.wrap('<div class="section reserveCourse"><ul class="listGroup listGroup--space-small"></ul></div>');

      if($listGroup.children().length===0) $listGroup.parent().hide();

      var $titlebar = $('.titlebar.titlebar--tint-s .titlebar__body h1.heading--big:contains("メニュー一覧")');
      if ($titlebar.length === 0) return;
      $titlebar.parents('.titlebar.titlebar--tint-s').remove();
    },



    start: function (pattern) {
      var self = this;
      var pageId = $('body').attr('data-pageid');
      $('#page').addClass('issue10');

      switch(pageId + '_' + pattern){
        case 'menuindex_1':
          return;
        case 'menuindex_2':
          self.modifyReserveCourse();
          return;
      }

      var $originList = $('.listGroup.listGroup--space-small.listGroup--border_first-bold');
      var $originListChild = $originList.children('.listGroup__item');
      if ($originListChild.length === 0) return;
      $originList.addClass('listGroupOrigin');
      self.showReserveCourse($originList, pattern);
      self.cloneTarget($originList);

      var $list = $('#list');
      self.wrapSwipeMenu($list);
      self.getActiveEl($list);
      self.addPosition($list);
    }
  }


  // Optimizelyの実行コード: window.issue10.start(1);
  util.abtestRun(10);

})(jQuery, util);