Add missing IDs back to mapping tables

w3c · Jan 19, 2022 · 5fa4b38 · 5fa4b38
1 parent 83e51f3
commit 5fa4b38
Show file tree

Hide file tree

Showing 3 changed files with 5,334 additions and 310 deletions.
diff --git a/common/script/mapping-tables.js b/common/script/mapping-tables.js
@@ -1,18 +1,11 @@
-// check for require() and respec context
-/* global require , mappingTables */
+/* global mappingTables */
 
-if (typeof require !== 'undefined') {
-  require(['core/pubsubhub'], function (respecEvents) {
-    mapTables(respecEvents);
-  });
+if (document.readyState !== 'loading') {
+  mappingTables();
 } else {
-  if (document.readyState !== 'loading') {
-    mapTables(false);
-  } else {
-    document.addEventListener('DOMContentLoaded', function () {
-      mapTables(false);
-    });
-  }
+  document.addEventListener('DOMContentLoaded', function () {
+    mappingTables();
+  });
 }
 
 function hideElement(element) {
@@ -52,7 +45,7 @@ function viewAsSingleTable(mappingTableInfo) {
   queryAll('tbody tr', mappingTableInfo.tableContainer).forEach(function (
     tr
   ) {
-    tr.id = mappingTableInfo.ids[getElementIndex(tr)];
+    tr.id = tr.dataset['id'];
   });
 }
 
@@ -69,14 +62,7 @@ function viewAsDetails(mappingTableInfo) {
   queryAll('summary', mappingTableInfo.detailsContainer).forEach(function (
     summary
   ) {
-    const details = mappingTableInfo.detailsContainer.querySelector(
-      'details'
-    );
-    summary.id =
-      mappingTableInfo.ids[
-        // TODO: check that this works
-        getElementIndex(details) - getElementIndex(summary.parentNode)
-      ];
+    summary.id = summary.dataset['id'];
   });
 }
 
@@ -103,16 +89,13 @@ function mappingTables() {
 
     // create a container div to hold all the details element and insert after table
     tableInfo.detailsContainer = document.createElement('div');
-    tableInfo.detailsContainer.className = 'details removeOnSave';
+    tableInfo.detailsContainer.className = 'details';
     tableInfo.id = tableInfo.table.id + '-details';
     tableInfo.tableContainer.insertAdjacentElement(
       'afterend',
       tableInfo.detailsContainer
     );
 
-    // array to store @id attributes for rows and summaries.
-    tableInfo.ids = [];
-
     // add switch to view as single table or details/summary
     var viewSwitch = document.createElement('button');
     viewSwitch.className = 'switch-view removeOnSave';
@@ -144,13 +127,12 @@ function mappingTables() {
     // remove first column header from array
     colHeaders.shift();
     // for each row in the table, create details/summary..
+
     queryAll('tbody tr', tableInfo.table).forEach(function (row) {
       var caption = row.querySelector('th').innerHTML;
       var summary = caption.replace(/<a [^>]+>|<\/a>/g, '');
       // get the tr's @id
-      var id = row.id;
-      // store the row's @id
-      tableInfo.ids.push(id);
+      var id = row.dataset.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
@@ -175,9 +157,9 @@ function mappingTables() {
 
       // create content for each <details> element; add row header's content to summary
       var details = document.createElement('details');
-      details.className = 'map removeOnSave';
+      details.className = 'map';
 
-      var detailsHTML = '<summary id="' + id + '">' + summary;
+      var detailsHTML = '<summary id="' + id + '" data-id="' + id + '">' + summary;
 
       // if attributes mapping table, append relevant elements to summary
       if (tableInfo.table.classList.contains('attributes')) {
@@ -204,6 +186,12 @@ function mappingTables() {
       detailsHTML += '</tbody></table></details>';
       details.innerHTML = detailsHTML;
 
+      var selfLink = document.createElement('a');
+      selfLink.className = "self-link";
+      selfLink.href = "#" + id;
+      selfLink.setAttribute('aria-label', 'permie');
+      tableInfo.detailsContainer.appendChild(selfLink);
+
       // append the <details> element to the detailsContainer div
       tableInfo.detailsContainer.appendChild(details);
     });
@@ -340,71 +328,3 @@ function mappingTables() {
     }
   });
 }
-
-function mapTables(respecEvents) {
-  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 (
-      summary
-    ) {
-      summary.removeAttribute('id');
-    });
-    showElement(mappingTableInfo.tableContainer);
-
-    // add relevant @id to tr
-    queryAll('tbody tr', mappingTableInfo.tableContainer).forEach(function (
-      tr
-    ) {
-      tr.id = mappingTableInfo.ids[getElementIndex(tr)];
-    });
-  }
-
-  function viewAsDetails(mappingTableInfo) {
-    hideElement(mappingTableInfo.tableContainer);
-    // add tr @id to ids array and remove @id from tr
-    queryAll('tbody tr', mappingTableInfo.tableContainer).forEach(function (
-      tr
-    ) {
-      tr.removeAttribute('id');
-    });
-    showElement(mappingTableInfo.detailsContainer);
-    // add relevant @id to summary
-    queryAll('summary', mappingTableInfo.detailsContainer).forEach(function (
-      summary
-    ) {
-      const details = mappingTableInfo.detailsContainer.querySelector(
-        'details'
-      );
-      summary.id =
-        mappingTableInfo.ids[
-          // TODO: check that this works
-          getElementIndex(details) - getElementIndex(summary.parentNode)
-        ];
-    });
-  }
-
-  if (respecEvents) {
-    // Fix the scroll-to-fragID:
-    // - if running with ReSpec, do not invoke the mapping tables script until
-    //   ReSpec executes its own scroll-to-fragID.
-    // - if running on a published document (no ReSpec), invoke the mapping tables
-    //   script on document ready.
-    respecEvents.sub('start', function (details) {
-      if (details === 'core/location-hash') {
-        mappingTables();
-      }
-    });
-    // Subscribe to ReSpec "save" message to set the mapping tables to
-    // view-as-single-table state.
-    respecEvents.sub('save', function (details) {
-      mappingTableInfos.forEach(function (item) {
-        viewAsSingleTable(item);
-      });
-    });
-  } else {
-    mappingTables();
-  }
-}