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: |
38e8cfe68d2c944c5d2b655c652ecd2e |
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
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 | console.log(e.data); } } catch (e) { showError(e); } }; 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); return; } | > > > > > > > > > > | < < < | < < < < < < < | 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; } browser.storage.local.get("gc_options").then(initGrammarChecker, showError); browser.storage.local.get("ui_options").then(initUIOptions, showError); } 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 | }, clearRightClickedNode: function () { this.xRightClickedNode = null; }, createMenus: function () { | > > > > > > | > > > > | | | | | | < | < | | | | > > < | 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); }, _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; } } } 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(); }, 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 | /* Start */ oGrammalecte.listenRightClick(); oGrammalecte.createMenus(); | < | 294 295 296 297 298 299 300 | /* Start */ oGrammalecte.listenRightClick(); oGrammalecte.createMenus(); |
Modified gc_lang/fr/webext/panel/main.css from [4ea20bf8f5] to [f3d95db8cd].
︙ | ︙ | |||
151 152 153 154 155 156 157 | border-top: 1px solid hsl(210, 20%, 88%); font-size: 14px; } /* Help */ | | | > | | | 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 */ #ui_options_page { display: none; padding: 20px; } #ui_options_page h2 { margin-top: 10px; font: bold 20px 'Yanone Kaffeesatz', "Oswald", "Liberation Sans Narrow", sans-serif; color: hsl(210, 50%, 50%); } #ui_options_page .shortcut { margin-top: 10px; font-weight: bold; font-size: 13px; } #ui_options_page .shortcut_label { margin-left: 30px; } /* Grammar checking options */ #gc_options_page { |
︙ | ︙ | |||
228 229 230 231 232 233 234 | #dictionaries_info { margin: 10px 0; padding: 10px; border-radius: 3px; background-color: hsl(0, 50%, 40%); color: hsl(0, 10%, 96%); } | > > > > > | | | | 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 */ .option_section { padding: 10px; margin-top: 10px; border-radius: 5px; background-color: hsl(210, 20%, 96%); } .option_section label { font-size: 16px; line-height: 20px; color: hsl(210, 20%, 50%); font-weight: bold; } .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 | <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> | | | 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="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 | <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 --> | | | > > > | | | > > > | > | > > > | | | | | < | | | | | | | | | | 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="ui_options_page" class="page"> <h1>INTERFACE</h1> <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> </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="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="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="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="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="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="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="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="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 | } 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("link_")) { browser.tabs.create({url: xElem.dataset.url}); } } else if (xElem.className.startsWith("select")) { showPage(xElem.dataset.page); }/* else if (xElem.tagName === "A") { | > > > | 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 | xNodePage.style.display = "none"; } // show the selected one document.getElementById(sPageName).style.display = "block"; if (sPageName == "gc_options_page") { setGCOptionsFromStorage(); } } catch (e) { showError(e); } } function showTestResult (sText) { document.getElementById("tests_result").textContent = sText; } function setGCOptionsFromStorage () { if (bChrome) { browser.storage.local.get("gc_options", _setGCOptions); return; } let xPromise = browser.storage.local.get("gc_options"); xPromise.then(_setGCOptions, showError); | > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | 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); |
︙ | ︙ |