Improvements and semi-refactor with Vincent. WIP #1852 @8.5

diff --git a/_index.html b/_index.html
index 0feb8f32b63dc0e30d68b0a5ad7cd624be4e6056..bef146fda1f8037473f7a6cc770e8cad25478c92 100644 (file)
--- 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 aaff3359d5dc204999b2767bc0ef27e0e4da7f44..b6419e952107821edb5780fa6cfedaf3d0e5637d 100644 (file)
--- 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 b53e11dd808f238d54d57fabfaa4b4685d3165ad..955f94d2fdfabd6144c005846aa7dbee8c87b6f3 100644 (file)
--- 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 64fcb0d6197091597600fd1626989c3773bf3384..799dee43e6c0781ad453722e9b3bcaa1dd60dca9 100644 (file)
--- 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 f40536bc7dbf201b832f4fccb525756bc13ef666..5c7a414b59f845d013be9e19d17f11aa6e3f934d 100644 (file)
--- 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;
        }
 }