Grammalecte  Check-in [17064cfc52]

Overview
Comment:[fx] lexicon editor: object for tabulations/pages
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | fx | multid
Files: files | file ages | folders
SHA3-256: 17064cfc5257f32de43bc299c2e6dd596f0472c6ed76cf412ef48d906712dc96
User & Date: olr on 2018-03-21 22:29:14
Other Links: branch diff | manifest | tags
Context
2018-03-22
11:08
[fx] lexicon editor: update > informations check-in: b7574fbc3d user: olr tags: fx, multid
2018-03-21
22:29
[fx] lexicon editor: object for tabulations/pages check-in: 17064cfc52 user: olr tags: fx, multid
20:17
[fx] hide button <add to lexicon> when nothing to add check-in: 397861e537 user: olr tags: fx, multid
Changes

Modified gc_lang/fr/webext/panel/lex_editor.css from [8bf6017eeb] to [fb81dc32de].

54
55
56
57
58
59
60


61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

#buttons {
    padding: 2px;
    justify-content: center;
}
#lexicon_button {
    background-color: hsl(210, 80%, 90%);


}
.main_button {
    margin: 0 5px;
    width: 100px;
    padding: 10px 20px;
    background-color: hsl(210, 10%, 95%);
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

.big_block {
    margin: 10px 0;
    padding: 10px;
    background-color: hsl(210, 20%, 96%);
    border-radius: 5px;
}

#add_word_page {
    display: none;
}

.columns {
    display: flex;
}








>
>


















|







54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

#buttons {
    padding: 2px;
    justify-content: center;
}
#lexicon_button {
    background-color: hsl(210, 80%, 90%);
    color: hsl(210, 80%, 30%);
    font-weight: bold;
}
.main_button {
    margin: 0 5px;
    width: 100px;
    padding: 10px 20px;
    background-color: hsl(210, 10%, 95%);
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

.big_block {
    margin: 10px 0;
    padding: 10px;
    background-color: hsl(210, 20%, 96%);
    border-radius: 5px;
}

#add_page {
    display: none;
}

.columns {
    display: flex;
}

210
211
212
213
214
215
216







217
218
219
220
221
222
223
}


#lexicon_page {
    
}









.button_block {
    margin: 5px 0px;
    background-color: hsl(210, 10%, 90%);
    border-radius: 5px;
    padding: 15px;
}







>
>
>
>
>
>
>







212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
}


#lexicon_page {
    
}

#search_page {
    display: none;
}

#info_page {
    display: none;
}

.button_block {
    margin: 5px 0px;
    background-color: hsl(210, 10%, 90%);
    border-radius: 5px;
    padding: 15px;
}

Modified gc_lang/fr/webext/panel/lex_editor.html from [c8ac914fb9] to [56b8fded37].

21
22
23
24
25
26
27
28


29
30
31
32
33
34
35
36
37
38
          <div id="import_button" class="fright">Importer</div>
        </div>
        <progress id="wait_progress" value="0"></progress>
      </div>

      <div id="buttons" class="container">
        <div id="lexicon_button" class="main_button">Lexique</div>
        <div id="add_word_button" class="main_button">Ajout</div>


      </div>

      <div id="add_word_page">
        <div class="columns">
          <div id="word_generator">
            <h2>Nouveau mot (lemme)</h2>
            <input type="text" id="lemma" name="lemma" maxlength="60" value="" placeholder="votre mot" pattern="^[a-zA-Zà-ö0-9À-Öø-ÿØ-ßĀ-ʯ._-]+$" autofocus />

            <div id="editor">








|
>
>


|







21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
          <div id="import_button" class="fright">Importer</div>
        </div>
        <progress id="wait_progress" value="0"></progress>
      </div>

      <div id="buttons" class="container">
        <div id="lexicon_button" class="main_button">Lexique</div>
        <div id="add_button" class="main_button">Ajout</div>
        <div id="search_button" class="main_button">Recherche</div>
        <div id="info_button" class="main_button">Informations</div>
      </div>

      <div id="add_page">
        <div class="columns">
          <div id="word_generator">
            <h2>Nouveau mot (lemme)</h2>
            <input type="text" id="lemma" name="lemma" maxlength="60" value="" placeholder="votre mot" pattern="^[a-zA-Zà-ö0-9À-Öø-ÿØ-ßĀ-ʯ._-]+$" autofocus />

            <div id="editor">

225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
















249
250
251
252
253
254
255
256
257
258
259
260
261
              
            </table>
            <div id="buttonline">
              <div id="add_to_lexicon">Ajouter au lexique</div>
            </div>
          </div> <!-- #generated_words -->
        </div> <!-- .columns -->
      </div> <!-- #add_word_page -->


      <div id="lexicon_page">
        <h2>Votre lexique</h2>
        <div class="big_block">
          <div id="save_button" class="fright">
            Enregistrer
          </div>
          <p>Nombre d’entrées : <span id="num_entries">0</span>.</p>
        </div>

        <table id="lexicon_table">
              
        </table>
      </div> <!-- #lexicon_page -->

















    </div>


    <script src="../grammalecte/graphspell/helpers.js"></script>
    <script src="../grammalecte/graphspell/str_transform.js"></script>
    <script src="../grammalecte/graphspell/dawg.js"></script>
    <script src="../grammalecte/graphspell/ibdawg.js"></script>
    <script src="../grammalecte/fr/conj.js"></script>
    <script src="../grammalecte/fr/conj_generator.js"></script>
    <script src="lex_editor.js"></script>
  </body>
  
</html>







|
















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













227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
              
            </table>
            <div id="buttonline">
              <div id="add_to_lexicon">Ajouter au lexique</div>
            </div>
          </div> <!-- #generated_words -->
        </div> <!-- .columns -->
      </div> <!-- #add_page -->


      <div id="lexicon_page">
        <h2>Votre lexique</h2>
        <div class="big_block">
          <div id="save_button" class="fright">
            Enregistrer
          </div>
          <p>Nombre d’entrées : <span id="num_entries">0</span>.</p>
        </div>

        <table id="lexicon_table">
              
        </table>
      </div> <!-- #lexicon_page -->


      <div id="search_page">
        <h2>Recherche</h2>
        <table id="search_table">
              
        </table>
      </div> <!-- #search_page -->


      <div id="info_page">
        <h2>Informations</h2>
        <table id="info_table">
              
        </table>
      </div> <!-- #info_page -->

    </div>


    <script src="../grammalecte/graphspell/helpers.js"></script>
    <script src="../grammalecte/graphspell/str_transform.js"></script>
    <script src="../grammalecte/graphspell/dawg.js"></script>
    <script src="../grammalecte/graphspell/ibdawg.js"></script>
    <script src="../grammalecte/fr/conj.js"></script>
    <script src="../grammalecte/fr/conj_generator.js"></script>
    <script src="lex_editor.js"></script>
  </body>
  
</html>

Modified gc_lang/fr/webext/panel/lex_editor.js from [eeccdb3d27] to [172790a753].

45
46
47
48
49
50
51
52
53
54
55
56
57
58

59



60


61


62

63




64

65






66

67

68
69


70
71
72
73
74
75
76
77
78
79
    if (document.getElementById(sElemId)) {
        document.getElementById(sElemId).style.display = "none";
    } else {
        console.log("HTML node named <" + sElemId + "> not found.")
    }
}

function showPage (sPage) {
    if (sPage == "lexicon") {
        hideElement("add_word_page");
        showElement("lexicon_page");
        document.getElementById("lexicon_button").style.backgroundColor = "hsl(210, 80%, 90%)";
        document.getElementById("add_word_button").style.backgroundColor = "hsl(210, 10%, 95%)";
    } else {

        hideElement("lexicon_page");



        showElement("add_word_page");


        document.getElementById("lexicon_button").style.backgroundColor = "hsl(210, 10%, 95%)";


        document.getElementById("add_word_button").style.backgroundColor = "hsl(210, 80%, 90%)";

        document.getElementById("lemma").focus();




    }

}










document.getElementById("lexicon_button").addEventListener("click", () => { showPage("lexicon"); }, false);
document.getElementById("add_word_button").addEventListener("click", () => { showPage("lemma"); }, false);



document.getElementById("save_button").addEventListener("click", () => { oBinaryDict.build(); }, false);



class Table {

    constructor (sNodeId, lColumn, sProgressBarId, sResultId="") {
        this.sNodeId = sNodeId;
        this.xTable = document.getElementById(sNodeId);







|
|
|
|
|
|
|
>
|
>
>
>
|
>
>
|
>
>
|
>
|
>
>
>
>
|
>
|
>
>
>
>
>
>
|
>

>
|
|
>
>
|
<
|







45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

95
96
97
98
99
100
101
102
    if (document.getElementById(sElemId)) {
        document.getElementById(sElemId).style.display = "none";
    } else {
        console.log("HTML node named <" + sElemId + "> not found.")
    }
}


const oTabulations = {

    lPage: ["lexicon_page", "add_page", "search_page", "info_page"],

    showPage: function (sRequestedPage) {
        for (let sPage of this.lPage) {
            if (sPage !== sRequestedPage) {
                hideElement(sPage);
                this.downlightButton(sPage.slice(0,-5) + "_button");
            }
        }
        showElement(sRequestedPage);
        this.highlightButton(sRequestedPage.slice(0,-5) + "_button");
        if (sRequestedPage == "add_page") {
            document.getElementById("lemma").focus();
        }
    },

    highlightButton: function (sButton) {
        if (document.getElementById(sButton)) {
            let xButton = document.getElementById(sButton);
            xButton.style.backgroundColor = "hsl(210, 80%, 90%)";
            xButton.style.color = "hsl(210, 80%, 30%)";
            xButton.style.fontWeight = "bold";
        }
    },

    downlightButton: function (sButton) {
        if (document.getElementById(sButton)) {
            let xButton = document.getElementById(sButton);
            xButton.style.backgroundColor = "hsl(210, 10%, 95%)";
            xButton.style.color = "hsl(210, 10%, 50%)";
            xButton.style.fontWeight = "normal";
        }
    },

    listen: function () {
        document.getElementById("lexicon_button").addEventListener("click", () => { this.showPage("lexicon_page"); }, false);
        document.getElementById("add_button").addEventListener("click", () => { this.showPage("add_page"); }, false);
        document.getElementById("search_button").addEventListener("click", () => { this.showPage("search_page"); }, false);
        document.getElementById("info_button").addEventListener("click", () => { this.showPage("info_page"); }, false);
    }

}


class Table {

    constructor (sNodeId, lColumn, sProgressBarId, sResultId="") {
        this.sNodeId = sNodeId;
        this.xTable = document.getElementById(sNodeId);
490
491
492
493
494
495
496

497
498
499
500
501
502
503

    setDictData: function (nEntries, sDate) {
        document.getElementById("dic_num_entries").textContent = nEntries;
        document.getElementById("dic_save_date").textContent = sDate;
    },

    listen: function () {

        document.getElementById("export_button").addEventListener("click", () => { this.export(); }, false);
        document.getElementById("import_button").addEventListener("click", () => { this.import(); }, false);
    },

    build: function () {
        let xProgressNode = document.getElementById("wait_progress");
        let lEntry = oLexiconTable.getEntries();







>







513
514
515
516
517
518
519
520
521
522
523
524
525
526
527

    setDictData: function (nEntries, sDate) {
        document.getElementById("dic_num_entries").textContent = nEntries;
        document.getElementById("dic_save_date").textContent = sDate;
    },

    listen: function () {
        document.getElementById("save_button").addEventListener("click", () => { this.build(); }, false);
        document.getElementById("export_button").addEventListener("click", () => { this.export(); }, false);
        document.getElementById("import_button").addEventListener("click", () => { this.import(); }, false);
    },

    build: function () {
        let xProgressNode = document.getElementById("wait_progress");
        let lEntry = oLexiconTable.getEntries();
530
531
532
533
534
535
536


const oLexiconTable = new Table("lexicon_table", ["Flexions", "Lemmes", "Étiquettes"], "wait_progress", "num_entries");
const oGenWordsTable = new Table("generated_words_table", ["Flexions", "Étiquettes"], "wait_progress");

oBinaryDict.load();
oBinaryDict.listen();
oGenerator.listen();








>
554
555
556
557
558
559
560
561

const oLexiconTable = new Table("lexicon_table", ["Flexions", "Lemmes", "Étiquettes"], "wait_progress", "num_entries");
const oGenWordsTable = new Table("generated_words_table", ["Flexions", "Étiquettes"], "wait_progress");

oBinaryDict.load();
oBinaryDict.listen();
oGenerator.listen();
oTabulations.listen();