Landing page functionality. WIP #1852 @6

diff --git a/_index.html b/_index.html
index 9c4863acf06f0a76ce424e28f581e63396e4a156..0feb8f32b63dc0e30d68b0a5ad7cd624be4e6056 100644 (file)
--- 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 9fe416c1171f89eae2b35e83945d5da2e0955166..aaff3359d5dc204999b2767bc0ef27e0e4da7f44 100644 (file)
--- 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 (file)
index 0000000..b53e11d
--- /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 09173c23058c8832111d1109b825e40a8927383f..f40536bc7dbf201b832f4fccb525756bc13ef666 100644 (file)
--- 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 {