Grammalecte  Diff

Differences From Artifact [f6d10a216c]:

To Artifact [0c67b192c0]:


1
2
3
4
5
6
7
8
9
10
11

12
13
14
15
16

17
18
19
20
21
22
23
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) {
    constructor (sId, sTitle, nWidth, nHeight, bFlexible=true) {
        this.sId = sId;
        this.sContentId = sId+"_content";
        this.nWidth = nWidth;
        this.nHeight = nHeight;
        this.bMovable = bMovable;
        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
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);
        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"));
        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
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 = window.innerHeight-100;
        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 = window.innerHeight-100;
        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 = window.innerHeight-100;
        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 = 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;`;
        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 = 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;`;
        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 () {