add video to timetable

private/js/modules/plugins/timetable.js

@@ -1,4 +1,4 @@
-$(function() {
+$(function () {
   var $body = $('body');
   var $timetable = $('#timetable');
 
@@ -9,7 +9,7 @@ $(function() {
   $(window).scrollTop(0);
 
   window.timetable_can_scroll = false;
-  window.setTimeout(function() {
+  window.setTimeout(function () {
     window.timetable_can_scroll = true;
   }, 2500);
 
@@ -39,17 +39,17 @@ $(function() {
   function init_timetable_items() {
     $timetable.attr('data-active', 1);
 
-    $timetable.find('.timetable__item').each(function() {
+    $timetable.find('.timetable__item').each(function () {
       $(this).addClass('reveal_container')
     });
-    window.setTimeout(function() {
+    window.setTimeout(function () {
       $timetable.addClass('active');
 
-      window.requestAnimationFrame(function() {
-        $timetable.find('.timetable__item').each(function() {
+      window.requestAnimationFrame(function () {
+        $timetable.find('.timetable__item').each(function () {
           var index = parseInt($(this).attr('data-id'));
           var elementWatcher = scrollMonitor.create(this);
-          elementWatcher.enterViewport(function() {
+          elementWatcher.enterViewport(function () {
             set_timetable_item(index);
           });
         });
@@ -76,7 +76,7 @@ $(function() {
   var $timetable_progress = $('#timetable__clock__progress');
   var timetable_clock_progress_max = parseFloat($timetable_progress.attr('stroke-dasharray'));
 
-  $body.on('click', '.timetable__next', function(event) {
+  $body.on('click', '.timetable__next', function (event) {
     event.preventDefault();
     if (!activated) {
       $(window).scrollTop($(window).height());
@@ -146,4 +146,43 @@ $(function() {
       $timetable_progress.attr('stroke-dashoffset', timetable_clock_progress_max * Math.abs(total_progress - 1));
     }
   }
+
+  document.querySelector('.timetable__button a').addEventListener('click', function (event) {
+    event.preventDefault();
+    var player;
+    var vimeo_id = document.querySelector('.timetable__button').getAttribute('data-video-vimeo-id');
+
+    var pswpElement = document.querySelectorAll('.pswp')[0],
+      gallery,
+      options,
+      items;
+
+    options = {
+      showHideOpacity: true,
+      download: false,
+      fullscreenEl: false,
+      shareEl: false,
+    };
+
+    items = [
+      {
+        html: '<div class="gallery__iframe"><div class="gallery__iframe__main"><iframe src="https://player.vimeo.com/video/' + vimeo_id + '" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div></div>',
+      },
+    ];
+
+    var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
+
+    gallery.listen('close', function () {
+      document.querySelector('#timetable').style.height = '';
+      player.pause();
+    });
+
+    gallery.init();
+
+    document.querySelector('#timetable').style.height = '100%';
+      var iframe = document.querySelector('.pswp iframe');
+      player = new Vimeo.Player(iframe);
+      player.play();
+  });
+
 });

private/scss/modules/plugins/_gallery.scss

@@ -3,6 +3,25 @@
   font-size: 0;
 }
 
+.gallery__iframe {
+  width: 100%;
+  max-width: 90vh;
+  margin: auto;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.gallery__iframe__main {
+  width: 100%;
+  padding-bottom: 56.25%;
+  position: relative;
+}
+
+.gallery__iframe__main iframe {
+  position: absolute;
+}
+
 .gallery__item {
   display: inline-block;
   vertical-align: top;

private/scss/modules/plugins/_timetable.scss

@@ -11,6 +11,27 @@ $timetable_count: 15;
   }
 }
 
+.timetable__button {
+  opacity: 0;
+  position: fixed;
+  top: 103px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  transition: opacity 0.5s $easeOutQuad;
+  #timetable[data-active="0"] & {
+    opacity: 1;
+  }
+  img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 20px;
+    margin-left: -20px;
+  }
+}
+
 .timetable__clock__frame {
   position: fixed;
   top: 50%;