[waiting for ux] 4942 Datatable Details Panel to Child Rows

fec/data/templates/datatable.jinja

@@ -57,9 +57,6 @@
       </div>
     </div>
 </section>
-
-{% include 'partials/datatable-modal.jinja' %}
-
 {% endblock %}
 
 {% block scripts %}

fec/data/templates/partials/committee/filings.jinja

@@ -22,5 +22,3 @@
     {% endif %}
   </div>
 </section>
-
-{% include 'partials/datatable-modal.jinja' %}

fec/fec/static/js/modules/filings.js

@@ -1,6 +1,6 @@
 import { default as _extend } from 'underscore/modules/extend.js';
 
-import { MODAL_TRIGGER_CLASS, modalRenderFactory } from './tables.js';
+import { DETAILS_TRIGGER_CLASS, modalRenderFactory } from './tables.js';
 import { amendmentVersion, amendmentVersionDescription, buildUrl } from '../modules/helpers.js';
 import { default as candidateTemplate } from '../templates/reports/candidate.hbs';
 import { default as ieTemplate } from '../templates/reports/ie-only.hbs';
@@ -40,6 +40,6 @@ export const renderModal = modalRenderFactory(
 
 export function renderRow(row, data) {
   if (data.form_type && data.form_type.match(/^F[35][XP]?$/)) {
-    row.classList.add(MODAL_TRIGGER_CLASS, 'row--has-panel');
+    row.classList.add(DETAILS_TRIGGER_CLASS, 'row--has-details');
   }
 }

fec/fec/static/js/modules/helpers.js

@@ -19,13 +19,19 @@ import {
   states as decoders_states
 } from './decoders.js';
 
-// set parameters from the API
+/**
+ * Set parameters from the API
+ * @enum {string}
+ */
 export const API = {
   amendment_indicator_new: 'N',
   amendment_indicator_terminated: 'T',
   means_filed_e_file: 'e-file'
 };
 
+/**
+ * Pixel widths when we consider a screen small (default), medium, or large
+ * @enum {number} */
 export const BREAKPOINTS = {
   MEDIUM: 640,
   LARGE: 860
@@ -34,6 +40,10 @@ export const BREAKPOINTS = {
 export const LOADING_DELAY = 1500;
 export const SUCCESS_DELAY = 5000;
 
+/**
+ * Selection of date formats
+ * @enum {string} Selected date format e.g. 'MM/DD/YYYY' or 'MMMM D, h:mma'
+ */
 export const formatMap = {
   default: 'MM/DD/YYYY',
   pretty: 'MMMM D, YYYY',
@@ -43,8 +53,11 @@ export const formatMap = {
   fullDayOfWeek: 'dddd'
 };
 
+/**
+ * Attach anchor <a> links to any tag with a given attribute.
+ * @param {string} attr - Content of a `[]` selector
+ */
 export function anchorify(attr) {
-  // Attach anchor <a> links to any tag with a given attribute
   $('[' + attr + ']').each(function(idx, item) {
     const elt = $(item);
     const link = $('<a></a>');
@@ -56,6 +69,10 @@ export function anchorify(attr) {
   });
 }
 
+/**
+ * Scrolls the page to the anchor specified by the in the URL, over ms number of milliseconds
+ * @param {number} ms - The duration of the animation in milliseconds
+ */
 export function scrollAnchor(ms) {
   ms = ms || 1000;
   if (window.location.hash) {
@@ -237,13 +254,8 @@ Handlebars.registerHelper('formatSentence', function(value) {
 
 Handlebars.registerHelper('basePath', global.BASE_PATH);
 
-Handlebars.registerHelper('panelRow', function(label, options) {
-  return new Handlebars.SafeString(
-    `<tr>` +
-      `<td class="panel__term">${label}</td>` +
-      `<td class="panel__data">${options.fn(this)}</td>` +
-    '</tr>'
-  );
+Handlebars.registerHelper('dtDetailsTableRow', function(label, options) {
+  return new Handlebars.SafeString(`<tr><th scope="row">${label}</th><td>${options.fn(this)}</td></tr>`);
 });
 
 /**

fec/fec/static/js/modules/tables.js

@@ -1,3 +1,14 @@
+/**
+ * tables.js contains three classes:
+ *
+ * DataTable_FEC - A custom class that extends datatables.net-responsive-dt
+ *   across the site, every time "datatables" is referenced, it's DataTable_FEC, not datatables.net*
+ *
+ * OffsetPaginator -
+ *
+ * SeekPaginator -
+ */
+
 import { default as _chain } from 'underscore/modules/chain.js';
 import { default as _clone } from 'underscore/modules/clone.js';
 import { default as _debounce } from 'underscore/modules/debounce.js';
@@ -13,7 +24,7 @@ import { default as _pairs } from 'underscore/modules/pairs.js';
 import { default as _pluck } from 'underscore/modules/pluck.js';
 import 'datatables.net-responsive-dt';
 
-import { removeTabindex, restoreTabindex } from './accessibility.js';
+// import { removeTabindex, restoreTabindex } from './accessibility.js';
 import { sizeColumns, stateColumns } from './column-helpers.js';
 import { download, isPending, pendingCount } from './download.js';
 import Dropdown from './dropdowns.js';
@@ -118,7 +129,7 @@ export function getCycle(value, meta) {
  *
  * @param {*} order
  * @param {*} column
- * @returns
+ * @returns {string}
  */
 export function mapSort(order, column) {
   return _map(order, function(item) {
@@ -130,6 +141,11 @@ export function mapSort(order, column) {
   });
 }
 
+/**
+ * Returns the number of results if <= 500K, otherwise rounds to the nearest 1K
+ * @param {*} response
+ * @returns {number} Number of real or estimated results
+ */
 function getCount(response) {
   let pagination_count = response.pagination.count; // eslint-disable-line camelcase
 
@@ -159,17 +175,15 @@ function identity(value) {
   return value;
 }
 
-export const MODAL_TRIGGER_CLASS = 'js-panel-trigger';
+export const DETAILS_TRIGGER_CLASS = 'js-dt-details-trigger';
 export const MODAL_TRIGGER_HTML =
-  '<button class="js-panel-button button--panel">' +
-  '<span class="u-visually-hidden">Toggle details</span>' +
-  '</button>';
+  `<button class="button--dt-details"><span class="u-visually-hidden">Toggle details</span></button>`;
 
 /**
  * @param {HTMLTableRowElement} row
  */
 export function modalRenderRow(row) {
-  row.classList.add(MODAL_TRIGGER_CLASS, 'row--has-panel');
+  row.classList.add(DETAILS_TRIGGER_CLASS, 'row--has-details');
 }
 
 /**
@@ -183,18 +197,13 @@ export function modalRenderFactory(template, fetch) {
 
   return function(api, data, response) {
     const $table = $(api.table().node());
-    const $modal = $('#datatable-modal');
-    const $main = $table.closest('.panel__main');
-    // Move the modal to the results div.
-    $modal.appendTo($main);
-    $modal.css('display', 'block');
 
     // Add a class to the .dataTables_wrapper
     $table.closest('.dataTables_wrapper').addClass('dataTables_wrapper--panel');
 
     $table.off(
       'click keypress',
-      '.js-panel-toggle tr.' + MODAL_TRIGGER_CLASS,
+      `.js-panel-toggle tr.${DETAILS_TRIGGER_CLASS}`,
       callback
     );
     callback = function(e) {
@@ -206,66 +215,46 @@ export function modalRenderFactory(template, fetch) {
         if ($target.is('a')) {
           return true;
         }
+
         if (!$target.closest('td').hasClass('dataTables_empty')) {
-          const index = api.row($row).index();
+          const row = api.row($row);
+          const index = row.index();
+
+          if (row.child.isShown()) {
+            row.child.hide();
+            $row.removeClass('row-active');
+            $row.removeAttr('aria-details');
+            return;
+          }
+
           $.when(fetch(response.results[index])).done(function(fetched) {
-            $modal.find('.js-panel-content').html(template(fetched));
-            $modal.attr('aria-hidden', 'false');
-            $row.siblings().toggleClass('row-active', false);
-            $row.toggleClass('row-active', true);
-            $('body').toggleClass('panel-active', true);
-            restoreTabindex($modal);
-            const hideColumns = api.columns('.hide-panel');
-            hideColumns.visible(false);
-
-            // Populate the pdf button if there is one
-            if (fetched.pdf_url) {
-              $modal.find('.js-pdf_url').attr('href', fetched.pdf_url);
-            } else {
-              $modal.find('.js-pdf_url').remove();
-            }
-            // Set focus on the close button
-            $('.js-hide').focus(); // TODO: jQuery deprecation
-
-            // When under $large-screen
-            // TODO figure way to share these values with CSS.
-            if ($(document).width() < 980) {
-              api.columns('.hide-panel-tablet').visible(false);
-            }
+            const newChildRowContent = template(fetched);
+            const newChildRowHtml = childRow(newChildRowContent);
+            const newChildRow = row.child(newChildRowHtml);
+
+            newChildRow.show();
+            $row.addClass('row-active');
+            row.child().addClass('dt-isChild row-active');
+            // Aria link the normal row and its child/details row
+            row.child().attr('id', `details-for-tr-${index}`);
+            $row.attr('aria-details', `details-for-tr-${index}`);
+            const newChildRowPdfButton = $row.next().find('.js-pdf_url');
+            if (fetched.pdf_url)
+              newChildRowPdfButton.attr('href', fetched.pdf_url);
+            else
+              newChildRowPdfButton.remove();
           });
         }
       }
     };
     $table.on(
       'click keypress',
-      '.js-panel-toggle tr.' + MODAL_TRIGGER_CLASS,
+      `.js-panel-toggle tr.${DETAILS_TRIGGER_CLASS}`,
       callback
     );
-
-    $modal.on('click', '.js-panel-close', function(e) {
-      e.preventDefault();
-      hidePanel(api, $modal);
-    });
   };
 }
 
-function hidePanel(api, $modal) {
-  $('.row-active .js-panel-button').focus(); // TODO: jQuery deprecation
-  $('.js-panel-toggle tr').toggleClass('row-active', false);
-  $('body').toggleClass('panel-active', false);
-  $modal.attr('aria-hidden', 'true');
-
-  if ($(document).width() > 640) {
-    api.columns('.hide-panel-tablet').visible(true);
-    api.columns('.hide-panel.min-tablet').visible(true);
-  }
-
-  if ($(document).width() > 980) {
-    api.columns('.hide-panel').visible(true);
-  }
-
-  removeTabindex($modal);
-}
 /**
  *
  * @param {?string} template
@@ -307,7 +296,6 @@ export function barsAfterRender(template, api) {
 function updateOnChange($form, api) {
   function onChange(e) {
     e.preventDefault();
-    hidePanel(api, $('#datatable-modal'));
     api.ajax.reload();
 
     updateChangedEl = e.target;
@@ -818,7 +806,7 @@ DataTable_FEC.prototype.fetch = function(data, callback) {
         .addClass('is-active-filter')
         .removeClass('is-disabled-filter');
 
-      // Datatables that should have limits and reached the maxiumum
+      // Datatables that should have limits and reached the maximum
       // filter limit should display the field's error message
       // and disable that field's filter
       if (
@@ -1082,7 +1070,7 @@ DataTable_FEC.prototype.handleSwitch = function(e, opts) {
 
 /**
  * Used for…
- * @param {string} className - Selector text, including the leading period (ex: `.data-table` instead of `data-table`)
+ * @param {string} tableElementSelector - Selector text, including the leading period (ex: `.data-table` instead of `data-table`)
  * @param {Object} pageContext - The window.context data object
  * @param {string} pageContext.candidateID
  * @param {number} pageContext.cycle
@@ -1092,8 +1080,8 @@ DataTable_FEC.prototype.handleSwitch = function(e, opts) {
  * @param {string} pageContext.timePeriod - In the format of `2023-2024`
  * @param {Object} options - spendingTableOpts from {@link /fec/fec/static/js/pages/elections.js}
  */
-export function initSpendingTables(className, pageContext, options) {
-  $(className).each(function(index, table) {
+export function initSpendingTables(tableElementSelector, pageContext, options) {
+  $(tableElementSelector).each(function(index, table) {
     const $table = $(table);
     const dataType = $table.attr('data-type');
     const opts = options[dataType];
@@ -1326,3 +1314,19 @@ function drawContributionsByStateTable(selected, pageContext) {
     );
   });
 }
+
+/**
+ * Build the HTML for the child row / details row
+ * @param {string} contents
+ * @returns {string} a string to be used as the innerHTML of the child/details row
+ */
+function childRow(contents) {
+  return `<div class="dt-details">
+    <div class="dt-details__nav">
+      <a class="dt-details__link button--small button--standard js-pdf_url" target="_blank">Open image</a>
+    </div>
+    <div class="dt-details__content">
+      ${contents}
+    </div>
+  </div>`;
+}

fec/fec/static/js/pages/contact-form.js

@@ -65,7 +65,7 @@ ContactForm.prototype.initOtherReason = function() {
 
 /**
  *
- * @param {JQuery.Event} e
+ * @param {jQuery.Event} e
  */
 ContactForm.prototype.toggleOtherReason = function(e) {
   if (e.target.value === 'other') {
@@ -77,7 +77,7 @@ ContactForm.prototype.toggleOtherReason = function(e) {
 
 /**
  *
- * @param {JQuery.Event} e
+ * @param {jQuery.Event} e
  */
 ContactForm.prototype.clearForm = function(e) {
   e.preventDefault();
@@ -88,7 +88,7 @@ ContactForm.prototype.clearForm = function(e) {
 
 /**
  * Analyst lookup tool
- * @param {JQuery.$element} $elm
+ * @param {jQuery} $elm
  */
 export function AnalystLookup($elm) {
   this.$elm = $elm;
@@ -167,7 +167,7 @@ AnalystLookup.prototype.hideAnalyst = function() {
 
 /**
  *
- * @param {JQuery.Event} e
+ * @param {jQuery.Event} e
  */
 AnalystLookup.prototype.handleChange = function(e) {
   if (!$(e.target).val()) {