Tabs refactored

framework/yii/bootstrap/Tabs.php

@@ -32,10 +32,15 @@ use yii\helpers\Html;
  *         ),
  *         array(
  *             'header' => 'Dropdown',
- *             'items' => array(
+ *             'dropdown' => array(
  *                  array(
- *                      'header' => '@Dropdown1',
+ *                      'label' => 'DropdownA',
- *                      'content' => 'Anim pariatur cliche...',
+ *                      'content' => 'DropdownA, Anim pariatur cliche...',
+ *                  ),
+ *                  '-', // divider
+ *                  array(
+ *                      'label' => 'DropdownB',
+ *                      'content' => 'DropdownB, Anim pariatur cliche...',
  *                  ),
  *             ),
  *         ),
@@ -63,9 +68,14 @@ class Tabs extends Widget
 	 *     'content' => 'Mauris mauris ante, blandit et, ultrices a, suscipit eget...',
 	 *     // optional the HTML attributes of the tab content container
 	 *     'options'=> array(...),
-	 *     // optional, an array of items so to dipslay a dropdown menu on the tab header
+	 *     // optional, an array of [[Dropdown]] widget items so to display a dropdown menu on the tab header. This
-	 *     // ***Important*** if `items` is set, then `content` will be ignored
+	 *     // attribute, apart from the original [[Dropdown::items]] settings, also has two extra special keys:
-	 *     'items'=> array(...)
+	 *     // - content: required, teh content (HTML) of teh tab the menu item is linked to
+	 *     // - contentOptions: optional the HTML attributes of the tab content container
+	 *     // note: if `dropdown` is set, then `content` will be ignored
+	 *     // important: there is an issue with sub-dropdown menus, and as of 3.0, bootstrap won't support sub-dropdown
+	 *     // @see https://github.com/twitter/bootstrap/issues/5050#issuecomment-11741727
+	 *     'dropdown'=> array(...)
 	 * )
 	 * ```
 	 */
@@ -79,6 +89,8 @@ class Tabs extends Widget
 	{
 		parent::init();
 		$this->addCssClass($this->options, 'nav');
+		$this->items = $this->normalizeItems();
+
 	}
 
 	/**
@@ -86,83 +98,136 @@ class Tabs extends Widget
 	 */
 	public function run()
 	{
-		echo $this->renderHeaders($this->items, $this->options) . "\n";
+		echo Html::beginTag('ul', $this->options) . "\n";
+		echo $this->renderHeaders() . "\n";
+		echo Html::endTag('ul');
 		echo Html::beginTag('div', array('class' => 'tab-content')) . "\n";
-		echo $this->renderContents($this->items) . "\n";
+		echo $this->renderContents() . "\n";
 		echo Html::endTag('div') . "\n";
 		$this->registerPlugin('tab');
 	}
 
 	/**
-	 * @param array $items the items to render in the header.
+	 * Renders tabs navigation.
-	 * @param array $options the HTML attributes of the menu container.
-	 * @param integer $index the starting index of header item. Used to set ids.
 	 * @return string the rendering result.
-	 * @throws InvalidConfigException
 	 */
-	protected function renderHeaders($items, $options = array(), $index = 0)
+	protected function renderHeaders()
 	{
 		$headers = array();
-
+		foreach ($this->items['headers'] as $item) {
-		foreach ($items as $item) {
+			$options = ArrayHelper::getValue($item, 'options', array());
-			if (!isset($item['header'])) {
+			if (isset($item['dropdown'])) {
-				throw new InvalidConfigException("The 'header' option is required.");
-			}
-			$headerOptions = ArrayHelper::getValue($item, 'headerOptions', array());
-			if ($index === 0) {
-				$this->addCssClass($headerOptions, 'active');
-			}
-			if (isset($item['items'])) {
-				$this->getView()->registerAssetBundle("yii/bootstrap/dropdown");
-				$this->addCssClass($headerOptions, 'dropdown');
 				$headers[] = Html::tag(
 					'li',
 					Html::a($item['header'] . ' <b class="caret"></b>', "#", array(
 						'class' => 'dropdown-toggle',
 						'data-toggle' => 'dropdown'
 					)) .
-					$this->renderHeaders($item['items'], array('class' => 'dropdown-menu'), $index++),
+					Dropdown::widget(array('items' => $item['dropdown'], 'clientOptions' => false)),
-					$headerOptions
+					$options
 				);
-			} else {
+				continue;
+			}
+			$id = ArrayHelper::getValue($item, 'url');
+			$headers[] = Html::tag('li', Html::a($item['header'], "{$id}", array('data-toggle' => 'tab')), $options);
 
-				$contentOptions = ArrayHelper::getValue($item, 'options', array());
-				$id = ArrayHelper::getValue($contentOptions, 'id', $this->options['id'] . '-tab' . $index++);
-				$headers[] = Html::tag('li', Html::a($item['header'], "#$id", array('data-toggle' => 'tab')), $headerOptions);
 		}
+		return implode("\n", $headers);
 	}
 
-		return Html::tag('ul', implode("\n", $headers), $options);
+	/**
+	 * Renders tabs contents.
+	 * @return string the rendering result.
+	 */
+	protected function renderContents()
+	{
+		$contents = array();
+		foreach ($this->items['contents'] as $item) {
+			$options = ArrayHelper::getValue($item, 'options', array());
+			$this->addCssClass($options, 'tab-pane');
+			$contents[] = Html::tag('div', $item['content'], $options);
+
+		}
+		return implode("\n", $contents);
 	}
 
 	/**
-	 * Renders tabs contents as specified on [[items]].
+	 * Normalizes the [[items]] property to divide headers from contents and to ease its rendering when there are
-	 * @param array $items the items to get the contents from.
+	 * headers with dropdown menus.
-	 * @param integer $index the starting index (for recursion)
+	 * @return array the normalized tabs items
-	 * @return string the rendering result.
 	 * @throws InvalidConfigException
 	 */
-	protected function renderContents($items, $index = 0)
+	protected function normalizeItems()
 	{
-		$contents = array();
+		$items = array();
-		foreach ($items as $item) {
+		$index = 0;
-			if (!isset($item['content']) && !isset($item['items'])) {
+		foreach ($this->items as $item) {
+			if (!isset($item['header'])) {
+				throw new InvalidConfigException("The 'header' option is required.");
+			}
+			if (!isset($item['content']) && !isset($item['dropdown'])) {
 				throw new InvalidConfigException("The 'content' option is required.");
 			}
-			$options = ArrayHelper::getValue($item, 'options', array());
+			$header = $content = array();
-			$this->addCssClass($options, 'tab-pane');
+			$header['header'] = ArrayHelper::getValue($item, 'header');
+			$header['options'] = ArrayHelper::getValue($item, 'headerOptions', array());
+			if ($index === 0) {
+				$this->addCssClass($header['options'], 'active');
+			}
+			if (isset($item['dropdown'])) {
+				$this->addCssClass($header['options'], 'dropdown');
 
+				$self = $this;
+				$dropdown = function ($list) use (&$dropdown, &$items, &$index, $self) {
+					$ddItems = $content = array();
+					foreach ($list as $item) {
+						if (is_string($item)) {
+							$ddItems[] = $item;
+							continue;
+						}
+						if (!isset($item['content']) && !isset($item['items'])) {
+							throw new InvalidConfigException("The 'content' option is required.");
+						}
 						if (isset($item['items'])) {
-				$contents[] = $this->renderContents($item['items'], $index++);
+							$item['items'] = $dropdown($item['items']);
 						} else {
+							$content['content'] = ArrayHelper::remove($item, 'content');
+							$content['options'] = ArrayHelper::remove($item, 'contentOptions', array());
 							if ($index === 0) {
-					$this->addCssClass($options, 'active');
+								$self->addCssClass($content['options'], 'active');
+								$self->addCssClass($item['options'], 'active');
 							}
-				$options['id'] = ArrayHelper::getValue($options, 'id', $this->options['id'] . '-tab' . $index++);
+							$content['options']['id'] = ArrayHelper::getValue(
-				$contents[] = Html::tag('div', $item['content'], $options);
+								$content['options'],
+								'id',
+								$self->options['id'] . '-tab' . $index++);
+							$item['url'] = '#' . $content['options']['id'];
+							$item['urlOptions']['data-toggle'] = 'tab';
+
+							$items['contents'][] = $content;
 						}
+						$ddItems[] = $item;
 					}
+					return $ddItems;
+				};
+				$header['dropdown'] = $dropdown($item['dropdown']);
 
-		return implode("\n", $contents);
+			} else {
+				$content['content'] = ArrayHelper::getValue($item, 'content');
+				$content['options'] = ArrayHelper::getValue($item, 'options', array());
+				if ($index === 0) {
+					$this->addCssClass($content['options'], 'active');
+				}
+				$content['options']['id'] = ArrayHelper::getValue(
+					$content['options'],
+					'id',
+					$this->options['id'] . '-tab' . $index++);
+
+				$header['url'] = "#" . ArrayHelper::getValue($content['options'], 'id');
+				$items['contents'][] = $content;
+			}
+			$items['headers'][] = $header;
+		}
+		return $items;
 	}
 }