From 1f7401efea43e7534a34b5682efed093387a3c0d Mon Sep 17 00:00:00 2001 From: "vincent@cubedesigners.com" Date: Tue, 8 Oct 2013 11:37:41 +0000 Subject: [PATCH] --- .../forms/CMS/Sub/Parcours/Etape.php | 5 ++ .../application/views/helpers/Etapes.php | 2 +- js/parcours.js | 51 ++++++++++++------- less/parcours.less | 8 +-- 4 files changed, 44 insertions(+), 22 deletions(-) diff --git a/framework/application/forms/CMS/Sub/Parcours/Etape.php b/framework/application/forms/CMS/Sub/Parcours/Etape.php index 36c308e..d1c8b3b 100644 --- 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 96f3d09..34af26c 100644 --- 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 = '
'; + $res = '
'; $res.='
'; $res.='
'; if ($e['titre']) { diff --git a/js/parcours.js b/js/parcours.js index 6aaa00b..2e283f5 100644 --- a/js/parcours.js +++ b/js/parcours.js @@ -1,14 +1,15 @@ (function($) { function JQparcours(element) { + + this.element = element; + this.diameterOpen = 306; this.marginOpen = 15; + this.diameterClose = 188; this.marginClose = 10; - this.size = this.diameterOpen + 10; - this.center = this.size / 2; this.speed = 150; - this.element = element; this.init(); } @@ -31,8 +32,10 @@ $(e).find(".pile").show(); $(e).find('.face').hide(); - innerCircle.animate({r: (this.diameterOpen - this.marginOpen * 2) / 2}, this.speed); - outerCircle.animate({r: this.diameterOpen / 2}, this.speed); + var openSize = this.getOpenSize(e); + + innerCircle.animate({r: (openSize.diameterOpen - openSize.marginOpen * 2) / 2}, this.speed); + outerCircle.animate({r: openSize.diameterOpen / 2}, this.speed); }, out: function(e) { $(e).css('z-index', 0); @@ -46,13 +49,15 @@ outerCircle.animate({r: this.diameterClose / 2}, this.speed); }, initEtape: function(e) { - var middle = this.size / 2; - var paper = Raphael($(e).find('.pastille').get(0), this.size, this.size); - var outerCircle = paper.circle(this.center, this.center, this.diameterClose / 2); + var openSize = this.getOpenSize(e); + + var middle = openSize.size / 2; + var paper = Raphael($(e).find('.pastille').get(0), openSize.size, openSize.size); + var outerCircle = paper.circle(openSize.center, openSize.center, this.diameterClose / 2); outerCircle.attr('fill', this.getColor($(e).data('color'))); outerCircle.attr('fill-opacity', 0.6); outerCircle.attr('stroke', 'none'); - var innerCircle = paper.circle(this.center, this.center, (this.diameterClose - this.marginClose * 2) / 2); + var innerCircle = paper.circle(openSize.center, openSize.center, (this.diameterClose - this.marginClose * 2) / 2); innerCircle.attr('fill', this.getColor($(e).data('color'))); innerCircle.attr('fill-opacity', 1); innerCircle.attr('stroke', 'none'); @@ -61,34 +66,46 @@ .data('innerCircle', innerCircle) .data('outerCircle', outerCircle); - $(e).css({top: parseFloat($(e).data('y')) - this.center, - left: parseFloat($(e).data('x')) - this.center, - width: this.size, height: this.size}); + $(e).css({top: parseFloat($(e).data('y')) - openSize.center, + left: parseFloat($(e).data('x')) - openSize.center, + width: openSize.size, height: openSize.size}); var face = $(e).find('.face'); var facesize = this.diameterClose - this.marginClose * 2 - 40; - var s = (this.size - facesize) / 2; + var s = (openSize.size - facesize) / 2; $(face).css({ width: facesize, left: s }); var h = $(face).height(); $(face).css({ - top: (this.size - h) / 2 + top: (openSize.size - h) / 2 }); var pile = $(e).find('.pile'); - var pilesize = this.diameterOpen - this.marginOpen * 2 - 40; - s = (this.size - pilesize) / 2; + var pilesize = openSize.diameterOpen - openSize.marginOpen * 2 - 40; + s = (openSize.size - pilesize) / 2; $(pile).css({ width: pilesize, left: s, }).show(); var h = $(pile).height(); $(pile).css({ - top: (this.size - h) / 2 + top: (openSize.size - h) / 2 }).hide(); }, + getOpenSize: function(etape) { + var res = {diameterOpen: this.diameterOpen, marginOpen: this.marginOpen}; + if ($(etape).data('size') == 1) { + res.diameterOpen += 40; + } else if ($(etape).data('size') == 2) { + res.diameterOpen += 80; + } + + res.size = res.diameterOpen + 10; + res.center = res.size / 2; + return res; + }, getColor: function(name, where) { var c; if (name == 'orange') { diff --git a/less/parcours.less b/less/parcours.less index fc2ca85..bf81a64 100644 --- 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 -- 2.39.5