3170: Root out evil runtime-generated javascript. Simplify tab loading.

diff --git a/apps/workbench/app/assets/javascripts/sizing.js b/apps/workbench/app/assets/javascripts/sizing.js
index 71761db744c9ca1b93bb715fabc67b31f6ae6306..2341628fa76ff195196583a740d19354e5e95285 100644 (file)
--- a/apps/workbench/app/assets/javascripts/sizing.js
+++ b/apps/workbench/app/assets/javascripts/sizing.js
@@ -28,3 +28,4 @@ function smart_scroll_fixup(s) {
 }
 
 $(window).on('load ready resize scroll ajax:complete', smart_scroll_fixup);
+$(document).on('shown.bs.tab', 'ul.nav-tabs > li > a', smart_scroll_fixup);

diff --git a/apps/workbench/app/assets/javascripts/tab_panes.js b/apps/workbench/app/assets/javascripts/tab_panes.js
new file mode 100644 (file)
index 0000000..55cf7d8
--- /dev/null
+++ b/apps/workbench/app/assets/javascripts/tab_panes.js
@@ -0,0 +1,16 @@
+$(document).on('shown.bs.tab', '[data-toggle="tab"]', function(e) {
+    var content_url = $(e.target).attr('data-pane-content-url');
+    var $pane = $($(e.target).attr('href'));
+    if ($pane.hasClass('loaded'))
+        return;
+    $.ajax(content_url, {dataType: 'html', type: 'GET', context: $pane}).
+        done(function(data, status, jqxhr) {
+            $('> div > div', this).html(data);
+            $(this).addClass('loaded');
+        });
+});
+
+$(document).on('arv-log-event', function() {
+    $('[data-pane-content-url]').removeClass('loaded');
+    $('.tab-pane.active').trigger('shown.bs.tab');
+});

diff --git a/apps/workbench/app/views/application/_content.html.erb b/apps/workbench/app/views/application/_content.html.erb
index c9522de3f2548e81f0544d8afb9088f4afd03640..22db2e7e35bd5d6b310f5a610f04dd9cbb404490 100644 (file)
--- a/apps/workbench/app/views/application/_content.html.erb
+++ b/apps/workbench/app/views/application/_content.html.erb
@@ -19,48 +19,19 @@
   <% end %>
 <% end %>
 
-<% content_for :js do %>
-  tab_pane_valid_state = {};
-
-  function ajaxRefreshTabPane(pane) {
-    if (!tab_pane_valid_state[pane]) {
-      tab_pane_valid_state[pane] = true;
-      $.ajax('<%=j url_for() %>?<%= raw(controller.request.query_string) %>&tab_pane='+pane, {dataType: 'html', type: 'GET'}).
-        done(function(data, status, jqxhr) {
-          $('#' + pane + ' > div > div').html(data);
-          ajaxRefreshTabPane(pane);
-        });
-    }
-  }
-
-  $(window).on('load', smart_scroll_fixup);
-  $(document).on('shown.bs.tab', 'ul.nav-tabs > li > a', smart_scroll_fixup);
-
-  $(document).on('shown.bs.tab', function(e) {
-    ajaxRefreshTabPane(e.target.id.slice(0, -4));
-  });
-
-  $(document).on('arv-log-event', function() {
-    <% pane_list.each do |pane| %>
-    tab_pane_valid_state['<%=j pane %>'] = false;
-    <% end %>
-    ajaxRefreshTabPane($('.tab-pane.active')[0].id);
-  });
-<% end %>
-
 <% content_for :tab_panes do %>
 
 <% comparable = controller.respond_to? :compare %>
 
 <ul class="nav nav-tabs">
   <% pane_list.each_with_index do |pane, i| %>
-    <li class="<%= 'active' if i==0 %>"><a href="#<%= pane %>" data-toggle="tab" id="<%= pane %>-tab"> <%= pane.gsub('_', ' ') %></a></li>
+    <li class="<%= 'active' if i==0 %>"><a href="#<%= pane %>" data-toggle="tab" id="<%= pane %>-tab" data-pane-content-url="<%= url_for(tab_pane: pane) %>"> <%= pane.gsub('_', ' ') %></a></li>
   <% end %>
 </ul>
 <div class="tab-content">
 <% pane_list.each_with_index do |pane, i| %>
   <div id="<%= pane %>"
-       class="tab-pane fade <%= 'in active' if i==0 %> arv-log-event-listener"
+       class="tab-pane fade <%= 'in active loaded' if i==0 %> arv-log-event-listener"
 <% if controller.action_name == "index" %>
        data-object-kind="arvados#<%= ArvadosApiClient.class_kind controller.model_class %>"
 <% else %>
@@ -68,17 +39,6 @@
 <% end %>
   >
 
-<% content_for :js do %>
-  <% if i == 0 %>
-    tab_pane_valid_state['<%=j pane %>'] = true;
-  <% else %>
-    tab_pane_valid_state['<%=j pane %>'] = false;
-    $(document).on('ready', function() {
-      ajaxRefreshTabPane('<%=j pane %>');
-    });
-  <% end %>
-<% end %>
-
     <div id="<%= pane %>-scroll" style="margin-top:0.5em;">
       <div class="pane-content">
         <% if i == 0 %>