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

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>