From 19c8b53ac7a5cf2aba388095528cbb2119aa40df Mon Sep 17 00:00:00 2001 From: Qiang Xue Date: Sat, 15 Feb 2014 19:44:26 -0500 Subject: [PATCH] Fixes #1881: Improved `yii\bootstrap\NavBar` with `containerOptions`, `innerContainerOptions` and `renderInnerContainer` --- CHANGELOG.md | 1 + NavBar.php | 63 ++++++++++++++++++++++++++++++++++++++++++++---------------- 2 files changed, 47 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 579a72d..7eef113 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ Yii Framework 2 bootstrap extension Change Log - Enh #1553: Only add navbar-default class to NavBar when no other class is specified (cebe) - Enh #1562: Added `yii\bootstrap\Tabs::linkOptions` (kartik-v) - Enh #1601: Added support for tagName and encodeLabel parameters in ButtonDropdown (omnilight) +- Enh #1881: Improved `yii\bootstrap\NavBar` with `containerOptions`, `innerContainerOptions` and `renderInnerContainer` (creocoder) - Chg #1459: Update Collapse to use bootstrap 3 classes (tonydspaniard) - Chg #1820: Update Progress to use bootstrap 3 markup (samdark) diff --git a/NavBar.php b/NavBar.php index 7af9b89..8cc3579 100644 --- a/NavBar.php +++ b/NavBar.php @@ -8,6 +8,7 @@ namespace yii\bootstrap; use Yii; +use yii\helpers\ArrayHelper; use yii\helpers\Html; /** @@ -33,11 +34,24 @@ use yii\helpers\Html; * * @see http://getbootstrap.com/components/#navbar * @author Antonio Ramirez + * @author Alexander Kochetov * @since 2.0 */ class NavBar extends Widget { /** + * @var array the HTML attributes for the widget container tag. The following special options are recognized: + * + * - tag: string, defaults to "nav", the name of the container tag + */ + public $options = []; + /** + * @var array the HTML attributes for the container tag. The following special options are recognized: + * + * - tag: string, defaults to "div", the name of the container tag + */ + public $containerOptions = []; + /** * @var string the text of the brand. Note that this is not HTML-encoded. * @see http://getbootstrap.com/components/#navbar */ @@ -56,10 +70,14 @@ class NavBar extends Widget */ public $screenReaderToggleText = 'Toggle navigation'; /** - * @var bool whether the navbar content should be included in a `container` div which adds left and right padding. - * Set this to false for a 100% width navbar. + * @var bool whether the navbar content should be included in an inner div container which by default + * adds left and right padding. Set this to false for a 100% width navbar. + */ + public $renderInnerContainer = true; + /** + * @var array the HTML attributes of the inner container. */ - public $padded = true; + public $innerContainerOptions = []; /** * Initializes the widget. @@ -69,27 +87,37 @@ class NavBar extends Widget parent::init(); $this->clientOptions = false; Html::addCssClass($this->options, 'navbar'); - if ($this->options['class'] == 'navbar') { + if ($this->options['class'] === 'navbar') { Html::addCssClass($this->options, 'navbar-default'); } Html::addCssClass($this->brandOptions, 'navbar-brand'); if (empty($this->options['role'])) { $this->options['role'] = 'navigation'; } - - echo Html::beginTag('nav', $this->options); - if ($this->padded) { - echo Html::beginTag('div', ['class' => 'container']); + $options = $this->options; + $tag = ArrayHelper::remove($options, 'tag', 'nav'); + echo Html::beginTag($tag, $options); + if ($this->renderInnerContainer) { + if (!isset($this->innerContainerOptions['class'])) { + Html::addCssClass($this->innerContainerOptions, 'container'); + } + echo Html::beginTag('div', $this->innerContainerOptions); } - echo Html::beginTag('div', ['class' => 'navbar-header']); + if (!isset($this->containerOptions['id'])) { + $this->containerOptions['id'] = "{$this->options['id']}-collapse"; + } echo $this->renderToggleButton(); if ($this->brandLabel !== null) { + Html::addCssClass($this->brandOptions, 'navbar-brand'); echo Html::a($this->brandLabel, $this->brandUrl === null ? Yii::$app->homeUrl : $this->brandUrl, $this->brandOptions); } echo Html::endTag('div'); - - echo Html::beginTag('div', ['class' => "collapse navbar-collapse navbar-{$this->options['id']}-collapse"]); + Html::addCssClass($this->containerOptions, 'collapse'); + Html::addCssClass($this->containerOptions, 'navbar-collapse'); + $options = $this->containerOptions; + $tag = ArrayHelper::remove($options, 'tag', 'div'); + echo Html::beginTag($tag, $options); } /** @@ -97,12 +125,13 @@ class NavBar extends Widget */ public function run() { - - echo Html::endTag('div'); - if ($this->padded) { + $tag = ArrayHelper::remove($this->containerOptions, 'tag', 'div'); + echo Html::endTag($tag); + if ($this->renderInnerContainer) { echo Html::endTag('div'); } - echo Html::endTag('nav'); + $tag = ArrayHelper::remove($this->options, 'tag', 'nav'); + echo Html::endTag($tag, $this->options); BootstrapPluginAsset::register($this->getView()); } @@ -113,11 +142,11 @@ class NavBar extends Widget protected function renderToggleButton() { $bar = Html::tag('span', '', ['class' => 'icon-bar']); - $screenReader = ''.$this->screenReaderToggleText.''; + $screenReader = "{$this->screenReaderToggleText}"; return Html::button("{$screenReader}\n{$bar}\n{$bar}\n{$bar}", [ 'class' => 'navbar-toggle', 'data-toggle' => 'collapse', - 'data-target' => ".navbar-{$this->options['id']}-collapse", + 'data-target' => "#{$this->containerOptions['id']}", ]); } }