Extend overlay directive with "target"-version

src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js

@@ -4,7 +4,7 @@
 * @restrict E
 **/
 angular.module("umbraco.directives")
-    .directive('umbOverlay', function () {
+    .directive('umbOverlay', function ($timeout) {
         return {
 
             scope: {
@@ -37,8 +37,59 @@ angular.module("umbraco.directives")
                 }
                 cssClass += " " + shadow;
 
-
                 scope.overlayCssClass = cssClass;
+
+
+                function setTargetPosition() {
+
+                    var position = {
+                        right: "inherit",
+                        left: "inherit",
+                        top: "inherit",
+                        bottom: "inherit"
+                    };
+
+                    // viewport size
+                    var viewportWidth = $(window).innerWidth();
+                    var viewportHeight = $(window).innerHeight();
+
+                    // mouse click position
+                    var mousePositionClickX = scope.model.event.pageX;
+                    var mousePositionClickY = scope.model.event.pageY;
+
+                    // element size
+                    var elementHeight = element.context.clientHeight;
+                    var elementWidth = element.context.clientWidth;
+
+                    // move element to this position
+                    position.left = mousePositionClickX - (elementWidth / 2);
+                    position.top = mousePositionClickY - (elementHeight / 2);
+
+                    // check to see if element is outside screen
+                    // outside right
+                    if( position.left + elementWidth > viewportWidth) {
+                        position.right = 0;
+                        position.left = "inherit";
+                    }
+
+                    // outside bottom
+                    if( position.top + elementHeight > viewportHeight ) {
+                        position.bottom = 0;
+                        position.top = "inherit";
+                    }
+
+                    element.css(position);
+
+
+                }
+
+
+                $timeout(function() {
+                    if(scope.position === "target") {
+                        setTargetPosition();
+                    }
+                });
+
                 scope.closeOverLay = function(){
                     if(scope.model.close){
                         scope.model.close(scope.model);

src/Umbraco.Web.UI.Client/src/less/components/overlays.less

@@ -26,6 +26,34 @@
      }
  }
 
+
+// TARGET OVERLAY
+.umb-overlay-target {
+     position: fixed;
+     width: 400px;
+     height: 400px;
+     overflow: hidden;
+     border: 1px solid #ccc;
+     background: white;
+     padding: 7px;
+     z-index: 996660;
+     box-sizing: border-box;
+     .umb-overlay-header{
+          border-bottom: 1px solid #d9d9d9;
+          color: #999;
+          padding: 10px;
+          margin-top: 0;
+          text-align: center;
+     }
+     .umb-overlay-container{
+          position: absolute;
+          top: 68px;
+          left: 7px;
+          right: 7px;
+          bottom: 7px;
+          overflow: auto;
+     }
+}