ui_layers_view.mjs

/**
### /ui/layers/view

The module exports a method to create layer.view elements.

@module /ui/layers/view
*/

mapp.utils.merge(mapp.dictionaries, {
  en: {
    layer_zoom_to_extent: 'Zoom to filtered layer extent',
    layer_visibility: 'Toggle visibility',
    zoom_to: 'Zoom to',
  },
  de: {
    layer_zoom_to_extent: 'Zoom zum Ausmaß des gefilterten Datensatzes',
    layer_visibility: 'Umschalten der Ansicht',
    zoom_to: 'Heranzoomen',
  },
  zh: {
    layer_zoom_to_extent: '缩放至筛选图层的相应范围',
    layer_visibility: '可见性切换',
    zoom_to: '缩放至',
  },
  zh_tw: {
    layer_zoom_to_extent: '縮放至篩選圖層的相應範圍',
    layer_visibility: '可見性切換',
    zoom_to: '縮放至',
  },
  pl: {
    layer_zoom_to_extent: 'Przybliż do odfiltrowanej wastwy',
    layer_visibility: 'Zmodyfikuj widzialność',
    zoom_to: 'Przybliż do',
  },
  fr: {
    layer_zoom_to_extent: 'Zoom sur la couche filtrée',
    layer_visibility: 'Modifier la visibilité',
    zoom_to: 'Zoom sur',
  },
  ja: {
    layer_zoom_to_extent: 'フィルターされたレイヤー範囲をズームに',
    layer_visibility: '表示切替',
    zoom_to: 'ズームへ',
  },
  esp: {
    layer_zoom_to_extent: 'Zoom a capa filtrada',
    layer_visibility: 'Alternar visibilidad',
    zoom_to: 'Acercar a',
  },
  tr: {
    layer_zoom_to_extent: 'Filtrelenmis katman kapsamina yaklas',
    layer_visibility: 'Gorunurlugu degistir',
    zoom_to: 'Yaklas',
  },
  it: {
    layer_zoom_to_extent: 'Zoom sul layer',
    layer_visibility: 'Attiva/Disattiva visibilità',
    zoom_to: 'Zoom a',
  },
  th: {
    layer_zoom_to_extent: 'ซูมไปที่ขอบเขตเลเยอร์ที่กรอง',
    layer_visibility: 'สลับการมองเห็น',
    zoom_to: 'ซูมไปที่',
  },
})

/**
@function layerView

@description
The layerView method will create and assign a layer.view node to the layer object.

@param {layer} layer A decorated mapp layer.
@property {Object} layer.view No layer view will be created with the view property null.
@property {Object} layer.drawer The layer view will not be in a drawer element with the drawer property null.
@property {array} [layer.panelOrder=['draw-drawer', 'dataviews-drawer', 'filter-drawer', 'style-drawer', 'meta']] The order of layer view panel elements.

@returns {layer} The layer object is returned after the layer view has been created.
*/
export default function layerView(layer) {

  // Do not create a layer view.
  if (layer.view === null) return layer;

  layer.view = mapp.utils.html.node`<div 
    data-id=${layer.key}
    class="layer-view">`

  // Create content from layer view panels and plugins
  const content = Object.keys(layer)
    .map(key => mapp.ui.layers.panels[key] && mapp.ui.layers.panels[key](layer))
    .filter(panel => typeof panel !== 'undefined')

  // Set default order for panel if not explicit in layer config.
  layer.panelOrder ??= ['draw-drawer', 'dataviews-drawer', 'filter-drawer', 'style-drawer', 'meta']

  // Sort the content array according to the data-id in the panelOrder array.
  content.sort((a, b) => {

    return layer.panelOrder.findIndex(chk => chk === a.dataset?.id)
      < layer.panelOrder.findIndex(chk => chk === b.dataset?.id)
      ? 1 : -1;
  })

  // Don't create a drawer element layer view.
  if (layer.drawer === null) {

    // Append elements directly to layer.view
    content.forEach(el => layer.view.append(el))

    return layer;
  }

  layer.zoomToExtentBtn = layer.filter.zoomToExtent
    && mapp.utils.html`<button
      data-id=zoomToExtent
      title=${mapp.dictionary.layer_zoom_to_extent}
      class="mask-icon fullscreen"
      onclick=${async e => {

        // disable button if no locations were found.
        e.target.disabled = !await layer.zoomToExtent()

        layer.show()
      }}>`

  // The displayToggle element should be on if the layer is displayed or should be displayed in zoom range.
  const displayToggleClass = `mask-icon toggle ${(layer.zoomDisplay || layer.display) ? 'on' : ''}`

  // Create layer.displayToggle button for header.
  layer.displayToggle = mapp.utils.html.node`<button
    data-id=display-toggle
    title=${mapp.dictionary.layer_visibility}
    class=${displayToggleClass}
    onclick=${e => {
      const toggle = e.target.classList.toggle('on')
      toggle ? layer.show() : layer.hide()
    }}>`

  // Create a div for the magnifying glass icon
  layer.zoomBtn = layer.tables
    && mapp.utils.html.node`<button 
      data-id="zoom-to"
      title=${mapp.dictionary.zoom_to}
      class="mask-icon search"
      onclick=${() => zoomToRange(layer)}>`

  // Add on callback for toggle button.
  layer.showCallbacks.push(() => {
    layer.displayToggle.classList.add('on')
  })

  // Remove on callback for toggle button.
  layer.hideCallbacks.push(() => {
    !layer.zoomDisplay && layer.displayToggle.classList.remove('on')
  })

  const header = mapp.utils.html`
    <h2>${layer.name || layer.key}</h2>
    ${layer.zoomToExtentBtn}
    ${layer.displayToggle}
    ${layer.zoomBtn}
    <div class="mask-icon expander"></div>`

  // An empty drawer element can not be expanded.
  const drawerClass = `layer-view raised ${layer.classList || ''} ${content.length ? '' : 'empty'}`

  layer.drawer = mapp.ui.elements.drawer({
    data_id: layer.key,
    class: drawerClass,
    header,
    content
  })

  // Render layer.drawer into layer.view
  mapp.utils.render(layer.view, layer.drawer)

  // The layer may be zoom level restricted.
  layer.tables && layer.mapview.Map.getTargetElement()
    .addEventListener('changeEnd', () => changeEnd(layer))

  return layer
}

/**
@function zoomToRange

@description
The zoomToRange method set layer.mapview zoom to be in range of the layer.tables configuration and calls the [layer.show()]{@link module:/layer/decorate~show} method.

@param {layer} layer A decorated mapp layer.
@property {Object} layer.tables The zoom range table configuration.
*/
function zoomToRange(layer) {
  const minZoom = Object.entries(layer.tables).find(entry => !!entry[1])[0]

  const maxZoom = Object.entries(layer.tables).reverse().find(entry => !!entry[1])[0]

  const view = layer.mapview.Map.getView()

  view.getZoom() < minZoom ?
    view.setZoom(minZoom) :
    view.setZoom(maxZoom)

  layer.show()
}

/**
@function changeEnd

@description
The changeEnd method is assigned to the mapview.Map changeEnd event listener for layer with a tables object.

Layer with a tables object maybe zoom restricted.

The [layer.tableCurrent()]{@link module:/layer/decorate~tableCurrent} method is called to determine whether the layer has a table configured for the current zoom level.

@param {layer} layer A decorated mapp layer.
@property {HTMLElement} layer.view The layer view element.
@property {HTMLElement} layer.displayToggle A button element which toggles the layer.display.
@property {HTMLElement} layer.zoomBtn A button element which sets the mapview into the visible zoom range for the layer.
*/
function changeEnd(layer) {

  // Get array of drawer in layer.drawer
  const drawerArray = Array.from(layer.drawer.querySelectorAll(':scope > .drawer'))

  if (layer.tableCurrent()) {

    // The zoomBtn is hidden if the layer is in range.
    layer.zoomBtn.style.display = 'none'

    // Enable layer display toggle.
    layer.displayToggle.classList.remove('disabled')

    // Enable all drawer elements in array.
    drawerArray.forEach(el => el.classList.remove('disabled'))

  } else {

    // The zoomBtn is displayed outside if the layer is out of range.
    layer.zoomBtn.style.display = 'block'

    // Collapse drawer and disable layer.view.
    layer.view.querySelector('.layer-view.drawer').classList.remove('expanded')

    // Disable layer display toggle.
    layer.displayToggle.classList.add('disabled')

    // Disable all drawer elements in array.
    drawerArray.forEach(el => el.classList.add('disabled'))
  }
}