From 88714f8dafa30af612ef0c08ffbb54850395efc6 Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Mon, 11 Jul 2016 16:25:01 +0000
Subject: [PATCH] WIP #541 @5

---
 .../views/helpers/FeaturesSection.php         | 32 ++++++++++++++++++-
 .../scripts/templates/fonctionnalites.phtml   |  1 +
 js/410-features.js                            | 10 +++---
 less/410-features.less                        |  2 ++
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/framework/application/views/helpers/FeaturesSection.php b/framework/application/views/helpers/FeaturesSection.php
index 26b626e..0131406 100644
--- a/framework/application/views/helpers/FeaturesSection.php
+++ b/framework/application/views/helpers/FeaturesSection.php
@@ -17,8 +17,11 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
 
             // Text colour is based on whether block has a gradient or not
             $text_colour = $this->hasGradient($block) ? 'light' : 'dark';
+            
+            // Get layout settings for cement.js
+            $layout_data = $this->_layoutData($block['layout']);
 
-            $res .= '<div class="feature-block text-'. $text_colour .' '. $block['layout'] .'" id="'. $id .'">';
+            $res .= '<div class="feature-block text-'. $text_colour .' '. $block['layout'] .'" id="'. $id .'" '. $layout_data .'>';
 
             $res .= $this->_CSS($id, $block);
 
@@ -52,6 +55,33 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
         return is_array($block['background_image']);
     }
 
+    protected function _layoutData($layout) {
+        
+        switch($layout) {
+            case 'square-top':
+            case 'square-bottom':
+                $w = 2;
+                $h = 2;
+                break;
+            case 'rectangle-right':
+            case 'rectangle-bottom':
+                $w = 3;
+                $h = 2;
+                break;
+            case 'small-rectangle-tall':
+                $w = 1;
+                $h = 2;
+                break;
+            case 'small-rectangle-wide':
+                $w = 2;
+                $h = 1;
+        }
+        
+        if (!$w || !$h) return '';
+
+        return 'data-w="'. $w .'" data-h="'. $h .'"';
+    }
+
     protected function _CSS($id, $block) {
 
         $gradient = $block['background_gradient'];
diff --git a/framework/application/views/scripts/templates/fonctionnalites.phtml b/framework/application/views/scripts/templates/fonctionnalites.phtml
index 30eb05b..a433829 100644
--- a/framework/application/views/scripts/templates/fonctionnalites.phtml
+++ b/framework/application/views/scripts/templates/fonctionnalites.phtml
@@ -1,5 +1,6 @@
 <?php
 
+$this->headScript()->addScriptAndStyle('411-cement');
 $this->headScript()->addScriptAndStyle('410-features');
 
 $res  = $this->introBlock($this->intro, '');
diff --git a/js/410-features.js b/js/410-features.js
index b7cd13b..d108901 100644
--- a/js/410-features.js
+++ b/js/410-features.js
@@ -2,11 +2,11 @@ registerLoader(load_features);
 
 function load_features() {
 
-    $(".feature-blocks").masonry({
-        itemSelector: ".feature-block",
-        //fitWidth: true,
-        columnWidth: ".small-rectangle-tall",
-        transitionDuration: 0,
+    $('.feature-blocks').cement({
+        columns: 6,
+        columnMinWidth: 200,
+        horizontalGutter: 0,
+        verticalGutter: 0
     });
 
 }
\ No newline at end of file
diff --git a/less/410-features.less b/less/410-features.less
index 86513bd..16bc545 100644
--- a/less/410-features.less
+++ b/less/410-features.less
@@ -44,6 +44,8 @@
 .feature-inner {
   position: absolute;
   top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
   padding: 30px;
   line-height: (22/14);
-- 
2.39.5