Index: gc_lang/fr/webext/panel/dictionaries.css
==================================================================
--- gc_lang/fr/webext/panel/dictionaries.css
+++ gc_lang/fr/webext/panel/dictionaries.css
@@ -39,30 +39,19 @@
color: hsl(210, 50%, 50%);
font: bold 30px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
text-align: center;
}
h2 {
- margin: 5px 0 2px 0;
+ margin: 10px 0 2px 0;
color: hsl(0, 50%, 50%);
font: bold 20px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}
-h3 {
- margin: 3px 0 2px 0;
- color: hsl(210, 50%, 50%);
- font: bold 16px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
-}
/*
Main buttons
*/
-
-
-.columns {
- display: flex;
-}
-
ul {
margin-left: 30px;
}
@@ -93,10 +82,29 @@
input[placeholder] {
color: hsl(0, 0%, 50%);
}
+.dic_button {
+ margin: 2px;
+ display: inline-block;
+ border: 1px solid hsl(0, 0%, 70%);
+ border-radius: 3px;
+}
+.dic_button_close {
+ display: inline-block;
+ padding: 1px 5px;
+ background-color: hsl(0, 50%, 50%);
+ color: hsl(0, 90%, 90%);
+ cursor: pointer;
+}
+.dic_button_label {
+ display: inline-block;
+ padding: 1px 10px;
+ background-color: hsl(0, 0%, 90%);
+}
+
/*
Table
*/
#wait_progress {
@@ -105,10 +113,11 @@
}
table {
border: 1px solid hsl(210, 10%, 50%);
width: 100%;
+ font-size: 14px;
}
th {
padding: 5px 10px;
border-left: 1px solid hsl(210, 10%, 90%);
text-align: left;
Index: gc_lang/fr/webext/panel/dictionaries.html
==================================================================
--- gc_lang/fr/webext/panel/dictionaries.html
+++ gc_lang/fr/webext/panel/dictionaries.html
@@ -13,11 +13,11 @@
Dictionnaires communautaires
Dictionnaires sélectionnés
[Aucun]
-
Dictionnaires disponibles sur le serveur de Grammalecte
+ 0 dictionnaires disponibles
Index: gc_lang/fr/webext/panel/dictionaries.js
==================================================================
--- gc_lang/fr/webext/panel/dictionaries.js
+++ gc_lang/fr/webext/panel/dictionaries.js
@@ -46,10 +46,11 @@
this.xProgressBar = document.getElementById(sProgressBarId);
this.xNumEntry = document.getElementById(sResultId);
this.iEntryIndex = 0;
this.lEntry = [];
this.nEntry = 0;
+ this.aSelectedDict = new Map();
this.bDeleteButtons = bDeleteButtons;
this.bActionButtons = bActionButtons;
this._createHeader();
this.listen();
}
@@ -110,15 +111,18 @@
_addRow (lData) {
let xRowNode = createNode("tr", { id: this.sNodeId + "_row_" + this.iEntryIndex });
if (this.bDeleteButtons) {
xRowNode.appendChild(createNode("td", { textContent: "×", className: "delete_entry", title: "Effacer cette entrée" }, { id_entry: this.iEntryIndex }));
}
- for (let data of lData) {
- xRowNode.appendChild(createNode("td", { textContent: data }));
- }
+ let [nDicId, sName, sOwner, nEntry, sDescription, ...data] = lData;
+ xRowNode.appendChild(createNode("td", { textContent: nDicId }));
+ xRowNode.appendChild(createNode("td", { textContent: sName }));
+ xRowNode.appendChild(createNode("td", { textContent: sOwner }));
+ xRowNode.appendChild(createNode("td", { textContent: nEntry }));
+ xRowNode.appendChild(createNode("td", { textContent: sDescription }));
if (this.bActionButtons) {
- xRowNode.appendChild(createNode("td", { textContent: "+", className: "select_entry", title: "Sélectionner/Désélectionner cette entrée" }, { id_entry: this.iEntryIndex }));
+ xRowNode.appendChild(createNode("td", { textContent: "+", className: "select_entry", title: "Sélectionner/Désélectionner cette entrée" }, { id_entry: this.iEntryIndex, dict_name: sName }));
}
this.xTable.appendChild(xRowNode);
this.iEntryIndex += 1;
}
@@ -131,12 +135,12 @@
onTableClick (xEvent) {
try {
let xElem = xEvent.target;
if (xElem.className) {
switch (xElem.className) {
- case "delete_entry": this.deleteRow(xElem.dataset.id_entry); break;
- case "select_entry": this.selectEntry(xElem.dataset.id_entry); break;
+ case "delete_entry": this.deleteRow(xElem.dataset.id_entry, xElem.dataset.dict_name); break;
+ case "select_entry": this.selectEntry(xElem.dataset.id_entry, xElem.dataset.dict_name); break;
}
}
}
catch (e) {
showError(e);
@@ -153,25 +157,61 @@
if (this.sNodeId == "lexicon_table") {
showElement("save_button", "inline-block");
}
}
- selectEntry (iEntry) {
- let sRowId = this.sNodeId + "_row_" + iEntry;
- document.getElementById(sRowId).style.backgroundColor = "hsl(120, 50%, 90%)";
+ selectEntry (nEntryId, sDicName) {
+ let sRowId = this.sNodeId + "_row_" + nEntryId;
+ if (!this.aSelectedDict.has(sDicName)) {
+ this.aSelectedDict.set(sDicName, nEntryId);
+ document.getElementById(sRowId).style.backgroundColor = "hsl(120, 50%, 90%)";
+ }
+ else {
+ this.aSelectedDict.delete(sDicName);
+ document.getElementById(sRowId).style.backgroundColor = "";
+ }
+ this.showSelectedDict();
+ }
+
+ clearSelectedDict () {
+ let xDicList = document.getElementById("dictionaries_list");
+ while (xDicList.firstChild) {
+ xDicList.removeChild(xDicList.firstChild);
+ }
+ }
+
+ showSelectedDict () {
+ this.clearSelectedDict();
+ let xDicList = document.getElementById("dictionaries_list");
+ if (this.aSelectedDict.size === 0) {
+ xDicList.textContent = "[Aucun]";
+ return;
+ }
+ for (let [sName, nDicId] of this.aSelectedDict) {
+ xDicList.appendChild(this.createDictLabel(nDicId, sName));
+ }
}
- getEntries () {
- return this.lEntry.filter((e) => e !== null);
+ createDictLabel (nDicId, sLabel) {
+ let xLabel = createNode("div", {className: "dic_button"});
+ let xCloseButton = createNode("div", {className: "dic_button_close", textContent: "×"}, {id_entry: nDicId});
+ xCloseButton.addEventListener("click", () => {
+ this.aSelectedDict.delete(sLabel);
+ document.getElementById(this.sNodeId+"_row_"+nDicId).style.backgroundColor = "";
+ xLabel.style.display = "none";
+ });
+ xLabel.appendChild(xCloseButton);
+ xLabel.appendChild(createNode("div", {className: "dic_button_label", textContent: sLabel}));
+ return xLabel;
}
}
-const oDicTable = new Table("dictionaries_table", ["Nom", "Créé par", "Entrées", "Description"], "wait_progress", "", false, true);
+const oDicTable = new Table("dictionaries_table", ["Id", "Nom", "par", "Entrées", "Description"], "wait_progress", "num_dic", false, true);
oDicTable.fill([
- ["Ambre", "Inconnu", "240", "Univers des Princes d’Ambre (de Roger Zelazny)"],
- ["Malaz", "Inconnu", "2340", "Univers du Livre des Martyrs (de Steven Erikson)"],
- ["Pudlard", "Inconnu", "1440", "Univers d’Harry Potter de XXXX"],
- ["Dune", "Inconnu", "2359", "Univers de Dune (de Frank Herbert)"],
- ["StarWars", "Inconnu", "4359", "Univers de Star Wars (de George Lucas)"]
+ [1, "Ambre", "Inconnu", "240", "Univers des Princes d’Ambre (de Roger Zelazny)"],
+ [2, "Malaz", "Inconnu", "2340", "Univers du Livre des Martyrs (de Steven Erikson)"],
+ [3, "Poudlard", "Inconnu", "1440", "Univers d’Harry Potter (de J. K. Rowlings)"],
+ [4, "Dune", "Inconnu", "2359", "Univers de Dune (de Frank Herbert)"],
+ [5, "StarWars", "Inconnu", "4359", "Univers de Star Wars (de George Lucas)"]
]);