Add a view-only mode to the Table Editor View (Step 3 of issue #1758)

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

src/js/views/TableEditorView.js

@@ -15,6 +15,14 @@ define([
   PapaParse,
   Template,
 ) => {
+  // Classes used for elements we will manipulate
+  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) =>
     x === "" || x === undefined || x === null || Number.isNaN(x);
@@ -102,15 +110,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 +134,7 @@ define([
           .html(
             this.template({
               cid: this.cid,
+              controlsClass: CLASS_NAMES.controls,
             }),
           )
           .data("view", this);
@@ -197,6 +207,39 @@ define([
         this.createTableBody(tableBody, this.rowCount, this.colCount);
 
         this.populateTable();
+
+        // If in view mode, remove editing functionality
+        if (this.viewMode) {
+          this.deactivateEditing();
+        }
+      },
+
+      /**
+       * 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 controls = this.el.querySelectorAll(`.${CLASS_NAMES.controls}`);
+
+        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();
       },
 
       /**
@@ -324,14 +367,14 @@ 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">
-                <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);
@@ -372,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;
           }
@@ -665,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);