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);