From: vincent@cubedesigners.com <vincent@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Fri, 4 Oct 2013 10:15:05 +0000 (+0000)
Subject: (no commit message)
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e63c5385f83572ce51845e8b7aa1a6dcd63166db;p=ccgm.git

---

diff --git a/524d6eb0-plan_acces_01.jpg b/524d6eb0-plan_acces_01.jpg
deleted file mode 100644
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 a5dd5a5..96f3d09 100644
--- 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 ec9b560..bec7181 100644
--- a/framework/application/views/scripts/templates/parcours.phtml
+++ b/framework/application/views/scripts/templates/parcours.phtml
@@ -1,4 +1,5 @@
 <?php
+$this->headScript()->addRaphael();
 $this->headScript()->addScriptAndStyle('parcours');
 ?>
 <section id="content">
diff --git a/images/etapes.png b/images/etapes.png
deleted file mode 100644
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
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
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
index 0000000..6aaa00b
--- /dev/null
+++ b/js/parcours.js
@@ -0,0 +1,120 @@
+(function($) {
+	function JQparcours(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();
+	}
+
+	JQparcours.prototype = {
+		init: function() {
+			var $this = this;
+			this.element.find('.etape').each(function() {
+				$this.initEtape(this);
+			}).on('mouseenter', function() {
+				$this.over(this);
+			}).on('mouseleave', function() {
+				$this.out(this);
+			});
+		},
+		over: function(e) {
+			$(e).css('z-index', 3);
+			var innerCircle = $(e).data('innerCircle');
+			var outerCircle = $(e).data('outerCircle');
+
+			$(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);
+		},
+		out: function(e) {
+			$(e).css('z-index', 0);
+			var innerCircle = $(e).data('innerCircle');
+			var outerCircle = $(e).data('outerCircle');
+
+			$(e).find(".pile").hide();
+			$(e).find('.face').show();
+
+			innerCircle.animate({r: (this.diameterClose - this.marginClose * 2) / 2}, this.speed);
+			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);
+			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);
+			innerCircle.attr('fill', this.getColor($(e).data('color')));
+			innerCircle.attr('fill-opacity', 1);
+			innerCircle.attr('stroke', 'none');
+			$(e).append(paper);
+			$(e).data('paper', paper)
+					.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});
+
+			var face = $(e).find('.face');
+			var facesize = this.diameterClose - this.marginClose * 2 - 40;
+			var s = (this.size - facesize) / 2;
+			$(face).css({
+				width: facesize,
+				left: s
+			});
+			var h = $(face).height();
+			$(face).css({
+				top: (this.size - h) / 2
+			});
+
+			var pile = $(e).find('.pile');
+			var pilesize = this.diameterOpen - this.marginOpen * 2 - 40;
+			s = (this.size - pilesize) / 2;
+			$(pile).css({
+				width: pilesize,
+				left: s,
+			}).show();
+			var h = $(pile).height();
+			$(pile).css({
+				top: (this.size - h) / 2
+			}).hide();
+		},
+		getColor: function(name, where) {
+			var c;
+			if (name == 'orange') {
+				c = '#fa9235';
+			} else if (name == 'bleu') {
+				c = '#48c7f4';
+			} else if (name == 'petrole') {
+				c = '#2183a5';
+			} else if (name == 'vert') {
+				c = '#afbc19';
+			} else if (name == 'rose') {
+				c = '#e92699';
+			}
+			return c;
+		},
+	};
+
+	jQuery.fn.parcours = function() {
+		return this.each(function() {
+			var $this = $(this);
+			$(this).data('parcours', new JQparcours($this));
+		})
+	};
+})(jQuery);
+
+TO_LOAD_ONCE[TO_LOAD_ONCE.length] = 'load_parcours();';
+function load_parcours() {
+	$("#etapes").parcours();
+}
\ No newline at end of file
diff --git a/less/parcours.less b/less/parcours.less
index 6ac36c8..fc2ca85 100644
--- 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