Skip to content

GitLab

Unverified Commit 5bec7e37 authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub
Browse files

feature: vf-tabs `deeplinks (#1708) 

Support activation of specific vf-tabs on page load `#vf-tabs__section=tab_id`

This feature is not designed with `vf-location-nearest` compatibility.

https://github.com/visual-framework/vf-core/issues/1700
parent 0b8097b8
Pipeline #206666 failed with stages
in 2 minutes and 28 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 163 additions and 90 deletions
components/vf-tabs/CHANGELOG.md
View file @ 5bec7e37
### 2.1.0
* Support activation of specific vf-tabs on page load `#vf-tabs__section=tab_id`
* Exposes `vfTabsSwitch` function
* https://github.com/visual-framework/vf-core/issues/1700
### 2.0.3
* Use `set-type` mixin to set margins.
......
components/vf-tabs/README.md
View file @ 5bec7e37
......@@ -12,6 +12,19 @@ These tabs have been made with accessibility in mind, however tabs should be avo
Nested tabs are also possible, as demonstrated in the example, however this provides further usability challenges and should be strongly avoided.
### Deep linking
A tab can be activated on page load by passing it on the link `#vf-tabs__section-tab_id`
This is the default behaviour and can be deactivated when invoking vfTabs:
```js
// vfTabs(scope, activateDeepLinkOnLoad)
vfTabs(document, false);
```
Note: The deep linking feature is not designed with `vf-location-nearest` compatibility. A `vf-location-nearest` tab may not respect a deep linked hash url.
## Install
This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-tabs` with this command.
......
components/vf-tabs/vf-tabs.config.yml
View file @ 5bec7e37
......@@ -4,47 +4,76 @@ status: live
context:
exampleMultiColumns: "false"
component-type: block
tabs:
- tab_title: Section
tab_number: 1
tab_heading: Section 1
tab_content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod, tortor nec pharetra ultricies, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a class="vf-link" href="#">Nam luctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan.
- tab_title: A Short Section
tab_number: 2
tab_heading: Section 2
tab_content: Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper, eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat tellus.
- tab_title: A Rather Long Section
tab_number: 3
tab_heading: Section 3
tab_content: Phasellus ac tristique orci. Nulla maximus <a class="vf-link" href="#">justo nec dignissim consequat</a>. Sed vehicula diam sit amet mi efficitur vehicula in in nisl. Aliquam erat volutpat. Suspendisse lorem turpis, accumsan consequat consectetur gravida, <a class="vf-link" href="#">pellentesque ac ante</a>. Aliquam in commodo ligula, sit amet mollis neque. Vestibulum at facilisis massa.
- tab_title: Nested Tabs
tab_heading: Section 4
tab_number: 4
tab_content: >
<div class="vf-tabs">
<ul class="vf-tabs__list" data-vf-js-tabs>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="#vf-tabs__section-nested--1">Nested tab 1</a>
</li>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="#vf-tabs__section-nested--2">Nested tab 2</a>
</li>
</ul>
</div>
<div class="vf-tabs-content" data-vf-js-tabs-content>
<section class="vf-tabs__section" id="vf-tabs__section-nested--1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod, tortor nec pharetra ultricies, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a href="#">Nam luctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan.</p>
</section>
<section class="vf-tabs__section" id="vf-tabs__section-nested--2">
<p>Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper, eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat tellus.</p>
</section>
</div>
- tab_title: A fifth section
tab_number: 5
tab_heading: Section 5
tab_content: Phasellus ac tristique orci. Nulla maximus <a class="vf-link" href="#">justo nec dignissim consequat</a>. Sed vehicula diam sit amet mi efficitur vehicula in in nisl. Aliquam erat volutpat. Suspendisse lorem turpis, accumsan consequat consectetur gravida, <a class="vf-link" href="#">pellentesque ac ante</a>. Aliquam in commodo ligula, sit amet mollis neque. Vestibulum at facilisis massa.
- tab_title: A sixth section
tab_number: 6
tab_heading: Section 6
tab_content: Phasellus ac tristique orci. Nulla maximus <a class="vf-link" href="#">justo nec dignissim consequat</a>. Sed vehicula diam sit amet mi efficitur vehicula in in nisl. Aliquam erat volutpat. Suspendisse lorem turpis, accumsan consequat consectetur gravida, <a class="vf-link" href="#">pellentesque ac ante</a>. Aliquam in commodo ligula, sit amet mollis neque. Vestibulum at facilisis massa.
variants:
- name: default
hidden: false
context:
tabs:
- tab_title: Section
tab_number: 1
tab_heading: Section 1
tab_content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod, tortor nec pharetra ultricies, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a class="vf-link" href="#">Nam luctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan.
- tab_title: A Short Section
tab_number: 2
tab_heading: Section 2
tab_content: Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper, eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat tellus.
- name: nested
context:
isExample: true
tabs:
- tab_title: Section
tab_number: 58
tab_heading: Section 1
tab_content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod, tortor nec pharetra ultricies, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a class="vf-link" href="#">Nam luctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan.
- tab_title: A Short Section
tab_number: 546
tab_heading: Section 2
tab_content: Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper, eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat tellus.
- tab_title: A Rather Long Section
tab_number: 878
tab_heading: Section 3
tab_content: Phasellus ac tristique orci. Nulla maximus <a class="vf-link" href="#">justo nec dignissim consequat</a>. Sed vehicula diam sit amet mi efficitur vehicula in in nisl. Aliquam erat volutpat. Suspendisse lorem turpis, accumsan consequat consectetur gravida, <a class="vf-link" href="#">pellentesque ac ante</a>. Aliquam in commodo ligula, sit amet mollis neque. Vestibulum at facilisis massa.
- tab_title: Nested Tabs
tab_heading: Section 4
tab_number: 8793456
tab_content: >
<div class="vf-tabs">
<ul class="vf-tabs__list" data-vf-js-tabs>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="#vf-tabs__section-nested--234548">Nested tab 1</a>
</li>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="#vf-tabs__section-nested--29974">Nested tab 2</a>
</li>
</ul>
</div>
<div class="vf-tabs-content" data-vf-js-tabs-content>
<section class="vf-tabs__section" id="vf-tabs__section-nested--234548">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod, tortor nec pharetra ultricies, ante erat imperdiet velit, nec laoreet enim lacus a velit. <a href="#">Nam luctus</a>, enim in interdum condimentum, nisl diam iaculis lorem, vel volutpat mi leo sit amet lectus. Praesent non odio bibendum magna bibendum accumsan.</p>
</section>
<section class="vf-tabs__section" id="vf-tabs__section-nested--29974">
<p>Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper, eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat tellus.</p>
</section>
</div>
- tab_title: A fifth section
tab_number: 545541
tab_heading: Section 5
tab_content: Phasellus ac tristique orci. Nulla maximus <a class="vf-link" href="#">justo nec dignissim consequat</a>. Sed vehicula diam sit amet mi efficitur vehicula in in nisl. Aliquam erat volutpat. Suspendisse lorem turpis, accumsan consequat consectetur gravida, <a class="vf-link" href="#">pellentesque ac ante</a>. Aliquam in commodo ligula, sit amet mollis neque. Vestibulum at facilisis massa.
- tab_title: A sixth section
tab_number: 621211
tab_heading: Section 6
tab_content: Phasellus ac tristique orci. Nulla maximus <a class="vf-link" href="#">justo nec dignissim consequat</a>. Sed vehicula diam sit amet mi efficitur vehicula in in nisl. Aliquam erat volutpat. Suspendisse lorem turpis, accumsan consequat consectetur gravida, <a class="vf-link" href="#">pellentesque ac ante</a>. Aliquam in commodo ligula, sit amet mollis neque. Vestibulum at facilisis massa.
- name: deep link
context:
isExample: true
tabs:
- tab_title: Section
tab_number: 99999
tab_heading: Default
tab_content: An <a href="#vf-tabs__section-88888">example deep link</a> loading this anchore will directly activate the neighbouring tab. <code>/vf-tabs#vf-tabs__section-88888</code>
- tab_title: A Short Section
tab_number: 88888
tab_heading: Deep-linked tab
tab_content: If you see me on page load, the deep link has worked.
components/vf-tabs/vf-tabs.js
View file @ 5bec7e37
......@@ -3,63 +3,28 @@
/**
* Finds all tabs on a page and activates them
* @param {object} [scope] - the html scope to process, optional, defaults to `document`
* @param {boolean} [activateDeepLinkOnLoad] - if deep linked tabs should be activated on page load, defaults to true
* @example vfTabs(document.querySelectorAll('.vf-component__container')[0]);
*/
function vfTabs(scope) {
function vfTabs(scope, activateDeepLinkOnLoad) {
/* eslint-disable no-redeclare */
var scope = scope || document;
var activateDeepLinkOnLoad = activateDeepLinkOnLoad || true;
/* eslint-enable no-redeclare */
// Get relevant elements and collections
const tablist = scope.querySelectorAll("[data-vf-js-tabs]");
const tabsList = scope.querySelectorAll("[data-vf-js-tabs]");
const panelsList = scope.querySelectorAll("[data-vf-js-tabs-content]");
const panels = scope.querySelectorAll("[data-vf-js-tabs-content] [id^=\"vf-tabs__section\"]");
const tabs = scope.querySelectorAll("[data-vf-js-tabs] .vf-tabs__link");
if (!tablist || !panels || !tabs) {
if (!tabsList || !panels || !tabs) {
// exit: either tabs or tabbed content not found
return;
}
if (tablist.length == 0 || panels.length == 0 || tabs.length == 0) {
if (tabsList.length == 0 || panels.length == 0 || tabs.length == 0) {
// exit: either tabs or tabbed content not found
return;
}
// The tab switching function
const switchTab = (newTab) => {
// get the parent ul of the clicked tab
let parentTabSet = newTab.closest(".vf-tabs__list");
let oldTab = parentTabSet.querySelector("[aria-selected]");
if (oldTab) {
oldTab.removeAttribute("aria-selected");
oldTab.setAttribute("tabindex", "-1");
oldTab.classList.remove("is-active");
for (let item = 0; item < panels.length; item++) {
const panel = panels[item];
if (panel.id === oldTab.id){
panel.hidden = true;
break;
}
}
}
newTab.focus({preventScroll:true});
// Make the active tab focusable by the user (Tab key)
newTab.removeAttribute("tabindex");
// Set the selected state
newTab.setAttribute("aria-selected", "true");
newTab.classList.add("is-active");
// Get the indices of the new tab to find the correct
// tab panel to show
for (let item = 0; item < panels.length; item++) {
const panel = panels[item];
if (panel.id === newTab.id){
panel.hidden = false;
break;
}
}
};
// Add semantics are remove user focusability for each tab
Array.prototype.forEach.call(tabs, (tab, i) => {
const tabId = tab.href.split("#")[1]; // calculate an ID based off the tab href (todo: add support for a data-vf-js-tab-id, and if set use that)
......@@ -77,7 +42,7 @@ function vfTabs(scope) {
// Handle clicking of tabs for mouse users
tab.addEventListener("click", e => {
e.preventDefault();
switchTab(e.currentTarget);
vfTabsSwitch(e.currentTarget, panels);
});
// Handle keydown events for keyboard users
......@@ -91,7 +56,7 @@ function vfTabs(scope) {
e.preventDefault();
// If the down key is pressed, move focus to the open panel,
// otherwise switch to the adjacent tab
dir === "down" ? panels[i].focus({preventScroll:true}) : tabs[dir] ? switchTab(tabs[dir]) : void 0;
dir === "down" ? panels[i].focus({preventScroll:true}) : tabs[dir] ? vfTabsSwitch(tabs[dir], panels) : void 0;
}
});
});
......@@ -105,11 +70,11 @@ function vfTabs(scope) {
panel.hidden = true;
});
// Add the tablist role to the first <ul> in the .tabbed container
Array.prototype.forEach.call(tablist, (tablistset) => {
tablistset.setAttribute("role", "tablist");
// Add the tabsList role to the first <ul> in the .tabbed container
Array.prototype.forEach.call(tabsList, (tabsListset) => {
tabsListset.setAttribute("role", "tabsList");
// Initially activate the first tab
let firstTab = tablistset.querySelectorAll(".vf-tabs__link")[0];
let firstTab = tabsListset.querySelectorAll(".vf-tabs__link")[0];
firstTab.removeAttribute("tabindex");
firstTab.setAttribute("aria-selected", "true");
firstTab.classList.add("is-active");
......@@ -119,6 +84,66 @@ function vfTabs(scope) {
let firstPanel = panel.querySelectorAll(".vf-tabs__section")[0];
firstPanel.hidden = false;
});
// activate any deeplinks to a specific tab
if (activateDeepLinkOnLoad) {
vfTabsDeepLinkOnLoad(tabs, panels);
}
}
// The tab switching function
const vfTabsSwitch = (newTab, panels) => {
// get the parent ul of the clicked tab
let parentTabSet = newTab.closest(".vf-tabs__list");
let oldTab = parentTabSet.querySelector("[aria-selected]");
if (oldTab) {
oldTab.removeAttribute("aria-selected");
oldTab.setAttribute("tabindex", "-1");
oldTab.classList.remove("is-active");
for (let item = 0; item < panels.length; item++) {
const panel = panels[item];
if (panel.id === oldTab.id){
panel.hidden = true;
break;
}
}
}
newTab.focus({preventScroll:true});
// Make the active tab focusable by the user (Tab key)
newTab.removeAttribute("tabindex");
// Set the selected state
newTab.setAttribute("aria-selected", "true");
newTab.classList.add("is-active");
// Get the indices of the new tab to find the correct
// tab panel to show
for (let item = 0; item < panels.length; item++) {
const panel = panels[item];
if (panel.id === newTab.id){
panel.hidden = false;
break;
}
}
};
function vfTabsDeepLinkOnLoad(tabs, panels) {
// 1. See if there is a `#vf-tabs__section--88888`
if(window.location.hash) {
var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
} else {
// No hash found
return false;
}
console.log("vfTabs: will activate tab", hash);
// 2. loop through all tabs, if a match then activate
Array.prototype.forEach.call(tabs, (tab) => {
let tabId = tab.getAttribute("data-tabs__item");
if (tabId == hash) {
vfTabsSwitch(tab, panels);
}
});
}
export { vfTabs };
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