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

Migrate loading/loading to TypeScript

src/components/loading/loading.js

@@ -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;

src/components/loading/loading.scss

@@ -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;
 }
 

src/components/loading/loading.ts

@@ -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;

src/global.d.ts

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