Load data for tabs on tab selection.

Add the `onShow` helper, which creates a one-time event listener to do some work when the specified tab is selected. Also add the `initTableDeferred` helper, which defers table initialization until the parent tab is displayed. [Resolves fecgov#345] [Resolves fecgov#359]
jmcarp · Aug 7, 2015 · deae29a · deae29a
1 parent 0313c54
commit deae29a
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 12 deletions.
diff --git a/static/js/modules/tables.js b/static/js/modules/tables.js
@@ -6,6 +6,7 @@ var $ = require('jquery');
 var URI = require('URIjs');
 var _ = require('underscore');
 var moment = require('moment');
+var tabs = require('../vendor/tablist');
 
 require('datatables');
 require('drmonty-datatables-responsive');
@@ -349,6 +350,13 @@ function initTable($table, $form, baseUrl, baseQuery, columns, callbacks, opts)
   }
 }
 
+function initTableDeferred($table) {
+  var args = _.toArray(arguments);
+  tabs.onShow($table, function() {
+    initTable.apply(null, args);
+  });
+}
+
 var offsetCallbacks = {
   mapQuery: mapQueryOffset
 };
@@ -371,4 +379,5 @@ module.exports = {
   offsetCallbacks: offsetCallbacks,
   seekCallbacks: seekCallbacks,
   initTable: initTable,
+  initTableDeferred: initTableDeferred
 };
diff --git a/static/js/pages/committee-single.js b/static/js/pages/committee-single.js
@@ -5,6 +5,7 @@
 var $ = require('jquery');
 var URI = require('URIjs');
 var _ = require('underscore');
+var tabs = require('../vendor/tablist');
 
 var maps = require('../modules/maps');
 var events = require('../modules/events');
@@ -257,7 +258,7 @@ $(document).ready(function() {
         } else {
           query.cycle = cycle;
         }
-        tables.initTable($table, null, path, query, committeeColumns, tables.offsetCallbacks, {
+        tables.initTableDeferred($table, null, path, query, committeeColumns, tables.offsetCallbacks, {
           dom: singlePageTableDOM,
           order: [[1, 'desc']],
           pagingType: 'simple',
@@ -269,7 +270,7 @@ $(document).ready(function() {
       case 'contribution-size':
         path = ['committee', committeeId, 'schedules', 'schedule_a', 'by_size'].join('/');
         query = {cycle: cycle};
-        tables.initTable($table, null, path, query, sizeColumns,
+        tables.initTableDeferred($table, null, path, query, sizeColumns,
           _.extend({
             afterRender: tables.barsAfterRender.bind(undefined, undefined)
           }, tables.offsetCallbacks), {
@@ -284,7 +285,7 @@ $(document).ready(function() {
       case 'receipts-by-state':
         path = ['committee', committeeId, 'schedules', 'schedule_a', 'by_state'].join('/');
         query = {cycle: parseInt(cycle), per_page: 99, hide_null: true};
-        tables.initTable($table, null, path, query, stateColumns,
+        tables.initTableDeferred($table, null, path, query, stateColumns,
           _.extend(
             {afterRender: tables.barsAfterRender.bind(undefined, undefined)},
             tables.offsetCallbacks
@@ -317,20 +318,20 @@ $(document).ready(function() {
       case 'receipts-by-employer':
         path = ['committee', committeeId, 'schedules', 'schedule_a', 'by_employer'].join('/');
         query = {cycle: parseInt(cycle)};
-        tables.initTable($table, null, path, query, employerColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
+        tables.initTableDeferred($table, null, path, query, employerColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
           order: [[1, 'desc']],
         }));
         break;
       case 'receipts-by-occupation':
         path = ['committee', committeeId, 'schedules', 'schedule_a', 'by_occupation'].join('/');
         query = {cycle: parseInt(cycle)};
-        tables.initTable($table, null, path, query, occupationColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
+        tables.initTableDeferred($table, null, path, query, occupationColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
           order: [[1, 'desc']],
         }));
         break;
       case 'filing':
         var $form = $('#category-filters');
-        tables.initTable($table, $form, 'committee/' + committeeId + '/filings', {}, filingsColumns, tables.offsetCallbacks, {
+        tables.initTableDeferred($table, $form, 'committee/' + committeeId + '/filings', {}, filingsColumns, tables.offsetCallbacks, {
           dom: 't<"results-info results-info--bottom meta-box"lfrip>',
           // Order by receipt date descending
           order: [[4, 'desc']],
@@ -339,21 +340,21 @@ $(document).ready(function() {
       case 'disbursements-by-purpose':
         path = ['committee', committeeId, 'schedules', 'schedule_b', 'by_purpose'].join('/');
         query = {cycle: parseInt(cycle)};
-        tables.initTable($table, null, path, query, disbursementPurposeColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
+        tables.initTableDeferred($table, null, path, query, disbursementPurposeColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
           order: [[1, 'desc']],
         }));
         break;
       case 'disbursements-by-recipient':
         path = ['committee', committeeId, 'schedules', 'schedule_b', 'by_recipient'].join('/');
         query = {cycle: parseInt(cycle)};
-        tables.initTable($table, null, path, query, disbursementRecipientColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
+        tables.initTableDeferred($table, null, path, query, disbursementRecipientColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
           order: [[1, 'desc']],
         }));
         break;
       case 'disbursements-by-recipient-id':
         path = ['committee', committeeId, 'schedules', 'schedule_b', 'by_recipient_id'].join('/');
         query = {cycle: parseInt(cycle)};
-        tables.initTable($table, null, path, query, disbursementRecipientIDColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
+        tables.initTableDeferred($table, null, path, query, disbursementRecipientIDColumns, tables.offsetCallbacks, _.extend({}, tableOpts, {
           order: [[1, 'desc']],
         }));
         break;

diff --git a/static/js/pages/elections.js b/static/js/pages/elections.js
@@ -389,7 +389,7 @@ function initStateMaps(results) {
 function initSpendingTables() {
   var $table = $('table[data-type="independent-expenditures"]');
   var path = ['schedules', 'schedule_e'].join('/');
-  tables.initTable($table, null, path, context.election, independentExpenditureColumns, tables.seekCallbacks, {
+  tables.initTableDeferred($table, null, path, context.election, independentExpenditureColumns, tables.seekCallbacks, {
     // dom: singlePageTableDOM,
     order: [[0, 'desc']],
     pagingType: 'simple',

diff --git a/static/js/vendor/tablist.js b/static/js/vendor/tablist.js
@@ -6,6 +6,8 @@
 var URI = require('URIjs');
 var _ = require('underscore');
 
+var events = require('../modules/events');
+
 // The class for the container div
 
 var $container = '.tab-interface';
@@ -64,16 +66,19 @@ function show($target, push) {
   var $panel = $('#' + $target.attr('href').substring(1));
   $panel.attr('aria-hidden', null);
 
+  var name = $target.closest('[role="tablist"]').attr('data-name');
+  var value = $target.attr('data-name');
+
   if (push) {
-    var name = $target.closest('[role="tablist"]').attr('data-name');
-    var value = $target.attr('data-name');
     var query = _.extend(
       URI.parseQuery(window.location.search),
       _.object([[name, value]])
     );
     var search = URI('').query(query).toString();
     window.history.pushState(query, search, search || window.location.pathname);
   }
+
+  events.emit('tabs.show.' + value, {$tab: $target, $panel: $panel});
 }
 
 function refreshTabs() {
@@ -90,3 +95,18 @@ function refreshTabs() {
 
 $(window).on('popstate', refreshTabs);
 refreshTabs();
+
+function onShow($elm, callback) {
+  var $panel = $elm.closest('[role="tabpanel"]');
+  if ($panel.is(':visible')) {
+    callback();
+  } else {
+    var $trigger = $('[href="#' + $panel.attr('id') + '"]');
+    var event = 'tabs.show.' + $trigger.attr('data-name');
+    events.once(event, callback);
+  }
+}
+
+module.exports = {
+  onShow: onShow
+};