Replace jquery-collapser with Bootstrap's collapser

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]
 

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;

Netdisco/public/javascripts/jquery-collapser.min.js

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

Netdisco/views/ajax/device/ports.tt

@@ -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">'
+            _ ')</div><div class="cell-arrow-up"></div><a href="#" class="nd_linkcell nd_collapse_vlans">'
-            _ 'Show VLANs</a><div class="nd_collapse_pre_hidden">' _ output %]
+            _ 'Show VLANs</a><div class="nd_collapsing nd_collapse_pre_hidden">' _ output %]
           [% SET output = output _ '</div>' %]
         [% END %]
         [% output %]

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: '<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({
+    // sidebar collapser events trigger change of up/down arrow
-      target: 'next',
+    $('.collapse').on('show', function() {
-      effect: 'slide',
+      $(this).siblings().find('.arrow-up').toggleClass('arrow-down arrow-up');
-      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>',
     });
 
-    $('#nd_collapse_portprop').collapser({
+    $('.collapse').on('hide', function() {
-      target: 'next',
+      $(this).siblings().find('.arrow-down').toggleClass('arrow-down arrow-up');
-      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>',
     });
 
     // 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.
+    // fetch the whole page again. FIXME unused?
-    $('body').delegate('.this_port_only', 'click', function() {
+    $('.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();
   });

Netdisco/views/layouts/main.tt

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

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"/>
             </div>
             <div class="clearfix">
-              <a href="#" id="nd_collapse_legend"><label>Legend</label></a>
+              <a href="#" data-toggle="collapse" data-target="#nd_legend">
-                <ul class="inputs-list unstyled nd_legend nd_collapse_pre_hidden">
+                <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>
@@ -35,9 +37,11 @@
                   </li>
                 </ul>
               </div>
+            </div>
             <div class="clearfix">
-              <a href="#" id="nd_collapse_columns"><label>Display Columns</label></a>
+              <a href="#" data-toggle="collapse" data-target="#nd_columns">
-              <div class="nd_collapse_pre_hidden">
+                <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>
+              <a href="#" data-toggle="collapse" data-target="#nd_portprops">
-              <div class="nd_collapse_pre_hidden">
+                <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>
+              <a href="#" data-toggle="collapse" data-target="#nd_nodeprops">
-              <div class="nd_collapse_pre_hidden">
+                <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>