Integration of FullPage.js on home page. WIP #4 @5

diff --git a/framework/application/views/helpers/ContactFooter.php b/framework/application/views/helpers/ContactFooter.php
index 2e9076858343ed518b2a8a3d38dcc9b7ef8cc1d3..c56e97582f4f95da6abd6f5ad67766294b4e0ecf 100644 (file)
--- a/framework/application/views/helpers/ContactFooter.php
+++ b/framework/application/views/helpers/ContactFooter.php
@@ -21,6 +21,6 @@ class Fluidbook_View_Helper_ContactFooter extends CubeIT_View_Helper_Abstract {
                $res = $this->htmlElement($res, 'div', array('class' => 'grid'));\r
                $res = $this->backgroundBlock($res, $cf, array('content-wrapper'));\r
 \r
-               return $this->htmlElement($res, 'section', array('class' => 'contactFooter'));\r
+               return $this->htmlElement($res, 'section', array('class' => 'contactFooter section'));\r
        }\r
 }
\ No newline at end of file

diff --git a/framework/application/views/helpers/HomeLayer.php b/framework/application/views/helpers/HomeLayer.php
index ca2cc7ae72389fce1ca7ac1392f159e7583d1a91..30a1a2a16b98158799c0fbf2fdb22ab611023f43 100644 (file)
--- a/framework/application/views/helpers/HomeLayer.php
+++ b/framework/application/views/helpers/HomeLayer.php
@@ -4,6 +4,9 @@ class Fluidbook_View_Helper_HomeLayer extends CubeIT_View_Helper_Abstract {
        public $data;\r
 \r
        protected function _layer($content, $class, $attributes = array()) {\r
+\r
+           $class .= ' section';\r
+\r
                $defaultAttributes = array('class' => $class, 'data-headerstyle' => $this->data['headerstyle']);\r
                $attributes = $this->_mergeAttributes($attributes, $defaultAttributes);\r
 \r

diff --git a/framework/application/views/scripts/templates/home.phtml b/framework/application/views/scripts/templates/home.phtml
index d8fed733254f73bd84b5c98364ac44cff86ff3bb..c2ef6bad5004cfc9a54f00fe640d670448ec580f 100644 (file)
--- a/framework/application/views/scripts/templates/home.phtml
+++ b/framework/application/views/scripts/templates/home.phtml
@@ -1,3 +1,8 @@
 <?php\r
+\r
+$this->headScript()->addFullPage();\r
 $this->headScript()->addScriptAndStyle('210-home');\r
-echo $this->home();
\ No newline at end of file
+\r
+echo '<div id="home">'; // Needed because FullPage.js doesn't work when the wrapper is a <main> element\r
+echo $this->home();\r
+echo '</div>';
\ No newline at end of file

diff --git a/js/101-header.js b/js/101-header.js
index 638b67ef011c107f141afc0e9b48530170b2d635..4374131b4b26c84bf8414d6a9238471876edcf4a 100644 (file)
--- a/js/101-header.js
+++ b/js/101-header.js
@@ -116,10 +116,13 @@ function headerScroll() {
 }\r
 \r
 function changeHeaderStyle() {\r
+\r
+    // Todo: rework all this to be compatible with FullPage.js - see callbacks...\r
+\r
     var scrollTop = $(window).scrollTop();\r
     var wh = $(window).height();\r
     var section;\r
-    $('main>section').each(function () {\r
+    $('#home > section').each(function () {\r
         var offset = $(this).offset().top;\r
         if (scrollTop >= offset && scrollTop <= offset + wh - 50) {\r
             section = $(this);\r

diff --git a/js/210-home.js b/js/210-home.js
index 840496c5468f059869212c001c47e5101118ad1a..346f3eae74db9d16c3416642784f4e9e8e699515 100644 (file)
--- a/js/210-home.js
+++ b/js/210-home.js
@@ -1,18 +1,28 @@
 registerLoader(load_home, true);\r
 function load_home() {\r
     $(window).on('fluidbookresize', resizeHome);\r
-\r
     resizeHome();\r
+\r
+    // FullPage.js setup\r
+    $('#home').fullpage({\r
+        navigation: true,\r
+        navigationPosition: 'left',\r
+        verticalCentered: false\r
+    });\r
+\r
 }\r
 \r
 function resizeHome() {\r
-    // Resize sections\r
-    var wh = $(window).outerHeight() / zoom;\r
-    var ww = $(window).outerWidth() / zoom;\r
-    $('main>section').css('height', wh);\r
 \r
+    // Todo: see if this can be removed completely if FullPage.js handles the section sizing...\r
 \r
-    resizeHomeContact(ww, wh);\r
+    // Resize sections\r
+    // var wh = $(window).outerHeight() / zoom;\r
+    // var ww = $(window).outerWidth() / zoom;\r
+    // $('#home > section').css('height', wh);\r
+    //\r
+    //\r
+    // resizeHomeContact(ww, wh);\r
 }\r
 \r
 function resizeHomeContact(ww, wh) {\r