yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor overlay directive to follow angular style guide

Browse Source
This commit is contained in:
Mads Rasmussen
2015-08-27 15:02:13 +02:00
parent 77247d09bc
commit 713d33a6c5
1 changed files with 134 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,156 +1,171 @@
/** /**
* @ngdoc directive * @ngdoc directive
* @name umbraco.directives.directive:umbProperty * @name umbraco.directives.directive:umbProperty
* @restrict E * @restrict E
**/ **/
angular.module("umbraco.directives")
.directive('umbOverlay', function ($timeout, formHelper) {
return {
scope: { (function() {
model: "=", 'use strict';
view: "=",
position: "@",
animation: "@",
shadow: "@"
},
transclude: true, function OverlayDirective($timeout) {
restrict: 'E',
replace: true,
templateUrl: 'views/components/overlays/umb-overlay.html',
link: function(scope, element, attrs) {
var modelCopy = {}; function link(scope, el, attr, ctrl) {
function activate() { var modelCopy = {};
var cssClass = "umb-overlay-center";
if(scope.position)
{
cssClass = "umb-overlay-" + scope.position;
}
if(scope.animation){ function activate() {
cssClass += " " + scope.animation;
}
var shadow = "shadow-depth-3"; var cssClass = "umb-overlay-center";
if(scope.shadow){
shadow = "shadow-depth-" + scope.shadow;
}
cssClass += " " + shadow;
scope.overlayCssClass = cssClass; if (scope.position) {
cssClass = "umb-overlay-" + scope.position;
}
modelCopy = makeModelCopy(scope.model); if (scope.animation) {
cssClass += " " + scope.animation;
}
} var shadow = "shadow-depth-3";
function makeModelCopy(object) { if (scope.shadow) {
shadow = "shadow-depth-" + scope.shadow;
}
var newObject = {}; cssClass += " " + shadow;
for (var key in object) { scope.overlayCssClass = cssClass;
if(key !== "event") {
newObject[key] = angular.copy(object[key]);
}
}
return newObject; modelCopy = makeModelCopy(scope.model);
} }
function setTargetPosition() { function makeModelCopy(object) {
var viewportWidth = null; var newObject = {};
var viewportHeight = null;
var mousePositionClickX = null;
var mousePositionClickY = null;
var elementHeight = null;
var elementWidth = null;
var position = { for (var key in object) {
right: "inherit", if (key !== "event") {
left: "inherit", newObject[key] = angular.copy(object[key]);
top: "inherit", }
bottom: "inherit" }
};
// if mouse click position is know place element with mouse in center return newObject;
if(scope.model.event.pageX && scope.model.event.pageY) {
// viewport size }
viewportWidth = $(window).innerWidth();
viewportHeight = $(window).innerHeight();
// click position function setTargetPosition() {
mousePositionClickX = scope.model.event.pageX;
mousePositionClickY = scope.model.event.pageY;
// element size var viewportWidth = null;
elementHeight = element.context.clientHeight; var viewportHeight = null;
elementWidth = element.context.clientWidth; var mousePositionClickX = null;
var mousePositionClickY = null;
var elementHeight = null;
var elementWidth = null;
// move element to this position var position = {
position.left = mousePositionClickX - (elementWidth / 2); right: "inherit",
position.top = mousePositionClickY - (elementHeight / 2); left: "inherit",
top: "inherit",
bottom: "inherit"
};
// check to see if element is outside screen // if mouse click position is know place element with mouse in center
// outside right if (scope.model.event.pageX && scope.model.event.pageY) {
if( position.left + elementWidth > viewportWidth) {
position.right = 0;
position.left = "inherit";
}
// outside bottom // viewport size
if( position.top + elementHeight > viewportHeight ) { viewportWidth = $(window).innerWidth();
position.bottom = 0; viewportHeight = $(window).innerHeight();
position.top = "inherit";
}
element.css(position); // click position
mousePositionClickX = scope.model.event.pageX;
mousePositionClickY = scope.model.event.pageY;
// else change overlay to center position // element size
} else { elementHeight = el.context.clientHeight;
elementWidth = el.context.clientWidth;
scope.position = "center"; // move element to this position
activate(); 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";
}
activate(); el.css(position);
$timeout(function() { // else change overlay to center position
if(scope.position === "target") { } else {
setTargetPosition();
}
});
scope.submitForm = function(model) { scope.position = "center";
activate();
if (formHelper.submitForm({ scope: scope })) {
formHelper.resetForm({ scope: scope });
scope.model.submit(model);
}
};
scope.closeOverLay = function(){
if(scope.model.close){
scope.model = modelCopy;
scope.model.close(scope.model);
} else {
scope.model = null;
}
};
} }
}
}; activate();
});
$timeout(function() {
if (scope.position === "target") {
setTargetPosition();
}
});
scope.submitForm = function(model) {
if (formHelper.submitForm({
scope: scope
})) {
formHelper.resetForm({
scope: scope
});
scope.model.submit(model);
}
};
scope.closeOverLay = function() {
if (scope.model.close) {
scope.model = modelCopy;
scope.model.close(scope.model);
} else {
scope.model = null;
}
};
}
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);
})();