Grammalecte  Check-in [b8188ff0e5]

Overview
Comment:[fx] gc panel: tooltip > rework appearance and access to the db
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk | fx
Files: files | file ages | folders
SHA3-256: b8188ff0e5634a9b9e07a16a6ea3c4ba8d5ea92331a6a6648f59afe9816db707
User & Date: olr on 2020-04-18 12:32:50
Other Links: manifest | tags
Context
2020-04-18
13:30
[build] save hash of rules file in data cache, automatically use cache if rules file hasn’t been modified check-in: e31ec0bfe5 user: olr tags: build, trunk
12:32
[fx] gc panel: tooltip > rework appearance and access to the db check-in: b8188ff0e5 user: olr tags: fx, trunk
11:44
[fr] ajustements check-in: da60f5b4eb user: olr tags: fr, trunk
Changes

Modified gc_lang/fr/webext/content_scripts/panel_gc.css from [9864829a36] to [9a73dd19f8].

   100    100   div#grammalecte_tooltip_message_block {
   101    101       margin: 0;
   102    102       padding: 5px 10px 5px 10px;
   103    103       background-color: hsl(210, 50%, 30%);
   104    104       color: hsl(210, 50%, 96%);
   105    105   }
   106    106   div#grammalecte_tooltip_actions {
          107  +    display: flex;
          108  +    justify-content: space-between;
   107    109       margin: 0;
   108    110       padding: 7px 10px 5px 10px;
   109    111       background-color: hsl(210, 50%, 30%);
   110    112       color: hsl(210, 50%, 96%);
   111    113   }
   112    114   div#grammalecte_tooltip_rule_id {
   113    115       display: none;
................................................................................
   140    142       text-decoration: none;
   141    143   }
   142    144   div#grammalecte_tooltip_ignore:hover {
   143    145       background-color: hsl(30, 30%, 50%);
   144    146       color: hsla(0, 0%, 100%, 1);
   145    147       text-shadow: 0 0 3px hsl(30, 30%, 60%);
   146    148   }
   147         -div#grammalecte_tooltip_url, div#grammalecte_tooltip_db_search {
          149  +div#grammalecte_tooltip_url {
   148    150       display: inline-block;
   149    151       margin-left: 10px;
   150    152       padding: 1px 5px;
   151    153       background-color: hsl(210, 50%, 50%);
   152    154       color: hsla(210, 0%, 96%, 1);
   153    155       border-radius: 2px;
   154    156       cursor: pointer;
   155    157       font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
   156    158       font-size: 12px;
   157    159       text-decoration: none;
   158    160   }
   159         -div#grammalecte_tooltip_url:hover, div#grammalecte_tooltip_db_search:hover {
          161  +div#grammalecte_tooltip_url:hover {
   160    162       background-color: hsl(210, 50%, 60%);
   161    163       color: hsla(0, 0%, 100%, 1);
   162    164       text-shadow: 0 0 3px hsl(210, 30%, 60%);
   163    165   }
          166  +div#grammalecte_tooltip_db_search {
          167  +    display: inline-block;
          168  +    margin-left: 10px;
          169  +    padding: 1px 5px;
          170  +    /*background-color: hsl(210, 50%, 50%);*/
          171  +    color: hsla(210, 0%, 96%, .1);
          172  +    border-radius: 2px;
          173  +    cursor: pointer;
          174  +    font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
          175  +    font-size: 12px;
          176  +    text-decoration: none;
          177  +}
          178  +div#grammalecte_tooltip_db_search:hover {
          179  +    background-color: hsla(210, 50%, 50%, .1);
          180  +    color: hsla(0, 0%, 100%, .2);
          181  +    text-shadow: 0 0 3px hsla(210, 30%, 60%, .2);
          182  +}
   164    183   
   165    184   div#grammalecte_tooltip_sugg_title {
   166    185       padding: 0 10px;
   167    186       background-color: hsl(210, 10%, 90%);
   168    187       color: hsl(210, 50%, 30%);
   169    188       font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
   170    189       font-size: 10px;

Modified gc_lang/fr/webext/content_scripts/panel_gc.js from [229ed751b6] to [2282aa660c].

   790    790   
   791    791   
   792    792   class GrammalecteTooltip {
   793    793   
   794    794       constructor (xParent, xGCPanelContent) {
   795    795           this.xParent = xParent;
   796    796           this.sErrorId = null;
   797         -        this.bDebug = false;
   798    797           this.xTooltip = oGrammalecte.createNode("div", {id: "grammalecte_tooltip"});
   799    798           this.xTooltipArrow = oGrammalecte.createNode("img", {
   800    799               id: "grammalecte_tooltip_arrow",
   801    800               src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xNzNun2MAAAAnSURBVChTY/j//z8cq/kW/wdhZDEMSXRFWCVhGKwAmwQyHngFxf8B5fOGYfeFpYoAAAAASUVORK5CYII=",
   802    801               alt: "^",
   803    802           });
   804    803           // message
................................................................................
   810    809           this.xTooltip.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_sugg_title", textContent: "SUGGESTIONS :"}));
   811    810           this.xTooltipSuggBlock = oGrammalecte.createNode("div", {id: "grammalecte_tooltip_sugg_block"});
   812    811           this.xTooltip.appendChild(this.xTooltipSuggBlock);
   813    812           // actions
   814    813           let xActions = oGrammalecte.createNode("div", {id: "grammalecte_tooltip_actions"});
   815    814           xActions.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_ignore", textContent: "Ignorer"}));
   816    815           xActions.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_url", textContent: "Voulez-vous en savoir plus ?…"}, {url: ""}));
   817         -        xActions.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_db_search", textContent: " ››› base de données"}, {url: ""}));
          816  +        xActions.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_db_search", textContent: "››"}, {url: ""}));
   818    817           this.xTooltip.appendChild(xActions);
   819    818           // add tooltip to the page
   820    819           xGCPanelContent.appendChild(this.xTooltip);
   821    820           xGCPanelContent.appendChild(this.xTooltipArrow);
   822    821       }
   823    822   
   824    823       show (xParagraph, sNodeErrorId) {  // err
................................................................................
   833    832               this.xTooltipArrow.style.top = (xNodeErr.offsetTop + 16) + "px";
   834    833               let nUsefulErrorWidth = ((xNodeErr.offsetLeft + xNodeErr.offsetWidth) > nArrowLimit) ? (nArrowLimit - xNodeErr.offsetLeft) : xNodeErr.offsetWidth;
   835    834               this.xTooltipArrow.style.left = (xNodeErr.offsetLeft + Math.floor((nUsefulErrorWidth / 2)) - 4) + "px"; // 4 is half the width of the arrow.
   836    835               this.xTooltip.style.top = (xNodeErr.offsetTop + 20) + "px";
   837    836               this.xTooltip.style.left = (xNodeErr.offsetLeft > nTooltipLeftLimit) ? nTooltipLeftLimit + "px" : xNodeErr.offsetLeft + "px";
   838    837               if (xNodeErr.dataset.error_type === "grammar") {
   839    838                   // grammar error
   840         -                this.xParent.getElementById("grammalecte_tooltip_db_search").style.display = "none";
   841    839                   if (xNodeErr.dataset.gc_message.includes(" ##")) {
   842         -                    this.bDebug = true;
   843    840                       // display rule id
   844    841                       let n = xNodeErr.dataset.gc_message.indexOf(" ##");
   845    842                       this.xParent.getElementById("grammalecte_tooltip_message").textContent = xNodeErr.dataset.gc_message.slice(0, n);
   846    843                       this.xParent.getElementById("grammalecte_tooltip_rule_id").textContent = "Règle : " + xNodeErr.dataset.gc_message.slice(n+2);
   847    844                       this.xParent.getElementById("grammalecte_tooltip_rule_id").style.display = "block";
   848    845                   } else {
   849         -                    this.bDebug = false;
   850    846                       this.xParent.getElementById("grammalecte_tooltip_message").textContent = xNodeErr.dataset.gc_message;
   851    847                       this.xParent.getElementById("grammalecte_tooltip_rule_id").style.display = "none";
   852    848                   }
   853    849                   if (xNodeErr.dataset.gc_url != "") {
   854    850                       this.xParent.getElementById("grammalecte_tooltip_url").dataset.url = xNodeErr.dataset.gc_url;
   855    851                       this.xParent.getElementById("grammalecte_tooltip_url").style.display = "inline";
   856    852                   } else {
   857    853                       this.xParent.getElementById("grammalecte_tooltip_url").dataset.url = "";
   858    854                       this.xParent.getElementById("grammalecte_tooltip_url").style.display = "none";
   859    855                   }
          856  +                this.xParent.getElementById("grammalecte_tooltip_db_search").style.display = "none";
   860    857                   this.xParent.getElementById("grammalecte_tooltip_ignore").dataset.error_id = xNodeErr.dataset.error_id;
   861    858                   let iSugg = 0;
   862    859                   this.clearSuggestionBlock();
   863    860                   if (xNodeErr.dataset.suggestions.length > 0) {
   864    861                       for (let sSugg of xNodeErr.dataset.suggestions.split("|")) {
   865    862                           this.xTooltipSuggBlock.appendChild(this._createSuggestion(xNodeErr.dataset.error_id, 0, iSugg, sSugg));
   866    863                           this.xTooltipSuggBlock.appendChild(document.createTextNode(" "));
................................................................................
   873    870               if (xNodeErr.dataset.error_type === "spelling") {
   874    871                   // spelling mistake
   875    872                   this.xParent.getElementById("grammalecte_tooltip_message").textContent = "Mot inconnu du dictionnaire.";
   876    873                   this.xParent.getElementById("grammalecte_tooltip_ignore").dataset.error_id = xNodeErr.dataset.error_id;
   877    874                   this.xParent.getElementById("grammalecte_tooltip_rule_id").style.display = "none";
   878    875                   this.xParent.getElementById("grammalecte_tooltip_url").dataset.url = "";
   879    876                   this.xParent.getElementById("grammalecte_tooltip_url").style.display = "none";
   880         -                if (this.bDebug) {
   881         -                    this.xParent.getElementById("grammalecte_tooltip_db_search").style.display = "inline";
   882         -                    this.xParent.getElementById("grammalecte_tooltip_db_search").dataset.url = "https://grammalecte.net/dictionary.php?prj=fr&lemma="+xNodeErr.textContent;
   883         -                } else {
   884         -                    this.xParent.getElementById("grammalecte_tooltip_db_search").style.display = "none";
   885         -                }
          877  +                this.xParent.getElementById("grammalecte_tooltip_db_search").style.display = "inline-block";
          878  +                this.xParent.getElementById("grammalecte_tooltip_db_search").dataset.url = "https://grammalecte.net/dictionary.php?prj=fr&lemma="+xNodeErr.textContent;
   886    879                   this.clearSuggestionBlock();
   887    880                   this.xTooltipSuggBlock.textContent = "Recherche de graphies possibles…";
   888    881                   oGrammalecteBackgroundPort.getSpellSuggestions(xNodeErr.textContent, "__GrammalectePanel__", xNodeErr.dataset.error_id);
   889    882               }
   890    883               this.xTooltipArrow.style.display = "block";
   891    884               this.xTooltip.style.display = "block";
   892    885           }
................................................................................
   897    890   
   898    891       clearSuggestionBlock () {
   899    892           while (this.xTooltipSuggBlock.firstChild) {
   900    893               this.xTooltipSuggBlock.removeChild(this.xTooltipSuggBlock.firstChild);
   901    894           }
   902    895       }
   903    896   
   904         -    setTooltipColor () {
   905         -        // todo
   906         -    }
   907         -
   908    897       hide () {
   909    898           this.xTooltipArrow.style.display = "none";
   910    899           this.xTooltip.style.display = "none";
   911    900       }
   912    901   
   913    902       _createSuggestion (sErrorId, iSuggBlock, iSugg, sSugg) {
   914    903           let xNodeSugg = document.createElement("div");