done #535 @4

diff --git a/framework/application/forms/CMS/Sub/Exemples/Category.php b/framework/application/forms/CMS/Sub/Exemples/Category.php
index d5c2bb57853ee0c17af475041ad77251848c5022..b7e401cd73cabb0a6432c84c05e467dfbda4d3b2 100644 (file)
--- a/framework/application/forms/CMS/Sub/Exemples/Category.php
+++ b/framework/application/forms/CMS/Sub/Exemples/Category.php
@@ -12,6 +12,10 @@ class Fluidbook_Form_CMS_Sub_Exemples_Category extends CubeIT_Form_List_Model {
                $title->setLabel('Nom');\r
                $this->addElementLocalized($title, false);\r
 \r
+               $link = new Zend_Form_Element_Text('linklabel');\r
+               $link->setLabel('Label du lien « voir d\'autres ... »');\r
+               $this->addElementLocalized($link, false);\r
+\r
                $sortorder = new CubeIT_Form_Element_Int('sortorder');\r
                $sortorder->setLabel('Ordre');\r
                $this->addElement($sortorder);\r

diff --git a/framework/application/models/Reference/Category.php b/framework/application/models/Reference/Category.php
index 8f38b6de334c14de17e25fec4507bed570ae447b..ebf66178ffe152097e85ca0e359494bb47f8e7fb 100644 (file)
--- a/framework/application/models/Reference/Category.php
+++ b/framework/application/models/Reference/Category.php
@@ -6,15 +6,17 @@
  * Date: 24/06/2016\r
  * Time: 16:38\r
  */\r
-class Fluidbook_Model_Reference_Category extends CubeIT_Model_Data_Table{\r
+class Fluidbook_Model_Reference_Category extends CubeIT_Model_Data_Table {\r
        protected static $_table = 'exemples_categories';\r
 \r
        protected $name;\r
        protected $sortorder;\r
+       protected $linklabel;\r
 \r
        public static function getSchema($schema) {\r
                $table = parent::getSchema($schema);\r
                $table->addColumn('name', 'text');\r
+               $table->addColumn('linklabel', 'text');\r
                $table->addColumn('sortorder', 'integer');\r
                return $table;\r
        }\r

diff --git a/framework/application/views/helpers/Exemples.php b/framework/application/views/helpers/Exemples.php
index c56db67e0acf014ff2ad21ed87d596a723926ff9..d1228432867fea4fb725428667fc8693138a4773 100644 (file)
--- a/framework/application/views/helpers/Exemples.php
+++ b/framework/application/views/helpers/Exemples.php
@@ -1,6 +1,10 @@
 <?php\r
 \r
 class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {\r
+\r
+       protected $_categories;\r
+       protected $_j = 0;\r
+\r
        /**\r
         * @return string\r
         */\r
@@ -9,6 +13,7 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
                $this->headScript()->addScriptAndStyle('220-exemples');\r
 \r
                $exemples = Fluidbook_Model_Reference::factory()->order('date DESC')->find();\r
+               $this->_categories = Fluidbook_Model_Reference_Category::factory()->find();\r
 \r
                $max_featured = floor($nb / 5);\r
                $normal_per_featured = 4;\r
@@ -43,16 +48,16 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
                $publications = '';\r
                for ($i = 0; $i < $max_featured; $i++) {\r
                        if ($i % 2 == 0) {\r
-                               $publications .= $this->_publication($exemples[$featured[$i]], true);\r
+                               $publications .= $this->_publication($exemples[$featured[$i]], $category, $i * 4, true);\r
                        }\r
                        for ($j = 0; $j < $normal_per_featured; $j++) {\r
                                $k = ($i * $normal_per_featured) + $j;\r
                                if ($j == 2 && $i % 2 == 1) {\r
-                                       $publications .= $this->_publication($exemples[$featured[$i]], true);\r
+                                       $publications .= $this->_publication($exemples[$featured[$i]], $category, $i * 4, true);\r
                                } else if ($j == 2 && $i % 2 == 0) {\r
-                                       $publications .= $this->link('', '#', array('class' => 'empty'));\r
+                                       $publications .= $this->htmlElement('', 'article', array('class' => 'empty'));\r
                                }\r
-                               $publications .= $this->_publication($exemples[$normal[$k]], false);\r
+                               $publications .= $this->_publication($exemples[$normal[$k]], $category, ($i * 4) + $j, false);\r
                        }\r
 \r
                }\r
@@ -66,19 +71,20 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
         * @param $f Fluidbook_Model_Reference\r
         * @param bool $featured\r
         */\r
-       protected function _publication($f, $featured = false) {\r
+       protected function _publication($f, $category, $i, $featured = false) {\r
                if (null === $f) {\r
                        return;\r
                }\r
                $f = $f->unserialize();\r
 \r
                $res = '';\r
-               $res .= $this->htmlElement(__('Voir le Fluidbook'), 'button', array('type' => 'button'));\r
+\r
                $res .= $this->htmlElement($f->getTitle(), 'h3');\r
                if ($featured) {\r
                        $res .= $this->htmlElement($f->getText(), 'p');\r
                }\r
 \r
+\r
                $image = CubeIT_Util_Cms::extractFile($f->getImage());\r
 \r
                if (!$image && $f->getFluidbookId()) {\r
@@ -89,11 +95,40 @@ class Fluidbook_View_Helper_Exemples extends CubeIT_View_Helper_Abstract {
                                      'class' => 'img')\r
                        );\r
                }\r
-               $attrs = array();\r
+               $attrs = array('data-j' => ++$this->_j, 'data-i' => $i);\r
                if ($featured) {\r
                        $attrs['class'] = 'featured';\r
                }\r
 \r
-               return $this->link($res, $f->getUrl(), $attrs);\r
+               $res .= $this->_rollover($f, $category);\r
+               return $this->htmlElement($res, 'article', $attrs);\r
+       }\r
+\r
+       protected function _rollover($f, $category) {\r
+               $res = '';\r
+               if ($f->getUrl()) {\r
+                       $res = $this->link(__('Voir le Fluidbook'), $f->getUrl(), array('class' => 'button'));\r
+               }\r
+               if ($category == 3) {\r
+                       $firstCat = 0;\r
+                       foreach ($f->getCategories() as $c) {\r
+                               if ($c == 3) {\r
+                                       continue;\r
+                               }\r
+                               $firstCat = $c;\r
+                               break;\r
+                       }\r
+                       if ($firstCat != 0 && isset($this->_categories[$firstCat])) {\r
+                               $cat = $this->_categories[$firstCat]->unserialize();\r
+                               $pages = CubeIT_Util_Cms::findPagesByContent('category', $cat->getId());\r
+                               shuffle($pages);\r
+\r
+                               if (count($pages) > 0) {\r
+                                       $res .= $this->link($cat->getLinklabel(), 'internal:' . $pages[0], array('class' => 'others'));\r
+                               }\r
+                       }\r
+\r
+               }\r
+               return $this->htmlElement($res, 'div', array('class' => 'more'));\r
        }\r
 }
\ No newline at end of file

diff --git a/js/220-exemples.js b/js/220-exemples.js
index ed7c72a4d7db0f5ab18f6d5f34fca653e0c4effa..cefccff7b5986ccf9289d736cea5782d81475785 100644 (file)
--- a/js/220-exemples.js
+++ b/js/220-exemples.js
@@ -5,9 +5,9 @@ function load_exemples() {
     resizeExemples();\r
 \r
     $(".publications").masonry({\r
-        itemSelector: "a",\r
+        itemSelector: "article",\r
         fitWidth: true,\r
-        columnWidth: "a:not(.featured)",\r
+        columnWidth: "article:not(.featured)",\r
         transitionDuration: 0,\r
     });\r
 \r
@@ -17,10 +17,10 @@ function resizeExemples() {
     var ww = $('main').width() * 0.9;\r
 \r
     $(".publications").css('width', ww);\r
-    $('.publications a.featured').css({width: (ww / 2), height: ww / 2});\r
-    $('.publications a:not(.featured)').css({width: (ww / 4), height: ww / 4});\r
+    $('.publications article.featured').css({width: (ww / 2), height: ww / 2});\r
+    $('.publications article:not(.featured)').css({width: (ww / 4), height: ww / 4});\r
     $(".publications").masonry({\r
-        itemSelector: "a",\r
+        itemSelector: "article",\r
     });\r
 \r
 \r
@@ -28,7 +28,7 @@ function resizeExemples() {
         var w = parseInt($(this).data('width'));\r
         var h = parseInt($(this).data('height'));\r
 \r
-        var container = $(this).closest('a');\r
+        var container = $(this).closest('article');\r
         var cw = $(container).outerWidth() * 0.8;\r
         var ch = $(container).outerHeight() * 0.6;\r
 \r

diff --git a/less/220-exemples.less b/less/220-exemples.less
index e09f7e2c13e993d6c025f50f75f9dc0b481d920d..5fec862197412ecf323c3eb5114100f5cab7be0e 100644 (file)
--- a/less/220-exemples.less
+++ b/less/220-exemples.less
@@ -2,7 +2,7 @@
 \r
 .exemples {\r
        .publications {\r
-               a {\r
+               article {\r
                        &.empty {\r
                                display: none;\r
                                width: 0 !important;\r
@@ -15,7 +15,6 @@
 \r
                        font-family: @opensans;\r
                        font-size: 14px;\r
-                       position: relative;\r
                        color: #343c44;\r
 \r
                        .img {\r
@@ -38,6 +37,11 @@
                                margin-bottom: 12px;\r
                        }\r
 \r
+                       p, h3 {\r
+                               position: relative;\r
+                               z-index: 4;\r
+                       }\r
+\r
                        &:nth-of-type(even) {\r
                                background-color: #fff;\r
                        }\r
@@ -45,7 +49,7 @@
                                background-color: @color-light-grey;\r
                        }\r
 \r
-                       button {\r
+                       .button {\r
                                background-color: transparent;\r
                                color: #343c44;\r
                                border: 0;\r
@@ -53,14 +57,16 @@
                                font-family: @montserrat;\r
                                font-weight: 300;\r
                                font-size: 12px;\r
-                               float: right;\r
                                line-height: 18px;\r
-                               margin-bottom: 50px;\r
                                cursor: pointer;\r
                                transition: @transition-time-buttons color;\r
-                               &:hover {\r
-                                       color: @color-green;\r
-                               }\r
+                               float: none;\r
+\r
+                               margin-top: -27px;\r
+                               display: inline-block;\r
+\r
+                               .border-button-fill(#fff, rgba(231, 92, 123, 1));\r
+                               .longarrow-button(20px, 40px, 18px);\r
                        }\r
 \r
                        &.featured {\r
@@ -85,11 +91,42 @@
                                img {\r
                                        height: auto;\r
                                }\r
-                               button {\r
-                                       margin-left: 20px;\r
-                                       margin-top: 5px;\r
-                                       .border-button-fill(#fff, rgba(231, 92, 123, 1));\r
-                                       .longarrow-button(20px, 40px, 18px);\r
+\r
+                               .more {\r
+                                       padding-top: 50%;\r
+                               }\r
+                       }\r
+\r
+                       .more {\r
+                               display: none;\r
+                               position: absolute;\r
+                               width: 100%;\r
+                               height: 100%;\r
+                               top: 0;\r
+                               left: 0;\r
+                               background-color: rgba(52, 60, 68, .8);\r
+                               color: #fff;\r
+                               z-index: 3;\r
+                               text-align: center;\r
+                               padding-top: 45%;\r
+                               a.others {\r
+                                       display: block;\r
+                                       color: #fff;\r
+                                       text-transform: uppercase;\r
+                                       font-family: @montserrat;\r
+                                       font-size: 12px;\r
+                                       font-weight: 300;\r
+                                       margin-top: 35px;\r
+                                       text-decoration: none;\r
+                               }\r
+                       }\r
+\r
+                       &:hover {\r
+                               .more {\r
+                                       display: block;\r
+                               }\r
+                               p, h3 {\r
+                                       color: #ffffff;\r
                                }\r
                        }\r
                }\r