cerebrate-project
/
cerebrate
mirror of https://github.com/cerebrate-project/cerebrate
1
0
Fork 0
Code Issues Releases Wiki Activity

chg: [helpers:bootstrap] Added support of variant in tabs

pull/37/head
mokaddem 2021-01-13 14:16:52 +01:00
parent a4bb09253f
commit dbeef75d0d
1 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/View/Helper/BootstrapHelper.php
View File

@ -3,12 +3,14 @@
* Bootstrap Tabs helper * Bootstrap Tabs helper
* Options: * Options:
* [style] * [style]
* - fill: Should the navigation items occupies all space * - fill: Should the navigation items occupy all available space
* - justify: Should the navigation items be justified (accept: ['center', 'end']) * - justify: Should the navigation items be justified (accept: ['center', 'end'])
* - pills: Should the navigation items be pills * - pills: Should the navigation items be pills
* - vertical: Should the navigation bar be placed on the left side of the content * - vertical: Should the navigation bar be placed on the left side of the content
* - vertical-size: Specify how many boostrap's `cols` should be used for the navigation (only used when `vertical` is true) * - vertical-size: Specify how many boostrap's `cols` should be used for the navigation (only used when `vertical` is true)
* - card: Should the navigation be placed in a bootstrap card * - card: Should the navigation be placed in a bootstrap card
* - header-variant: The bootstrap variant to be used for the card header
* - body-variant: The bootstrap variant to be used for the card body
* - nav-class: additional class to add to the nav container * - nav-class: additional class to add to the nav container
* - content-class: additional class to add to the content container * - content-class: additional class to add to the content container
* [data] * [data]
@ -61,6 +63,8 @@ class BootstrapTabs extends Helper
'vertical' => false, 'vertical' => false,
'vertical-size' => 3, 'vertical-size' => 3,
'card' => false, 'card' => false,
'header-variant' => 'light',
'body-variant' => '',
'nav-class' => [], 'nav-class' => [],
'nav-item-class' => [], 'nav-item-class' => [],
'content-class' => [], 'content-class' => [],
@ -72,6 +76,8 @@ class BootstrapTabs extends Helper
private $allowedOptionValues = [ private $allowedOptionValues = [
'justify' => [false, 'center', 'end'], 'justify' => [false, 'center', 'end'],
'body-variant' => ['primary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'white', 'transparent', ''],
'header-variant' => ['primary', 'success', 'danger', 'warning', 'info', 'light', 'dark', 'white', 'transparent'],
]; ];
private $options = null; private $options = null;
@ -100,6 +106,11 @@ class BootstrapTabs extends Helper
if (!empty($this->options['justify'])) { if (!empty($this->options['justify'])) {
$this->bsClasses['nav'][] = 'justify-content-' . $this->options['justify']; $this->bsClasses['nav'][] = 'justify-content-' . $this->options['justify'];
} }
if ($this->options['vertical'] && !isset($options['pills']) && !isset($options['card'])) {
$this->options['pills'] = true;
$this->options['card'] = true;
}
if ($this->options['pills']) { if ($this->options['pills']) {
$this->bsClasses['nav'][] = 'nav-pills'; $this->bsClasses['nav'][] = 'nav-pills';
@ -139,6 +150,10 @@ class BootstrapTabs extends Helper
$this->options['vertical-size'] = $this->options['vertical-size'] < 0 || $this->options['vertical-size'] > 11 ? 3 : $this->options['vertical-size']; $this->options['vertical-size'] = $this->options['vertical-size'] < 0 || $this->options['vertical-size'] > 11 ? 3 : $this->options['vertical-size'];
$this->options['header-text-variant'] = $this->options['header-variant'] == 'light' ? 'body' : 'white';
$this->options['header-border-variant'] = $this->options['header-variant'] == 'light' ? '' : $this->options['header-variant'];
$this->options['body-text-variant'] = $this->options['body-variant'] == '' ? 'body' : 'white';
if (!is_array($this->options['nav-class'])) { if (!is_array($this->options['nav-class'])) {
$this->options['nav-class'] = [$this->options['nav-class']]; $this->options['nav-class'] = [$this->options['nav-class']];
} }
@ -177,13 +192,13 @@ class BootstrapTabs extends Helper
{ {
$html = ''; $html = '';
if ($this->options['card']) { if ($this->options['card']) {
$html .= $this->genNode('div', ['class' => ['card']]); $html .= $this->genNode('div', ['class' => array_merge(['card'], ["border-{$this->options['header-border-variant']}"])]);
$html .= $this->genNode('div', ['class' => ['card-header']]); $html .= $this->genNode('div', ['class' => array_merge(['card-header'], ["bg-{$this->options['header-variant']}", "text-{$this->options['header-text-variant']}"])]);
} }
$html .= $this->genNav(); $html .= $this->genNav();
if ($this->options['card']) { if ($this->options['card']) {
$html .= '</div>'; $html .= '</div>';
$html .= $this->genNode('div', ['class' => ['card-body']]); $html .= $this->genNode('div', ['class' => array_merge(['card-body'], ["bg-{$this->options['body-variant']}", "text-{$this->options['body-text-variant']}"])]);
} }
$html .= $this->genContent(); $html .= $this->genContent();
if ($this->options['card']) { if ($this->options['card']) {
@ -195,11 +210,11 @@ class BootstrapTabs extends Helper
private function genVerticalTabs() private function genVerticalTabs()
{ {
$html = $this->genNode('div', ['class' => ['row', ($this->options['card'] ? 'card flex-row' : '')]]); $html = $this->genNode('div', ['class' => array_merge(['row', ($this->options['card'] ? 'card flex-row' : '')], ["border-{$this->options['header-border-variant']}"])]);
$html .= $this->genNode('div', ['class' => ['col-' . $this->options['vertical-size'], ($this->options['card'] ? 'card-header border-right' : '')]]); $html .= $this->genNode('div', ['class' => array_merge(['col-' . $this->options['vertical-size'], ($this->options['card'] ? 'card-header border-right' : '')], ["bg-{$this->options['header-variant']}", "text-{$this->options['header-text-variant']}", "border-{$this->options['header-border-variant']}"])]);
$html .= $this->genNav(); $html .= $this->genNav();
$html .= '</div>'; $html .= '</div>';
$html .= $this->genNode('div', ['class' => ['col-' . (12 - $this->options['vertical-size']), ($this->options['card'] ? 'card-body2' : '')]]); $html .= $this->genNode('div', ['class' => array_merge(['col-' . (12 - $this->options['vertical-size']), ($this->options['card'] ? 'card-body2' : '')], ["bg-{$this->options['body-variant']}", "text-{$this->options['body-text-variant']}"])]);
$html .= $this->genContent(); $html .= $this->genContent();
$html .= '</div>'; $html .= '</div>';
$html .= '</div>'; $html .= '</div>';