src/layerSelector/MultiButton.js

import { difference, uniq, zip } from 'lodash/array'
import { isEmpty } from 'lodash/lang'
import { CheckGroup } from '../html/CheckGroup'
import { Button } from './Button'

export class MultiButton extends Button {
  constructor (layerSelector, config, map) {
    super(layerSelector, config, map)
    this.layers_ = {}
    this.config.accordion = this.config.accordion || []
    this.checkedParams_ = {}
    this.currentConfig_ = {}
    this.checkGroups_ = {}
    this.active_ = false

    const refIds = uniq(this.config.configs.map(c => c.refId).filter(r => r !== undefined))
    for (const refId of refIds) {
      const layer = map.getLayerGroup().getLayerById(refId)
      this.listenAt(layer).on(['change:visible', 'loadcountstart', 'loadcountend'], () => {
        this.debouncedUpdate()
      })
      this.listenAt(layer.getSource()).on(['change:layers', 'change:queryLayers'], () => {
        this.debouncedUpdate()
      })
      this.layers_[refId] = layer
    }

    this.buildButton(this.config.title)
    this.debouncedUpdate()
  }

  setParam (name, value) {
    this.checkedParams_[name] = value
    if (this.getActive()) {
      this.updateLayers(true, true)
    }
  }

  buildButton (text) {
    super.buildButton(text)

    for (const control of this.config.controls) {
      this.setParam(control.name, [control.values[0]])
      const checkGroup = new CheckGroup(control.type, zip(control.titles, control.values), control.title)
      checkGroup.on('change:value', () => {
        this.setParam(control.name, checkGroup.getValues())
      })
      this.checkGroups_[control.name] = checkGroup
      this.accordion.addEntry(checkGroup.get$Element(), checkGroup.getSize())
    }
  }

  update () {
    super.update()

    for (const name of Object.keys(this.checkGroups_)) {
      this.checkGroups_[name].setValues(this.checkedParams_[name])
    }

    if (this.config.toggleAccordion) {
      this.accordion.setVisible(this.getActive())
    }
  }

  updateLayers (on, off) {
    const oldConfig = this.currentConfig_
    if (off && oldConfig.refId !== undefined) {
      const layer = this.layers_[oldConfig.refId]
      if (oldConfig.LAYERS) {
        layer.getSource().deactivateLayers(oldConfig.LAYERS)
      }
      if (oldConfig.QUERY_LAYERS) {
        layer.getSource().deactivateQueryLayers(oldConfig.QUERY_LAYERS)
      }
    }

    const newConfig = this.getMatchingConfig()
    if (on && newConfig.refId !== undefined) {
      const layer = this.layers_[newConfig.refId]
      if (newConfig.LAYERS) {
        layer.getSource().activateLayers(newConfig.LAYERS)
      }
      if (newConfig.QUERY_LAYERS) {
        layer.getSource().activateQueryLayers(newConfig.QUERY_LAYERS)
      }
    }

    this.currentConfig_ = newConfig

    for (const layer of Object.values(this.layers_)) {
      if (this.getActive()) {
        layer.setVisible(layer.getSource().anyLayerActive())
      } else {
        layer.setVisible(false)
      }
    }
  }

  setActive (active) {
    super.setActive(active)
    this.active_ = active

    if (active) {
      this.updateLayers(true, false)
    } else {
      this.updateLayers(false, true)
    }
  }

  getActive () {
    return this.active_
  }

  checkCondition (condition) {
    for (const name of Object.keys(condition)) {
      if (!isEmpty(difference(condition[name], this.checkedParams_[name]))) {
        return false
      }
    }
    return true
  }

  getMatchingConfig () {
    const match = {}
    for (const config of this.config.configs) {
      if (this.checkCondition(config.condition)) {
        Object.assign(match, config)
      }
    }
    return match
  }
}