From 945b4d809afb8e7a0dae32325c749fb55bc07d27 Mon Sep 17 00:00:00 2001 From: Nicolas Date: Sun, 27 Oct 2019 13:24:21 +0100 Subject: [PATCH] * Update loader * Bug fixes --- src/html/choose.html | 29 +++------------------ src/html/index.html | 12 +++++++++ src/js/choose.js | 28 ++++++++++---------- src/js/loader.js | 48 +++++++++++++++++++++++++++++++--- src/js/loader.ts | 61 +++++++++++++++++++++++++++++++++++++++----- src/js/scanner.js | 0 6 files changed, 129 insertions(+), 49 deletions(-) create mode 100644 src/js/scanner.js diff --git a/src/html/choose.html b/src/html/choose.html index b6b7efb..777b6ca 100644 --- a/src/html/choose.html +++ b/src/html/choose.html @@ -1,35 +1,12 @@
- -

Please choose your action

-
- +
+

Create

Create a new password and print it out.

-
+

Scan

Scan your existing password

diff --git a/src/html/index.html b/src/html/index.html index 8976ee5..a7ef490 100644 --- a/src/html/index.html +++ b/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'); + } \ No newline at end of file diff --git a/src/js/choose.js b/src/js/choose.js index 7e32d8d..c89190a 100644 --- a/src/js/choose.js +++ b/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); -}) \ No newline at end of file + slide_left("wait", "preview", 600); +} + +async function createClick() { + await loader.load('create'); + + slide_left("choose", "create_setup"); + + setTimeout(() => { + loader.unload('choose'); + }, 400) +} \ No newline at end of file diff --git a/src/js/loader.js b/src/js/loader.js index 8615f1d..3553e83 100644 --- a/src/js/loader.js +++ b/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); } - 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; diff --git a/src/js/loader.ts b/src/js/loader.ts index 7294708..18c051c 100644 --- a/src/js/loader.ts +++ b/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 = null; constructor(content: HTMLDivElement) { this.content = content; + this.head = document.getElementsByTagName("head")[0]; + this.modules = []; } async load(module_name: string) { return new Promise((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: document.getElementById(module_name) }; + this.modules.push(mod); + + resolve(true); } - 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(); + } + }); } } \ No newline at end of file diff --git a/src/js/scanner.js b/src/js/scanner.js new file mode 100644 index 0000000..e69de29