From 1995405116ca25f360a72eb498cfd6fd0b5a7319 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Thu, 21 Jul 2016 16:30:49 +0000
Subject: [PATCH] Replace AJAX video popup with Featherlight and handle
 responsive scaling and autoplay. WIP #571 @5

---
 .../controllers/AjaxpopupController.php       |  6 ---
 .../scripts/templates/fonctionnalites.phtml   | 11 +++--
 js/410-features.js                            |  8 ++++
 less/410-features.less                        | 43 +++++++++++++++++++
 4 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/framework/application/controllers/AjaxpopupController.php b/framework/application/controllers/AjaxpopupController.php
index 0f3c556..a7c183e 100644
--- a/framework/application/controllers/AjaxpopupController.php
+++ b/framework/application/controllers/AjaxpopupController.php
@@ -8,10 +8,4 @@ class AjaxpopupController extends CubeIT_Controller_AjaxpopupController {
         return $this->view->quoteForm('requestQuotePopup'); // Different ID for popup form so it doesn't conflict with contact page form
     }
 
-    public function video($ID) {
-        $this->setPopupMaxWidth('1440');
-        $this->setPopupWidth('90%');
-        return $this->view->videoWeb($ID, '100%', 'auto', ['autoplay' => 1]);
-    }
-
 }
\ No newline at end of file
diff --git a/framework/application/views/scripts/templates/fonctionnalites.phtml b/framework/application/views/scripts/templates/fonctionnalites.phtml
index df92201..98d4996 100644
--- a/framework/application/views/scripts/templates/fonctionnalites.phtml
+++ b/framework/application/views/scripts/templates/fonctionnalites.phtml
@@ -1,11 +1,14 @@
 <?php
 
+$this->headScript()->addFeatherlight();
 $this->headScript()->addScriptAndStyle('410-features');
 
-$videoLink = '/ajaxpopup/video/'. $this->video;
-
-$extraContent  = $this->linkPopup($this->video_button_text, $videoLink, ['class' => 'features-video-button']);
-$extraContent .= $this->linkPopup('', $videoLink, ['class' => 'features-video', 'width' => '1200']);
+// Todo: replace with link to demo fluidbook and add fields to CMS
+//$extraContent  = $this->linkPopup($this->video_button_text, $videoLink, ['class' => 'features-video-button']);
+$extraContent  = $this->link('', '#', ['class' => 'features-video', 'data-featherlight' => '#introVideo', 'data-featherlight-after-open' => 'playVideo()']);
+$extraContent .= '<div class="lightbox" id="introVideo">';
+$extraContent .= $this->videoWeb($this->video);
+$extraContent .= '</div>'; // .lightbox
 
 $res  = $this->introBlock($this->intro, $extraContent);
 
diff --git a/js/410-features.js b/js/410-features.js
index c50f6fc..33ea7c4 100644
--- a/js/410-features.js
+++ b/js/410-features.js
@@ -57,4 +57,12 @@ function resizeFeatureBlocks() {
     containerWidth = Math.floor($('main').width() * 0.9 / cols) * cols;
 
     $('.feature-blocks').width(containerWidth);
+}
+
+// Switch the video URL to autoplay so the video starts playing...
+// This function is called when the featherlight opens
+function playVideo() {
+    var video = $('.featherlight #introVideo iframe');
+
+    video[0].src = video[0].src.replace('autoplay=0','autoplay=1');
 }
\ No newline at end of file
diff --git a/less/410-features.less b/less/410-features.less
index 0ba824c..a1618ff 100644
--- a/less/410-features.less
+++ b/less/410-features.less
@@ -17,6 +17,49 @@
   margin-top: 50px;
 }
 
+// Featherlight modifications to make responsive iframes work
+.featherlight-iframe {
+  &:before {
+    display: none; // This element doesn't seem necessary and really messes up the display
+  }
+
+  .featherlight-content {
+    display: block; // Normally it is set to inline-block but then the iframe can't be scaled by percentage
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    overflow: visible; // So close icon can sit outside the box
+    padding: 0 !important;
+    margin: 0 5% !important;
+    border: none !important;
+  }
+
+  .featherlight-close-icon {
+    background-color: transparent;
+    color: #fff;
+    font-size: 20px;
+    top: -27px;
+    right: -4px;
+  }
+}
+
+// Lightbox for the video with intrinsic ratio
+.lightbox {
+  display: none;
+  position: relative;
+  padding-bottom: percentage(9/16); // 16:9 aspect ratio
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .features-video {
   display: block;
   position: absolute;
-- 
2.39.5