Grammalecte  Check-in [503e7a8eba]

Overview
Comment:[fx] update: lexicon editor
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk | fx
Files: files | file ages | folders
SHA3-256: 503e7a8eba7ddb3806d36a2f6254ee99ba13f4f80c0d6e9497484cdc8de9b670
User & Date: olr on 2018-01-30 16:47:53
Other Links: manifest | tags
Context
2018-01-31
13:08
[fx] update: lexicon update (code clarification) check-in: 341fcee2ed user: olr tags: fx, trunk
2018-01-30
16:47
[fx] update: lexicon editor check-in: 503e7a8eba user: olr tags: fx, trunk
12:38
[fr] pt: faire grand bruit check-in: 28d0121978 user: olr tags: fr, trunk
Changes

Modified gc_lang/fr/webext/panel/lex_editor.css from [0d1be3ff24] to [02dc63f476].

    90     90       border-radius: 3px;
    91     91       cursor: pointer;
    92     92   }
    93     93   .category:hover {
    94     94       background-color: hsl(0, 0%, 90%);
    95     95   }
    96     96   
           97  +.separator {
           98  +    border-left: 1px solid hsl(210, 0%, 90%);
           99  +}
    97    100   
    98    101   #section_vide {
    99    102       padding: 50px;
   100    103       font-size: 24px;
   101    104       text-align: center;
   102    105       background-color: hsl(0, 20%, 90%);
   103    106       color: hsl(0, 20%, 50%);
................................................................................
   204    207       box-shadow: 0 0 2px hsl(0, 60%, 50%);
   205    208   }
   206    209   
   207    210   
   208    211   #lexicon_page {
   209    212       
   210    213   }
          214  +
          215  +#save_button {
          216  +    display: none;
          217  +    float: right;
          218  +    padding: 2px 20px;
          219  +    background-color: hsl(150, 50%, 50%);
          220  +    color: hsl(150, 0%, 100%);
          221  +    border-radius: 3px;
          222  +    cursor: pointer;
          223  +}
   211    224   
   212    225   th {
   213    226       padding: 5px 20px;
   214    227       border-left: 1px solid hsl(210, 10%, 90%);
          228  +    text-align: left;
   215    229   }
   216    230   td {
   217    231       padding: 0 20px;
   218    232   }
          233  +
          234  +.delete_entry {
          235  +    cursor: pointer;
          236  +    font-weight: bold;
          237  +    color: hsl(0, 100%, 50%);
          238  +}

Modified gc_lang/fr/webext/panel/lex_editor.html from [66c585ccb9] to [a1593656cc].

    23     23   
    24     24                   <div id="editor">
    25     25   
    26     26                       <div id="categories">
    27     27                           <div class="category" id="select_nom" data-tag="N">Nom, adjectif</div>
    28     28                           <div class="category" id="select_verbe" data-tag="V">Verbe</div>
    29     29                           <div class="category" id="select_adverbe" data-tag="W">Adverbe</div>
    30         -
    31         -                        <div class="separator"></div>
    32         -
    33         -                        <div class="category" id="select_prenom" data-tag="M1">Prénom</div>
           30  +                        <div class="category separator" id="select_prenom" data-tag="M1">Prénom</div>
    34     31                           <div class="category" id="select_patronyme" data-tag="M2">Patronyme</div>
    35     32                           <div class="category" id="select_nom_propre" data-tag="MP">Nom propre</div>
    36         -
    37         -                        <div class="separator"></div>
    38         -
    39         -                        <div class="category" id="select_autre" data-tag="X">Autre</div>
           33  +                        <div class="category separator" id="select_autre" data-tag="X">Autre</div>
    40     34                       </div>
    41     35   
    42     36   
    43     37                       <div id="sections">
    44     38   
    45     39                           <div id="section_vide">
    46     40                               Sélectionnez une catégorie.
................................................................................
   269    263                       <div id="buttonline">
   270    264                           <div id="add_to_lexicon">Ajouter au dictionnaire</div>
   271    265                       </div>
   272    266                   </div>
   273    267               </div>
   274    268   
   275    269               <div id="lexicon_page">
          270  +                <div id="save_button">
          271  +                    Enregistrer
          272  +                </div>
   276    273                   <h2>Votre lexique</h2>
          274  +                
          275  +                <div class="clearer"></div>
          276  +
   277    277                   <table id="table">
   278    278                       
   279    279                   </table>
   280    280               </div>
   281    281           </div>
   282    282   
   283    283   

Modified gc_lang/fr/webext/panel/lex_editor.js from [c815154404] to [f56336af44].

    27     27   function showError (e) {
    28     28       console.error(e.fileName + "\n" + e.name + "\nline: " + e.lineNumber + "\n" + e.message);
    29     29   }
    30     30   
    31     31   
    32     32   document.getElementById("lexicon_button").addEventListener("click", () => { oPage.showPage("lexicon"); }, false);
    33     33   document.getElementById("add_word_button").addEventListener("click", () => { oPage.showPage("lemma"); }, false);
           34  +
           35  +document.getElementById("table").addEventListener("click", (xEvent) => { oPage.onTableClick(xEvent); }, false);
           36  +document.getElementById("save_button").addEventListener("click", () => { oLexicon.save(); }, false);
           37  +
    34     38   document.getElementById("editor").addEventListener("click", (xEvent) => { oPage.onSelectionClick(xEvent); }, false);
    35     39   document.getElementById("lemma").addEventListener("keyup", () => { oPage.onWrite(); }, false);
    36     40   document.getElementById("lemma2").addEventListener("keyup", () => { oPage.onWrite2(); }, false);
    37     41   document.getElementById("verb_pattern").addEventListener("keyup", () => { oFlex.update(); }, false);
    38     42   document.getElementById("flexion").addEventListener("keyup", () => { oFlex.update(); }, false);
    39     43   document.getElementById("tags").addEventListener("keyup", () => { oFlex.update(); }, false);
    40     44   document.getElementById("add_to_lexicon").addEventListener("click", () => { oFlex.addToLexicon(); }, false);
................................................................................
   174    178   
   175    179       showActions: function () {
   176    180           document.getElementById("actions").style.display = "block";
   177    181       },
   178    182   
   179    183       hideActions: function () {
   180    184           document.getElementById("actions").style.display = "none";
          185  +    },
          186  +
          187  +    showSaveButton: function () {
          188  +        document.getElementById("save_button").style.display = "block";
          189  +    },
          190  +
          191  +    hideSaveButton: function () {
          192  +        document.getElementById("save_button").style.display = "none";
          193  +    },
          194  +
          195  +    createTableHeader: function () {
          196  +        let xRowNode = createNode("tr");
          197  +        xRowNode.appendChild(createNode("th", { textContent: "·" }));
          198  +        xRowNode.appendChild(createNode("th", { textContent: "#" }));
          199  +        xRowNode.appendChild(createNode("th", { textContent: "Forme fléchie" }));
          200  +        xRowNode.appendChild(createNode("th", { textContent: "Lemme" }));
          201  +        xRowNode.appendChild(createNode("th", { textContent: "Étiquettes" }));
          202  +        return xRowNode;
          203  +    },
          204  +
          205  +    createRowNode: function (n, sFlexion, sLemma, sTags) {
          206  +        let xRowNode = createNode("tr", { id: "row_" + n });
          207  +        xRowNode.appendChild(createNode("td", { textContent: "×", className: "delete_entry", title: "Effacer cette entrée" }, { id_entry: n }));
          208  +        xRowNode.appendChild(createNode("td", { textContent: n }));
          209  +        xRowNode.appendChild(createNode("td", { textContent: sFlexion }));
          210  +        xRowNode.appendChild(createNode("td", { textContent: sLemma }));
          211  +        xRowNode.appendChild(createNode("td", { textContent: sTags }));
          212  +        return xRowNode;
          213  +    },
          214  +
          215  +    clearTable: function () {
          216  +        let xTable = document.getElementById("table");
          217  +        while (xTable.firstChild) {
          218  +            xTable.removeChild(xTable.firstChild);
          219  +        }
          220  +    },
          221  +
          222  +    onTableClick: function (xEvent) {
          223  +        try {
          224  +            let xElem = xEvent.target;
          225  +            if (xElem.className) {
          226  +                if (xElem.className == "delete_entry") {
          227  +                    let iEntry = xElem.dataset.id_entry
          228  +                    oLexicon.lFlexion[parseInt(iEntry)] = null;
          229  +                    document.getElementById("row_"+iEntry).style.display = "none";
          230  +                    this.showSaveButton();
          231  +                }
          232  +            }
          233  +        }
          234  +        catch (e) {
          235  +            showError(e);
          236  +        }
   181    237       }
   182    238   }
   183    239   
   184    240   
   185    241   
   186    242   const oFlex = {
   187    243   
................................................................................
   396    452               oPage.hideActions();
   397    453           }
   398    454       },
   399    455   
   400    456       addToLexicon: function () {
   401    457           try {
   402    458               oLexicon.addFlexions(this.lFlexion);
   403         -            oLexicon.save();
   404    459               document.getElementById("lemma").value = "";
   405    460               oPage.showSection("section_vide");
   406    461               oPage.hideEditor();
   407    462               oPage.hideActions();
   408    463               oPage.clear();
          464  +            oPage.showSaveButton();
   409    465               this.clear();
   410    466           }
   411    467           catch (e) {
   412    468               showError(e);
   413    469           }
   414    470       }
   415    471   }
................................................................................
   439    495       _setList: function (dResult) {
   440    496           if (dResult.hasOwnProperty("lexicon_list")) {
   441    497               this.lFlexion = dResult.lexicon_list;
   442    498           }
   443    499       },
   444    500   
   445    501       display: function () {
   446         -        this.clearTable();
          502  +        oPage.clearTable();
   447    503           let xTable = document.getElementById("table");
   448    504           let n = 0;
   449    505           if (this.lFlexion.length > 0) {
   450         -            xTable.appendChild(this._createTableHeader());
          506  +            xTable.appendChild(oPage.createTableHeader());
   451    507               for (let [sFlexion, sLemma, sTags] of this.lFlexion) {
   452         -                xTable.appendChild(this._createRowNode(n, sFlexion, sLemma, sTags));
          508  +                xTable.appendChild(oPage.createRowNode(n, sFlexion, sLemma, sTags));
   453    509                   n += 1;
   454    510               }
   455    511           } else {
   456    512               xTable.appendChild(createNode("tr", { textContent: "Aucun élément." }));
   457    513           }
   458    514       },
   459    515   
   460         -    _createTableHeader: function () {
   461         -        let xRowNode = createNode("tr");
   462         -        xRowNode.appendChild(createNode("th", { textContent: "#" }));
   463         -        xRowNode.appendChild(createNode("th", { textContent: "Forme fléchie" }));
   464         -        xRowNode.appendChild(createNode("th", { textContent: "Lemme" }));
   465         -        xRowNode.appendChild(createNode("th", { textContent: "Étiquettes" }));
   466         -        return xRowNode;
   467         -    },
   468         -
   469         -    _createRowNode: function (n, sFlexion, sLemma, sTags) {
   470         -        let xRowNode = createNode("tr", { id: "row_"+n });
   471         -        xRowNode.appendChild(createNode("td", { textContent: n }));
   472         -        xRowNode.appendChild(createNode("td", { textContent: sFlexion }));
   473         -        xRowNode.appendChild(createNode("td", { textContent: sLemma }));
   474         -        xRowNode.appendChild(createNode("td", { textContent: sTags }));
   475         -        return xRowNode;
   476         -    },
   477         -
   478         -    clearTable: function () {
   479         -        let xTable = document.getElementById("table");
   480         -        while (xTable.firstChild) {
   481         -            xTable.removeChild(xTable.firstChild);
          516  +    save: function () {
          517  +        console.log("u");
          518  +        oPage.hideSaveButton();
          519  +        let lResult = [];
          520  +        for (let e of this.lFlexion) {
          521  +            if (e !== null) {
          522  +                lResult.push(e);
          523  +            }
   482    524           }
   483         -    },
   484         -
   485         -    save: function () {
   486         -        browser.storage.local.set({ "lexicon_list": this.lFlexion });
          525  +        browser.storage.local.set({ "lexicon_list": lResult });
          526  +        this.lFlexion = lResult;
          527  +        this.display();
   487    528       },
   488    529   
   489    530       build: function () {
   490    531           return null;
   491    532       },
   492    533   
   493    534       export: function () {