Index: gc_lang/fr/webext/content_scripts/content_modifier.js ================================================================== --- gc_lang/fr/webext/content_scripts/content_modifier.js +++ gc_lang/fr/webext/content_scripts/content_modifier.js @@ -12,101 +12,38 @@ function showError (e) { console.error(e.fileName + "\n" + e.name + "\nline: " + e.lineNumber + "\n" + e.message); } - -class GrammalecteWrapper { - - constructor (nWrapper, xTextArea) { - this.nWrapper = nWrapper; - let xParentElement = xTextArea.parentElement; - let xWrapper = createNode("div", {id: "grammalecte_wrapper" + nWrapper, className: "grammalecte_wrapper"}); - xParentElement.insertBefore(xWrapper, xTextArea); - xWrapper.appendChild(this._createTitle()); - xWrapper.appendChild(xTextArea); // move textarea in wrapper - xWrapper.appendChild(this._createWrapperToolbar(xTextArea)); - } - - _createTitle () { - return createNode("div", {className: "grammalecte_wrapper_title", textContent: "Grammalecte"}); - } - - _createWrapperToolbar (xTextArea) { - try { - let xToolbar = createNode("div", {className: "grammalecte_wrapper_toolbar"}); - let xConjButton = createNode("div", {className: "grammalecte_wrapper_button", textContent: "Conjuguer"}); - xConjButton.onclick = () => { this.showConjButtons(); }; - let xConjSection = createNode("div", {id: "grammalecte_wrapper_conj_section"+this.nWrapper, className: "grammalecte_wrapper_conj_section"}); - let xConjButtonTab = createNode("div", {className: "grammalecte_wrapper_button2", textContent: ">Onglet"}); - xConjButtonTab.onclick = function () { - xPort.postMessage({sCommand: "openConjugueurTab", dParam: null, dInfo: null}); - this.hideConjButtons(); - }.bind(this); - let xConjButtonWin = createNode("div", {className: "grammalecte_wrapper_button2", textContent: ">Fenêtre"}); - xConjButtonWin.onclick = function () { - xPort.postMessage({sCommand: "openConjugueurWindow", dParam: null, dInfo: null}); - this.hideConjButtons(); - }.bind(this); - let xTFButton = createNode("div", {className: "grammalecte_wrapper_button", textContent: "Formater"}); - xTFButton.onclick = function () { - oGrammalecte.createTFPanel(); - oGrammalecte.oTFPanel.start(xTextArea); - oGrammalecte.oTFPanel.show(); - }; - let xLxgButton = createNode("div", {className: "grammalecte_wrapper_button", textContent: "Analyser"}); - xLxgButton.onclick = function () { - oGrammalecte.createLxgPanel(); - oGrammalecte.oLxgPanel.clear(); - oGrammalecte.oLxgPanel.show(); - oGrammalecte.oLxgPanel.startWaitIcon(); - xPort.postMessage({ - sCommand: "getListOfTokens", - dParam: {sText: xTextArea.value}, - dInfo: {sTextAreaId: xTextArea.id} - }); - }; - let xGCButton = createNode("div", {className: "grammalecte_wrapper_button", textContent: "Corriger"}); - xGCButton.onclick = function () { - oGrammalecte.createGCPanel(); - oGrammalecte.oGCPanel.clear(); - oGrammalecte.oGCPanel.show(); - oGrammalecte.oGCPanel.start(xTextArea); - oGrammalecte.oGCPanel.startWaitIcon(); - xPort.postMessage({ - sCommand: "parseAndSpellcheck", - dParam: {sText: xTextArea.value, sCountry: "FR", bDebug: false, bContext: false}, - dInfo: {sTextAreaId: xTextArea.id} - }); - }; - // Create - //xToolbar.appendChild(createNode("img", {scr: browser.extension.getURL("img/logo-16.png")})); - // can’t work, due to content-script policy: https://bugzilla.mozilla.org/show_bug.cgi?id=1267027 - //xToolbar.appendChild(createLogo()); - xToolbar.appendChild(xConjButton); - xConjSection.appendChild(xConjButtonTab); - xConjSection.appendChild(xConjButtonWin); - xToolbar.appendChild(xConjSection); - xToolbar.appendChild(xTFButton); - xToolbar.appendChild(xLxgButton); - xToolbar.appendChild(xGCButton); - return xToolbar; - } - catch (e) { - showError(e); - } - } - - showConjButtons () { - document.getElementById("grammalecte_wrapper_conj_section"+this.nWrapper).style.display = "block"; - } - - hideConjButtons () { - document.getElementById("grammalecte_wrapper_conj_section"+this.nWrapper).style.display = "none"; - } -} - +function createNode (sType, oAttr, oDataset=null) { + try { + let xNode = document.createElement(sType); + Object.assign(xNode, oAttr); + if (oDataset) { + Object.assign(xNode.dataset, oDataset); + } + return xNode; + } + catch (e) { + showError(e); + } +} + +/* +function loadImage (sContainerClass, sImagePath) { + let xRequest = new XMLHttpRequest(); + xRequest.open('GET', browser.extension.getURL("")+sImagePath, false); + xRequest.responseType = "arraybuffer"; + xRequest.send(); + let blobTxt = new Blob([xRequest.response], {type: 'image/png'}); + 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 = { nWrapper: 0, lWrapper: [], Index: gc_lang/fr/webext/content_scripts/panels_content.js ================================================================== --- gc_lang/fr/webext/content_scripts/panels_content.js +++ gc_lang/fr/webext/content_scripts/panels_content.js @@ -1,12 +1,10 @@ // JavaScript // Panel creator "use strict"; -console.log("[Content script] Panel creator"); - class GrammalectePanel { constructor (sId, sTitle, nWidth, nHeight, bFlexible=true) { this.sId = sId; @@ -23,11 +21,11 @@ try { let xPanel = createNode("div", {id: this.sId, className: "grammalecte_panel"}); let xBar = createNode("div", {className: "grammalecte_panel_bar"}); xBar.appendChild(this._createButtons()); let xTitle = createNode("div", {className: "grammalecte_panel_title"}); - xTitle.appendChild(createLogo()); + xTitle.appendChild(this._createLogo()); xTitle.appendChild(createNode("div", {className: "grammalecte_panel_label", textContent: sTitle})); xBar.appendChild(xTitle); xPanel.appendChild(xBar); xPanel.appendChild(this.xPanelContent); return xPanel; @@ -34,10 +32,16 @@ } 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 = createNode("div", {className: "grammalecte_panel_commands"}); xButtonLine.appendChild(this.xWaitIcon); if (this.sId === "grammalecte_gc_panel") { @@ -139,42 +143,5 @@ dParam: {"sURL": sURL}, dInfo: {} }); } } - - -/* - Common functions -*/ -function createNode (sType, oAttr, oDataset=null) { - try { - let xNode = document.createElement(sType); - Object.assign(xNode, oAttr); - if (oDataset) { - Object.assign(xNode.dataset, oDataset); - } - return xNode; - } - catch (e) { - showError(e); - } -} - -function 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; -} - -function loadImage (sContainerClass, sImagePath) { - let xRequest = new XMLHttpRequest(); - xRequest.open('GET', browser.extension.getURL("")+sImagePath, false); - xRequest.responseType = "arraybuffer"; - xRequest.send(); - let blobTxt = new Blob([xRequest.response], {type: 'image/png'}); - 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); - }); -} ADDED gc_lang/fr/webext/content_scripts/wrapper.css Index: gc_lang/fr/webext/content_scripts/wrapper.css ================================================================== --- gc_lang/fr/webext/content_scripts/wrapper.css +++ gc_lang/fr/webext/content_scripts/wrapper.css @@ -0,0 +1,69 @@ +/* + CSS + Wrappen for Grammalecte +*/ + + +.grammalecte_wrapper { + margin: 3px; + padding: 5px; + border-radius: 3px; + background-color: hsl(210, 40%, 96%); + border: 1px solid hsl(210, 40%, 92%); + box-shadow: 0 0 2px hsla(210, 40%, 0%, .5); + font-family: "Trebuchet MS", "Liberation Sans", sans-serif; + color: hsl(210, 40%, 50%); +} + +.grammalecte_wrapper_title { + padding: 5px 0; + font-size: 12px; + font-variant: small-caps; +} + +.grammalecte_wrapper_toolbar { + display: flex; + justify-content: flex-end; + margin-top: 5px; + padding: 5px 10px; +} + +.grammalecte_wrapper_button { + display: inline-block; + padding: 0 5px; + margin-left: 5px; + background-color: hsl(210, 60%, 80%); + border-radius: 2px; + border: 1px solid hsl(210, 60%, 70%); + font-size: 14px; + color: hsl(210, 40%, 40%); + cursor: pointer; +} +.grammalecte_wrapper_button:hover { + background-color: hsl(210, 80%, 70%); + border: 1px solid hsl(210, 80%, 60%); + box-shadow: 0 0 1px 1px hsl(210, 80%, 80%); + color: hsl(210, 80%, 98%); +} + +.grammalecte_wrapper_conj_section { + display: none; +} + +.grammalecte_wrapper_button2 { + display: inline-block; + padding: 0 5px; + margin-left: 5px; + background-color: hsl(180, 60%, 80%); + border-radius: 2px; + border: 1px solid hsl(180, 60%, 70%); + font-size: 14px; + color: hsl(180, 40%, 40%); + cursor: pointer; +} +.grammalecte_wrapper_button2:hover { + background-color: hsl(180, 80%, 70%); + border: 1px solid hsl(180, 80%, 60%); + box-shadow: 0 0 1px 1px hsl(180, 80%, 80%); + color: hsl(180, 80%, 98%); +} ADDED gc_lang/fr/webext/content_scripts/wrapper.js Index: gc_lang/fr/webext/content_scripts/wrapper.js ================================================================== --- gc_lang/fr/webext/content_scripts/wrapper.js +++ gc_lang/fr/webext/content_scripts/wrapper.js @@ -0,0 +1,94 @@ +// JavaScript + +"use strict"; + + +class GrammalecteWrapper { + + constructor (nWrapper, xTextArea) { + this.nWrapper = nWrapper; + let xParentElement = xTextArea.parentElement; + let xWrapper = createNode("div", {id: "grammalecte_wrapper" + nWrapper, className: "grammalecte_wrapper"}); + xParentElement.insertBefore(xWrapper, xTextArea); + xWrapper.appendChild(this._createTitle()); + xWrapper.appendChild(xTextArea); // move textarea in wrapper + xWrapper.appendChild(this._createWrapperToolbar(xTextArea)); + } + + _createTitle () { + return createNode("div", {className: "grammalecte_wrapper_title", textContent: "Grammalecte"}); + } + + _createWrapperToolbar (xTextArea) { + try { + let xToolbar = createNode("div", {className: "grammalecte_wrapper_toolbar"}); + let xConjButton = createNode("div", {className: "grammalecte_wrapper_button", textContent: "Conjuguer"}); + xConjButton.onclick = () => { this.showConjButtons(); }; + let xConjSection = createNode("div", {id: "grammalecte_wrapper_conj_section"+this.nWrapper, className: "grammalecte_wrapper_conj_section"}); + let xConjButtonTab = createNode("div", {className: "grammalecte_wrapper_button2", textContent: ">Onglet"}); + xConjButtonTab.onclick = function () { + xPort.postMessage({sCommand: "openConjugueurTab", dParam: null, dInfo: null}); + this.hideConjButtons(); + }.bind(this); + let xConjButtonWin = createNode("div", {className: "grammalecte_wrapper_button2", textContent: ">Fenêtre"}); + xConjButtonWin.onclick = function () { + xPort.postMessage({sCommand: "openConjugueurWindow", dParam: null, dInfo: null}); + this.hideConjButtons(); + }.bind(this); + let xTFButton = createNode("div", {className: "grammalecte_wrapper_button", textContent: "Formater"}); + xTFButton.onclick = function () { + oGrammalecte.createTFPanel(); + oGrammalecte.oTFPanel.start(xTextArea); + oGrammalecte.oTFPanel.show(); + }; + let xLxgButton = createNode("div", {className: "grammalecte_wrapper_button", textContent: "Analyser"}); + xLxgButton.onclick = function () { + oGrammalecte.createLxgPanel(); + oGrammalecte.oLxgPanel.clear(); + oGrammalecte.oLxgPanel.show(); + oGrammalecte.oLxgPanel.startWaitIcon(); + xPort.postMessage({ + sCommand: "getListOfTokens", + dParam: {sText: xTextArea.value}, + dInfo: {sTextAreaId: xTextArea.id} + }); + }; + let xGCButton = createNode("div", {className: "grammalecte_wrapper_button", textContent: "Corriger"}); + xGCButton.onclick = function () { + oGrammalecte.createGCPanel(); + oGrammalecte.oGCPanel.clear(); + oGrammalecte.oGCPanel.show(); + oGrammalecte.oGCPanel.start(xTextArea); + oGrammalecte.oGCPanel.startWaitIcon(); + xPort.postMessage({ + sCommand: "parseAndSpellcheck", + dParam: {sText: xTextArea.value, sCountry: "FR", bDebug: false, bContext: false}, + dInfo: {sTextAreaId: xTextArea.id} + }); + }; + // Create + //xToolbar.appendChild(createNode("img", {scr: browser.extension.getURL("img/logo-16.png")})); + // can’t work, due to content-script policy: https://bugzilla.mozilla.org/show_bug.cgi?id=1267027 + //xToolbar.appendChild(createLogo()); + xToolbar.appendChild(xConjButton); + xConjSection.appendChild(xConjButtonTab); + xConjSection.appendChild(xConjButtonWin); + xToolbar.appendChild(xConjSection); + xToolbar.appendChild(xTFButton); + xToolbar.appendChild(xLxgButton); + xToolbar.appendChild(xGCButton); + return xToolbar; + } + catch (e) { + showError(e); + } + } + + showConjButtons () { + document.getElementById("grammalecte_wrapper_conj_section"+this.nWrapper).style.display = "block"; + } + + hideConjButtons () { + document.getElementById("grammalecte_wrapper_conj_section"+this.nWrapper).style.display = "none"; + } +} Index: gc_lang/fr/webext/manifest.json ================================================================== --- gc_lang/fr/webext/manifest.json +++ gc_lang/fr/webext/manifest.json @@ -40,18 +40,20 @@ "css": [ "content_scripts/panels_content.css", "content_scripts/tf_content.css", "content_scripts/gc_content.css", "content_scripts/lxg_content.css", + "content_scripts/wrapper.css", "3rd/font-awesome-4.7.0/css/font-awesome.min.css" ], "js": [ "content_scripts/panels_content.js", "grammalecte/fr/textformatter.js", "content_scripts/tf_content.js", "content_scripts/gc_content.js", "content_scripts/lxg_content.js", + "content_scripts/wrapper.js", "content_scripts/content_modifier.js" ] } ], "commands": {