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
    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.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"});
        

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








    _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;
    }








>








<






<








<
<
<
<
<
<
<


|
<










>
>
>
>
>
>
>







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._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(this.xContentNode);
            return xPanel;
        }
        catch (e) {
            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._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

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

    stopWaitIcon () {
        document.getElementById("grammalecte_waiticon").hidden = true;
    }
}


/*
    Common functions
*/







|



|







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 () {
        this.xWaitIcon.style.visibility = "visible";
    }

    stopWaitIcon () {
        this.xWaitIcon.style.visibility = "hidden";
    }
}


/*
    Common functions
*/