javascript Issue371：20180419 - no70。メニューページ回游施策_ph1

Posted 2021-05-04

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

    start: function(pattern) {
      var self = this;
      switch (pattern) {
        case 1:
          self.cloneTarget();
          var $list = $('#list');
          if($list.length === 0) return;
          self.wrapSwipeMenu($list);
          self.getCurrentMenu($list);
          self.addCurrentPosition($list);
          break;
      }
    },


    // おすすめ・売れ筋にクラスとアイコンを追加
    modifyRecommend: function ($cloneMenuEl) {
      var $lastChild = $cloneMenuEl.children('li:last-child');
      var $recommendEl = $lastChild.find('.media__body.media__body--middle .text--big:contains("おすすめ・売れ筋")');
      if ($recommendEl.length !== 0) {
        $lastChild.children().addClass('recommend');
        $recommendEl.wrapInner('<span class="ic-crown" />');
      }
    },


    // 計測パラメーターを付与
    addParameter: function ($cloneMenuEl) {
      var $linkTag = $cloneMenuEl.find('a');
      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 {
          parameter = '?sc_lid=r-smp_menu_tab' + (i + 1);
        }
        $linkTag[i].href = $linkTag[i].href + parameter;
      }
    },


    // メニューのcloneと追加
    cloneTarget: function () {
      var self = this;
      var $cloneMenuEl = $('.listGroup.listGroup--space-small.listGroup--border_first-bold').clone();

      if($cloneMenuEl.length === 0) return;
      $cloneMenuEl.attr({'id': 'list'});

      self.modifyRecommend($cloneMenuEl);
      self.addParameter($cloneMenuEl);

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


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


    getCurrentMenu: 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();
    },


    /**
     * 右端からの位置(画面内判定)
     */
    calcRightPosition: function (windowWidth, $current, listWidth) {
      var currentElPosition = $current.position().left;
      var fromRight = listWidth - currentElPosition;
      var isInWindow = fromRight < windowWidth;
      return isInWindow;
    },


    /**
     * 左端からの位置(画面内判定)
     */
    addCurrentPosition: function ($list) {
      var $current = $('.active');
      var windowWidth = $(window).width();
      var currentElWidth = $current.outerWidth(true);
      var currentElPosition = $current.position().left;

      var $last = $('#list li:last-child');
      var listWidth = $last.position().left + $last.outerWidth(true); // #listの幅

      if (windowWidth < (currentElWidth + currentElPosition)) {
        var isInWindow = this.calcRightPosition(windowWidth, $current, listWidth);
        if(isInWindow) {
          $list.scrollLeft(listWidth);
          return;
        }

        var distanceEnd = currentElPosition - windowWidth;    // 画面端からの距離
        var windowCenter = windowWidth / 2;                   // 画面中央
        var currentElCenter = currentElWidth / 2;             // current要素の半分の幅
        var position = distanceEnd + windowCenter + currentElCenter;

        $list.scrollLeft(position);
      }
    }
  }



  // localhost, frontendの実行パラメータ: ?ab_issue=371&ab_pattern=1
  // Optimizelyの実行コード             : window.issue371.start(1);
  // localhost, frontendのみ発火
  util.abtestRun(371);

})(jQuery, util);