No notes defined.
<div class="tabbedContent">
<nav class="tabbedContent-nav">
<div class="tabBar" role="tablist">
<div class="tabBar-items">
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-1" id="tabBar-sample-option-id-1-contoller" aria-controls="tabBar-sample-option-id-1" role="tab" aria-selected="true" tabindex="-1">
<span class="tab-label">Erste Option</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-2" id="tabBar-sample-option-id-2-contoller" aria-controls="tabBar-sample-option-id-2" role="tab" aria-selected="false">
<span class="tab-label">Mit Richtext</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-3" id="tabBar-sample-option-id-3-contoller" aria-controls="tabBar-sample-option-id-3" role="tab" aria-selected="false">
<span class="tab-label">Mit Tabelle</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-4" id="tabBar-sample-option-id-4-contoller" aria-controls="tabBar-sample-option-id-4" role="tab" aria-selected="false">
<span class="tab-label">Mit Bild</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-5" id="tabBar-sample-option-id-5-contoller" aria-controls="tabBar-sample-option-id-5" role="tab" aria-selected="false">
<span class="tab-label">Mehrere Textblöcke</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="false" aria-disabled="true">
<span class="tab-label">Nicht verfügbar</span>
</a>
</div>
</div>
</div>
</nav>
<div class="tabbedContent-items">
<div class="tabbedContent-item" data-selected="true" id="tabBar-sample-option-id-1" role="tabpanel" aria-labelledby="tabBar-sample-option-id-1-contoller">
<div class="tabbedContent-content">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="tabbedContent-item" id="tabBar-sample-option-id-2" role="tabpanel" aria-labelledby="tabBar-sample-option-id-2-contoller">
<div class="tabbedContent-content">
<h3>Ich bin eine Headline</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="tabbedContent-item" id="tabBar-sample-option-id-3" role="tabpanel" aria-labelledby="tabBar-sample-option-id-3-contoller">
<table class="table" data-highlight=" ">
<caption class="table-caption">Table Caption</caption>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
</table>
<div class="tabbedContent-content">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="tabbedContent-item" id="tabBar-sample-option-id-4" role="tabpanel" aria-labelledby="tabBar-sample-option-id-4-contoller">
<div class="tabbedContent-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="tabbedContent-content">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="tabbedContent-content">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="tabbedContent-item" id="tabBar-sample-option-id-5" role="tabpanel" aria-labelledby="tabBar-sample-option-id-5-contoller">
<div class="tabbedContent-content">
<h3>Ich bin eine Headline</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="tabbedContent-content">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</div>
</div>
<div class="tabbedContent{{#modifier}} {{.}}{{/modifier}}">
<nav class="tabbedContent-nav">
{{#tabbar}}
{{render '@tabbar' (contextData '@tabbedcontent' this) merge=true}}
{{/tabbar}}
</nav>
<div class="tabbedContent-items">
{{#items}}
<div class="tabbedContent-item" {{#if is-selected}} data-selected="true"{{/if}}id="{{id}}" role="tabpanel" aria-labelledby="{{id}}-contoller">
{{#figure}}
<div class="tabbedContent-image">
{{render '@figure' (contextData '@tabbedcontent' this) merge=true}}
</div>
{{/figure}}
{{#table}}
{{render '@table' (contextData '@tabbedcontent' this) merge=true}}
{{/table}}
{{#content}}
<div class="tabbedContent-content">
{{{.}}}
</div>
{{/content}}
</div>
{{/items}}
</div>
</div>
{
"tabbar": {
"items": [
{
"tab": {
"is-selected": true,
"controls-id": "tabBar-sample-option-id-1",
"label": "Erste Option"
}
},
{
"tab": {
"controls-id": "tabBar-sample-option-id-2",
"label": "Mit Richtext"
}
},
{
"tab": {
"controls-id": "tabBar-sample-option-id-3",
"label": "Mit Tabelle"
}
},
{
"tab": {
"controls-id": "tabBar-sample-option-id-4",
"label": "Mit Bild"
}
},
{
"tab": {
"controls-id": "tabBar-sample-option-id-5",
"label": "Mehrere Textblöcke"
}
},
{
"tab": {
"is-disabled": true,
"label": "Nicht verfügbar"
}
}
]
},
"items": [
{
"id": "tabBar-sample-option-id-1",
"is-selected": true,
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"id": "tabBar-sample-option-id-2",
"content": "<h3>Ich bin eine Headline</h3>\n<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"id": "tabBar-sample-option-id-3",
"table": {
"caption": "Table Caption",
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
]
},
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
},
{
"id": "tabBar-sample-option-id-4",
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
},
"content": [
"<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
]
},
{
"id": "tabBar-sample-option-id-5",
"content": [
"<h3>Ich bin eine Headline</h3>\n<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
]
}
]
}
import tabbedContent from "./_tabbedContent.script";
tabbedContent.init({
// Customize settings here
});
export default (function (){
const defaults = {
selectors: {
container: ".tabbedContent",
trigger: ".tabbedContent-nav .tab",
content: ".tabbedContent-item",
},
durations: {
in: 150,
out: 300,
}
};
function init(options) {
const containers = document.querySelectorAll(defaults.selectors.container);
for (let i = 0; i < containers.length; i++) {
new TabbedContent(containers[i], options);
}
}
const TabbedContent = function(element, options) {
const triggers = element.querySelectorAll(defaults.selectors.trigger);
this.items = [];
for (let i = 0; i < triggers.length; i++) {
const revealer = new Revealer(triggers[i], this, options);
if (revealer) {
this.items.push(revealer);
}
}
}
TabbedContent.prototype.closeAll = function(callback) {
if (typeof callback !== "function") {
callback = () => {};
}
for (let i = 0; i < this.items.length; i++) {
this.items[i].close();
}
callback();
}
const Revealer = function(trigger, parent, options) {
this.settings = Object.assign({}, defaults, options);
this.trigger = trigger;
this.parent = parent;
if (this.trigger.getAttribute("aria-disabled") == "true") {
return;
}
// Get content by using attribute "aria-controls"
const id = this.trigger.getAttribute("aria-controls");
if (typeof id === "string") {
this.content = document.getElementById(id);
}
if (! this.content) {
console.warn(`TabbedContent: Target with id "${id}" not found.`);
return;
}
this.isOpen = false;
this.trigger.addEventListener(
"click",
(e) => {
e.preventDefault();
this.open();
}
);
return this;
}
Revealer.prototype.close = function() {
this.trigger.setAttribute("aria-selected", "false");
this.trigger.removeAttribute("tabindex");
if (this.content) {
this.content.setAttribute("data-selected", "false");
this.content.setAttribute("inert", "");
}
}
Revealer.prototype.open = function() {
if (this.isOpen) {
return;
}
this.parent.closeAll(
() => {
this.trigger.setAttribute("aria-selected", "true");
this.trigger.setAttribute("tabindex", "-1");
if (typeof this.content === "object") {
this.content.setAttribute("data-selected", "true");
this.content.removeAttribute("inert");
}
}
);
}
return {
init: init,
}
})();
@import "_tabbedContent.styles";
%tabbedContent {
$border-radius: var(--br);
&-items {
border-bottom: var(--bw-large) solid $_accent-color;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
position: relative;
z-index: 1;
}
.tabBar-items {
padding-bottom: calc(#{$border-radius} + #{$tab_gap});
margin-bottom: calc(-1 * #{$border-radius});
}
.tab[aria-selected="true"] {
&::after {
height: calc(#{$tab_gap} + #{$border-radius});
}
}
.table-caption {
@extend %heading--subheading;
@include stack-spacing(0);
margin-bottom: var(--sp);
}
}
.tabbedContent {
&-image {
.figure {
@include stack-spacing(0);
}
}
&-content {
@extend %richtextBlock;
width: 100%;
> *:first-child {
@include stack-spacing(0);
}
& + & {
@include stack-spacing();
}
}
@include only-on-desktop(){
$gutter: var(--bp);
&-item {
display: flex;
flex-wrap: wrap;
column-gap: $gutter;
}
&-image,
&-image ~ &-content {
width: calc(50% - .5 * #{$gutter});
}
&-content + &-content {
width: 100%;
}
&-image + &-content {
@include stack-spacing(0);
}
}
.tableInset {
&:not(:first-child) {
@include stack-spacing();
}
.table {
width: 100%;
}
}
}
%tabbedContent {
@include stack-spacing(section);
.tabBar {
margin-top: 0;
}
&-items {
background-color: $tab_backdrop-color;
@include box-padding();
}
&-item {
overflow: hidden;
&:not([data-selected="true"]) {
height: 0;
}
> *:first-child {
margin-top: 0;
}
}
}
.tabbedContent {
@extend %tabbedContent;
&-items {
@extend %tabbedContent-items;
}
&-item {
@extend %tabbedContent-item;
}
}