Updated shield to work properly with module-urlapi

less/map.less

@@ -10,6 +10,10 @@ a {
   background: transparent;
 }
 
+.ol-viewport {
+  z-index: 0;
+}
+
 .g4u-desktop {
   .ol-overlaycontainer-stopevent > div.ol-control {
     // ol.controls which are direct childs of the overlay container have grey background

src/FeaturePopup.js

@@ -485,10 +485,6 @@ export default class FeaturePopup extends ol.Object {
         key: 'visible'
       })
     }
-
-    if (visible) {
-      this.window_.updateSize()
-    }
   }
 
   /**

src/html/Shield.js

@@ -12,6 +12,13 @@ import '../../less/shield.less'
  * @property {string} [className='g4u-shield']
  */
 
+/**
+ * @typedef {object} ElementPosition
+ * @property {jQuery} $actualElement
+ * @property {jQuery} $oldParent
+ * @property {number} oldIndex
+ */
+
 /**
  * A shield that sets itself in front of all other elements in a context if activated, hides itself if deactivated.
  * It can get another element in front of it (Attention: it gets removed from its context temporarly)
@@ -59,6 +66,12 @@ export default class Shield extends ol.Object {
         }
       }
     })
+
+    /**
+     * @type {Map<jQuery, ElementPosition>}
+     * @private
+     */
+    this.elementsOnTop_ = new Map()
   }
 
   /**
@@ -90,18 +103,40 @@ export default class Shield extends ol.Object {
   }
 
   /**
-   * Gets the given element in front of the shield. The element is removed from its current context temporarily
+   * Gets the given element in front of the shield. The element is removed from its context temporarily
    * @param {jQuery} $element
    */
-  getInFront ($element) {
+  add$OnTop ($element) {
+    var $actualElement = $element
+
     let $window = $element.parents().filter('.g4u-window')
     if ($window.length > 0) {
-      $element = $window
+      $actualElement = $window
     }
-    this.$oldParent_ = $element.parent()
-    this.$element_.append($element)
-    this.once('change:active', () => {
-      this.$oldParent_.append($element)
+
+    let $oldParent = $element.parent()
+
+    this.elementsOnTop_.set($element, {
+      $actualElement,
+      $oldParent,
+      oldIndex: $oldParent.children().index($element)
     })
+
+    this.$element_.append($actualElement)
+  }
+
+  /**
+   * Returns the given element in front of the shield to the previous context
+   * @param {jQuery} $element
+   */
+  remove$OnTop ($element) {
+    let elementPosition = this.elementsOnTop_.get($element)
+    this.elementsOnTop_.remove($element)
+
+    if (elementPosition.oldIndex === 0) {
+      elementPosition.$oldParent.prepend(elementPosition.$actualElement)
+    } else {
+      elementPosition.$oldParent.children().eq(elementPosition.oldIndex - 1).after(elementPosition.$actualElement)
+    }
   }
 }

src/html/Window.js

@@ -235,19 +235,19 @@ export default class Window extends ol.Object {
     if (oldValue !== visible) {
       if (visible) {
         this.$element_.removeClass(cssClasses.hidden)
-        this.updateSize(true)
         if (this.map_.get('mobile')) {
           this.map_.get('shield').setActive(true)
-          this.map_.get('shield').getInFront(this.$element_)
-        } else {
-          if (this.map_.get('shield').getActive()) {
-            this.map_.get('shield').getInFront(this.$element_)
-          } else {
-            this.getInFront()
-          }
+          this.map_.get('shield').add$OnTop(this.$element_)
+        } else if (!this.map_.get('shield').getActive()) {
+          this.getInFront()
         }
+        this.updateSize(true)
       } else {
-        this.map_.get('shield').setActive(false)
+        if (this.map_.get('mobile')) {
+          this.map_.get('shield').setActive(false)
+          this.map_.get('shield').remove$OnTop(this.$element_)
+        }
+
         this.$element_.addClass(cssClasses.hidden)
         this.$element_.css('top', '')
         this.$element_.css('left', '')
@@ -299,6 +299,11 @@ export default class Window extends ol.Object {
       let maxWidth = this.$context_.innerWidth() - 2 * margin
       let maxHeight = this.$context_.innerHeight() - 2 * margin
 
+      // storing values
+      let position = this.$element_.css('position')
+      let top = this.$element_.css('top')
+      let left = this.$element_.css('left')
+
       // reset position to get default value
       this.$element_.css('position', '')
 
@@ -310,11 +315,6 @@ export default class Window extends ol.Object {
 
       this.get$Body().css('max-height', '')
 
-      // storing these values
-      let position = this.$element_.css('position')
-      let top = this.$element_.css('top')
-      let left = this.$element_.css('left')
-
       // position element so it can be measured
       this.$element_.css('position', 'fixed')
       this.$element_.css('top', '0px')
@@ -345,6 +345,10 @@ export default class Window extends ol.Object {
       this.$element_.css('position', position)
 
       if (initialize && !this.fixedPosition_) {
+        // getting initial values
+        top = this.$element_.css('top')
+        left = this.$element_.css('left')
+
         // initialize_ at top middle
         let off = offset(this.$context_, this.$element_)