Error202
/
yii2-bootstrap
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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
7cd392c6fc 599d60c376
commit
356ed62e5f
3 changed files with 85 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      CHANGELOG.md
  2. 30
      Collapse.php
  3. 73
      tests/CollapseTest.php

3
CHANGELOG.md
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save