Skip to content

Y
yii2bootstrap
Commit 1fd918d9 authored by Dmitriy Gritsenko's avatar Dmitriy Gritsenko Committed by Alexander Makarov
Browse files
Options

Fixes #253: Fixed missing initial class `collapsed` of an `a` element in... 

Fixes #253: Fixed missing initial class `collapsed` of an `a` element in heading in `yii\bootstrap\Collapse` widget
parent 454552b7
Hide whitespace changes
Inline Side-by-side
Showing with 47 additions and 12 deletions
CHANGELOG.md
View file @ 1fd918d9
...@@ -4,7 +4,7 @@ Yii Framework 2 bootstrap extension Change Log ...@@ -4,7 +4,7 @@ Yii Framework 2 bootstrap extension Change Log
2.0.10 under development 2.0.10 under development
------------------------ ------------------------
- no changes in this release. - Bug #253: Fixed missing initial class `collapsed` of an `a` element in heading in `yii\bootstrap\Collapse` widget (evil1)
2.0.9 January 29, 2019 2.0.9 January 29, 2019
......
src/Collapse.php
View file @ 1fd918d9
...@@ -184,12 +184,22 @@ class Collapse extends Widget ...@@ -184,12 +184,22 @@ class Collapse extends Widget
$header = Html::encode($header); $header = Html::encode($header);
} }
$active = false;
if (isset($options['class'])) {
$classes = is_string($options['class']) ? preg_split('/\s+/', $options['class'], -1, PREG_SPLIT_NO_EMPTY) : $options['class'];
$active = in_array('in', $classes, true);
}
$itemToggleOptions = array_merge([ $itemToggleOptions = array_merge([
'tag' => 'a', 'tag' => 'a',
'data-toggle' => 'collapse', 'data-toggle' => 'collapse',
], $this->itemToggleOptions); ], $this->itemToggleOptions);
Html::addCssClass($itemToggleOptions, ['widget' => 'collapse-toggle']); Html::addCssClass($itemToggleOptions, ['widget' => 'collapse-toggle']);
if (!$active) {
Html::addCssClass($itemToggleOptions, ['collapsed' => 'collapsed']);
}
if ($this->autoCloseItems) { if ($this->autoCloseItems) {
$itemToggleOptions['data-parent'] = '#' . $this->options['id']; $itemToggleOptions['data-parent'] = '#' . $this->options['id'];
} }
......
tests/CollapseTest.php
View file @ 1fd918d9
...@@ -74,14 +74,14 @@ class CollapseTest extends TestCase ...@@ -74,14 +74,14 @@ class CollapseTest extends TestCase
$this->assertEqualsWithoutLE(<<<HTML $this->assertEqualsWithoutLE(<<<HTML
<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 collapsed" 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"><ul class="list-group"> <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 content1</li>
<li class="list-group-item">test content2</li> <li class="list-group-item">test content2</li>
</ul> </ul>
</div></div> </div></div>
<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> <div id="testId" class="testClass panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle collapsed" href="#w0-collapse2" data-toggle="collapse" data-parent="#w0">Collapsible Group Item #2</a>
</h4></div> </h4></div>
<div id="w0-collapse2" class="testContentOptions panel-collapse collapse"><ul class="list-group"> <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 content1</li>
...@@ -89,7 +89,7 @@ class CollapseTest extends TestCase ...@@ -89,7 +89,7 @@ class CollapseTest extends TestCase
</ul> </ul>
<div class="panel-footer">Footer</div> <div class="panel-footer">Footer</div>
</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-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 collapsed" 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="testContentOptions2 panel-collapse collapse"><ul class="list-group"> <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 content1</h2></li>
...@@ -97,7 +97,7 @@ class CollapseTest extends TestCase ...@@ -97,7 +97,7 @@ class CollapseTest extends TestCase
</ul> </ul>
<div class="panel-footer">Footer2</div> <div class="panel-footer">Footer2</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-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 collapsed" 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="testContentOptions3 panel-collapse collapse"><ul class="list-group"> <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 content1</h2></li>
...@@ -135,19 +135,19 @@ HTML ...@@ -135,19 +135,19 @@ HTML
$this->assertEqualsWithoutLE(<<<HTML $this->assertEqualsWithoutLE(<<<HTML
<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">Item1</a> <div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle collapsed" href="#w0-collapse1" data-toggle="collapse" data-parent="#w0">Item1</a>
</h4></div> </h4></div>
<div id="w0-collapse1" class="panel-collapse collapse"><div class="panel-body">Content1</div> <div id="w0-collapse1" class="panel-collapse collapse"><div class="panel-body">Content1</div>
</div></div> </div></div>
<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse2" data-toggle="collapse" data-parent="#w0">Item2</a> <div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle collapsed" href="#w0-collapse2" data-toggle="collapse" data-parent="#w0">Item2</a>
</h4></div> </h4></div>
<div id="w0-collapse2" class="panel-collapse collapse"><div class="panel-body">Content2</div> <div id="w0-collapse2" class="panel-collapse collapse"><div class="panel-body">Content2</div>
</div></div> </div></div>
<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle" href="#w0-collapse3" data-toggle="collapse" data-parent="#w0">Item3</a> <div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle collapsed" href="#w0-collapse3" data-toggle="collapse" data-parent="#w0">Item3</a>
</h4></div> </h4></div>
<div id="w0-collapse3" class="panel-collapse collapse"><div class="panel-body">Content3</div> <div id="w0-collapse3" class="panel-collapse collapse"><div class="panel-body">Content3</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">FormField</a> <div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="collapse-toggle collapsed" href="#w0-collapse4" data-toggle="collapse" data-parent="#w0">FormField</a>
</h4></div> </h4></div>
<div id="w0-collapse4" class="panel-collapse collapse"><div class="panel-body"><div class="form-group field-dynamicmodel-test"> <div id="w0-collapse4" class="panel-collapse collapse"><div class="panel-body"><div class="form-group field-dynamicmodel-test">
<input type="text" id="dynamicmodel-test" class="form-control" name="DynamicModel[test]"> <input type="text" id="dynamicmodel-test" class="form-control" name="DynamicModel[test]">
...@@ -203,7 +203,7 @@ HTML ...@@ -203,7 +203,7 @@ HTML
$this->assertEqualsWithoutLE(<<<HTML $this->assertEqualsWithoutLE(<<<HTML
<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 collapsed" 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"><div class="form-group field-singer-firstname"> <div id="w0-collapse1" class="panel-collapse collapse"><div class="panel-body"><div class="form-group field-singer-firstname">
<input type="text" id="singer-firstname" class="form-control" name="Singer[firstName]"> <input type="text" id="singer-firstname" class="form-control" name="Singer[firstName]">
...@@ -262,7 +262,7 @@ HTML ...@@ -262,7 +262,7 @@ HTML
'class' => 'custom-toggle', 'class' => 'custom-toggle',
], ],
]); ]);
$this->assertContains('<h4 class="panel-title"><span class="custom-toggle collapse-toggle" data-toggle="collapse" ', $output); $this->assertContains('<h4 class="panel-title"><span class="custom-toggle collapse-toggle collapsed" data-toggle="collapse" ', $output);
$this->assertNotContains('<a', $output); $this->assertNotContains('<a', $output);
$output = Collapse::widget([ $output = Collapse::widget([
...@@ -272,7 +272,32 @@ HTML ...@@ -272,7 +272,32 @@ HTML
'class' => ['widget' => 'custom-toggle'], 'class' => ['widget' => 'custom-toggle'],
], ],
]); ]);
$this->assertContains('<h4 class="panel-title"><span class="custom-toggle" data-toggle="collapse" ', $output); $this->assertContains('<h4 class="panel-title"><span class="custom-toggle collapsed" data-toggle="collapse" ', $output);
$this->assertNotContains('collapse-toggle', $output); $this->assertNotContains('collapse-toggle', $output);
} }
/**
* @depends testRender
*/
public function testItemToggleTagClasses()
{
$items = [
[
'label' => 'Item 1',
'content' => 'Content 1',
'contentOptions' => [
'class' => 'in'
],
],
[
'label' => 'Item 2',
'content' => 'Content 2',
],
];
$output = Collapse::widget([
'items' => $items,
]);
$this->assertContains('<h4 class="panel-title"><a class="collapse-toggle" href="#w5-collapse1" data-toggle="collapse" ', $output);
$this->assertContains('<h4 class="panel-title"><a class="collapse-toggle collapsed" href="#w5-collapse2" data-toggle="collapse" ', $output);
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment