Actually fix autoexporting and adding back ids

Author: spectranaut

script/mapping-tables.js

@@ -23,38 +23,41 @@ function getElementIndex(el) {
 
 var mappingTableInfos = [];
 
-function viewAsSingleTable(mappingTableInfo) {
-  hideElement(mappingTableInfo.detailsContainer);
-  // add <summary> @id to ids array and remove @id from summary
-  queryAll('summary', mappingTableInfo.detailsContainer).forEach(function (
+function viewAsSingleTable(tableContainer, detailsContainer) {
+  hideElement(detailsContainer);
+  showElement(tableContainer);
+
+  // Remove ids from summary
+  queryAll('summary', detailsContainer).forEach(function (
     summary
   ) {
     summary.dataset['id'] = summary.id;
     summary.removeAttribute('id');
   });
-  showElement(mappingTableInfo.tableContainer);
 
-  // add relevant @id to tr
-  queryAll('tbody tr', mappingTableInfo.tableContainer).forEach(function (
+  // Add ids to table
+  queryAll('tbody tr', tableContainer).forEach(function (
     tr
   ) {
     tr.id = tr.dataset['id'];
     tr.removeAttribute('data-id');
   });
 }
 
-function viewAsDetails(mappingTableInfo) {
-  hideElement(mappingTableInfo.tableContainer);
-  // add tr @id to ids array and remove @id from tr
-  queryAll('tbody tr', mappingTableInfo.tableContainer).forEach(function (
+function viewAsDetails(tableContainer, detailsContainer) {
+  hideElement(tableContainer);
+  showElement(detailsContainer);
+
+  // Remove ids from table
+  queryAll('tbody tr', tableContainer).forEach(function (
     tr
   ) {
     tr.dataset['id'] = tr.id;
     tr.removeAttribute('id');
   });
-  showElement(mappingTableInfo.detailsContainer);
-  // add relevant @id to summary
-  queryAll('summary', mappingTableInfo.detailsContainer).forEach(function (
+
+  // Add ids to summary
+  queryAll('summary', detailsContainer).forEach(function (
     summary
   ) {
     summary.id = summary.dataset['id'];
@@ -72,6 +75,7 @@ function expandReferredDetails(summaryFragId) {
 
 function mappingTables() {
   queryAll('.table-container').forEach(function (container) {
+
     // object to store information about a mapping table.
     var tableInfo = {};
     mappingTableInfos.push(tableInfo);
@@ -94,22 +98,8 @@ function mappingTables() {
 
     // add switch to view as single table or details/summary
     var viewSwitch = document.createElement('button');
-    viewSwitch.className = 'switch-view removeOnSave';
+    viewSwitch.className = 'switch-view';
     viewSwitch.innerHTML = mappingTableLabels.viewByTable;
-    viewSwitch.addEventListener('click', function () {
-      // if current view is details/summary
-      if (tableInfo.detailsContainer.style.display !== 'none') {
-        viewAsSingleTable(tableInfo);
-        // toggle the viewSwitch label from view-as-single-table to view-by-X
-        viewSwitch.innerHTML =
-          mappingTableLabels.viewByLabels[tableInfo.table.id];
-      } else {
-        viewAsDetails(tableInfo);
-        // toggle the viewSwitch label from view-by-X to view-as-single-table.
-        viewSwitch.innerHTML = mappingTableLabels.viewByTable;
-      }
-    });
-
     tableInfo.tableContainer.insertAdjacentElement('beforebegin', viewSwitch);
 
     // store the table's column headers in array colHeaders
@@ -127,7 +117,9 @@ function mappingTables() {
       var caption = row.querySelector('th').innerHTML;
       var summary = caption.replace(/<a [^>]+>|<\/a>/g, '');
       // get the tr's @id
-      var id = row.dataset.id;
+      var id = row.id;
+      row.dataset.id = id;
+
       // remove the tr's @id since same id will be used in the relevant summary element
       row.removeAttribute('id');
       // store the row's cells in array rowCells
@@ -187,12 +179,12 @@ function mappingTables() {
 
     // add 'expand/collapse all' functionality
     var expandAllButton = document.createElement('button');
-    expandAllButton.className = 'expand removeOnSave';
+    expandAllButton.className = 'expand';
     expandAllButton.innerHTML = mappingTableLabels.expand;
 
     var collapseAllButton = document.createElement('button');
     collapseAllButton.disabled = true;
-    collapseAllButton.className = 'collapse removeOnSave';
+    collapseAllButton.className = 'collapse';
     collapseAllButton.innerHTML = mappingTableLabels.collapse;
 
     tableInfo.detailsContainer.insertBefore(
@@ -203,97 +195,6 @@ function mappingTables() {
       expandAllButton,
       tableInfo.detailsContainer.firstChild
     );
-
-    var expandCollapseDetails = function (detCont, action) {
-      queryAll('details', detCont).forEach(function (details) {
-        details.open = action !== 'collapse'
-      });
-    };
-
-    expandAllButton.addEventListener('click', function () {
-      expandCollapseDetails(tableInfo.detailsContainer, 'expand');
-      expandAllButton.disabled = true;
-      tableInfo.detailsContainer
-        .querySelector('button.collapse')
-        .removeAttribute('disabled');
-    });
-
-    collapseAllButton.addEventListener('click', function () {
-      expandCollapseDetails(tableInfo.detailsContainer, 'collapse');
-      collapseAllButton.disabled = true;
-      tableInfo.detailsContainer
-        .querySelector('button.expand')
-        .removeAttribute('disabled');
-    });
-
-    // add collapsible table columns functionality
-    var showHideCols = document.createElement('div');
-    showHideCols.className = 'show-hide-cols removeOnSave';
-    showHideCols.innerHTML =
-      '<span>' + mappingTableLabels.showHideCols + '</span>';
-
-    for (var i = 0, len = colHeaders.length; i < len; i++) {
-      (function (i) {
-        var toggleLabel = colHeaders[i]
-          .replace(/<a [^<]+>|<\/a>/g, '')
-          .replace(/<sup>\[Note [0-9]+\]<\/sup>/g, '');
-
-        var showHideColButton = document.createElement('button');
-        showHideColButton.className = 'hide-col';
-        showHideColButton.setAttribute('aria-pressed', false);
-        showHideColButton.setAttribute(
-          'title',
-          mappingTableLabels.hideToolTipText
-        );
-        showHideColButton.innerHTML =
-          '<span class="action">' +
-          mappingTableLabels.hideActionText +
-          '</span>' +
-          toggleLabel;
-
-        showHideColButton.addEventListener('click', function () {
-          var index = getElementIndex(showHideColButton);
-          console.log("index?",index);
-          var wasHidden = showHideColButton.className === 'hide-col';
-
-          queryAll(
-            'tr>th:nth-child(' + index + '), tr>td:nth-child(' + index + ')',
-            tableInfo.table
-          ).forEach(function (element) {
-            if (wasHidden) {
-              hideElement(element);
-            } else {
-              showElement(element);
-            }
-          });
-
-          showHideColButton.className = wasHidden ? 'show-col' : 'hide-col';
-          showHideColButton.setAttribute('aria-pressed', wasHidden);
-          showHideColButton.setAttribute(
-            'title',
-            wasHidden
-              ? mappingTableLabels.showToolTipText
-              : mappingTableLabels.hideToolTipText
-          );
-          showHideColButton.querySelector('span').innerText = wasHidden
-            ? mappingTableLabels.showActionText
-            : mappingTableLabels.hideActionText;
-        });
-        queryAll('span', showHideColButton)
-          .filter(function (span) {
-            return !span.classList.contains('action');
-          })
-          .forEach(function (span) {
-            span.parentNode.removeChild(span);
-          });
-        showHideCols.appendChild(showHideColButton);
-      })(i)
-    }
-
-    tableInfo.tableContainer.insertBefore(
-      showHideCols,
-      tableInfo.tableContainer.firstChild
-    );
   });
 
   // if page URL links to frag id, reset location to frag id once details/summary view is set
@@ -318,3 +219,53 @@ function mappingTables() {
     }
   });
 }
+
+document.addEventListener("DOMContentLoaded", () => {
+
+  document.querySelectorAll('button.switch-view').forEach(function (b){
+    b.addEventListener('click', function () {
+      tableContainer = b.parentElement.querySelector('.table-container');
+      table = tableContainer.querySelector('table');
+      detailsContainer = b.parentElement.querySelector('.details');
+
+      if (detailsContainer.style.display !== 'none') {
+        viewAsSingleTable(tableContainer, detailsContainer);
+        // toggle the viewSwitch label from view-as-single-table to view-by-X
+        b.innerHTML =
+          mappingTableLabels.viewByLabels[table.id];
+      } else {
+        viewAsDetails(tableContainer, detailsContainer);
+        // toggle the viewSwitch label from view-by-X to view-as-single-table.
+        b.innerHTML = mappingTableLabels.viewByTable;
+      }
+    });
+  });
+
+  var expandCollapseDetails = function (detCont, action) {
+    queryAll('details', detCont).forEach(function (details) {
+      details.open = action !== 'collapse'
+    });
+  };
+
+  document.querySelectorAll('button.expand').forEach(function (b){
+    b.addEventListener('click', function () {
+      detailsContainer = b.parentElement.querySelector('.details');
+      expandCollapseDetails(detailsContainer, 'expand');
+      b.disabled = true;
+      b.parentElement
+        .querySelector('button.collapse')
+        .removeAttribute('disabled');
+    });
+  });
+
+  document.querySelectorAll('button.collapse').forEach(function (b){
+    b.addEventListener('click', function () {
+      detailsContainer = b.parentElement.querySelector('.details');
+      expandCollapseDetails(detailsContainer, 'collapse');
+      b.disabled = true;
+      b.parentElement
+        .querySelector('button.expand')
+        .removeAttribute('disabled');
+    });
+  });
+});