From: vincent@cubedesigners.com Date: Mon, 4 Jul 2016 13:54:43 +0000 (+0000) Subject: wip #487 @5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=1fb0da862b39157010487fab61f2876229c3f7fd;p=fluidbook-v3.git wip #487 @5 --- diff --git a/framework/application/forms/CMS/Sub/Exemples/Fluidbook.php b/framework/application/forms/CMS/Sub/Exemples/Fluidbook.php index de0de44..329e657 100644 --- a/framework/application/forms/CMS/Sub/Exemples/Fluidbook.php +++ b/framework/application/forms/CMS/Sub/Exemples/Fluidbook.php @@ -50,6 +50,6 @@ class Fluidbook_Form_CMS_Sub_Exemples_Fluidbook extends CubeIT_Form_List_Model { ->setModel('Fluidbook_Model_Reference') ->setTitleColumn("title") ->setAdditionnalColumns(array('fluidbook_id', 'featured', 'date')) - ->setSearchColumns(array('text', 'fluidbook_id')); + ->setSearchColumns(array('text', 'fluidbook_id', 'title')); } } \ No newline at end of file diff --git a/framework/application/views/helpers/ExemplePublication.php b/framework/application/views/helpers/ExemplePublication.php index 74770f0..1786313 100644 --- a/framework/application/views/helpers/ExemplePublication.php +++ b/framework/application/views/helpers/ExemplePublication.php @@ -17,12 +17,20 @@ class Fluidbook_View_Helper_ExemplePublication extends CubeIT_View_Helper_Abstra 'blendmode' => array('prop' => 'background-blend-mode', 'format' => '%s'), ); + $left = $this->_getPage($fluidbook_id, $page); + $right = $this->_getPage($fluidbook_id, $page + 1); + + $ratio = $left['width'] / $left['height']; + $backgrounds = array(); - $backgrounds[] = array('image' => $this->_getPage($fluidbook_id, $page, array('class' => 'left')), 'size' => '', 'position' => '0,0', 'blendmode' => null); - $backgrounds[] = array('image' => $this->_getPage($fluidbook_id, $page + 1, array('class' => 'right')), 'size' => '', 'position' => '0,100%', 'blendmode' => 'normal'); - $backgrounds[] = array('image' => '/images/exemples/publications/dark.png', 'size' => '', 'position' => '', 'blendmode' => ''); - $backgrounds[] = array('image' => '/images/exemples/publications/light.png', 'size' => '', 'position' => '', 'blendmode' => ''); - $backgrounds[] = array('image' => '/images/exemples/publications/shadow.png', 'size' => '', 'position' => '', 'blendmode' => ''); + // $backgrounds[] = array('image' => '/images/exemples/publications/shadow.png', 'size' => '100% 10%', 'position' => '0 95%', 'blendmode' => null); + $backgrounds[] = array('image' => $left['url'], 'size' => '50% 100%', 'position' => '0 0', 'blendmode' => null); + $backgrounds[] = array('image' => $right['url'], 'size' => '50% 100%', 'position' => '100% 0', 'blendmode' => 'normal'); + $backgrounds[] = array('image' => '/images/exemples/publications/light.png', 'size' => '30% 100%', 'position' => '50% 0', 'blendmode' => 'overlay'); + $backgrounds[] = array('image' => '/images/exemples/publications/dark.png', 'size' => '20% 100%', 'position' => '50% 0', 'blendmode' => 'multiply'); + + + $backgrounds = array_reverse($backgrounds); $res = ''; - $res .= $this->htmlElement('', 'div', array('class' => 'exemple-fluidbook', 'id' => $cssid)); + $res .= $this->htmlElement($this->htmlElement('', 'div', array('class' => 'shadow')), 'div', array('class' => 'exemple-fluidbook', 'id' => $cssid, 'data-width' => $left['width'] * 2, 'data-height' => $left['height'])); return $res; } protected function _getPage($fluidbook_id, $page) { $path = 'fluidbook/' . $fluidbook_id . '/'; - $dir = PUBLIC_PATH . $path; + $dir = FILES_PATH . '/' . $path; if (!file_exists($dir)) { mkdir($dir, 0777, true); } + $url = '/files/' . $path . $page . '.jpg'; $file = $dir . $page . '.jpg'; if (!file_exists($file)) { - file_put_contents($file, file_get_contents('https://workshop.fluidbook.com/viewerh/' . $fluidbook_id . '_bcf26f9cf4a795ec00b9a44f42750d58_1234567890/data/background/150/t' . $page . '.jpg')); + $url = 'https://workshop.fluidbook.com/viewerh/' . $fluidbook_id . '_bcf26f9cf4a795ec00b9a44f42750d58_1234567890/data/background/150/t' . $page . '.jpg'; + file_put_contents($file, file_get_contents($url)); } - return $url; + $size = CubeIT_Image::getDimensions($file, $width, $height); + return array('url' => $url, 'width' => $width, 'height' => $height); } } \ No newline at end of file diff --git a/framework/application/views/helpers/Exemples.php b/framework/application/views/helpers/Exemples.php index 9063568..c56db67 100644 --- a/framework/application/views/helpers/Exemples.php +++ b/framework/application/views/helpers/Exemples.php @@ -5,8 +5,8 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract { * @return string */ public function exemples($category, $title, $nb) { + $this->headScript()->addMasonry()->addJQueryTransform(); $this->headScript()->addScriptAndStyle('220-exemples'); - $this->headScript()->addMasonry(); $exemples = Fluidbook_Model_Reference::factory()->order('date DESC')->find(); @@ -17,9 +17,6 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract { $featured = array(); $normal = array(); foreach ($exemples as $id => $exemple) { - - fb($exemple->getCategories()); - if ($category > 0 && !in_array($category, $exemple->getCategories())) { continue; } @@ -31,10 +28,6 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract { } } - fb($featured); - fb($normal); - - $nb_featured = count($featured); if ($nb_featured < $max_featured) { for ($i = $nb_featured; $i < $max_featured; $i++) { @@ -86,12 +79,13 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract { $res .= $this->htmlElement($f->getText(), 'p'); } + $image = CubeIT_Util_Cms::extractFile($f->getImage()); - if ($f->getFluidbookId()) { + if (!$image && $f->getFluidbookId()) { $res .= $this->exemplePublication($f->getFluidbookId(), $f->getFluidbookPage()); } else { $res .= $this->htmlElement('', 'div', - array('style' => 'background-image:url(' . $this->imageProcess()->imageProcessGetURL($f->getImage(), $f->getTitle() . ' - ' . $f->getText(), 660, 440, array(), 'R') . ');', + array('style' => 'background-image:url(' . $this->imageProcess()->imageProcessGetURL($image, $f->getTitle() . ' - ' . $f->getText(), 660, 440, array(), 'R') . ');', 'class' => 'img') ); } diff --git a/images/exemples/publications/shadow.png b/images/exemples/publications/shadow.png index 5d6b537..9887988 100644 Binary files a/images/exemples/publications/shadow.png and b/images/exemples/publications/shadow.png differ diff --git a/js/101-header.js b/js/101-header.js index 1353e54..297969d 100644 --- a/js/101-header.js +++ b/js/101-header.js @@ -80,7 +80,6 @@ function headerScroll() { // We retract the header when user scrolled down of 400px htop = (600 - scrolledDistance) - headerHeight; } - fb(htop); } // Normalize top value $("header").css('top', Math.max(-headerHeight, Math.min(adminHeight, htop + adminHeight))); diff --git a/js/220-exemples.js b/js/220-exemples.js index d64afb2..f74b7b8 100644 --- a/js/220-exemples.js +++ b/js/220-exemples.js @@ -22,4 +22,24 @@ function resizeExemples() { $(".publications").masonry({ itemSelector: "a", }); + + + $(".exemple-fluidbook").each(function () { + var w = parseInt($(this).data('width')); + var h = parseInt($(this).data('height')); + + var container = $(this).closest('a'); + var cw = $(container).outerWidth() * 0.8; + var ch = $(container).outerHeight() * 0.6; + + var s = Math.min(cw / w, ch / h); + + w *= s; + h *= s; + + var left = ((cw / 0.8) - w) / 2; + + + $(this).css({width: w, height: h, left: left,fontSize:(w/600)*10}); + }); } diff --git a/less/220-exemples.less b/less/220-exemples.less index 7a5f193..f4ff8b5 100644 --- a/less/220-exemples.less +++ b/less/220-exemples.less @@ -11,6 +11,7 @@ display: inline-block; text-decoration: none; padding: 25px 30px; + position: relative; font-family: @opensans; font-size: 14px; @@ -34,7 +35,7 @@ font-weight: 400; text-transform: uppercase; line-height: 18px; - margin-bottom:12px; + margin-bottom: 12px; } &:nth-of-type(even) { @@ -63,29 +64,51 @@ background-color: transparent; &:nth-of-type(11n+1) { background: linear-gradient(45deg, rgba(249, 134, 126, 1) 0%, rgba(231, 92, 123, 1) 100%); - button{ - .border-button-fill(#fff,rgba(231, 92, 123, 1)); + button { + .border-button-fill(#fff, rgba(231, 92, 123, 1)); } } &:nth-child(11n+9) { background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%); - button{ - .border-button-fill(#fff,#f6786e); + button { + .border-button-fill(#fff, #f6786e); } } img { height: auto; } - button{ - color:#fff; - border:1px solid #fff; - padding:0 20px; - margin-left:20px; + button { + color: #fff; + border: 1px solid #fff; + padding: 0 20px; + margin-left: 20px; margin-top: 5px; - } } } } +} + +.exemple-fluidbook { + border-right: 1em solid #dddddd; + border-left: 0.2em solid #cfc0c0; + box-shadow: 0 0.4em 0.6em rgba(0, 0, 0, 0.2); + position: absolute; + z-index: 1; + transform-origin: 0 0; + margin: 0 auto; + bottom: 10%; + + .shadow { + background-image: url("/images/exemples/publications/shadow.png"); + background-position: 50% 100%; + background-size: 95% 100%; + width: 105%; + height: 5%; + bottom: -5%; + left: -3%; + position: absolute; + z-index: 0; + } } \ No newline at end of file