From d5c49ed4b6d59c86992056d61aaab2e055259b33 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 30 Jan 2018 20:03:47 +0100
Subject: [PATCH] Improvements and semi-refactor with Vincent. WIP #1852 @8.5

---
 _index.html                                |  2 +-
 js/libs/fluidbook/fluidbook.js             | 17 +++++++-
 js/libs/fluidbook/fluidbook.landingpage.js | 49 ++++++++++++++++------
 js/main.js                                 | 12 ++++--
 style/fluidbook.less                       | 21 +++++++---
 5 files changed, 76 insertions(+), 25 deletions(-)

diff --git a/_index.html b/_index.html
index 0feb8f32..bef146fd 100644
--- a/_index.html
+++ b/_index.html
@@ -85,7 +85,7 @@
 
 <div id="loader"></div>
 <div id="hiddencontents"><!-- $hiddenContents --></div>
-<div id="splash"><!-- $splash --></div>
+<div id="splash" style="background-color:#<!-- $bgcolor -->;"><!-- $splash --></div>
 <div id="popinOverlay"></div>
 <div id="landingPage"></div>
 <audio src="sound/empty.mp3" id="pagesaudio" preload="auto"></audio>
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index aaff3359..b6419e95 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -133,10 +133,9 @@ Fluidbook.prototype = {
         var $this = this;
         setTimeout(function () {
             $this._hideSplash();
-        }, 3000);
+        }, 300);
     },
     _hideSplash: function () {
-        this.ready();
         $("#main,#viewOverlay,#view").css('visibility', 'visible');
         this.hideLoader(0, true);
 
@@ -153,6 +152,16 @@ Fluidbook.prototype = {
         $(this).trigger('fluidbook.splash.hide');
 
     },
+
+    onReady: function(callback) {
+        if (this.isReady) {
+            callback();
+        } else {
+            $(this).on('fluidbook.ready', function() {
+                callback();
+            });
+        }
+    },
     ready: function () {
         if (this.isReady) {
             return;
@@ -298,6 +307,10 @@ Fluidbook.prototype = {
         var args = window.location.hash.split('/');
 
         if (args.length <= 1 || args[1] == '' || args[1] == undefined) {
+            if (this.landingpage.hasLandingPage) {
+                window.location.hash = '/landing';
+                return;
+            }
             return this.setCurrentPage('1');
         } else if (args[1] == 'closeview') {
             return this.setCurrentPage(this.currentPage);
diff --git a/js/libs/fluidbook/fluidbook.landingpage.js b/js/libs/fluidbook/fluidbook.landingpage.js
index b53e11dd..955f94d2 100644
--- a/js/libs/fluidbook/fluidbook.landingpage.js
+++ b/js/libs/fluidbook/fluidbook.landingpage.js
@@ -10,11 +10,25 @@ FluidbookLandingPage.prototype = {
     var $this = this;
 
     if (this.fluidbook.datas.landingPage != undefined && this.fluidbook.datas.landingPage != '') {
-
       this.hasLandingPage = true;
-      window.location.hash = '/landing';
+    }
+
+    setTimeout(function(){$this.setupLandingPage();}, 10);
+
+    // When the splash page hides, we are ready to show the landing page (if one exists)
+    // $(this.fluidbook).on('fluidbook.ready', function() {
+    //   setTimeout($this.show, 500);
+    // });
 
-      $("#landingPage").append('<iframe id="landingPageIframe" src="data/landing-page/index.html">');
+  },
+
+  setupLandingPage: function () {
+    var $this = this;
+
+    if (this.hasLandingPage) {
+      // window.location.hash = '/landing'; // handled by fluidbook.changeAddress()
+
+      $("#landingPage").html('<iframe id="landingPageIframe" src="data/landing-page/index.html">');
 
       // Click handler for all links inside iframe
       // We must wait for the iframe to load before we can add a listener to the document
@@ -24,11 +38,8 @@ FluidbookLandingPage.prototype = {
     }
   },
 
-  handleLink: function(event) {
-    event.preventDefault();
+  handleLink: function (event) {
 
-    // ToDo: figure out why first link click after load isn't caught by this handler (page is set to -1 even if it is set in code on init)
-    console.log('Handling link...', $(this));
 
     //## Handle possible link types:
 
@@ -49,18 +60,30 @@ FluidbookLandingPage.prototype = {
 
     // 3. Other / external link (open new window)
     else {
-      // ToDo: open in new window
-      console.log($(this).attr('href'));
+      var href = $(this).attr('href');
+      // Local / internal link
+      if (href.indexOf('#') === 0) {
+        event.preventDefault();
+        window.location.hash = href;
+        fluidbook.landingpage.hide();
+        // External link
+      } else {
+        // ToDo: figure out how to handle this properly with security restrictions
+        window.open(href, '_blank');
+      }
     }
 
+    event.preventDefault();
+    return false;
+
   },
 
-  hide: function() {
-    $('#landingPage').hide();
+  hide: function () {
+    $('#landingPage').removeClass('visible');
   },
 
-  show: function() {
-    $('#landingPage').fadeIn();
+  show: function () {
+    $('#landingPage').addClass('visible');
   },
 
   resize: function (w, h) {
diff --git a/js/main.js b/js/main.js
index 64fcb0d6..799dee43 100644
--- a/js/main.js
+++ b/js/main.js
@@ -384,17 +384,21 @@ try {
         });
 
         $(document).trigger('fluidbookready');
-        $(this).trigger('fluidbook.ready');
 
         setTimeout(function () {
             resize();
         }, 1000);
 
-        if (!startAfterLoading) {
-            fluidbook.changeAddress();
-        }
+        fluidbook.onReady(function() {
+            if (!startAfterLoading) {
+                fluidbook.changeAddress();
+            }
+        });
 
         //console.log('fluidbook.ready');
+      setTimeout(function(){
+          fluidbook.ready();
+      }, 3000);
     }
 } catch (err) {
     console.log(err);
diff --git a/style/fluidbook.less b/style/fluidbook.less
index f40536bc..5c7a414b 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1970,7 +1970,7 @@ ul.chapters {
 	position: absolute;
 	top: 0px;
 	left: 0px;
-	z-index: 30;
+	z-index: 40;
 	opacity: 0;
 }
 
@@ -2250,13 +2250,24 @@ body > input {
 
 /* Landing Page */
 #landingPage {
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.3s ease-in;
+	z-index: 30;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+
+	&.visible {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
 	iframe {
-		position: absolute;
-		top: 0;
-		left: 0;
 		width: 100%;
 		height: 100%;
-		z-index: 10;
 	}
 }
 
-- 
2.39.5