javascript Issue353：20180220 - no65。予约ボタン追従枠の変更

Posted 2021-05-04

// 20180220 - no65.予約ボタン追従枠の変更
// https://gnavi-work.gnavi.co.jp/jira/browse/MIKAMEI_PDCA-376

(function($, util) {

  // TODO: 以下 frontendでのパターン確認用。レビュー後に削除してから納品
  if (location.href.match(/ab_no_tel/)) {
    // 追従の電話ボタンをトリ
    $('.ic-tel-sticky').parent().parent().remove();

    $('#js-reserve-btn .ic-net-yoyaku').parent().parent().removeClass().addClass('col__12');
  }
  // TODO

  window.issue353 = {

    $reserveBtn: $('#js-reserve-btn'),
    $telBtn    : $('.ic-tel-sticky'),

    start: function(pattern) {
      if (!this.$reserveBtn.length) return;

      this.$reserveBtn.addClass('issue353');
      this.changeLabelTel();
      this.changeLabelReserve('ネット予約');

      switch (pattern) {
        case 1:
          this.removeBtn();
          break;
        case 2:
          this.changeLabelReserve('空席確認・ネット予約');
          break;
        case 3:
          this.addPlanCalBtn();
          break;
        case 4:
          $('#js-reserve-btn').addClass('issue353-4');
          this.addPlanCalBtn();
          this.changeDesign();
          break;
        default:
          break;
      }
    },

    removeBtn: function() {
      $('#js-reserve-btn').remove();
      // ページ最下部の余白削除
      $('body').css('padding-bottom', 0);
    },

    changeLabelTel: function() {
      // 電話する -> 電話
      $('.issue353 .ic-tel-sticky span').text('電話');
    },

    changeLabelReserve: function(label) {
      // ネット予約する -> ネット予約
      $('.issue353 .ic-net-yoyaku span').text(label);
    },

    addPlanCalBtn: function() {
      var $planCalBtn =
        '<div class="col__3 -pl8">' +
        '<a href="" class="button__item button__item--default js-popover-button" onclick="sc_count(\'plan_list_03\')">' +
        '<div class="ic-plan-cal">' +
        '<div>' +
        '<p class="text--small -bold">' +
        '<span>空席確認</span>' +
        '</p>' +
        '</div>' +
        '</div>' +
        '</a>' +
        '</div>'
      ;
      var $yoyakuBtnWrapper = $('.issue353 .ic-net-yoyaku').parent().parent();

      if (this.$telBtn.length) {
        $yoyakuBtnWrapper.removeClass('col__9').addClass('col__6');
        $yoyakuBtnWrapper.before($planCalBtn);
      } else {
        $yoyakuBtnWrapper.removeClass('col__12').addClass('col__9 -pl8');
        $yoyakuBtnWrapper.before($planCalBtn);
        $('.issue353 .ic-plan-cal').parent().parent().removeClass('-pl8');
      }

      // 空席確認ボタンのイベントをアタッチ
      this.popover();
    },

    popover: function() {
      // 以下 /src/alljs/popover.js より
      var popover_calender = new GNAVI.Dialog.Popover({
        button: '.js-popover-button',
        targetId: '#popover_calendar'
      });
    },

    changeDesign: function() {
      var $issue353 = $('.issue353');

      // カラムを初期化
      $issue353.children().removeClass();

      if (this.$telBtn.length) {
        $issue353.children().addClass('col__4');
      } else {
        $issue353.find('.ic-plan-cal').parent().parent().addClass('col__4');
        $issue353.find('.ic-net-yoyaku').parent().parent().addClass('col__8');
      }
    }

  }

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

})(jQuery, util);