Grammalecte  Check-in [e4791e17bb]

Overview
Comment:[fx] gc panel: CSS adjustements and auto-refresh adjustements
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk | fx
Files: files | file ages | folders
SHA3-256: e4791e17bb2802d8a6bb9bb5252ca2685591d260f0314e4f0b3fdde1ade71336
User & Date: olr on 2019-05-20 12:18:15
Other Links: manifest | tags
Context
2019-05-20
13:22
[fx] gc panel: refresh with blur event (not a so good idea?) check-in: e1f9580c26 user: olr tags: fx, trunk
12:18
[fx] gc panel: CSS adjustements and auto-refresh adjustements check-in: e4791e17bb user: olr tags: fx, trunk
08:40
[fx] gc panel: set size and position update check-in: a0ef5bac85 user: olr tags: fx, trunk
Changes

Modified gc_lang/fr/webext/content_scripts/panel.css from [8f13a1fabe] to [e93a7554f8].

    69     69       font-size: 14px;
    70     70       font-weight: bold;
    71     71       text-align: center;
    72     72       cursor: pointer;
    73     73   }
    74     74   div.grammalecte_copy_button {
    75     75       border-radius: 2px;
    76         -    color: hsla(210, 0%, 100%, .5);
           76  +    color: hsla(210, 0%, 100%, .4);
    77     77       margin-right: 10px;
    78     78   }
    79     79   div.grammalecte_copy_button:hover {
    80         -    background-color: hsl(210, 90%, 35%, .5);
           80  +    background-color: hsl(210, 50%, 55%);
    81     81       color: hsla(210, 0%, 100%, 1);
    82     82   }
    83     83   div.grammalecte_move_button {
    84     84       padding: 1px 5px;
    85     85       border-radius: 16px;
    86     86       color: hsl(180, 0%, 100%);
    87         -    opacity: .5;
           87  +    opacity: .2;
    88     88   }
    89     89   div.grammalecte_move_button_changeWidth {
    90         -    padding: 3px 5px;
           90  +    padding: 1px 10px;
           91  +    background: center no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path fill="%23fff" d="m 6,2 4,4 -4,4"/><path fill="%23fff" d="m 0,6 4,4 v -8"/></svg>');
    91     92   }
    92     93   div.grammalecte_move_button_changeHeight {
    93         -    padding: 3px 5px;
           94  +    padding: 1px 10px;
    94     95       margin-right: 10px;
           96  +    background: center no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path fill="%23fff" d="m 6,0 4,4 h -8"/><path fill="%23fff" d="m 2,6 4,4 4,-4"/></svg>');
    95     97   }
    96     98   div.grammalecte_move_button_center {
    97     99       padding: 1px 10px;
    98    100       background: center no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><circle fill="%23fff" cx="6" cy="6" r="4"/></svg>') ;
    99    101   }
   100    102   div.grammalecte_move_button_up {
   101    103       padding: 1px 10px;
   102    104       background: center no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path fill="%23fff" d="m 6,2 6,6 h -12"/></svg>');
   103    105   }
   104    106   div.grammalecte_move_button_right {
   105    107       padding: 1px 10px;
   106         -    background: center no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path fill="%23fff" d="m 2,0 6,6 -6,6"/></svg>');
          108  +    background: center no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path fill="%23fff" d="m 4,0 6,6 -6,6"/></svg>');
   107    109   }
   108    110   div.grammalecte_move_button_down {
   109    111       padding: 1px 10px;
   110         -    background: center no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path fill="%23fff" d="m 0,2 6,6 6,-6"/></svg>');
          112  +    background: center no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path fill="%23fff" d="m 0,4 6,6 6,-6"/></svg>');
   111    113   }
   112    114   div.grammalecte_move_button_left {
   113    115       padding: 1px 10px;
   114    116       background: center no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path fill="%23fff" d="m 2,6 6,6 v -12"/></svg>');
   115    117   }
   116    118   div.grammalecte_move_button:hover {
   117    119       background-color: hsla(180, 80%, 50%, .2);

Modified gc_lang/fr/webext/content_scripts/panel.js from [84014faa6e] to [a63de2133b].

    64     64           return xImg;
    65     65       }
    66     66   
    67     67       _createButtons () {
    68     68           let xButtonLine = oGrammalecte.createNode("div", {className: "grammalecte_panel_commands"});
    69     69           xButtonLine.appendChild(this.xWaitIcon);
    70     70           if (this.sId === "grammalecte_gc_panel") {
    71         -            xButtonLine.appendChild(this._createCopyButton());
           71  +            this.xClipboardButton = this._createCopyButton();
           72  +            xButtonLine.appendChild(this.xClipboardButton);
    72     73           }
    73     74           if (this.bFlexible) {
    74         -            this.xWidthButton = this._createMoveButton("changeWidth", "L", "Étendre en largeur");
    75         -            this.xHeightButton = this._createMoveButton("changeHeight", "H", "Étendre en hauteur");
           75  +            this.xWidthButton = this._createMoveButton("changeWidth", " ", "Étendre en largeur");
           76  +            this.xHeightButton = this._createMoveButton("changeHeight", " ", "Étendre en hauteur");
    76     77               xButtonLine.appendChild(this.xWidthButton);
    77     78               xButtonLine.appendChild(this.xHeightButton);
    78     79           }
    79     80           xButtonLine.appendChild(this._createMoveButton("up", " ", "Monter")); // use char ⏶ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
    80     81           xButtonLine.appendChild(this._createMoveButton("left", " ", "À gauche")); // use char ⏴ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
    81     82           xButtonLine.appendChild(this._createMoveButton("center", " ", "Centrer")); // char • can be used already
    82     83           xButtonLine.appendChild(this._createMoveButton("right", " ", "À droite")); // use char ⏵ when Windows 10 be vast majority of OS (Trebuchet MS not updated on other OS)
................................................................................
   181    182           this.bVertStrech = !this.bVertStrech;
   182    183           this.setSizeAndPosition();
   183    184       }
   184    185   
   185    186       setSizeAndPosition () {
   186    187           // size
   187    188           if (this.xWidthButton && this.xHeightButton) {
   188         -            this.xWidthButton.style.opacity = (this.bHorizStrech) ? .9 : .5;
   189         -            this.xHeightButton.style.opacity = (this.bVertStrech) ? .9 : .5;
          189  +            this.xWidthButton.style.opacity = (this.bHorizStrech) ? ".9" : "";
          190  +            this.xHeightButton.style.opacity = (this.bVertStrech) ? ".9" : "";
   190    191           }
   191    192           let nWidth = Math.min(this.nWidth, window.innerWidth-200);
   192    193           let nHeight = ([4, 5, 6].includes(this.nPosition)) ? Math.min(this.nHeight, window.innerHeight-100) : Math.floor(window.innerHeight*0.45);
   193    194           if (this.bFlexible) {
   194    195               if (this.bHorizStrech) {
   195    196                   nWidth = Math.min(this.nWidth*1.33, window.innerWidth-200);
   196    197               }

Modified gc_lang/fr/webext/content_scripts/panel_gc.js from [77a59c8edf] to [a4ec903680].

   213    213                   xActionsBar.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_check" + oResult.iParaNum, className: "grammalecte_paragraph_button grammalecte_green", textContent: "↻", title: "Réanalyser…"}, {para_num: oResult.iParaNum}));
   214    214                   xActionsBar.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_hide" + oResult.iParaNum, className: "grammalecte_paragraph_button grammalecte_red", textContent: "×", title: "Cacher", style: "font-weight: bold;"}));
   215    215                   // paragraph
   216    216                   let xParagraph = oGrammalecte.createNode("p", {id: "grammalecte_paragraph"+oResult.iParaNum, className: "grammalecte_paragraph", lang: "fr", contentEditable: "true"}, {para_num: oResult.iParaNum});
   217    217                   xParagraph.setAttribute("spellcheck", "false"); // doesn’t seem possible to use “spellcheck” as a common attribute.
   218    218                   xParagraph.dataset.timer_id = "0";
   219    219                   xParagraph.addEventListener("input", function (xEvent) {
          220  +                    // timer for refreshing analysis
   220    221                       window.clearTimeout(parseInt(xParagraph.dataset.timer_id));
   221    222                       xParagraph.dataset.timer_id = window.setTimeout(this.recheckParagraph.bind(this), 3000, oResult.iParaNum);
          223  +                    // save caret position
   222    224                       let [nStart, nEnd] = oGrammalecte.getCaretPosition(xParagraph);
   223    225                       xParagraph.dataset.caret_position_start = nStart;
   224    226                       xParagraph.dataset.caret_position_end = nEnd;
          227  +                    // write text
   225    228                       this.oTextControl.setParagraph(parseInt(xEvent.target.dataset.para_num), this.purgeText(xEvent.target.textContent));
   226    229                       this.oTextControl.write();
   227    230                   }.bind(this)
          231  +                , true);
          232  +                xParagraph.addEventListener("blur", function (xEvent) {
          233  +                    // remove timer for refreshing analysis
          234  +                    window.clearTimeout(parseInt(xParagraph.dataset.timer_id));
          235  +                    // unset caret position
          236  +                    xParagraph.dataset.caret_position_start = "-1";
          237  +                    xParagraph.dataset.caret_position_end = "-1";
          238  +                    // recheck
          239  +                    this.recheckParagraph(oResult.iParaNum);
          240  +                }.bind(this)
   228    241                   , true);
   229    242                   this._tagParagraph(xParagraph, oResult.sParagraph, oResult.iParaNum, oResult.aGrammErr, oResult.aSpellErr);
   230    243                   // creation
   231    244                   xNodeDiv.appendChild(xActionsBar);
   232    245                   xNodeDiv.appendChild(xParagraph);
   233    246                   this.xParagraphList.appendChild(xNodeDiv);
   234    247               }
................................................................................
   331    344           this.xParent.getElementById("grammalecte_check"+xParagraph.dataset.para_num).style.backgroundColor = "hsl(0, 50%, 50%)";
   332    345           this.xParent.getElementById("grammalecte_check"+xParagraph.dataset.para_num).style.boxShadow = "0 0 0 3px hsla(0, 0%, 50%, .2)";
   333    346           this.xParent.getElementById("grammalecte_check"+xParagraph.dataset.para_num).style.animation = "grammalecte-pulse 1s linear infinite";
   334    347       }
   335    348   
   336    349       freeParagraph (xParagraph) {
   337    350           xParagraph.contentEditable = "true";
   338         -        let nStart = parseInt(xParagraph.dataset.caret_position_start);
   339         -        let nEnd = parseInt(xParagraph.dataset.caret_position_end);
   340         -        oGrammalecte.setCaretPosition(xParagraph, nStart, nEnd);
          351  +        if (xParagraph.dataset.caret_position_start !== "-1") {
          352  +            let nStart = parseInt(xParagraph.dataset.caret_position_start);
          353  +            let nEnd = parseInt(xParagraph.dataset.caret_position_end);
          354  +            oGrammalecte.setCaretPosition(xParagraph, nStart, nEnd);
          355  +        }
   341    356           this.xParent.getElementById("grammalecte_check"+xParagraph.dataset.para_num).textContent = "↻";
   342    357           this.xParent.getElementById("grammalecte_check"+xParagraph.dataset.para_num).style.backgroundColor = "";
   343    358           this.xParent.getElementById("grammalecte_check"+xParagraph.dataset.para_num).style.animation = "";
   344    359           setTimeout(() => { this.xParent.getElementById("grammalecte_check"+xParagraph.dataset.para_num).style.boxShadow = ""; }, 500);
   345    360       }
   346    361   
   347    362       applySuggestion (sNodeSuggId) { // sugg
................................................................................
   385    400           let xNode = oGrammalecte.createNode("div", {className: "grammalecte_panel_flow_message", textContent: sMessage});
   386    401           this.xParagraphList.appendChild(xNode);
   387    402       }
   388    403   
   389    404       copyTextToClipboard () {
   390    405           this.startWaitIcon();
   391    406           try {
   392         -
   393    407               let sText = "";
   394    408               // Dans un shadow, <this.xParent.getElementsByClassName> n’existe pas.
   395    409               let xElem = this.xParent.getElementById("grammalecte_gc_panel");
   396    410               for (let xNode of xElem.getElementsByClassName("grammalecte_paragraph")) {
   397    411                   sText += xNode.textContent + "\n";
   398    412               }
   399    413               this._sendTextToClipboard(sText);
   400         -
   401    414           }
   402    415           catch (e) {
   403    416               showError(e);
   404    417           }
   405    418           this.stopWaitIcon();
   406    419       }
   407    420   
   408    421       _sendTextToClipboard (sText)  {
   409         -        let xClipboardButton = this.xParent.getElementById("grammalecte_clipboard_button");
   410         -        xClipboardButton.textContent = "⇒ presse-papiers";
          422  +        this.xClipboardButton.textContent = "⇒ presse-papiers";
   411    423           // Firefox 63+, Chrome 66+
   412    424           // Working draft: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
   413         -        navigator.clipboard.writeText(sText)
   414         -        .then(
   415         -            (res) => { window.setTimeout(() => { xClipboardButton.textContent = "📋"; }, 2000); }
   416         -        )
   417         -        .catch(
   418         -            (e) => { console.error(e); this._sendTextToClipboard(sText, xClipboardButton); }
   419         -        );
          425  +        if (navigator.clipboard && navigator.clipboard.writeText) {
          426  +            navigator.clipboard.writeText(sText)
          427  +            .then(
          428  +                (res) => { window.setTimeout(() => { this.xClipboardButton.textContent = "📋"; }, 2000); }
          429  +            )
          430  +            .catch(
          431  +                (e) => { console.error(e); this._sendTextToClipboard(sText); }
          432  +            );
          433  +        } else {
          434  +            this._sendTextToClipboardFallback(sText);
          435  +        }
   420    436       }
   421    437   
   422         -    _sendTextToClipboardFallback (sText, xClipboardButton) {
          438  +    _sendTextToClipboardFallback (sText) {
   423    439           try {
   424    440               // Copy to clipboard fallback
   425    441               // recipe from https://github.com/mdn/webextensions-examples/blob/master/context-menu-copy-link-with-types/clipboard-helper.js
   426    442               function setClipboardData (xEvent) {
   427    443                   document.removeEventListener("copy", setClipboardData, true);
   428    444                   xEvent.stopImmediatePropagation();
   429    445                   xEvent.preventDefault();
   430    446                   xEvent.clipboardData.setData("text/plain", sText);
   431    447               }
   432    448               document.addEventListener("copy", setClipboardData, true);
   433    449               document.execCommand("copy");
   434         -            window.setTimeout(() => { xClipboardButton.textContent = "📋"; }, 2000);
          450  +            window.setTimeout(() => { this.xClipboardButton.textContent = "📋"; }, 2000);
   435    451           }
   436    452           catch (e) {
   437    453               console.error(e);
   438    454           }
   439    455       }
   440    456   
   441    457       // Lexicographer