Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(esl-tabs): fix iOS auto-scroll / arrow controls boundaries on iOS devices when touch-scroll is enabled #2061

Merged
merged 2 commits into from
Nov 22, 2023
Merged

fix(esl-tabs): fix iOS auto-scroll / arrow controls boundaries on iOS devices when touch-scroll is enabled #2061

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5845c3a
fix(esl-tabs): fix iOS auto-scroll / arrow controls boundaries on iOS…
ala-n Nov 20, 2023
eff6a23
Merge branch 'main' into fix/esl-tabs-ios
ala-n Nov 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
238 changes: 238 additions & 0 deletions pages/views/draft/tabs-scrollable.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
---
layout: content
title: Tabs Scrollable
seoTitle: Tabs UI examples based on ESL web components
name: Tabs Scrollable
tags: [draft]
icon: examples/tabs.svg
---
{% import 'lorem.njk' as lorem %}

<section>
<h2>Tabs (scrollable)</h2>
<p>Scrollable tabs component example</p>
{% code 'html', 'code-block' %}
<esl-tabs scrollable/>
<esl-panel-group mode="tabs"
mode-cls-target="::parent"/>
{% endcode %}

<div class="esl-d-tabs">
<esl-tabs class="esl-d-tab-control" scrollable>
<esl-a11y-group targets="::find(esl-tab)" activate-selected></esl-a11y-group>

<div class="arrow-prev" data-tab-direction="left">
<span class="icon-arrow-prev"></span>
</div>

<ul class="esl-d-tab-list esl-tab-container esl-scrollable-content" role="tablist">
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-1)">
Tab #1 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-2)">
Tab #2 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-3)">
Tab #3 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-4)">
Tab #4 Lorem ipsum
</esl-tab>
</li>
</ul>

<div class="arrow-next" data-tab-direction="right">
<span class="icon-arrow-next"></span>
</div>
</esl-tabs>

<esl-panel-group class="esl-d-tab-group"
mode="tabs"
mode-cls-target="::parent">
<esl-panel class="esl-d-tab-panel tab-1" tabindex="0">
<div class="esl-d-tab-body">
{{ lorem.paragraphs(2) }}
</div>
</esl-panel>
<esl-panel open class="esl-d-tab-panel tab-2" tabindex="0">
<div class="esl-d-tab-body">
{{ lorem.paragraphs(1) }}
</div>
</esl-panel>
<esl-panel class="esl-d-tab-panel tab-3" tabindex="0">
<div class="esl-d-tab-body">
{{ lorem.paragraphs(3) }}
</div>
</esl-panel>
<esl-panel class="esl-d-tab-panel tab-4" tabindex="0">
<div class="esl-d-tab-body">
{{ lorem.paragraphs(1) }}
</div>
</esl-panel>
</esl-panel-group>
</div>
</section>


<section>
<h2>Tabs (scrollable, scroll to center)</h2>
<p>Scrollable tabs (scroll to center) component example</p>
{% code 'html', 'code-block' %}
<esl-tabs scrollable="center"/>
<esl-panel-group mode="tabs"
mode-cls-target="::parent"/>
{% endcode %}

<div class="esl-d-tabs">
<esl-tabs class="esl-d-tab-control" scrollable="center">
<esl-a11y-group targets="::find(esl-tab)" activate-selected></esl-a11y-group>

<div class="arrow-prev" data-tab-direction="left">
<span class="icon-arrow-prev"></span>
</div>

<ul class="esl-d-tab-list esl-tab-container esl-scrollable-content" role="tablist">
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-1)">
Tab #1 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-2)">
Tab #2 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-3)">
Tab #3 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-4)">
Tab #4 Lorem ipsum
</esl-tab>
</li>
</ul>

<div class="arrow-next" data-tab-direction="right">
<span class="icon-arrow-next"></span>
</div>
</esl-tabs>

<esl-panel-group class="esl-d-tab-group"
mode="tabs"
mode-cls-target="::parent">
<esl-panel class="esl-d-tab-panel tab-1" tabindex="0">
<div class="esl-d-tab-body">
{{ lorem.paragraphs(2) }}
</div>
</esl-panel>
<esl-panel open class="esl-d-tab-panel tab-2" tabindex="0">
<div class="esl-d-tab-body">
{{ lorem.paragraphs(1) }}
</div>
</esl-panel>
<esl-panel class="esl-d-tab-panel tab-3" tabindex="0">
<div class="esl-d-tab-body">
{{ lorem.paragraphs(3) }}
</div>
</esl-panel>
<esl-panel class="esl-d-tab-panel tab-4" tabindex="0">
<div class="esl-d-tab-body">
{{ lorem.paragraphs(1) }}
</div>
</esl-panel>
</esl-panel-group>
</div>
</section>

<section>
<h2>Tabs (scrollable, center alignment, scroll to center)</h2>
<p>Scrollable tabs (scroll to center) component example</p>
{% code 'html', 'code-block' %}
<esl-tabs class="center-alignment" scrollable="center"/>
<esl-panel-group mode="tabs"
mode-cls-target="::parent"/>
{% endcode %}

<div class="esl-d-tabs">
<esl-tabs class="esl-d-tab-control center-alignment" scrollable="center">
<esl-a11y-group targets="::find(esl-tab)" activate-selected></esl-a11y-group>

<div class="arrow-prev" data-tab-direction="left">
<span class="icon-arrow-prev"></span>
</div>

<ul class="esl-d-tab-list esl-tab-container esl-scrollable-content" role="tablist">
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-1)">
Tab #1 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-2)">
Tab #2 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-3)">
Tab #3 Lorem ipsum
</esl-tab>
</li>
<li class="esl-d-tab-item">
<esl-tab class="h5"
target="::parent(.esl-d-tabs)::find(.tab-4)">
Tab #4 Lorem ipsum
</esl-tab>
</li>
</ul>

<div class="arrow-next" data-tab-direction="right">
<span class="icon-arrow-next"></span>
</div>
</esl-tabs>

<esl-panel-group class="esl-d-tab-group"
mode="tabs"
mode-cls-target="::parent">
<esl-panel class="esl-d-tab-panel tab-1" tabindex="0">
<div class="esl-d-tab-body">
{{ lorem.paragraphs(2) }}
</div>
</esl-panel>
<esl-panel open class="esl-d-tab-panel tab-2" tabindex="0">
<div class="esl-d-tab-body">
{{ lorem.paragraphs(1) }}
</div>
</esl-panel>
<esl-panel class="esl-d-tab-panel tab-3" tabindex="0">
<div class="esl-d-tab-body">
{{ lorem.paragraphs(3) }}
</div>
</esl-panel>
<esl-panel class="esl-d-tab-panel tab-4" tabindex="0">
<div class="esl-d-tab-body">
{{ lorem.paragraphs(1) }}
</div>
</esl-panel>
</esl-panel-group>
</div>
</section>
11 changes: 7 additions & 4 deletions src/modules/esl-tab/core/esl-tabs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,14 @@ export class ESLTabs extends ESLBaseElement {
public moveTo(direction: string, behavior: ScrollBehavior = 'smooth'): void {
const $scrollableTarget = this.$scrollableTarget;
if (!$scrollableTarget) return;
let left = $scrollableTarget.offsetWidth;
left = isRTL(this) && RTLScroll.type !== 'reverse' ? -left : left;
left = direction === 'left' ? -left : left;

$scrollableTarget.scrollBy({left, behavior});
const {offsetWidth, scrollWidth, scrollLeft} = $scrollableTarget;
const max = scrollWidth - offsetWidth;
const invert = direction === 'left' || (isRTL(this) && RTLScroll.type !== 'reverse');
const offset = invert ? -offsetWidth : offsetWidth;

const left = Math.max(0, Math.min(max, scrollLeft + offset));
$scrollableTarget.scrollTo({left, behavior});
}

/** Scroll tab to the view */
Expand Down