wip #487 @5

diff --git a/framework/application/forms/CMS/Sub/Exemples/Fluidbook.php b/framework/application/forms/CMS/Sub/Exemples/Fluidbook.php
index de0de44d5318779392be4db725f06564ff0e59d3..329e6579becca0888776a1421c0b056862f20e14 100644 (file)
--- 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')\r
                        ->setTitleColumn("title")\r
                        ->setAdditionnalColumns(array('fluidbook_id', 'featured', 'date'))\r
-                       ->setSearchColumns(array('text', 'fluidbook_id'));\r
+                       ->setSearchColumns(array('text', 'fluidbook_id', 'title'));\r
        }\r
 }
\ No newline at end of file

diff --git a/framework/application/views/helpers/ExemplePublication.php b/framework/application/views/helpers/ExemplePublication.php
index 74770f0134f5a489129868513d227e40199c55de..17863136b33bd63653c4788467422df6b1f720bf 100644 (file)
--- 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'),\r
                );\r
 \r
+               $left = $this->_getPage($fluidbook_id, $page);\r
+               $right = $this->_getPage($fluidbook_id, $page + 1);\r
+\r
+               $ratio = $left['width'] / $left['height'];\r
+\r
                $backgrounds = array();\r
-               $backgrounds[] = array('image' => $this->_getPage($fluidbook_id, $page, array('class' => 'left')), 'size' => '', 'position' => '0,0', 'blendmode' => null);\r
-               $backgrounds[] = array('image' => $this->_getPage($fluidbook_id, $page + 1, array('class' => 'right')), 'size' => '', 'position' => '0,100%', 'blendmode' => 'normal');\r
-               $backgrounds[] = array('image' => '/images/exemples/publications/dark.png', 'size' => '', 'position' => '', 'blendmode' => '');\r
-               $backgrounds[] = array('image' => '/images/exemples/publications/light.png', 'size' => '', 'position' => '', 'blendmode' => '');\r
-               $backgrounds[] = array('image' => '/images/exemples/publications/shadow.png', 'size' => '', 'position' => '', 'blendmode' => '');\r
+               //              $backgrounds[] = array('image' => '/images/exemples/publications/shadow.png', 'size' => '100% 10%', 'position' => '0 95%', 'blendmode' => null);\r
+               $backgrounds[] = array('image' => $left['url'], 'size' => '50% 100%', 'position' => '0 0', 'blendmode' => null);\r
+               $backgrounds[] = array('image' => $right['url'], 'size' => '50% 100%', 'position' => '100% 0', 'blendmode' => 'normal');\r
+               $backgrounds[] = array('image' => '/images/exemples/publications/light.png', 'size' => '30% 100%', 'position' => '50% 0', 'blendmode' => 'overlay');\r
+               $backgrounds[] = array('image' => '/images/exemples/publications/dark.png', 'size' => '20% 100%', 'position' => '50% 0', 'blendmode' => 'multiply');\r
+\r
+\r
+               $backgrounds = array_reverse($backgrounds);\r
 \r
 \r
                $res = '<style type="text/css">';\r
@@ -43,21 +51,24 @@ class Fluidbook_View_Helper_ExemplePublication extends CubeIT_View_Helper_Abstra
 \r
                $res .= '}';\r
                $res .= '</style>';\r
-               $res .= $this->htmlElement('', 'div', array('class' => 'exemple-fluidbook', 'id' => $cssid));\r
+               $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']));\r
                return $res;\r
        }\r
 \r
        protected function _getPage($fluidbook_id, $page) {\r
                $path = 'fluidbook/' . $fluidbook_id . '/';\r
-               $dir = PUBLIC_PATH . $path;\r
+               $dir = FILES_PATH . '/' . $path;\r
                if (!file_exists($dir)) {\r
                        mkdir($dir, 0777, true);\r
                }\r
+\r
                $url = '/files/' . $path . $page . '.jpg';\r
                $file = $dir . $page . '.jpg';\r
                if (!file_exists($file)) {\r
-                       file_put_contents($file, file_get_contents('https://workshop.fluidbook.com/viewerh/' . $fluidbook_id . '_bcf26f9cf4a795ec00b9a44f42750d58_1234567890/data/background/150/t' . $page . '.jpg'));\r
+                       $url = 'https://workshop.fluidbook.com/viewerh/' . $fluidbook_id . '_bcf26f9cf4a795ec00b9a44f42750d58_1234567890/data/background/150/t' . $page . '.jpg';\r
+                       file_put_contents($file, file_get_contents($url));\r
                }\r
-               return $url;\r
+               $size = CubeIT_Image::getDimensions($file, $width, $height);\r
+               return array('url' => $url, 'width' => $width, 'height' => $height);\r
        }\r
 }
\ No newline at end of file

diff --git a/framework/application/views/helpers/Exemples.php b/framework/application/views/helpers/Exemples.php
index 9063568462c632ec432e63c8dc32eb2c817f5310..c56db67e0acf014ff2ad21ed87d596a723926ff9 100644 (file)
--- 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\r
         */\r
        public function exemples($category, $title, $nb) {\r
+               $this->headScript()->addMasonry()->addJQueryTransform();\r
                $this->headScript()->addScriptAndStyle('220-exemples');\r
-               $this->headScript()->addMasonry();\r
 \r
                $exemples = Fluidbook_Model_Reference::factory()->order('date DESC')->find();\r
 \r
@@ -17,9 +17,6 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
                $featured = array();\r
                $normal = array();\r
                foreach ($exemples as $id => $exemple) {\r
-\r
-                       fb($exemple->getCategories());\r
-\r
                        if ($category > 0 && !in_array($category, $exemple->getCategories())) {\r
                                continue;\r
                        }\r
@@ -31,10 +28,6 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
                        }\r
                }\r
 \r
-               fb($featured);\r
-               fb($normal);\r
-\r
-\r
                $nb_featured = count($featured);\r
                if ($nb_featured < $max_featured) {\r
                        for ($i = $nb_featured; $i < $max_featured; $i++) {\r
@@ -86,12 +79,13 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
                        $res .= $this->htmlElement($f->getText(), 'p');\r
                }\r
 \r
+               $image = CubeIT_Util_Cms::extractFile($f->getImage());\r
 \r
-               if ($f->getFluidbookId()) {\r
+               if (!$image && $f->getFluidbookId()) {\r
                        $res .= $this->exemplePublication($f->getFluidbookId(), $f->getFluidbookPage());\r
                } else {\r
                        $res .= $this->htmlElement('', 'div',\r
-                               array('style' => 'background-image:url(' . $this->imageProcess()->imageProcessGetURL($f->getImage(), $f->getTitle() . ' - ' . $f->getText(), 660, 440, array(), 'R') . ');',\r
+                               array('style' => 'background-image:url(' . $this->imageProcess()->imageProcessGetURL($image, $f->getTitle() . ' - ' . $f->getText(), 660, 440, array(), 'R') . ');',\r
                                      'class' => 'img')\r
                        );\r
                }\r

diff --git a/images/exemples/publications/shadow.png b/images/exemples/publications/shadow.png
index 5d6b5373e2e42191e2370fe43de28bc95e451f35..988798842bbfa206de0d66ade22d7461ee4874e1 100644 (file)
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 1353e54d24a7de57a3551b545c388244270a2237..297969d0a8191bd95a42442ad39ae2f6bf1b8ba5 100644 (file)
--- 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\r
             htop = (600 - scrolledDistance) - headerHeight;\r
         }\r
-        fb(htop);\r
     }\r
     // Normalize top value\r
     $("header").css('top', Math.max(-headerHeight, Math.min(adminHeight, htop + adminHeight)));\r

diff --git a/js/220-exemples.js b/js/220-exemples.js
index d64afb22443a2ce7b9766ad78b386d6d3e6e8284..f74b7b8adb73759b4b581a759982aefdcaf8d769 100644 (file)
--- a/js/220-exemples.js
+++ b/js/220-exemples.js
@@ -22,4 +22,24 @@ function resizeExemples() {
     $(".publications").masonry({\r
         itemSelector: "a",\r
     });\r
+\r
+\r
+    $(".exemple-fluidbook").each(function () {\r
+        var w = parseInt($(this).data('width'));\r
+        var h = parseInt($(this).data('height'));\r
+\r
+        var container = $(this).closest('a');\r
+        var cw = $(container).outerWidth() * 0.8;\r
+        var ch = $(container).outerHeight() * 0.6;\r
+\r
+        var s = Math.min(cw / w, ch / h);\r
+\r
+        w *= s;\r
+        h *= s;\r
+\r
+        var left = ((cw / 0.8) - w) / 2;\r
+\r
+\r
+        $(this).css({width: w, height: h, left: left,fontSize:(w/600)*10});\r
+    });\r
 }\r

diff --git a/less/220-exemples.less b/less/220-exemples.less
index 7a5f19366c20d97e3d990c484709bd0cb79f43bd..f4ff8b53ccc8cf2fe5e8e9b9a4ce2f639f3febf8 100644 (file)
--- a/less/220-exemples.less
+++ b/less/220-exemples.less
@@ -11,6 +11,7 @@
                        display: inline-block;\r
                        text-decoration: none;\r
                        padding: 25px 30px;\r
+                       position: relative;\r
 \r
                        font-family: @opensans;\r
                        font-size: 14px;\r
@@ -34,7 +35,7 @@
                                font-weight: 400;\r
                                text-transform: uppercase;\r
                                line-height: 18px;\r
-                               margin-bottom:12px;\r
+                               margin-bottom: 12px;\r
                        }\r
 \r
                        &:nth-of-type(even) {\r
@@ -63,29 +64,51 @@
                                background-color: transparent;\r
                                &:nth-of-type(11n+1) {\r
                                        background: linear-gradient(45deg, rgba(249, 134, 126, 1) 0%, rgba(231, 92, 123, 1) 100%);\r
-                                       button{\r
-                                               .border-button-fill(#fff,rgba(231, 92, 123, 1));\r
+                                       button {\r
+                                               .border-button-fill(#fff, rgba(231, 92, 123, 1));\r
                                        }\r
                                }\r
                                &:nth-child(11n+9) {\r
                                        background: linear-gradient(45deg, #f5aa72 0%, #f6786e 100%);\r
-                                       button{\r
-                                               .border-button-fill(#fff,#f6786e);\r
+                                       button {\r
+                                               .border-button-fill(#fff, #f6786e);\r
                                        }\r
                                }\r
                                img {\r
                                        height: auto;\r
                                }\r
-                               button{\r
-                                       color:#fff;\r
-                                       border:1px solid #fff;\r
-                                       padding:0 20px;\r
-                                       margin-left:20px;\r
+                               button {\r
+                                       color: #fff;\r
+                                       border: 1px solid #fff;\r
+                                       padding: 0 20px;\r
+                                       margin-left: 20px;\r
                                        margin-top: 5px;\r
 \r
-\r
                                }\r
                        }\r
                }\r
        }\r
+}\r
+\r
+.exemple-fluidbook {\r
+       border-right: 1em solid #dddddd;\r
+       border-left: 0.2em solid #cfc0c0;\r
+       box-shadow: 0 0.4em 0.6em rgba(0, 0, 0, 0.2);\r
+       position: absolute;\r
+       z-index: 1;\r
+       transform-origin: 0 0;\r
+       margin: 0 auto;\r
+       bottom: 10%;\r
+\r
+       .shadow {\r
+               background-image: url("/images/exemples/publications/shadow.png");\r
+               background-position: 50% 100%;\r
+               background-size: 95% 100%;\r
+               width: 105%;\r
+               height: 5%;\r
+               bottom: -5%;\r
+               left: -3%;\r
+               position: absolute;\r
+               z-index: 0;\r
+       }\r
 }
\ No newline at end of file