Grammalecte  Check-in [e6ab950ba7]

Overview
Comment:[fx] WebExt: adjust text formatter height
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk | fx
Files: files | file ages | folders
SHA3-256: e6ab950ba76cb2cf926ce4b691dc7035593efb0777e6717e368a6f49045658b7
User & Date: olr on 2017-09-04 07:06:16
Other Links: manifest | tags
Context
2017-09-04
07:43
[fx] oops, revert error color experiment check-in: 166280e137 user: olr tags: trunk, fx
07:06
[fx] WebExt: adjust text formatter height check-in: e6ab950ba7 user: olr tags: trunk, fx
2017-09-03
09:12
[fx] WebExt: try to protect elements from CSS inheritance (grammar checker) check-in: ecd1e8587f user: olr tags: trunk, fx
Changes

Modified gc_lang/fr/webext/content_scripts/init.js from [65204e392b] to [79f4d2add2].

61
62
63
64
65
66
67

68
69
70
71
72
73
74
    },

    createTFPanel: function () {
        if (this.oTFPanel === null) {
            this.oTFPanel = new GrammalecteTextFormatter("grammalecte_tf_panel", "Formateur de texte", 800, 620, false);
            //this.oTFPanel.logInnerHTML();
            this.oTFPanel.insertIntoPage();

        }
    },

    createLxgPanel: function () {
        if (this.oLxgPanel === null) {
            this.oLxgPanel = new GrammalecteLexicographer("grammalecte_lxg_panel", "Lexicographe", 500, 700);
            this.oLxgPanel.insertIntoPage();







>







61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
    },

    createTFPanel: function () {
        if (this.oTFPanel === null) {
            this.oTFPanel = new GrammalecteTextFormatter("grammalecte_tf_panel", "Formateur de texte", 800, 620, false);
            //this.oTFPanel.logInnerHTML();
            this.oTFPanel.insertIntoPage();
            this.oTFPanel.adjustHeight();
        }
    },

    createLxgPanel: function () {
        if (this.oLxgPanel === null) {
            this.oLxgPanel = new GrammalecteLexicographer("grammalecte_lxg_panel", "Lexicographe", 500, 700);
            this.oLxgPanel.insertIntoPage();

Modified gc_lang/fr/webext/content_scripts/panel.js from [1ae3863a28] to [48d95d0550].

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
36
// 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.xPanelContent = 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(this._createLogo());
            xTitle.appendChild(createNode("div", {className: "grammalecte_panel_label", textContent: sTitle}));
            xBar.appendChild(xTitle);
            xPanel.appendChild(xBar);
            xPanel.appendChild(this.xPanelContent);
            return xPanel;
        }
        catch (e) {
            showError(e);
        }
    }













>


|






<
|



|
|







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
36
// 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 = createNode("div", {className: "grammalecte_panel_bar"});
        this.xPanelContent = createNode("div", {className: "grammalecte_panel_content"});
        this.xWaitIcon = this._createWaitIcon();
        this.xPanel = this._createPanel(sTitle);
        this.center();
    }

    _createPanel (sTitle) {
        try {
            let xPanel = createNode("div", {id: this.sId, className: "grammalecte_panel"});

            this.xPanelBar.appendChild(this._createButtons());
            let xTitle = createNode("div", {className: "grammalecte_panel_title"});
            xTitle.appendChild(this._createLogo());
            xTitle.appendChild(createNode("div", {className: "grammalecte_panel_label", textContent: sTitle}));
            this.xPanelBar.appendChild(xTitle);
            xPanel.appendChild(this.xPanelBar);
            xPanel.appendChild(this.xPanelContent);
            return xPanel;
        }
        catch (e) {
            showError(e);
        }
    }
78
79
80
81
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
120
121
122
123
124
125





126
127
128
129
130
131
132
133
134
135
136
    _createCloseButton () {
        let xButton = 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.xPanelNode);
    }

    show () {
        this.xPanelNode.style.display = "block";
    }

    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 () {
        // for debugging
        console.log(this.xPanelNode.innerHTML);
    }
    
    startWaitIcon () {
        this.xWaitIcon.style.visibility = "visible";
    }

    stopWaitIcon () {







|



|



|




|




|




|





|





|





>
>
>
>
>



|







78
79
80
81
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
    _createCloseButton () {
        let xButton = 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 () {
        this.xPanel.style.display = "none";
    }

    center () {
        let nHeight = (this.bFlexible) ? window.innerHeight-100 : this.nHeight;
        this.xPanel.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.xPanel.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.xPanel.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.xPanel.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.xPanel.style = `bottom: -2px; left: 50%; width: ${nWidth}px; height: ${nHeight}px; margin-left: -${nWidth/2}px;`;
    }

    reduce () {
        // todo
    }

    adjustHeight () {
        this.xPanelContent.style.height = this.xPanelContent.firstChild.offsetHeight + "px"; // xPanelContent has only one child
        this.xPanel.style.height = this.xPanelBar.offsetHeight + this.xPanelContent.offsetHeight + 10 + "px";
    }

    logInnerHTML () {
        // for debugging
        console.log(this.xPanel.innerHTML);
    }
    
    startWaitIcon () {
        this.xWaitIcon.style.visibility = "visible";
    }

    stopWaitIcon () {

Modified gc_lang/fr/webext/content_scripts/panel_gc.css from [d79690b59e] to [38e1456b07].

175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
*/
.grammalecte_error {
    cursor: pointer;
    border-radius: 2px;
    text-decoration: none;
    text-shadow: unset;
    /* default color */
    background-color: hsl(240, 10%, 50%);
    color: hsl(240, 0%, 96%);
}
.grammalecte_error:hover {
    background-color: hsl(240, 10%, 40%);
    color: hsl(240, 0%, 100%);
}








|







175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
*/
.grammalecte_error {
    cursor: pointer;
    border-radius: 2px;
    text-decoration: none;
    text-shadow: unset;
    /* default color */
    background-color: hsl(240, 10%, 90%);
    color: hsl(240, 0%, 96%);
}
.grammalecte_error:hover {
    background-color: hsl(240, 10%, 40%);
    color: hsl(240, 0%, 100%);
}

198
199
200
201
202
203
204

205
206
207
208
209
210
211
212
213
214
215
216
217
218
.grammalecte_error_ignored {
    background-color: hsla(30, 20%, 80%, 1);
}


/* elems */
.grammalecte_error_WORD {

    background-color: hsl(0, 50%, 50%);
    color: hsl(0, 0%, 96%);
    /*text-decoration: underline wavy hsl(0, 50%, 50%);*/
}
.grammalecte_error_WORD:hover {
    background-color: hsl(0, 60%, 40%);
    color: hsl(0, 0%, 100%);
}

/* elems */
.grammalecte_error_typo, 
.grammalecte_error_esp, 
.grammalecte_error_nbsp, 
.grammalecte_error_eif, 







>
|
|



|
|







198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
.grammalecte_error_ignored {
    background-color: hsla(30, 20%, 80%, 1);
}


/* elems */
.grammalecte_error_WORD {
    border-bottom: 2px solid hsl(0, 10%, 30%);
    background-color: hsl(0, 50%, 96%);
    color: hsl(0, 0%, 6%);
    /*text-decoration: underline wavy hsl(0, 50%, 50%);*/
}
.grammalecte_error_WORD:hover {
    background-color: hsl(0, 60%, 90%);
    color: hsl(0, 0%, 0%);
}

/* elems */
.grammalecte_error_typo, 
.grammalecte_error_esp, 
.grammalecte_error_nbsp, 
.grammalecte_error_eif,