1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// JavaScript
// Panel creator
"use strict";
console.log("[Content script] Panel creator");
class GrammalectePanel {
constructor (sId, sTitle, nWidth, nHeight, bMovable=true) {
this.sId = sId;
this.sContentId = sId+"_content";
this.nWidth = nWidth;
this.nHeight = nHeight;
this.bMovable = bMovable;
this.xPanelContent = createNode("div", {className: "grammalecte_panel_content"});
this.xWaitIcon = this._createWaitIcon();
this.xPanelNode = this._createPanel(sTitle);
this.center();
}
_createPanel (sTitle) {
|
|
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// JavaScript
// Panel creator
"use strict";
console.log("[Content script] Panel creator");
class GrammalectePanel {
constructor (sId, sTitle, nWidth, nHeight, bFlexible=true) {
this.sId = sId;
this.sContentId = sId+"_content";
this.nWidth = nWidth;
this.nHeight = nHeight;
this.bFlexible = bFlexible;
this.xPanelContent = createNode("div", {className: "grammalecte_panel_content"});
this.xWaitIcon = this._createWaitIcon();
this.xPanelNode = this._createPanel(sTitle);
this.center();
}
_createPanel (sTitle) {
|
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
showError(e);
}
}
_createButtons () {
let xButtonLine = createNode("div", {className: "grammalecte_panel_commands"});
xButtonLine.appendChild(this.xWaitIcon);
if (this.bMovable) {
xButtonLine.appendChild(this._createMoveButton("stickToTop", "¯", "Coller en haut"));
xButtonLine.appendChild(this._createMoveButton("stickToLeft", "«", "Coller à gauche"));
xButtonLine.appendChild(this._createMoveButton("center", "•", "Centrer"));
xButtonLine.appendChild(this._createMoveButton("stickToRight", "»", "Coller à droite"));
xButtonLine.appendChild(this._createMoveButton("stickToBottom", "_", "Coller en bas"));
}
|
<
|
|
|
|
|
<
|
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
showError(e);
}
}
_createButtons () {
let xButtonLine = createNode("div", {className: "grammalecte_panel_commands"});
xButtonLine.appendChild(this.xWaitIcon);
xButtonLine.appendChild(this._createMoveButton("stickToTop", "¯", "Coller en haut"));
xButtonLine.appendChild(this._createMoveButton("stickToLeft", "«", "Coller à gauche"));
xButtonLine.appendChild(this._createMoveButton("center", "•", "Centrer"));
xButtonLine.appendChild(this._createMoveButton("stickToRight", "»", "Coller à droite"));
xButtonLine.appendChild(this._createMoveButton("stickToBottom", "_", "Coller en bas"));
xButtonLine.appendChild(this._createCloseButton());
return xButtonLine;
}
_createWaitIcon () {
let xWaitIcon = createNode("div", {className: "grammalecte_spinner"});
xWaitIcon.appendChild(createNode("div", {className: "bounce1"}));
|
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
119
|
}
hide () {
this.xPanelNode.style.display = "none";
}
center () {
let nHeight = window.innerHeight-100;
this.xPanelNode.style = `top: 50%; left: 50%; width: ${this.nWidth}px; height: ${nHeight}px; margin-top: -${nHeight/2}px; margin-left: -${this.nWidth/2}px;`;
}
stickToLeft () {
let nHeight = window.innerHeight-100;
this.xPanelNode.style = `top: 50%; left: -2px; width: ${this.nWidth}px; height: ${nHeight}px; margin-top: -${nHeight/2}px;`;
}
stickToRight () {
let nHeight = window.innerHeight-100;
this.xPanelNode.style = `top: 50%; right: -2px; width: ${this.nWidth}px; height: ${nHeight}px; margin-top: -${nHeight/2}px;`;
}
stickToTop () {
let nWidth = Math.floor(window.innerWidth/2);
this.xPanelNode.style = `top: -2px; left: 50%; width: ${nWidth}px; height: ${Math.floor(window.innerHeight*0.45)}px; margin-left: -${nWidth/2}px;`;
}
stickToBottom () {
let nWidth = Math.floor(window.innerWidth/2);
this.xPanelNode.style = `bottom: -2px; left: 50%; width: ${nWidth}px; height: ${Math.floor(window.innerHeight*0.45)}px; margin-left: -${nWidth/2}px;`;
}
reduce () {
// todo
}
logInnerHTML () {
|
|
|
|
|
>
|
|
>
|
|
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
119
|
}
hide () {
this.xPanelNode.style.display = "none";
}
center () {
let nHeight = (this.bFlexible) ? window.innerHeight-100 : this.nHeight;
this.xPanelNode.style = `top: 50%; left: 50%; width: ${this.nWidth}px; height: ${nHeight}px; margin-top: -${nHeight/2}px; margin-left: -${this.nWidth/2}px;`;
}
stickToLeft () {
let nHeight = (this.bFlexible) ? window.innerHeight-100 : this.nHeight;
this.xPanelNode.style = `top: 50%; left: -2px; width: ${this.nWidth}px; height: ${nHeight}px; margin-top: -${nHeight/2}px;`;
}
stickToRight () {
let nHeight = (this.bFlexible) ? window.innerHeight-100 : this.nHeight;
this.xPanelNode.style = `top: 50%; right: -2px; width: ${this.nWidth}px; height: ${nHeight}px; margin-top: -${nHeight/2}px;`;
}
stickToTop () {
let nWidth = (this.bFlexible) ? Math.floor(window.innerWidth/2) : this.nWidth;
let nHeight = (this.bFlexible) ? Math.floor(window.innerHeight*0.45) : this.nHeight;
this.xPanelNode.style = `top: -2px; left: 50%; width: ${nWidth}px; height: ${nHeight}px; margin-left: -${nWidth/2}px;`;
}
stickToBottom () {
let nWidth = (this.bFlexible) ? Math.floor(window.innerWidth/2) : this.nWidth;
let nHeight = (this.bFlexible) ? Math.floor(window.innerHeight*0.45) : this.nHeight;
this.xPanelNode.style = `bottom: -2px; left: 50%; width: ${nWidth}px; height: ${nHeight}px; margin-left: -${nWidth/2}px;`;
}
reduce () {
// todo
}
logInnerHTML () {
|