overlay "target"-positioning updates correctly on content changes and container resize

2019-09-02 20:33:44 +02:00
1 changed files with 52 additions and 42 deletions
@@ -208,6 +208,7 @@ Opens an overlay to show a custom YSOD. </br>
         var numberOfOverlays = 0;
         var isRegistered = false;

+
         var modelCopy = {};
         var unsubscribe = [];

@@ -221,8 +222,23 @@ Opens an overlay to show a custom YSOD. </br>

            $timeout(function() {

-               if (scope.position === "target") {
+               if (scope.position === "target" && scope.model.event) {
                  setTargetPosition();
+
+                  // update the position of the overlay on content changes
+                  // as these affect the layout/size of the overlay
+                  if ('ResizeObserver' in window)
+                  {
+                     var resizeObserver = new ResizeObserver(setTargetPosition);
+                     var contentArea = document.getElementById("contentwrapper");
+                     resizeObserver.observe(el[0]);
+                     if (contentArea) {
+                        resizeObserver.observe(contentArea);
+                     }
+                     unsubscribe.push(function () {
+                        resizeObserver.disconnect();
+                     });
+                  }
               }

               // this has to be done inside a timeout to ensure the destroy
@@ -397,9 +413,6 @@ Opens an overlay to show a custom YSOD. </br>
               bottom: "inherit"
            };

-            // if mouse click position is know place element with mouse in center
-            if (scope.model.event && scope.model.event) {
-
            // click position
            mousePositionClickX = scope.model.event.pageX;
            mousePositionClickY = scope.model.event.pageY;
@@ -438,9 +451,6 @@ Opens an overlay to show a custom YSOD. </br>
            }

            el.css(position);
-
-            }
-
         }

         scope.submitForm = function(model) {