* Update loader

* Bug fixes

src/html/choose.html

@@ -1,35 +1,12 @@
 <div id="choose" class="main" style="left: 150%;">
-    <link href="../css/choose.css" rel="stylesheet">
-    <script>
-        window.$ = window.jQuery = require('../assets/jquery-3.4.1.min.js');
-
-        function scanClick() {
-            console.log("here");
-            await loader.load('scanner');
-    
-            $('#scan').animate({
-                left: '-150'
-            });
-
-            $('#wait').animate({
-                left: '0'
-            }, 300);
-
-            const done = await startWatching();
-
-            $('#preview').animate({
-                left: '0'
-            }, 600);
-        }
-    </script>
     <h1>Please choose your action</h1>
     <div class="options">
-        <div id="create" onclick="scanClick()">
-            <i class="fas fa-plus" onclick="scanClick()"></i>
+        <div id="create" onclick="createClick()">
+            <i class="fas fa-plus"></i>
             <h3>Create</h3>
             <p>Create a new password and print it out.</p>
         </div>
-        <div id="scan">
+        <div id="scan" onclick="scanClick()">
             <i class="fas fa-qrcode"></i>
             <h3>Scan</h3>
             <p>Scan your existing password</p>

src/html/index.html

@@ -134,6 +134,18 @@
                     });
                 })
             }            
+        
+            function slide_left(from, to, duration = 300) {
+                $('#' + from).animate({
+                    left: '-150%'
+                }, duration);
+                $('#' + from).css('left', '-150%');
+
+                $('#' + to).animate({
+                    left: '0'
+                }, duration);
+                $('#' + from).css('left', '0');
+            }
         </script>
     </body>
 </html>

src/js/choose.js

@@ -2,21 +2,23 @@ console.log("here")
 
 window.$ = window.jQuery = require('../assets/jquery-3.4.1.min.js');
 
-$('#scan').click(async (e) => {
-    console.log("here")
+async function scanClick() {
+    console.log("here2")
     await loader.load('scanner');
 
-    $('#scan').animate({
-        left: '-150'
-    });
-
-    $('#wait').animate({
-        left: '0'
-    }, 300);
+    slide_left("choose", "wait");
 
     const done = await startWatching();
 
-    $('#preview').animate({
-        left: '0'
-    }, 600);
-})
+    slide_left("wait", "preview", 600);
+}
+
+async function createClick() {
+    await loader.load('create');
+
+    slide_left("choose", "create_setup");
+
+    setTimeout(() => {
+        loader.unload('choose');
+    }, 400)
+}

src/js/loader.js

@@ -44,25 +44,65 @@ var path_1 = require("path");
 var Loader = /** @class */ (function () {
     function Loader(content) {
         this.content = null;
+        this.head = null;
+        this.modules = null;
         this.content = content;
+        this.head = document.getElementsByTagName("head")[0];
+        this.modules = [];
     }
     Loader.prototype.load = function (module_name) {
         return __awaiter(this, void 0, void 0, function () {
             var _this = this;
             return __generator(this, function (_a) {
                 return [2 /*return*/, new Promise(function (resolve, reject) {
-                        fs_1.readFile(path_1.resolve("src/html/", module_name + ".html"), 'utf8', function (err, data) {
-                            if (err)
-                                console.error("Error while loading module:", module_name, "(", path_1.resolve("src/html/", module_name + ".html"), ")");
+                        // Load css file
+                        var css = document.createElement("link");
+                        css.setAttribute("rel", "stylesheet");
+                        css.setAttribute("href", "../css/" + module_name + ".css");
+                        _this.head.appendChild(css);
+                        var html_path = path_1.resolve("src/html/", module_name + ".html");
+                        // Load js file
+                        var js = document.createElement("script");
+                        js.setAttribute("type", "text/javascript");
+                        js.setAttribute("src", "../js/" + module_name + ".js");
+                        _this.head.appendChild(js);
+                        // Load html file
+                        fs_1.readFile(html_path, 'utf8', function (err, data) {
+                            if (err) {
+                                console.error("Error while loading html module:", module_name, "(", html_path, ")", err);
+                                resolve(false);
+                            }
                             else {
                                 _this.content.innerHTML += data;
-                            }
+                                // Push to loaded modules
+                                var mod = { name: module_name, js: js, css: css, html: document.getElementById(module_name) };
+                                _this.modules.push(mod);
                                 resolve(true);
+                            }
                         });
                     })];
             });
         });
     };
+    Loader.prototype.unload = function (module_name) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.modules.forEach(function (element) {
+                    if (element.name == module_name) {
+                        console.log(element);
+                        /*
+                        element.js.parentElement.removeChild(element.js);
+                        element.css.parentElement.removeChild(element.css);
+                        element.html.parentElement.removeChild(element.html);*/
+                        element.html.remove();
+                        element.css.remove();
+                        element.js.remove();
+                    }
+                });
+                return [2 /*return*/];
+            });
+        });
+    };
     return Loader;
 }());
 exports.Loader = Loader;

src/js/loader.ts

@@ -1,25 +1,74 @@
 import { readFile } from "fs";
-import { resolve as res } from "path";
+import { resolve as res, relative } from "path";
+
+export interface IModules {
+    name: string,
+    js: HTMLScriptElement,
+    css: HTMLLinkElement,
+    html: HTMLDivElement
+}
 
 /**
  * This script loads or unloads different modules present in src/html
  */
 export class Loader {
     content: HTMLDivElement = null;
+    head: HTMLHeadElement = null;
+    modules: Array<IModules> = null;
 
     constructor(content: HTMLDivElement) {
         this.content = content;
+        this.head = document.getElementsByTagName("head")[0];
+        this.modules = [];
     }
 
     async load(module_name: string) {
         return new Promise<Boolean>((resolve, reject) => {
-            readFile(res("src/html/", module_name + ".html"), 'utf8', (err, data) => {
-                if (err) console.error("Error while loading module:", module_name, "(", res("src/html/", module_name + ".html"), ")");
+            // Load css file
+            const css = document.createElement("link");
+            css.setAttribute("rel", "stylesheet");
+            css.setAttribute("href", "../css/" + module_name + ".css");
+            this.head.appendChild(css);
+
+            const html_path: string = res("src/html/", module_name + ".html");
+
+            // Load js file
+            const js = document.createElement("script");
+            js.setAttribute("type", "text/javascript");
+            js.setAttribute("src", "../js/" + module_name + ".js");
+            this.head.appendChild(js);
+
+            // Load html file
+            readFile(html_path, 'utf8', (err, data) => {
+                if (err) {
+                    console.error("Error while loading html module:", module_name, "(", html_path, ")", err);
+                    resolve(false);
+                }
                 else {
                     this.content.innerHTML += data;
-                }
+                    
+                    // Push to loaded modules
+                    const mod: IModules = { name: module_name, js: js, css: css, html: <HTMLDivElement>document.getElementById(module_name) };
+                    this.modules.push(mod);
+
                     resolve(true);
-            })
+                }
+            });
+        });
+    }
+
+    async unload(module_name) {
+        this.modules.forEach(element => {
+            if (element.name == module_name) {
+                console.log(element);
+                /*
+                element.js.parentElement.removeChild(element.js);
+                element.css.parentElement.removeChild(element.css);
+                element.html.parentElement.removeChild(element.html);*/
+                element.html.remove();
+                element.css.remove();
+                element.js.remove();
+            }
         });
     }
 }