Skip to content

Commit 1792c55

Browse files
iyilm4ziyilm4z
committed
abp ui's setBusy&clearBusy reimpled vie freeze-ui
1 parent adb12a4 commit 1792c55

File tree

9 files changed

+179
-76
lines changed

9 files changed

+179
-76
lines changed

‎angular/angular.json

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"styles": [
3434
"node_modules/famfamfam-flags/dist/sprite/famfamfam-flags.css",
3535
"node_modules/sweetalert2/dist/sweetalert2.css",
36+
"src/assets/freeze-ui/freeze-ui.css",
3637
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
3738
"node_modules/admin-lte-css-only/css/adminlte.min.css",
3839
"src/shared/core.less"
@@ -42,15 +43,12 @@
4243
"node_modules/moment/min/moment.min.js",
4344
"node_modules/@aspnet/signalr/dist/browser/signalr.min.js",
4445
"node_modules/sweetalert2/dist/sweetalert2.js",
45-
"node_modules/block-ui/jquery.blockUI.js",
46-
"node_modules/spin.js/spin.min.js",
47-
"node_modules/spin.js/jquery.spin.js",
46+
"src/assets/freeze-ui/freeze-ui.js",
4847
"node_modules/push.js/bin/push.min.js",
4948
"node_modules/abp-web-resources/Abp/Framework/scripts/abp.js",
5049
"src/assets/abp-web-resources/abp.sweet-alert.js",
50+
"src/assets/abp-web-resources/abp.freeze-ui.js",
5151
"node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.js",
52-
"node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.blockUI.js",
53-
"node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.spin.js",
5452
"node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.moment.js"
5553
]
5654
},
@@ -125,6 +123,7 @@
125123
"styles": [
126124
"node_modules/famfamfam-flags/dist/sprite/famfamfam-flags.css",
127125
"node_modules/sweetalert2/dist/sweetalert2.css",
126+
"src/assets/freeze-ui/freeze-ui.css",
128127
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
129128
"node_modules/admin-lte-css-only/css/adminlte.min.css",
130129
"src/shared/core.less"
@@ -134,15 +133,12 @@
134133
"node_modules/moment/min/moment.min.js",
135134
"node_modules/@aspnet/signalr/dist/browser/signalr.min.js",
136135
"node_modules/sweetalert2/dist/sweetalert2.js",
137-
"node_modules/block-ui/jquery.blockUI.js",
138-
"node_modules/spin.js/spin.min.js",
139-
"node_modules/spin.js/jquery.spin.js",
136+
"src/assets/freeze-ui/freeze-ui.js",
140137
"node_modules/push.js/bin/push.min.js",
141138
"node_modules/abp-web-resources/Abp/Framework/scripts/abp.js",
142139
"src/assets/abp-web-resources/abp.sweet-alert.js",
140+
"src/assets/abp-web-resources/abp.freeze-ui.js",
143141
"node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.js",
144-
"node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.blockUI.js",
145-
"node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.spin.js",
146142
"node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.moment.js"
147143
]
148144
}

‎angular/package.json

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
"abp-ng2-module": "^5.1.1",
2727
"abp-web-resources": "^5.1.1",
2828
"admin-lte-css-only": "^3.0.4",
29-
"block-ui": "^2.70.1",
3029
"core-js": "^3.2.1",
3130
"famfamfam-flags": "^1.0.0",
3231
"jquery": "^3.4.1",
@@ -37,7 +36,6 @@
3736
"ngx-pagination": "^4.1.0",
3837
"push.js": "1.0.9",
3938
"rxjs": "^6.4.0",
40-
"spin.js": "^2.3.2",
4139
"sweetalert2": "^9.10.12",
4240
"ts-helpers": "^1.1.2",
4341
"web-animations-js": "^2.3.2",
@@ -50,7 +48,6 @@
5048
"@angularclass/hmr": "^2.1.3",
5149
"@types/jasmine": "^3.4.0",
5250
"@types/jquery": "^3.3.34",
53-
"@types/jquery.blockui": "0.0.28",
5451
"@types/lodash": "^4.14.62",
5552
"@types/moment-timezone": "^0.5.12",
5653
"@types/node": "^12.7.3",

‎angular/src/assets/abp-web-resources/abp.freeze-ui.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var abp = abp || {};
2+
(() => {
3+
if (!FreezeUI || !UnFreezeUI) {
4+
return;
5+
}
6+
7+
abp.ui.setBusy = (elm, text, delay) => {
8+
FreezeUI({
9+
element: elm,
10+
text: text ? text : " ",
11+
delay: delay,
12+
});
13+
};
14+
15+
abp.ui.clearBusy = (elm, delay) => {
16+
UnFreezeUI({ element: elm, delay: delay });
17+
};
18+
})();

‎angular/src/assets/freeze-ui/freeze-ui.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
@keyframes spin {
2+
0% {
3+
transform: translateZ(0) rotate(0);
4+
}
5+
6+
100% {
7+
transform: translateZ(0) rotate(360deg);
8+
}
9+
}
10+
11+
.freeze-ui {
12+
position: fixed;
13+
top: 0;
14+
left: 0;
15+
width: 100%;
16+
height: 100%;
17+
z-index: 999999999;
18+
background-color: #fff;
19+
opacity: 0.8;
20+
transition: opacity 0.25s;
21+
}
22+
23+
.freeze-ui.is-unfreezing {
24+
opacity: 0;
25+
}
26+
27+
.freeze-ui:after {
28+
content: attr(data-text);
29+
display: block;
30+
max-width: 125px;
31+
position: absolute;
32+
top: 50%;
33+
left: 50%;
34+
transform: translate(-50%, -50%);
35+
font-size: 20px;
36+
font-family: sans-serif;
37+
color: #343a40;
38+
text-align: center;
39+
text-transform: uppercase;
40+
}
41+
42+
.freeze-ui:before {
43+
content: "";
44+
display: block;
45+
width: 75px;
46+
height: 75px;
47+
border-radius: 50%;
48+
border-width: 2px;
49+
border-style: solid;
50+
border-color: transparent #228ae6 #228ae6;
51+
position: absolute;
52+
top: calc(50% - 75px);
53+
left: calc(50% - 75px);
54+
will-change: transform;
55+
animation: spin 0.75s infinite ease-in-out;
56+
}

‎angular/src/assets/freeze-ui/freeze-ui.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
// taken from https://raw.githubusercontent.com/alexradulescu/FreezeUI and modified
2+
(() => {
3+
let freezeHtml = document.createElement("div");
4+
freezeHtml.classList.add("freeze-ui");
5+
6+
let freezedItems = [];
7+
8+
let getSelector = (selector) => (selector ? selector : "body");
9+
10+
let normalizeFreezeDelay = (delay) => (delay ? delay : 250);
11+
12+
let shouldFreezeItem = (selector) => {
13+
let itemSelector = getSelector(selector);
14+
return freezedItems.indexOf(itemSelector) >= 0;
15+
};
16+
17+
let addFreezedItem = (selector) => {
18+
let itemSelector = getSelector(selector);
19+
freezedItems.push(itemSelector);
20+
};
21+
22+
let removeFreezedItem = (selector) => {
23+
let itemSelector = getSelector(selector);
24+
for (let i = 0; i < freezedItems.length; i++) {
25+
if (freezedItems[i] === itemSelector) {
26+
freezedItems.splice(i, 1);
27+
}
28+
}
29+
};
30+
31+
window.FreezeUI = (options = {}) => {
32+
addFreezedItem(options.selector);
33+
const delay = normalizeFreezeDelay(options.delay);
34+
35+
setTimeout(() => {
36+
if (!shouldFreezeItem(options.selector)) {
37+
return;
38+
}
39+
40+
let parent;
41+
if (options.element) {
42+
parent = options.element;
43+
} else {
44+
parent = document.querySelector(options.selector) || document.body;
45+
}
46+
47+
freezeHtml.setAttribute("data-text", options.text || "Loading");
48+
49+
if (document.querySelector(options.selector) || options.element) {
50+
freezeHtml.style.position = "absolute";
51+
}
52+
53+
parent.appendChild(freezeHtml);
54+
}, delay);
55+
};
56+
57+
window.UnFreezeUI = (options = {}) => {
58+
removeFreezedItem(options.selector);
59+
const delay = normalizeFreezeDelay(options.delay) + 250;
60+
61+
setTimeout(() => {
62+
let freezeHtml;
63+
if (options.element) {
64+
freezeHtml = options.element.querySelector(".freeze-ui");
65+
} else {
66+
freezeHtml = document.querySelector(".freeze-ui");
67+
}
68+
69+
if (freezeHtml) {
70+
freezeHtml.classList.remove("is-unfreezing");
71+
if (freezeHtml.parentElement) {
72+
freezeHtml.parentElement.removeChild(freezeHtml);
73+
}
74+
}
75+
}, delay);
76+
};
77+
})();

‎angular/src/shared/directives/block.directive.ts

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎angular/src/shared/directives/busy.directive.ts

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,24 @@
1-
import {
2-
AfterViewInit,
3-
Directive,
4-
ElementRef,
5-
Injectable,
6-
HostListener,
7-
Input,
8-
SimpleChanges,
9-
OnChanges
10-
} from '@angular/core';
1+
import { Directive, ElementRef, Input } from '@angular/core';
112

123
@Directive({
13-
selector: '[busy]'
4+
selector: '[busy]',
145
})
15-
@Injectable()
16-
export class BusyDirective implements AfterViewInit, OnChanges {
17-
@Input('busy') loading: boolean;
18-
private $element: JQuery;
6+
export class BusyDirective {
7+
@Input() set busy(isBusy: boolean) {
8+
this.refreshState(isBusy);
9+
}
1910

20-
constructor(private _element: ElementRef) { }
11+
constructor(private _element: ElementRef) {}
2112

22-
ngAfterViewInit(): void {
23-
this.$element = $(this._element.nativeElement);
13+
refreshState(isBusy: boolean): void {
14+
if (isBusy === undefined) {
15+
return;
2416
}
2517

26-
ngOnChanges(changes: SimpleChanges): void {
27-
28-
if (changes['loading'].currentValue) {
29-
abp.ui.setBusy(this._element.nativeElement);
30-
} else {
31-
abp.ui.clearBusy(this._element.nativeElement);
32-
}
18+
if (isBusy) {
19+
abp.ui.setBusy(this._element.nativeElement);
20+
} else {
21+
abp.ui.clearBusy(this._element.nativeElement);
3322
}
23+
}
3424
}

‎angular/src/shared/shared.module.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { AbpModalHeaderComponent } from './components/modal/abp-modal-header.com
1616
import { AbpModalFooterComponent } from './components/modal/abp-modal-footer.component';
1717
import { LayoutStoreService } from './layout/layout-store.service';
1818

19-
import { BlockDirective } from './directives/block.directive';
2019
import { BusyDirective } from './directives/busy.directive';
2120
import { EqualValidator } from './directives/equal-validator.directive';
2221

@@ -33,7 +32,6 @@ import { EqualValidator } from './directives/equal-validator.directive';
3332
AbpModalHeaderComponent,
3433
AbpModalFooterComponent,
3534
LocalizePipe,
36-
BlockDirective,
3735
BusyDirective,
3836
EqualValidator
3937
],
@@ -43,7 +41,6 @@ import { EqualValidator } from './directives/equal-validator.directive';
4341
AbpModalHeaderComponent,
4442
AbpModalFooterComponent,
4543
LocalizePipe,
46-
BlockDirective,
4744
BusyDirective,
4845
EqualValidator
4946
]

‎angular/src/typings.d.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
///<reference path="../node_modules/abp-web-resources/Abp/Framework/scripts/abp.d.ts"/>
2-
///<reference path="../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.d.ts"/>
32
///<reference path="../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.signalr.d.ts"/>
43
///<reference path="../node_modules/moment/moment.d.ts"/>
54

@@ -9,3 +8,10 @@
98

109
declare var System: any;
1110
declare var Push: any;
11+
12+
declare namespace abp {
13+
namespace ui {
14+
function setBusy(elm?: any, text?: any, delay?: any): void;
15+
function clearBusy(elm?: any, delay?: any): void;
16+
}
17+
}

0 commit comments

Comments
 (0)