<!-- QuickInfo -->
<div class="quickinfo">
<div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-882467-content" id="id-882467-title"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-24e9d1-title">
<title id="icon-24e9d1-title">Schnellinfo zeigen</title>
<use xlink:href="#icon-plus"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-882467-content" aria-labelledby="id-882467-title">
<div class="quickinfo__content" tabindex="-1">
<div class="quickinfo__content-inner">
<div class="quickinfo__block" id="c15210">
<h3 class="headline headline--module-3">Ich bin eine Headline für eine Zusatzinfo</h3>
</div>
<div class="quickinfo__block" id="c15211">
<p class="bodytext"><strong>Ich bin eine Zwischenheadline</strong><br />Lorem ipsum dolor sit amet, consetetur sadipscing elitrvero consetetur sadipscing elitr, sed diam nonumy Textlink invidunt ut dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
</div>
<div class="quickinfo__block" id="c15212">
<figure class="figure" aria-labelledby="figure-a90174-label">
<div class="figure__media">
<div class="image loading" style="padding-top: 56.25%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="640" height="360" src="https://via.placeholder.com/640x360/A0A0A6/FFFFFF.png?text=640x360" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="640" height="360" data-src="https://via.placeholder.com/640x360/A0A0A6/FFFFFF.png?text=640x360" /></div>
</div>
<figcaption class="figure__caption" id="figure-a90174-label"><span class="figure__caption__text">Ich bin eine Bildunterschrift</span><span class="figure__caption__copyright">(Foto: Name Agentur)</span></figcaption>
</figure>
</div>
<div class="quickinfo__block" id="c15213"><a class="link link--download" href="#" target="_blank">Download (PDF, 1.3MB)</a></div>
<div class="quickinfo__block" id="c15215"><a class="button button--primary" href="#"><span class="button__inner"><svg class="icon icon--ticket" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-ticket"></use>
</svg><span class="button__text">Button-Text</span></span></a></div><button class="icon-button quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-6dd9e4-title">
<title id="icon-6dd9e4-title">Schnellinfo schließen</title>
<use xlink:href="#icon-close"></use>
</svg></button>
</div>
</div>
</article>
</div>
<!-- QuickInfo Contact -->
<div class="quickinfo">
<div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-5771cd-content" id="id-5771cd-title"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-622a32-title">
<title id="icon-622a32-title">Schnellinfo zeigen</title>
<use xlink:href="#icon-plus"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-5771cd-content" aria-labelledby="id-5771cd-title">
<div class="quickinfo__content" tabindex="-1">
<div class="quickinfo__content-inner">
<div class="quickinfo__block" id="c15210">
<h3 class="headline headline--module-3">Ansprechpartner</h3>
</div>
<div class="quickinfo__block" id="c15211">
<div class="contact">
<div class="contact__image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="400" height="400" src="https://via.placeholder.com/400x400/A0A0A6/FFFFFF.png?text=400x400" /></noscript><img class="image__img js-lazyload" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="400" height="400" data-src="https://via.placeholder.com/400x400/A0A0A6/FFFFFF.png?text=400x400" /></div>
</div>
<div class="contact__text">
<div class="contact__name">Dr. Andreas Kosmider</div>
<div class="contact__position">Bereichsleiter Strategische Initiativen <br />Helmholtz-Gemeinschaft</div>
<div class="contact__details">
<div class="contact__details__item"><svg class="icon icon--mail" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg><span class="contact__details__item__text"><a href="mailto:andreas.kosmider@helmholtz.de">andreas.kosmider@helmholtz.de</a></span></div>
<div class="contact__details__item"><svg class="icon icon--phone" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-phone"></use>
</svg><span class="contact__details__item__text"><a href="tel:+4930206329660">+49 30 206329-660</a></span></div>
<div class="contact__details__item"><svg class="icon icon--location" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-location"></use>
</svg><span class="contact__details__item__text">Helmholtz-Gemeinschaft, Anna-Louisa-Karsch-Straße 2, 10178 Berlin</span></div>
</div>
</div>
</div>
</div><button class="icon-button quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-eea742-title">
<title id="icon-eea742-title">Schnellinfo schließen</title>
<use xlink:href="#icon-close"></use>
</svg></button>
</div>
</div>
</article>
</div>
- var id = id || `id-${randomString()}`;
#{tag || 'div'}.quickinfo&attributes(attr)
.quickinfo__button-wrap
if buttonText
span.quickinfo__button-text(aria-hidden='true') #{buttonText}
+include('@icon-button', _.merge(iconButton, {
icon: iconButton.icon || 'plus',
iconTitle: iconTitle || 'Schnellinfo zeigen',
attr: {
class: 'quickinfo__button',
'aria-expanded': 'false',
'aria-controls': `${id}-content`,
id: `${id}-title`,
}
}), false)
article.quickinfo__panel(id=`${id}-content`, aria-labelledby=`${id}-title`): .quickinfo__content(tabindex='-1')
.quickinfo__content-inner
if blocks
each block in blocks
#{block.tag || 'div'}.quickinfo__block(
id=block.id,
)
+include(`@${block.use}`, block.settings || {}, block.inherit || false)
+include('@icon-button', {
type: 'button',
icon: 'close',
iconTitle: 'Schnellinfo schließen',
attr: {
class: 'quickinfo__close'
}
})
/* QuickInfo */
{
"iconButton": {
"icon": "plus"
},
"blocks": [
{
"use": "headline--module-3",
"id": "c15210",
"inherit": true,
"settings": {
"text": "Ich bin eine Headline für eine Zusatzinfo"
}
},
{
"use": "paragraph",
"id": "c15211",
"inherit": true,
"settings": {
"text": "<strong>Ich bin eine Zwischenheadline</strong><br />Lorem ipsum dolor sit amet, consetetur sadipscing elitrvero consetetur sadipscing elitr, sed diam nonumy Textlink invidunt ut dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.\n"
}
},
{
"use": "figure",
"id": "c15212",
"inherit": true,
"settings": {
"image": {
"src": "https://via.placeholder.com/640x360/A0A0A6/FFFFFF.png?text=640x360",
"width": 640,
"height": 360
},
"caption": {
"text": "Ich bin eine Bildunterschrift",
"copyright": "(Foto: Name Agentur)"
}
}
},
{
"use": "link--download",
"id": "c15213",
"inherit": true,
"settings": {
"text": "Download (PDF, 1.3MB)"
}
},
{
"use": "button--icon",
"id": "c15215",
"inherit": true,
"settings": {
"text": "Button-Text"
}
}
]
}
/* QuickInfo Contact */
{
"iconButton": {
"icon": "plus"
},
"blocks": [
{
"use": "headline--module-3",
"id": "c15210",
"inherit": true,
"settings": {
"text": "Ansprechpartner"
}
},
{
"use": "contact",
"id": "c15211",
"inherit": true
}
]
}
import focusTrap from 'focus-trap';
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
export default class Quickinfo {
constructor($quickinfo) {
this.$el = $quickinfo;
this.$button = $quickinfo.querySelector('.quickinfo__button');
this.$panel = document.getElementById(this.$button.getAttribute('aria-controls'));
this.$panelContent = this.$panel.querySelector('.quickinfo__content');
this.$closeButton = this.$panel.querySelector('.quickinfo__close');
this.$mainTemplate = document.querySelector('#page');
// Binded events
this.bindedClick = this.toggle.bind(this);
this.bindedPanelClick = this.panelClick.bind(this);
this.bindedCloseClick = this.closePanel.bind(this);
this.onKeydownBinded = this.onKeydown.bind(this);
this.$button.addEventListener('click', this.bindedClick);
this.$closeButton.addEventListener('click', this.bindedCloseClick);
this.DOMrepositionQuickinfo();
// Init focus trap
this.focusTrap = focusTrap(this.$panel, {
escapeDeactivates: false,
clickOutsideDeactivates: true,
initialFocus: this.$closeButton,
});
}
DOMrepositionQuickinfo() {
document.body.appendChild(this.$panel);
}
toggle(event) {
event.preventDefault();
// Get current state of panel
const isClosed = this.$button.getAttribute('aria-expanded') !== 'true';
// Switch state
if (isClosed) {
this.openPanel();
} else {
this.closePanel();
}
}
onKeydown(event) {
// Close menu on ESC
if (event.keyCode === 27) {
event.preventDefault();
this.closePanel();
}
}
panelClick(event) {
if (event.target.closest('.quickinfo__content')) return;
this.closePanel();
}
closePanel(event) {
if (event) {
event.preventDefault();
}
// Change toggle button
this.$button.setAttribute('aria-expanded', 'false');
// Close Panel
this.$panel.classList.remove('quickinfo__panel--open');
// Main contents back to the left
this.$mainTemplate.removeAttribute('style');
// Remove keydown from body
document.body.removeEventListener('keydown', this.onKeydownBinded);
this.$panel.removeEventListener('click', this.bindedPanelClick);
this.$closeButton.removeEventListener('click', this.bindedCloseClick);
// Disable focus trap
if (this.focusTrap) {
this.focusTrap.deactivate();
}
// Re-enable scrolling
enableBodyScroll(this.$panel);
clearAllBodyScrollLocks();
}
openPanel() {
// Change toggle button
this.$button.setAttribute('aria-expanded', 'true');
// Push main contents to the right
this.$mainTemplate.style.transform = 'translateX(72rem)';
// Show panel
this.$panel.classList.add('quickinfo__panel--open');
// Add keydown to body
document.body.addEventListener('keydown', this.onKeydownBinded);
this.$panel.addEventListener('click', this.bindedPanelClick);
this.$closeButton.addEventListener('click', this.bindedCloseClick);
// Disable scrolling
disableBodyScroll(this.$panel);
// Enable focus trap
this.focusTrap.activate();
}
}
// Discipline Selector toggle button
document.querySelectorAll('.quickinfo').forEach($element => new Quickinfo($element));
.quickinfo__button-wrap {
align-items: center;
display: flex;
}
.quickinfo__button-text {
margin-right: 1.5rem;
}
.quickinfo__panel {
background-color: rgba(#000, 0);
bottom: 0;
color: $color-dark;
height: 100%;
left: 0;
overflow: hidden;
pointer-events: none;
position: fixed;
right: 0;
text-align: left;
top: 0;
transition-property: background-color;
width: 100vw;
z-index: z('quickinfo');
}
.quickinfo__panel--open {
background-color: rgba(#000, 0.5);
overflow-x: hidden;
overflow-y: scroll;
pointer-events: all;
}
.quickinfo__content {
background-color: #fff;
min-height: 100vh;
position: relative;
transform: translateX(-100%);
transition-property: transform;
width: 100%;
.quickinfo__panel--open & {
transform: translateX(0);
}
@include mq($from: m) {
max-width: 72rem;
}
}
.quickinfo__content-inner {
padding-top: 8rem;
}
.quickinfo__block {
padding: 0 2rem 4rem;
@include mq($from: m) {
padding: 0 4rem 4rem;
}
}
.quickinfo__close {
color: $color-dark;
position: absolute;
right: 2rem;
top: 2rem;
.icon-button__icon {
height: 4rem;
width: 4rem;
}
}
There are no notes for this item.