Improve markup for record tabs (#1158)

- Added some additional classes to enable improved styling of tabs via CSS.
- Improved variable naming in template
- Moved to using a data- attribute to identify record tabs.

themes/bootstrap3/js/record.js

@@ -251,7 +251,7 @@ function backgroundLoadTab(tabid) {
 }
 
 function applyRecordTabHash() {
-  var activeTab = $('.record-tabs li.active a').attr('class');
+  var activeTab = $('.record-tabs li.active').attr('data-tab');
   var $initiallyActiveTab = $('.record-tabs li.initiallyActive a');
   var newTab = typeof window.location.hash !== 'undefined'
     ? window.location.hash.toLowerCase() : '';
@@ -260,7 +260,7 @@ function applyRecordTabHash() {
   if (newTab.length <= 1 || newTab === '#tabnav') {
     $initiallyActiveTab.click();
   } else if (newTab.length > 1 && '#' + activeTab !== newTab) {
-    $('.' + newTab.substr(1)).click();
+    $('.' + newTab.substr(1) + ' a').click();
   }
 }
 
@@ -273,7 +273,7 @@ function recordDocReady() {
     if ($li.hasClass('active')) {
       return true;
     }
-    var tabid = this.className;
+    var tabid = $li.attr('data-tab');
     var $top = $(this).closest('.record-tabs');
     // if we're flagged to skip AJAX for this tab, we need special behavior:
     if ($li.hasClass('noajax')) {

themes/bootstrap3/templates/record/view.phtml

@@ -73,20 +73,21 @@
           <?php foreach ($this->tabs as $tab => $obj): ?>
             <?php // add current tab to breadcrumbs if applicable:
               $desc = $obj->getDescription();
-              $tab_classes = [];
+              $tabName = preg_replace("/\W/", "-", strtolower($tab));
+              $tabClasses = [ 'record-tab', $tabName ];
               if (0 === strcasecmp($this->activeTab, $tab)) {
                 if (!$this->loadInitialTabWithAjax || !$obj->supportsAjax()) {
-                  $tab_classes[] = 'active';
+                  $tabClasses[] = 'active';
                 }
-                $tab_classes[] = 'initiallyActive';
+                $tabClasses[] = 'initiallyActive';
                 $this->layout()->breadcrumbs .= '<li class="active">' . $this->transEsc($desc) . '</li>';
                 $activeTabObj = $obj;
               }
-              if (!$obj->isVisible()) { $tab_classes[] = 'hidden'; }
-              if (!$obj->supportsAjax()) { $tab_classes[] = 'noajax'; }
+              if (!$obj->isVisible()) { $tabClasses[] = 'hidden'; }
+              if (!$obj->supportsAjax()) { $tabClasses[] = 'noajax'; }
             ?>
-            <li<?=count($tab_classes) > 0 ? ' class="' . implode(' ', $tab_classes) . '"' : ''?>>
-              <a class="<?=strtolower($tab) ?>" href="<?=$this->recordLink()->getTabUrl($this->driver, $tab)?>#tabnav"<?php if ($obj->supportsAjax() && in_array($tab, $this->backgroundTabs)):?> data-background<?php endif ?>><?=$this->transEsc($desc)?></a>
+            <li class="<?=implode(' ', $tabClasses)?>" data-tab="<?=$tabName?>">
+              <a href="<?=$this->recordLink()->getTabUrl($this->driver, $tab)?>#tabnav"<?php if ($obj->supportsAjax() && in_array($tab, $this->backgroundTabs)):?> data-background<?php endif ?>><?=$this->transEsc($desc)?></a>
             </li>
           <?php endforeach; ?>
         </ul>