From: stephen@cubedesigners.com Date: Thu, 28 Jul 2016 16:45:01 +0000 (+0000) Subject: WIP #492 @6.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=0938a55cdf71c7979aa21bd8ae9f5164c14309a2;p=fluidbook-v3.git 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 9ffec33..ecb5b58 100644 --- 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 544b056..076e32c 100644 --- 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 */ public function homeServices($data) { + + $this->headScript()->addScriptAndStyle('214-home-services'); + $this->data = $data; - $res = $this->_leftText(); + $res .= '
'; + $res .= $this->_leftText(); + $res .= '
'; // .left + + $res .= '
'; + + $res .= '
'; foreach ($data['examples'] as $example) { - $res .= '

'. $example['title'] .'

'; - $res .= $this->imageCms($example['image'], $example['title']); + $img = $this->imageCms($example['image'], $example['title']); + $rollover = $this->_rollover($example); + $res .= $this->htmlElement($img . $rollover, 'div', ['data-title' => $example['title']]); } - return $this->_layer($res, 'services'); + $res .= '
'; // .services-examples + + $res .= ''; // Populated by JS + + $res .= '
'; // .right + + + return $this->_layer($res, 'services'); } + + + public function _rollover($example) { + + $res = ''; + + if (!empty($example['link'])) { + $res .= $this->link(__('Voir le Fluidbook'), $example['link'], ['class' => 'button']); + } + + $res = $this->htmlElement($res, 'div', ['class' => 'inner']); // Wrapper for vertical centering + + return $this->htmlElement($res, 'div', ['class' => 'more']); + } + } \ No newline at end of file diff --git a/js/214-home-services.js b/js/214-home-services.js new file mode 100644 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('
  • ' + $(this).data('title') + '
    • '); + }); + + // 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 293ee3f..fbe95e9 100644 --- a/less/210-home.less +++ b/less/210-home.less @@ -15,6 +15,7 @@ padding: 0 5%; top: 50%; left: 0; + width: 100%; transform: translateY(-50%); @media @m900 { diff --git a/less/214-home-services.less b/less/214-home-services.less new file mode 100644 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