1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// JavaScript
// Panel creator
"use strict";
class GrammalectePanel {
constructor (sId, sTitle, nWidth, nHeight, bFlexible=true) {
this.sId = sId;
this.nWidth = nWidth;
this.nHeight = nHeight;
this.bFlexible = bFlexible;
this.xPanelBar = oGrammalecte.createNode("div", {className: "grammalecte_panel_bar"});
this.xPanelContent = oGrammalecte.createNode("div", {className: "grammalecte_panel_content"});
this.xWaitIcon = this._createWaitIcon();
this.xPanel = this._createPanel(sTitle);
this.center();
}
|
>
>
>
>
|
>
>
>
>
>
>
>
>
>
>
>
|
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
|
// JavaScript
// Panel creator
/* jshint esversion:6, -W097 */
/* jslint esversion:6 */
/* global GrammalectePanel, oGrammalecte, xGrammalectePort, showError, window, document, console */
"use strict";
class GrammalectePanel {
constructor (sUrl, sId, sTitle, nWidth, nHeight, bFlexible=true) {
this.sId = sId;
this.sUrl = sUrl;
this.nWidth = nWidth;
this.nHeight = nHeight;
this.bFlexible = bFlexible;
this.bShadow = document.body.createShadowRoot || document.body.attachShadow;
if (this.bShadow){
this.oShadowPanel = oGrammalecte.createNode("div", {id: this.sId+"_shadow", style: "width:0;height:0;"});
this.oShadow = this.oShadowPanel.attachShadow({mode: "open"});
this.oParent = this.oShadow;
} else {
this.oParent = document;
}
this.xPanelBar = oGrammalecte.createNode("div", {className: "grammalecte_panel_bar"});
this.xPanelContent = oGrammalecte.createNode("div", {className: "grammalecte_panel_content"});
this.xWaitIcon = this._createWaitIcon();
this.xPanel = this._createPanel(sTitle);
this.center();
}
|
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
_createCloseButton () {
let xButton = oGrammalecte.createNode("div", {className: "grammalecte_close_button", textContent: "×", title: "Fermer la fenêtre"});
xButton.onclick = function () { this.hide(); }.bind(this); // better than writing “let that = this;” before the function?
return xButton;
}
insertIntoPage () {
document.body.appendChild(this.xPanel);
}
show () {
this.xPanel.style.display = "block";
}
hide () {
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
>
|
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
119
120
121
122
123
124
125
|
_createCloseButton () {
let xButton = oGrammalecte.createNode("div", {className: "grammalecte_close_button", textContent: "×", title: "Fermer la fenêtre"});
xButton.onclick = function () { this.hide(); }.bind(this); // better than writing “let that = this;” before the function?
return xButton;
}
insertIntoPage () {
if (this.bShadow){
this.oShadow.appendChild(
oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: this.sUrl+"content_scripts/panel.css"})
);
this.oShadow.appendChild(
oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: this.sUrl+"content_scripts/panel_gc.css"})
);
this.oShadow.appendChild(
oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: this.sUrl+"content_scripts/panel_lxg.css"})
);
this.oShadow.appendChild(
oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: this.sUrl+"content_scripts/panel_tf.css"})
);
this.oShadow.appendChild(this.xPanel);
document.body.appendChild(this.oShadowPanel);
} else {
document.body.appendChild(this.xPanel);
}
}
show () {
this.xPanel.style.display = "block";
}
hide () {
|
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
return this.xPanelContent.offsetWidth;
}
logInnerHTML () {
// for debugging
console.log(this.xPanel.innerHTML);
}
|
|
|
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
return this.xPanelContent.offsetWidth;
}
logInnerHTML () {
// for debugging
console.log(this.xPanel.innerHTML);
}
startWaitIcon () {
this.xWaitIcon.style.visibility = "visible";
}
stopWaitIcon () {
this.xWaitIcon.style.visibility = "hidden";
}
|