From 28cc7b71fc036d4d35ecf40acfdac0c5d81d255c Mon Sep 17 00:00:00 2001 From: Tres Henry Date: Wed, 28 Dec 2011 00:25:54 -0800 Subject: [PATCH] Refactoring the JS to clean things up and pull stuff out into separate files. Change-Id: I92c894a0c3c3322231ff467842075d456fe2a935 --- .../static/dashboard/js/application.js | 137 ------------------ .../static/dashboard/js/form_examples.js | 21 ++- .../dashboard/static/dashboard/js/forms.js | 55 +++++++ .../dashboard/static/dashboard/js/horizon.js | 38 +++++ .../js/{ => jquery}/jquery-ui.min.js | 0 .../js/{ => jquery}/jquery.example.min.js | 0 .../dashboard/js/{ => jquery}/jquery.min.js | 0 .../js/{ => jquery}/jquery.quicksearch.js | 0 .../js/{ => jquery}/jquery.table-sorter.js | 0 .../dashboard/static/dashboard/js/modals.js | 17 +++ .../static/dashboard/js/navigation.js | 13 ++ .../dashboard/static/dashboard/js/plugins.js | 16 ++ .../dashboard/static/dashboard/js/tables.js | 39 +++++ .../dashboard/templates/base.html | 17 ++- 14 files changed, 199 insertions(+), 154 deletions(-) delete mode 100644 openstack-dashboard/dashboard/static/dashboard/js/application.js create mode 100644 openstack-dashboard/dashboard/static/dashboard/js/forms.js create mode 100644 openstack-dashboard/dashboard/static/dashboard/js/horizon.js rename openstack-dashboard/dashboard/static/dashboard/js/{ => jquery}/jquery-ui.min.js (100%) rename openstack-dashboard/dashboard/static/dashboard/js/{ => jquery}/jquery.example.min.js (100%) rename openstack-dashboard/dashboard/static/dashboard/js/{ => jquery}/jquery.min.js (100%) rename openstack-dashboard/dashboard/static/dashboard/js/{ => jquery}/jquery.quicksearch.js (100%) rename openstack-dashboard/dashboard/static/dashboard/js/{ => jquery}/jquery.table-sorter.js (100%) create mode 100644 openstack-dashboard/dashboard/static/dashboard/js/modals.js create mode 100644 openstack-dashboard/dashboard/static/dashboard/js/navigation.js create mode 100644 openstack-dashboard/dashboard/static/dashboard/js/plugins.js create mode 100644 openstack-dashboard/dashboard/static/dashboard/js/tables.js diff --git a/openstack-dashboard/dashboard/static/dashboard/js/application.js b/openstack-dashboard/dashboard/static/dashboard/js/application.js deleted file mode 100644 index 447f9ccc4..000000000 --- a/openstack-dashboard/dashboard/static/dashboard/js/application.js +++ /dev/null @@ -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('
' - + '

Info: The data on this page may have changed, ' - + 'click here to refresh it.

' - + '
'); - return true; - }); -}) - - diff --git a/openstack-dashboard/dashboard/static/dashboard/js/form_examples.js b/openstack-dashboard/dashboard/static/dashboard/js/form_examples.js index d7a478a21..3f733c1df 100644 --- a/openstack-dashboard/dashboard/static/dashboard/js/form_examples.js +++ b/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"); +}); diff --git a/openstack-dashboard/dashboard/static/dashboard/js/forms.js b/openstack-dashboard/dashboard/static/dashboard/js/forms.js new file mode 100644 index 000000000..8ec883dc4 --- /dev/null +++ b/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('
' + + '

Info: The data on this page may have changed, ' + + 'click here to refresh it.

' + + '
'); + 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; + }); +}); diff --git a/openstack-dashboard/dashboard/static/dashboard/js/horizon.js b/openstack-dashboard/dashboard/static/dashboard/js/horizon.js new file mode 100644 index 000000000..06e4c291a --- /dev/null +++ b/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); diff --git a/openstack-dashboard/dashboard/static/dashboard/js/jquery-ui.min.js b/openstack-dashboard/dashboard/static/dashboard/js/jquery/jquery-ui.min.js similarity index 100% rename from openstack-dashboard/dashboard/static/dashboard/js/jquery-ui.min.js rename to openstack-dashboard/dashboard/static/dashboard/js/jquery/jquery-ui.min.js diff --git a/openstack-dashboard/dashboard/static/dashboard/js/jquery.example.min.js b/openstack-dashboard/dashboard/static/dashboard/js/jquery/jquery.example.min.js similarity index 100% rename from openstack-dashboard/dashboard/static/dashboard/js/jquery.example.min.js rename to openstack-dashboard/dashboard/static/dashboard/js/jquery/jquery.example.min.js diff --git a/openstack-dashboard/dashboard/static/dashboard/js/jquery.min.js b/openstack-dashboard/dashboard/static/dashboard/js/jquery/jquery.min.js similarity index 100% rename from openstack-dashboard/dashboard/static/dashboard/js/jquery.min.js rename to openstack-dashboard/dashboard/static/dashboard/js/jquery/jquery.min.js diff --git a/openstack-dashboard/dashboard/static/dashboard/js/jquery.quicksearch.js b/openstack-dashboard/dashboard/static/dashboard/js/jquery/jquery.quicksearch.js similarity index 100% rename from openstack-dashboard/dashboard/static/dashboard/js/jquery.quicksearch.js rename to openstack-dashboard/dashboard/static/dashboard/js/jquery/jquery.quicksearch.js diff --git a/openstack-dashboard/dashboard/static/dashboard/js/jquery.table-sorter.js b/openstack-dashboard/dashboard/static/dashboard/js/jquery/jquery.table-sorter.js similarity index 100% rename from openstack-dashboard/dashboard/static/dashboard/js/jquery.table-sorter.js rename to openstack-dashboard/dashboard/static/dashboard/js/jquery/jquery.table-sorter.js diff --git a/openstack-dashboard/dashboard/static/dashboard/js/modals.js b/openstack-dashboard/dashboard/static/dashboard/js/modals.js new file mode 100644 index 000000000..95fe1d1cc --- /dev/null +++ b/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; + }); +}); diff --git a/openstack-dashboard/dashboard/static/dashboard/js/navigation.js b/openstack-dashboard/dashboard/static/dashboard/js/navigation.js new file mode 100644 index 000000000..229efafcb --- /dev/null +++ b/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"); + }); +}); diff --git a/openstack-dashboard/dashboard/static/dashboard/js/plugins.js b/openstack-dashboard/dashboard/static/dashboard/js/plugins.js new file mode 100644 index 000000000..6a6427ba1 --- /dev/null +++ b/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)); diff --git a/openstack-dashboard/dashboard/static/dashboard/js/tables.js b/openstack-dashboard/dashboard/static/dashboard/js/tables.js new file mode 100644 index 000000000..8ed07458b --- /dev/null +++ b/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'); + }); +}); diff --git a/openstack-dashboard/dashboard/templates/base.html b/openstack-dashboard/dashboard/templates/base.html index ca1e4f0ab..13ab68665 100644 --- a/openstack-dashboard/dashboard/templates/base.html +++ b/openstack-dashboard/dashboard/templates/base.html @@ -5,11 +5,10 @@ {% block title %}{% endblock %} – {% site_branding %} Dashboard - - - - - + + + + @@ -17,7 +16,13 @@ - + + + + + + +