(no commit message)

diff --git a/524d6eb0-plan_acces_01.jpg b/524d6eb0-plan_acces_01.jpg
deleted file mode 100644 (file)
index c13eaed..0000000
Binary files a/524d6eb0-plan_acces_01.jpg and /dev/null differ

diff --git a/framework/application/views/helpers/Etapes.php b/framework/application/views/helpers/Etapes.php
index a5dd5a51e37118bbda9375c2e829fcf6d95a552f..96f3d095fb3eb87af358562fd7ace178dcb25ab1 100644 (file)
--- a/framework/application/views/helpers/Etapes.php
+++ b/framework/application/views/helpers/Etapes.php
@@ -3,10 +3,11 @@
 class CCGM_View_Helper_Etapes extends Zend_View_Helper_Abstract {
 
        public function etapes($etapes) {
-               $res = '<div id="etapes">';
                $nb = count($etapes);
+               $res = '<div id="etapes" data-nb="' . $nb . '">';
+
                foreach ($etapes as $k => $etape) {
-                       $res.=$this->_etape($etape, $k+1, $nb);
+                       $res.=$this->_etape($etape, $k + 1, $nb);
                }
                $res.='</div>';
 
@@ -15,13 +16,20 @@ class CCGM_View_Helper_Etapes extends Zend_View_Helper_Abstract {
 
        protected function _etape($e, $i, $total) {
                $pos = $this->_getPosition($i, $total);
-               $res = '<div class="etape ' . $e['couleur'] . '" style="top:' . $pos['top'] . 'px;left:' . $pos['left'] . 'px;">';
+               $res = '<div class="etape" data-color="' . $e['couleur'] . '" data-y="' . $pos['top'] . '" data-x="' . $pos['left'] . '">';
+               $res.='<div class="pastille"></div>';
                $res.='<div class="face">';
-               $res.='<h3>' . $e['titre'] . '</h3>';
-               $res.='<h4>' . $e['soustitre'] . '</h4>';
+               if ($e['titre']) {
+                       $res.='<h3>' . $e['titre'] . '</h3>';
+               }
+               if ($e['soustitre']) {
+                       $res.='<h4>' . $e['soustitre'] . '</h4>';
+               }
                $res.='</div>';
+               $res.='<div class="pile">';
                $res.=$this->view->markupDotclear($e['contenu']);
                $res.='</div>';
+               $res.='</div>';
                return $res;
        }
 
@@ -30,10 +38,15 @@ class CCGM_View_Helper_Etapes extends Zend_View_Helper_Abstract {
                        2 => array(451, 2),
                        3 => array(618, 213),
                        4 => array(281, 241),
-                       5 => array(3, 391),
-                       6 => array(295, 467),
-                       7 => array(596, 431),
                );
+               if ($total == 6) {
+                       $dim[5] = array(179, 461);
+                       $dim[6] = array(596, 431);
+               } elseif ($total == 7) {
+                       $dim[5] = array(3, 391);
+                       $dim[6] = array(295, 467);
+                       $dim[7] = array(596, 431);
+               }
 
                $d = $dim[$i];
                return array('left' => $d[0], 'top' => $d[1]);

diff --git a/framework/application/views/scripts/templates/parcours.phtml b/framework/application/views/scripts/templates/parcours.phtml
index ec9b56072a8f3ec1c63c54cc0116b26f05583939..bec71814fe5a6b71c59f240876b622dbbe4d5d82 100644 (file)
--- a/framework/application/views/scripts/templates/parcours.phtml
+++ b/framework/application/views/scripts/templates/parcours.phtml
@@ -1,4 +1,5 @@
 <?php\r
+$this->headScript()->addRaphael();\r
 $this->headScript()->addScriptAndStyle('parcours');\r
 ?>\r
 <section id="content">\r

diff --git a/images/etapes.png b/images/etapes.png
deleted file mode 100644 (file)
index f4181ef..0000000
Binary files a/images/etapes.png and /dev/null differ

diff --git a/images/etapes6.png b/images/etapes6.png
new file mode 100644 (file)
index 0000000..1d99e96
Binary files /dev/null and b/images/etapes6.png differ

diff --git a/images/etapes7.png b/images/etapes7.png
new file mode 100644 (file)
index 0000000..f4181ef
Binary files /dev/null and b/images/etapes7.png differ

diff --git a/js/parcours.js b/js/parcours.js
new file mode 100644 (file)
index 0000000..6aaa00b
--- /dev/null
+++ b/js/parcours.js
@@ -0,0 +1,120 @@
+(function($) {\r
+       function JQparcours(element) {\r
+               this.diameterOpen = 306;\r
+               this.marginOpen = 15;\r
+               this.diameterClose = 188;\r
+               this.marginClose = 10;\r
+               this.size = this.diameterOpen + 10;\r
+               this.center = this.size / 2;\r
+               this.speed = 150;\r
+\r
+               this.element = element;\r
+               this.init();\r
+       }\r
+\r
+       JQparcours.prototype = {\r
+               init: function() {\r
+                       var $this = this;\r
+                       this.element.find('.etape').each(function() {\r
+                               $this.initEtape(this);\r
+                       }).on('mouseenter', function() {\r
+                               $this.over(this);\r
+                       }).on('mouseleave', function() {\r
+                               $this.out(this);\r
+                       });\r
+               },\r
+               over: function(e) {\r
+                       $(e).css('z-index', 3);\r
+                       var innerCircle = $(e).data('innerCircle');\r
+                       var outerCircle = $(e).data('outerCircle');\r
+\r
+                       $(e).find(".pile").show();\r
+                       $(e).find('.face').hide();\r
+\r
+                       innerCircle.animate({r: (this.diameterOpen - this.marginOpen * 2) / 2}, this.speed);\r
+                       outerCircle.animate({r: this.diameterOpen / 2}, this.speed);\r
+               },\r
+               out: function(e) {\r
+                       $(e).css('z-index', 0);\r
+                       var innerCircle = $(e).data('innerCircle');\r
+                       var outerCircle = $(e).data('outerCircle');\r
+\r
+                       $(e).find(".pile").hide();\r
+                       $(e).find('.face').show();\r
+\r
+                       innerCircle.animate({r: (this.diameterClose - this.marginClose * 2) / 2}, this.speed);\r
+                       outerCircle.animate({r: this.diameterClose / 2}, this.speed);\r
+               },\r
+               initEtape: function(e) {\r
+                       var middle = this.size / 2;\r
+                       var paper = Raphael($(e).find('.pastille').get(0), this.size, this.size);\r
+                       var outerCircle = paper.circle(this.center, this.center, this.diameterClose / 2);\r
+                       outerCircle.attr('fill', this.getColor($(e).data('color')));\r
+                       outerCircle.attr('fill-opacity', 0.6);\r
+                       outerCircle.attr('stroke', 'none');\r
+                       var innerCircle = paper.circle(this.center, this.center, (this.diameterClose - this.marginClose * 2) / 2);\r
+                       innerCircle.attr('fill', this.getColor($(e).data('color')));\r
+                       innerCircle.attr('fill-opacity', 1);\r
+                       innerCircle.attr('stroke', 'none');\r
+                       $(e).append(paper);\r
+                       $(e).data('paper', paper)\r
+                                       .data('innerCircle', innerCircle)\r
+                                       .data('outerCircle', outerCircle);\r
+\r
+                       $(e).css({top: parseFloat($(e).data('y')) - this.center,\r
+                               left: parseFloat($(e).data('x')) - this.center,\r
+                               width: this.size, height: this.size});\r
+\r
+                       var face = $(e).find('.face');\r
+                       var facesize = this.diameterClose - this.marginClose * 2 - 40;\r
+                       var s = (this.size - facesize) / 2;\r
+                       $(face).css({\r
+                               width: facesize,\r
+                               left: s\r
+                       });\r
+                       var h = $(face).height();\r
+                       $(face).css({\r
+                               top: (this.size - h) / 2\r
+                       });\r
+\r
+                       var pile = $(e).find('.pile');\r
+                       var pilesize = this.diameterOpen - this.marginOpen * 2 - 40;\r
+                       s = (this.size - pilesize) / 2;\r
+                       $(pile).css({\r
+                               width: pilesize,\r
+                               left: s,\r
+                       }).show();\r
+                       var h = $(pile).height();\r
+                       $(pile).css({\r
+                               top: (this.size - h) / 2\r
+                       }).hide();\r
+               },\r
+               getColor: function(name, where) {\r
+                       var c;\r
+                       if (name == 'orange') {\r
+                               c = '#fa9235';\r
+                       } else if (name == 'bleu') {\r
+                               c = '#48c7f4';\r
+                       } else if (name == 'petrole') {\r
+                               c = '#2183a5';\r
+                       } else if (name == 'vert') {\r
+                               c = '#afbc19';\r
+                       } else if (name == 'rose') {\r
+                               c = '#e92699';\r
+                       }\r
+                       return c;\r
+               },\r
+       };\r
+\r
+       jQuery.fn.parcours = function() {\r
+               return this.each(function() {\r
+                       var $this = $(this);\r
+                       $(this).data('parcours', new JQparcours($this));\r
+               })\r
+       };\r
+})(jQuery);\r
+\r
+TO_LOAD_ONCE[TO_LOAD_ONCE.length] = 'load_parcours();';\r
+function load_parcours() {\r
+       $("#etapes").parcours();\r
+}
\ No newline at end of file

diff --git a/less/parcours.less b/less/parcours.less
index 6ac36c86332d3dbfdeb1114f673fb71fa77a5ae8..fc2ca854b837b0c23f6fcf8662241749934a3eef 100644 (file)
--- a/less/parcours.less
+++ b/less/parcours.less
@@ -1,11 +1,59 @@
 #etapes{
-       background-image: url("../images/etapes.png");
-       position:relative;
-       width:709px;
+       &[data-nb="6"]{
+               background-image: url("../images/etapes6.png");
+               width:721px;
+       height:477px;
+       }
+       &[data-nb="7"]{
+               background-image: url("../images/etapes7.png");
+               width:709px;
        height:477px;
-       margin:140px 0 50px -20px;
+       }
+       position:relative;
        
+       margin:140px 0 150px -20px;
+
        .etape{
                position:absolute;
+               color:#fff;
+
+
+               .pastille{
+                       position:absolute;
+                       z-index: 0;
+                       cursor: pointer;
+               }
+
+               .face{
+                       position: absolute;
+                       z-index: 1;
+                       margin:0 auto;
+
+                       h3,h4{
+                               color:#fff;
+                               font-weight: 400 !important;
+                               margin:0;
+                               text-align: center;
+                               text-transform: none;
+                       }
+
+                       h3{
+                               font-size: 22px;
+                               line-height: 24px;
+                               margin:5px 0;
+                       }
+
+                       h4{
+                               font-size: 14px;
+                               line-height: 16px;
+                       }
+               }
+
+               .pile{
+                       position:absolute;
+                       z-index: 2;
+                       display:none;
+                       text-align: center;
+               }
        }
 }
\ No newline at end of file