From b84570d1719bb8b7030dc80e631912806c50e988 Mon Sep 17 00:00:00 2001
From: robyngit <thiessenbock@nceas.ucsb.edu>
Date: Wed, 11 Sep 2024 08:49:38 -0400
Subject: [PATCH 1/2] Add view only mode to table editor

Issue #1758
---
 src/js/templates/tableEditor.html |  2 +-
 src/js/views/TableEditorView.js   | 35 ++++++++++++++++++++++++++-----
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/js/templates/tableEditor.html b/src/js/templates/tableEditor.html
index c954e086a..c514d303d 100644
--- a/src/js/templates/tableEditor.html
+++ b/src/js/templates/tableEditor.html
@@ -22,7 +22,7 @@
              </tbody>
       </table>
     </section>
-    <section class="spreadsheet-controls">
+    <section class="<%= controlsClass %>">
       <button class="btn btn-danger btn-small"
               id="reset">
               Clear & reset table
diff --git a/src/js/views/TableEditorView.js b/src/js/views/TableEditorView.js
index c261b1c6d..932097ffc 100644
--- a/src/js/views/TableEditorView.js
+++ b/src/js/views/TableEditorView.js
@@ -15,6 +15,11 @@ define([
   PapaParse,
   Template,
 ) => {
+  // Classes used for elements we will manipulate
+  const CLASS_NAMES = {
+    button: "dropbtn",
+    controls: "spreadsheet-controls",
+  };
   // a utility function to check if a value is empty for sorting
   const valIsEmpty = (x) =>
     x === "" || x === undefined || x === null || Number.isNaN(x);
@@ -102,15 +107,16 @@ define([
        * @constructs TableEditorView
        * @param {object} options - A literal object with options to pass to the
        * view
-       * @param {string} options.markdown - A markdown table to edit.
-       * @param {string} options.csv - A CSV table to edit.
-       * @param {string} options.tableData - The table data as a stringified
+       * @param {string} [options.markdown] - A markdown table to edit.
+       * @param {string} [options.csv] - A CSV table to edit.
+       * @param {string} [options.tableData] - The table data as a stringified
        * JSON in the form of an array of arrays. Only used if markdown is not
        * provided.
+       * @param {boolean} [options.viewMode] - Set this to true to inactivate
+       * editing of the table.
        */
       initialize(options = {}) {
         const mergedOptions = { ...this.defaults, ...options };
-
         Object.keys(mergedOptions).forEach((key) => {
           this[key] = mergedOptions[key];
         });
@@ -125,6 +131,7 @@ define([
           .html(
             this.template({
               cid: this.cid,
+              controlsClass: CLASS_NAMES.controls,
             }),
           )
           .data("view", this);
@@ -140,6 +147,10 @@ define([
           // defaults to empty table
           this.createSpreadsheet();
         }
+
+        if (this.viewMode) {
+          this.deactivateEditing();
+        }
       },
 
       /**
@@ -199,6 +210,20 @@ define([
         this.populateTable();
       },
 
+      /**
+       * Turn off functionality that allows the user to edit the table values,
+       * add or remove rows or columns.
+       */
+      deactivateEditing() {
+        const tableCells = this.el.querySelectorAll("td, th > span");
+        const menuButtons = this.el.querySelectorAll(`.${CLASS_NAMES.button}`);
+        const controls = this.el.querySelectorAll(`.${CLASS_NAMES.controls}`);
+
+        tableCells.forEach((td) => (td.contentEditable = false));
+        menuButtons.forEach((btn) => (btn.style.display = "none"));
+        controls.forEach((control) => (control.style.display = "none"));
+      },
+
       /**
        * Fill data in created table from saved data
        */
@@ -324,7 +349,7 @@ define([
             const dropDownDiv = document.createElement("div");
             dropDownDiv.setAttribute("class", "dropdown");
             dropDownDiv.innerHTML = `
-            <button class="dropbtn" id="col-dropbtn-${i}">
+            <button class="${CLASS_NAMES.button}" id="col-dropbtn-${i}">
               <i class="icon pointer icon-caret-down"></i>
             </button>
               <div id="col-dropdown-${i}" class="dropdown-content">

From 72b0634adefcaebc97a4ff0340464c57dbf737b8 Mon Sep 17 00:00:00 2001
From: robyngit <thiessenbock@nceas.ucsb.edu>
Date: Wed, 11 Sep 2024 09:20:18 -0400
Subject: [PATCH 2/2] Keep sort function in table editor view mode

Issue #1758
---
 src/js/views/TableEditorView.js | 48 ++++++++++++++++++++++-----------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/js/views/TableEditorView.js b/src/js/views/TableEditorView.js
index 932097ffc..17924cf1a 100644
--- a/src/js/views/TableEditorView.js
+++ b/src/js/views/TableEditorView.js
@@ -19,6 +19,9 @@ define([
   const CLASS_NAMES = {
     button: "dropbtn",
     controls: "spreadsheet-controls",
+    colOption: "col-dropdown-option",
+    sortButton: "col-sort",
+    rowHeader: "row-header",
   };
   // a utility function to check if a value is empty for sorting
   const valIsEmpty = (x) =>
@@ -147,10 +150,6 @@ define([
           // defaults to empty table
           this.createSpreadsheet();
         }
-
-        if (this.viewMode) {
-          this.deactivateEditing();
-        }
       },
 
       /**
@@ -208,6 +207,11 @@ define([
         this.createTableBody(tableBody, this.rowCount, this.colCount);
 
         this.populateTable();
+
+        // If in view mode, remove editing functionality
+        if (this.viewMode) {
+          this.deactivateEditing();
+        }
       },
 
       /**
@@ -216,12 +220,26 @@ define([
        */
       deactivateEditing() {
         const tableCells = this.el.querySelectorAll("td, th > span");
-        const menuButtons = this.el.querySelectorAll(`.${CLASS_NAMES.button}`);
         const controls = this.el.querySelectorAll(`.${CLASS_NAMES.controls}`);
 
-        tableCells.forEach((td) => (td.contentEditable = false));
-        menuButtons.forEach((btn) => (btn.style.display = "none"));
-        controls.forEach((control) => (control.style.display = "none"));
+        tableCells.forEach((td) => td.setAttribute("contentEditable", "false"));
+        controls.forEach((control) =>
+          control.style.setProperty("display", "none"),
+        );
+
+        // Hide every button except the sort button in the columns
+        this.el
+          .querySelectorAll(
+            `.${CLASS_NAMES.colOption}:not(.${CLASS_NAMES.sortButton})`,
+          )
+          .forEach((btn) => {
+            btn.style.setProperty("display", "none");
+          });
+
+        // Hide row controls
+        this.$el
+          .find(`.${CLASS_NAMES.rowHeader} .${CLASS_NAMES.button}`)
+          .hide();
       },
 
       /**
@@ -353,10 +371,10 @@ define([
               <i class="icon pointer icon-caret-down"></i>
             </button>
               <div id="col-dropdown-${i}" class="dropdown-content">
-                <button class="col-dropdown-option col-insert-left"><i class="icon icon-long-arrow-left icon-on-left"></i>Insert 1 column left</button>
-                <button class="col-dropdown-option col-insert-right"><i class="icon icon-long-arrow-right icon-on-left"></i>Insert 1 column right</button>
-                <button class="col-dropdown-option col-sort"><i class="icon icon-sort-by-attributes icon-on-left"></i>Sort column</button>
-                <button class="col-dropdown-option col-delete"><i class="icon icon-remove icon-on-left"></i>Delete column</button>
+                <button class="${CLASS_NAMES.colOption} col-insert-left"><i class="icon icon-long-arrow-left icon-on-left"></i>Insert 1 column left</button>
+                <button class="${CLASS_NAMES.colOption} col-insert-right"><i class="icon icon-long-arrow-right icon-on-left"></i>Insert 1 column right</button>
+                <button class="${CLASS_NAMES.colOption} ${CLASS_NAMES.sortButton}"><i class="icon icon-sort-by-attributes icon-on-left"></i>Sort column</button>
+                <button class="${CLASS_NAMES.colOption} col-delete"><i class="icon icon-remove icon-on-left"></i>Delete column</button>
               </div>
             `;
             th.appendChild(span);
@@ -397,7 +415,7 @@ define([
             `;
             cell.appendChild(span);
             cell.appendChild(dropDownDiv);
-            cell.setAttribute("class", "row-header");
+            cell.setAttribute("class", CLASS_NAMES.rowHeader);
           } else {
             cell.contentEditable = true;
           }
@@ -690,14 +708,14 @@ define([
             document
               .getElementById(`col-dropdown-${idArr[2]}`)
               .classList.toggle("show");
-          } else if (classes.contains("col-dropdown-option")) {
+          } else if (classes.contains(CLASS_NAMES.colOption)) {
             const index = e.target.parentNode.id.split("-")[2];
 
             if (classes.contains("col-insert-left")) {
               view.addColumn(index, "left");
             } else if (classes.contains("col-insert-right")) {
               view.addColumn(index, "right");
-            } else if (classes.contains("col-sort")) {
+            } else if (classes.contains(CLASS_NAMES.sortButton)) {
               view.sortColumn(index);
             } else if (classes.contains("col-delete")) {
               view.deleteColumn(index);