Grammalecte  Check-in [38e8cfe68d]

Overview
Comment:[fx] WebExt: ui options for buttons/menus inserted into pages
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | fx | webext3
Files: files | file ages | folders
SHA3-256: 38e8cfe68d2c944c5d2b655c652ecd2e9259aea2217abda9827a59df38125a37
User & Date: olr on 2017-10-17 14:56:50
Other Links: branch diff | manifest | tags
Context
2017-10-17
19:01
[fx] WebExt: update context menu picture check-in: 4b8ba24195 user: olr tags: fx, webext3
14:56
[fx] WebExt: ui options for buttons/menus inserted into pages check-in: 38e8cfe68d user: olr tags: fx, webext3
2017-10-16
20:40
[fx] WebExt: use “this” check-in: 114adc8ee9 user: olr tags: fx, webext3
Changes
Hide Diffs Side-by-Side Diffs Ignore Whitespace Patch

Modified gc_lang/fr/webext/background.js from [bec0f2d48c] to [f6d1815bfa].

︙
67
68
69
70
71
72
73









74
75
76
77
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

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








+
+
+
+
+
+
+
+
+













+


-
+
-
-
-
-
+
-
-
-
-
-
-
-








                console.log(e.data);
        }
    }
    catch (e) {
        showError(e);
    }
};

function initUIOptions (dSavedOptions) {
    if (!dSavedOptions.hasOwnProperty("ui_options")) {
        browser.storage.local.set({"ui_options": {
            textarea: true,
            editablenode: false
        }});
    }
}

function initGrammarChecker (dSavedOptions) {
    let dOptions = (dSavedOptions.hasOwnProperty("gc_options")) ? dSavedOptions.gc_options : null;
    xGCEWorker.postMessage({
        sCommand: "init",
        dParam: {sExtensionPath: browser.extension.getURL(""), dOptions: dOptions, sContext: "Firefox"},
        dInfo: {}
    });
}

function init () {
    if (bChrome) {
        browser.storage.local.get("gc_options", initGrammarChecker);
        browser.storage.local.get("ui_options", initUIOptions);
        return;
    }
    let xPromise = browser.storage.local.get("gc_options");
    browser.storage.local.get("gc_options").then(initGrammarChecker, showError);
    xPromise.then(
        initGrammarChecker,
        function (e) {
            showError(e);
    browser.storage.local.get("ui_options").then(initUIOptions, showError);
            xGCEWorker.postMessage({
                sCommand: "init",
                dParam: {sExtensionPath: browser.extension.getURL("."), dOptions: null, sContext: "Firefox"},
                dInfo: {}
            });
        }
    );
}

init();


/*
    Ports from content-scripts
︙

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

︙
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
91
92
93
94
95
96
97
98
99
100
101
102

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104

105
106
107
108
109
110
111








+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
+
-
-
-
-
-
+
+
+
+
+
+













-








    },

    clearRightClickedNode: function () {
        this.xRightClickedNode = null;
    },

    createMenus: function () {
        if (bChrome) {
            browser.storage.local.get("ui_options", this._createMenus.bind(this));
            return;
        }
        browser.storage.local.get("ui_options").then(this._createMenus.bind(this), showError);
    },
        let lNode = document.getElementsByTagName("textarea");
        for (let xNode of lNode) {
            if (xNode.style.display !== "none" && xNode.style.visibility !== "hidden") {
                this.lMenu.push(new GrammalecteMenu(this.nMenu, xNode));
                this.nMenu += 1;
            }
        }

    _createMenus: function (dOptions) {
        if (dOptions.hasOwnProperty("ui_options")) {
            dOptions = dOptions.ui_options;
            if (dOptions.textarea) {
                for (let xNode of document.getElementsByTagName("textarea")) {
                    if (xNode.style.display !== "none" && xNode.style.visibility !== "hidden") {
                        this.lMenu.push(new GrammalecteMenu(this.nMenu, xNode));
                        this.nMenu += 1;
                    }
                }
    },

            }
    createMenus2 () {
        let lNode = document.querySelectorAll("[contenteditable]");
        for (let xNode of lNode) {
            this.lMenu.push(new GrammalecteMenu(this.nMenu, xNode));
            this.nMenu += 1;
            if (dOptions.editablenode) {
                for (let xNode of document.querySelectorAll("[contenteditable]")) {
                    this.lMenu.push(new GrammalecteMenu(this.nMenu, xNode));
                    this.nMenu += 1;
                }
            }
        }
    },

    rescanPage: function () {
        if (this.oTFPanel !== null) { this.oTFPanel.hide(); }
        if (this.oLxgPanel !== null) { this.oLxgPanel.hide(); }
        if (this.oGCPanel !== null) { this.oGCPanel.hide(); }
        for (let oMenu of this.lMenu) {
            oMenu.deleteNodes();
        }
        this.lMenu.length = 0; // to clear an array
        this.listenRightClick();
        this.createMenus();
        this.createMenus2();
    },

    createTFPanel: function () {
        if (this.oTFPanel === null) {
            this.oTFPanel = new GrammalecteTextFormatter("grammalecte_tf_panel", "Formateur de texte", 760, 600, false);
            //this.oTFPanel.logInnerHTML();
            this.oTFPanel.insertIntoPage();
︙
285
286
287
288
289
290
291
292

294
295
296
297
298
299
300









-



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

Modified gc_lang/fr/webext/panel/main.css from [4ea20bf8f5] to [f3d95db8cd].

︙
151
152
153
154
155
156
157
158

159
160
161
162


163
164
165
166

167
168
169
170
171

172
173
174
175
176
177
178

151
152
153
154
155
156
157

158
159
160
161

162
163
164
165
166

167
168
169
170
171

172
173
174
175
176
177
178
179








-
+



-
+
+



-
+




-
+








    border-top: 1px solid hsl(210, 20%, 88%);
    font-size: 14px;
}

/*
    Help
*/
#help_page {
#ui_options_page {
    display: none;
    padding: 20px;
}
#help_page h2 {
#ui_options_page h2 {
    margin-top: 10px;
    font: bold 20px 'Yanone Kaffeesatz', "Oswald", "Liberation Sans Narrow", sans-serif;
    color: hsl(210, 50%, 50%);
}
#help_page .shortcut {
#ui_options_page .shortcut {
    margin-top: 10px;
    font-weight: bold;
    font-size: 13px;
}
#help_page .shortcut_label {
#ui_options_page .shortcut_label {
    margin-left: 30px;
}

/*
    Grammar checking options
*/
#gc_options_page {
︙
228
229
230
231
232
233
234





235

236
237
238
239
240
241

242
243
244
245
246
247

248
249
250
251
252
253
254

229
230
231
232
233
234
235
236
237
238
239
240

241
242
243
244
245
246

247
248
249
250
251
252

253
254
255
256
257
258
259
260








+
+
+
+
+
-
+





-
+





-
+








#dictionaries_info {
    margin: 10px 0;
    padding: 10px;
    border-radius: 3px;
    background-color: hsl(0, 50%, 40%);
    color: hsl(0, 10%, 96%);
}


/*
    Options
*/
.dict_section {
.option_section {
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    background-color: hsl(210, 20%, 96%);
}
.dict_section label {
.option_section label {
    font-size: 16px;
    line-height: 20px;
    color: hsl(210, 20%, 50%);
    font-weight: bold;
}
.dict_description {
.option_description {
    padding: 0 0 0 20px;
    color: hsl(0, 0%, 0%);
    font-size: 12px;
}


/*
︙

Modified gc_lang/fr/webext/panel/main.html from [fa3b6b6a69] to [c86119170f].

︙
13
14
15
16
17
18
19
20

21
22
23
24
25
26
27

13
14
15
16
17
18
19

20
21
22
23
24
25
26
27








-
+








      <header id="menu">
        <nav>
          <header id="logo">
            <img src="../img/logo-32.png">
          </header>
          <ul>
            <li class="select" data-page="home_page"><i class="select fa fa-star icon" data-page="home_page"></i></li>
            <li class="select" data-page="help_page"><i class="select fa fa-cube icon" data-page="help_page"></i></li>
            <li class="select" data-page="ui_options_page"><i class="select fa fa-cube icon" data-page="ui_options_page"></i></li>
            <li class="select" data-page="gc_options_page"><i class="select fa fa-cog icon" data-page="gc_options_page"></i></li>
            <li class="select" data-page="sc_options_page"><i class="select fa fa-book icon" data-page="sc_options_page"></i></li>
            <li class="select" data-page="test_page"><i class="select fa fa-flask icon" data-page="test_page"></i></li>
          </ul>
        </nav>
      </header> <!-- #menu -->
︙
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
91

92
93

94
95

96
97
98
99
100
101
102

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
91

92
93

94
95

96
97

98
99

100
101

102
103

104
105
106
107
108
109
110
111








-
+

-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+













-
+

-
+

-
+

-
+

-
+

-
+

-
+

-
+








            <p class="center"><img id="link_sponsor2" class="link border" src="../img/Algoo_logo.png" alt="Algoo" data-url="https://www.algoo.fr/?from=grammalecte-fx" /></p>
            <p id="link_othersponsors" class="link center" data-url="http://grammalecte.net/?thanks">
              et tous ceux qui l’ont soutenu
            </p>
          </div>
        </section> <!-- #home_page -->

        <section id="help_page" class="page">
        <section id="ui_options_page" class="page">
          <h1>INTERFACE</h1>
          <div id="help_section">
            <p>Grammalecte affiche un bouton d’accès au menu en bas à gauche des zones de texte usuelles pour accéder aux fonctionnalités existantes.</p>
            <p class="right"><img src="../img/menu_button1.png" title="bouton du menu" /></p>
            <p class="right"><img src="../img/menu_button2.png" title="menu" /></p>
            <p>Pour les autres zones de texte (HTML éditable), il faut sélectionner le texte et utiliser le menu contextuel.</p>
            <p class="right"><img src="../img/contextmenu.png" title="menu contextuel sur sélection" /></p>
            <h2>Raccourcis clavier</h2>
            <p class="shortcut">CTRL+MAJ+6</p>
            <p class="shortcut_label">Conjugueur (dans un onglet)</p>
            <p class="shortcut">CTRL+MAJ+7</p>
            <p class="shortcut_label">Conjugueur (dans une fenêtre)</p>
          <h2>Menu contextuel</h2>
          <p>Les commandes permettant de lancer Grammalecte sont trouvables via le menu contextuel.</p>
          <p class="right"><img src="../img/contextmenu.png" title="menu contextuel sur sélection" /></p>
          <h2>Boutons d’accès</h2>
          <p>Grammalecte peut aussi afficher un bouton d’accès au menu en bas à gauche des zones de texte pour accéder aux fonctionnalités existantes.</p>
          <p class="right"><img src="../img/menu_button1.png" title="bouton du menu" /></p>
          <p class="right"><img src="../img/menu_button2.png" title="menu" /></p>
          <p>Vous pouvez activer ou désactiver l’affichage de ces boutons sur les zones de texte. Il existe deux types de zones de texte.</p>
          <div class="option_section" id="ui_option_textarea_box">
              <p><input type="checkbox" id="ui_option_textarea" /> <label for="ui_option_textarea">“Textareas”</label></p>
              <p class="option_description">Ces zones de texte sont les champs de formulaire usuels pour saisir du texte. Ils ne permettent que la saisie de texte brut, sans fioritures.</p>
          </div>
          <div class="option_section" id="ui_option_editablenode_box">
              <p><input type="checkbox" id="ui_option_editablenode" /> <label for="ui_option_editablenode">“Nodes” éditables</label></p>
              <p class="option_description">Ces zones de texte sont des sections de page web éditables. Il est fréquent que ces zones de texte apparaissent comme des “textareas” standard. Il est aussi fréquent que ces zones de texte soient couplées avec toutes sortes de logiciels (de simples scripts d’aide à la mise en page ou des applications complexes). Ces zones de texte permettent l’affichage de texte enrichi (italique, gras, hyperlien, images, etc.). Il est assez fréquent que des “textareas” invisibles se cachent derrière ces “nodes” éditables.</p>
          </div>
          <h2>Raccourcis clavier</h2>
          <p class="shortcut">CTRL+MAJ+6</p>
          <p class="shortcut_label">Conjugueur (dans un onglet)</p>
          <p class="shortcut">CTRL+MAJ+7</p>
          <p class="shortcut_label">Conjugueur (dans une fenêtre)</p>
          </div>
        </section> <!-- #help_page -->
        </section> <!-- #ui_options_page -->

        <section id="gc_options_page" class="page">
          <h1>OPTIONS GRAMMATICALES</h1>
          <div id="grammar_options">
            ${webextOptionsHTML}
          </div>
          <div id="default_options_button" class="button blue center">Options par défaut</div>
        </section> <!-- #gc_options_page -->

        <section id="sc_options_page" class="page" style="opacity: .25">
          <h1>OPTIONS ORTHOGRAPHIQUES</h1>
          <div id="spelling_options">
            <p id="dictionaries_info" data-l10n-id="dictionaries_info">Section inactive. Le nouveau système d’extension de Firefox (WebExtension) ne propose pas encore d’interface de programmation pour le correcteur orthographique.</p>
            <div class="dict_section" id="fr-FR-modern_box">
            <div class="option_section" id="fr-FR-modern_box">
                <p><input type="checkbox" id="fr-FR-modern" /> <label for="fr-FR-modern">“Moderne”</label></p>
                <p class="dict_description">Ce dictionnaire propose l’orthographe telle qu’elle est écrite aujourd’hui le plus couramment. C’est le dictionnaire recommandé si le français n’est pas votre langue maternelle ou si vous ne désirez qu’une seule graphie correcte par mot.</p>
                <p class="option_description">Ce dictionnaire propose l’orthographe telle qu’elle est écrite aujourd’hui le plus couramment. C’est le dictionnaire recommandé si le français n’est pas votre langue maternelle ou si vous ne désirez qu’une seule graphie correcte par mot.</p>
            </div>
            <div class="dict_section" id="fr-FR-classic_box">
            <div class="option_section" id="fr-FR-classic_box">
                <p><input type="checkbox" id="fr-FR-classic" /> <label for="fr-FR-classic">“Classique” (recommandé)</label></p>
                <p class="dict_description">Il s’agit du dictionnaire “Moderne”, avec des graphies classiques en sus, certaines encore communément utilisées, d’autres désuètes. C’est le dictionnaire recommandé si le français est votre langue maternelle.</p>
                <p class="option_description">Il s’agit du dictionnaire “Moderne”, avec des graphies classiques en sus, certaines encore communément utilisées, d’autres désuètes. C’est le dictionnaire recommandé si le français est votre langue maternelle.</p>
            </div>
            <div class="dict_section" id="fr-FR-reform_box">
            <div class="option_section" id="fr-FR-reform_box">
                <p><input type="checkbox" id="fr-FR-reform" /> <label for="fr-FR-reform">“Réforme 1990”</label></p>
                <p class="dict_description">Avec ce dictionnaire, seule l’orthographe réformée est reconnue. Attendu que bon nombre de graphies réformées sont considérées comme erronées par beaucoup, ce dictionnaire est déconseillé. Les graphies passées dans l’usage sont déjà incluses dans le dictionnaire “Moderne”.</p>
                <p class="option_description">Avec ce dictionnaire, seule l’orthographe réformée est reconnue. Attendu que bon nombre de graphies réformées sont considérées comme erronées par beaucoup, ce dictionnaire est déconseillé. Les graphies passées dans l’usage sont déjà incluses dans le dictionnaire “Moderne”.</p>
            </div>
            <div class="dict_section" id="fr-FR-classic-reform_box">
            <div class="option_section" id="fr-FR-classic-reform_box">
                <p><input type="checkbox" id="fr-FR-classic-reform" /> <label for="fr-FR-classic-reform">“Toutes variantes”</label></p>
                <p class="dict_description">Ce dictionnaire contient les variantes graphiques, classiques, réformées, ainsi que d’autres plus rares encore. Ce dictionnaire est déconseillé à ceux qui ne connaissent pas très bien la langue française.</p>
                <p class="option_description">Ce dictionnaire contient les variantes graphiques, classiques, réformées, ainsi que d’autres plus rares encore. Ce dictionnaire est déconseillé à ceux qui ne connaissent pas très bien la langue française.</p>
            </div>
          </div>
        </section> <!-- #sc_options_page -->

        <section id="test_page" class="page">
          <div id="test_cmd">
            <h1>ZONE DE TEST</h1>
︙

Modified gc_lang/fr/webext/panel/main.js from [4bafd8a9dd] to [499d5a46ec].

︙
48
49
50
51
52
53
54



55
56
57
58
59
60
61

48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64








+
+
+








            }
            else if (xElem.id.startsWith("option_")) {
                browser.runtime.sendMessage({
                    sCommand: "setOption",
                    dParam: {sOptName: xElem.dataset.option, bValue: xElem.checked},
                    dInfo: {}
                });
            }
            else if (xElem.id.startsWith("ui_option_")) {
                storeUIOptions();
            }
            else if (xElem.id.startsWith("link_")) {
                browser.tabs.create({url: xElem.dataset.url});
            }
        } else if (xElem.className.startsWith("select")) {
            showPage(xElem.dataset.page);
        }/* else if (xElem.tagName === "A") {
︙
119
120
121
122
123
124
125



126
127
128
129
130
131
132
133
134
135
136
137





































138
139
140
141
142
143
144

122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187








+
+
+












+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+








            xNodePage.style.display = "none";
        }
        // show the selected one
        document.getElementById(sPageName).style.display = "block";
        if (sPageName == "gc_options_page") {
            setGCOptionsFromStorage();
        }
        else if (sPageName == "ui_options_page") {
            setUIOptionsFromStorage();
        }
    }
    catch (e) {
        showError(e);
    }
}


function showTestResult (sText) {
    document.getElementById("tests_result").textContent = sText;
}


/*
    UI options
*/

function setUIOptionsFromStorage () {
    if (bChrome) {
        browser.storage.local.get("ui_options", setUIOptions);
        return;
    }
    let xPromise = browser.storage.local.get("ui_options");
    xPromise.then(setUIOptions, showError);
}

function setUIOptions (dOptions) {
    if (!dOptions.hasOwnProperty("ui_options")) {
        console.log("no ui options found");
        return;
    }
    dOptions = dOptions.ui_options;
    for (let sOpt in dOptions) {
        if (document.getElementById("ui_option_"+sOpt)) {
            document.getElementById("ui_option_"+sOpt).checked = dOptions[sOpt];
        }
    }
}

function storeUIOptions () {
    browser.storage.local.set({"ui_options": {
        textarea: ui_option_textarea.checked,
        editablenode: ui_option_editablenode.checked
    }});
}


/*
    GC options
*/
function setGCOptionsFromStorage () {
    if (bChrome) {
        browser.storage.local.get("gc_options", _setGCOptions);
        return;
    }
    let xPromise = browser.storage.local.get("gc_options");
    xPromise.then(_setGCOptions, showError);
︙

Fossil 2.24 [8be0372c10] 2024-04-23 13:25:26
This page was generated in about 0.007s