Grammalecte  Check-in [98bc289244]

Overview
Comment:[fx] WebExt: better message box
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | fx | webext3
Files: files | file ages | folders
SHA3-256: 98bc28924482f60c2b7e921dcd5bc0256687b0e79b48cb1071110e8219e5af6d
User & Date: olr on 2017-10-18 10:59:47
Other Links: branch diff | manifest | tags
Context
2017-10-18
11:05
[fx] WebExt: new num version Closed-Leaf check-in: 5523059493 user: olr tags: fx, webext3
10:59
[fx] WebExt: better message box check-in: 98bc289244 user: olr tags: fx, webext3
07:58
[fx] modify node control for editable node check-in: f31e7e5092 user: olr tags: fx, webext3
Changes

Modified gc_lang/fr/webext/content_scripts/init.js from [f35577f091] to [ee010be85b].

125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
...
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
            this.oGCPanel = new GrammalecteGrammarChecker("grammalecte_gc_panel", "Grammalecte", 500, 700);
            this.oGCPanel.insertIntoPage();
        }
    },

    createMessageBox: function () {
        if (this.oMessageBox === null) {
            this.oMessageBox = new GrammalecteMessageBox("grammalecte_message_box", "Grammalecte", 400, 250);
            this.oMessageBox.insertIntoPage();
        }
    },

    startGCPanel: function (xNode=null) {
        this.createGCPanel();
        this.oGCPanel.clear();
................................................................................
        this.oTFPanel.start(xNode);
        this.oTFPanel.show();
    },

    showMessage: function (sMessage) {
        this.createMessageBox();
        this.oMessageBox.show();
        this.oMessageBox.addMessage(sMessage);
    },

    getPageText: function () {
        let sPageText = document.body.innerText;
        let nPos = sPageText.indexOf("__grammalecte_panel__");
        if (nPos >= 0) {
            sPageText = sPageText.slice(0, nPos);







|







 







|







125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
...
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
            this.oGCPanel = new GrammalecteGrammarChecker("grammalecte_gc_panel", "Grammalecte", 500, 700);
            this.oGCPanel.insertIntoPage();
        }
    },

    createMessageBox: function () {
        if (this.oMessageBox === null) {
            this.oMessageBox = new GrammalecteMessageBox("grammalecte_message_box", "Grammalecte");
            this.oMessageBox.insertIntoPage();
        }
    },

    startGCPanel: function (xNode=null) {
        this.createGCPanel();
        this.oGCPanel.clear();
................................................................................
        this.oTFPanel.start(xNode);
        this.oTFPanel.show();
    },

    showMessage: function (sMessage) {
        this.createMessageBox();
        this.oMessageBox.show();
        this.oMessageBox.setMessage(sMessage);
    },

    getPageText: function () {
        let sPageText = document.body.innerText;
        let nPos = sPageText.indexOf("__grammalecte_panel__");
        if (nPos >= 0) {
            sPageText = sPageText.slice(0, nPos);

Modified gc_lang/fr/webext/content_scripts/message_box.css from [d830cc07e2] to [5ca0392419].

1
2
3
4
5
6

7
8
9






10
11
12
13
14
15
16
17
18
19
20
21
22
..
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
/*
    CSS
    Message box for Grammalecte
*/

.grammalecte_message_box {

    padding: 0;
    margin: 0;
    position: fixed;






    box-sizing: content-box;
    z-index: 2147483641; /* maximum is 2147483647: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index */
    border: 2px solid hsl(210, 10%, 50%);
    border-radius: 10px 10px 10px 10px;
    background-color: hsl(210, 0%, 100%);
    color: hsl(0, 0%, 0%);
    font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
    box-shadow: 0 0 2px 1px hsla(210, 50%, 50%, .5);
    line-height: normal;
    text-shadow: none;
    text-decoration: none;
}
.grammalecte_message_box img {
................................................................................
    margin: 0;
    padding: 0;
}

.grammalecte_message_box_bar {
    position: sticky;
    width: 100%;
    background-color: hsl(210, 0%, 90%);
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid hsl(210, 10%, 80%);
    color: hsl(210, 10%, 4%);
    font-size: 20px;
}
.grammalecte_message_box_title {
    padding: 10px 20px;
}
.grammalecte_message_box_label {
    display: inline-block;
    padding: 0 10px;
}
.grammalecte_message_box_invisible_marker {
    position: absolute;
    /*visibility: hidden;*/
    font-size: 6px;
    color: hsl(210, 0%, 90%); /* same color than panel_bar background */
}

.grammalecte_message_box_content {
    position: absolute;
    min-width: 100%;
    height: calc(100% - 55px); /* panel height - title_bar */
    overflow: auto;
}

.grammalecte_message_box_message {
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    background-color: hsl(0, 50%, 40%);
    color: hsl(0, 50%, 96%);
    font-size: 20px;
}






>


<
>
>
>
>
>
>

|
|

|
|







 







|

|
|













|



<
<

<
<
<
<
<
|
<
<

|

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
..
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
/*
    CSS
    Message box for Grammalecte
*/

.grammalecte_message_box {
    position: fixed;
    padding: 0;
    margin: 0;

    top: 50%;
    left: 50%;
    width: 400px;
    margin-left: -200px;
    margin-left: -100px;
    min-height: 100px;
    box-sizing: content-box;
    z-index: 2147483647; /* maximum is 2147483647: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index */
    border: 2px solid hsl(210, 50%, 50%);
    border-radius: 10px 10px 10px 10px;
    background-color: hsl(210, 50%, 50%);
    color: hsl(0, 10%, 92%);
    font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
    box-shadow: 0 0 2px 1px hsla(210, 50%, 50%, .5);
    line-height: normal;
    text-shadow: none;
    text-decoration: none;
}
.grammalecte_message_box img {
................................................................................
    margin: 0;
    padding: 0;
}

.grammalecte_message_box_bar {
    position: sticky;
    width: 100%;
    background-color: hsl(210, 50%, 50%);
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid hsl(210, 50%, 47%);
    color: hsl(0, 10%, 92%);
    font-size: 20px;
}
.grammalecte_message_box_title {
    padding: 10px 20px;
}
.grammalecte_message_box_label {
    display: inline-block;
    padding: 0 10px;
}
.grammalecte_message_box_invisible_marker {
    position: absolute;
    /*visibility: hidden;*/
    font-size: 6px;
    color: hsl(210, 50%, 50%); /* same color than panel_bar background */
}

.grammalecte_message_box_content {


    height: calc(100% - 55px); /* panel height - title_bar */





    padding: 20px;


    color: hsl(0, 50%, 96%);
    font-size: 18px;
}

Modified gc_lang/fr/webext/content_scripts/message_box.js from [26ac188379] to [4f0ad33a4a].

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
..
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// Panel creator

"use strict";


class GrammalecteMessageBox {

    constructor (sId, sTitle, nWidth, nHeight) {
        this.sId = sId;
        this.nWidth = nWidth;
        this.nHeight = nHeight;
        this.xMessageBoxBar = oGrammalecte.createNode("div", {className: "grammalecte_message_box_bar"});
        this.xMessageBoxContent = oGrammalecte.createNode("div", {className: "grammalecte_message_box_content"});
        this.xMessageBox = this._createPanel(sTitle);
        this.center();
    }

    _createPanel (sTitle) {
        try {
            let xMessageBox = oGrammalecte.createNode("div", {id: this.sId, className: "grammalecte_message_box"});
            this.xMessageBoxBar.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_message_box_invisible_marker", textContent: "__grammalecte_panel__"}));
            this.xMessageBoxBar.appendChild(this._createButtons());
            let xTitle = oGrammalecte.createNode("div", {className: "grammalecte_panel_title"});
            xTitle.appendChild(this._createLogo());
            xTitle.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_message_box_label", textContent: sTitle}));
            this.xMessageBoxBar.appendChild(xTitle);
            xMessageBox.appendChild(this.xMessageBoxBar);

            xMessageBox.appendChild(this.xMessageBoxContent);
            return xMessageBox;
        }
        catch (e) {
            showError(e);
        }
    }
................................................................................
    }

    hide () {
        this.xMessageBox.style.display = "none";
        this.clear();
    }

    addMessage (sMessage) {
    	this.xMessageBoxContent.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_message_box_message", textContent: sMessage}));
    }

    clear () {
        while (this.xMessageBoxContent.firstChild) {
            this.xMessageBoxContent.removeChild(this.xMessageBoxContent.firstChild);
        }
    }

    center () {
        this.xMessageBox.style = `top: 50%; left: 50%; width: ${this.nWidth}px; height: ${this.nHeight}px; margin-top: -${this.nHeight/2}px; margin-left: -${this.nWidth/2}px;`;
    }
}







|

<
<



<












<







 







|
|



|
<
|
|
<
<
<
<
<
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
..
58
59
60
61
62
63
64
65
66
67
68
69
70

71
72





// Panel creator

"use strict";


class GrammalecteMessageBox {

    constructor (sId, sTitle) {
        this.sId = sId;


        this.xMessageBoxBar = oGrammalecte.createNode("div", {className: "grammalecte_message_box_bar"});
        this.xMessageBoxContent = oGrammalecte.createNode("div", {className: "grammalecte_message_box_content"});
        this.xMessageBox = this._createPanel(sTitle);

    }

    _createPanel (sTitle) {
        try {
            let xMessageBox = oGrammalecte.createNode("div", {id: this.sId, className: "grammalecte_message_box"});
            this.xMessageBoxBar.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_message_box_invisible_marker", textContent: "__grammalecte_panel__"}));
            this.xMessageBoxBar.appendChild(this._createButtons());
            let xTitle = oGrammalecte.createNode("div", {className: "grammalecte_panel_title"});
            xTitle.appendChild(this._createLogo());
            xTitle.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_message_box_label", textContent: sTitle}));
            this.xMessageBoxBar.appendChild(xTitle);
            xMessageBox.appendChild(this.xMessageBoxBar);

            xMessageBox.appendChild(this.xMessageBoxContent);
            return xMessageBox;
        }
        catch (e) {
            showError(e);
        }
    }
................................................................................
    }

    hide () {
        this.xMessageBox.style.display = "none";
        this.clear();
    }

    setMessage (sMessage) {
        this.xMessageBoxContent.textContent = sMessage;
    }

    clear () {
        this.xMessageBoxContent.textContent = "";

    }
}