135/netdisco
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor javascript to static file to reduce templating

Browse Source
This commit is contained in:
Oliver Gorwits
2012-01-28 20:44:31 +00:00
parent 5bd481a36a
commit 192f366496
8 changed files with 198 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
Netdisco/public/javascripts/netdisco.js Normal file
View File

@@ -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$/,"")
);
});
});

11
Netdisco/views/js/common.js Normal file
View File

@@ -0,0 +1,11 @@
$(document).ready(function() {
// search hook for each tab
[% FOREACH tab IN vars.tabs %]
$('[% "#${tab.id}_form" %]').submit(function(event){ do_search(event, '[% tab.id %]'); });
[% END %]
// on page load, load the content for the active tab
[% IF params.tab %]
$('#[% params.tab %]_form').trigger("submit");
[% END %]
});

30
Netdisco/views/js/device.js
View File

@@ -1,3 +1,18 @@
function inner_view_processing() {
// enable collapser on any large vlan lists
$('.nd_collapse_vlans').collapser({
target: 'next',
effect: 'slide',
changeText: true,
expandHtml: '<div class="cell-arrow-up"></div><div class="nd_collapser">Show VLANs</div>',
collapseHtml: '<div class="cell-arrow-down"></div><div class="nd_collapser">Hide VLANs</div>',
});
}
// used by the tabbing interface to make sure the correct
// ajax content is loaded
var path = 'device';
$(document).ready(function() {
$('#nd_collapse_columns').collapser({
target: 'next',
@@ -57,19 +72,4 @@
// everything starts hidden and then we show defaults
$('#nd_collapse_legend').click();
function inner_view_processing() {
// enable collapser on any large vlan lists
$('.nd_collapse_vlans').collapser({
target: 'next',
effect: 'slide',
changeText: true,
expandHtml: '<div class="cell-arrow-up"></div><div class="nd_collapser">Show VLANs</div>',
collapseHtml: '<div class="cell-arrow-down"></div><div class="nd_collapser">Hide VLANs</div>',
});
}
[%+ INCLUDE 'js/tabs.js' path="device" -%]
[%+ INCLUDE 'js/sidebar.js' -%]
[%+ INCLUDE 'js/fixes.js' -%]
});

6
Netdisco/views/js/fixes.js
View File

@@ -1,6 +0,0 @@
// 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);

19
Netdisco/views/js/search.js
View File

@@ -1,11 +1,11 @@
$(document).ready(function() {
// 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);
// this is called by do_search to support local code
function inner_view_processing() {}
// used by the tabbing interface to make sure the correct
// ajax content is loaded
var path = 'search';
$(document).ready(function() {
// highlight active search filters in green
// there must be a way to factor this out to a func but my JS is weak :-/
@@ -38,9 +38,4 @@
}
});
function inner_view_processing() {} // noop
[%+ INCLUDE 'js/tabs.js' path="search" -%]
[%+ INCLUDE 'js/sidebar.js' -%]
[%+ INCLUDE 'js/fixes.js' -%]
});

23
Netdisco/views/js/sidebar.js
View File

@@ -1,23 +0,0 @@
// sidebar toggle
$('#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);
}
);
}
);

133
Netdisco/views/js/tabs.js
View File

@@ -1,133 +0,0 @@
// 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_for('/' _ 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_for('/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_for('/' _ 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;
// 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;
}
});
}
// 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_for('/' _ path) %]?' + $(to_form).serialize()
);
is_from_history_plugin = 0;
}
$(to_form).trigger("submit");
}
// 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$/,"")
);
});
// search hook for each tab
[% FOREACH tab IN vars.tabs %]
$('[% "#${tab.id}_form" %]').submit(function(event){ do_search(event, '[% tab.id %]'); });
[% END %]
// on page load, load the content for the active tab
[% IF params.tab %]
$('#[% params.tab %]_form').trigger("submit");
[% END %]

10
Netdisco/views/layouts/main.tt
View File

@@ -20,10 +20,9 @@
<script type="text/javascript" src="[% uri_base %]/javascripts/bootstrap-dropdown.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("[rel=twipsy]").twipsy({live: true});
});
var uri_base = '[% uri_base %]';
</script>
<script type="text/javascript" src="[% uri_base %]/javascripts/netdisco.js"></script>
<link rel="stylesheet" href="[% uri_base %]/css/bootstrap.min.css">
<link rel="stylesheet" href="[% uri_base %]/css/style.css">
@@ -80,5 +79,10 @@
</div>
[% content %]
<script type="text/javascript">
[%+ INCLUDE 'js/common.js' -%]
</script>
</body>
</html>