1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
/*-
* ============LICENSE_START=======================================================
* SDC
* ================================================================================
* Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
* ================================================================================
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============LICENSE_END=========================================================
*/
'use strict';
import {EVENTS} from "app/utils";
import {EventListenerService} from "app/services";
export interface ILoaderScope extends ng.IScope {
display:boolean; // Toggle show || hide scroll
size:string; // small || medium || large
elementSelector:string; // Jquery selector to hide and scroll inside
relative:boolean; // Will use the parent of <loader> element and hide it and scroll inside
loaderType:string;
}
export class LoaderDirective implements ng.IDirective {
constructor(private EventListenerService:EventListenerService) {
}
/*
* relative is used when inserting the HTML loader inside some div <loader data-display="isLoading" relative="true"></loader>
* elementSelector when we want to pass the Jquery selector of the loader.
*/
scope = {
display: '=',
size: '@?',
elementSelector: '@?',
relative: '=?',
loaderType: '@?'
};
public replace = false;
public restrict = 'E';
template = ():string => {
return require('./loader-directive.html');
}
link = (scope:ILoaderScope, element:any) => {
let interval;
if(scope.loaderType) {
this.EventListenerService.registerObserverCallback(EVENTS.SHOW_LOADER_EVENT + scope.loaderType, (loaderType)=> {
scope.display = true;
});
this.EventListenerService.registerObserverCallback(EVENTS.HIDE_LOADER_EVENT + scope.loaderType, (loaderType)=> {
scope.display = false;
});
}
let calculateSizesForFixPosition = (positionStyle:string):void => {
// This is problematic, I do not want to change the parent position.
// set the loader on all the screen
let parentPosition = element.parent().position();
let parentWidth = element.parent().width();
let parentHeight = element.parent().height();
element.css('position', positionStyle);
element.css('top', parentPosition.top);
element.css('left', parentPosition.left);
element.css('width', parentWidth);
element.css('height', parentHeight);
};
let setStyle = (positionStyle:string):void => {
switch (positionStyle) {
case 'absolute':
case 'fixed':
// The parent size is not set yet, still loading, so need to use interval to update the size.
interval = window.setInterval(()=> {
calculateSizesForFixPosition(positionStyle);
}, 2000);
break;
default:
// Can change the parent position to relative without causing style issues.
element.parent().css('position', 'relative');
break;
}
};
// This should be executed after the dom loaded
window.setTimeout(():void => {
element.css('display', 'none');
if (scope.elementSelector) {
let elemParent = angular.element(scope.elementSelector);
let positionStyle:string = elemParent.css('position');
setStyle(positionStyle);
}
if (scope.relative === true) {
let positionStyle:string = element.parent().css('position');
setStyle(positionStyle);
}
if (!scope.size) {
scope.size = 'large';
}
}, 0);
if (scope.elementSelector) {
}
function cleanUp() {
clearInterval(interval);
}
scope.$watch("display", (newVal, oldVal) => {
element.css('display', 'none');
let timeout;
if (newVal === true) {
timeout = window.setTimeout(():void => {
element.css('display', 'block');
}, 500);
} else {
window.clearTimeout(timeout);
window.setTimeout(():void => {
element.css('display', 'none');
}, 0);
}
});
scope.$on('$destroy', cleanUp);
};
public static factory = (EventListenerService:EventListenerService)=> {
return new LoaderDirective( EventListenerService);
};
}
LoaderDirective.factory.$inject = ['EventListenerService'];
|
