fix: hide opacitySlider (#1867)

* Update overlayproperties.js * Update overlays.js
origo-map · Oct 20, 2023 · 833a16d · 833a16d
1 parent 861e582
commit 833a16d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
@@ -129,7 +129,10 @@ const OverlayProperties = function OverlayProperties(options = {}) {
         buttonIconCls: 'black',
         ariaLabel: 'Välj stil'
       });
-      const components = [transparencySlider, legendComponent];
+      const components = [legendComponent];
+      if (opacityControl) {
+        components.push(transparencySlider);
+      }
       if (hasStylePicker()) {
         components.push(styleSelection);
       }
@@ -141,12 +144,12 @@ const OverlayProperties = function OverlayProperties(options = {}) {
     onRender() {
       viewer.getControlByName('legend').dispatch('renderOverlayProperties', { cmp: this, layer });
       this.dispatch('render');
-      sliderEl = document.getElementById(transparencySlider.getId());
       overlayEl = document.getElementById(this.getId());
       overlayEl.addEventListener('click', (e) => {
         this.dispatch('click', e);
       });
       if (opacityControl) {
+        sliderEl = document.getElementById(transparencySlider.getId());
         sliderEl.nextElementSibling.value *= 100;
         sliderEl.addEventListener('input', () => {
           layer.setOpacity(sliderEl.valueAsNumber);
@@ -169,7 +172,7 @@ const OverlayProperties = function OverlayProperties(options = {}) {
                 <div class="padding-small">
                   ${legendComponent.render()}
                   ${renderStyleSelection()}
-                  ${transparencySlider.render()}
+                  ${opacityControl ? transparencySlider.render() : ''}
                 </div>
                 ${abstract ? `<div class="padding-small padding-x text-small">${abstract}</div>` : ''}
               </div>`;

diff --git a/src/controls/legend/overlays.js b/src/controls/legend/overlays.js
@@ -279,10 +279,14 @@ const Overlays = function Overlays(options) {
           const opacityInput = secondaryEl.getElementsByTagName('input')[0];
           backBtn.tabIndex = 0;
           backBtn.focus();
-          opacityInput.tabIndex = 0;
+          if (opacityInput) {
+            opacityInput.tabIndex = 0;
+          }
           backBtn.addEventListener('click', () => {
             backBtn.tabIndex = -99;
-            opacityInput.tabIndex = -99;
+            if (opacityInput) {
+              opacityInput.tabIndex = -99;
+            }
           }, false);
           slidenav.on('slide', () => {
             el.classList.remove('width-100');