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: trunk, build
12:32
[fx] gc panel: tooltip > rework appearance and access to the db check-in: b8188ff0e5 user: olr tags: trunk, fx
11:44
[fr] ajustements check-in: da60f5b4eb user: olr tags: trunk, fr
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

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

︙︙
100
101
102
103
104
105
106


107
108
109
110
111
112
113

div#grammalecte_tooltip_message_block {
    margin: 0;
    padding: 5px 10px 5px 10px;
    background-color: hsl(210, 50%, 30%);
    color: hsl(210, 50%, 96%);
}
div#grammalecte_tooltip_actions {


    margin: 0;
    padding: 7px 10px 5px 10px;
    background-color: hsl(210, 50%, 30%);
    color: hsl(210, 50%, 96%);
}
div#grammalecte_tooltip_rule_id {
    display: none;








>
>








100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

div#grammalecte_tooltip_message_block {
    margin: 0;
    padding: 5px 10px 5px 10px;
    background-color: hsl(210, 50%, 30%);
    color: hsl(210, 50%, 96%);
}
div#grammalecte_tooltip_actions {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 7px 10px 5px 10px;
    background-color: hsl(210, 50%, 30%);
    color: hsl(210, 50%, 96%);
}
div#grammalecte_tooltip_rule_id {
    display: none;
︙︙
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

















164
165
166
167
168
169
170

    text-decoration: none;
}
div#grammalecte_tooltip_ignore:hover {
    background-color: hsl(30, 30%, 50%);
    color: hsla(0, 0%, 100%, 1);
    text-shadow: 0 0 3px hsl(30, 30%, 60%);
}
div#grammalecte_tooltip_url, div#grammalecte_tooltip_db_search {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 5px;
    background-color: hsl(210, 50%, 50%);
    color: hsla(210, 0%, 96%, 1);
    border-radius: 2px;
    cursor: pointer;
    font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    font-size: 12px;
    text-decoration: none;
}
div#grammalecte_tooltip_url:hover, div#grammalecte_tooltip_db_search:hover {
    background-color: hsl(210, 50%, 60%);
    color: hsla(0, 0%, 100%, 1);
    text-shadow: 0 0 3px hsl(210, 30%, 60%);
}


















div#grammalecte_tooltip_sugg_title {
    padding: 0 10px;
    background-color: hsl(210, 10%, 90%);
    color: hsl(210, 50%, 30%);
    font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    font-size: 10px;








|











|




>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>








142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189

    text-decoration: none;
}
div#grammalecte_tooltip_ignore:hover {
    background-color: hsl(30, 30%, 50%);
    color: hsla(0, 0%, 100%, 1);
    text-shadow: 0 0 3px hsl(30, 30%, 60%);
}
div#grammalecte_tooltip_url {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 5px;
    background-color: hsl(210, 50%, 50%);
    color: hsla(210, 0%, 96%, 1);
    border-radius: 2px;
    cursor: pointer;
    font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    font-size: 12px;
    text-decoration: none;
}
div#grammalecte_tooltip_url:hover {
    background-color: hsl(210, 50%, 60%);
    color: hsla(0, 0%, 100%, 1);
    text-shadow: 0 0 3px hsl(210, 30%, 60%);
}
div#grammalecte_tooltip_db_search {
    display: inline-block;
    margin-left: 10px;
    padding: 1px 5px;
    /*background-color: hsl(210, 50%, 50%);*/
    color: hsla(210, 0%, 96%, .1);
    border-radius: 2px;
    cursor: pointer;
    font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    font-size: 12px;
    text-decoration: none;
}
div#grammalecte_tooltip_db_search:hover {
    background-color: hsla(210, 50%, 50%, .1);
    color: hsla(0, 0%, 100%, .2);
    text-shadow: 0 0 3px hsla(210, 30%, 60%, .2);
}

div#grammalecte_tooltip_sugg_title {
    padding: 0 10px;
    background-color: hsl(210, 10%, 90%);
    color: hsl(210, 50%, 30%);
    font-family: Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    font-size: 10px;
︙︙

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

︙︙
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824



class GrammalecteTooltip {

    constructor (xParent, xGCPanelContent) {
        this.xParent = xParent;
        this.sErrorId = null;
        this.bDebug = false;
        this.xTooltip = oGrammalecte.createNode("div", {id: "grammalecte_tooltip"});
        this.xTooltipArrow = oGrammalecte.createNode("img", {
            id: "grammalecte_tooltip_arrow",
            src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xNzNun2MAAAAnSURBVChTY/j//z8cq/kW/wdhZDEMSXRFWCVhGKwAmwQyHngFxf8B5fOGYfeFpYoAAAAASUVORK5CYII=",
            alt: "^",
        });
        // message
        let xMessageBlock = oGrammalecte.createNode("div", {id: "grammalecte_tooltip_message_block"});
        xMessageBlock.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_rule_id"}));
        xMessageBlock.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_message", textContent: "Erreur."}));
        this.xTooltip.appendChild(xMessageBlock);
        // suggestions
        this.xTooltip.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_sugg_title", textContent: "SUGGESTIONS :"}));
        this.xTooltipSuggBlock = oGrammalecte.createNode("div", {id: "grammalecte_tooltip_sugg_block"});
        this.xTooltip.appendChild(this.xTooltipSuggBlock);
        // actions
        let xActions = oGrammalecte.createNode("div", {id: "grammalecte_tooltip_actions"});
        xActions.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_ignore", textContent: "Ignorer"}));
        xActions.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_url", textContent: "Voulez-vous en savoir plus ?…"}, {url: ""}));
        xActions.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_db_search", textContent: " ››› base de données"}, {url: ""}));
        this.xTooltip.appendChild(xActions);
        // add tooltip to the page
        xGCPanelContent.appendChild(this.xTooltip);
        xGCPanelContent.appendChild(this.xTooltipArrow);
    }

    show (xParagraph, sNodeErrorId) {  // err








<



















|








790
791
792
793
794
795
796

797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823



class GrammalecteTooltip {

    constructor (xParent, xGCPanelContent) {
        this.xParent = xParent;
        this.sErrorId = null;

        this.xTooltip = oGrammalecte.createNode("div", {id: "grammalecte_tooltip"});
        this.xTooltipArrow = oGrammalecte.createNode("img", {
            id: "grammalecte_tooltip_arrow",
            src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xNzNun2MAAAAnSURBVChTY/j//z8cq/kW/wdhZDEMSXRFWCVhGKwAmwQyHngFxf8B5fOGYfeFpYoAAAAASUVORK5CYII=",
            alt: "^",
        });
        // message
        let xMessageBlock = oGrammalecte.createNode("div", {id: "grammalecte_tooltip_message_block"});
        xMessageBlock.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_rule_id"}));
        xMessageBlock.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_message", textContent: "Erreur."}));
        this.xTooltip.appendChild(xMessageBlock);
        // suggestions
        this.xTooltip.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_sugg_title", textContent: "SUGGESTIONS :"}));
        this.xTooltipSuggBlock = oGrammalecte.createNode("div", {id: "grammalecte_tooltip_sugg_block"});
        this.xTooltip.appendChild(this.xTooltipSuggBlock);
        // actions
        let xActions = oGrammalecte.createNode("div", {id: "grammalecte_tooltip_actions"});
        xActions.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_ignore", textContent: "Ignorer"}));
        xActions.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_url", textContent: "Voulez-vous en savoir plus ?…"}, {url: ""}));
        xActions.appendChild(oGrammalecte.createNode("div", {id: "grammalecte_tooltip_db_search", textContent: "››"}, {url: ""}));
        this.xTooltip.appendChild(xActions);
        // add tooltip to the page
        xGCPanelContent.appendChild(this.xTooltip);
        xGCPanelContent.appendChild(this.xTooltipArrow);
    }

    show (xParagraph, sNodeErrorId) {  // err
︙︙
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859

860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914

            this.xTooltipArrow.style.top = (xNodeErr.offsetTop + 16) + "px";
            let nUsefulErrorWidth = ((xNodeErr.offsetLeft + xNodeErr.offsetWidth) > nArrowLimit) ? (nArrowLimit - xNodeErr.offsetLeft) : xNodeErr.offsetWidth;
            this.xTooltipArrow.style.left = (xNodeErr.offsetLeft + Math.floor((nUsefulErrorWidth / 2)) - 4) + "px"; // 4 is half the width of the arrow.
            this.xTooltip.style.top = (xNodeErr.offsetTop + 20) + "px";
            this.xTooltip.style.left = (xNodeErr.offsetLeft > nTooltipLeftLimit) ? nTooltipLeftLimit + "px" : xNodeErr.offsetLeft + "px";
            if (xNodeErr.dataset.error_type === "grammar") {
                // grammar error
                this.xParent.getElementById("grammalecte_tooltip_db_search").style.display = "none";
                if (xNodeErr.dataset.gc_message.includes(" ##")) {
                    this.bDebug = true;
                    // display rule id
                    let n = xNodeErr.dataset.gc_message.indexOf(" ##");
                    this.xParent.getElementById("grammalecte_tooltip_message").textContent = xNodeErr.dataset.gc_message.slice(0, n);
                    this.xParent.getElementById("grammalecte_tooltip_rule_id").textContent = "Règle : " + xNodeErr.dataset.gc_message.slice(n+2);
                    this.xParent.getElementById("grammalecte_tooltip_rule_id").style.display = "block";
                } else {
                    this.bDebug = false;
                    this.xParent.getElementById("grammalecte_tooltip_message").textContent = xNodeErr.dataset.gc_message;
                    this.xParent.getElementById("grammalecte_tooltip_rule_id").style.display = "none";
                }
                if (xNodeErr.dataset.gc_url != "") {
                    this.xParent.getElementById("grammalecte_tooltip_url").dataset.url = xNodeErr.dataset.gc_url;
                    this.xParent.getElementById("grammalecte_tooltip_url").style.display = "inline";
                } else {
                    this.xParent.getElementById("grammalecte_tooltip_url").dataset.url = "";
                    this.xParent.getElementById("grammalecte_tooltip_url").style.display = "none";
                }

                this.xParent.getElementById("grammalecte_tooltip_ignore").dataset.error_id = xNodeErr.dataset.error_id;
                let iSugg = 0;
                this.clearSuggestionBlock();
                if (xNodeErr.dataset.suggestions.length > 0) {
                    for (let sSugg of xNodeErr.dataset.suggestions.split("|")) {
                        this.xTooltipSuggBlock.appendChild(this._createSuggestion(xNodeErr.dataset.error_id, 0, iSugg, sSugg));
                        this.xTooltipSuggBlock.appendChild(document.createTextNode(" "));
                        iSugg += 1;
                    }
                } else {
                    this.xTooltipSuggBlock.textContent = "Aucune.";
                }
            }
            if (xNodeErr.dataset.error_type === "spelling") {
                // spelling mistake
                this.xParent.getElementById("grammalecte_tooltip_message").textContent = "Mot inconnu du dictionnaire.";
                this.xParent.getElementById("grammalecte_tooltip_ignore").dataset.error_id = xNodeErr.dataset.error_id;
                this.xParent.getElementById("grammalecte_tooltip_rule_id").style.display = "none";
                this.xParent.getElementById("grammalecte_tooltip_url").dataset.url = "";
                this.xParent.getElementById("grammalecte_tooltip_url").style.display = "none";
                if (this.bDebug) {
                    this.xParent.getElementById("grammalecte_tooltip_db_search").style.display = "inline";
                    this.xParent.getElementById("grammalecte_tooltip_db_search").dataset.url = "https://grammalecte.net/dictionary.php?prj=fr&lemma="+xNodeErr.textContent;
                } else {
                    this.xParent.getElementById("grammalecte_tooltip_db_search").style.display = "none";
                }
                this.clearSuggestionBlock();
                this.xTooltipSuggBlock.textContent = "Recherche de graphies possibles…";
                oGrammalecteBackgroundPort.getSpellSuggestions(xNodeErr.textContent, "__GrammalectePanel__", xNodeErr.dataset.error_id);
            }
            this.xTooltipArrow.style.display = "block";
            this.xTooltip.style.display = "block";
        }
        catch (e) {
            showError(e);
        }
    }

    clearSuggestionBlock () {
        while (this.xTooltipSuggBlock.firstChild) {
            this.xTooltipSuggBlock.removeChild(this.xTooltipSuggBlock.firstChild);
        }
    }

    setTooltipColor () {
        // todo
    }

    hide () {
        this.xTooltipArrow.style.display = "none";
        this.xTooltip.style.display = "none";
    }

    _createSuggestion (sErrorId, iSuggBlock, iSugg, sSugg) {
        let xNodeSugg = document.createElement("div");








<

<






<










>




















<
|
|
<
<
<


















<
<
<
<








832
833
834
835
836
837
838

839

840
841
842
843
844
845

846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876

877
878



879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896




897
898
899
900
901
902
903

            this.xTooltipArrow.style.top = (xNodeErr.offsetTop + 16) + "px";
            let nUsefulErrorWidth = ((xNodeErr.offsetLeft + xNodeErr.offsetWidth) > nArrowLimit) ? (nArrowLimit - xNodeErr.offsetLeft) : xNodeErr.offsetWidth;
            this.xTooltipArrow.style.left = (xNodeErr.offsetLeft + Math.floor((nUsefulErrorWidth / 2)) - 4) + "px"; // 4 is half the width of the arrow.
            this.xTooltip.style.top = (xNodeErr.offsetTop + 20) + "px";
            this.xTooltip.style.left = (xNodeErr.offsetLeft > nTooltipLeftLimit) ? nTooltipLeftLimit + "px" : xNodeErr.offsetLeft + "px";
            if (xNodeErr.dataset.error_type === "grammar") {
                // grammar error

                if (xNodeErr.dataset.gc_message.includes(" ##")) {

                    // display rule id
                    let n = xNodeErr.dataset.gc_message.indexOf(" ##");
                    this.xParent.getElementById("grammalecte_tooltip_message").textContent = xNodeErr.dataset.gc_message.slice(0, n);
                    this.xParent.getElementById("grammalecte_tooltip_rule_id").textContent = "Règle : " + xNodeErr.dataset.gc_message.slice(n+2);
                    this.xParent.getElementById("grammalecte_tooltip_rule_id").style.display = "block";
                } else {

                    this.xParent.getElementById("grammalecte_tooltip_message").textContent = xNodeErr.dataset.gc_message;
                    this.xParent.getElementById("grammalecte_tooltip_rule_id").style.display = "none";
                }
                if (xNodeErr.dataset.gc_url != "") {
                    this.xParent.getElementById("grammalecte_tooltip_url").dataset.url = xNodeErr.dataset.gc_url;
                    this.xParent.getElementById("grammalecte_tooltip_url").style.display = "inline";
                } else {
                    this.xParent.getElementById("grammalecte_tooltip_url").dataset.url = "";
                    this.xParent.getElementById("grammalecte_tooltip_url").style.display = "none";
                }
                this.xParent.getElementById("grammalecte_tooltip_db_search").style.display = "none";
                this.xParent.getElementById("grammalecte_tooltip_ignore").dataset.error_id = xNodeErr.dataset.error_id;
                let iSugg = 0;
                this.clearSuggestionBlock();
                if (xNodeErr.dataset.suggestions.length > 0) {
                    for (let sSugg of xNodeErr.dataset.suggestions.split("|")) {
                        this.xTooltipSuggBlock.appendChild(this._createSuggestion(xNodeErr.dataset.error_id, 0, iSugg, sSugg));
                        this.xTooltipSuggBlock.appendChild(document.createTextNode(" "));
                        iSugg += 1;
                    }
                } else {
                    this.xTooltipSuggBlock.textContent = "Aucune.";
                }
            }
            if (xNodeErr.dataset.error_type === "spelling") {
                // spelling mistake
                this.xParent.getElementById("grammalecte_tooltip_message").textContent = "Mot inconnu du dictionnaire.";
                this.xParent.getElementById("grammalecte_tooltip_ignore").dataset.error_id = xNodeErr.dataset.error_id;
                this.xParent.getElementById("grammalecte_tooltip_rule_id").style.display = "none";
                this.xParent.getElementById("grammalecte_tooltip_url").dataset.url = "";
                this.xParent.getElementById("grammalecte_tooltip_url").style.display = "none";

                this.xParent.getElementById("grammalecte_tooltip_db_search").style.display = "inline-block";
                this.xParent.getElementById("grammalecte_tooltip_db_search").dataset.url = "https://grammalecte.net/dictionary.php?prj=fr&lemma="+xNodeErr.textContent;



                this.clearSuggestionBlock();
                this.xTooltipSuggBlock.textContent = "Recherche de graphies possibles…";
                oGrammalecteBackgroundPort.getSpellSuggestions(xNodeErr.textContent, "__GrammalectePanel__", xNodeErr.dataset.error_id);
            }
            this.xTooltipArrow.style.display = "block";
            this.xTooltip.style.display = "block";
        }
        catch (e) {
            showError(e);
        }
    }

    clearSuggestionBlock () {
        while (this.xTooltipSuggBlock.firstChild) {
            this.xTooltipSuggBlock.removeChild(this.xTooltipSuggBlock.firstChild);
        }
    }





    hide () {
        this.xTooltipArrow.style.display = "none";
        this.xTooltip.style.display = "none";
    }

    _createSuggestion (sErrorId, iSuggBlock, iSugg, sSugg) {
        let xNodeSugg = document.createElement("div");
︙︙

Fossil 2.20 [210e89a059] 2022-11-16 18:46:32
This page was generated in about 0.007s