Modified UI for showing panels and moving it to the top when its corresponding sidebar TOC item is clicked.

tripal_fields_layout/theme/js/tripal_fields_layout.js

@@ -0,0 +1,47 @@
+(function($) {
+
+  Drupal.behaviors.tripal_fields_layout = {
+    attach: function (context, settings){
+    
+      // Add a close button for each panel
+      $('.tripal_panel_fieldset .fieldset-legend').each(function (i) {
+        $(this).append('<div class="tripal_panel_fieldset-close_button">[X]</div>');
+      });
+      // Hide the panel when the close button is clicked
+      $('.tripal_panel_fieldset-close_button').each(function (i) {
+    	$(this).css('float', 'right');
+    	$(this).css('cursor', 'pointer');
+    	$(this).click(function () {
+    		var fs = $(this).parent().parent().parent();
+    		var fsid = fs.attr('id');
+    		if (fsid.indexOf('tripal_panel_fieldset-') == 0) {
+    		  $(fs).hide(300);
+    		}
+    	});
+      });
+      
+      // Move the panel to the first when its TOC item is clicked.
+      $('.tripal_toc_list_item_link').each(function (i) {
+    	  $(this).click(function() {
+    		  var id = '#tripal_panel_fieldset-' + $(this).attr('id');
+    		  $(id).removeClass('collapsed');
+  		      $(id + ' .fieldset-wrapper').show();
+    		  var prevObj = $(id).prev().attr('class');
+    		  // Highlight the panel if it's already at the top
+    		  if (prevObj == 'tripal_base_panel' && $(id).css('display') == 'block') {
+    			$(id).effect('highlight', {color: '#DDDEEE'});
+    		  }
+    		  // Move the panel
+    		  else {
+    		    $(id).hide();
+    		    var obj = $(id).detach();
+    		    $('.tripal_base_panel').after(obj);
+    		    $(id).show(300);
+    		  }
+    		  return false;
+    	  });
+      });
+    },
+  };
+  
+})(jQuery);

tripal_fields_layout/theme/templates/tripal_fields_layout_generic.tpl.php

@@ -2,6 +2,7 @@
 
 drupal_add_js('misc/form.js');
 drupal_add_js('misc/collapse.js');
+drupal_add_js(drupal_get_path('module','tripal_fields_layout') . '/theme/js/tripal_fields_layout.js');
 $panels = $variables['element']['#panels'];
 $fields = $variables['element']['#fields'];
 
@@ -11,7 +12,11 @@ $horz_table = TRUE;
 // Group fields into panels
 $content = '';
 $toc = '';
+$has_base_panel_only = TRUE;
 foreach ($panels AS $panel_id => $panel) {
+  if ($panel->name != 'te_base') {
+    $has_base_panel_only = FALSE;
+  }
   $panel_settings = unserialize($panel->settings);
   $hz_table_group = key_exists('hz_table', $panel_settings) ? $panel_settings['hz_table'] : array();
   $vt_table_group = key_exists('vt_table', $panel_settings) ? $panel_settings['vt_table'] : array();
@@ -21,23 +26,23 @@ foreach ($panels AS $panel_id => $panel) {
   $hz_table = array();
   $vt_table = array();
   $no_group = array();
-  // Order by field's '#weight' which is never the same
+  // Keyed by field's '#weight' and '#field_name so we can ksort() by weight
   foreach ($panel_fields AS $field) {
     if (in_array($field['#field_name'], $hz_table_group)) {
-      $hz_table [$field['#weight']] = $field;
+      $hz_table [$field['#weight'] . $field['#field_name']] = $field;
     }
     else if (in_array($field['#field_name'], $vt_table_group)) {
-      $vt_table [$field['#weight']] = $field;
+      $vt_table [$field['#weight'] . $field['#field_name']] = $field;
     }
     else {
-      $no_group [$field['#weight']] = $field;
+      $no_group [$field['#weight'] . $field['#field_name']] = $field;
     }
   }
-  
+
   // Render horizontal table
   $horz_table = '';
   if (count($hz_table) != 0) {
-    ksort($hz_table);
+    ksort($hz_table, SORT_NUMERIC);
     $rows = array();
     foreach ($hz_table as $field) {
       $rows[] = array(
@@ -67,7 +72,7 @@ foreach ($panels AS $panel_id => $panel) {
   // Render horizontal table
   $vert_table = '';  
   if (count($vt_table) != 0) {
-    ksort($vt_table);
+    ksort($vt_table, SORT_NUMERIC);
     $value = array();
     $headers = array();
     foreach ($vt_table as $field) {
@@ -91,7 +96,7 @@ foreach ($panels AS $panel_id => $panel) {
   // Render field not in a group
   $ungrouped = '';
   if (count($no_group) != 0) {
-    ksort($no_group);
+    ksort($no_group, SORT_NUMERIC);
     foreach ($no_group as $field) {
       $ungrouped .= render($field);
     }    
@@ -101,12 +106,14 @@ foreach ($panels AS $panel_id => $panel) {
 
   // If this is a base content, do not organize the content in a fieldset
   if ($panel->name == 'te_base') {
-    $content .= $output;
+    $content .= '<div class="tripal_base_panel">' . $output . '</div>';
   } else {
     $collapsible_item = array('element' => array());
     $collapsible_item['element']['#description'] = $output;
     $collapsible_item['element']['#title'] = $panel->label;
     $collapsible_item['element']['#children'] = '';
+    $collapsible_item['element']['#attributes']['id'] = 'tripal_panel_fieldset-' . $panel->name;
+    $collapsible_item['element']['#attributes']['class'][] = 'tripal_panel_fieldset';
     $collapsible_item['element']['#attributes']['class'][] = 'collapsible';
     $collapsible_item['element']['#attributes']['class'][] = 'collapsed';
     $toc_item_id = $panel_id;
@@ -115,16 +122,25 @@ foreach ($panels AS $panel_id => $panel) {
   }
 }
 
-$bundle_type = ''; // TODO: need to add the bundle type ?>
-<table id ="tripal-<?php print $bundle_type?>-contents-table" class="tripal-contents-table">
-  <tr class="tripal-contents-table-tr">
-    <td nowrap class="tripal-contents-table-td tripal-contents-table-td-toc" align="left"><?php
-      print $toc; ?>
-    </td>
-    <td class="tripal-contents-table-td-data" align="left" width="100%"> <?php
+$bundle_type = ''; // TODO: need to add the bundle type
+
+if ($has_base_panel_only) { ?>
+  <div id ="tripal-<?php print $bundle_type?>-contents-box"> <?php
+    // print the rendered content
+    print $content; ?>
+  </div> <?php
+} else { ?>
+  <table id ="tripal-<?php print $bundle_type?>-contents-table" class="tripal-contents-table">
+    <tr class="tripal-contents-table-tr"> <?php 
+      ?>
+      <td nowrap class="tripal-contents-table-td tripal-contents-table-td-toc" align="left"><?php
+        print $toc; ?>
+      </td>
+      <td class="tripal-contents-table-td-data" align="left" width="100%"> <?php
 
-      // print the rendered content
-      print $content; ?>
-    </td>
-  </tr>
-</table>
+        // print the rendered content
+        print $content; ?>
+      </td>
+    </tr>
+  </table> <?php 
+} ?>