@e-fellows/website-2022

Copyright 

<div class="copyright">
    <button class="copyright__button" type="button" aria-label="Copyright-Informationen anzeigen" title="Copyright-Informationen anzeigen">
        <svg class="icon icon--copyright" viewBox="0 0 200 200" aria-hidden="true">
            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#copyright"></use>
        </svg> </button>

    <p class="copyright__tooltip" tabindex="0" hidden>
        <small>Das ist ein Copyright-Hinweis lorem ipsum dolor sit amet</small>
    </p>
</div>
 
<div {{ html_attributes({
  class: {
    'copyright': true,
  },
}, attrs ?? {}) }}>
  <button class="copyright__button" type="button" aria-label="{{ 'Show copyright information'|t('site') }}" title="{{ 'Show copyright information'|t('site') }}">
    {% include '@icon' with { icon: 'copyright' } only %}
  </button>

  <p class="copyright__tooltip" tabindex="0" hidden>
    <small>{{ text | componentize }}</small>
  </p>
</div>
 
{
  "text": "Das ist ein Copyright-Hinweis lorem ipsum dolor sit amet"
}
  • Content: 
    @keyframes show-copyright-tooltip {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.copyright {
  display: inline-block;
}

.copyright__button {
  align-items: center;
  background-color: var(--color-midnight);
  block-size: 2.7rem;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.5rem;
  inline-size: 2.7rem;
  justify-content: center;
  line-height: 0;
  transition-duration: var(--duration-fast);
  transition-property: background-color, color;
  user-select: none;
}

.copyright__tooltip {
  animation: show-copyright-tooltip var(--duration-default);
  background-color: var(--color-midnight);
  color: var(--color-white);
  font-size: 1.4rem;
  inline-size: 25rem;
  line-height: var(--line-height-small);
  padding: 1rem 1.5rem;
  position: absolute;
  text-align: start;
}
  • URL: /components/raw/copyright/copyright.scss
  • Filesystem Path: src/components/1-atoms/copyright/copyright.scss
  • Size: 832 Bytes
  • Content: 
    import { createFocusTrap, FocusTrap } from 'focus-trap';
import { on } from 'delegated-events';
import { Instance } from '@popperjs/core';
import invisibleFocus from '../../../javascripts/utils/invisibleFocus';
import createPopper from '../../../javascripts/utils/createPopper';

let focusTrap: FocusTrap;
let popper: Instance;

on('click', 'button.copyright__button', (event) => {
  const { currentTarget: $button } = event;
  const $parent = $button.closest<HTMLDivElement>('.copyright');
  const $tooltip = $parent?.querySelector<HTMLDivElement>(
    '.copyright__tooltip',
  );

  if ($parent && $tooltip) {
    event.preventDefault();

    if (!$tooltip.hidden) {
      focusTrap?.deactivate();
    } else {
      $tooltip.hidden = false;

      popper = createPopper($button, $tooltip, {
        placement: 'top-end',
        strategy: 'fixed',
        modifiers: [
          {
            name: 'offset',
            options: {
              offset: [0, -1],
            },
          },
        ],
      });

      focusTrap = createFocusTrap($parent, {
        onDeactivate() {
          $tooltip.hidden = true;
          popper?.destroy();
          invisibleFocus($button);
        },
        initialFocus: '.copyright__tooltip',
        clickOutsideDeactivates: true,
        returnFocusOnDeactivate: false,
        preventScroll: false,
      });

      focusTrap.activate();
    }
  }
});
  • URL: /components/raw/copyright/copyright.ts
  • Filesystem Path: src/components/1-atoms/copyright/copyright.ts
  • Size: 1.4 KB

No notes defined.