<div class="quickinfo">
<div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-3cf1f4-content" id="id-3cf1f4-title"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-ee1732-title">
<title id="icon-ee1732-title">Schnellinfo zeigen</title>
<use xlink:href="#icon-plus"></use>
</svg></button></div>
<article class="quickinfo__panel" id="id-3cf1f4-content" aria-labelledby="id-3cf1f4-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-8942e9-title">
<title id="icon-8942e9-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'
}
})
{
"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.