JavaScript Refactor.

Cleans up Horizon's JavaScript to make it properly modular and
well-organized.

Adds unit tests written in QUnit for some of the JS modules
as a starting point for the JS test framework. You can visit
/qunit/ with DEBUG=True in your settings to access the JS
test runner.

Fixes bug 961509.

Change-Id: Ica33765660d0ed80f22c71bc96f122c3fc8b80cc
This commit is contained in:
Gabriel Hurley
2012-06-23 17:06:37 -07:00
parent 7ce7905518
commit 41c3a5990c
45 changed files with 2567 additions and 2642 deletions

View File

@@ -0,0 +1,16 @@
{% load compress %}
{% compress js %}
<script src='{{ STATIC_URL }}horizon/js/horizon.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}horizon/js/horizon.conf.js' type='text/javascript' charset='utf-8'></script>
<script type='text/javascript' charset='utf-8'>
/* Storage for backend configuration variables which the frontend
* should be aware of.
*/
horizon.conf.debug = {{ debug|yesno:"true,false" }};
horizon.conf.static_url = "{{ STATIC_URL }}";
horizon.conf.ajax = {
queue_limit: {{ HORIZON_CONFIG.ajax_queue_limit|default:"null" }}
};
</script>
{% endcompress %}

View File

@@ -0,0 +1,42 @@
{% load compress %}
{% compress js %}
{% comment %} jQuery and Plugins {% endcomment %}
<script src='{{ STATIC_URL }}horizon/lib/jquery/jquery.min.js' type='text/javascript' charset="utf-8"></script>
<script src='{{ STATIC_URL }}horizon/lib/jquery/jquery.cookie.js' type='text/javascript' charset="utf-8"></script>
<script src='{{ STATIC_URL }}horizon/lib/jquery/jquery.quicksearch.js' type='text/javascript' charset="utf-8"></script>
<script src='{{ STATIC_URL }}horizon/lib/jquery/jquery.example.min.js' type='text/javascript' charset="utf-8"></script>
<script src="{{ STATIC_URL }}horizon/lib/jquery/jquery.table-sorter.js" type="text/javascript" charset="utf-8"></script>
<script src="{{ STATIC_URL }}horizon/lib/spin.js" type="text/javascript" charset="utf-8"></script>
<script src="{{ STATIC_URL }}horizon/lib/spin.jquery.js" type="text/javascript" charset="utf-8"></script>
<script src='{{ STATIC_URL }}horizon/lib/json2.js' type='text/javascript' charset="utf-8"></script>
<script src="{{ STATIC_URL }}horizon/lib/underscore/underscore-min.js" type="text/javascript" charset="utf-8"></script>
{% comment %} Bootstrap {% endcomment %}
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
{% comment %} Hogan.js (client-side templating) {% endcomment %}
<script src="{{ STATIC_URL }}horizon/lib/hogan-1.0.5.min.js" type="text/javascript" charset='utf-8'></script>
{% comment %} Horizon-specific JS {% endcomment %}
<script src='{{ STATIC_URL }}horizon/js/horizon.communication.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}horizon/js/horizon.cookies.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}horizon/js/horizon.forms.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}horizon/js/horizon.instances.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}horizon/js/horizon.messages.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}horizon/js/horizon.modals.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}horizon/js/horizon.quotas.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}horizon/js/horizon.tables.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}horizon/js/horizon.tabs.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}horizon/js/horizon.templates.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}horizon/js/horizon.utils.js' type='text/javascript' charset='utf-8'></script>
{% endcompress %}
{% comment %} Client-side Templates (These should *not* be inside the "compress" tag.) {% endcomment %}
{% include "horizon/client_side/templates.html" %}
{% comment %}Go!{% endcomment %}
<script type='text/javascript' charset='utf-8'>
// Call init on DOM ready.
$(document).ready(horizon.init);
</script>

View File

@@ -1,12 +0,0 @@
<script type='text/javascript' charset='utf-8'>
/* Storage for backend configuration variables which the frontend
* should be aware of.
*/
horizon.conf = {
debug: {{ debug|yesno:"true,false" }},
static_url: "{{ STATIC_URL }}",
ajax: {
queue_limit: {{ HORIZON_CONFIG.ajax_queue_limit|default:"null" }}
}
}
</script>

View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Horizon QUnit Test Suite</title>
<link rel="stylesheet" href="{{ STATIC_URL }}horizon/lib/qunit/qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="{{ STATIC_URL }}horizon/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}horizon/lib/qunit/qunit.js"></script>
{% include "horizon/_conf.html" %}
{% comment %}Load test modules here.{% endcomment %}
<script type="text/javascript" src="{{ STATIC_URL }}horizon/tests/messages.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}horizon/tests/modals.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}horizon/tests/templates.js"></script>
{% comment %}End test modules.{% endcomment %}
{% include "horizon/_scripts.html" %}
</head>
<body>
<h1 id="qunit-header">Horizon JavaScript Tests</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
<!-- Test markup; will be hidden. -->
<div id="main_content">
<div class="messages"></div>
<div class="modal_wrapper"></div>
</div>
</div>
</body>
</html>