ui_layers_panels_dataviews.mjs
/**
## ui/layers/panels/dataviews
The dataviews panel module exports the dataviews method.
@requires /ui/Dataview
@module /ui/layers/panels/dataviews
*/
mapp.utils.merge(mapp.dictionaries, {
en: {
layer_dataview_header: 'Data Views',
},
de: {
layer_dataview_header: 'Datenansichten',
},
zh: {
layer_dataview_header: '显示数据',
},
zh_tw: {
layer_dataview_header: '顯示數據',
},
pl: {
layer_dataview_header: 'Widok danych',
},
fr: {
layer_dataview_header: 'Voir les données',
},
ja: {
layer_dataview_header: 'データビュー',
},
esp: {
layer_dataview_header: 'Ver los datos',
},
tr: {
layer_dataview_header: 'Veri gorunumleri',
},
it: {
layer_dataview_header: 'Visualizzazione dei dati',
},
th: {
layer_dataview_header: 'มุมมองข้อมูล',
},
})
/**
@function dataviews
@description
### mapp.ui.layers.panels.dataviews(layer)
The dataviews method returns a drawer with checkbox elements for each dataview object in `layer.dataviews{}`.
The dataviews will be decorated with the `mapp.ui.Dataview()` method.
@param {layer} layer The decorated mapp layer object.
@property {Object} dataviews The layer dataviews.
@return {HTMLElement}
*/
export default function dataviews(layer) {
// Return if on mobile as dataviews are not supported.
if (mapp.utils.mobile()) return;
// Create chkbox controls for each dataview entry.
const dataviewChkboxes = Object.entries(layer.dataviews).map(entry => {
// The layer.dataviews{} object may include a hide flag.
if (typeof entry[1] !== 'object') return;
// Assign key, host, and layer to dataview object.
const dataview = Object.assign(entry[1],
{
key: entry[0],
host: layer.mapview.host,
layer,
})
// Find tabview element from data-id attribute.
dataview.tabview = document.querySelector(`[data-id=${dataview.target}]`)
// Return if the named tabview is not found in document.
if (!dataview.tabview) return;
// Assign target html element for dataview.
dataview.target = mapp.utils.html.node`<div class="dataview-target">`
// Assign label for dataview.chkbox
dataview.label ??= dataview.title || dataview.key
dataview.show ??= () => {
// Create tab after dataview creation is complete.
dataview.tabview.dispatchEvent(new CustomEvent('addTab', {
detail: dataview
}))
// Show the dataview tab.
dataview.show()
}
dataview.hide ??= () => {
dataview.display = false
dataview.remove()
}
if (mapp.ui.Dataview(dataview) instanceof Error) return;
// Display dataview if layer and dv have display flag.
layer.display
&& dataview.display
&& dataview.show()
layer.showCallbacks.push(() => {
dataview.display && dataview.show()
})
return dataview.chkbox
})
// The dataviews are created but no panel is returned.
if (layer.dataviews.hide) return;
// Create a drawer with the dataview chkbox controls.
const drawer = mapp.ui.elements.drawer({
data_id: `dataviews-drawer`,
class: 'raised',
header: mapp.utils.html`
<h3>${mapp.dictionary.layer_dataview_header}</h3>
<div class="mask-icon expander"></div>`,
content: mapp.utils.html`${dataviewChkboxes.filter(dv => !!dv)}`
})
return drawer
}