Browse Source

Merge pull request #30 from pana1990/29-collapse-with-list-groups

Fix #29 : Added support to list-groups in Collapse class
tags/2.0.4
Alexander Makarov 10 years ago
parent
commit
356ed62e5f
  1. 3
      CHANGELOG.md
  2. 30
      Collapse.php
  3. 73
      tests/CollapseTest.php

3
CHANGELOG.md

@ -6,6 +6,7 @@ Yii Framework 2 bootstrap extension Change Log
- Bug #18: `label` option ignored by `yii\bootstrap\Activefield::checkbox()` and `yii\bootstrap\Activefield::radio()` (mikehaertl) - Bug #18: `label` option ignored by `yii\bootstrap\Activefield::checkbox()` and `yii\bootstrap\Activefield::radio()` (mikehaertl)
- Bug #5984: `yii\bootstrap\Activefield::checkbox()` caused browser to link label to the wrong input (cebe) - Bug #5984: `yii\bootstrap\Activefield::checkbox()` caused browser to link label to the wrong input (cebe)
- Enh #29: Added support to list-groups for Collapse class (pana1990, skullcrasher)
- Enh #2546: Added `visible` option to `yii\bootstrap\ButtonGroup::$buttons` (samdark, lukBarros) - Enh #2546: Added `visible` option to `yii\bootstrap\ButtonGroup::$buttons` (samdark, lukBarros)
- Enh #7633: Added `ActionColumn::$buttonOptions` for defining HTML options to be added to the default buttons (cebe) - Enh #7633: Added `ActionColumn::$buttonOptions` for defining HTML options to be added to the default buttons (cebe)
- Enh: Added `Nav::$dropDownCaret` to allow customization of the dropdown caret symbol (cebe) - Enh: Added `Nav::$dropDownCaret` to allow customization of the dropdown caret symbol (cebe)
@ -41,7 +42,7 @@ Yii Framework 2 bootstrap extension Change Log
---------------------- ----------------------
- Bug #5323: Nested dropdown does not work for `yii\bootstrap\DropDown` (aryraditya) - Bug #5323: Nested dropdown does not work for `yii\bootstrap\DropDown` (aryraditya)
- Bug #5336: `yii\bootstrap\DropDown` should register bootstrap plugin asset (zelenin) - Bug #5336: `yii\bootstrap\DropDown` should register bootstrap plugin asset (zelenin)
- Chg #5231: Collapse `items` property uses `label` element instead of array key for headers (nkovacs) - Chg #5231: Collapse `items` property uses `label` element instead of array key for headers (nkovacs)
- Chg #5232: Collapse encodes headers by default (nkovacs) - Chg #5232: Collapse encodes headers by default (nkovacs)
- Chg #5217: Tabs no longer requires content since empty tab could be used dynamically (damiandennis) - Chg #5217: Tabs no longer requires content since empty tab could be used dynamically (damiandennis)

30
Collapse.php

@ -33,6 +33,17 @@ use yii\helpers\Html;
* 'contentOptions' => [...], * 'contentOptions' => [...],
* 'options' => [...], * 'options' => [...],
* ], * ],
* // if you want to swap out .panel-body with .list-group, you may use the following
* [
* 'label' => 'Collapsible Group Item #1',
* 'content' => [
* 'Anim pariatur cliche...',
* 'Anim pariatur cliche...'
* ],
* 'contentOptions' => [...],
* 'options' => [...],
* 'footer' => 'Footer' // the footer label in list-group
* ],
* ] * ]
* ]); * ]);
* ``` * ```
@ -50,7 +61,7 @@ class Collapse extends Widget
* - label: string, required, the group header label. * - label: string, required, the group header label.
* - encode: boolean, optional, whether this label should be HTML-encoded. This param will override * - encode: boolean, optional, whether this label should be HTML-encoded. This param will override
* global `$this->encodeLabels` param. * global `$this->encodeLabels` param.
* - content: string, required, the content (HTML) of the group * - content: array|string, required, the content (HTML) of the group
* - options: array, optional, the HTML attributes of the group * - options: array, optional, the HTML attributes of the group
* - contentOptions: optional, the HTML attributes of the group's content * - contentOptions: optional, the HTML attributes of the group's content
*/ */
@ -135,7 +146,22 @@ class Collapse extends Widget
$header = Html::tag('h4', $headerToggle, ['class' => 'panel-title']); $header = Html::tag('h4', $headerToggle, ['class' => 'panel-title']);
$content = Html::tag('div', $item['content'], ['class' => 'panel-body']) . "\n"; if (is_string($item['content'])) {
$content = Html::tag('div', $item['content'], ['class' => 'panel-body']) . "\n";
} elseif (is_array($item['content'])) {
$content = Html::ul($item['content'], [
'class' => 'list-group',
'itemOptions' => [
'class' => 'list-group-item'
],
'encode' => false,
]) . "\n";
if (isset($item['footer'])) {
$content .= Html::tag('div', $item['footer'], ['class' => 'panel-footer']) . "\n";
}
} else {
throw new InvalidConfigException('The "content" option should be a string or array.');
}
} else { } else {
throw new InvalidConfigException('The "content" option is required.'); throw new InvalidConfigException('The "content" option is required.');
} }

73
tests/CollapseTest.php

@ -15,11 +15,32 @@ class CollapseTest extends TestCase
'items' => [ 'items' => [
[ [
'label' => 'Collapsible Group Item #1', 'label' => 'Collapsible Group Item #1',
'content' => 'test content1', 'content' => [
'test content1',
'test content2'
],
],
[
'label' => 'Collapsible Group Item #2',
'content' => [
'test content1',
'test content2'
],
'contentOptions' => [
'class' => 'testContentOptions'
],
'options' => [
'class' => 'testClass',
'id' => 'testId'
],
'footer' => 'Footer'
], ],
[ [
'label' => '<h1>Collapsible Group Item #2</h1>', 'label' => '<h1>Collapsible Group Item #3</h1>',
'content' => '<h2>test content2</h2>', 'content' => [
'<h2>test content1</h2>',
'<h2>test content2</h2>'
],
'contentOptions' => [ 'contentOptions' => [
'class' => 'testContentOptions2' 'class' => 'testContentOptions2'
], ],
@ -27,11 +48,15 @@ class CollapseTest extends TestCase
'class' => 'testClass2', 'class' => 'testClass2',
'id' => 'testId2' 'id' => 'testId2'
], ],
'encode' => true 'encode' => false,
'footer' => 'Footer2'
], ],
[ [
'label' => '<h1>Collapsible Group Item #3</h1>', 'label' => '<h1>Collapsible Group Item #4</h1>',
'content' => '<h2>test content3</h2>', 'content' => [
'<h2>test content1</h2>',
'<h2>test content2</h2>'
],
'contentOptions' => [ 'contentOptions' => [
'class' => 'testContentOptions3' 'class' => 'testContentOptions3'
], ],
@ -39,11 +64,8 @@ class CollapseTest extends TestCase
'class' => 'testClass3', 'class' => 'testClass3',
'id' => 'testId3' 'id' => 'testId3'
], ],
'encode' => false 'encode' => true,
], 'footer' => 'Footer3'
[
'label' => '<h1>Collapsible Group Item #4</h1>',
'content' => '<h1>test content4</h1>',
], ],
] ]
]); ]);
@ -52,19 +74,34 @@ class CollapseTest extends TestCase
<div id="w0" class="panel-group"> <div id="w0" class="panel-group">
<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse1" data-toggle="collapse" data-parent="#w0">Collapsible Group Item #1</a> <div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse1" data-toggle="collapse" data-parent="#w0">Collapsible Group Item #1</a>
</h4></div> </h4></div>
<div id="w0-collapse1" class="panel-collapse collapse"><div class="panel-body">test content1</div> <div id="w0-collapse1" class="panel-collapse collapse"><ul class="list-group">
<li class="list-group-item">test content1</li>
<li class="list-group-item">test content2</li>
</ul>
</div></div> </div></div>
<div id="testId2" class="testClass2 panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse2" data-toggle="collapse" data-parent="#w0">&lt;h1&gt;Collapsible Group Item #2&lt;/h1&gt;</a> <div id="testId" class="testClass panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse2" data-toggle="collapse" data-parent="#w0">Collapsible Group Item #2</a>
</h4></div> </h4></div>
<div id="w0-collapse2" class="testContentOptions2 panel-collapse collapse"><div class="panel-body"><h2>test content2</h2></div> <div id="w0-collapse2" class="testContentOptions panel-collapse collapse"><ul class="list-group">
<li class="list-group-item">test content1</li>
<li class="list-group-item">test content2</li>
</ul>
<div class="panel-footer">Footer</div>
</div></div> </div></div>
<div id="testId3" class="testClass3 panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse3" data-toggle="collapse" data-parent="#w0"><h1>Collapsible Group Item #3</h1></a> <div id="testId2" class="testClass2 panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse3" data-toggle="collapse" data-parent="#w0"><h1>Collapsible Group Item #3</h1></a>
</h4></div> </h4></div>
<div id="w0-collapse3" class="testContentOptions3 panel-collapse collapse"><div class="panel-body"><h2>test content3</h2></div> <div id="w0-collapse3" class="testContentOptions2 panel-collapse collapse"><ul class="list-group">
<li class="list-group-item"><h2>test content1</h2></li>
<li class="list-group-item"><h2>test content2</h2></li>
</ul>
<div class="panel-footer">Footer2</div>
</div></div> </div></div>
<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse4" data-toggle="collapse" data-parent="#w0">&lt;h1&gt;Collapsible Group Item #4&lt;/h1&gt;</a> <div id="testId3" class="testClass3 panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse4" data-toggle="collapse" data-parent="#w0">&lt;h1&gt;Collapsible Group Item #4&lt;/h1&gt;</a>
</h4></div> </h4></div>
<div id="w0-collapse4" class="panel-collapse collapse"><div class="panel-body"><h1>test content4</h1></div> <div id="w0-collapse4" class="testContentOptions3 panel-collapse collapse"><ul class="list-group">
<li class="list-group-item"><h2>test content1</h2></li>
<li class="list-group-item"><h2>test content2</h2></li>
</ul>
<div class="panel-footer">Footer3</div>
</div></div> </div></div>
</div> </div>

Loading…
Cancel
Save