From d652b65f014edf46a85c800d4f2f8a96137882ac Mon Sep 17 00:00:00 2001 From: "vincent@cubedesigners.com" Date: Wed, 27 Jul 2016 16:11:22 +0000 Subject: [PATCH] wip #493 @6 --- .../views/helpers/HomeReferences.php | 25 +++- js/101-header.js | 3 +- js/215-home-references.js | 101 +++++++++++-- less/003-mixins.less | 6 +- less/215-home-references.less | 138 +++++++++++++++++- 5 files changed, 245 insertions(+), 28 deletions(-) diff --git a/framework/application/views/helpers/HomeReferences.php b/framework/application/views/helpers/HomeReferences.php index 534f0aa..66ce89e 100644 --- a/framework/application/views/helpers/HomeReferences.php +++ b/framework/application/views/helpers/HomeReferences.php @@ -14,14 +14,19 @@ class Fluidbook_View_Helper_HomeReferences extends Fluidbook_View_Helper_HomeLay } protected function _references() { - $fluidbooks = Fluidbook_Model_Reference::factory()->where('homeimage != ?', '')->order('date DESC')->limit(6)->find(); + $fluidbooks = Fluidbook_Model_Reference::factory()->where('homeimage != ?', '')->order('date DESC')->limit(30)->find(); + $num = floor(count($fluidbooks) / 3) * 3; + $res = ''; $i = 0; foreach ($fluidbooks as $fluidbook) { $res .= $this->_reference($fluidbook, $i % 6 == 2 || $i % 6 == 3); $i++; + if ($i == $num) { + break; + } } - return $this->htmlElement($res, 'div', array('class' => 'links')); + return $this->htmlElement($this->htmlElement($res, 'div', array('class' => 'scrollHolder')), 'div', array('class' => 'links')); } /** @@ -29,13 +34,17 @@ class Fluidbook_View_Helper_HomeReferences extends Fluidbook_View_Helper_HomeLay * @return mixed */ protected function _reference($fluidbook, $big = false) { - $w = 1024; - $h = $w / 2; - if ($big) { - $h = $w; - } + $fluidbook = $fluidbook->unserialize(); - $res = $this->imageProcess($fluidbook->getHomeimage(), $fluidbook->getTitle(), $w, $h, array()); + $res = $this->htmlElement('', 'div', array( + 'style' => 'background-image:url("' . $this->imageProcess()->imageProcessGetUrl($fluidbook->getHomeimage(), $fluidbook->getTitle(), 2048, 10000, array(), 'R') . '");', + 'class' => 'img', + ) + ); + $rollover = $this->htmlElement($fluidbook->getTitle(), 'h3'); + $rollover .= $this->link('Voir le fluidbook', $fluidbook->getUrl()); + $res .= $this->htmlElement($this->htmlElement($rollover, 'div', array('class' => 'content')), 'div', array('class' => 'hover')); + $attributes = array('class' => array('reference')); if ($big) { $attributes['class'][] = 'big'; diff --git a/js/101-header.js b/js/101-header.js index b6fd865..64fe3e9 100644 --- a/js/101-header.js +++ b/js/101-header.js @@ -124,8 +124,9 @@ function changeHeaderStyle() { var section; $('#contentWrapper > section').each(function () { var offset = $(this).offset().top; - if (scrollTop >= offset && scrollTop <= offset + wh - 50) { + if (scrollTop > offset - 90 && scrollTop <= offset + wh - 90) { section = $(this); + return true; } }); diff --git a/js/215-home-references.js b/js/215-home-references.js index f64d938..f1d8f6f 100644 --- a/js/215-home-references.js +++ b/js/215-home-references.js @@ -1,29 +1,106 @@ registerLoader(load_home_references, true); +var currentColumn = 0; +var columnWidth = 0; +var transition = false; +var numColumn = 0; + function load_home_references() { + var numElement = $("section.references .links .reference").length; + var lastColumn = $("section.references .links .reference:gt(" + (numElement - 4) + ")"); + var firstColumns = $("section.references .links .reference:lt(9)"); + + + $("section.references .links .scrollHolder").prepend($(lastColumn).clone()); + $("section.references .links .scrollHolder").append($(firstColumns).clone()); + $("section.references .links").append('
'); + + $(document).on('click', "section.references .links .arrows .arrow", function () { + if ($(this).hasClass('right')) { + goNextReferenceColumn(); + } else { + goPreviousReferenceColumn(); + } + }); } function resizeHomeReferences(ww, wh) { - wh -= 90; - var links = $("section.references .links"); - $(links).css({width: wh, height: wh}); + var marginTop = 90; + var marginRight = ww * 0.05; + wh -= marginTop; + wh = Math.floor(wh / 4) * 4; + var uh = wh / 2; + var uw = (ww * 0.45) / 2; + + + if (ww < 900) { + uw = (ww - marginRight) / 2; + uh = uw; + paddingBottom = uh * 2 + 50; + } else { + paddingBottom = ''; + } + + + var links = $("section.references .links"); var i = 0; - var x = 0; + var x = -uw; var y = 0; - var u = wh / 2; + + $(links).css({width: (uw * 2) + marginRight, height: uh * 2}); + $(links).find('.arrow').css({width: marginRight, fontSize: ww * 0.05}); + + $(links).find('.reference').each(function () { - $(this).css({width: u, left: x, top: y}); - if ($(this).hasClass('big')) { - y += u; - } else { - y += u / 2; + var h = uh; + if (!$(this).hasClass('big')) { + h = uh / 2; } + $(this).css({width: uw, height: h, left: x, top: y}); + y += h; + i++; if (i % 3 == 0) { y = 0; - x += u; + x += uw; } }); -} \ No newline at end of file + $("section.references .content-wrapper .content-inner").css({paddingBottom: paddingBottom}); + columnWidth = uw; + numColumn = i / 3; +} + + +function goNextReferenceColumn() { + goReferenceColumn(currentColumn + 1); +} + +function goPreviousReferenceColumn() { + goReferenceColumn(currentColumn - 1); +} + +function goReferenceColumn(col) { + if (transition) { + return; + } + transition = true; + + TweenLite.to($(".scrollHolder"), 0.4, { + left: col * -1 * columnWidth, onComplete: endTransition, onCompleteParams: [col], + }); +} + +function endTransition(col) { + var holder = $(".scrollHolder"); + if (col == -1) { + col = numColumn - 5; + } else if (col == numColumn - 4) { + col = 0; + } + $(holder).css({left: col * -1 * columnWidth}); + currentColumn = col; + transition = false; +} + diff --git a/less/003-mixins.less b/less/003-mixins.less index 2b64e8f..463d58e 100644 --- a/less/003-mixins.less +++ b/less/003-mixins.less @@ -93,9 +93,9 @@ } } -.divider(@bottom-padding: 100px) { +.divider(@bottom-padding: 100px,@color: #343c44) { position: relative; - padding-bottom: 1.4em; + padding-bottom: @bottom-padding; &:after { content: ''; @@ -104,7 +104,7 @@ left: 0; width: 2em; height: 1px; - background-color: #343c44; + background-color: @color; @media @m900 { left: 50%; diff --git a/less/215-home-references.less b/less/215-home-references.less index 56fb08a..5ced45d 100644 --- a/less/215-home-references.less +++ b/less/215-home-references.less @@ -4,20 +4,150 @@ section.references { position: relative; .links { position: absolute; + bottom: 0; right: 0; - top: 0; height: 100%; overflow: hidden; - .reference{ + .scrollHolder { + position: absolute; + top: 0; + left: 0; + } + + .arrow { + position: absolute; + top: 0; + height: 100%; + background-color: rgba(255, 255, 255, 0.8); + opacity: 0; + transition: opacity @transition-time-buttons; + cursor: pointer; + + @media @m900 { + width: 30px; + } + + &:after { + font-family: @icons; + top: 50%; + font-size: 1em; + color: #000000; + margin-top: -0.5em; + line-height: 1em; + position: absolute; + display: block; + } + + &.right { + right: 0; + &:after { + content: "f"; + } + } + + &.left { + left: 0; + &:after { + content: "g"; + } + } + + &:hover { + opacity: 1; + } + } + + .arrow.right { + content: ''; + + } + + .reference { display: block; position: absolute; + &:hover { + .hover { + opacity: 1; + } + } + + &.big { + .hover { + padding-top: 50%; + .content { + top: -25%; + } + } + } } - img { + .img { width: 100%; - height: auto; + height: 100%; display: block; + background-size: cover; + background-position: 50% 50%; + } + + .hover { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #18232e; + opacity: 0; + transition: opacity @transition-time-buttons; + padding-top: 25%; + text-align: center; + + .content { + position: relative; + top: -50%; + } + + h3 { + + font-family: @playfair; + font-size: 30px; + font-weight: 400; + line-height: percentage(34/30); + color: #ffffff; + text-align: center; + .divider(1.4em, #fff); + &:after { + left: 50%; + margin-left: -1em; + } + + @media @m900 { + font-size: 20px; + } + + @media @m640 { + font-size: 14px; + } + } + + a { + color: #F9A32E; + text-transform: uppercase; + text-decoration: none; + position: relative; + top: -0.5em; + &:hover { + text-decoration: underline; + } + + @media @m900 { + font-size: 12px; + } + + @media @m640 { + font-size: 10px; + } + } } } } \ No newline at end of file -- 2.39.5