Skip to content

Commit

Permalink
[TASK] Improve keys of bootstrap tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@linawolf
linawolf committed Dec 14, 2023
1 parent 437edd1 commit 3cd911f
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 40 deletions.
8 changes: 5 additions & 3 deletions packages/guides-theme-bootstrap/resources/template/body/directive/tabs.html.twig
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
<div class="tabs-container {% if node.classes %} {{ node.classesString }}{% endif %}">
<ul class="nav nav-tabs" id="{{ node.key }}" role="tablist">
<div class="tabs">
<ul class="nav nav-tabs" id="tab-{{ node.key }}" role="tablist">
{% for tab in node.tabs -%}
{% include "body/directive/tabs/tabs-button.html.twig" with {
tabsId: node.key,
tab:tab
} %}
{%- endfor %}
</ul>
<div class="tab-content" id="{{ node.key }}-content">
<div class="tab-content" id="tab-content-{{ node.key }}">
{% for tab in node.tabs -%}
{% include "body/directive/tabs/tabs-body.html.twig" with {
tabsId: node.key,
tab:tab
} %}
{%- endfor %}
Expand Down
2 changes: 1 addition & 1 deletion packages/guides-theme-bootstrap/resources/template/body/directive/tabs/tabs-body.html.twig
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div class="tab-pane fade {%- if tab.active %} show active{% endif -%} {%- if tab.classes %} {{ tab.classesString }}{% endif %}" id="{{ tab.key }}-tab-pane" role="tabpanel" aria-labelledby="{{ tab.key }}-tab" tabindex="0">
<div class="tab-pane fade {%- if tab.active %} show active{% endif -%}" id="{{ tab.key }}-{{ tabsId }}" role="tabpanel" aria-labelledby="{{ tab.key }}-tab-{{ tabsId }}">
{{ renderNode(tab.value) }}
</div>
9 changes: 6 additions & 3 deletions packages/guides-theme-bootstrap/resources/template/body/directive/tabs/tabs-button.html.twig
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<li class="nav-item" role="presentation">
<button class="nav-link {%- if tab.active %} active{% endif -%}" id="{{ tab.key }}-tab" data-bs-toggle="tab" data-bs-target="#{{ tab.key }}-tab-pane"
type="button" role="tab" aria-controls="{{ tab.key }}-tab-pane"
aria-selected="{%- if tab.active -%} true {%- else -%} false{% endif -%}">{{ renderNode(tab.content) }}</button>
<button class="nav-link {%- if tab.active %} active{% endif -%}"
id="{{ tab.key }}-tab-{{ tabsId }}" data-bs-toggle="tab" data-bs-target="#{{ tab.key }}-{{ tabsId }}"
type="button" role="tab" aria-controls="{{ tab.key }}-{{ tabsId }}"
aria-selected="{{ selected }}">
{{ renderNode(tab.content) }}
</button>
</li>
22 changes: 11 additions & 11 deletions packages/guides-theme-bootstrap/src/Bootstrap/Directives/TabsDirective.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,24 +18,25 @@
use phpDocumentor\Guides\Nodes\CollectionNode;
use phpDocumentor\Guides\Nodes\InlineCompoundNode;
use phpDocumentor\Guides\Nodes\Node;
use phpDocumentor\Guides\ReferenceResolvers\AnchorReducer;
use phpDocumentor\Guides\RestructuredText\Directives\SubDirective;
use phpDocumentor\Guides\RestructuredText\Parser\BlockContext;
use phpDocumentor\Guides\RestructuredText\Parser\Directive;
use phpDocumentor\Guides\RestructuredText\Parser\Productions\Rule;
use Psr\Log\LoggerInterface;

use function is_string;
use function preg_replace;
use function rand;
use function str_replace;
use function strtolower;
use function strval;

class TabsDirective extends SubDirective
{
private int $tabsCounter = 0;

/** @param Rule<CollectionNode> $startingRule */
public function __construct(protected Rule $startingRule, private readonly LoggerInterface $logger)
{
public function __construct(
protected Rule $startingRule,
private readonly LoggerInterface $logger,
private readonly AnchorReducer $anchorReducer,
) {
parent::__construct($startingRule);
}

Expand Down Expand Up @@ -77,11 +78,10 @@ protected function processSub(
}

if (is_string($directive->getOption('key')->getValue())) {
$key = strtolower($directive->getOption('key')->getValue());
$key = str_replace(' ', '-', $key);
$key = strval(preg_replace('/[^a-zA-Z0-9\-_]/', '', $key));
$key = $this->anchorReducer->reduceAnchor($directive->getOption('key')->getValue());
} else {
$key = 'tabs-' . rand(1, 1000);
$this->tabsCounter++;
$key = 'tabs-' . $this->tabsCounter;
}

return new TabsNode(
Expand Down
56 changes: 34 additions & 22 deletions tests/Integration/tests/bootstrap/bootstrap-tabs/expected/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,59 @@
<div class="section" id="document-title">
<h1>Document Title</h1>

<div class="tabs-container ">
<ul class="nav nav-tabs" id="my-tab" role="tablist">
<div class="tabs">
<ul class="nav nav-tabs" id="tab-my-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="tab-1-tab" data-bs-toggle="tab" data-bs-target="#tab-1-tab-pane"
type="button" role="tab" aria-controls="tab-1-tab-pane"
aria-selected="true">Tab 1</button>
<button class="nav-link active"
id="tab-1-tab-my-tab" data-bs-toggle="tab" data-bs-target="#tab-1-my-tab"
type="button" role="tab" aria-controls="tab-1-my-tab"
aria-selected="">
Tab 1
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab-2-tab" data-bs-toggle="tab" data-bs-target="#tab-2-tab-pane"
type="button" role="tab" aria-controls="tab-2-tab-pane"
aria-selected="false">Tab 2</button>
<button class="nav-link"
id="tab-2-tab-my-tab" data-bs-toggle="tab" data-bs-target="#tab-2-my-tab"
type="button" role="tab" aria-controls="tab-2-my-tab"
aria-selected="">
Tab 2
</button>
</li>
</ul>
<div class="tab-content" id="my-tab-content">
<div class="tab-pane fade show active" id="tab-1-tab-pane" role="tabpanel" aria-labelledby="tab-1-tab" tabindex="0">
<div class="tab-content" id="tab-content-my-tab">
<div class="tab-pane fade show active" id="tab-1-my-tab" role="tabpanel" aria-labelledby="tab-1-tab-my-tab">
<p>Lorem Ipsum Dolor 1</p>
</div>
<div class="tab-pane fade" id="tab-2-tab-pane" role="tabpanel" aria-labelledby="tab-2-tab" tabindex="0">
<div class="tab-pane fade" id="tab-2-my-tab" role="tabpanel" aria-labelledby="tab-2-tab-my-tab">
<p>Lorem Ipsum Dolor 2</p>
</div>
</div>
</div>

<div class="tabs-container ">
<ul class="nav nav-tabs" id="another-tab" role="tablist">
<div class="tabs">
<ul class="nav nav-tabs" id="tab-another-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab-3-tab" data-bs-toggle="tab" data-bs-target="#tab-3-tab-pane"
type="button" role="tab" aria-controls="tab-3-tab-pane"
aria-selected="false">Tab 3</button>
<button class="nav-link"
id="tab-3-tab-another-tab" data-bs-toggle="tab" data-bs-target="#tab-3-another-tab"
type="button" role="tab" aria-controls="tab-3-another-tab"
aria-selected="">
Tab 3
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" id="lorem-tab" data-bs-toggle="tab" data-bs-target="#lorem-tab-pane"
type="button" role="tab" aria-controls="lorem-tab-pane"
aria-selected="true">Tab 4</button>
<button class="nav-link active"
id="lorem-tab-another-tab" data-bs-toggle="tab" data-bs-target="#lorem-another-tab"
type="button" role="tab" aria-controls="lorem-another-tab"
aria-selected="">
Tab 4
</button>
</li>
</ul>
<div class="tab-content" id="another-tab-content">
<div class="tab-pane fade" id="tab-3-tab-pane" role="tabpanel" aria-labelledby="tab-3-tab" tabindex="0">
<div class="tab-content" id="tab-content-another-tab">
<div class="tab-pane fade" id="tab-3-another-tab" role="tabpanel" aria-labelledby="tab-3-tab-another-tab">
<p>Lorem Ipsum Dolor 3</p>
</div>
<div class="tab-pane fade show active" id="lorem-tab-pane" role="tabpanel" aria-labelledby="lorem-tab" tabindex="0">
<div class="tab-pane fade show active" id="lorem-another-tab" role="tabpanel" aria-labelledby="lorem-tab-another-tab">
<p>Lorem Ipsum Dolor 4</p>
</div>
</div>
Expand Down

0 comments on commit 3cd911f

Please sign in to comment.