Grammalecte  Diff

Differences From Artifact [9dd9e3dd31]:

To Artifact [22569e6d7c]:


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
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







+








-






-








-
-
-
-
-
-
-


-
+
-










+
+
+
+
+
+
+







    constructor (sId, sTitle, nWidth, nHeight, bMovable=true) {
        this.sId = sId;
        this.sContentId = sId+"_content";
        this.nWidth = nWidth;
        this.nHeight = nHeight;
        this.bMovable = bMovable;
        this.xContentNode = createNode("div", {className: "grammalecte_panel_content"});
        this.xWaitIcon = this._createWaitIcon();
        this.xPanelNode = this._createPanel(sTitle);
        this.center();
    }

    _createPanel (sTitle) {
        try {
            let xPanel = createNode("div", {id: this.sId, className: "grammalecte_panel"});
            let xBar = createNode("div", {className: "grammalecte_panel_bar"});
            xBar.appendChild(this._createWaitIcon());
            xBar.appendChild(this._createButtons());
            let xTitle = createNode("div", {className: "grammalecte_panel_title"});
            xTitle.appendChild(createLogo());
            xTitle.appendChild(createNode("div", {className: "grammalecte_panel_label", textContent: sTitle}));
            xBar.appendChild(xTitle);
            xPanel.appendChild(xBar);
            //xPanel.appendChild(createNode("div", {className: "grammalecte_empty_space_under_title_bar"}));
            xPanel.appendChild(this.xContentNode);
            return xPanel;
        }
        catch (e) {
            showError(e);
        }
    }

    _createWaitIcon () {
        let xWaitIcon = createNode("div", {id: "grammalecte_wait_icon", className: "grammalecte_spinner"});
        xWaitIcon.appendChild(createNode("div", {id: "bounce1"}));
        xWaitIcon.appendChild(createNode("div", {id: "bounce2"}));
        return xWaitIcon;
    }

    _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._createCloseButton());
        return xButtonLine;
    }

    _createWaitIcon () {
        let xWaitIcon = createNode("div", {className: "grammalecte_spinner"});
        xWaitIcon.appendChild(createNode("div", {className: "bounce1"}));
        xWaitIcon.appendChild(createNode("div", {className: "bounce2"}));
        return xWaitIcon;
    }

    _createMoveButton (sAction, sLabel, sTitle) {
        let xButton = createNode("div", {className: "grammalecte_move_button", textContent: sLabel, title: sTitle});
        xButton.onclick = function () { this[sAction](); }.bind(this);
        return xButton;
    }

120
121
122
123
124
125
126
127

128
129
130
131

132
133
134
135
136
137
138
118
119
120
121
122
123
124

125
126
127
128

129
130
131
132
133
134
135
136







-
+



-
+








    logInnerHTML () {
        // for debugging
        console.log(this.xPanelNode.innerHTML);
    }
    
    startWaitIcon () {
        document.getElementById("grammalecte_waiticon").hidden = false;
        this.xWaitIcon.style.visibility = "visible";
    }

    stopWaitIcon () {
        document.getElementById("grammalecte_waiticon").hidden = true;
        this.xWaitIcon.style.visibility = "hidden";
    }
}


/*
    Common functions
*/