Dynamically import Quill

We load Quill only if it is needed (after all, only admins need Quill)
This commit is contained in:
David Négrier 2020-10-13 10:26:27 +02:00
parent 0731bd39e5
commit 9a04836215
4 changed files with 324 additions and 320 deletions

View File

@ -6,12 +6,6 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script>
<script>

View File

@ -6,6 +6,7 @@
"devDependencies": {
"@types/google-protobuf": "^3.7.3",
"@types/jasmine": "^3.5.10",
"@types/quill": "^1.3.7",
"@typescript-eslint/eslint-plugin": "^2.26.0",
"@typescript-eslint/parser": "^2.26.0",
"eslint": "^6.8.0",
@ -20,9 +21,9 @@
"webpack-merge": "^4.2.2"
},
"dependencies": {
"@types/axios": "^0.14.0",
"@types/simple-peer": "^9.6.0",
"@types/socket.io-client": "^1.4.32",
"axios": "^0.20.0",
"generic-type-guard": "^3.2.0",
"google-protobuf": "^3.13.0",
"phaser": "^3.22.0",

View File

@ -1,7 +1,3 @@
import {GameScene} from "../Phaser/Game/GameScene";
const Quill = require("quill");
import {HtmlUtils} from "../WebRtc/HtmlUtils";
import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
import {RoomConnection} from "../Connexion/RoomConnection";
@ -26,6 +22,7 @@ export class ConsoleGlobalMessageManager {
private buttonMainConsole: HTMLDivElement;
private activeConsole: boolean = false;
private userInputManager!: UserInputManager;
private static cssLoaded: boolean = false;
constructor(private Connection: RoomConnection, userInputManager : UserInputManager) {
this.buttonMainConsole = document.createElement('div');
@ -123,8 +120,14 @@ export class ConsoleGlobalMessageManager {
section.appendChild(buttonDiv);
this.divMainConsole.appendChild(section);
//TODO refactor
setTimeout(() => {
(async () => {
// Start loading CSS
const cssPromise = ConsoleGlobalMessageManager.loadCss();
// Import quill
const Quill = await import("quill") as any;
// Wait for CSS to be loaded
await cssPromise;
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
@ -154,8 +157,28 @@ export class ConsoleGlobalMessageManager {
toolbar: toolbarOptions
},
});
})();
}
}, 1000);
private static loadCss(): Promise<void> {
return new Promise<void>((resolve, reject) => {
if (ConsoleGlobalMessageManager.cssLoaded) {
resolve();
return;
}
const fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", "https://cdn.quilljs.com/1.3.7/quill.snow.css");
document.getElementsByTagName("head")[0].appendChild(fileref);
ConsoleGlobalMessageManager.cssLoaded = true;
fileref.onload = () => {
resolve();
}
fileref.onerror = () => {
reject();
}
});
}
createUploadAudioPart(){

File diff suppressed because it is too large Load Diff