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%;

requirements.in

@@ -15,7 +15,7 @@ https://control.divio.com/api/v1/apps/serve/django-filer/1.4.1/e7e860ea-0af6-4fc
 elasticsearch==6.4.0
 django-spurl==0.6.5
 aldryn-search==1.0.1
-django-fontawesome==0.3.1
+django-fontawesome==1.0
 mailchimp3==2.1.0
 django-image-cropping==1.2.0
 django-admin-view-permission==1.9
@@ -36,3 +36,5 @@ django-simple-captcha==0.5.12
 django-treebeard==4.3.1
 django-meta==1.7.0
 tablib==0.14.0
+django-simple-sso==0.14.1
+easy-thumbnails==2.7.1

src/project/migrations/0011_auto_20211104_1608.py

@@ -0,0 +1,26 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.21 on 2021-11-04 16:08
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import djangocms_text_ckeditor.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('project', '0010_auto_20200325_1611'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='timetable',
+            name='video_cta',
+            field=djangocms_text_ckeditor.fields.HTMLField(blank=True, null=True, verbose_name='Video CTA'),
+        ),
+        migrations.AddField(
+            model_name='timetable',
+            name='video_vimeo_id',
+            field=models.IntegerField(blank=True, help_text='e.g. https://vimeo.com/<b>131766159</b>', null=True, verbose_name='Video Vimeo ID'),
+        ),
+    ]

src/project/models.py

@@ -265,6 +265,8 @@ class Timetable(CMSPlugin):
     introduction = HTMLField(verbose_name='Intro', configuration='CKEDITOR_SETTINGS_INPUT')
     outro = HTMLField(verbose_name='Outro', configuration='CKEDITOR_SETTINGS_INPUT', blank=True, null=True)
     cta = HTMLField(verbose_name='CTA', configuration='CKEDITOR_SETTINGS_INPUT', blank=True, null=True)
+    video_vimeo_id = models.IntegerField(verbose_name='Video Vimeo ID', blank=True, null=True, help_text='e.g. https://vimeo.com/<b>131766159</b>')
+    video_cta = HTMLField(verbose_name='Video CTA', configuration='CKEDITOR_SETTINGS_INPUT', blank=True, null=True)
 
     class Meta(CMSPlugin.Meta):
         verbose_name = 'Timetable'

src/project/templates/project/plugins/timetable/timetable.html

@@ -1,6 +1,15 @@
 {% load i18n cms_tags thumbnail util_tags %}
 
 <div id="timetable" data-active="0" data-last="{{ instance.child_plugin_instances|length }}">
+    {% if instance.video_vimeo_id and instance.video_cta %}
+        <div class="timetable__button" data-video-vimeo-id="{{ instance.video_vimeo_id }}">
+            <a href="#video" class="button button--white">
+                <span class="button__icon">{% include 'project/assets/play.svg' %}</span>
+                <span class="button__text">{{ instance.video_cta }}</span>
+            </a>
+        </div>
+    {% endif %}
+
     <div class="timetable__clock__frame">
         <div class="timetable__clock__main">
             <div class="timetable__start reveal reveal_animation data_delay_8"></div>