refactor javascript to static file to reduce templating

Netdisco/public/javascripts/netdisco.js

@@ -0,0 +1,158 @@
+// parameterised for the active tab - submits search form and injects
+// HTML response into the tab pane, or an error/empty-results message
+function do_search (event, tab) {
+  var form = '#' + tab + '_form';
+  var target = '#' + tab + '_pane';
+  var mark = '#' + tab + '_bookmark';
+
+  // stop form from submitting normally
+  event.preventDefault();
+
+  // copy current search string to other forms' input box
+  $('form').find("input[name=q]").each( function() {
+    $(this).val( $(form).find("input[name=q]").val() );
+  });
+
+  // get the form params
+  var query = $(form).serialize();
+
+  if (window.History.enabled) {
+    is_from_history_plugin = 1;
+    window.History.replaceState(
+      {name: tab, fields: $(form).serializeArray()},
+      'Netdisco - '+ tab.charAt(0).toUpperCase() + tab.slice(1),
+      uri_base + '/' + path + '?' + query
+    );
+    is_from_history_plugin = 0;
+  }
+
+  // in case of slow data load, let the user know
+  $(target).html(
+    '<div class="span3 alert-message notice"><p>Waiting for results...</p></div>'
+  );
+
+  // submit the query and put results into the tab pane
+  $(target).load( uri_base + '/ajax/content/' + path + '/' + tab + '?' + query,
+    function(response, status, xhr) {
+      if (status !== "success") {
+        $(target).html(
+          '<div class="span6 alert-message error">' +
+          '<p>Search failed! Please contact your site administrator.</p></div>'
+        );
+        return;
+      }
+      if (response === "") {
+        $(target).html(
+          '<div class="span3 alert-message info"><p>No matching records.</p></div>'
+        );
+      }
+      // looks good, update the bookmark for this search
+      $(mark).attr('href', uri_base + '/' + path + '?' + query);
+
+      inner_view_processing();
+    }
+  );
+}
+
+// the history.js plugin is great, but fires statechange at pushState
+// so we have these semaphpores to help avoid messing the History.
+
+// set true when faking a user click on a tab
+var is_from_state_event = 0;
+// set true when the history plugin does pushState - to prevent loop
+var is_from_history_plugin = 0;
+
+// on tab change, hide previous tab's search form and show new tab's
+// search form. also trigger to load the content for the newly active tab.
+function update_content(from, to) {
+  $('#' + from + '_search').toggleClass('active');
+  $('#' + to + '_search').toggleClass('active');
+
+  var to_form = '#' + to + '_form';
+  var from_form = '#' + from + '_form';
+
+  if (window.History.enabled && is_from_state_event == 0) {
+    is_from_history_plugin = 1;
+    window.History.pushState(
+      {name: to, fields: $(to_form).serializeArray()},
+      'Netdisco '+ $(to_form).find("input[name=ip]").val()  +' '+ to.charAt(0).toUpperCase() + to.slice(1),
+      uri_base + '/' + path + '?' + $(to_form).serialize()
+    );
+    is_from_history_plugin = 0;
+  }
+
+  $(to_form).trigger("submit");
+}
+
+// handler for ajax navigation
+if (window.History.enabled) { 
+  var History = window.History;
+  History.Adapter.bind(window, "statechange", function() {
+    if (is_from_history_plugin == 0) {
+      is_from_state_event = 1;
+      var State = History.getState();
+      // History.log(State.data.name, State.title, State.url);
+      $('#'+ State.data.name + '_form').deserialize(State.data.fields);
+      $('#'+ State.data.name + '_link').click();
+      is_from_state_event = 0;
+    }
+  });
+}
+
+$(document).ready(function() {
+  // activate tooltips
+  $("[rel=twipsy]").twipsy({live: true});
+
+  // fix green background on search checkboxes
+  // https://github.com/twitter/bootstrap/issues/742
+  syncCheckBox = function() {
+    $(this).parents('.add-on').toggleClass('active', $(this).is(':checked'));
+  };
+  $('.add-on :checkbox').each(syncCheckBox).click(syncCheckBox);
+
+  // sidebar toggle - trigger in/out on image click()
+  $('#sidebar_toggle_img_in').click(
+    function() {
+      $('.sidebar').toggle(
+        function() {
+          $('#sidebar_toggle_img_out').toggle();
+          $('.nd_content').animate({'margin-left': '5px !important'}, 100);
+          $('.device_label_right').toggle();
+        }
+      );
+    }
+  );
+  $('#sidebar_toggle_img_out').click(
+    function() {
+      $('#sidebar_toggle_img_out').toggle();
+      $('.nd_content').animate({'margin-left': '225px !important'}, 200,
+        function() {
+          $('.device_label_right').toggle();
+          $('.sidebar').toggle(200);
+        }
+      );
+    }
+  );
+
+  // could not get twitter bootstrap tabs to behave, so implemented this
+  // but warning! will probably not work for dropdowns in tabs
+  $('#search_results li').delegate('a', 'click', function(event) {
+    event.preventDefault();
+    var from_li = $('.tabs').find('> .active').first();
+    var to_li = $(this).parent('li')
+
+    from_li.removeClass('active');
+    to_li.addClass('active');
+
+    var from = from_li.find('a').attr('href');
+    var to = $(this).attr('href');
+
+    $(from).toggleClass('active');
+    $(to).toggleClass('active');
+
+    update_content(
+      from.replace(/^#/,"").replace(/_pane$/,""),
+      to.replace(/^#/,"").replace(/_pane$/,"")
+    );
+  });
+});