Overview
Comment: | [fx] WebExt: message box + text formatter via context menu |
---|---|
Downloads: | Tarball | ZIP archive | SQL archive |
Timelines: | family | ancestors | descendants | both | fx | webext3 |
Files: | files | file ages | folders |
SHA3-256: |
e7fc1e12a3b94e2262138a5f5ffd0c39 |
User & Date: | olr on 2017-10-16 19:33:38 |
Other Links: | branch diff | manifest | tags |
Context
2017-10-16
| ||
20:03 | [fx] WebExt: message box small improvements check-in: a44781f918 user: olr tags: fx, webext3 | |
19:33 | [fx] WebExt: message box + text formatter via context menu check-in: e7fc1e12a3 user: olr tags: fx, webext3 | |
2017-10-15
| ||
19:08 | [fx] WebExt: use innerText instead of textContent for editable nodes check-in: f9a8be8ff0 user: olr tags: fx, webext3 | |
Changes
Modified gc_lang/fr/webext/background.js from [3c3c66c38d] to [bec0f2d48c].
︙ | ︙ | |||
193 194 195 196 197 198 199 200 201 202 203 204 205 206 | browser.contextMenus.create({ id: "separator_selection", type: "separator", contexts: ["selection"] }); // Editable content browser.contextMenus.create({ id: "rightClickLxgEditableNode", title: "Lexicographe (zone de texte)", contexts: ["editable"] }); browser.contextMenus.create({ | > > > > > > | 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 | browser.contextMenus.create({ id: "separator_selection", type: "separator", contexts: ["selection"] }); // Editable content browser.contextMenus.create({ id: "rightClickTFEditableNode", title: "Formateur de texte (zone de texte)", contexts: ["editable"] }); browser.contextMenus.create({ id: "rightClickLxgEditableNode", title: "Lexicographe (zone de texte)", contexts: ["editable"] }); browser.contextMenus.create({ |
︙ | ︙ | |||
264 265 266 267 268 269 270 | browser.contextMenus.onClicked.addListener(function (xInfo, xTab) { // xInfo = https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/contextMenus/OnClickData // xTab = https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/Tab // confusing: no way to get the node where we click?! switch (xInfo.menuItemId) { // editable node // page | | | > | 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 | browser.contextMenus.onClicked.addListener(function (xInfo, xTab) { // xInfo = https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/contextMenus/OnClickData // xTab = https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/Tab // confusing: no way to get the node where we click?! switch (xInfo.menuItemId) { // editable node // page case "rightClickTFEditableNode": case "rightClickLxgEditableNode": case "rightClickGCEditableNode": case "rightClickLxgPage": case "rightClickGCPage": sendCommandToTab(xInfo.menuItemId, xTab.id); break; // selected text case "rightClickGCSelectedText": sendCommandToTab("rightClickGCSelectedText", xTab.id); xGCEWorker.postMessage({ sCommand: "parseAndSpellcheck", |
︙ | ︙ |
Modified gc_lang/fr/webext/content_scripts/init.js from [976d90ad7a] to [d44995d5ef].
︙ | ︙ | |||
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | let img = document.createElement('img'); img.src = (URL || webkitURL).createObjectURL(blobTxt); // webkitURL is obsolete: https://bugs.webkit.org/show_bug.cgi?id=167518 Array.filter(document.getElementsByClassName(sContainerClass), function (oElem) { oElem.appendChild(img); }); } */ const oGrammalecte = { nMenu: 0, lMenu: [], oTFPanel: null, oLxgPanel: null, oGCPanel: null, xRightClickedNode: null, listenRightClick: function () { // Node where a right click is done // Bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1325814 document.addEventListener('contextmenu', function (xEvent) { | > > > | 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 | let img = document.createElement('img'); img.src = (URL || webkitURL).createObjectURL(blobTxt); // webkitURL is obsolete: https://bugs.webkit.org/show_bug.cgi?id=167518 Array.filter(document.getElementsByClassName(sContainerClass), function (oElem) { oElem.appendChild(img); }); } */ const oGrammalecte = { nMenu: 0, lMenu: [], oTFPanel: null, oLxgPanel: null, oGCPanel: null, oMessageBox: null, xRightClickedNode: null, listenRightClick: function () { // Node where a right click is done // Bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1325814 document.addEventListener('contextmenu', function (xEvent) { |
︙ | ︙ | |||
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 136 137 138 | createGCPanel: function () { if (this.oGCPanel === null) { this.oGCPanel = new GrammalecteGrammarChecker("grammalecte_gc_panel", "Grammalecte", 500, 700); this.oGCPanel.insertIntoPage(); } }, startGCPanel: function (xNode=null) { oGrammalecte.createGCPanel(); oGrammalecte.oGCPanel.clear(); oGrammalecte.oGCPanel.show(); oGrammalecte.oGCPanel.start(xNode); oGrammalecte.oGCPanel.startWaitIcon(); }, startLxgPanel: function () { oGrammalecte.createLxgPanel(); oGrammalecte.oLxgPanel.clear(); oGrammalecte.oLxgPanel.show(); oGrammalecte.oLxgPanel.startWaitIcon(); }, getPageText: function () { let sPageText = document.body.innerText; let nPos = sPageText.indexOf("__grammalecte_panel__"); if (nPos >= 0) { sPageText = sPageText.slice(0, nPos); } | > > > > > > > > > > > > > > > > > > > | 113 114 115 116 117 118 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 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | createGCPanel: function () { if (this.oGCPanel === null) { 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, 300); this.oMessageBox.insertIntoPage(); } }, startGCPanel: function (xNode=null) { oGrammalecte.createGCPanel(); oGrammalecte.oGCPanel.clear(); oGrammalecte.oGCPanel.show(); oGrammalecte.oGCPanel.start(xNode); oGrammalecte.oGCPanel.startWaitIcon(); }, startLxgPanel: function () { oGrammalecte.createLxgPanel(); oGrammalecte.oLxgPanel.clear(); oGrammalecte.oLxgPanel.show(); oGrammalecte.oLxgPanel.startWaitIcon(); }, startFTPanel: function (xNode=null) { oGrammalecte.createTFPanel(); oGrammalecte.oTFPanel.start(xNode); oGrammalecte.oTFPanel.show(); }, showMessage: function (sMessage) { oGrammalecte.createMessageBox(); oGrammalecte.oMessageBox.setMessage(sMessage); oGrammalecte.oMessageBox.show(); }, getPageText: function () { let sPageText = document.body.innerText; let nPos = sPageText.indexOf("__grammalecte_panel__"); if (nPos >= 0) { sPageText = sPageText.slice(0, nPos); } |
︙ | ︙ | |||
195 196 197 198 199 200 201 | sText = (oGrammalecte.xRightClickedNode.tagName == "TEXTAREA") ? oGrammalecte.xRightClickedNode.value : oGrammalecte.xRightClickedNode.innerText; xGrammalectePort.postMessage({ sCommand: "parseAndSpellcheck", dParam: {sText: sText, sCountry: "FR", bDebug: false, bContext: false}, dInfo: {sTextAreaId: oGrammalecte.xRightClickedNode.id} }); } else { | < | < | 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 | sText = (oGrammalecte.xRightClickedNode.tagName == "TEXTAREA") ? oGrammalecte.xRightClickedNode.value : oGrammalecte.xRightClickedNode.innerText; xGrammalectePort.postMessage({ sCommand: "parseAndSpellcheck", dParam: {sText: sText, sCountry: "FR", bDebug: false, bContext: false}, dInfo: {sTextAreaId: oGrammalecte.xRightClickedNode.id} }); } else { oGrammalecte.showMessage("Erreur. Le node sur lequel vous avez cliqué n’a pas pu être identifié. Sélectionnez le texte à corriger et relancez le correcteur via le menu contextuel."); } break; case "rightClickGCPage": oGrammalecte.startGCPanel(); xGrammalectePort.postMessage({ sCommand: "parseAndSpellcheck", dParam: {sText: oGrammalecte.getPageText(), sCountry: "FR", bDebug: false, bContext: false}, |
︙ | ︙ | |||
223 224 225 226 227 228 229 | sText = (oGrammalecte.xRightClickedNode.tagName == "TEXTAREA") ? oGrammalecte.xRightClickedNode.value : oGrammalecte.xRightClickedNode.textContent; xGrammalectePort.postMessage({ sCommand: "getListOfTokens", dParam: {sText: sText}, dInfo: {sTextAreaId: oGrammalecte.xRightClickedNode.id} }); } else { | < | < > > > > > > > > > > > > | 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 | sText = (oGrammalecte.xRightClickedNode.tagName == "TEXTAREA") ? oGrammalecte.xRightClickedNode.value : oGrammalecte.xRightClickedNode.textContent; xGrammalectePort.postMessage({ sCommand: "getListOfTokens", dParam: {sText: sText}, dInfo: {sTextAreaId: oGrammalecte.xRightClickedNode.id} }); } else { oGrammalecte.showMessage("Erreur. Le node sur lequel vous avez cliqué n’a pas pu être identifié. Sélectionnez le texte à analyser et relancez le lexicographe via le menu contextuel."); } break; case "rightClickLxgPage": oGrammalecte.startLxgPanel(); xGrammalectePort.postMessage({ sCommand: "getListOfTokens", dParam: {sText: oGrammalecte.getPageText()}, dInfo: {} }); break; case "rightClickLxgSelectedText": oGrammalecte.startLxgPanel(); // selected text is sent to the GC worker in the background script. break; // Text formatter command case "rightClickTFEditableNode": if (oGrammalecte.xRightClickedNode !== null) { if (oGrammalecte.xRightClickedNode.tagName == "TEXTAREA") { oGrammalecte.startFTPanel(oGrammalecte.xRightClickedNode); } else { oGrammalecte.showMessage("Cette zone de texte n’est pas réellement un champ de formulaire, mais un node HTML éditable. Le formateur de texte n’est pas disponible pour ce type de champ de saisie."); } } else { oGrammalecte.showMessage("Erreur. Le node sur lequel vous avez cliqué n’a pas pu être identifié."); } break; // rescan page command case "rescanPage": oGrammalecte.rescanPage(); break; default: console.log("[Content script] Unknown command: " + sActionDone); |
︙ | ︙ |
Added gc_lang/fr/webext/content_scripts/message_box.css version [d830cc07e2].
> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | 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 | /* 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 { display: inline-block; 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; } |
Added gc_lang/fr/webext/content_scripts/message_box.js version [4a05d3c991].
> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > | 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 | // JavaScript // 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); } } _createLogo () { let xImg = document.createElement("img"); xImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAC8UlEQVQ4jX3TbUgTcRwH8P89ddu5u9tt082aZmpFEU4tFz0QGTUwCi0heniR9MSUIKRaD0RvIlKigsooo+iNFa0XJYuwIjEK19OcDtPElsG0ktyp591t7u7+vUh7MPX3+vf5/n8/+P0BmKJIPUUVlh2rdVVeesWlzEybqg+bFOsoylnqPmNavGFfknV2Omu2Lvja3vxAURKJib3opHizu8riLK6gjRyuKgmoSoMRFENRUqfXTzvBGK62LC2uoFkOl4RhjQ8+qWt7dPNE3sbdp+2LXbsGe9qb4rIo/BfwFy6nWQ4ThWGNDzbcfu29dMDh2nHU7CypYNLmzTda0/L5cNuzmDQi/A4Y27k6eQxLI79wS/11D0AAMNvs6XT6ojVJjJEgTbMy2BT77xBMp09KcpaWV1uc41jQoi0NdUHfjeOO9WWn7AVF7s7n986SithPJGeupBh2PCSP/xxqxAp3eq6wuUV7Wc6MSZIEhA8vHjbfOe/OcW3zmAuKy+nUzAyD2bow8ODaEROFq8AyZ5WBYdEZXGqGxZ61HJV+9HYCJRbTNA0QBA40HWunaKN5dKg/DBKxeCIe09Th/m4MJwiMSZmLEzMQAABQRuNqgu8NYX3doTcMpvCkLbtQZ2AJkrPOZG1zlnY13T+Hy9EehY90h57eqcorcZ/lctZuMzAsOjLEqwNv66/6vZcPYRBC+C3cGaBxhSet2av1BpYgTTY7k5y2JPT41slIR6Axv8R9nnOs+4Pf+2r992uOxGVJwgAAAEINfgt3BGgsESWtWas1iGDyl+CT/u7WpvxNFRc4x7qtBoZFhSFejb7z1fq9NYfjsiT+cwcQavBruCOgU4SIGo18amuoq3Js3FNlynVtH385+s53ze+t8cRkURx3yMTTRBAEQVAUXbFlf3XystJKA2NExeFBdWASDAAA+MQACCEEmqbJ0b6PMC7JwhDU8YFHV5u9NZ64LErT/oW/63tPV6uJwmKoOND78u7Fg5NhAAD4CVbzY9cwrWQrAAAAAElFTkSuQmCC"; return xImg; } _createButtons () { let xButtonLine = oGrammalecte.createNode("div", {className: "grammalecte_panel_commands"}); xButtonLine.appendChild(this._createCloseButton()); return xButtonLine; } _createCloseButton () { 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 () { document.body.appendChild(this.xMessageBox); } show () { this.xMessageBox.style.display = "block"; } hide () { this.xMessageBox.style.display = "none"; } setMessage (sMessage) { this.xMessageBoxContent.textContent = sMessage; } 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;`; } } |
Modified gc_lang/fr/webext/content_scripts/panel_tf.js from [4e9190557a] to [af26e4e5c0].
︙ | ︙ | |||
158 159 160 161 162 163 164 | xLine.appendChild(oGrammalecte.createNode("div", {id: "res_"+"o_ordinals_no_exponant", className: "grammalecte_tf_result", textContent: "·"})); return xLine; } /* Actions */ | | > | | | | | | > | 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 | xLine.appendChild(oGrammalecte.createNode("div", {id: "res_"+"o_ordinals_no_exponant", className: "grammalecte_tf_result", textContent: "·"})); return xLine; } /* Actions */ start (xNode) { if (xNode !== null && xNode.tagName == "TEXTAREA") { this.xTextArea = xNode; if (bChrome) { browser.storage.local.get("tf_options", this.setOptions.bind(this)); } else { let xPromise = browser.storage.local.get("tf_options"); xPromise.then(this.setOptions.bind(this), this.reset.bind(this)); } } } switchGroup (sOptName) { if (document.getElementById(sOptName).dataset.selected == "true") { document.getElementById(sOptName.slice(2)).style.opacity = 1; } else { |
︙ | ︙ |
Modified gc_lang/fr/webext/manifest.json from [bbea6aa8bb] to [84fabfba5c].
︙ | ︙ | |||
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | "*://*.wiktionary.org/*" ], "css": [ "content_scripts/panel.css", "content_scripts/panel_tf.css", "content_scripts/panel_gc.css", "content_scripts/panel_lxg.css", "content_scripts/menu.css" ], "js": [ "content_scripts/panel.js", "grammalecte/fr/textformatter.js", "content_scripts/panel_tf.js", "content_scripts/panel_gc.js", "content_scripts/panel_lxg.js", "content_scripts/menu.js", "content_scripts/init.js" ], "run_at": "document_end" }, { "matches": [ | > > | 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | "*://*.wiktionary.org/*" ], "css": [ "content_scripts/panel.css", "content_scripts/panel_tf.css", "content_scripts/panel_gc.css", "content_scripts/panel_lxg.css", "content_scripts/message_box.css", "content_scripts/menu.css" ], "js": [ "content_scripts/panel.js", "grammalecte/fr/textformatter.js", "content_scripts/panel_tf.js", "content_scripts/panel_gc.js", "content_scripts/panel_lxg.js", "content_scripts/message_box.js", "content_scripts/menu.js", "content_scripts/init.js" ], "run_at": "document_end" }, { "matches": [ |
︙ | ︙ |