Navigation Menu

Skip to content

Commit

Permalink
Adopt new changes in BS5 (#47)
Browse files Browse the repository at this point in the history
  • Loading branch information
@terabytesoftw
terabytesoftw committed May 13, 2021
1 parent ce957f5 commit 2562fd8
Show file tree
Hide file tree
Showing 20 changed files with 446 additions and 241 deletions.
109 changes: 75 additions & 34 deletions src/Accordion.php
View file
Expand Up @@ -20,39 +20,64 @@
use function is_string;

/**
* Accordion renders an accordion bootstrap javascript component.
* Accordion renders an accordion bootstrap JavaScript component.
*
* For example:
*
* ```php
* echo Accordion::widget()
* ->items([
* [
* 'label' => 'Collapsible Group Item #1',
* 'content' => 'Anim pariatur cliche...',
* // open its content by default
* 'contentOptions' => ['class' => 'show'],
* 'label' => 'Accordion Item #1',
* 'content' => [
* 'This is the first items accordion body. It is shown by default, until the collapse plugin ' .
* 'the appropriate classes that we use to style each element. These classes control the ' .
* 'overall appearance, as well as the showing and hiding via CSS transitions. You can ' .
* 'modify any of this with custom CSS or overriding our default variables. Its also worth ' .
* 'noting that just about any HTML can go within the .accordion-body, though the transition ' .
* 'does limit overflow.',
* ],
* ],
* // another group item
* [
* 'label' => 'Collapsible Group Item #2',
* 'content' => 'Anim pariatur cliche...',
* 'contentOptions' => [...],
* 'options' => [...],
* 'expand' => true,
* 'label' => 'Accordion Item #2',
* 'content' => '<strong>This is the second items accordion body.</strong> It is hidden by default, ' .
* 'until the collapse plugin adds the appropriate classes that we use to style each element. ' .
* 'These classes control the overall appearance, as well as the showing and hiding via CSS ' .
* 'transitions. You can modify any of this with custom CSS or overriding our default ' .
* 'variables. Its also worth noting that just about any HTML can go within the ' .
* '<code>.accordion-body</code>, though the transition does limit overflow.',
* 'contentOptions' => [
* 'class' => 'testContentOptions',
* ],
* 'options' => [
* 'class' => 'testClass',
* 'id' => 'testId',
* ],
* ],
* // if you want to swap out .accordion-body with .list-group, you may provide an array
* [
* 'label' => 'Collapsible Group Item #3',
* 'label' => '<b>Accordion Item #3</b>',
* 'content' => [
* 'Anim pariatur cliche...',
* 'Anim pariatur cliche...',
* '<b>test content1</b>',
* '<strong>This is the third items accordion body.</strong> It is hidden by default, until the ' .
* 'collapse plugin adds the appropriate classes that we use to style each element. These ' .
* 'classes control the overall appearance, as well as the showing and hiding via CSS ' .
* 'transitions. You can modify any of this with custom CSS or overriding our default ' .
* 'variables. Its also worth noting that just about any HTML can go within the ' .
* '<code>.accordion-body</code>, though the transition does limit overflow.',
* ],
* 'contentOptions' => [
* 'class' => 'testContentOptions2',
* ],
* 'contentOptions' => [...],
* 'options' => [...],
* 'options' => [
* 'class' => 'testClass2',
* 'id' => 'testId2',
* ],
* 'encode' => false,
* ],
* ]);
* ```
*
* @link https://getbootstrap.com/docs/5.0/components/accordion/
*/
final class Accordion extends Widget
{
Expand All @@ -62,16 +87,20 @@ final class Accordion extends Widget
private bool $autoCloseItems = true;
private array $itemToggleOptions = [];
private array $options = [];
private bool $flush = false;

protected function run(): string
{
if (!isset($this->options['id'])) {
$this->options['id'] = "{$this->getId()}-accordion";
}

/** @psalm-suppress InvalidArgument */
Html::addCssClass($this->options, ['widget' => 'accordion']);

if ($this->flush) {
Html::addCssClass($this->options, ['flush' => 'accordion-flush']);
}

return Html::div($this->renderItems(), $this->options)
->encode($this->encodeTags)
->render();
Expand All @@ -82,7 +111,7 @@ protected function run(): string
*
* Set this to `false` to allow keeping multiple items open at once.
*
* @return $this
* @return self
*/
public function allowMultipleOpenedItems(): self
{
Expand All @@ -95,7 +124,7 @@ public function allowMultipleOpenedItems(): self
/**
* When tags Labels HTML should not be encoded.
*
* @return $this
* @return self
*/
public function withoutEncodeLabels(): self
{
Expand Down Expand Up @@ -141,7 +170,7 @@ public function withoutEncodeLabels(): self
*
* @param array $value
*
* @return $this
* @return self
*/
public function items(array $value): self
{
Expand All @@ -165,7 +194,7 @@ public function items(array $value): self
*
* @param array $value
*
* @return $this
* @return self
*/
public function itemToggleOptions(array $value): self
{
Expand All @@ -182,7 +211,7 @@ public function itemToggleOptions(array $value): self
*
* @param array $value
*
* @return $this
* @return self
*/
public function options(array $value): self
{
Expand All @@ -192,6 +221,22 @@ public function options(array $value): self
return $new;
}

/**
* Remove the default background-color, some borders, and some rounded corners to render accordions
* edge-to-edge with their parent container.
*
* @return self
*
* @link https://getbootstrap.com/docs/5.0/components/accordion/#flush
*/
public function flush(): self
{
$new = clone $this;
$new->flush = true;

return $new;
}

/**
* Renders collapsible items as specified on {@see items}.
*
Expand All @@ -205,7 +250,7 @@ private function renderItems(): string
$index = 0;
$expanded = array_search(true, array_column($this->items, 'expand'), true);

foreach ($this->items as $key => $item) {
foreach ($this->items as $item) {
if (!is_array($item)) {
$item = ['content' => $item];
}
Expand Down Expand Up @@ -272,11 +317,11 @@ private function renderItem(string $header, array $item, int $index): string
'data-bs-toggle' => 'collapse',
'data-bs-target' => '#' . $options['id'],
'aria-expanded' => $expand ? 'true' : 'false',
'aria-controls' => $options['id'],
], $this->itemToggleOptions);

$itemToggleTag = ArrayHelper::remove($itemToggleOptions, 'tag', 'button');

/** @psalm-suppress ConflictingReferenceConstraint */
if ($itemToggleTag === 'a') {
ArrayHelper::remove($itemToggleOptions, 'data-bs-target');
$header = Html::a($header, '#' . $id, $itemToggleOptions)->encode($this->encodeTags) . "\n";
Expand All @@ -291,19 +336,15 @@ private function renderItem(string $header, array $item, int $index): string
if (is_string($item['content']) || is_numeric($item['content']) || is_object($item['content'])) {
$content = $item['content'];
} elseif (is_array($item['content'])) {
$ulOptions = ['class' => 'list-group'];
$ulItemOptions = ['class' => 'list-group-item'];

$items = [];
foreach ($item['content'] as $content) {
$items[] = Html::li($content)
->attributes($ulItemOptions)
->encode($this->encodeTags);
$items[] = Html::div($content)
->attributes(['class' => 'accordion-body'])
->encode($this->encodeTags)
->render();
}

$content = Html::ul()
->items(...$items)
->attributes($ulOptions) . "\n";
$content = implode("\n", $items);
} else {
throw new RuntimeException('The "content" option should be a string, array or object.');
}
Expand Down
10 changes: 6 additions & 4 deletions src/Alert.php
View file
Expand Up @@ -22,6 +22,8 @@
* ])
* ->body('Say hello...');
* ```
*
* @link https://getbootstrap.com/docs/5.0/components/alerts/
*/
final class Alert extends Widget
{
Expand Down Expand Up @@ -50,7 +52,7 @@ protected function run(): string
*
* @param string $value
*
* @return $this
* @return self
*/
public function body(string $value): self
{
Expand Down Expand Up @@ -78,7 +80,7 @@ public function body(string $value): self
*
* @param array $value
*
* @return $this
* @return self
*/
public function closeButton(array $value): self
{
Expand All @@ -91,7 +93,7 @@ public function closeButton(array $value): self
/**
* Disable close button.
*
* @return $this
* @return self
*/
public function withoutCloseButton(): self
{
Expand All @@ -108,7 +110,7 @@ public function withoutCloseButton(): self
*
* @param array $value
*
* @return $this
* @return self
*/
public function options(array $value): self
{
Expand Down
16 changes: 8 additions & 8 deletions src/Breadcrumbs.php
View file
Expand Up @@ -81,7 +81,7 @@ protected function run(): string
*
* @param string $value
*
* @return $this
* @return self
*/
public function activeItemTemplate(string $value): self
{
Expand All @@ -94,7 +94,7 @@ public function activeItemTemplate(string $value): self
/**
* When tags Labels HTML should not be encoded.
*
* @return $this
* @return self
*/
public function withoutEncodeLabels(): self
{
Expand All @@ -114,7 +114,7 @@ public function withoutEncodeLabels(): self
*
* @param array $value
*
* @return $this
* @return self
*/
public function homeLink(array $value): self
{
Expand All @@ -130,7 +130,7 @@ public function homeLink(array $value): self
*
* @param string $value
*
* @return $this
* @return self
*/
public function itemTemplate(string $value): self
{
Expand All @@ -154,7 +154,7 @@ public function itemTemplate(string $value): self
*
* @param array $value
*
* @return $this
* @return self
*/
public function links(array $value): self
{
Expand All @@ -171,7 +171,7 @@ public function links(array $value): self
*
* @param array $value
*
* @return $this
* @return self
*/
public function navOptions(array $value): self
{
Expand All @@ -188,7 +188,7 @@ public function navOptions(array $value): self
*
* @param array $value
*
* @return $this
* @return self
*/
public function options(array $value): self
{
Expand All @@ -203,7 +203,7 @@ public function options(array $value): self
*
* @param string $value
*
* @return $this
* @return self
*/
public function tag(string $value): self
{
Expand Down
8 changes: 4 additions & 4 deletions src/Button.php
View file
Expand Up @@ -44,7 +44,7 @@ protected function run(): string
/**
* When tags Labels HTML should not be encoded.
*
* @return $this
* @return self
*/
public function withoutEncodeLabels(): self
{
Expand All @@ -59,7 +59,7 @@ public function withoutEncodeLabels(): self
*
* @param string $value
*
* @return $this
* @return self
*/
public function label(string $value): self
{
Expand All @@ -76,7 +76,7 @@ public function label(string $value): self
*
* @param array $value
*
* @return $this
* @return self
*/
public function options(array $value): self
{
Expand All @@ -91,7 +91,7 @@ public function options(array $value): self
*
* @param string $value
*
* @return $this
* @return self
*/
public function tagName(string $value): self
{
Expand Down

0 comments on commit 2562fd8

Please sign in to comment.