diff --git a/Changes b/Changes index 92c3c49f..6e9722d2 100644 --- a/Changes +++ b/Changes @@ -10,6 +10,7 @@ * Refactor begin hooks (closes #16) * Re-engineer link generation to ensure sane defaults and remembered options. This came as a side-effect of removing JS-only links (closes #21) + * Replace jquery-collapser with Bootstrap's collapser [BUG FIXES] diff --git a/Netdisco/public/css/netdisco.css b/Netdisco/public/css/netdisco.css index 11f98ecd..9e1c6bf3 100644 --- a/Netdisco/public/css/netdisco.css +++ b/Netdisco/public/css/netdisco.css @@ -100,11 +100,21 @@ body { text-decoration: none !important; } +/* collapser label should not have any decoration even though it's clickable */ +.nd_collapse_vlans { + text-decoration: none !important; +} + /* class to control default state of collapsible lists on page load */ .nd_collapse_pre_hidden { display: none; } +/* for the tagged vlans total when hiding the full list */ +.vlan_total { + float: right; +} + /* draw little up arrow to the right of a label for collapsed list */ .arrow-up { float: right; @@ -125,11 +135,6 @@ body { border-top: 8px solid #F89406; } -/* for the tagged vlans total when hiding the full list */ -.vlan_total { - float: right; -} - /* draw little up arrow to the left of a label for collapsed list */ .cell-arrow-up { float: left; diff --git a/Netdisco/public/javascripts/jquery-collapser.min.js b/Netdisco/public/javascripts/jquery-collapser.min.js deleted file mode 100644 index 05ab00b9..00000000 --- a/Netdisco/public/javascripts/jquery-collapser.min.js +++ /dev/null @@ -1,9 +0,0 @@ -/* - * jQuery - Collapser - Plugin v1.0 - * http://www.aakashweb.com/ - * Copyright 2010, Aakash Chakravarthy - * Released under the MIT License. - */ - -(function($){$.fn.collapser=function(options,beforeCallback,afterCallback){var defaults={target:'next',targetOnly:null,effect:'slide',changeText:true,expandHtml:'Expand',collapseHtml:'Collapse',expandClass:'',collapseClass:''};var options=$.extend(defaults,options);var expHtml,collHtml,effectShow,effectHide;if(options.effect=='slide'){effectShow='slideDown';effectHide='slideUp';}else{effectShow='fadeIn';effectHide='fadeOut';}if(options.changeText==true){expHtml=options.expandHtml;collHtml=options.collapseHtml;}function callBeforeCallback(obj){if(beforeCallback!==undefined){beforeCallback.apply(obj);}}function callAfterCallback(obj){if(afterCallback!==undefined){afterCallback.apply(obj);}}function hideElement(obj,method){callBeforeCallback(obj);if(method==1){obj[options.target](options.targetOnly)[effectHide]();obj.html(expHtml);obj.removeClass(options.collapseClass);obj.addClass(options.expandClass);}else{$(document).find(options.target)[effectHide]();obj.html(expHtml);obj.removeClass(options.collapseClass);obj.addClass(options.expandClass);}callAfterCallback(obj);}function showElement(obj,method){callBeforeCallback(obj) -if(method==1){obj[options.target](options.targetOnly)[effectShow]();obj.html(collHtml);obj.removeClass(options.expandClass);obj.addClass(options.collapseClass);}else{$(document).find(options.target)[effectShow]();obj.html(collHtml);obj.removeClass(options.expandClass);obj.addClass(options.collapseClass);}callAfterCallback(obj);}function toggleElement(obj,method){if(method==1){if(obj[options.target](options.targetOnly).is(':visible')){hideElement(obj,1);}else{showElement(obj,1);}}else{if($(document).find(options.target).is(':visible')){hideElement(obj,2);}else{showElement(obj,2);}}}return this.each(function(){if($.fn[options.target]&&$(this)[options.target]()){$(this).toggle(function(){toggleElement($(this),1);},function(){toggleElement($(this),1);});}else{$(this).toggle(function(){toggleElement($(this),2);},function(){toggleElement($(this),2);});}if($.fn[options.target]&&$(this)[options.target]()){if($(this)[options.target]().is(':hidden')){$(this).html(expHtml);$(this).removeClass(options.collapseClass);$(this).addClass(options.expandClass);}else{$(this).html(collHtml);$(this).removeClass(options.expandClass);$(this).addClass(options.collapseClass);}}else{if($(document).find(options.target).is(':hidden')){$(this).html(expHtml);}else{$(this).html(collHtml);}}});};})(jQuery); \ No newline at end of file diff --git a/Netdisco/views/ajax/device/ports.tt b/Netdisco/views/ajax/device/ports.tt index fb618a4f..7e76e2a5 100644 --- a/Netdisco/views/ajax/device/ports.tt +++ b/Netdisco/views/ajax/device/ports.tt @@ -71,10 +71,10 @@ '' _ vlan.vlan _ '' %] [% SET output = output _ ', ' IF NOT loop.last %] [% END %] - [% IF row.tagged_vlans_count > 10 %] + [% IF row.tagged_vlans_count > 10 %] [%# FIXME make this a settable variable %] [% SET output = '
(' _ row.tagged_vlans_count - _ ')
' - _ 'Show VLANs
' _ output %] + _ ')
' + _ 'Show VLANs
' _ output %] [% SET output = output _ '
' %] [% END %] [% output %] diff --git a/Netdisco/views/js/device.js b/Netdisco/views/js/device.js index cf8d526d..5efd0a07 100644 --- a/Netdisco/views/js/device.js +++ b/Netdisco/views/js/device.js @@ -1,49 +1,31 @@ - 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'; + function inner_view_processing() { + // VLANs column list collapser trigger + // it's a bit of a faff because we can't easily use Bootstrap's collapser + $('.nd_collapse_vlans').toggle(function() { + event.preventDefault(); // prevent jump to top of page + $(this).siblings('.nd_collapsing').toggle('fast'); + $(this).siblings('.cell-arrow-up').toggleClass('cell-arrow-down cell-arrow-up'); + $(this).text('Hide VLANs'); + }, function() { + event.preventDefault(); // prevent jump to top of page + $(this).siblings('.nd_collapsing').toggle('fast'); + $(this).siblings('.cell-arrow-down').toggleClass('cell-arrow-down cell-arrow-up'); + $(this).text('Show VLANs'); + }); + } + $(document).ready(function() { - $('#nd_collapse_columns').collapser({ - target: 'next', - effect: 'slide', - changeText: true, - expandHtml: '', - collapseHtml: '', + // sidebar collapser events trigger change of up/down arrow + $('.collapse').on('show', function() { + $(this).siblings().find('.arrow-up').toggleClass('arrow-down arrow-up'); }); - $('#nd_collapse_portprop').collapser({ - target: 'next', - effect: 'slide', - changeText: true, - expandHtml: '', - collapseHtml: '', - }); - - $('#nd_collapse_nodeprop').collapser({ - target: 'next', - effect: 'slide', - changeText: true, - expandHtml: '', - collapseHtml: '', - }); - - $('#nd_collapse_legend').collapser({ - target: 'next', - effect: 'slide', - changeText: true, - expandHtml: '', - collapseHtml: '', + $('.collapse').on('hide', function() { + $(this).siblings().find('.arrow-down').toggleClass('arrow-down arrow-up'); }); // show or hide sweeping brush icon when field has content @@ -71,8 +53,8 @@ }); // clickable device port names can simply resubmit AJAX rather than - // fetch the whole page again. - $('body').delegate('.this_port_only', 'click', function() { + // fetch the whole page again. FIXME unused? + $('.this_port_only').on('click', function() { event.preventDefault(); // link is real so prevent page submit var port = $(this).text(); @@ -81,7 +63,4 @@ $('.field_clear_icon').show(); $('#ports_form').trigger('submit'); }); - - // everything starts hidden and then we show defaults - $('#nd_collapse_legend').click(); }); diff --git a/Netdisco/views/layouts/main.tt b/Netdisco/views/layouts/main.tt index 30e6a65b..37ff3281 100644 --- a/Netdisco/views/layouts/main.tt +++ b/Netdisco/views/layouts/main.tt @@ -12,7 +12,6 @@ - diff --git a/Netdisco/views/sidebar/device/ports.tt b/Netdisco/views/sidebar/device/ports.tt index 1e1de98d..6b2edac5 100644 --- a/Netdisco/views/sidebar/device/ports.tt +++ b/Netdisco/views/sidebar/device/ports.tt @@ -10,8 +10,10 @@ rel="tooltip" data-placement="left" data-offset="5" title="Filter by Port, Name or VLAN"/>
- -
- -
+ + +
    [% FOREACH item IN vars.port_columns %]
  • @@ -52,8 +56,9 @@
- -
+ + +
- -
+ + +
    [% FOREACH item IN vars.connected_properties %]