diff --git a/Netdisco/public/javascripts/netdisco.js b/Netdisco/public/javascripts/netdisco.js new file mode 100644 index 00000000..a28692f1 --- /dev/null +++ b/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( + '

Waiting for results...

' + ); + + // 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( + '
' + + '

Search failed! Please contact your site administrator.

' + ); + return; + } + if (response === "") { + $(target).html( + '

No matching records.

' + ); + } + // 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$/,"") + ); + }); +}); diff --git a/Netdisco/views/js/common.js b/Netdisco/views/js/common.js new file mode 100644 index 00000000..7c6b6541 --- /dev/null +++ b/Netdisco/views/js/common.js @@ -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 %] + }); diff --git a/Netdisco/views/js/device.js b/Netdisco/views/js/device.js index 7ece119a..94e0fb99 100644 --- a/Netdisco/views/js/device.js +++ b/Netdisco/views/js/device.js @@ -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: '
Show VLANs
', + collapseHtml: '
Hide VLANs
', + }); + } + + // 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: '
Show VLANs
', - collapseHtml: '
Hide VLANs
', - }); - } - -[%+ INCLUDE 'js/tabs.js' path="device" -%] -[%+ INCLUDE 'js/sidebar.js' -%] -[%+ INCLUDE 'js/fixes.js' -%] }); diff --git a/Netdisco/views/js/fixes.js b/Netdisco/views/js/fixes.js deleted file mode 100644 index a7682394..00000000 --- a/Netdisco/views/js/fixes.js +++ /dev/null @@ -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); diff --git a/Netdisco/views/js/search.js b/Netdisco/views/js/search.js index faa4e434..960f6c46 100644 --- a/Netdisco/views/js/search.js +++ b/Netdisco/views/js/search.js @@ -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' -%] }); diff --git a/Netdisco/views/js/sidebar.js b/Netdisco/views/js/sidebar.js deleted file mode 100644 index 0e59850c..00000000 --- a/Netdisco/views/js/sidebar.js +++ /dev/null @@ -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); - } - ); - } - ); diff --git a/Netdisco/views/js/tabs.js b/Netdisco/views/js/tabs.js deleted file mode 100644 index c79fde2e..00000000 --- a/Netdisco/views/js/tabs.js +++ /dev/null @@ -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( - '

Waiting for results...

' - ); - - // 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( - '
' + - '

Search failed! Please contact your site administrator.

' - ); - return; - } - if (response === "") { - $(target).html( - '

No matching records.

' - ); - } - // 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 %] - diff --git a/Netdisco/views/layouts/main.tt b/Netdisco/views/layouts/main.tt index 0ffd7d1f..38a8d13d 100644 --- a/Netdisco/views/layouts/main.tt +++ b/Netdisco/views/layouts/main.tt @@ -20,10 +20,9 @@ + @@ -80,5 +79,10 @@ [% content %] + + +