simple-csv-editor - npm Package Compare versions

Comparing version 1.4.1 to 1.5.0

.eslintrc.json

@@ -12,28 +12,38 @@ {
   },
+  "ignorePatterns": [
+    "vendor/**"
+  ],
   "rules": {
     "no-multi-spaces": 0,
     "no-restricted-syntax": 0,
-    "import/no-extraneous-dependencies": 0,
-    "import/extensions": 0,
-    "no-console": [
-      "error",
-      {
-        "allow": [
-          "error"
-        ]
-      }
-    ],
-    "no-continue": 0,
-    "no-alert": 0,
-    "max-len": 0
+    "max-len": 0,
+    "no-continue": 0
   },
-  "ignorePatterns": ["vendor/**"],
   "overrides": [
     {
-      "files": ["*.test.js"],
-        "rules": {
-          "no-new": 0
-        }
+      "files": [
+        "src/**/*.js"
+      ],
+      "rules": {
+        "no-console": [
+          "error",
+          {
+            "allow": [
+              "error"
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "test/**/*.js"
+      ],
+      "rules": {
+        "import/no-extraneous-dependencies": 0,
+        "import/extensions": 0,
+        "no-new": 0
+      }
     }
   ]
 }

package.json

 {
   "name": "simple-csv-editor",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "A table editor for easily editing and retrieving CSV data.",
@@ -5,0 +5,0 @@ "main": "src/simple-csv-editor.js",

src/simple-csv-editor.js

@@ -19,2 +19,4 @@ class SimpleCsvEditor {
       deleteAllWarning: 'Delete all cells?',
+      deleteButton: 'Delete',
+      cancelButton: 'Cancel',
     },
@@ -52,3 +54,13 @@ delimiter = null,
 
+  #setDeleteButtonDisabledStates() {
+    for (const button of this.table.getElementsByClassName('deleteRow')) {
+      button.disabled = this.table.rows.length === (this.showControls ? 2 : 1);
+    }
+    for (const button of this.table.getElementsByClassName('deleteColumn')) {
+      button.disabled = this.table.rows[0].cells.length === (this.showControls ? 2 : 1);
+    }
+  }
+
   #triggerOnChange() {
+    this.#setDeleteButtonDisabledStates();
     if (this.onChange == null) {
@@ -60,12 +72,13 @@ return;
 
-  static #buildBasicButton(label) {
+  #buildBasicButton(labelKey) {
     const button = document.createElement('button');
     button.type = 'button';
-    button.innerText = label;
     button.tabIndex = -1;
+    button.className = labelKey;
+    button.innerText = this.controlLabels[labelKey];
     return button;
   }
 
-  #buildAddRowButton(offsetIndex, label) {
-    const button = SimpleCsvEditor.#buildBasicButton(label);
+  #buildAddRowButton(offsetIndex, labelKey) {
+    const button = this.#buildBasicButton(labelKey);
     button.addEventListener('click', (event) => {
@@ -77,4 +90,4 @@ this.addRow(event.target.parentElement.parentElement.rowIndex + offsetIndex);
 
-  #buildAddColumnButton(offsetIndex, label) {
-    const button = SimpleCsvEditor.#buildBasicButton(label);
+  #buildAddColumnButton(offsetIndex, labelKey) {
+    const button = this.#buildBasicButton(labelKey);
     button.addEventListener('click', (event) => {
@@ -86,37 +99,67 @@ this.addColumn(event.target.parentElement.cellIndex + offsetIndex);
 
-  #buildDeleteRowButton(label) {
-    const button = SimpleCsvEditor.#buildBasicButton(label);
-    button.addEventListener('click', (event) => {
-      if (!this.warnOnDelete || window.confirm(this.controlLabels.deleteRowWarning)) {
-        this.deleteRow(event.target.parentElement.parentElement.rowIndex);
+  #buildDeleteDialog(text, deleteFunction) {
+    const dialog = document.createElement('dialog');
+    dialog.innerText = text;
+
+    const form = document.createElement('form');
+    dialog.appendChild(form);
+
+    const cancelBtn = document.createElement('button');
+    cancelBtn.value = 'cancel';
+    cancelBtn.formMethod = 'dialog';
+    cancelBtn.innerText = this.controlLabels.cancelButton;
+    form.appendChild(cancelBtn);
+
+    const deleteBtn = document.createElement('button');
+    deleteBtn.value = 'default';
+    deleteBtn.innerText = this.controlLabels.deleteButton;
+    form.appendChild(deleteBtn);
+
+    dialog.addEventListener('close', (event) => {
+      if (event.target.returnValue === 'delete') {
+        deleteFunction();
       }
     });
-    return button;
-  }
 
-  #buildDeleteColumnButton(label) {
-    const button = SimpleCsvEditor.#buildBasicButton(label);
-    button.addEventListener('click', (event) => {
-      if (!this.warnOnDelete || window.confirm(this.controlLabels.deleteColumnWarning)) {
-        this.deleteColumn(event.target.parentElement.cellIndex);
-      }
+    deleteBtn.addEventListener('click', (event) => {
+      event.preventDefault();
+      dialog.close('delete');
     });
-    return button;
+
+    return dialog;
   }
 
-  #buildDeleteAllButton(label) {
-    const button = SimpleCsvEditor.#buildBasicButton(label);
+  #buildDeleteButton(button, deleteWarning, deleteFunction) {
+    const dialog = this.#buildDeleteDialog(deleteWarning, deleteFunction);
     button.addEventListener('click', () => {
-      if (!this.warnOnDelete || window.confirm(this.controlLabels.deleteAllWarning)) {
-        this.deleteAll();
+      if (this.warnOnDelete) {
+        dialog.showModal();
+      } else {
+        deleteFunction();
       }
     });
+    button.appendChild(dialog);
     return button;
   }
 
+  #buildDeleteRowButton(labelKey) {
+    const button = this.#buildBasicButton(labelKey);
+    return this.#buildDeleteButton(button, this.controlLabels.deleteRowWarning, () => { this.deleteRow(button.parentElement.parentElement.rowIndex); });
+  }
+
+  #buildDeleteColumnButton(labelKey) {
+    const button = this.#buildBasicButton(labelKey);
+    return this.#buildDeleteButton(button, this.controlLabels.deleteColumnWarning, () => { this.deleteColumn(button.parentElement.cellIndex); });
+  }
+
+  #buildDeleteAllButton(labelKey) {
+    const button = this.#buildBasicButton(labelKey);
+    return this.#buildDeleteButton(button, this.controlLabels.deleteAllWarning, () => { this.deleteAll(); });
+  }
+
   #addColumnControlCell(row, cellIndex) {
     const cell = document.createElement('th');
-    cell.appendChild(this.#buildAddColumnButton(0, this.controlLabels.addColumnBefore));
-    cell.appendChild(this.#buildDeleteColumnButton(this.controlLabels.deleteColumn));
-    cell.appendChild(this.#buildAddColumnButton(1, this.controlLabels.addColumnAfter));
+    cell.appendChild(this.#buildAddColumnButton(0, 'addColumnBefore'));
+    cell.appendChild(this.#buildDeleteColumnButton('deleteColumn'));
+    cell.appendChild(this.#buildAddColumnButton(1, 'addColumnAfter'));
     row.insertBefore(cell, row.cells[cellIndex]);
@@ -127,5 +170,5 @@ }
     const cell = document.createElement('th');
-    cell.appendChild(this.#buildAddRowButton(0, this.controlLabels.addRowBefore));
-    cell.appendChild(this.#buildDeleteRowButton(this.controlLabels.deleteRow));
-    cell.appendChild(this.#buildAddRowButton(1, this.controlLabels.addRowAfter));
+    cell.appendChild(this.#buildAddRowButton(0, 'addRowBefore'));
+    cell.appendChild(this.#buildDeleteRowButton('deleteRow'));
+    cell.appendChild(this.#buildAddRowButton(1, 'addRowAfter'));
     row.insertBefore(cell, row.cells[cellIndex]);
@@ -237,3 +280,3 @@ }
           const cell = document.createElement('th');
-          cell.appendChild(this.#buildDeleteAllButton(this.controlLabels.deleteAll));
+          cell.appendChild(this.#buildDeleteAllButton('deleteAll'));
           row.appendChild(cell);
@@ -245,2 +288,3 @@ } else {
     }
+    this.#setDeleteButtonDisabledStates();
   }
@@ -247,0 +291,0 @@

No alert changes

Improved metrics

Total package byte prevSize

39402

4.21%

Lines of code

457

12.01%

No dependency changes