Index: gc_lang/fr/webext/content_scripts/modify_page.js ================================================================== --- gc_lang/fr/webext/content_scripts/modify_page.js +++ gc_lang/fr/webext/content_scripts/modify_page.js @@ -1,125 +1,141 @@ // Modify page + +/* + JS sucks (again and again and again and again…) + Not possible to load content from within the extension: + https://bugzilla.mozilla.org/show_bug.cgi?id=1267027 + No SharedWorker, no images allowed for now… +*/ "use strict"; console.log("Content script [start]"); + + +let nWrapper = 0; + +let xConjPanel = null; +let xTFPanel = null; +let xLxgPanel = null; +let xGCPanel = null; + function showError (e) { console.error(e.fileName + "\n" + e.name + "\nline: " + e.lineNumber + "\n" + e.message); } -/* - Worker (separate thread to avoid freezing Firefox) -*/ -let xGCEWorker = new SharedWorker(browser.extension.getURL("../gce_sharedworker.js")); - -xGCEWorker.onerror = function(e) { - console.log('There is an error with your worker!'); - console.log(typeof(e)); - console.log(e); - for (let sParam in e) { - console.log(sParam); - console.log(e.sParam); - } -} - -xGCEWorker.port.onmessage = function (e) { - // https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent - try { - switch (e.data[0]) { - case "grammar_errors": - console.log("GRAMMAR ERRORS (SHARE)"); - console.log(e.data[1].aGrammErr); - //browser.runtime.sendMessage({sCommand: "grammar_errors", aGrammErr: e.data[1].aGrammErr}); - break; - case "spelling_and_grammar_errors": - console.log("SPELLING AND GRAMMAR ERRORS (SHARE)"); - console.log(e.data[1].aSpellErr); - console.log(e.data[1].aGrammErr); - break; - case "text_to_test_result": - console.log("TESTS RESULTS (SHARE)"); - console.log(e.data[1]); - break; - case "fulltests_result": - console.log("TESTS RESULTS (SHARE)"); - console.log(e.data[1]); - break; - case "options": - console.log("OPTIONS (SHARE)"); - console.log(e.data[1]); - break; - case "tokens": - console.log("TOKENS (SHARE)"); - console.log(e.data[1]); - let xLxgTab = browser.tabs.create({ - url: browser.extension.getURL("panel/lexicographer.html"), - }); - xLxgTab.then(onCreated, onError); - break; - case "error": - console.log("ERROR (SHARE)"); - console.log(e.data[1]); - break; - default: - console.log("Unknown command (SHARE): " + e.data[0]); - } +function wrapTextareas () { + let lNode = document.getElementsByTagName("textarea"); + for (let xNode of lNode) { + createWrapper(xNode); + } +} + +function createWrapper (xTextArea) { + try { + let xParentElement = xTextArea.parentElement; + let xWrapper = document.createElement("div"); + xWrapper.style = "padding: 5px; color: hsl(210, 10%, 90%); background-color: hsl(210, 50%, 50%); border-radius: 3px;"; + xWrapper.id = nWrapper + 1; + nWrapper += 1; + xParentElement.insertBefore(xWrapper, xTextArea); + xWrapper.appendChild(xTextArea); // move textarea in wrapper + let xToolbar = createWrapperToolbar(xTextArea); + xWrapper.appendChild(xToolbar); + } + catch (e) { + showError(e); + } +} + + +let sButtonStyle = "display: inline-block; padding: 0 5px; margin-left: 5px; background-color: hsl(210, 50%, 60%); border-radius: 2px; cursor: pointer;"; + +function createWrapperToolbar (xTextArea) { + try { + let xToolbar = document.createElement("div"); + xToolbar.style = "display: flex; justify-content: flex-end; margin-top: 5px; padding: 5px 10px;"; + /*let xLogo = document.createElement("img"); + xLogo.src = browser.extension.getURL("img/logo-16.png"); + xTitle.appendChild(xLogo);*/ + xToolbar.appendChild(document.createTextNode("Grammalecte")); + let xConjButton = document.createElement("div"); + xConjButton.textContent = "Conjuguer"; + xConjButton.style = sButtonStyle; + xConjButton.onclick = function() { + createConjPanel(); + }; + xToolbar.appendChild(xConjButton); + let xTFButton = document.createElement("div"); + xTFButton.textContent = "Formater"; + xTFButton.style = sButtonStyle; + xTFButton.onclick = function() { + createTFPanel(); + }; + xToolbar.appendChild(xTFButton); + let xLxgButton = document.createElement("div"); + xLxgButton.textContent = "Analyser"; + xLxgButton.style = sButtonStyle; + xLxgButton.onclick = function() { + createLxgPanel(); + }; + xToolbar.appendChild(xLxgButton); + let xGCButton = document.createElement("div"); + xGCButton.textContent = "Corriger"; + xGCButton.style = sButtonStyle; + xGCButton.onclick = function() { + createGCPanel(); + }; + xToolbar.appendChild(xGCButton); + return xToolbar; } catch (e) { showError(e); } -}; - -console.log("Content script [worker]"); -console.log(xGCEWorker); - - -//xGCEWorker.port.start(); -//console.log("Content script [port started]"); - -//xGCEWorker.port.postMessage(["init", {sExtensionPath: browser.extension.getURL("."), sOptions: "", sContext: "Firefox"}]); - -console.log("Content script [worker initialzed]"); - -xGCEWorker.port.postMessage(["parse", {sText: "Vas... J’en aie mare...", sCountry: "FR", bDebug: false, bContext: false}]); -//xGCEWorker.port.postMessage(["parseAndSpellcheck", {sText: oRequest.sText, sCountry: "FR", bDebug: false, bContext: false}]); -//xGCEWorker.port.postMessage(["getListOfTokens", {sText: oRequest.sText}]); -//xGCEWorker.port.postMessage(["textToTest", {sText: oRequest.sText, sCountry: "FR", bDebug: false, bContext: false}]); -//xGCEWorker.port.postMessage(["fullTests"]); - - - -function wrapTextareas() {; - let lNode = document.getElementsByTagName("textarea"); - for (let xNode of lNode) { - createGCButton(xNode); - } -} - -function createGCButton (xActiveTextZone) { - let xParentElement = xActiveTextZone.parentElement; - let xGCButton = document.createElement("div"); - xGCButton.textContent = "@"; - xGCButton.title = "Grammalecte" - xGCButton.style = "padding: 5px; color: #FFF; background-color: hsla(210, 50%, 50%, 80%); border-radius: 3px; cursor: pointer"; - xGCButton.onclick = function() { - console.log(xActiveTextZone.value); - }; - xParentElement.insertBefore(xGCButton, xActiveTextZone); -} - -function removeEverything () { - while (document.body.firstChild) { - document.body.firstChild.remove(); - } -} - -function change (param) { - document.getElementById("title").setAttribute("background-color", "#809060"); - console.log("param: " + param); - document.getElementById("title").setAttribute("background-color", "#FF0000"); +} + + +function createConjPanel () { + console.log("Conjugueur"); + if (xConjPanel !== null) { + xConjPanel.style.display = "block"; + } else { + // create the panel + xConjPanel = document.createElement("div"); + xConjPanel.style = "position: fixed; left: 50%; top: 50%; z-index: 100; height: 400px; margin-top: -200px; width: 600px; margin-left: -300px; border-radius: 10px;" + + " color: hsl(210, 10%, 4%); background-color: hsl(210, 20%, 90%); border: 10px solid hsla(210, 20%, 70%, .5);"; + xConjPanel.textContent = "Conjugueur"; + xConjPanel.setAttribute("draggable", true); + xConjPanel.appendChild(createCloseButton(xConjPanel)); + document.body.appendChild(xConjPanel); + } +} + + + +function createTFPanel () { + console.log("Formateur de texte"); +} + +function createLxgPanel () { + console.log("Analyse"); +} + +function createGCPanel () { + console.log("Correction grammaticale"); +} + +function createCloseButton (xParentNode) { + let xButton = document.createElement("div"); + xButton.style = "float: right; width: 20px; padding: 5px 10px; color: hsl(210, 0%, 100%); text-align: center;" + + "font-size: 20px; font-weight: bold; background-color: hsl(0, 80%, 50%); border-radius: 0 0 0 3px; cursor: pointer;"; + xButton.textContent = "×"; + xButton.onclick = function () { + xParentNode.style.display = "none"; + } + return xButton; } /* Assign do_something() as a listener for messages from the extension. @@ -126,14 +142,14 @@ */ function handleMessage2 (oRequest, xSender, sendResponse) { console.log(`[Content script] received: ${oRequest.content}`); - change(request.myparam); + //change(request.myparam); //browser.runtime.onMessage.removeListener(handleMessage); sendResponse({response: "response from content script"}); } browser.runtime.onMessage.addListener(handleMessage2); wrapTextareas();