diff --git a/src/controls/legend.js b/src/controls/legend.js index 1abcf8dbf..9b5241176 100644 --- a/src/controls/legend.js +++ b/src/controls/legend.js @@ -555,6 +555,7 @@ const Legend = function Legend(options = {}) { }, getuseGroupIndication() { return useGroupIndication; }, getOverlaysCollapse() { return overlaysCmp.overlaysCollapse; }, + getOverlays() { return overlaysCmp; }, setVisibleLayersViewActive, addButtonToTools(button, buttonGroup) { if (buttonGroup === 'addLayerButton') { diff --git a/src/controls/legend/group.js b/src/controls/legend/group.js index e693435a0..f3760e926 100644 --- a/src/controls/legend/group.js +++ b/src/controls/legend/group.js @@ -1,5 +1,7 @@ import { Component, Button, Collapse, CollapseHeader, dom } from '../../ui'; import GroupList from './grouplist'; +import createMoreInfoButton from './moreinfobutton'; +import LayerProperties from './overlayproperties'; /** * The Group component can be a group or a subgroup, @@ -16,13 +18,17 @@ const Group = function Group(viewer, options = {}) { name, parent, abstract, + showAbstractInLegend = false, position = 'top', type = 'group', autoExpand = true, exclusive = false, toggleAll = true, draggable = false, - zIndexStart = 0.1 + zIndexStart = 0.1, + opacityControl = false, + zoomToExtent = false, + description } = options; const stateCls = { @@ -37,9 +43,11 @@ const Group = function Group(viewer, options = {}) { let selectedItem; const listCls = type === 'grouplayer' ? 'divider-start padding-left padding-top-small' : ''; - const groupList = GroupList({ viewer, cls: listCls, abstract }); + const groupList = GroupList({ viewer, cls: listCls, abstract, showAbstractInLegend }); visibleState = groupList.getVisible(); + const thisGroup = viewer.getGroup(name); + const getEl = () => groupEl; const getCheckIcon = (visible) => { @@ -70,6 +78,9 @@ const Group = function Group(viewer, options = {}) { } }) : false; + const moreInfoButton = (opacityControl || zoomToExtent || description || (abstract && !showAbstractInLegend)) ? createMoreInfoButton({ viewer, + group: thisGroup }) : false; + const SubGroupHeader = function SubGroupHeader() { const expandButton = Button({ cls: 'icon-small compact round', @@ -86,6 +97,9 @@ const Group = function Group(viewer, options = {}) { if (tickButton) { this.addComponent(tickButton); } + if (moreInfoButton) { + this.addComponent(moreInfoButton); + } }, onRender() { this.dispatch('render'); @@ -99,12 +113,14 @@ const Group = function Group(viewer, options = {}) { }); }, render() { - return `
+ const padding = moreInfoButton ? '0.275rem' : '1.875rem'; + return `
${expandButton.render()} ${title}
${tickButton ? tickButton.render() : ''} + ${moreInfoButton ? moreInfoButton.render() : ''}
`; } }); @@ -112,10 +128,18 @@ const Group = function Group(viewer, options = {}) { const GroupHeader = function GroupHeader() { const headerComponent = CollapseHeader({ - cls: 'hover padding-x padding-y-small grey-lightest border-bottom text-small', + cls: 'hover padding-x padding-y-small grey-lightest border-bottom text-small item wrap', icon, - title + title, + style: `${moreInfoButton ? 'padding-right: 0.275rem' : ''}` }); + if (moreInfoButton) { + headerComponent.on('render', function hcRender() { + const el = document.getElementById(this.getId()); + const html = moreInfoButton.render(); + el.insertAdjacentHTML('beforeend', html); + }); + } return headerComponent; }; @@ -129,6 +153,10 @@ const Group = function Group(viewer, options = {}) { collapseX: false }); + if (moreInfoButton && type !== 'grouplayer') { + collapse.addComponent(moreInfoButton); + } + const addGroup = function addGroup(groupCmp) { groupList.addGroup(groupCmp); this.dispatch('add:group'); @@ -323,6 +351,40 @@ const Group = function Group(viewer, options = {}) { updateGroupIndication(); }); } + if (moreInfoButton) { + groupEl.addEventListener('overlayproperties', (evt) => { + const overlaysCmp = viewer.getControlByName('legend').getOverlays(); + const slidenav = overlaysCmp.slidenav; + if (evt.detail.group) { + const group = evt.detail.group; + const thisParent = this; + const label = group.labelOpacitySlider ? group.labelOpacitySlider : ''; + const layerProperties = LayerProperties({ + group, viewer, thisParent, labelOpacitySlider: label + }); + slidenav.setSecondary(layerProperties); + slidenav.slideToSecondary(); + // Include back btn and opacity slider in tab order when opened and remove when closed + const secondaryEl = document.getElementById(slidenav.getId()).querySelector('.secondary'); + const backBtn = secondaryEl.getElementsByTagName('button')[0]; + const opacityInput = secondaryEl.getElementsByTagName('input')[0]; + backBtn.tabIndex = 0; + backBtn.focus(); + if (opacityInput) { + opacityInput.tabIndex = 0; + } + backBtn.addEventListener('click', () => { + backBtn.tabIndex = -99; + if (opacityInput) { + opacityInput.tabIndex = -99; + } + }, false); + slidenav.on('slide', () => { + groupEl.classList.remove('width-100'); + }); + } + }); + } // only listen to tick changes for subgroups if (type === 'grouplayer') { groupEl.addEventListener('tick:all', (e) => { diff --git a/src/controls/legend/grouplist.js b/src/controls/legend/grouplist.js index 618ea2ab3..996f5017a 100644 --- a/src/controls/legend/grouplist.js +++ b/src/controls/legend/grouplist.js @@ -3,7 +3,8 @@ import { Component } from '../../ui'; const LayerList = function LayerList(options, isRootGroup = false) { const { cls: clsSettings = '', - abstract + abstract, + showAbstractInLegend = false } = options; let cls = `${clsSettings} list divider-end`.trim(); @@ -103,7 +104,7 @@ const LayerList = function LayerList(options, isRootGroup = false) { removeGroup, removeOverlay, onInit() { - if (abstract) { + if (abstract && showAbstractInLegend) { const groupAbstract = Component({ render() { return `
  • diff --git a/src/controls/legend/moreinfobutton.js b/src/controls/legend/moreinfobutton.js new file mode 100644 index 000000000..2aa2091b6 --- /dev/null +++ b/src/controls/legend/moreinfobutton.js @@ -0,0 +1,200 @@ +import { Component, Button, dom } from '../../ui'; +import PopupMenu from '../../ui/popupmenu'; +import exportToFile from '../../utils/exporttofile'; + +export default function createMoreInfoButton(params) { + const { + layer, + group = {}, + viewer + } = params; + const popupMenuItems = []; + let moreInfoButton; + let popupMenu; + const showPopup = group.zoomToExtent && group.extent; // In case of zoomToExtent we always want to show popupmenu + + const eventOverlayProps = new CustomEvent('overlayproperties', { + bubbles: true, + detail: { + layer, + group + } + }); + + if (layer || group.opacityControl || group.description || (group.abstract && !group.showAbstractInLegend)) { + const layerInfoMenuItem = Component({ + onRender() { + const labelEl = document.getElementById(this.getId()); + labelEl.addEventListener('click', (e) => { + popupMenu.setVisibility(false); + document.getElementById(moreInfoButton.getId()).dispatchEvent(eventOverlayProps); + e.preventDefault(); + e.stopPropagation(); + popupMenu.setVisibility(false); + }); + }, + render() { + const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden'; + return `
  • Visa ${layer ? 'lagerinformation' : 'gruppinformation'}
    • `; + } + }); + popupMenuItems.push(layerInfoMenuItem); + } + + if ((layer && layer.get('zoomToExtent')) || (group.zoomToExtent && group.extent)) { + const zoomToExtentMenuItem = Component({ + onRender() { + const labelEl = document.getElementById(this.getId()); + labelEl.addEventListener('click', (e) => { + if (layer) { + const extent = typeof layer.getSource !== 'undefined' && typeof layer.getSource().getExtent !== 'undefined' ? layer.getSource().getExtent() : layer.getExtent(); + if (layer.getVisible()) { + viewer.getMap().getView().fit(extent, { + padding: [50, 50, 50, 50], + duration: 1000 + }); + e.preventDefault(); + } + } else if (group.zoomToExtent) { + const extent = group.extent; + viewer.getMap().getView().fit(extent, { + padding: [50, 50, 50, 50], + duration: 1000 + }); + e.preventDefault(); + } + e.stopPropagation(); + popupMenu.setVisibility(false); + }); + }, + render() { + const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden'; + return `
  • Zooma till
    • `; + } + }); + popupMenuItems.push(zoomToExtentMenuItem); + } + + if (layer && layer.get('exportable')) { + const exportFormat = layer.get('exportFormat') || layer.get('exportformat'); + let exportFormatArray = []; + if (exportFormat && typeof exportFormat === 'string') { + exportFormatArray.push(exportFormat); + } else if (exportFormat && Array.isArray(exportFormat)) { + exportFormatArray = exportFormat; + } + const formats = exportFormatArray.map(format => format.toLowerCase()).filter(format => format === 'geojson' || format === 'gpx' || format === 'kml'); + if (formats.length === 0) { formats.push('geojson'); } + formats.forEach((format) => { + const exportLayerMenuItem = Component({ + onRender() { + const labelEl = document.getElementById(this.getId()); + labelEl.addEventListener('click', (e) => { + const features = layer.getSource().getFeatures(); + exportToFile(features, format, { + featureProjection: viewer.getProjection().getCode(), + filename: layer.get('title') || 'export' + }); + e.preventDefault(); + e.stopPropagation(); + popupMenu.setVisibility(false); + }); + }, + render() { + let exportLabel; + if (exportFormatArray.length > 1) { + exportLabel = `Spara lager (.${format})`; + } else { exportLabel = 'Spara lager'; } + const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden'; + return `
  • ${exportLabel}
    • `; + } + }); + popupMenuItems.push(exportLayerMenuItem); + }); + } + + if (layer && layer.get('removable')) { + const removeLayerMenuItem = Component({ + onRender() { + const labelEl = document.getElementById(this.getId()); + labelEl.addEventListener('click', (e) => { + const doRemove = (layer.get('promptlessRemoval') === true) || window.confirm('Vill du radera lagret?'); + if (doRemove) { + viewer.getMap().removeLayer(layer); + e.preventDefault(); + e.stopPropagation(); + } + popupMenu.setVisibility(false); + }); + }, + render() { + const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden'; + return `
  • Ta bort lager
    • `; + } + }); + popupMenuItems.push(removeLayerMenuItem); + } + + const popupMenuList = Component({ + onInit() { + this.addComponents(popupMenuItems); + }, + render() { + let html = `'; + return html; + } + }); + + const createPopupMenu = function createPopupMenu() { + const moreInfoButtonEl = document.getElementById(moreInfoButton.getId()); + const onUnfocus = (e) => { + if (!moreInfoButtonEl.contains(e.target)) { + popupMenu.setVisibility(false); + } + }; + popupMenu = PopupMenu({ onUnfocus, cls: 'overlay-popup' }); + const newDiv = document.createElement('div'); + newDiv.classList.add('justify-end', 'flex', 'relative', 'basis-100'); + moreInfoButtonEl.insertAdjacentElement('afterend', newDiv); + newDiv.appendChild(dom.html(popupMenu.render())); + popupMenu.setContent(popupMenuList.render()); + popupMenuList.dispatch('render'); + popupMenu.setVisibility(true); + }; + + const togglePopupMenu = function togglePopupMenu() { + if (!popupMenu) { + createPopupMenu(); + } else { + popupMenu.toggleVisibility(); + } + }; + + if (popupMenuItems.length > 0) { + moreInfoButton = Button({ + cls: 'round small icon-smaller no-shrink', + click() { + if (popupMenuItems.length > 1 || showPopup) { + togglePopupMenu(); + } else { + document.getElementById(this.getId()).dispatchEvent(eventOverlayProps); + } + }, + style: { + 'align-self': 'center' + }, + icon: '#ic_more_vert_24px', + ariaLabel: 'Visa lagerinfo', + tabIndex: -1 + }); + moreInfoButton.on('render', function onRenderButton() { + document.getElementById(this.getId()).onclick = function handleEvent(e) { e.stopPropagation(); }; + }); + return moreInfoButton; + } + return false; +} diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js index edc6193dc..5e3ca05ba 100644 --- a/src/controls/legend/overlay.js +++ b/src/controls/legend/overlay.js @@ -1,7 +1,6 @@ import { Component, Button, dom, Collapse } from '../../ui'; import { HeaderIcon, Legend } from '../../utils/legendmaker'; -import PopupMenu from '../../ui/popupmenu'; -import exportToFile from '../../utils/exporttofile'; +import createMoreInfoButton from './moreinfobutton'; const OverlayLayer = function OverlayLayer(options) { const { @@ -18,16 +17,12 @@ const OverlayLayer = function OverlayLayer(options) { const buttons = []; let headerIconClass = headerIconCls; - const popupMenuItems = []; - const hasStylePicker = viewer.getLayerStylePicker(layer).length > 0; const layerIconCls = `round compact icon-small relative no-shrink light ${hasStylePicker ? 'style-picker' : ''}`; const cls = `${clsSettings} flex row align-center padding-left padding-right-smaller item wrap`.trim(); const title = layer.get('title') || 'Titel saknas'; const name = layer.get('name'); const secure = layer.get('secure'); - let moreInfoButton; - let popupMenu; let hasExtendedLegend = false; let thisComponent; @@ -47,13 +42,6 @@ const OverlayLayer = function OverlayLayer(options) { hasExtendedLegend = true; } - const eventOverlayProps = new CustomEvent('overlayproperties', { - bubbles: true, - detail: { - layer - } - }); - const getCheckIcon = (visible) => { const isVisible = visible ? checkIcon : uncheckIcon; return isVisible; @@ -147,167 +135,11 @@ const OverlayLayer = function OverlayLayer(options) { } }); - const layerInfoMenuItem = Component({ - onRender() { - const labelEl = document.getElementById(this.getId()); - labelEl.addEventListener('click', (e) => { - popupMenu.setVisibility(false); - document.getElementById(moreInfoButton.getId()).dispatchEvent(eventOverlayProps); - e.preventDefault(); - }); - }, - render() { - const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden'; - return `
  • Visa lagerinformation
    • `; - } - }); - popupMenuItems.push(layerInfoMenuItem); - - if (layer.get('zoomToExtent')) { - const zoomToExtentMenuItem = Component({ - onRender() { - const labelEl = document.getElementById(this.getId()); - labelEl.addEventListener('click', (e) => { - const extent = typeof layer.getSource !== 'undefined' && typeof layer.getSource().getExtent !== 'undefined' ? layer.getSource().getExtent() : layer.getExtent(); - if (layer.getVisible()) { - viewer.getMap().getView().fit(extent, { - padding: [50, 50, 50, 50], - duration: 1000 - }); - e.preventDefault(); - } - }); - }, - render() { - const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden'; - return `
  • Zooma till
    • `; - } - }); - popupMenuItems.push(zoomToExtentMenuItem); - } - - if (layer.get('exportable')) { - const exportFormat = layer.get('exportFormat') || layer.get('exportformat'); - let exportFormatArray = []; - if (exportFormat && typeof exportFormat === 'string') { - exportFormatArray.push(exportFormat); - } else if (exportFormat && Array.isArray(exportFormat)) { - exportFormatArray = exportFormat; - } - const formats = exportFormatArray.map(format => format.toLowerCase()).filter(format => format === 'geojson' || format === 'gpx' || format === 'kml'); - if (formats.length === 0) { formats.push('geojson'); } - formats.forEach((format) => { - const exportLayerMenuItem = Component({ - onRender() { - const labelEl = document.getElementById(this.getId()); - labelEl.addEventListener('click', (e) => { - const features = layer.getSource().getFeatures(); - exportToFile(features, format, { - featureProjection: viewer.getProjection().getCode(), - filename: layer.get('title') || 'export' - }); - e.preventDefault(); - }); - }, - render() { - let exportLabel; - if (exportFormatArray.length > 1) { - exportLabel = `Spara lager (.${format})`; - } else { exportLabel = 'Spara lager'; } - const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden'; - return `
  • ${exportLabel}
    • `; - } - }); - popupMenuItems.push(exportLayerMenuItem); - }); - } - - if (layer.get('removable')) { - const removeLayerMenuItem = Component({ - onRender() { - const labelEl = document.getElementById(this.getId()); - labelEl.addEventListener('click', (e) => { - const doRemove = (layer.get('promptlessRemoval') === true) || window.confirm('Vill du radera lagret?'); - if (doRemove) { - viewer.getMap().removeLayer(layer); - e.preventDefault(); - } - }); - }, - render() { - const labelCls = 'text-smaller padding-x-small grow pointer no-select overflow-hidden'; - return `
  • Ta bort lager
    • `; - } - }); - popupMenuItems.push(removeLayerMenuItem); - } - - const popupMenuList = Component({ - onInit() { - this.addComponents(popupMenuItems); - }, - render() { - let html = `'; - return html; - } - }); - - const createPopupMenu = function createPopupMenu() { - const moreInfoButtonEl = document.getElementById(moreInfoButton.getId()); - const onUnfocus = (e) => { - if (!moreInfoButtonEl.contains(e.target)) { - popupMenu.setVisibility(false); - } - }; - popupMenu = PopupMenu({ onUnfocus, cls: 'overlay-popup' }); - const newDiv = document.createElement('div'); - newDiv.classList.add('justify-end', 'flex', 'relative', 'basis-100'); - moreInfoButtonEl.insertAdjacentElement('afterend', newDiv); - newDiv.appendChild(dom.html(popupMenu.render())); - popupMenu.setContent(popupMenuList.render()); - popupMenuList.dispatch('render'); - popupMenu.setVisibility(true); - }; - - const togglePopupMenu = function togglePopupMenu() { - if (!popupMenu) { - createPopupMenu(); - } else { - popupMenu.toggleVisibility(); - } - }; - - moreInfoButton = Button({ - cls: 'round small icon-smaller no-shrink', - click() { - if (popupMenuItems.length > 1) { - togglePopupMenu(); - } else { - document.getElementById(this.getId()).dispatchEvent(eventOverlayProps); - } - }, - style: { - 'align-self': 'center' - }, - icon: '#ic_more_vert_24px', - ariaLabel: 'Visa lagerinfo', - tabIndex: -1 - }); - + const moreInfoButton = createMoreInfoButton({ layer, viewer }); buttons.push(moreInfoButton); const ButtonsHtml = `${layerIcon.render()}${label.render()}${toggleButton.render()}${moreInfoButton.render()}`; - const removeOverlayMenuItem = function removeListeners() { - const popupMenuListEl = document.getElementById(popupMenuList.getId()); - if (popupMenuListEl) { popupMenuListEl.remove(); } - }; - const onRemove = function onRemove() { - removeOverlayMenuItem(); const el = document.getElementById(this.getId()); el.remove(); }; diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js index 00c204244..57ba4556c 100644 --- a/src/controls/legend/overlayproperties.js +++ b/src/controls/legend/overlayproperties.js @@ -5,19 +5,36 @@ import Style from '../../style'; const OverlayProperties = function OverlayProperties(options = {}) { const { cls: clsOptions = '', + group, layer, viewer } = options; - - const cls = `${clsOptions} item`.trim(); - const title = layer.get('title') || ''; - const abstract = layer.get('abstract') || ''; - const opacity = layer.getOpacity(); - const opacityControl = layer.get('opacityControl') !== false; - const style = viewer.getStyle(layer.get('styleName')); - const legendComponent = Legend({ styleRules: style, opacity, layer, viewer, clickable: false }); - const stylePicker = viewer.getLayerStylePicker(layer); - + let cls = ''; + let title; + let abstract; + let description; + let opacity; + let opacityControl; + let style; + let legendComponent; + let stylePicker = []; + if (layer) { + cls = `${clsOptions} item`.trim(); + title = layer.get('title') || ''; + abstract = layer.get('abstract') || ''; + description = layer.get('description') || ''; + opacity = layer.getOpacity(); + opacityControl = layer.get('opacityControl') !== false; + style = viewer.getStyle(layer.get('styleName')); + legendComponent = Legend({ styleRules: style, opacity, layer, viewer, clickable: false }); + stylePicker = viewer.getLayerStylePicker(layer); + } else if (group) { + title = group.title; + abstract = !group.showAbstractInLegend ? group.abstract || '' : ''; + description = group.description || ''; + opacity = group.opacity || 1; + opacityControl = group.opacityControl === true; + } let styleSelection; let overlayEl; let sliderEl; @@ -52,8 +69,11 @@ const OverlayProperties = function OverlayProperties(options = {}) { } function renderStyleSelection() { - const html = `
    Välj stil
    ${styleSelection.render()}`; - return hasStylePicker() ? html : ''; + if (hasStylePicker()) { + const html = `
    Välj stil
    ${styleSelection.render()}`; + return html; + } + return ''; } function getStyleDisplayName(styleName) { @@ -64,6 +84,23 @@ const OverlayProperties = function OverlayProperties(options = {}) { return (altStyle && altStyle.title) || styleName; } + function getSubgroups(topGroup) { + const groups = viewer.getGroups(); + const groupArr = [topGroup]; + function loopGroups(checkGroup) { + if (groups) { + for (let i = 0; i < groups.length; i += 1) { + if (groups[i].parent === checkGroup.name) { + groupArr.push(groups[i]); + loopGroups(groups[i], groups); + } + } + } + } + loopGroups(topGroup, groups); + return groupArr; + } + const onSelectStyle = (styleTitle) => { const altStyleIndex = stylePicker.findIndex(s => s.title === styleTitle); const altStyle = stylePicker[altStyleIndex]; @@ -119,31 +156,38 @@ const OverlayProperties = function OverlayProperties(options = {}) { return Component({ onInit() { - styleSelection = Dropdown({ - direction: 'up', - cls: 'o-stylepicker text-black flex', - contentCls: 'bg-grey-lighter text-smaller rounded', - contentStyle: 'max-height: 12em; overflow-y: auto;', - buttonCls: 'bg-white border text-black box-shadow', - buttonTextCls: 'text-smaller', - text: getStyleDisplayName(layer.get('styleName')), - buttonIconCls: 'black', - ariaLabel: 'Välj stil' - }); - const components = [legendComponent]; + const components = []; + if (layer) { + components.push(legendComponent); + } if (opacityControl) { components.push(transparencySlider); } if (hasStylePicker()) { + styleSelection = Dropdown({ + direction: 'up', + cls: 'o-stylepicker text-black flex', + contentCls: 'bg-grey-lighter text-smaller rounded', + contentStyle: 'max-height: 12em; overflow-y: auto;', + buttonCls: 'bg-white border text-black box-shadow', + buttonTextCls: 'text-smaller', + text: getStyleDisplayName(layer.get('styleName')), + buttonIconCls: 'black', + ariaLabel: 'Välj stil' + }); components.push(styleSelection); } this.addComponents(components); - this.on('click', (e) => { - extendedLegendZoom(e); - }); + if (layer) { + this.on('click', (e) => { + extendedLegendZoom(e); + }); + } }, onRender() { - viewer.getControlByName('legend').dispatch('renderOverlayProperties', { cmp: this, layer }); + if (layer) { + viewer.getControlByName('legend').dispatch('renderOverlayProperties', { cmp: this, layer }); + } this.dispatch('render'); overlayEl = document.getElementById(this.getId()); overlayEl.addEventListener('click', (e) => { @@ -153,11 +197,34 @@ const OverlayProperties = function OverlayProperties(options = {}) { sliderEl = document.getElementById(transparencySlider.getId()); sliderEl.nextElementSibling.value *= 100; sliderEl.addEventListener('input', () => { - layer.setOpacity(sliderEl.valueAsNumber); + if (group) { + const groups = viewer.getGroups(); + const groupArr = getSubgroups(group, groups); + groupArr.forEach(grp => { + const activeGrp = grp; + viewer.getLayersByProperty('group', activeGrp.name).forEach(l => l.setOpacity(sliderEl.valueAsNumber)); + activeGrp.opacity = sliderEl.valueAsNumber; + }); + viewer.getLayersByProperty('id', `grouplayer-${group.name}`).forEach(l => l.setOpacity(sliderEl.valueAsNumber)); + } + if (layer) { + layer.setOpacity(sliderEl.valueAsNumber); + } sliderEl.nextElementSibling.value *= 100; }); sliderEl.addEventListener('change', () => { - layer.setOpacity(sliderEl.valueAsNumber); + if (group) { + const groupArr = getSubgroups(group); + groupArr.forEach(grp => { + const activeGrp = grp; + viewer.getLayersByProperty('group', activeGrp.name).forEach(l => l.setOpacity(sliderEl.valueAsNumber)); + activeGrp.opacity = sliderEl.valueAsNumber; + }); + viewer.getLayersByProperty('id', `grouplayer-${group.name}`).forEach(l => l.setOpacity(sliderEl.valueAsNumber)); + } + if (layer) { + layer.setOpacity(sliderEl.valueAsNumber); + } }); } if (hasStylePicker()) { @@ -171,11 +238,12 @@ const OverlayProperties = function OverlayProperties(options = {}) { render() { return `
    - ${legendComponent.render()} + ${legendComponent ? legendComponent.render() : ''} ${renderStyleSelection()} ${opacityControl ? transparencySlider.render() : ''}
    ${abstract ? `
    ${abstract}
    ` : ''} + ${description ? `
    ${description}
    ` : ''}
    `; }, labelCls: 'text-small text-semibold', diff --git a/src/ui/button.js b/src/ui/button.js index d653f1c0c..98228add9 100644 --- a/src/ui/button.js +++ b/src/ui/button.js @@ -129,6 +129,7 @@ export default function Button(options = {}) { if (validStates.indexOf(state) > 0) { buttonEl.classList.add(state); } + this.dispatch('render'); }, render: function render() { return `