+// Fire when a tab is selected/clicked.
+$(document).on('shown.bs.tab', '[data-toggle="tab"]', function(event) {
+ // When we switch tabs, remove "active" from any refreshable panes within
+ // the previous tab content so they don't continue to refresh unnecessarily, and
+ // add "active" to any refreshable panes under the newly shown tab content.
+
+ var tgt = $($(event.relatedTarget).attr('href'));
+ $(".pane-anchor", tgt).each(function (i, e) {
+ var a = $($(e).attr('href'));
+ a.removeClass("active");
+ });
+
+ tgt = $($(event.target).attr('href'));
+ $(".pane-anchor", tgt).each(function (i, e) {
+ var a = $($(e).attr('href'));
+ a.addClass("active");
+ });
+
+ // Now trigger reload of the newly shown tab pane.
+ $(event.target).trigger('arv:pane:reload');
+});
+
+// Ask a refreshable pane to reload via ajax.
+// Target of this event is the anchoring element that manages the pane.
+//
+// Panes can be in one of three primary states, managed by setting CSS classes
+// on the object: not loaded (no pane-* state classes), pane-loading, pane-loaded
+//
+// not loaded means the pane needs to be loaded when the pane becomes active
+//
+// pane-loading means there is a current AJAX call outstanding to reload the pane
+//
+// pane-loaded means the pane is believe to be up to date
+//
+// There are two additional states: pane-stale and pane-reload-pending
+//
+// pane-stale indicates a pane that is already loading has been invalidated and
+// should schedule a reload immediately when the current load completes. (This
+// happens if there are clusters of events, where the reload is trigged by the
+// first event, but we actually want to display the state after the final event
+// has been processed.)
+//
+// pane-reload-pending indicates a reload is scheduled, to suppress
+// scheduling any additional reloads.
+$(document).on('arv:pane:reload', function(e) {
+ e.stopPropagation();
+
+ // '$anchor' is the event target, which is a .pane-anchor or a bootstrap
+ // tab anchor. This is the element that stores the state of the pane. The
+ // actual element that will contain the content is pointed to in the 'href'
+ // attribute of etarget.
+ var $anchor = $(e.target);
+
+ if ($anchor.hasClass('pane-loading')) {
+ // Already loading, mark stale to schedule a reload after this one.
+ $anchor.addClass('pane-stale');
+ return;
+ }
+
+ if ($anchor.hasClass('pane-no-auto-reload') && $anchor.hasClass('pane-loaded')) {
+ // Have to explicitly remove pane-loaded if we want it to reload.
+ return;
+ }
+
+ var throttle = $anchor.attr('data-load-throttle');
+ if (!throttle) {
+ throttle = 3000;
+ }
+ var now = (new Date()).getTime();
+ var loaded_at = $anchor.attr('data-loaded-at');
+ var since_last_load = now - loaded_at;
+ if (loaded_at && (since_last_load < throttle)) {
+ if (!$anchor.hasClass('pane-reload-pending')) {
+ $anchor.addClass('pane-reload-pending');
+ setTimeout((function() {
+ $anchor.trigger('arv:pane:reload');
+ }), throttle - since_last_load);
+ }