From: Stephen Cameron <stephen@cubedesigners.com>
Date: Mon, 29 Jan 2018 17:39:38 +0000 (+0100)
Subject: Landing page functionality. WIP #1852 @6
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=81c5d56777759efb6f6f68f386f1669dd572fee8;p=fluidbook-html5.git

Landing page functionality. WIP #1852 @6
---

diff --git a/_index.html b/_index.html
index 9c4863ac..0feb8f32 100644
--- a/_index.html
+++ b/_index.html
@@ -87,7 +87,8 @@
 <div id="hiddencontents"><!-- $hiddenContents --></div>
 <div id="splash"><!-- $splash --></div>
 <div id="popinOverlay"></div>
+<div id="landingPage"></div>
 <audio src="sound/empty.mp3" id="pagesaudio" preload="auto"></audio>
 <!-- $statsfooter -->
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 9fe416c1..aaff3359 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -25,6 +25,7 @@ Fluidbook.prototype = {
     init: function (datas) {
         this.datas = datas;
         this.junk = datas.cacheDate;
+        this.landingpage = new FluidbookLandingPage(this);
         this.menu = new FluidbookMenu(this);
         this.zoom = new FluidbookZoom(this);
         this.zoom.resetZoom();
@@ -326,6 +327,12 @@ Fluidbook.prototype = {
                 $this.hideSplash();
             }, true);
         }
+
+        else if (args[1] == 'landing') {
+            $this.hideSplash();
+            this.landingpage.show();
+        }
+
         else {
             var view = args[1];
             if (this.currentPage == -1) {
@@ -1087,4 +1094,4 @@ Fluidbook.prototype = {
 
         }
     }
-}
\ No newline at end of file
+}
diff --git a/js/libs/fluidbook/fluidbook.landingpage.js b/js/libs/fluidbook/fluidbook.landingpage.js
new file mode 100644
index 00000000..b53e11dd
--- /dev/null
+++ b/js/libs/fluidbook/fluidbook.landingpage.js
@@ -0,0 +1,75 @@
+function FluidbookLandingPage(fluidbook) {
+  this.fluidbook = fluidbook;
+  this.hasLandingPage = false;
+  this.init();
+}
+
+FluidbookLandingPage.prototype = {
+
+  init: function () {
+    var $this = this;
+
+    if (this.fluidbook.datas.landingPage != undefined && this.fluidbook.datas.landingPage != '') {
+
+      this.hasLandingPage = true;
+      window.location.hash = '/landing';
+
+      $("#landingPage").append('<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
+      $('#landingPageIframe').on('load', function () {
+        $(this).contents().on('click', 'a', $this.handleLink);
+      });
+    }
+  },
+
+  handleLink: function(event) {
+    event.preventDefault();
+
+    // 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:
+
+    // 1. Link to a page (data-page attribute)
+    if ($(this).data('page') !== undefined) {
+      fluidbook.landingpage.hide();
+      fluidbook.setCurrentPage(parseInt($(this).data('page')));
+    }
+
+    // 2. Link to a Fluidbook internal link ID (data-link attribute)
+    else if ($(this).data('link') !== undefined) {
+      fluidbook.landingpage.hide();
+      var link = $('[data-id="' + $(this).data('link') + '"] a');
+      if (link.length > 0) {
+        window.location.hash = link.attr('href');
+      }
+    }
+
+    // 3. Other / external link (open new window)
+    else {
+      // ToDo: open in new window
+      console.log($(this).attr('href'));
+    }
+
+  },
+
+  hide: function() {
+    $('#landingPage').hide();
+  },
+
+  show: function() {
+    $('#landingPage').fadeIn();
+  },
+
+  resize: function (w, h) {
+    if (!this.hasLandingPage) {
+      return;
+    }
+
+    console.log('TODO: landing page resize...');
+
+  }
+};
+
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 09173c23..f40536bc 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -2248,6 +2248,18 @@ body > input {
 	transform: scale(2.5);
 }
 
+/* Landing Page */
+#landingPage {
+	iframe {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 10;
+	}
+}
+
 /* Webfonts*/
 
 @font-face {