Figure: Bild

import h from 'hyperscript';
import PhotoSwipe from 'photoswipe';
import PhotoSwipeUiDefault from 'photoswipe/dist/photoswipe-ui-default';

import jumpStore from '../../../javascripts/shared/anchor-scroll-jump-store';
import icon from '../../../javascripts/utils/icon';

// Template for PhotoSwipe
const $photoswipeTemplate = h('.pswp', {
  attrs: {
    tabindex: '-1',
    role: 'dialog',
    'aria-hidden': 'true',
  },
}, h('.pswp__bg'), h('.pswp__scroll-wrap',
  h('.pswp__container',
    h('.pswp__item'),
    h('.pswp__item'),
    h('.pswp__item'),
  ),
  h('.pswp__ui.pswp__ui--hidden',
    h('.pswp__top-bar',
      h('.pswp__counter'),
      h('button.pswp__button.pswp__button--close', { title: 'Schließen (Esc)' }),
      h('button.pswp__button.pswp__button--fs', { title: 'Vollbild ein/aus' }),
      h('button.pswp__button.pswp__button--zoom', { title: 'Zoomen' }),
      h('.pswp__preloader',
        h('.pswp__preloader__icn',
          h('.pswp__preloader__cut',
            h('.pswp__preloader__donut'),
          ),
        ),
      ),
    ),
    h('button.pswp__button.pswp__button--arrow--left', { title: 'Vorheriges Bild (Pfeil links)' }),
    h('button.pswp__button.pswp__button--arrow--right', { title: 'Nächstes Bild (Pfeil rechts)' }),
    h('.pswp__caption',
      h('.pswp__caption__center'),
    ),
  ),
));

// Create array of gallery items
const createGalleryItems = $thumbs => $thumbs.map(
  ($thumb) => {
    // Get title from parent figure
    const $figure = $thumb.closest('.figure');
    const $caption = $figure ? $figure.querySelector('.figure__caption') : null;
    const title = $caption ? $caption.textContent : null;

    return {
      src: $thumb.getAttribute('href'),
      w: $thumb.getAttribute('data-width'),
      h: $thumb.getAttribute('data-height'),
      title,
    };
  }
);

// Attach photoswipe to items
const attachPhotoswipe = ($thumbs, galleryItems) => $thumbs.forEach(
  ($thumb, index) => {
    // Add icon overlay
    $thumb.appendChild(
      h('.figure__media-overlay',
        h('span.figure__media-icon', icon({ icon: 'search' })),
      ),
    );

    $thumb.addEventListener('click', (event) => {
      event.preventDefault();

      // Insert template
      const $template = $photoswipeTemplate.cloneNode(true);
      document.body.appendChild($template);

      // Init PhotoSwipe
      const slideshow = new PhotoSwipe(
        $template,
        PhotoSwipeUiDefault,
        galleryItems,
        {
          index,
          closeOnScroll: false,
          closeOnVerticalDrag: false,
          mouseUsed: true,
        },
      );

      // Disable anchor scroll hash change jump when gallery opens
      slideshow.listen('initialZoomIn', () => jumpStore.setSkipNext(true));

      // After gallery is closed, destroy DOM
      slideshow.listen('destroy', () => $template.remove());

      // Start gallery
      slideshow.init();
    });
  }
);

const initGallery = ($thumbs) => {
  if (!$thumbs || !$thumbs.length) {
    return;
  }

  attachPhotoswipe($thumbs, createGalleryItems($thumbs));
};

export default initGallery;

import h from 'hyperscript';
import getYouTubeID from 'get-youtube-id';

import icon from '../../../javascripts/utils/icon';

const initVideos = $thumbs => $thumbs.forEach(
  ($thumb) => {
    $thumb.appendChild(
      h('.figure__media-overlay',
        h('span.figure__media-icon', icon({ icon: 'play' }))
      ),
    );

    $thumb.addEventListener('click', (event) => {
      event.preventDefault();

      const $target = event.currentTarget;
      const $videoContainer = $target.parentNode;
      const youtubeId = getYouTubeID($target.getAttribute('href'));

      // Construct Youtube iframe player, add rel=0 to disable related video's
      const $iframe = h('.figure__media.figure__media--16x9', h('iframe.figure__iframe', {
        src: `https://www.youtube.com/embed/${youtubeId}?rel=0&autoplay=1`,
        allowFullscreen: true,
        msAllowFullscreen: true,
        webkitAllowFullscreen: true,
        mozAllowFullscreen: true,
      }));

      // Add iframe to DOM
      $videoContainer.insertBefore($iframe, $target);

      // Remove preview image
      $target.remove();

      // Focus iframe
      $iframe.focus();
    });
  }
);

export default initVideos;