Skip to content

Commit

Permalink
Merge branch 'dev' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikola-wd
nikola-wd committed Sep 2, 2022
2 parents 10afe92 + c7b6422 commit e24af83
Show file tree
Hide file tree
Showing 8 changed files with 140 additions and 41 deletions.
8 changes: 5 additions & 3 deletions src/js/lazily-loaded/Collapsible.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,12 +224,12 @@ class Collapsible {

if (event.target.playbackRate * (reverse ? 1 : -1) > 0) {
this.node.classList.remove(this.constructor.classes.active)
this.node.setAttribute('aria-expanded', false)
this.trigger.setAttribute('aria-expanded', false)
this.setStartState()
return
}
this.node.classList.add(this.constructor.classes.active)
this.node.setAttribute('aria-expanded', true)
this.trigger.setAttribute('aria-expanded', true)
this.setEndState()
}

Expand Down Expand Up @@ -260,9 +260,11 @@ class Collapsible {

if (this.initiallyOpen) {
this.node.classList.add(this.constructor.classes.active)
this.node.setAttribute('aria-expanded', true)
this.trigger.setAttribute('aria-expanded', true)
this.setEndState()
return
} else {
this.trigger.setAttribute('aria-expanded', false)
}
this.setStartState()
}
Expand Down
8 changes: 8 additions & 0 deletions src/js/lazily-loaded/Tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ class Tabs {
removeAllActiveTabs(activeTabs) {
for (let i = 0; i < activeTabs.length; i++) {
const prevActiveTab = activeTabs[i]
if (prevActiveTab.classList.contains('tab-anchor')) {
prevActiveTab.setAttribute('aria-selected', 'false')
} else {
prevActiveTab.setAttribute('aria-hidden', 'true')
}
prevActiveTab.classList.remove('activeTab')
}
}
Expand All @@ -23,11 +28,14 @@ class Tabs {
this.removeAllActiveTabs(activeTabs)

anchor.classList.add('activeTab')
anchor.setAttribute('aria-selected', 'true')

const panelID = anchor.dataset.href
const panel = parent.querySelector(
`:scope > .tabs__content > [data-id="${panelID}"]`
)
panel.classList.add('activeTab')
panel.setAttribute('aria-hidden', 'false')
}

init() {
Expand Down
17 changes: 16 additions & 1 deletion views/parts/_accordion.latte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,16 @@
{varType bool $collapse_siblings} {* Whether or not opening one accordion items should close siblings. Default is falses *}
{varType int $initially_open_item} {* By default all accordion items are closed. This can be used, and index passed to make one open by default *}



{* panels ids - required for a11y purposes *}
{var $panels_ids = []}
{var $random_string = uniqid()}
{foreach $items as $acc_index => $tab_content}
{var $index = $acc_index + 1}
{var $panels_ids[] = "{$random_string}_{$index}"}
{/foreach}

<div
class="accordion {$class ?? ''}"
{if $collapse_siblings ?? false}
Expand All @@ -31,13 +41,18 @@
<button
class="collapsible__trigger"
type="button"
id="acc_panel_{$panels_ids[$index]}"
aria-label="{$aria_label_text}"
>
{block acc_trigger}{/block}
<span class="chevron"></span>
</button>

<div class="collapsible__content">
<div
class="collapsible__content"
role="region"
aria-labelledby="acc_panel_{$panels_ids[$index]}"
>
<div class="collapsible__content__inner">
{block acc_content}{/block}
</div>{* inner *}
Expand Down
2 changes: 1 addition & 1 deletion views/parts/_collapsibles.latte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
{/embed}
</div>{* col *}
<div class="col">
<h4>1 Level - independed</h4>
<h4>1 Level - independent</h4>
{embed
tr_part('_accordion'),
items: $test_acc_items,
Expand Down
24 changes: 22 additions & 2 deletions views/parts/_tabs.latte
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,34 @@
{varType string $class} {* optional class to pass to the tabs element *}
{varType array $tabs} {* $tabs array. Required. *}


{* tabs ids - required for a11y purposes *}
{var $tabs_ids = []}
{var $random_string = uniqid()}
{foreach $tabs as $tab_index => $tab_content}
{var $index = $tab_index + 1}
{var $tabs_ids[] = "{$random_string}_{$index}"}
{/foreach}

<div
class="tabs {$class ?? ''}"
n:if="!empty($tabs)"
>

<div class="tabs__nav">
<div
class="tabs__nav"
role="tablist"
>

<button
n:foreach="$tabs as $ta_key => $ta_content"
type="button"
class="tab-anchor {$ta_key == 0 ? 'activeTab' : ''}"
data-href="panel-{$ta_key}"
class="tab-anchor {$ta_key == 0 ? 'activeTab' : ''}"
id="tab_{$tabs_ids[$ta_key]}"
aria-selected="{$ta_key == 0 ? 'true' : 'false'}"
aria-controls="panel-{$tabs_ids[$ta_key]}"
role="tab"
>
{block tab_anchor}{/block}
</button>
Expand All @@ -24,7 +40,11 @@
<div
class="tab-panel {$tp_key == 0 ? 'activeTab enter' : ''}"
data-id="panel-{$tp_key}"
id="panel-{$tabs_ids[$tp_key]}"
n:foreach="$tabs as $tp_key => $tp_content"
aria-labelledby="tab_{$tabs_ids[$tp_key]}"
role="tabpanel"
aria-hidden="{$tp_key == 0 ? 'false' : 'true'}"
>
<div class="tab-panel__content">
{block tab_panel}{/block}
Expand Down
55 changes: 38 additions & 17 deletions views/temp/views-parts-_accordion.latte--0114b62ed0.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,59 +13,80 @@ final class Template0114b62ed0 extends Latte\Runtime\Template
public function main(): array
{
extract($this->params);
if (!empty($items)) /* line 9 */ {
echo '
';
$panels_ids = [] /* line 12 */;
$random_string = uniqid() /* line 13 */;
$iterations = 0;
foreach ($items as $acc_index => $tab_content) /* line 14 */ {
$index = $acc_index + 1 /* line 15 */;
$panels_ids[] = "{$random_string}_{$index}" /* line 16 */;
$iterations++;
}
echo "\n";
if (!empty($items)) /* line 19 */ {
echo '<div
class="accordion ';
echo LR\Filters::escapeHtmlAttr($class ?? '') /* line 10 */;
echo LR\Filters::escapeHtmlAttr($class ?? '') /* line 20 */;
echo '"
';
if ($collapse_siblings ?? false) /* line 11 */ {
if ($collapse_siblings ?? false) /* line 21 */ {
echo ' data-collapse-siblings
';
}
echo ' data-duration="';
echo LR\Filters::escapeHtmlAttr(!empty($duration) ? $duration : '300') /* line 14 */;
echo LR\Filters::escapeHtmlAttr(!empty($duration) ? $duration : '300') /* line 24 */;
echo '"
';
if (!empty($easing)) /* line 16 */ {
if (!empty($easing)) /* line 26 */ {
echo ' data-easing="';
echo LR\Filters::escapeHtmlAttr($easing) /* line 17 */;
echo LR\Filters::escapeHtmlAttr($easing) /* line 27 */;
echo '"
';
}
echo '>
';
$iterations = 0;
foreach ($iterator = $ʟ_it = new LR\CachingIterator($items, $ʟ_it ?? null) as $index => $item) /* line 21 */ {
$is_initially_open = isset($initially_open_item) && $index === $initially_open_item /* line 22 */;
$aria_label_text = !empty($aria_label) ? $aria_label : 'Toggle Accordion Item' /* line 23 */;
foreach ($iterator = $ʟ_it = new LR\CachingIterator($items, $ʟ_it ?? null) as $index => $item) /* line 31 */ {
$is_initially_open = isset($initially_open_item) && $index === $initially_open_item /* line 32 */;
$aria_label_text = !empty($aria_label) ? $aria_label : 'Toggle Accordion Item' /* line 33 */;
echo '
<div
class="collapsible"
';
if ($is_initially_open) /* line 27 */ {
if ($is_initially_open) /* line 37 */ {
echo ' data-initially-open
';
}
echo ' >
<button
class="collapsible__trigger"
type="button"
id="acc_panel_';
echo LR\Filters::escapeHtmlAttr($panels_ids[$index]) /* line 44 */;
echo '"
aria-label="';
echo LR\Filters::escapeHtmlAttr($aria_label_text) /* line 34 */;
echo LR\Filters::escapeHtmlAttr($aria_label_text) /* line 45 */;
echo '"
>
';
$this->renderBlock('acc_trigger', get_defined_vars()) /* line 36 */;
$this->renderBlock('acc_trigger', get_defined_vars()) /* line 47 */;
echo '
<span class="chevron"></span>
</button>
<div class="collapsible__content">
<div
class="collapsible__content"
role="region"
aria-labelledby="acc_panel_';
echo LR\Filters::escapeHtmlAttr($panels_ids[$index]) /* line 54 */;
echo '"
>
<div class="collapsible__content__inner">
';
$this->renderBlock('acc_content', get_defined_vars()) /* line 42 */;
$this->renderBlock('acc_content', get_defined_vars()) /* line 57 */;
echo '
</div>
</div>
Expand All @@ -86,22 +107,22 @@ public function prepare(): void
{
extract($this->params);
if (!$this->getReferringTemplate() || $this->getReferenceType() === "extends") {
foreach (array_intersect_key(['index' => '21', 'item' => '21'], $this->params) as $ʟ_v => $ʟ_l) {
foreach (array_intersect_key(['acc_index' => '14', 'tab_content' => '14', 'index' => '31', 'item' => '31'], $this->params) as $ʟ_v => $ʟ_l) {
trigger_error("Variable \$$ʟ_v overwritten in foreach on line $ʟ_l");
}
}

}


/** {block acc_trigger} on line 36 */
/** {block acc_trigger} on line 47 */
public function blockAcc_trigger(array $ʟ_args): void
{

}


/** {block acc_content} on line 42 */
/** {block acc_content} on line 57 */
public function blockAcc_content(array $ʟ_args): void
{

Expand Down
4 changes: 2 additions & 2 deletions views/temp/views-parts-_collapsibles.latte--7b10b89549.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ class="f-row"
echo '
</div>
<div class="col">
<h4>1 Level - independed</h4>
<h4>1 Level - independent</h4>
';
$this->enterBlockLayer(3, get_defined_vars()) /* line 76 */;
if (false) {
Expand Down Expand Up @@ -325,7 +325,7 @@ class="f-row"
style="--i-cols: 3; --i-gap: 15; margin-bottom: 200px;"
>
<div class="col">
<h5>Custom Easing:</h5>
<h5>Custom Easing</h5>
';
$this->enterBlockLayer(11, get_defined_vars()) /* line 358 */;
if (false) {
Expand Down
Loading

0 comments on commit e24af83

Please sign in to comment.