Refactoring the JS to clean things up and pull stuff out into separate files.

Change-Id: I92c894a0c3c3322231ff467842075d456fe2a935

openstack-dashboard/dashboard/static/dashboard/js/application.js

@@ -1,137 +0,0 @@
-(function($, window, document, undefined) {
-  $.fn.columnar = function (target, opt) {
-    var options = $.extend({
-      trigger: 'change',
-      retrieve: 'name',
-      container: $('table.sortable'),
-      selector: '.',
-      selected_class: 'hidden'
-    }, opt);
-
-    $(this).bind(options.trigger, function(e) {
-      options.container.find( options.selector + $(this).attr(options.retrieve) ).toggleClass(options.selected_class)
-    })
-  }
-}(jQuery, this, document));
-
-
-$(function(){
-  $(document).on('click', '.modal:not(.static_page) .cancel', function (evt) {
-    $(this).closest('.modal').remove();
-    return false;
-  });
-
-  $('.ajax-modal').click(function (evt) {
-    var $this = $(this);
-    $.ajax($this.attr('href'), {
-      complete: function (jqXHR, status) {
-        $('body').append(jqXHR.responseText);
-        $('body .modal:last').modal({'show':true, 'backdrop': true, 'keyboard': true});
-      }
-    });
-    return false;
-  });
-
-  $('.table_search input').quicksearch('tr.odd, tr.even', {
-    'delay': 300,
-    'loader': 'span.loading',
-    'bind': 'keyup click',
-    'show': function () {
-      this.style.color = '';
-    },
-    'hide': function () {
-      this.style.display = 'none';
-    },
-    'prepareQuery': function (val) {
-      return new RegExp(val, "i");
-    },
-    'testQuery': function (query, txt, _row) {
-      return query.test($(_row).find('td:not(.hidden)').text());
-    }
-  });
-
-  $('table.sortable').tablesorter();
-
-  // show+hide image details
-  $(".details").hide()
-  $("#images td:not(#actions)").click(function(e){
-    $(this).parent().nextUntil(".even, .odd").fadeToggle("slow");
-  })
-
-  $(".drop_btn").click(function(){
-    $(this).parent().children('.item_list').toggle();
-    return false;
-  })
-
-
-  // confirmation on deletion of items
-  $(".terminate").click(function(e){
-    var response = confirm('Are you sure you want to terminate the Instance: '+$(this).attr('title')+"?");
-    return response;
-  })
-
-  $(".delete").click(function(e){
-    var response = confirm('Are you sure you want to delete the '+$(this).attr('title')+" ?");
-    return response;
-  })
-
-  $(".reboot").click(function(e){
-    var response = confirm('Are you sure you want to reboot the '+$(this).attr('title')+" ?");
-    return response;
-  })
-
-  $(".disable").click(function(e){
-    var response = confirm('Are you sure you want to disable the '+$(this).attr('title')+" ?");
-    return response;
-  })
-
-  $(".enable").click(function(e){
-    var response = confirm('Are you sure you want to enable the '+$(this).attr('title')+" ?");
-    return response;
-  })
-
-  // disable multiple submissions when launching a form
-  $("form").submit(function() {
-      $(this).submit(function() {
-          return false;
-      });
-      $('input:submit').removeClass('primary').addClass('disabled');
-      $('input:submit').attr('disabled', 'disabled');
-      return true;
-  });
-
-  $(".detach").click(function(e){
-    var response = confirm('Are you sure you want to detach the '+$(this).attr('title')+" ?");
-    return response;
-  })
-
-  // Actions button dropdown behavior
-  $('a.more-actions').mouseenter(function() {
-    $(this).addClass('active')
-    $('td.actions ul').each(function(){
-      // If another dropdown is open, close it.
-      if ($(this).hasClass('active')) {
-        $(this).removeClass('active')
-        $(this).parent().find('a.more-actions').removeClass('active')
-      };
-    })
-    $(this).parent().find('ul').addClass('active');
-  })
-
-  $('td.actions ul').mouseleave(function(){
-    $(this).parent().find('a.more-actions').removeClass('active')
-    $(this).removeClass('active');
-  })
-
-  $(document).on("submit", ".modal #create_keypair_form", function(e){
-    var $this = $(this);
-    $this.closest(".modal").modal("hide");
-    $('#main_content .page-header').after('<div class="alert-message info">'
-        + '<p><strong>Info: </strong>The data on this page may have changed, '
-        + '<a href=".">click here to refresh it</a>.</p>'
-        + '</div>');
-    return true;
-  });
-})
-
-

openstack-dashboard/dashboard/static/dashboard/js/form_examples.js

@@ -1,5 +1,5 @@
-$(function(){
-// update/create image form
+horizon.addInitFunction(function() {
+  // Update/create image form.
   $("#image_form input#id_name").example("ami-ubuntu");
   $("#image_form input#id_kernel").example("123");
   $("#image_form input#id_ramdisk").example("123");
@@ -11,27 +11,26 @@ $(function(){
   $("#image_form input#id_container_format").example("ari");
   $("#image_form input#id_ramdisk").example("123");
 
-// launch instance form
+  // Launch instance form.
   $("#launch_img input#id_name").example("YetAnotherInstance")
   $("#launch_img input#id_security_groups").example("group1,group2")
 
-// create flavor form
+  // Create flavor form.
   $("#flavor_form input#id_flavorid").example("1234");
   $("#flavor_form input#id_name").example("small");
   $("#flavor_form input#id_vcpus").example("256");
   $("#flavor_form input#id_memory_mb").example("256");
   $("#flavor_form input#id_disk_gb").example("256");
 
-// update/create tenant
+  // Update/create tenant.
   $("#tenant_form input#id__id").example("YetAnotherTenant");
   $("#tenant_form textarea#id_description").example("One or two sentence description.");
 
-// update/create tenant
+  // Update/create tenant.
   $("#user_form input#id_id").example("username");
   $("#user_form input#id_email").example("email@example.com");
   $("#user_form input#id_password").example("password");
 
-// table search box
-  $(".table_search input").example("Filter")
-})
-
+  // Table search box.
+  $(".table_search input").example("Filter");
+});

openstack-dashboard/dashboard/static/dashboard/js/forms.js

@@ -0,0 +1,55 @@
+horizon.addInitFunction(function() {
+  // Disable multiple submissions when launching a form.
+  $("form").submit(function() {
+      $(this).submit(function() {
+          return false;
+      });
+      $('input:submit').removeClass('primary').addClass('disabled');
+      $('input:submit').attr('disabled', 'disabled');
+      return true;
+  });
+
+  // TODO (tres): WTF?
+  $(document).on("submit", ".modal #create_keypair_form", function(e) {
+    var $this = $(this);
+    $this.closest(".modal").modal("hide");
+    $('#main_content .page-header').after('<div class="alert-message info">'
+        + '<p><strong>Info: </strong>The data on this page may have changed, '
+        + '<a href=".">click here to refresh it</a>.</p>'
+        + '</div>');
+    return true;
+  });
+
+  // Confirmation on deletion of items.
+  // TODO (tres): These need to be localizable or to just plain go away in favor
+  // of modals.
+  $(".terminate").click(function() {
+    var response = confirm('Are you sure you want to terminate the Instance: ' + $(this).attr('title') + "?");
+    return response;
+  });
+
+  $(".delete").click(function(e) {
+    var response = confirm('Are you sure you want to delete the ' + $(this).attr('title') + " ?");
+    return response;
+  });
+
+  $(".reboot").click(function(e) {
+    var response = confirm('Are you sure you want to reboot the ' + $(this).attr('title') + " ?");
+    return response;
+  });
+
+  $(".disable").click(function(e) {
+    var response = confirm('Are you sure you want to disable the ' + $(this).attr('title') + " ?");
+    return response;
+  });
+
+  $(".enable").click(function(e) {
+    var response = confirm('Are you sure you want to enable the ' + $(this).attr('title') + " ?");
+    return response;
+  });
+
+  $(".detach").click(function(e) {
+    var response = confirm('Are you sure you want to detach the ' + $(this).attr('title') + " ?");
+    return response;
+  });
+});

openstack-dashboard/dashboard/static/dashboard/js/horizon.js

@@ -0,0 +1,38 @@
+/* This is the base Horizon JavaScript object. There is only ever one of these
+ * loaded (referenced as horizon with a lower-case h) which happens immediately
+ * after the definition below.
+ *
+ * Scripts that are dependent on functionality defined in the Horizon object
+ * must be included after this script in templates/base.html.
+ */
+var Horizon = function() {
+  var horizon = {};
+  var initFunctions = [];
+
+  /* Use the addInitFunction() function to add initialization code which must
+   * be called on DOM ready. This is useful for adding things like event
+   * handlers or any other initialization functions which should preceed user
+   * interaction but rely on DOM readiness.
+   */
+  horizon.addInitFunction = function(fn) {
+    initFunctions.push(fn);
+  };
+
+  /* Call all initialization functions and clear the queue. */
+  horizon.init = function() {
+    $.each(initFunctions, function(ind, fn) {
+      fn();
+    });
+
+    // Prevent multiple executions, just in case.
+    initFunctions = [];
+  };
+
+  return horizon;
+};
+
+// Create the one and only horizon object.
+var horizon = Horizon();
+
+// Call init on DOM ready.
+$(document).ready(horizon.init);

openstack-dashboard/dashboard/static/dashboard/js/modals.js

@@ -0,0 +1,17 @@
+horizon.addInitFunction(function() {
+  $(document).on('click', '.modal:not(.static_page) .cancel', function (evt) {
+    $(this).closest('.modal').remove();
+    return false;
+  });
+
+  $('.ajax-modal').click(function (evt) {
+    var $this = $(this);
+    $.ajax($this.attr('href'), {
+      complete: function (jqXHR, status) {
+        $('body').append(jqXHR.responseText);
+        $('body .modal:last').modal({'show':true, 'backdrop': true, 'keyboard': true});
+      }
+    });
+    return false;
+  });
+});

openstack-dashboard/dashboard/static/dashboard/js/navigation.js

@@ -0,0 +1,13 @@
+horizon.addInitFunction(function() {
+  // Show/hide tenant list in left nav.
+  $(".drop_btn").click(function(){
+    $(this).parent().children('.item_list').toggle();
+    return false;
+  });
+
+  // Show/hide image details.
+  $(".details").hide()
+  $("#images td:not(#actions)").click(function(e) {
+    $(this).parent().nextUntil(".even, .odd").fadeToggle("slow");
+  });
+});

openstack-dashboard/dashboard/static/dashboard/js/plugins.js

@@ -0,0 +1,16 @@
+// Add/remove table columns?
+(function($, window, document, undefined) {
+  $.fn.columnar = function (target, opt) {
+    var options = $.extend({
+      trigger: 'change',
+      retrieve: 'name',
+      container: $('table.sortable'),
+      selector: '.',
+      selected_class: 'hidden'
+    }, opt);
+
+    $(this).bind(options.trigger, function(e) {
+      options.container.find( options.selector + $(this).attr(options.retrieve) ).toggleClass(options.selected_class)
+    });
+  };
+} (jQuery, this, document));

openstack-dashboard/dashboard/static/dashboard/js/tables.js

@@ -0,0 +1,39 @@
+horizon.addInitFunction(function() {
+  $('td.actions ul').mouseleave(function(){
+    $(this).parent().find('a.more-actions').removeClass('active')
+    $(this).removeClass('active');
+  });
+
+  $('.table_search input').quicksearch('tr.odd, tr.even', {
+    'delay': 300,
+    'loader': 'span.loading',
+    'bind': 'keyup click',
+    'show': function () {
+      this.style.color = '';
+    },
+    'hide': function () {
+      this.style.display = 'none';
+    },
+    'prepareQuery': function (val) {
+      return new RegExp(val, "i");
+    },
+    'testQuery': function (query, txt, _row) {
+      return query.test($(_row).find('td:not(.hidden)').text());
+    }
+  });
+
+  $('table.sortable').tablesorter();
+
+  // Actions button dropdown behavior
+  $('a.more-actions').mouseenter(function() {
+    $(this).addClass('active')
+    $('td.actions ul').each(function(){
+      // If another dropdown is open, close it.
+      if ($(this).hasClass('active')) {
+        $(this).removeClass('active')
+        $(this).parent().find('a.more-actions').removeClass('active')
+      };
+    });
+    $(this).parent().find('ul').addClass('active');
+  });
+});

openstack-dashboard/dashboard/templates/base.html

@@ -5,11 +5,10 @@
   <head>
     <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
     <title>{% block title %}{% endblock %} – {% site_branding %} Dashboard</title>
-    <script src='{{ STATIC_URL }}dashboard/js/jquery.min.js' type='text/javascript'></script>
-    <script src='{{ STATIC_URL }}dashboard/js/jquery.quicksearch.js' type='text/javascript'></script>
-    <script src='{{ STATIC_URL }}dashboard/js/jquery.example.min.js' type='text/javascript'></script>
-    <script src="{{ STATIC_URL }}dashboard/js/jquery.table-sorter.js" type="text/javascript" charset="utf-8"></script>
-    <script src='{{ STATIC_URL }}dashboard/js/form_examples.js' type='text/javascript'></script>
+    <script src='{{ STATIC_URL }}dashboard/js/jquery/jquery.min.js' type='text/javascript'></script>
+    <script src='{{ STATIC_URL }}dashboard/js/jquery/jquery.quicksearch.js' type='text/javascript'></script>
+    <script src='{{ STATIC_URL }}dashboard/js/jquery/jquery.example.min.js' type='text/javascript'></script>
+    <script src="{{ STATIC_URL }}dashboard/js/jquery/jquery.table-sorter.js" type="text/javascript" charset="utf-8"></script>
     <script src="{{ STATIC_URL }}dashboard/js/bootstrap/bootstrap-twipsy.js" type="text/javascript" charset="utf-8"></script>
     <script src="{{ STATIC_URL }}dashboard/js/bootstrap/bootstrap-alerts.js" type="text/javascript" charset="utf-8"></script>
     <script src="{{ STATIC_URL }}dashboard/js/bootstrap/bootstrap-dropdown.js" type="text/javascript" charset="utf-8"></script>
@@ -17,7 +16,13 @@
     <script src="{{ STATIC_URL }}dashboard/js/bootstrap/bootstrap-popover.js" type="text/javascript" charset="utf-8"></script>
     <script src="{{ STATIC_URL }}dashboard/js/bootstrap/bootstrap-scrollspy.js" type="text/javascript" charset="utf-8"></script>
     <script src="{{ STATIC_URL }}dashboard/js/bootstrap/bootstrap-tabs.js" type="text/javascript" charset="utf-8"></script>
-    <script charset='utf-8' src='{{ STATIC_URL }}dashboard/js/application.js' type='text/javascript'></script>
+    <script src='{{ STATIC_URL }}dashboard/js/horizon.js' type='text/javascript' charset='utf-8'></script>
+    <script src='{{ STATIC_URL }}dashboard/js/plugins.js' type='text/javascript' charset='utf-8'></script>
+    <script src='{{ STATIC_URL }}dashboard/js/tables.js' type='text/javascript' charset='utf-8'></script>
+    <script src='{{ STATIC_URL }}dashboard/js/modals.js' type='text/javascript' charset='utf-8'></script>
+    <script src='{{ STATIC_URL }}dashboard/js/forms.js' type='text/javascript' charset='utf-8'></script>
+    <script src='{{ STATIC_URL }}dashboard/js/navigation.js' type='text/javascript' charset='utf-8'></script>
+    <script src='{{ STATIC_URL }}dashboard/js/form_examples.js' type='text/javascript'></script>
     <link href='{{ STATIC_URL }}dashboard/css/bootstrap.css' media='screen' rel='stylesheet' />
     <link href='{{ STATIC_URL }}dashboard/css/style.css' media='screen' rel='stylesheet' />
     <link rel="shortcut icon" href="{{ STATIC_URL }}dashboard/images/favicon.ico"/>