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

Replace jquery-collapser with Bootstrap's collapser

Browse Source
This commit is contained in:
Oliver Gorwits
2012-08-27 17:11:26 +01:00
parent 5192b52d55
commit 61f2e84688
7 changed files with 51 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Changes
View File

@@ -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]

15
Netdisco/public/css/netdisco.css
View File

@@ -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;

9
Netdisco/public/javascripts/jquery-collapser.min.js vendored
View File

@@ -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);

6
Netdisco/views/ajax/device/ports.tt
View File

@@ -71,10 +71,10 @@
'<a href="' _ uri_for('/search') _ '?tab=vlan&q=' _ vlan.vlan _ '">' _ vlan.vlan _ '</a>' %]
[% 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 = '<div class="vlan_total">(' _ row.tagged_vlans_count
_ ')</div><a href="#" class="nd_linkcell nd_collapse_vlans">'
_ 'Show VLANs</a><div class="nd_collapse_pre_hidden">' _ output %]
_ ')</div><div class="cell-arrow-up"></div><a href="#" class="nd_linkcell nd_collapse_vlans">'
_ 'Show VLANs</a><div class="nd_collapsing nd_collapse_pre_hidden">' _ output %]
[% SET output = output _ '</div>' %]
[% END %]
[% output %]

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

@@ -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: '<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';
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: '<label class="nd_collapser">Display Columns<div class="arrow-up"></div></label>',
collapseHtml: '<label class="nd_collapser">Display Columns<div class="arrow-down"></div></label>',
// 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: '<label class="nd_collapser">Port Properties<div class="arrow-up"></div></label>',
collapseHtml: '<label class="nd_collapser">Port Properties<div class="arrow-down"></div></label>',
});
$('#nd_collapse_nodeprop').collapser({
target: 'next',
effect: 'slide',
changeText: true,
expandHtml: '<label class="nd_collapser">Node Properties<div class="arrow-up"></div></label>',
collapseHtml: '<label class="nd_collapser">Node Properties<div class="arrow-down"></div></label>',
});
$('#nd_collapse_legend').collapser({
target: 'next',
effect: 'slide',
changeText: true,
expandHtml: '<label class="nd_collapser">Legend<div class="arrow-up"></div></label>',
collapseHtml: '<label class="nd_collapser">Legend<div class="arrow-down"></div></label>',
$('.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();
});

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

@@ -12,7 +12,6 @@
<![endif]-->
<script type="text/javascript" src="[% uri_base %]/javascripts/jquery-latest.min.js"></script>
<script type="text/javascript" src="[% uri_base %]/javascripts/jquery-collapser.min.js"></script>
<script type="text/javascript" src="[% uri_base %]/javascripts/jquery-history.js"></script>
<script type="text/javascript" src="[% uri_base %]/javascripts/jquery-deserialize.js"></script>
<script type="text/javascript" src="[% uri_base %]/javascripts/bootstrap.min.js"></script>

22
Netdisco/views/sidebar/device/ports.tt
View File

@@ -10,8 +10,10 @@
rel="tooltip" data-placement="left" data-offset="5" title="Filter by Port, Name or VLAN"/>
</div>
<div class="clearfix">
<a href="#" id="nd_collapse_legend"><label>Legend</label></a>
<ul class="inputs-list unstyled nd_legend nd_collapse_pre_hidden">
<a href="#" data-toggle="collapse" data-target="#nd_legend">
<label class="nd_collapser">Legend<div class="arrow-down"></div></label></a>
<div id="nd_legend" class="collapse in">
<ul class="inputs-list unstyled">
<li>
<span class="label">S</span>&nbsp; Admin Disabled
</li>
@@ -34,10 +36,12 @@
<span class="label label-warning">A</span>&nbsp; Archived Data
</li>
</ul>
</div>
</div>
<div class="clearfix">
<a href="#" id="nd_collapse_columns"><label>Display Columns</label></a>
<div class="nd_collapse_pre_hidden">
<a href="#" data-toggle="collapse" data-target="#nd_columns">
<label class="nd_collapser">Display Columns<div class="arrow-up"></div></label></a>
<div id="nd_columns" class="collapse">
<ul class="inputs-list unstyled">
[% FOREACH item IN vars.port_columns %]
<li>
@@ -52,8 +56,9 @@
</div>
</div>
<div class="clearfix">
<a href="#" id="nd_collapse_portprop"><label>Port Properties</label></a>
<div class="nd_collapse_pre_hidden">
<a href="#" data-toggle="collapse" data-target="#nd_portprops">
<label class="nd_collapser">Port Properties<div class="arrow-up"></div></label></a>
<div id="nd_portprops" class="collapse">
<ul class="inputs-list unstyled">
<li>
<label class="checkbox">
@@ -81,8 +86,9 @@
</div>
</div>
<div class="clearfix">
<a href="#" id="nd_collapse_nodeprop"><label>Node Properties</label></a>
<div class="nd_collapse_pre_hidden">
<a href="#" data-toggle="collapse" data-target="#nd_nodeprops">
<label class="nd_collapser">Node Properties<div class="arrow-up"></div></label></a>
<div id="nd_nodeprops" class="collapse">
<ul class="inputs-list unstyled">
[% FOREACH item IN vars.connected_properties %]
<li>