javascript 第29期：20180920 - no82。他店铺リンク设置

Posted 2021-05-03

import forEach from 'lodash/forEach'

const cutText = (val, params) => {
  if (val.length > params) {
    return val.slice(0, params - 1) + '…'
  }
  return val
}

export const cutShopName = () => {
  const shopNameDOM = document.querySelectorAll('.issue29 .media__name')

  forEach(shopNameDOM, name => {
    const shopName = name
    const cutNum = 20

    shopName.textContent = cutText(name.textContent, cutNum)
  })
}

export const cutShopAccess = () => {
  const shopAccessDOM = document.querySelectorAll('.issue29 .media__access')
  const carouselCutNum = 22

  forEach(shopAccessDOM, access => {
    const shopAccess = access
    shopAccess.textContent = cutText(access.textContent, carouselCutNum)
  })
}

export default cutText

const addDesignPatternClass = pattern => {
  ;($ => {
    const issue29Contents = $('.issue29')

    switch (pattern) {
      case 'list':
        issue29Contents.addClass('issue29--list')
        break
      case 'carousel':
        issue29Contents.addClass('issue29--carousel')
        $('.issue29--carousel .listGroup .ic-arr-r').removeClass('ic-arr-r')
        break
      // no default
    }
  })(jQuery)
}

export default addDesignPatternClass

import forEach from 'lodash/forEach'
import axios from 'axios'
import isLocalEnv from '../../../utils/isLocalEnv'
import isFrontEnv from '../../../utils/isFrontEnv'
import isTestEnv from '../../../utils/isTestEnv'
import shopData from '../../../utils/shopData'
import { hasClass } from '../../../utils/DOM'
import cutText from '../cutText'

const titleTemplate = () => {
  const title = document.createElement('div')

  title.setAttribute('class', 'titlebar titlebar--other')
  title.innerHTML = `
  <div class="titlebar__body"><h2 class="heading--default">よく一緒に見られているお店</h2></div>
  `

  return title
}

const addArrow = () => {
  const shopWrap = document.getElementById('js-often-with-viewed-shop')
  let arrowClass = 'ic-arr-r'

  if (hasClass(shopWrap, 'issue29--carousel') === true) {
    arrowClass = ''
  }

  return arrowClass
}

const shopNameCut = () => {
  const shopWrap = document.getElementById('js-often-with-viewed-shop')
  // リストは22文字目
  let nameCutNum = 20

  if (hasClass(shopWrap, 'issue29--carousel') === true) {
    const carouselCutNum = 20
    nameCutNum = carouselCutNum
  }

  return nameCutNum
}

const shopStationCut = data => {
  const shopWrap = document.getElementById('js-often-with-viewed-shop')
  let stationCutNum = data.shopStation

  if (hasClass(shopWrap, 'issue29--carousel') === true) {
    const carouselCutNum = 22
    stationCutNum = cutText(data.shopStation, carouselCutNum)
  }

  return stationCutNum
}

const shopTemplate = res => {
  // 店舗ページは最大6件表示なので7件目以降は不要
  const shopListCountLimit = 6
  const shopListData = res.data.rcmShopList.slice(0, shopListCountLimit)
  const shopListWrap = document.createElement('div')
  const shopList = document.createElement('ul')

  shopListWrap.setAttribute('class', 'carousel-wrap')
  shopList.setAttribute('class', 'listGroup')
  shopListWrap.appendChild(shopList)

  forEach(shopListData, data => {
    const arrowClass = addArrow()
    const shopName = cutText(data.shopName, shopNameCut())
    const category = data.category
    const shopURL = data.shopURL
    const shopStation = shopStationCut(data)
    const shopImg = data.shopImg

    shopList.innerHTML += `
    <li class="listGroup__item">
      <a href="${shopURL}" class="listGroup__layout ${arrowClass}">
        <div class="listGroup__body">
          <div class="media">
            <div class="media__left">
              <div class="image image--width-100">
                <p class="image__body">
                  <img src="${shopImg}" alt="">
                </p>
              </div>
            </div>
            <div class="media__body">
              <p class="heading--big media__name">${shopName}</p>
              <p class="text--small">${category}</p>
              <p class="text--small media__access">${shopStation}</p>
            </div>
          </div>
        </div>
      </a>
    </li>
    `
  })

  return shopListWrap
}

const renderDOM = res => {
  const shopWrap = document.getElementById('js-often-with-viewed-shop')
  const shopListCount = res.data.rcmShopList.length

  // 0件の場合は枠を出さない
  if (shopListCount <= 0) {
    shopWrap.parentNode.removeChild(shopWrap)
    return
  }

  shopWrap.appendChild(titleTemplate())
  shopWrap.appendChild(shopTemplate(res))
}

const makeUrl = () => {
  const { sid } = shopData()

  const devDomain = () => {
    let domain = ''
    if (isLocalEnv() || isFrontEnv()) domain = 'dev-8067.gnavi.co.jp/'
    return domain
  }

  const testDomain = () => {
    let domain = ''
    if (isTestEnv()) domain = 'test-'
    return domain
  }

  return `https://${devDomain()}${testDomain()}rcm.gnavi.co.jp/api?frame_id=4&device=sp&shop_id=${sid}&sc_lid=rcm01_r&format=json`
}

const oftenWithViewedShop = () => {
  axios
    .get(makeUrl())
    .then(res => {
      renderDOM(res)
    })
    .catch(err => {
      throw new Error(err)
    })
}

export default oftenWithViewedShop

const hideBasicInfo = () => {
  ;($ => {
    // 基本情報がない下層ページでは処理停止
    const shopInfo = $('#basicInfo')
    if (shopInfo.length <= 0) return

    const shopInfoTitle = $('#basicInfo .titlebar:contains("店舗情報")')
    const shareTitle = $('#basicInfo .titlebar:contains("送る・シェアする")')
    const infoElm = $('#basicInfo .titlebar, #basicInfo .table')

    // すべてのタイトルと表を非表示
    infoElm.hide()
    // 初期表示に必要な要素を表示
    $('#basicInfo .titlebar:contains("基本情報")').show()
    shopInfoTitle.show()
    shopInfoTitle.next('.table').show()
    shareTitle.show()
    // すべて見るの追加
    shareTitle.before(
      '<div class="issue29-basic-info-more text--action -center"><a class="ic-detail-open">すべて見る</a></div>',
    )

    const infoMore = $('.issue29-basic-info-more')

    infoMore.on('click', () => {
      infoMore.remove()
      // 非表示になっている要素をすべて表示
      infoElm.show()
    })
  })(jQuery)
}

export default hideBasicInfo

const commonProcessing = () => {
  // 対象ページに存在するはずのDOMがない場合は処理停止（各詳細ページなど）
  const issue29ShopWrap = document.getElementById('js-often-with-viewed-shop')
  if (issue29ShopWrap === null) return

  issue29ShopWrap.classList.add('issue29')

  // バックエンドでhideされているDOMを表示
  const shopSawRecently = document.getElementById('issue29-shop-saw-recently')
  if (shopSawRecently !== null) shopSawRecently.style.display = 'block'

  // 下に余白ができるので「店舗トップに戻る」「お店一覧に戻る」パンくずのいずれかに下ボーダー追加
  const returnSearchLink = document.querySelector('.footerReturnSearch')
  const returnTopLink = document.querySelector('.footerReturnTop')
  const breadcrumb = document.querySelector('.footerBreadcrumbList')

  if (returnSearchLink !== null) {
    returnSearchLink.style.borderBottom = '1px solid #cdc1b5'
  } else if (returnTopLink !== null) {
    returnTopLink.style.borderBottom = '1px solid #cdc1b5'
  } else if (breadcrumb !== null) {
    breadcrumb.style.borderBottom = '1px solid #cdc1b5'
  }
}

export default commonProcessing

// GitLab Issueのタイトル
// 20180920 - no82.他店舗リンク設置
// GitLab Issue URL
// https://gitlab102.gnavi.co.jp/restaurant/sp-shop/issues/29

import abtestRun from '../abTestRun'
import commonProcessing from './commonProcessing'
import hideBasicInfo from './hideBasicInfo'
import oftenWithViewedShop from './oftenWithViewedShop'
import addDesignPatternClass from './addDesignPatternClass'
import { cutShopName, cutShopAccess } from './cutText'

const issue29 = () => {
  const caseMap = {
    '1': () => {
      addDesignPatternClass('list')
      cutShopName()
      oftenWithViewedShop()
    },
    '2': () => {
      addDesignPatternClass('carousel')
      cutShopName()
      cutShopAccess()
      oftenWithViewedShop()
    },
    '3': () => {
      hideBasicInfo()
      addDesignPatternClass('list')
      cutShopName()
      oftenWithViewedShop()
    },
    '4': () => {
      hideBasicInfo()
      addDesignPatternClass('carousel')
      cutShopName()
      cutShopAccess()
      oftenWithViewedShop()
    },
  }

  const init = caseNumber => {
    commonProcessing()

    // patternごとの実装
    caseMap[caseNumber.toString()]()
  }

  window.issue29 = { start: init }
  /* eslint no-magic-numbers: 0 */
  abtestRun(29)
}

export default issue29