|
...
|
...
|
@@ -26,7 +26,7 @@ export default angular.module('thingsboard.directives.detailsSidenav', []) |
|
26
|
26
|
.name;
|
|
27
|
27
|
|
|
28
|
28
|
/*@ngInject*/
|
|
29
|
|
-function DetailsSidenav($timeout, $window) {
|
|
|
29
|
+function DetailsSidenav($timeout, $mdUtil, $q, $animate) {
|
|
30
|
30
|
|
|
31
|
31
|
var linker = function (scope, element, attrs) {
|
|
32
|
32
|
|
|
...
|
...
|
@@ -42,22 +42,62 @@ function DetailsSidenav($timeout, $window) { |
|
42
|
42
|
scope.isEdit = true;
|
|
43
|
43
|
}
|
|
44
|
44
|
|
|
45
|
|
- if (angular.isDefined(attrs.closeOnClickOutside && attrs.closeOnClickOutside)) {
|
|
46
|
|
- scope.closeOnClickOutside = true;
|
|
47
|
|
- var clickOutsideHandler = function() {
|
|
48
|
|
- scope.closeDetails();
|
|
49
|
|
- };
|
|
50
|
|
- angular.element($window).click(clickOutsideHandler);
|
|
51
|
|
- scope.$on("$destroy", function () {
|
|
52
|
|
- angular.element($window).unbind('click', clickOutsideHandler);
|
|
|
45
|
+ var backdrop;
|
|
|
46
|
+ var previousContainerStyles;
|
|
|
47
|
+
|
|
|
48
|
+ if (attrs.hasOwnProperty('tbEnableBackdrop')) {
|
|
|
49
|
+ backdrop = $mdUtil.createBackdrop(scope, "md-sidenav-backdrop md-opaque ng-enter");
|
|
|
50
|
+ element.on('$destroy', function() {
|
|
|
51
|
+ backdrop && backdrop.remove();
|
|
|
52
|
+ });
|
|
|
53
|
+ scope.$on('$destroy', function(){
|
|
|
54
|
+ backdrop && backdrop.remove();
|
|
|
55
|
+ });
|
|
|
56
|
+ scope.$watch('isOpen', updateIsOpen);
|
|
|
57
|
+ }
|
|
|
58
|
+
|
|
|
59
|
+ function updateIsOpen(isOpen) {
|
|
|
60
|
+ backdrop[isOpen ? 'on' : 'off']('click', (ev)=>{
|
|
|
61
|
+ ev.preventDefault();
|
|
|
62
|
+ scope.isOpen = false;
|
|
|
63
|
+ scope.$apply();
|
|
|
64
|
+ });
|
|
|
65
|
+ var parent = element.parent();
|
|
|
66
|
+ var restorePositioning = updateContainerPositions(parent, isOpen);
|
|
|
67
|
+
|
|
|
68
|
+ return $q.all([
|
|
|
69
|
+ isOpen && backdrop ? $animate.enter(backdrop, parent) : backdrop ?
|
|
|
70
|
+ $animate.leave(backdrop) : $q.when(true)
|
|
|
71
|
+ ]).then(function() {
|
|
|
72
|
+ restorePositioning && restorePositioning();
|
|
53
|
73
|
});
|
|
54
|
74
|
}
|
|
55
|
75
|
|
|
56
|
|
- scope.onClick = function($event) {
|
|
57
|
|
- if (scope.closeOnClickOutside) {
|
|
58
|
|
- $event.stopPropagation();
|
|
|
76
|
+ function updateContainerPositions(parent, willOpen) {
|
|
|
77
|
+ var drawerEl = element[0];
|
|
|
78
|
+ var scrollTop = parent[0].scrollTop;
|
|
|
79
|
+ if (willOpen && scrollTop) {
|
|
|
80
|
+ previousContainerStyles = {
|
|
|
81
|
+ top: drawerEl.style.top,
|
|
|
82
|
+ bottom: drawerEl.style.bottom,
|
|
|
83
|
+ height: drawerEl.style.height
|
|
|
84
|
+ };
|
|
|
85
|
+ var positionStyle = {
|
|
|
86
|
+ top: scrollTop + 'px',
|
|
|
87
|
+ bottom: 'auto',
|
|
|
88
|
+ height: parent[0].clientHeight + 'px'
|
|
|
89
|
+ };
|
|
|
90
|
+ backdrop.css(positionStyle);
|
|
59
|
91
|
}
|
|
60
|
|
- };
|
|
|
92
|
+ if (!willOpen && previousContainerStyles) {
|
|
|
93
|
+ return function() {
|
|
|
94
|
+ backdrop[0].style.top = null;
|
|
|
95
|
+ backdrop[0].style.bottom = null;
|
|
|
96
|
+ backdrop[0].style.height = null;
|
|
|
97
|
+ previousContainerStyles = null;
|
|
|
98
|
+ };
|
|
|
99
|
+ }
|
|
|
100
|
+ }
|
|
61
|
101
|
|
|
62
|
102
|
scope.toggleDetailsEditMode = function () {
|
|
63
|
103
|
if (!scope.isAlwaysEdit) {
|
...
|
...
|
|
