Grammalecte  Check-in [c422898599]

Overview
Comment:Ajout de MutationObserver, ajout dans le css et isolation du xNode du menu (tester uniquement sur Chrome
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | fx | FixWebext
Files: files | file ages | folders
SHA3-256: c422898599c801f30e08f4e5114eca08aed2f51c94ac1530bcee3bac519fd158
User & Date: IllusionPerdu on 2017-10-28 00:16:10
Other Links: branch diff | manifest | tags
Context
2017-10-28
00:22
Revert changement de taille du bouton (est super petit sur certain site) check-in: d5e30a5b87 user: IllusionPerdu tags: fx, FixWebext
00:16
Ajout de MutationObserver, ajout dans le css et isolation du xNode du menu (tester uniquement sur Chrome check-in: c422898599 user: IllusionPerdu tags: fx, FixWebext
2017-10-27
20:41
[fx] use a debug profile for Firefox check-in: a6d823b2a6 user: olr tags: trunk, fx
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Modified gc_lang/fr/build.py from [e6bfac7235] to [b7f960ec85].

︙︙
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

        os.system("web-ext build")


def _createOptionsForWebExtension (dVars):
    sHTML = ""
    sLang = dVars['sDefaultUILang']
    for sSection, lOpt in dVars['lStructOpt']:
        sHTML += f'\n<div id="subsection_{sSection}" class="opt_subsection">\n  <h2 data-l10n-id="option_{sSection}">{dVars["dOptLabel"][sLang][sSection][0]}</h2>\n'
        for lLineOpt in lOpt:
            for sOpt in lLineOpt:
                sHTML += f'  <p><input type="checkbox" id="option_{sOpt}" class="gc_option" data-option="{sOpt}"/><label id="option_label_{sOpt}" for="option_{sOpt}" data-l10n-id="option_{sOpt}">{dVars["dOptLabel"][sLang][sOpt][0]}</label></p>\n'
        sHTML += '</div>\n'
    return sHTML


def createFirefoxExtension (sLang, dVars):
    "create extension for Firefox"
    print("Building extension for Firefox")








|


|








26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

        os.system("web-ext build")


def _createOptionsForWebExtension (dVars):
    sHTML = ""
    sLang = dVars['sDefaultUILang']
    for sSection, lOpt in dVars['lStructOpt']:
        sHTML += '\n<div id="subsection_{sSection}" class="opt_subsection">\n  <h2 data-l10n-id="option_{sSection}">{dVars["dOptLabel"][sLang][sSection][0]}</h2>\n'
        for lLineOpt in lOpt:
            for sOpt in lLineOpt:
                sHTML += '  <p><input type="checkbox" id="option_{sOpt}" class="gc_option" data-option="{sOpt}"/><label id="option_label_{sOpt}" for="option_{sOpt}" data-l10n-id="option_{sOpt}">{dVars["dOptLabel"][sLang][sOpt][0]}</label></p>\n'
        sHTML += '</div>\n'
    return sHTML


def createFirefoxExtension (sLang, dVars):
    "create extension for Firefox"
    print("Building extension for Firefox")
︙︙

Modified gc_lang/fr/webext/content_scripts/init.js from [08d2b10057] to [b8d0b75897].

︙︙
294
295
296
297
298
299
300




























/*
    Start
*/
oGrammalecte.listenRightClick();
oGrammalecte.createMenus();

































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325



/*
    Start
*/
oGrammalecte.listenRightClick();
oGrammalecte.createMenus();

/*
    When a textarea is added via jascript we add the menu :)
*/
let observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        for(let i = 0; i < mutation.addedNodes.length; i++){
            if ( mutation.addedNodes[i].getElementsByTagName ){
                if ( mutation.addedNodes[i].tagName == "TEXTAREA" ) {
                    oGrammalecte.lMenu.push(new GrammalecteMenu(oGrammalecte.nMenu, mutation.addedNodes[i]));
                    oGrammalecte.nMenu += 1;
                } else {
                    for (let xNode of mutation.addedNodes[i].getElementsByTagName("textarea")) {
                        oGrammalecte.lMenu.push(new GrammalecteMenu(oGrammalecte.nMenu, xNode));
                        oGrammalecte.nMenu += 1;
                    }
                }
            }
        }
    });
});
observer.observe(document.body, {
    childList: true,
    subtree: true
});

Modified gc_lang/fr/webext/content_scripts/menu.css from [2b784470a7] to [bf1c920fc1]. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/*
    CSS
    Button and menu for Grammalecte
*/

/*
    Button
*/
.grammalecte_menu_main_button {
    position: absolute;
    display: none;
    margin: -8px 0 0 -8px;
    width: 8px;
    height: 8px;
    background-color: hsla(210, 80%, 80%, .5);
    border: 4px solid hsla(210, 80%, 60%, .5);
    border-top: 4px solid hsla(210, 100%, 40%, .7);
    border-bottom: 4px solid hsla(210, 100%, 40%, .7);
    border-radius: 50%;
    text-align: center;
    cursor: pointer;













|
|








1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/*
    CSS
    Button and menu for Grammalecte
*/

/*
    Button
*/
.grammalecte_menu_main_button {
    position: absolute;
    display: none;
    margin: -8px 0 0 -8px;
    width: 16px;
    height: 16px;
    background-color: hsla(210, 80%, 80%, .5);
    border: 4px solid hsla(210, 80%, 60%, .5);
    border-top: 4px solid hsla(210, 100%, 40%, .7);
    border-bottom: 4px solid hsla(210, 100%, 40%, .7);
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
︙︙
59
60
61
62
63
64
65


66
67
68
69
70
71
72
73
74
75
76
77

78
79
80
81
82
83
84

    margin-left: -10px;
    border-radius: 5px;
    border: 3px solid hsl(210, 50%, 30%);
    box-shadow: 0px 0px 2px hsla(210, 10%, 10%, .5);
    background-color: hsl(210, 50%, 30%);
    font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
    z-index: 2147483640; /* maximum is 2147483647: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index */


}

.grammalecte_menu_close_button {
    float: right;
    margin: 2px 2px 0 0;
    padding: 1px 5px;
    border-radius: 2px;
    background-color: hsl(0, 50%, 50%);
    color: hsl(0, 20%, 90%);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;

}
.grammalecte_menu_close_button:hover {
    background-color: hsl(0, 60%, 50%);
    color: hsl(0, 30%, 96%);
}

.grammalecte_menu_item {








>
>












>








59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

    margin-left: -10px;
    border-radius: 5px;
    border: 3px solid hsl(210, 50%, 30%);
    box-shadow: 0px 0px 2px hsla(210, 10%, 10%, .5);
    background-color: hsl(210, 50%, 30%);
    font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
    z-index: 2147483640; /* maximum is 2147483647: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index */
    text-align: left;
    line-height: 21px;
}

.grammalecte_menu_close_button {
    float: right;
    margin: 2px 2px 0 0;
    padding: 1px 5px;
    border-radius: 2px;
    background-color: hsl(0, 50%, 50%);
    color: hsl(0, 20%, 90%);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    height: 20px;
}
.grammalecte_menu_close_button:hover {
    background-color: hsl(0, 60%, 50%);
    color: hsl(0, 30%, 96%);
}

.grammalecte_menu_item {
︙︙

Modified gc_lang/fr/webext/content_scripts/menu.js from [2428c12fef] to [5464f752b2]. 

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
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
70
71
72
73
74
75
76
77
78
79

// JavaScript

"use strict";


class GrammalecteMenu {

    constructor (nMenu, xNode) {

        this.sMenuId = "grammalecte_menu" + nMenu;
        this.xButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_main_button", textContent: " "});
        this.xButton.onclick = () => { this.switchMenu(); };
        this.xButton.style.zIndex = (xNode.style.zIndex.search(/^[0-9]+$/) !== -1) ? (parseInt(xNode.style.zIndex) + 1).toString() : xNode.style.zIndex;
        this.xMenu = this._createMenu(xNode);




        this._insertAfter(this.xButton, xNode);


        this._insertAfter(this.xMenu, xNode);


        this._createListenersOnReferenceNode(xNode);
    }

    _insertAfter (xNewNode, xReferenceNode) {
        xReferenceNode.parentNode.insertBefore(xNewNode, xReferenceNode.nextSibling);
    }

    _createListenersOnReferenceNode (xNode) {
        xNode.addEventListener('focus', (e) => {
            this.xButton.style.display = "block";
        });
        xNode.addEventListener('blur', (e) => {
            window.setTimeout(() => {this.xButton.style.display = "none";}, 300);
        });
    }





    _createMenu (xNode) {
        try {
            let xMenu = oGrammalecte.createNode("div", {id: this.sMenuId, className: "grammalecte_menu"});
            let xCloseButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_close_button", textContent: "×"} );
            xCloseButton.onclick = () => { this.switchMenu(); }
            xMenu.appendChild(xCloseButton);
            xMenu.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_menu_header", textContent: "GRAMMALECTE"}));
            // Text formatter
            if (xNode.tagName == "TEXTAREA") {
                let xTFButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_item", textContent: "Formateur de texte"});
                xTFButton.onclick = () => {
                    this.switchMenu();
                    oGrammalecte.createTFPanel();
                    oGrammalecte.oTFPanel.start(xNode);
                    oGrammalecte.oTFPanel.show();
                };
                xMenu.appendChild(xTFButton);
            }
            // lexicographe
            let xLxgButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_item", textContent: "Lexicographe"});
            xLxgButton.onclick = () => {
                this.switchMenu();
                let sText = (xNode.tagName == "TEXTAREA") ? xNode.value : xNode.innerText;
                oGrammalecte.startLxgPanel();
                xGrammalectePort.postMessage({
                    sCommand: "getListOfTokens",
                    dParam: {sText: sText},
                    dInfo: {sTextAreaId: xNode.id}
                });
            };
            xMenu.appendChild(xLxgButton);
            // Grammar checker
            let xGCButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_item", textContent: "Correction grammaticale"});
            xGCButton.onclick = () => {
                this.switchMenu();
                let sText = (xNode.tagName == "TEXTAREA") ? xNode.value : xNode.innerText;
                oGrammalecte.startGCPanel(xNode);
                xGrammalectePort.postMessage({
                    sCommand: "parseAndSpellcheck",
                    dParam: {sText: sText, sCountry: "FR", bDebug: false, bContext: false},
                    dInfo: {sTextAreaId: xNode.id}
                });
            };
            xMenu.appendChild(xGCButton);
            // Conjugation tool
            let xConjButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_item_block", textContent: "Conjugueur"});
            let xConjButtonTab = oGrammalecte.createNode("div", {className: "grammalecte_menu_button", textContent: "Onglet"});
            xConjButtonTab.onclick = () => {









>




|
>
>
>
>
|
>
>
|
>
>
|


|
|


|
|


|




>
>
>
>
|







|




|








<



|
|







<
|


|
|








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
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
70
71
72
73
74
75
76
77
78

79
80
81
82
83
84
85
86
87
88
89
90

// JavaScript

"use strict";


class GrammalecteMenu {

    constructor (nMenu, xNode) {
        this.xNode = xNode;
        this.sMenuId = "grammalecte_menu" + nMenu;
        this.xButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_main_button", textContent: " "});
        this.xButton.onclick = () => { this.switchMenu(); };
        this.xButton.style.zIndex = (xNode.style.zIndex.search(/^[0-9]+$/) !== -1) ? (parseInt(xNode.style.zIndex) + 1).toString() : xNode.style.zIndex;
        this.xMenu = this._createMenu();

        let style = window.getComputedStyle(this.xNode);
        this.topMargin = -1 * (8 + parseInt(style.marginBottom.replace('px', ''), 10));

        this._insertAfter(this.xButton);
        this.xButton.style.marginTop = this.topMargin + 'px';

        this._insertAfter(this.xMenu);
        this.xMenu.style.marginTop = (this.topMargin + 8) + 'px';

        this._createListenersOnReferenceNode();
    }

    _insertAfter (xNewNode) {
        this.xNode.parentNode.insertBefore(xNewNode, this.xNode.nextSibling);
    }

    _createListenersOnReferenceNode () {
        this.xNode.addEventListener('focus', (e) => {
            this.xButton.style.display = "block";
        });
        this.xNode.addEventListener('blur', (e) => {
            window.setTimeout(() => {this.xButton.style.display = "none";}, 300);
        });
    }

    _getText () {
        return (this.xNode.tagName == "TEXTAREA") ? this.xNode.value : this.xNode.innerText;
    }

    _createMenu () {
        try {
            let xMenu = oGrammalecte.createNode("div", {id: this.sMenuId, className: "grammalecte_menu"});
            let xCloseButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_close_button", textContent: "×"} );
            xCloseButton.onclick = () => { this.switchMenu(); }
            xMenu.appendChild(xCloseButton);
            xMenu.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_menu_header", textContent: "GRAMMALECTE"}));
            // Text formatter
            if (this.xNode.tagName == "TEXTAREA") {
                let xTFButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_item", textContent: "Formateur de texte"});
                xTFButton.onclick = () => {
                    this.switchMenu();
                    oGrammalecte.createTFPanel();
                    oGrammalecte.oTFPanel.start(this.xNode);
                    oGrammalecte.oTFPanel.show();
                };
                xMenu.appendChild(xTFButton);
            }
            // lexicographe
            let xLxgButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_item", textContent: "Lexicographe"});
            xLxgButton.onclick = () => {
                this.switchMenu();

                oGrammalecte.startLxgPanel();
                xGrammalectePort.postMessage({
                    sCommand: "getListOfTokens",
                    dParam: {sText: this._getText()},
                    dInfo: {sTextAreaId: this.xNode.id}
                });
            };
            xMenu.appendChild(xLxgButton);
            // Grammar checker
            let xGCButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_item", textContent: "Correction grammaticale"});
            xGCButton.onclick = () => {
                this.switchMenu();

                oGrammalecte.startGCPanel(this.xNode);
                xGrammalectePort.postMessage({
                    sCommand: "parseAndSpellcheck",
                    dParam: {sText: this._getText(), sCountry: "FR", bDebug: false, bContext: false},
                    dInfo: {sTextAreaId: this.xNode.id}
                });
            };
            xMenu.appendChild(xGCButton);
            // Conjugation tool
            let xConjButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_item_block", textContent: "Conjugueur"});
            let xConjButtonTab = oGrammalecte.createNode("div", {className: "grammalecte_menu_button", textContent: "Onglet"});
            xConjButtonTab.onclick = () => {
︙︙

Fossil 2.20 [210e89a059] 2022-11-16 18:46:32
This page was generated in about 0.006s