(no commit message)

diff --git a/framework/application/forms/CMS/Sub/Parcours/Etape.php b/framework/application/forms/CMS/Sub/Parcours/Etape.php
index 36c308e8b7e4347186c6e8bdf28aa3a696cf5a42..d1c8b3b2908867948bb7973d9b0dae2a7ff8bfe2 100644 (file)
--- a/framework/application/forms/CMS/Sub/Parcours/Etape.php
+++ b/framework/application/forms/CMS/Sub/Parcours/Etape.php
@@ -18,6 +18,11 @@ class CCGM_Form_CMS_Sub_Parcours_Etape extends CubeIT_Form_SubForm {
                $contenu->setAttrib('rows', 5);
                $this->addElement($contenu);
 
+               $grand = new Zend_Form_Element_Select('grand');
+               $grand->setLabel('Taille');
+               $grand->setMultiOptions(array('0' => 'Petite', '1' => 'Moyenne', '2' => 'Grande'));
+               $this->addElement($grand);
+
                $couleur = new Zend_Form_Element_Select('couleur');
                $couleur->setLabel('Couleur');
                $couleur->setMultiOptions(array('orange' => 'Orange', 'vert' => 'Vert', 'bleu' => 'Bleu', 'petrole' => 'Petrole', 'rose' => 'Rose'));

diff --git a/framework/application/views/helpers/Etapes.php b/framework/application/views/helpers/Etapes.php
index 96f3d095fb3eb87af358562fd7ace178dcb25ab1..34af26c505181da4890c6fe1ad298cedf79f7c88 100644 (file)
--- a/framework/application/views/helpers/Etapes.php
+++ b/framework/application/views/helpers/Etapes.php
@@ -16,7 +16,7 @@ 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" data-color="' . $e['couleur'] . '" data-y="' . $pos['top'] . '" data-x="' . $pos['left'] . '">';
+               $res = '<div class="etape" data-size="' . $e['grand'] . '" data-color="' . $e['couleur'] . '" data-y="' . $pos['top'] . '" data-x="' . $pos['left'] . '">';
                $res.='<div class="pastille"></div>';
                $res.='<div class="face">';
                if ($e['titre']) {

diff --git a/js/parcours.js b/js/parcours.js
index 6aaa00b468177f3b84766c5cc9786b495fbd77aa..2e283f5061b3ca2f529576ff9a52e95e173ece59 100644 (file)
--- a/js/parcours.js
+++ b/js/parcours.js
@@ -1,14 +1,15 @@
 (function($) {\r
        function JQparcours(element) {\r
+\r
+               this.element = element;\r
+\r
                this.diameterOpen = 306;\r
                this.marginOpen = 15;\r
+\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
@@ -31,8 +32,10 @@
                        $(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
+                       var openSize = this.getOpenSize(e);\r
+\r
+                       innerCircle.animate({r: (openSize.diameterOpen - openSize.marginOpen * 2) / 2}, this.speed);\r
+                       outerCircle.animate({r: openSize.diameterOpen / 2}, this.speed);\r
                },\r
                out: function(e) {\r
                        $(e).css('z-index', 0);\r
@@ -46,13 +49,15 @@
                        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
+                       var openSize = this.getOpenSize(e);\r
+\r
+                       var middle = openSize.size / 2;\r
+                       var paper = Raphael($(e).find('.pastille').get(0), openSize.size, openSize.size);\r
+                       var outerCircle = paper.circle(openSize.center, openSize.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
+                       var innerCircle = paper.circle(openSize.center, openSize.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
@@ -61,34 +66,46 @@
                                        .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
+                       $(e).css({top: parseFloat($(e).data('y')) - openSize.center,\r
+                               left: parseFloat($(e).data('x')) - openSize.center,\r
+                               width: openSize.size, height: openSize.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
+                       var s = (openSize.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
+                               top: (openSize.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
+                       var pilesize = openSize.diameterOpen - openSize.marginOpen * 2 - 40;\r
+                       s = (openSize.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
+                               top: (openSize.size - h) / 2\r
                        }).hide();\r
                },\r
+               getOpenSize: function(etape) {\r
+                       var res = {diameterOpen: this.diameterOpen, marginOpen: this.marginOpen};\r
+                       if ($(etape).data('size') == 1) {\r
+                               res.diameterOpen += 40;\r
+                       } else if ($(etape).data('size') == 2) {\r
+                               res.diameterOpen += 80;\r
+                       }\r
+\r
+                       res.size = res.diameterOpen + 10;\r
+                       res.center = res.size / 2;\r
+                       return res;\r
+               },\r
                getColor: function(name, where) {\r
                        var c;\r
                        if (name == 'orange') {\r

diff --git a/less/parcours.less b/less/parcours.less
index fc2ca854b837b0c23f6fcf8662241749934a3eef..bf81a64d4f15b3a83ce027f149dce42a52de6833 100644 (file)
--- a/less/parcours.less
+++ b/less/parcours.less
@@ -2,22 +2,21 @@
        &[data-nb="6"]{
                background-image: url("../images/etapes6.png");
                width:721px;
-       height:477px;
+               height:477px;
        }
        &[data-nb="7"]{
                background-image: url("../images/etapes7.png");
                width:709px;
-       height:477px;
+               height:477px;
        }
        position:relative;
-       
+
        margin:140px 0 150px -20px;
 
        .etape{
                position:absolute;
                color:#fff;
 
-
                .pastille{
                        position:absolute;
                        z-index: 0;
@@ -54,6 +53,7 @@
                        z-index: 2;
                        display:none;
                        text-align: center;
+                       font-size: 14px;
                }
        }
 }
\ No newline at end of file