Grammalecte  Check-in [933990893e]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:[fx] More elegant solution for adding styles
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | fx | shadowdom
Files: files | file ages | folders
SHA3-256:933990893e629c6973cfb2306fc93e347bea8fdb8e025439c0fc4978ea0c9f8d
User & Date: IllusionPerdu 2018-10-20 10:42:35
Context
2018-11-02
09:23
[fx] fix variables name check-in: a59c1fc4c3 user: olr tags: fx, shadowdom
2018-10-20
10:42
[fx] More elegant solution for adding styles check-in: 933990893e user: IllusionPerdu tags: fx, shadowdom
2018-10-19
23:18
[fx] Don't auto load CSS - Ajuste time for autoheigth check-in: b652ab4e9d user: IllusionPerdu tags: fx, shadowdom
Changes

Changes to gc_lang/fr/webext/content_scripts/init.js.

210
211
212
213
214
215
216






















217
218
219
220
221
222
223
            let xNode = document.createElement(sType);
            Object.assign(xNode, oAttr);
            if (oDataset) {
                Object.assign(xNode.dataset, oDataset);
            }
            return xNode;
        }






















        catch (e) {
            showError(e);
        }
    }
};









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







210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
            let xNode = document.createElement(sType);
            Object.assign(xNode, oAttr);
            if (oDataset) {
                Object.assign(xNode.dataset, oDataset);
            }
            return xNode;
        }
        catch (e) {
            showError(e);
        }
    },

    createStyle: function (sLinkCss, sLinkId=null, oAppend=null) {
        try {
            let xNode = document.createElement("link");
            Object.assign(xNode, {
                rel: "stylesheet",
                type: "text/css",
                media: "all",
                href: this.sExtensionUrl + sLinkCss
            });
            if (sLinkId) {
                Object.assign(xNode, {id: sLinkId});
            }
            if (oAppend) {
                oAppend.appendChild(xNode);
            }
            return xNode;
        }
        catch (e) {
            showError(e);
        }
    }
};


Changes to gc_lang/fr/webext/content_scripts/menu.js.

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
        }

        this.bShadow = document.body.createShadowRoot || document.body.attachShadow;
        if (this.bShadow){
            let nMarginTop = -1 * (parseInt(xStyle.marginBottom.replace('px', ''), 10));
            this.oShadowBtn = oGrammalecte.createNode("div", {style: "display:none;position:absolute;width:0;height:0;"});
            this.oShadowBtnNode = this.oShadowBtn.attachShadow({mode: "open"});
            this.oShadowBtnNode.appendChild(
                oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/menu.css"})
            );
            this.oShadowBtnNode.appendChild(this.xButton);
            this._insertAfter(this.oShadowBtn, xNodeInsertAfter, nMarginTop);

            this.oShadowMenu = oGrammalecte.createNode("div", {id: this.sMenuId+"_shadow", style: "display:none;position:absolute;width:0;height:0;"});
            this.oShadowMenuNode = this.oShadowMenu.attachShadow({mode: "open"});
            this.oShadowMenuNode.appendChild(
                oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/menu.css"})
            );
            this.oShadowMenuNode.appendChild(this.xMenu);
            this._insertAfter(this.oShadowMenu, xNodeInsertAfter, nMarginTop + 8);
        } else {
            let nMarginTop = -1 * (8 + parseInt(xStyle.marginBottom.replace('px', ''), 10));
            if (!document.getElementById("grammalecte_cssmenu")){
                document.head.appendChild(
                    oGrammalecte.createNode("link", {id: "grammalecte_cssmenu", rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/menu.css"})
                );
            }
            this._insertAfter(this.xButton, xNodeInsertAfter, nMarginTop);
            this._insertAfter(this.xMenu, xNodeInsertAfter, nMarginTop + 8);
        }
        this._createListeners();
    }








|
<
<





|
<
<





|
<
<







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
        }

        this.bShadow = document.body.createShadowRoot || document.body.attachShadow;
        if (this.bShadow){
            let nMarginTop = -1 * (parseInt(xStyle.marginBottom.replace('px', ''), 10));
            this.oShadowBtn = oGrammalecte.createNode("div", {style: "display:none;position:absolute;width:0;height:0;"});
            this.oShadowBtnNode = this.oShadowBtn.attachShadow({mode: "open"});
            oGrammalecte.createStyle("content_scripts/menu.css", null, this.oShadowBtnNode);


            this.oShadowBtnNode.appendChild(this.xButton);
            this._insertAfter(this.oShadowBtn, xNodeInsertAfter, nMarginTop);

            this.oShadowMenu = oGrammalecte.createNode("div", {id: this.sMenuId+"_shadow", style: "display:none;position:absolute;width:0;height:0;"});
            this.oShadowMenuNode = this.oShadowMenu.attachShadow({mode: "open"});
            oGrammalecte.createStyle("content_scripts/menu.css", null, this.oShadowMenuNode);


            this.oShadowMenuNode.appendChild(this.xMenu);
            this._insertAfter(this.oShadowMenu, xNodeInsertAfter, nMarginTop + 8);
        } else {
            let nMarginTop = -1 * (8 + parseInt(xStyle.marginBottom.replace('px', ''), 10));
            if (!document.getElementById("grammalecte_cssmenu")){
                oGrammalecte.createStyle("content_scripts/menu.css", "grammalecte_cssmenu", document.head);


            }
            this._insertAfter(this.xButton, xNodeInsertAfter, nMarginTop);
            this._insertAfter(this.xMenu, xNodeInsertAfter, nMarginTop + 8);
        }
        this._createListeners();
    }

Changes to gc_lang/fr/webext/content_scripts/message_box.js.

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
        let xButton = oGrammalecte.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 () {
        if (this.bShadow){
            this.oShadow.appendChild(
                oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/panel.css"})
            );
            this.oShadow.appendChild(
                oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/message_box.css"})
            );
            this.oShadow.appendChild(this.xMessageBox);
            document.body.appendChild(this.oShadowPanel);
        } else {
            if (!document.getElementById("grammalecte_cssmsg")){
                document.head.appendChild(
                    oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/panel.css"})
                );
                document.head.appendChild(
                    oGrammalecte.createNode("link", {id: "grammalecte_cssmsg", rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/message_box.css"})
                );
            }
            document.body.appendChild(this.xMessageBox);
        }
    }

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







|
|
<
<
<
<




|
|
<
<
<
<







61
62
63
64
65
66
67
68
69




70
71
72
73
74
75




76
77
78
79
80
81
82
        let xButton = oGrammalecte.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 () {
        if (this.bShadow){
            oGrammalecte.createStyle("content_scripts/panel.css", null, this.oShadow);
            oGrammalecte.createStyle("content_scripts/message_box.css", null, this.oShadow);




            this.oShadow.appendChild(this.xMessageBox);
            document.body.appendChild(this.oShadowPanel);
        } else {
            if (!document.getElementById("grammalecte_cssmsg")){
                oGrammalecte.createStyle("content_scripts/panel.css", null, document.head);
                oGrammalecte.createStyle("content_scripts/message_box.css", "grammalecte_cssmsg", document.head);




            }
            document.body.appendChild(this.xMessageBox);
        }
    }

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

Changes to gc_lang/fr/webext/content_scripts/panel.js.

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
        let xButton = oGrammalecte.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 () {
        if (this.bShadow){
            this.oShadow.appendChild(
                oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/panel.css"})
            );
            this.oShadow.appendChild(
                oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/panel_gc.css"})
            );
            this.oShadow.appendChild(
                oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/panel_lxg.css"})
            );
            this.oShadow.appendChild(
                oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/panel_tf.css"})
            );
            this.oShadow.appendChild(this.xPanel);
            document.body.appendChild(this.oShadowPanel);
        } else {
            if (!document.getElementById("grammalecte_csspanel")){
                document.head.appendChild(
                    oGrammalecte.createNode("link", {id: "grammalecte_csspanel", rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/panel.css"})
                );
                document.head.appendChild(
                    oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/panel_gc.css"})
                );
                document.head.appendChild(
                    oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/panel_lxg.css"})
                );
                document.head.appendChild(
                    oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/panel_tf.css"})
                );




            }
            document.body.appendChild(this.xPanel);
        }
    }

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







|
|
|
|
<
<
<
<
<
<
<
<




<
<
<
<
<
<
<
<
<
<
<
<
>
>
>
>







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
        let xButton = oGrammalecte.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 () {
        if (this.bShadow){
            oGrammalecte.createStyle("content_scripts/panel.css", null, this.oShadow);
            oGrammalecte.createStyle("content_scripts/panel_gc.css", null, this.oShadow);
            oGrammalecte.createStyle("content_scripts/panel_lxg.css", null, this.oShadow);
            oGrammalecte.createStyle("content_scripts/panel_tf.css", null, this.oShadow);








            this.oShadow.appendChild(this.xPanel);
            document.body.appendChild(this.oShadowPanel);
        } else {
            if (!document.getElementById("grammalecte_csspanel")){












                oGrammalecte.createStyle("content_scripts/panel.css", "grammalecte_csspanel", document.head);
                oGrammalecte.createStyle("content_scripts/panel_gc.css", null, document.head);
                oGrammalecte.createStyle("content_scripts/panel_lxg.css", null, document.head);
                oGrammalecte.createStyle("content_scripts/panel_tf.css", null, document.head);
            }
            document.body.appendChild(this.xPanel);
        }
    }

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