WIP #492 @6.5

diff --git a/framework/application/forms/CMS/Sub/Home/Services/Example.php b/framework/application/forms/CMS/Sub/Home/Services/Example.php
index 9ffec33f5649acfd0d7c9f9ac02a320eeb403cb3..ecb5b5833ec248aee32514b0c30a1915173f2479 100644 (file)
--- a/framework/application/forms/CMS/Sub/Home/Services/Example.php
+++ b/framework/application/forms/CMS/Sub/Home/Services/Example.php
@@ -9,6 +9,10 @@ class Fluidbook_Form_CMS_Sub_Home_Services_Example extends CubeIT_Form_SubForm {
         $title->setLabel('Titre du exemple');
         $this->addElement($title);
 
+        $link = new CubeIT_Form_Element_Url('link');
+        $link->setLabel('URL du Fluidbook exemple');
+        $this->addElement($link);
+
         $image = new CubeIT_Form_Element_File_Image('image');
         $image->setLabel('Image');
         $this->addElement($image);

diff --git a/framework/application/views/helpers/HomeServices.php b/framework/application/views/helpers/HomeServices.php
index 544b0565e99947dfcc44e169481f8cfdc6e42826..076e32c6cd0d1be3ceb4835ad046c562484a9ca8 100644 (file)
--- a/framework/application/views/helpers/HomeServices.php
+++ b/framework/application/views/helpers/HomeServices.php
@@ -5,15 +5,47 @@ class Fluidbook_View_Helper_HomeServices extends Fluidbook_View_Helper_HomeLayer
         * @return string\r
         */\r
        public function homeServices($data) {\r
+\r
+        $this->headScript()->addScriptAndStyle('214-home-services');\r
+\r
                $this->data = $data;\r
 \r
-        $res = $this->_leftText();\r
+        $res .= '<div class="left">';\r
+        $res .= $this->_leftText();\r
+        $res .= '</div>'; // .left\r
+\r
+        $res .= '<div class="right">';\r
+\r
+        $res .= '<div class="services-examples">';\r
 \r
         foreach ($data['examples'] as $example) {\r
-            $res .= '<h3>'. $example['title'] .'</h3>';\r
-            $res .= $this->imageCms($example['image'], $example['title']);\r
+            $img = $this->imageCms($example['image'], $example['title']);\r
+            $rollover = $this->_rollover($example);\r
+            $res .= $this->htmlElement($img . $rollover, 'div', ['data-title' => $example['title']]);\r
         }\r
 \r
-               return $this->_layer($res, 'services');\r
+        $res .= '</div>'; // .services-examples\r
+\r
+        $res .= '<ul class="services-examples-nav" style="color: '. $data['themecolor'] .'"></ul>'; // Populated by JS\r
+\r
+        $res .= '</div>'; // .right\r
+\r
+\r
+        return $this->_layer($res, 'services');\r
        }\r
+\r
+\r
+    public function _rollover($example) {\r
+\r
+        $res  = '';\r
+\r
+        if (!empty($example['link'])) {\r
+            $res .= $this->link(__('Voir le Fluidbook'), $example['link'], ['class' => 'button']);\r
+        }\r
+\r
+        $res = $this->htmlElement($res, 'div', ['class' => 'inner']); // Wrapper for vertical centering\r
+\r
+        return $this->htmlElement($res, 'div', ['class' => 'more']);\r
+       }\r
+\r
 }
\ No newline at end of file

diff --git a/js/214-home-services.js b/js/214-home-services.js
new file mode 100644 (file)
index 0000000..3a6ea63
--- /dev/null
+++ b/js/214-home-services.js
@@ -0,0 +1,72 @@
+registerLoader(load_home_services, true);
+
+function load_home_services() {
+    initCarousel();
+}
+
+var autoplay = true;
+var autoplayTimer;
+
+function initCarousel() {
+
+    $('.services-examples > div').each(function(index) {
+
+        var ID;
+
+        // Mark the first item
+        if (index == 0) {
+            $(this).addClass('current');
+        }
+        // Set the ID of each item to the index
+        ID = 'example' + index;
+        $(this).attr('id', ID);
+
+        // Populate nav
+        $('.services-examples-nav').append('<li><a href="#' + ID + '">' + $(this).data('title') + '</a></li>');
+    });
+
+    // Handle nav clicks
+    $(document).on('click', '.services-examples-nav a', function() {
+
+        clearInterval(autoplayTimer); // cancel autoplay
+        loadSlide($(this).attr('href'));
+
+        return false;
+    });
+
+    // Autoplay
+    if (autoplay) {
+        var $items = $(".services-examples > div");
+        var index = 0;
+
+        var showNext = function () {
+            fb('calling showNext on index: ' +index);
+            loadSlide('#example' + index);
+            // increment the index - if it is beyond the number of li's - reset it to 0
+            if (++index >= $items.length) index = 0;
+        };
+        showNext(); // call once upon loading
+
+        // set it up to be called every x ms
+        autoplayTimer = setInterval(showNext, 3000);
+    }
+}
+
+
+function loadSlide(slideID) {
+
+    var target = $(slideID);
+
+    // Highlight nav link belonging to this slide
+    $('.services-examples-nav a').removeClass('active');
+    $('.services-examples-nav a[href="'+ slideID +'"]').addClass('active');
+
+    if ($(target).hasClass('current')) {
+        return;
+    }
+
+    $(target).css({zIndex: 3, opacity: 0}).show().animate({opacity: 1}, 300, function () {
+        $('.services-examples .current').css('z-index', "").hide().removeClass('current');
+        $(this).css('z-index', "").addClass('current');
+    });
+}
\ No newline at end of file

diff --git a/less/210-home.less b/less/210-home.less
index 293ee3f9086b7f03f532652738c2e46477b7fb8f..fbe95e99b605b54c2d10b4db6693aff2b40b3d9f 100644 (file)
--- a/less/210-home.less
+++ b/less/210-home.less
@@ -15,6 +15,7 @@
                padding: 0 5%;\r
                top: 50%;\r
                left: 0;\r
+               width: 100%;\r
                transform: translateY(-50%);\r
 \r
         @media @m900 {\r

diff --git a/less/214-home-services.less b/less/214-home-services.less
new file mode 100644 (file)
index 0000000..c6ab38a
--- /dev/null
+++ b/less/214-home-services.less
@@ -0,0 +1,115 @@
+@import "000-imports";
+
+section.services {
+  .content-inner {
+
+  }
+  .left, .right {
+    display: inline-block;
+    width: 50%;
+    vertical-align: top;
+  }
+}
+
+.services-examples {
+  position: relative;
+  width: 100%;
+  padding-bottom: percentage(496/755);
+
+  .current {
+    z-index: 2;
+  }
+
+  &> div {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    &:hover {
+      .more {
+        opacity: 1;
+      }
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .more {
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(52, 60, 68, .8);
+    color: #fff;
+    z-index: 3;
+    transition: opacity @transition-time-buttons;
+
+    .inner {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      left: 0;
+      transform: translateY(-50%);
+      text-align: center;
+    }
+  }
+
+  .button {
+    background-color: transparent;
+    color: #343c44;
+    border: 0;
+    text-transform: uppercase;
+    font-family: @montserrat;
+    font-weight: 300;
+    font-size: 12px;
+    line-height: 18px;
+    cursor: pointer;
+    float: none;
+    display: inline-block;
+    margin-top: 0;
+
+    .border-button-fill(#fff, rgba(231, 92, 123, 1));
+    .longarrow-button(20px, 40px, 18px);
+  }
+
+}
+
+.services-examples-nav {
+  list-style-type: none;
+  text-align: center;
+  padding-top: 30px;
+
+  li {
+    display: inline-block;
+    cursor: pointer;
+  }
+  a {
+    display: inline-block;
+    color: currentColor;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-family: @montserrat;
+    font-weight: 300;
+    font-size: 12px;
+    padding: 0.5em 1.5em;
+    border: 1px solid transparent;
+    border-radius: 1.5em;
+
+    &:hover {
+      color: currentColor;
+    }
+
+    &.active {
+      border-color: #fff;
+      color: #fff;
+    }
+
+  }
+}
\ No newline at end of file