refactor js for device tabs

Netdisco/share/views/js/common.js

@@ -1,19 +1,21 @@
   $(document).ready(function() {
-    // search hook for each tab
+    // search tabs
     [% FOREACH tab IN settings.search_tabs %]
     $('[% "#${tab.tag}_form" %]').submit(function(event){ do_search(event, '[% tab.tag %]'); });
     [% END %]
+
+    // device tabs
     [% FOREACH tab IN settings.device_tabs %]
     $('[% "#${tab.tag}_form" %]').submit(function(event){ do_search(event, '[% tab.tag %]'); });
     [% END %]
 
-    // and for the report pages
     [% IF report %]
+    // for the report pages
     $('[% "#${report.tag}_form" %]').submit(function(event){ do_search(event, '[% report.tag %]'); });
-    [% END %]
+    [% END -%]
 
-    // and for the admin pages
     [% IF task %]
+    // for the admin pages
     $('[% "#${task.tag}_form" %]').submit(function(event){ do_search(event, '[% task.tag %]'); });
     [% END %]
 

Netdisco/share/views/js/device.js

@@ -6,7 +6,11 @@
   var form_inputs = $("#ports_form .clearfix input").not('[type="checkbox"]')
       .add("#ports_form .clearfix select");
 
+  // this is called by do_search to support local code
+  // which might need to act on the newly inserted content
+  // but which cannot use jQuery delegation via .on()
   function inner_view_processing(tab) {
+
     // LT wanted the page title to reflect what's on the page :)
     document.title = $('#nd_device_name').text()
       +' - '+ $('#'+ tab + '_link').text();
@@ -25,66 +29,8 @@
         $(this).html('<div class="cell-arrow-up-down icon-chevron-up icon-large"></div>Show VLANs');
     });
 
-    // toggle visibility of port up/down and edit controls
-
-    $('.nd_editable_cell').mouseenter(function() {
-      $(this).children('.nd_hand_icon').show();
-      if (! $(this).is(':focus')) {
-        $(this).children('.nd_edit_icon').show(); // ports
-        $(this).siblings('td').find('.nd_device_details_edit').show(); // details
-      }
-    });
-
-    $('.nd_editable_cell').mouseleave(function() {
-      $(this).children('.nd_hand_icon').hide();
-      if (! $(this).is(':focus')) {
-        $(this).children('.nd_edit_icon').hide(); // ports
-        $(this).siblings('td').find('.nd_device_details_edit').hide(); // details
-      }
-    });
-
-    $('[contenteditable=true]').focus(function() {
-        $(this).children('.nd_edit_icon').hide(); // ports
-        $(this).siblings('td').find('.nd_device_details_edit').hide(); // details
-    });
-
-    // activity for port up/down control
-    $('.icon-hand-up').click(function() {
-      port_control(this); // save
-    });
-    $('.icon-hand-down').click(function() {
-      port_control(this); // save
-    });
-
-    // activity for power enable/disable control
-    $('.nd_power_icon').click(function() {
-      port_control(this); // save
-    });
-
     var dirty = false;
 
-    // activity for contenteditable control
-    $('[contenteditable=true]').keydown(function() {
-      var esc = event.which == 27,
-          nl  = event.which == 13;
-
-      if (esc) {
-        if (dirty) { document.execCommand('undo') }
-        $(this).blur();
-        dirty = false;
-
-      }
-      else if (nl) {
-        $(this).blur();
-        event.preventDefault();
-        dirty = false;
-        port_control(this); // save
-      }
-      else {
-        dirty = true;
-      }
-    });
-
     // show or hide netmap help button
     if (tab == 'netmap') {
       $('#netmap_help_img').show();
@@ -98,7 +44,11 @@
     $("[rel=popover]").popover({live: true});
   }
 
+  // on load, establish global delegations for now and future
   $(document).ready(function() {
+    var tab = '[% tab.tag %]'
+    var target = '#' + tab + '_pane';
+
     // sidebar form fields should change colour and have bin/copy icon
     form_inputs.each(function() {device_form_state($(this))});
     form_inputs.change(function() {device_form_state($(this))});
@@ -124,7 +74,7 @@
 
     // clickable device port names can simply resubmit AJAX rather than
     // fetch the whole page again.
-    $('body').on('click', '.nd_this_port_only', function() {
+    $(target).on('click', '.nd_this_port_only', function() {
       event.preventDefault(); // link is real so prevent page submit
 
       var port = $(this).text();
@@ -135,4 +85,59 @@
       $('#ports_form').trigger('submit');
       device_form_state(portfilter); // will hide copy icons
     });
+
+    // toggle visibility of port up/down and edit controls
+    $(target).on('mouseenter', '.nd_editable_cell', function() {
+      $(this).children('.nd_hand_icon').show();
+      if (! $(this).is(':focus')) {
+        $(this).children('.nd_edit_icon').show(); // ports
+        $(this).siblings('td').find('.nd_device_details_edit').show(); // details
+      }
+    });
+    $(target).on('mouseleave', '.nd_editable_cell', function() {
+      $(this).children('.nd_hand_icon').hide();
+      if (! $(this).is(':focus')) {
+        $(this).children('.nd_edit_icon').hide(); // ports
+        $(this).siblings('td').find('.nd_device_details_edit').hide(); // details
+      }
+    });
+    $(target).on('focus', '[contenteditable=true]', function() {
+        $(this).children('.nd_edit_icon').hide(); // ports
+        $(this).siblings('td').find('.nd_device_details_edit').hide(); // details
+    });
+
+    // activity for port up/down control
+    $(target).on('click', '.icon-hand-up', function() {
+      port_control(this); // save
+    });
+    $(target).on('click', '.icon-hand-down', function() {
+      port_control(this); // save
+    });
+
+    // activity for power enable/disable control
+    $(target).on('click', '.nd_power_icon', function() {
+      port_control(this); // save
+    });
+
+    // activity for contenteditable control
+    $(target).on('keydown', '[contenteditable=true]', function() {
+      var esc = event.which == 27,
+          nl  = event.which == 13;
+
+      if (esc) {
+        if (dirty) { document.execCommand('undo') }
+        $(this).blur();
+        dirty = false;
+
+      }
+      else if (nl) {
+        $(this).blur();
+        event.preventDefault();
+        dirty = false;
+        port_control(this); // save
+      }
+      else {
+        dirty = true;
+      }
+    });
   });