forked from cswendrowski/FoundryVTT-Custom-CSS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
custom-css.js
118 lines (103 loc) · 2.91 KB
/
custom-css.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import { Settings } from "./settings.js";
/**
* A class that handles the primary functions of the Custom CSS module
*
* @class CustomCSS
*/
class CustomCSS {
/**
* Handles the init Hook.
*
* Creates an instance of this class and stores it
* in a global location.
*
* @static
* @memberof CustomCSS
*/
static onInit() {
window.CustomCss = new CustomCSS();
}
/**
* Creates an instance of CustomCSS.
* @memberof CustomCSS
*/
constructor() {
this.setup();
}
/**
* Returns the <style> element used to inject CSS into the page.
* If it doesn't already exist, creates it.
*
* @readonly
* @memberof CustomCSS
*/
get style() {
if (!this._style) this.createStyleElement();
return this._style;
}
/**
* @type {string} - The innerHTML content of the <style> element
* @memberof CustomCSS
*/
get css() { return this.style.innerHTML; }
/** @param {string} css - A new CSS string to inject into the <style> element */
set css(css) { this.style.innerHTML = css; }
/**
* Prepare the class for use.
*
* Register settigns, initiate migration if needed, set up socket
* add the <style> element to the page, and inject styles.
*
* @memberof CustomCSS
*/
async setup() {
Settings.registerSettings();
if (Settings.hasOldSettings) await Settings.migrate();
this.openSocket();
this.createStyleElement();
await this.applyStyles(false);
console.log(this.css);
}
/**
* Creates a new <style> element at the end of the <head>
* of the document, and store its reference in this.
*
* @memberof CustomCSS
*/
createStyleElement() {
this._style = document.createElement("style");
this._style.id = "custom-css";
document.querySelector("head").appendChild(this._style);
}
/**
* Inject the stylesheet data stored in settings
* into the <style> element.
*
* @param {boolean} transition - Whether or not to animate the transition (normally true)
* @memberof CustomCSS
*/
async applyStyles(transition=Settings.doTransition) {
let el;
if (transition) {
el = document.createElement("style");
el.innerHTML = "* { transition: .75s; };";
document.querySelector("head").appendChild(el);
}
this.css = Settings.getStylesheet();
if (transition) {
await new Promise(resolve => setTimeout(resolve, 750));
el.remove();
}
}
/**
* Prepares for socket connections.
*
* @memberof CustomCSS
*/
openSocket() {
Hooks.once("ready", () =>
game.socket.on("module.custom-css", () => this.applyStyles())
);
}
}
Hooks.once('init', CustomCSS.onInit);