Index: gc_lang/fr/webext/content_scripts/content_panels.css ================================================================== --- gc_lang/fr/webext/content_scripts/content_panels.css +++ gc_lang/fr/webext/content_scripts/content_panels.css @@ -19,11 +19,17 @@ display: inline-block; padding: 0 5px; margin-left: 5px; background-color: hsl(210, 50%, 60%); border-radius: 2px; + color: hsl(210, 0%, 96%); cursor: pointer; +} +.grammalecte_wrapper_button:hover { + background-color: hsl(210, 50%, 55%); + box-shadow: 0 0 1px 1px hsl(210, 50%, 20%); + color: hsl(210, 0%, 100%); } /* Panels @@ -30,41 +36,51 @@ */ .grammalecte_panel { padding: 0; margin: 0; position: fixed; - left: 50%; - top: 50%; z-index: 100; border: 10px solid hsl(210, 0%, 0%); border-radius: 10px; background-color: hsl(210, 20%, 100%); color: hsl(210, 10%, 4%); font-family: "Trebuchet MS", "Liberation Sans", sans-serif; box-shadow: 0 0 4px 2px hsl(210, 0%, 50%); } -.grammalecte_title_bar { +.grammalecte_panel_bar { position: sticky; width: 100%; background-color: hsl(210, 0%, 90%); border-bottom: 1px solid hsl(210, 10%, 80%); font-size: 20px; } -.grammalecte_title { +.grammalecte_panel_title { padding: 10px 20px; } -.grammalecte_label { +.grammalecte_panel_label { display: inline-block; padding: 0 10px; } -.grammalecte_close_button { +.grammalecte_panel_commands { float: right; +} +.grammalecte_move_button { + display: inline-block; + padding: 2px 5px; + background-color: hsl(180, 80%, 50%); + font-size: 22px; + font-weight: bold; + color: hsl(210, 0%, 100%); + text-align: center; + cursor: pointer; +} +.grammalecte_close_button { + display: inline-block; padding: 2px 10px; background-color: hsl(0, 80%, 50%); - border-radius: 0 0 0 3px; font-size: 22px; font-weight: bold; color: hsl(210, 0%, 100%); text-align: center; cursor: pointer; @@ -74,42 +90,14 @@ height: calc(100% - 45px); /* panel height - title_bar */ overflow: auto; } -/* - GC Panel & Lexicographer -*/ -#grammalecte_gc_panel, #grammalecte_lxg_panel { - width: 500px; - height: 700px; - margin-top: -350px; - margin-left: -200px; -} - - -/* - Conjugueur -*/ -#grammalecte_conj_panel { - width: 700px; - height: 700px; - margin-top: -350px; - margin-left: -350px; -} - /* Text Formatter */ -#grammalecte_tf_panel { - width: 800px; - height: 600px; - margin-top: -300px; - margin-left: -400px; -} - #grammalecte_tf_options { display: flex; padding: 10px; } #grammalecte_tf_options .underline:hover { @@ -140,10 +128,11 @@ #grammalecte_tf_options label { font-size: 13px; } #grammalecte_tf_options .grammalecte_tf_result { float: right; + margin-right: 3px; font-size: 13px; } #grammalecte_tf_actions { background-color: hsl(120, 10%, 92%); @@ -161,17 +150,25 @@ text-align: center; cursor: pointer; } #grammalecte_tf_reset { - background-color: hsl(210, 80%, 50%); + background-color: hsl(210, 100%, 50%); color: hsl(210, 0%, 100%); +} +#grammalecte_tf_progressbar { + width: 250px; +} +#grammalecte_tf_time_res { + width: 40px; + padding: 5px 10px; + width: 25px; } #grammalecte_tf_apply { - background-color: hsl(150, 80%, 50%); + background-color: hsl(150, 100%, 50%); color: hsl(150, 0%, 100%); } #grammalecte_progressbarbox { display: inline-block; padding: 10px 20px; } 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 @@ -13,14 +13,14 @@ let nTadId = null; let nWrapper = 0; -let xConjPanel = null; -let xTFPanel = null; -let xLxgPanel = null; -let xGCPanel = null; +let oConjPanel = null; +let oTFPanel = null; +let oLxgPanel = null; +let oGCPanel = null; function showError (e) { console.error(e.fileName + "\n" + e.name + "\nline: " + e.lineNumber + "\n" + e.message); } @@ -93,51 +93,52 @@ } } function createConjPanel () { console.log("Conjugueur"); - if (xConjPanel !== null) { - xConjPanel.style.display = "block"; + if (oConjPanel !== null) { + oConjPanel.show(); } else { // create the panel - xConjPanel = createPanelFrame("grammalecte_conj_panel", "Conjugueur"); - document.body.appendChild(xConjPanel); + oConjPanel = new GrammalectePanel("grammalecte_conj_panel", "Conjugueur", 600, 600); + oConjPanel.insertIntoPage(); } } function createTFPanel (xTextArea) { console.log("Formateur de texte"); - if (xTFPanel !== null) { - xTFPanel.style.display = "block"; + if (oTFPanel !== null) { + oTFPanel.show(); } else { // create the panel - xTFPanel = createPanelFrame("grammalecte_tf_panel", "Formateur de texte"); - document.body.appendChild(xTFPanel); - document.getElementById("grammalecte_tf_panel_content").appendChild(createTextFormatter(xTextArea)); + oTFPanel = new GrammalectePanel("grammalecte_tf_panel", "Formateur de texte", 800, 600, false); + oTFPanel.logInnerHTML(); + oTFPanel.setContent(createTextFormatter(xTextArea)); + oTFPanel.insertIntoPage(); } } function createLxgPanel (xTextArea) { console.log("Lexicographe"); - if (xLxgPanel !== null) { - xLxgPanel.style.display = "block"; + if (oLxgPanel !== null) { + oLxgPanel.show(); } else { // create the panel - xLxgPanel = createPanelFrame("grammalecte_lxg_panel", "Lexicographe"); - document.body.appendChild(xLxgPanel); + oLxgPanel = new GrammalectePanel("grammalecte_lxg_panel", "Lexicographe", 500, 700); + oLxgPanel.insertIntoPage(); } } function createGCPanel (oErrors) { console.log("Correction grammaticale"); - if (xGCPanel !== null) { - xGCPanel.style.display = "block"; + if (oGCPanel !== null) { + oGCPanel.show(); } else { // create the panel - xGCPanel = createPanelFrame("grammalecte_gc_panel", "Correcteur"); - document.body.appendChild(xGCPanel); - document.getElementById("grammalecte_gc_panel_content").appendChild(document.createTextNode(JSON.stringify(oErrors))); + oGCPanel = new GrammalectePanel("grammalecte_gc_panel", "Correcteur", 500, 700); + oGCPanel.setContent(document.createTextNode(JSON.stringify(oErrors))); + oGCPanel.insertIntoPage(); } } /* Index: gc_lang/fr/webext/content_scripts/panel_creator.js ================================================================== --- gc_lang/fr/webext/content_scripts/panel_creator.js +++ gc_lang/fr/webext/content_scripts/panel_creator.js @@ -1,38 +1,142 @@ // JavaScript // Panel creator "use strict"; - -function createPanelFrame (sId, sTitle) { - try { - let xPanel = createNode("div", {id: sId, className: "grammalecte_panel"}); - let xBar = createNode("div", {className: "grammalecte_title_bar"}); - xBar.appendChild(createCloseButton(xPanel)); - let xTitle = createNode("div", {className: "grammalecte_title"}); - xTitle.appendChild(createLogo()); - xTitle.appendChild(createNode("div", {className: "grammalecte_label", textContent: "Grammalecte · " + sTitle})); - xBar.appendChild(xTitle); - xPanel.appendChild(xBar); - //xPanel.appendChild(createNode("div", {className: "grammalecte_empty_space_under_title_bar"})); - xPanel.appendChild(createNode("div", {id: sId+"_content", className: "grammalecte_panel_content"})); - return xPanel; - } - catch (e) { - showError(e); - } -} - -function createCloseButton (xParentNode) { - let xButton = document.createElement("div"); - xButton.className = "grammalecte_close_button"; - xButton.textContent = "×"; - xButton.onclick = function () { - xParentNode.style.display = "none"; - } - return xButton; +console.log("[Content script] Panel creator"); + + +class GrammalectePanel { + + constructor (sId, sTitle, nWidth, nHeight, bMovable=true) { + this.sId = sId; + this.sContentId = sId+"_content"; + this.nWidth = nWidth; + this.nHeight = nHeight; + this.bMovable = bMovable; + this.xContentNode = createNode("div", {id: this.sContentId, className: "grammalecte_panel_content"}); + this.xPanelNode = this._createPanel(sTitle); + this.center(); + } + + _createPanel (sTitle) { + 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(createNode("div", {className: "grammalecte_panel_label", textContent: "Grammalecte · " + sTitle})); + xBar.appendChild(xTitle); + xPanel.appendChild(xBar); + //xPanel.appendChild(createNode("div", {className: "grammalecte_empty_space_under_title_bar"})); + xPanel.appendChild(this.xContentNode); + return xPanel; + } + catch (e) { + showError(e); + } + } + + _createButtons () { + let xButtonLine = createNode("div", {className: "grammalecte_panel_commands"}); + if (this.bMovable) { + xButtonLine.appendChild(this._createMoveButtonTop()); + xButtonLine.appendChild(this._createMoveButtonLeft()); + xButtonLine.appendChild(this._createMoveButtonMiddle()); + xButtonLine.appendChild(this._createMoveButtonRight()); + xButtonLine.appendChild(this._createMoveButtonBottom()); + } + xButtonLine.appendChild(this._createCloseButton()); + return xButtonLine; + } + + _createMoveButtonLeft () { + let xButton = createNode("div", {className: "grammalecte_move_button", textContent: "‹"}); + xButton.onclick = function () { this.stickToLeft(); }.bind(this); + return xButton; + } + + _createMoveButtonMiddle () { + let xButton = createNode("div", {className: "grammalecte_move_button", textContent: "·"}); + xButton.onclick = function () { this.center(); }.bind(this); + return xButton; + } + + _createMoveButtonRight () { + let xButton = createNode("div", {className: "grammalecte_move_button", textContent: "›"}); + xButton.onclick = function () { this.stickToRight(); }.bind(this); + return xButton; + } + + _createMoveButtonTop () { + let xButton = createNode("div", {className: "grammalecte_move_button", textContent: "^"}); + xButton.onclick = function () { this.stickToTop(); }.bind(this); + return xButton; + } + + _createMoveButtonBottom () { + let xButton = createNode("div", {className: "grammalecte_move_button", textContent: "ˇ"}); + xButton.onclick = function () { this.stickToBottom(); }.bind(this); + return xButton; + } + + _createCloseButton () { + let xButton = createNode("div", {className: "grammalecte_close_button", textContent: "×"}); + xButton.onclick = function () { this.hide(); }.bind(this); // better than writing “let that = this;” before the function? + return xButton; + } + + setContent (xNode) { + this.xContentNode.appendChild(xNode); + } + + insertIntoPage () { + document.body.appendChild(this.xPanelNode); + } + + show () { + this.xPanelNode.style.display = "block"; + } + + hide () { + this.xPanelNode.style.display = "none"; + } + + center () { + this.xPanelNode.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;`; + } + + stickToLeft () { + let nHeight = window.innerHeight-100; + this.xPanelNode.style = `top: 50%; left: -10px; width: ${this.nWidth}px; height: ${nHeight}px; margin-top: -${nHeight/2}px;`; + } + + stickToRight () { + let nHeight = window.innerHeight-100; + this.xPanelNode.style = `top: 50%; right: -10px; width: ${this.nWidth}px; height: ${nHeight}px; margin-top: -${nHeight/2}px;`; + } + + stickToTop () { + let nWidth = Math.floor(window.innerWidth/2); + this.xPanelNode.style = `top: -10px; left: 50%; width: ${nWidth}px; height: ${Math.floor(window.innerHeight*0.45)}px; margin-left: -${nWidth/2}px;`; + } + + stickToBottom () { + let nWidth = Math.floor(window.innerWidth/2); + this.xPanelNode.style = `bottom: -10px; left: 50%; width: ${nWidth}px; height: ${Math.floor(window.innerHeight*0.45)}px; margin-left: -${nWidth/2}px;`; + } + + reduce () { + // todo + } + + logInnerHTML () { + // for debugging + console.log(this.xPanelNode.innerHTML); + } } /* Common functions Index: gc_lang/fr/webext/content_scripts/text_formatter.js ================================================================== --- gc_lang/fr/webext/content_scripts/text_formatter.js +++ gc_lang/fr/webext/content_scripts/text_formatter.js @@ -56,12 +56,12 @@ xOptions.appendChild(xColumn1); xOptions.appendChild(xColumn2); // Actions let xActions = createNode("div", {id: "grammalecte_tf_actions"}); xActions.appendChild(createNode("div", {id: "grammalecte_tf_reset", textContent: "Par défaut", className: "grammalecte_button", style: "background-color: hsl(210, 50%, 50%)"})); - xActions.appendChild(createNode("progress", {id: "grammalecte_progressbar", style: "width: 25px"})); - xActions.appendChild(createNode("span", {id: "grammalecte_time_res"})); + xActions.appendChild(createNode("progress", {id: "grammalecte_tf_progressbar"})); + xActions.appendChild(createNode("span", {id: "grammalecte_tf_time_res"})); xActions.appendChild(createNode("div", {id: "grammalecte_tf_apply", textContent: "Appliquer", className: "grammalecte_button", style: "background-color: hsl(180, 50%, 50%)"})); //xActions.appendChild(createNode("div", {id: "grammalecte_infomsg", textContent: "blabla"})); // create result xTFNode.appendChild(xOptions); xTFNode.appendChild(xActions);