milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #5067 from terite/terite-loading-typescript

Browse source 
Migrate loading/loading to TypeScript
This commit is contained in:
Bill Thornton 2024-01-09 11:36:26 -05:00 • committed by GitHub
commit 972715450d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 47 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/components/loading/loading.js
View file

@ -1,79 +0,0 @@
import './loading.scss';
let loadingElem;
let layer1;
let layer2;
let layer3;
let layer4;
let circleLefts;
let circleRights;
export function show() {
let elem = loadingElem;
if (!elem) {
elem = document.createElement('div');
elem.setAttribute('dir', 'ltr');
loadingElem = elem;
elem.classList.add('docspinner');
elem.classList.add('mdl-spinner');
elem.innerHTML = '<div class="mdl-spinner__layer mdl-spinner__layer-1"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div>';
document.body.appendChild(elem);
layer1 = elem.querySelector('.mdl-spinner__layer-1');
layer2 = elem.querySelector('.mdl-spinner__layer-2');
layer3 = elem.querySelector('.mdl-spinner__layer-3');
layer4 = elem.querySelector('.mdl-spinner__layer-4');
circleLefts = elem.querySelectorAll('.mdl-spinner__circleLeft');
circleRights = elem.querySelectorAll('.mdl-spinner__circleRight');
}
elem.classList.add('mdlSpinnerActive');
layer1.classList.add('mdl-spinner__layer-1-active');
layer2.classList.add('mdl-spinner__layer-2-active');
layer3.classList.add('mdl-spinner__layer-3-active');
layer4.classList.add('mdl-spinner__layer-4-active');
for (let i = 0, length = circleLefts.length; i < length; i++) {
circleLefts[i].classList.add('mdl-spinner__circleLeft-active');
}
for (let i = 0, length = circleRights.length; i < length; i++) {
circleRights[i].classList.add('mdl-spinner__circleRight-active');
}
}
export function hide() {
const elem = loadingElem;
if (elem) {
elem.classList.remove('mdlSpinnerActive');
elem.classList.remove('mdl-spinner__layer-1-active');
elem.classList.remove('mdl-spinner__layer-2-active');
elem.classList.remove('mdl-spinner__layer-3-active');
elem.classList.remove('mdl-spinner__layer-4-active');
for (let i = 0, length = circleLefts.length; i < length; i++) {
circleLefts[i].classList.remove('mdl-spinner__circleLeft-active');
}
for (let i = 0, length = circleRights.length; i < length; i++) {
circleRights[i].classList.remove('mdl-spinner__circleRight-active');
}
}
}
const loading = {
show,
hide
};
window.Loading = loading;
export default loading;

12
src/components/loading/loading.scss
View file

@ -27,7 +27,7 @@
border-color: #00a4dc;
}
.mdl-spinner__layer-1-active {
.mdlSpinnerActive .mdl-spinner__layer-1 {
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@ -35,7 +35,7 @@
border-color: #00a4dc;
}
.mdl-spinner__layer-2-active {
.mdlSpinnerActive .mdl-spinner__layer-2 {
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@ -43,7 +43,7 @@
border-color: #00a4dc;
}
.mdl-spinner__layer-3-active {
.mdlSpinnerActive .mdl-spinner__layer-3 {
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@ -51,7 +51,7 @@
border-color: #00a4dc;
}
.mdl-spinner__layer-4-active {
.mdlSpinnerActive .mdl-spinner__layer-4 {
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@ -224,7 +224,7 @@
transform: rotate(129deg);
}
.mdl-spinner__circleLeft-active {
.mdlSpinnerActive .mdl-spinner__circleLeft {
animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@ -234,7 +234,7 @@
transform: rotate(-129deg);
}
.mdl-spinner__circleRight-active {
.mdlSpinnerActive .mdl-spinner__circleRight {
animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

37
src/components/loading/loading.ts Normal file
View file

@ -0,0 +1,37 @@
import './loading.scss';
let loader: HTMLDivElement | undefined;
function createLoader(): HTMLDivElement {
const elem = document.createElement('div');
elem.setAttribute('dir', 'ltr');
elem.classList.add('docspinner');
elem.classList.add('mdl-spinner');
elem.innerHTML = '<div class="mdl-spinner__layer mdl-spinner__layer-1"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-2"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-3"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div><div class="mdl-spinner__layer mdl-spinner__layer-4"><div class="mdl-spinner__circle-clipper mdl-spinner__left"><div class="mdl-spinner__circle mdl-spinner__circleLeft"></div></div><div class="mdl-spinner__circle-clipper mdl-spinner__right"><div class="mdl-spinner__circle mdl-spinner__circleRight"></div></div></div>';
document.body.appendChild(elem);
return elem;
}
export function show() {
if (!loader) {
loader = createLoader();
}
loader.classList.add('mdlSpinnerActive');
}
export function hide() {
if (loader) {
loader.classList.remove('mdlSpinnerActive');
}
}
const loading = {
show,
hide
};
window.Loading = loading;
export default loading;

4
src/global.d.ts vendored
View file

@ -5,6 +5,10 @@ export declare global {
ApiClient: ApiClient;
Events: Events;
NativeShell: any;
Loading: {
show();
hide();
}
}
interface DocumentEventMap {