From a6955613c9e3ba0a6595cec6503c92fdb4abbcf5 Mon Sep 17 00:00:00 2001
From: Jason Cooper <scrapheap@heckrothindustries.co.uk>
Date: Fri, 20 Apr 2018 17:27:06 +0100
Subject: [PATCH] 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 | 6 +++---
themes/bootstrap3/templates/record/view.phtml | 15 ++++++++-------
2 files changed, 11 insertions(+), 10 deletions(-)
diff --git a/themes/bootstrap3/js/record.js b/themes/bootstrap3/js/record.js
index 96d7be70914..1a6a5d0baa6 100644
--- a/themes/bootstrap3/js/record.js
+++ b/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')) {
diff --git a/themes/bootstrap3/templates/record/view.phtml b/themes/bootstrap3/templates/record/view.phtml
index f798b8a9cab..ae2c682ef64 100644
--- a/themes/bootstrap3/templates/record/view.phtml
+++ b/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>
--
GitLab