javascript 问题73 - 20190404 - no100。ナビゲーションメニューにこだわり追加

Posted 2021-05-03

import forEach from 'lodash/forEach'

// 第一引数で渡すセレクターに第二引数で渡す文字列を含む要素があれば返却
// jQueryの :contains() 代替
const contains = (selector, text) => {
  const elms = document.querySelectorAll(selector)
  return Array.prototype.filter.call(elms, elm => RegExp(text).test(elm.textContent))
}

export const showKodawari = () => {
  const globalNav = document.getElementById('js-globalNav')
  const globalNavElm = globalNav.querySelectorAll('li')

  forEach(globalNavElm, elm => {
    const nav = elm
    nav.style.display = 'block'
  })
}

export const changePosition = () => {
  const couponElm = contains('#js-globalNav li', 'クーポン')[0]
  const mapElm = contains('#js-globalNav li', '地図')[0]

  // 高級店でクーポンのDOMが存在しない場合がある（通常はグレーアウト）
  if (!couponElm) return

  if (couponElm.parentNode) {
    couponElm.parentNode.insertBefore(couponElm, mapElm.nextSibling)
  }
}

import forEach from 'lodash/forEach'

const removeDisabled = () => {
  const globalNav = document.getElementById('js-globalNav')
  const globalNavElm = globalNav.querySelectorAll('li')

  forEach(globalNavElm, elm => {
    const nav = elm

    if (nav.classList.contains('-disabled')) {
      nav.parentNode.removeChild(nav)
    }
  })
}

export default removeDisabled