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"> 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"> <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 --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script>
<script> <script>

View File

@ -6,6 +6,7 @@
"devDependencies": { "devDependencies": {
"@types/google-protobuf": "^3.7.3", "@types/google-protobuf": "^3.7.3",
"@types/jasmine": "^3.5.10", "@types/jasmine": "^3.5.10",
"@types/quill": "^1.3.7",
"@typescript-eslint/eslint-plugin": "^2.26.0", "@typescript-eslint/eslint-plugin": "^2.26.0",
"@typescript-eslint/parser": "^2.26.0", "@typescript-eslint/parser": "^2.26.0",
"eslint": "^6.8.0", "eslint": "^6.8.0",
@ -20,9 +21,9 @@
"webpack-merge": "^4.2.2" "webpack-merge": "^4.2.2"
}, },
"dependencies": { "dependencies": {
"@types/axios": "^0.14.0",
"@types/simple-peer": "^9.6.0", "@types/simple-peer": "^9.6.0",
"@types/socket.io-client": "^1.4.32", "@types/socket.io-client": "^1.4.32",
"axios": "^0.20.0",
"generic-type-guard": "^3.2.0", "generic-type-guard": "^3.2.0",
"google-protobuf": "^3.13.0", "google-protobuf": "^3.13.0",
"phaser": "^3.22.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 {HtmlUtils} from "../WebRtc/HtmlUtils";
import {UserInputManager} from "../Phaser/UserInput/UserInputManager"; import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
import {RoomConnection} from "../Connexion/RoomConnection"; import {RoomConnection} from "../Connexion/RoomConnection";
@ -26,6 +22,7 @@ export class ConsoleGlobalMessageManager {
private buttonMainConsole: HTMLDivElement; private buttonMainConsole: HTMLDivElement;
private activeConsole: boolean = false; private activeConsole: boolean = false;
private userInputManager!: UserInputManager; private userInputManager!: UserInputManager;
private static cssLoaded: boolean = false;
constructor(private Connection: RoomConnection, userInputManager : UserInputManager) { constructor(private Connection: RoomConnection, userInputManager : UserInputManager) {
this.buttonMainConsole = document.createElement('div'); this.buttonMainConsole = document.createElement('div');
@ -123,24 +120,30 @@ export class ConsoleGlobalMessageManager {
section.appendChild(buttonDiv); section.appendChild(buttonDiv);
this.divMainConsole.appendChild(section); this.divMainConsole.appendChild(section);
//TODO refactor (async () => {
setTimeout(() => { // 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 = [ const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons ['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'], ['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values [{'header': 1}, {'header': 2}], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }], [{'list': 'ordered'}, {'list': 'bullet'}],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript [{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent [{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{ 'direction': 'rtl' }], // text direction [{'direction': 'rtl'}], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown [{'size': ['small', false, 'large', 'huge']}], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{'header': [1, 2, 3, 4, 5, 6, false]}],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme [{'color': []}, {'background': []}], // dropdown with defaults from theme
[{ 'font': [] }], [{'font': []}],
[{ 'align': [] }], [{'align': []}],
['clean'], ['clean'],
@ -154,8 +157,28 @@ export class ConsoleGlobalMessageManager {
toolbar: toolbarOptions 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(){ createUploadAudioPart(){

File diff suppressed because it is too large Load Diff