refactor overlay directive to follow angular style guide

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

@@ -1,43 +1,36 @@
 /**
-* @ngdoc directive
-* @name umbraco.directives.directive:umbProperty
-* @restrict E
-**/
-angular.module("umbraco.directives")
-    .directive('umbOverlay', function ($timeout, formHelper) {
-        return {
+ * @ngdoc directive
+ * @name umbraco.directives.directive:umbProperty
+ * @restrict E
+ **/
 
-            scope: {
-                model: "=",
-                view: "=",
-                position: "@",
-                animation: "@",
-                shadow: "@"
-            },
+(function() {
+   'use strict';
 
-            transclude: true,
-            restrict: 'E',
-            replace: true,
-            templateUrl: 'views/components/overlays/umb-overlay.html',
-            link: function(scope, element, attrs) {
+   function OverlayDirective($timeout) {
+
+      function link(scope, el, attr, ctrl) {
 
          var modelCopy = {};
 
          function activate() {
+
             var cssClass = "umb-overlay-center";
-                  if(scope.position)
-                  {
+
+            if (scope.position) {
                cssClass = "umb-overlay-" + scope.position;
             }
 
-                  if(scope.animation){
+            if (scope.animation) {
                cssClass += " " + scope.animation;
             }
 
             var shadow = "shadow-depth-3";
-                  if(scope.shadow){
+
+            if (scope.shadow) {
                shadow = "shadow-depth-" + scope.shadow;
             }
+
             cssClass += " " + shadow;
 
             scope.overlayCssClass = cssClass;
@@ -51,7 +44,7 @@ angular.module("umbraco.directives")
             var newObject = {};
 
             for (var key in object) {
-                    if(key !== "event") {
+               if (key !== "event") {
                   newObject[key] = angular.copy(object[key]);
                }
             }
@@ -77,7 +70,7 @@ angular.module("umbraco.directives")
             };
 
             // if mouse click position is know place element with mouse in center
-                    if(scope.model.event.pageX && scope.model.event.pageY) {
+            if (scope.model.event.pageX && scope.model.event.pageY) {
 
                // viewport size
                viewportWidth = $(window).innerWidth();
@@ -88,8 +81,8 @@ angular.module("umbraco.directives")
                mousePositionClickY = scope.model.event.pageY;
 
                // element size
-                      elementHeight = element.context.clientHeight;
-                      elementWidth = element.context.clientWidth;
+               elementHeight = el.context.clientHeight;
+               elementWidth = el.context.clientWidth;
 
                // move element to this position
                position.left = mousePositionClickX - (elementWidth / 2);
@@ -97,18 +90,18 @@ angular.module("umbraco.directives")
 
                // check to see if element is outside screen
                // outside right
-                      if( position.left + elementWidth > viewportWidth) {
+               if (position.left + elementWidth > viewportWidth) {
                   position.right = 0;
                   position.left = "inherit";
                }
 
                // outside bottom
-                      if( position.top + elementHeight > viewportHeight ) {
+               if (position.top + elementHeight > viewportHeight) {
                   position.bottom = 0;
                   position.top = "inherit";
                }
 
-                      element.css(position);
+               el.css(position);
 
                // else change overlay to center position
             } else {
@@ -123,16 +116,20 @@ angular.module("umbraco.directives")
          activate();
 
          $timeout(function() {
-                    if(scope.position === "target") {
+            if (scope.position === "target") {
                setTargetPosition();
             }
          });
 
          scope.submitForm = function(model) {
 
-                  if (formHelper.submitForm({ scope: scope })) {
+            if (formHelper.submitForm({
+                  scope: scope
+               })) {
 
-                      formHelper.resetForm({ scope: scope });
+               formHelper.resetForm({
+                  scope: scope
+               });
 
                scope.model.submit(model);
 
@@ -140,8 +137,8 @@ angular.module("umbraco.directives")
 
          };
 
-                scope.closeOverLay = function(){
-                    if(scope.model.close){
+         scope.closeOverLay = function() {
+            if (scope.model.close) {
                scope.model = modelCopy;
                scope.model.close(scope.model);
             } else {
@@ -151,6 +148,24 @@ angular.module("umbraco.directives")
 
       }
 
-
+      var directive = {
+         transclude: true,
+         restrict: 'E',
+         replace: true,
+         templateUrl: 'views/components/overlays/umb-overlay.html',
+         scope: {
+            model: "=",
+            view: "=",
+            position: "@",
+            animation: "@",
+            shadow: "@"
+         },
+         link: link
       };
-    });
+
+      return directive;
+   }
+
+   angular.module('umbraco.directives').directive('umbOverlay', OverlayDirective);
+
+})();