wip #1785 @1

diff --git a/framework/application/views/helpers/News.php b/framework/application/views/helpers/News.php
new file mode 100644 (file)
index 0000000..62b06eb
--- /dev/null
+++ b/framework/application/views/helpers/News.php
@@ -0,0 +1,30 @@
+<?php\r
+\r
+class CCGM_View_Helper_News extends CubeIT_View_Helper_Abstract {\r
+       /**\r
+        * @return string\r
+        */\r
+       public function news() {\r
+               $allnews = CCGM_Model_News::factory()->order('date DESC')->find();\r
+\r
+\r
+               $res = '';\r
+\r
+               foreach ($allnews as $news) {\r
+                       $res .= $this->_news($news);\r
+               }\r
+\r
+               return $this->htmlElement($res, 'section', ['id' => 'news']);\r
+       }\r
+\r
+       protected function _news($n) {\r
+               $res = $this->imageProcess($n->getImage(), '', 200, 200);\r
+               $c = $this->dateTime($n->getDate(), CubeIT_Date::DAY . '/' . CubeIT_Date::MONTH . '/' . CubeIT_Date::YEAR);\r
+               $c .= $this->htmlElement($n->getTitle(), 'h2');\r
+               $c .= $this->markupDotclear($n->getContent());\r
+               $c .= $this->link('Lire la suite', '#', ['class' => 'more']);\r
+               $c .= $this->link('Réduire', '#', ['class' => 'less']);\r
+               $res .= $this->htmlElement($c, 'div', ['class' => 'c']);\r
+               return $this->htmlElement($res, 'article');\r
+       }\r
+}
\ No newline at end of file

diff --git a/framework/application/views/scripts/templates/news.phtml b/framework/application/views/scripts/templates/news.phtml
index 14fcde26563758c2ce3c2a1e96468a7fa12eb2e0..14fbce1f5aae507ac18c5cf4c0a13a9db54a5bee 100644 (file)
--- a/framework/application/views/scripts/templates/news.phtml
+++ b/framework/application/views/scripts/templates/news.phtml
@@ -1,11 +1,13 @@
 <?php\r
 $this->contentWidth = 980;\r
+$this->headScript()->addScriptAndStyle('news');\r
 ?>\r
 \r
 <section id="content">\r
        <div id="c">\r
                <?php\r
                echo $this->markupDotclear($this->text);\r
+               echo $this->news();\r
                ?>\r
        </div>\r
 </section>
\ No newline at end of file

diff --git a/js/news.js b/js/news.js
new file mode 100644 (file)
index 0000000..6f81869
--- /dev/null
+++ b/js/news.js
@@ -0,0 +1,47 @@
+(function ($) {\r
+    function JQnews(element) {\r
+        this.element = element;\r
+        this.init();\r
+    }\r
+\r
+    JQnews.prototype = {\r
+        init: function () {\r
+            var $this = this;\r
+\r
+\r
+            $(this.element).on('click', '.more', function () {\r
+                var c = $(this).closest('.c');\r
+                var d = $(c).find('.dotclear');\r
+                d.css({maxHeight: 999});\r
+                $(this).hide();\r
+                $(c).find('.less').show();\r
+                setTimeout(function () {\r
+                    d.css({maxHeight: d.outerHeight()});\r
+                }, 600);\r
+                return false;\r
+            });\r
+\r
+            $(this.element).on('click', '.less', function () {\r
+                var c = $(this).closest('.c');\r
+                var d = $(c).find('.dotclear');\r
+                d.css({maxHeight: 72});\r
+                $(this).hide();\r
+                $(c).find('.more').show();\r
+                return false;\r
+            });\r
+        }\r
+    };\r
+\r
+    jQuery.fn.news = function () {\r
+        return this.each(function () {\r
+            var $this = $(this);\r
+            if ($(this).data('news') === undefined) {\r
+                $(this).data('news', new JQnews($this));\r
+            }\r
+        })\r
+    };\r
+})(jQuery);\r
+\r
+$(function () {\r
+    $("#news").news();\r
+});
\ No newline at end of file

diff --git a/less/news.less b/less/news.less
new file mode 100644 (file)
index 0000000..6ed209d
--- /dev/null
+++ b/less/news.less
@@ -0,0 +1,74 @@
+#news {\r
+       font-weight: 300;\r
+\r
+       article {\r
+               border-bottom: 1px solid #dad9d9;\r
+               padding-bottom: 48px;\r
+               margin-bottom: 48px;\r
+               &:last-child{\r
+                       border-bottom: none;\r
+                       margin-bottom: 0;\r
+               }\r
+\r
+               img {\r
+                       vertical-align: top;\r
+                       display: inline-block;\r
+                       width: 200px;\r
+                       height: 200px;\r
+                       border-radius: 100px;\r
+               }\r
+\r
+               .c {\r
+                       margin-left: 80px;\r
+                       vertical-align: top;\r
+                       display: inline-block;\r
+                       width: 686px;\r
+                       time {\r
+                               font-size: 13px;\r
+                       }\r
+\r
+                       h2 {\r
+                               color: #5e5e5e;\r
+                               margin: 30px 0 0;\r
+                               font-size: 26px;\r
+                       }\r
+\r
+                       .dotclear {\r
+                               line-height: 24px;\r
+                               max-height: 72px;\r
+                               overflow: hidden;\r
+                               transition: max-height 450ms;\r
+                               margin-bottom: 30px;\r
+                               p:last-child{\r
+                                       margin-bottom: 0;\r
+                               }\r
+                       }\r
+\r
+                       .more, .less {\r
+                               color: #25a1da;\r
+                               font-weight: 500;\r
+                               font-size: 16px;\r
+                               display: block;\r
+                               &:after{\r
+                                       content:"";\r
+                                       display: inline-block;\r
+                                       margin-left: 10px;\r
+                                       width: 15px;\r
+                                       height: 15px;\r
+                                       position: relative;\r
+                                       top: 3px;\r
+                                       background-image: url("/images/arrow-li.svg");\r
+                                       background-size: 100% 100%;\r
+                                       transform: rotate(90deg);\r
+                               }\r
+                       }\r
+\r
+                       .less{\r
+                               display: none;\r
+                               &:after{\r
+                                       transform: rotate(270deg);\r
+                               }\r
+                       }\r
+               }\r
+       }\r
+}
\ No newline at end of file