@mapgis/webclient-common/documention/scripts/sideBar.js

mapgis ES6 format for igserver

function toggleSideBar(id) {
  var _dom = document.getElementById(id)
  _dom.style.display = _dom.style.display === 'block' ? 'none' : 'block'
}

function toggleLinkDetail(id) {
  var _dom = document.getElementById(id)
  var _arrow = document.getElementById(id + '-arrow')
  _arrow.style.transform = _dom.style.display === 'block' ? 'rotate(360deg)' : 'rotate(180deg)'
  _dom.style.display = _dom.style.display === 'block' ? 'none' : 'block'
}

function getTypeHTML(e) {
  var link = e.target.getAttribute('link')
  var goto = e.target.getAttribute('goto')
  const _baseUrl = getBaseUrl(window.location.href)
  fetch(_baseUrl + '/' + link, {
    method: 'GET',
  })
    .then(response => response.text())
    .then(data => {
      const _contentDom = document.getElementById('main-content')
      if (_contentDom) {
        _contentDom.innerHTML = data
        gotoTop(goto)
      }
    })
    .catch(error => console.error('Error:', error))
}

function gotoTop(id) {
  id = id || 'main-content'
  const _aDom = document.createElement('a');
  _aDom.href = '#' + id
  _aDom.click()
}

function getBaseUrl(url) {
  const regex1 = /^(http:|https:)\/\/[0-9a-zA-Z.]+:[0-9]+/
  const regex2 = /^(http:|https:)\/\/[0-9a-zA-Z.]+/
  let match = url.match(regex1)
  if (match && match[0]) {
    return match[0]
  } else {
    match = url.match(regex2)
    if (match && match[0]) {
      return match[0]
    }
  }
  return ''
}

(function() {
  const targets = [ ...document.querySelectorAll('#sidebarNav li.mapgis-link a')]
  targets.forEach(function (_target) {
    _target.addEventListener('click', function (e) {
      const _baseUrl = getBaseUrl(window.location.href)
      fetch(_baseUrl + e.target.attributes[1].value, {
        method: 'GET',
      })
        .then(response => response.text())
        .then(data => {
          const _contentDom = document.getElementById('main-content')
          if (_contentDom) {
            _contentDom.innerHTML = data
            gotoTop()
          }
        })
        .catch(error => console.error('Error:', error))
    })
  })
  const targets2 = [ ...document.querySelectorAll('#sidebarNav div div a#api-fold')]
  targets2.forEach(function (_target) {
    _target.addEventListener('click', function (e) {
      const _baseUrl = getBaseUrl(window.location.href)
      fetch(_baseUrl + e.target.attributes[1].value, {
        method: 'GET',
      })
        .then(response => response.text())
        .then(data => {
          const _contentDom = document.getElementById('main-content')
          if (_contentDom) {
            _contentDom.innerHTML = data
            gotoTop()
          }
        })
        .catch(error => console.error('Error:', error))
    })
  })

  const targets3 = [ ...document.querySelectorAll('#sidebarNav div div ul li a#api-member')]
  targets3.forEach(function (_target) {
    _target.addEventListener('click', function (e) {
      const _baseUrl = getBaseUrl(window.location.href)
      fetch(_baseUrl + e.target.attributes[1].value, {
        method: 'GET',
      })
        .then(response => response.text())
        .then(data => {
          const _contentDom = document.getElementById('main-content')
          if (_contentDom) {
            _contentDom.innerHTML = data
            gotoTop()
          }
        })
        .catch(error => console.error('Error:', error))
    })
  })
})()