From 71af088e8d813cc4a4d93f5dc7813fec03d1db46 Mon Sep 17 00:00:00 2001
From: "bruno@cubedesigners.com"
 <bruno@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Thu, 20 Feb 2014 12:42:39 +0000
Subject: [PATCH]

---
 .../views/helpers/RealisationsList.php        | 114 ++++++------
 .../scripts/templates/realisations.phtml      |   2 -
 images/rea_close.jpg                          | Bin 0 -> 1833 bytes
 js/common.js                                  |  12 +-
 js/realisations.js                            | 175 ++++++++++--------
 less/realisations.less                        |  92 ++++++---
 6 files changed, 230 insertions(+), 165 deletions(-)
 create mode 100644 images/rea_close.jpg

diff --git a/framework/application/views/helpers/RealisationsList.php b/framework/application/views/helpers/RealisationsList.php
index 301f7f2..d8fe433 100644
--- a/framework/application/views/helpers/RealisationsList.php
+++ b/framework/application/views/helpers/RealisationsList.php
@@ -2,84 +2,84 @@
 
 class Cubedesigners_View_Helper_RealisationsList extends Zend_View_Helper_Abstract {
 
-    public function RealisationsList($datas) {
+        public function RealisationsList($datas) {
 
-	$acl = Bootstrap::getInstance()->isAllowed("edition");
+                $acl = Bootstrap::getInstance()->isAllowed("edition");
 
-	$db = Zend_Db_Table::getDefaultAdapter();
-	$s = $db->select()->from('realisations')
-		->order('id ASC');
-	if (!$acl) {
-	    $s->where('online = ?', 1);
-	}
+                $db = Zend_Db_Table::getDefaultAdapter();
+                $s = $db->select()->from('realisations')
+                        ->order('id ASC');
+                if (!$acl) {
+                        $s->where('online = ?', 1);
+                }
 
-	$q = $s->query();
+                $q = $s->query();
 
-	$count = 1;
+                $count = 1;
 
-	$res = '';
+                $res = '';
 
-	$test = 0;
-	while ($r = $q->fetch()) {
+                $test = 0;
+                while ($r = $q->fetch()) {
 
-	    $r = CubeIT_Util_Cms::unserialize($r);
+                        $r = CubeIT_Util_Cms::unserialize($r);
 
-	    $addSpacer = false;
+                        $addSpacer = false;
 
-	    /* if ($count == 4) {
-	      $count = 1;
-	      $addClass = '';
-	      //$addSpacer = true;
-	      } else {
-	      $addClass = ' blocmargin';
-	      $count++;
-	      } */
+                        /* if ($count == 4) {
+                          $count = 1;
+                          $addClass = '';
+                          //$addSpacer = true;
+                          } else {
+                          $addClass = ' blocmargin';
+                          $count++;
+                          } */
 
-	    $addClass = ' blocmargin';
+                        $addClass = ' blocmargin';
 
 
-	    $addOffline = '';
-	    if ($acl && $r->online == 0) {
-		$addOffline = 'data-offline="1"';
-	    }
+                        $addOffline = '';
+                        if ($acl && $r->online == 0) {
+                                $addOffline = 'data-offline="1"';
+                        }
 
-	    //$res .= '<a href="' . $url . '">';
+                        //$res .= '<a href="' . $url . '">';
 
-	    $visuel = $this->view->imageProcess($r->visuel_detail, '', null, 440);
+                        $visuel = $this->view->imageProcess($r->visuel_detail, '', null, 440);
 
 
-	    fb($r);
+                        fb($r);
 
-	    $image = $this->view->imageProcess($r->visuel, $r->titre, 230, 230);
-	    $url = CubeIT_Navigation_Page::generateAutoUri($r, $datas['seourl_rea']);
+                        $image = $this->view->imageProcess($r->visuel, $r->titre, 230, 230);
+                        $url = CubeIT_Navigation_Page::generateAutoUri($r, $datas['seourl_rea']);
 
-	    $res .= '<a href="#" onclick="return false;" data-url="' . $url . '" data-id="' . $r->id . '">';
-	    /* $res .= '<div class="detail">';
-	      $res .= '<div class="detailLeft">';
-	      $res .= '<div class="titre">' . $r->titre . '</div>';
-	      $res .= '<div class="legende">' . $r->legende . '</div>';
-	      $res .= '<div class="agence">' . $r->agence . '</div>';
-	      $res .= '<div class="description">' . $this->view->markupDotclear($r->description) . '</div>';
-	      $res .= '<a class="link" href="' . $r->url . '">' . __("Voir le site") . '</a>';
-	      $res .= '</div>';
+                        $res .= '<a href="#" onclick="return false;" data-url="' . $url . '" data-id="' . $r->id . '">';
+                        /* $res .= '<div class="detail">';
+                          $res .= '<div class="detailLeft">';
+                          $res .= '<div class="titre">' . $r->titre . '</div>';
+                          $res .= '<div class="legende">' . $r->legende . '</div>';
+                          $res .= '<div class="agence">' . $r->agence . '</div>';
+                          $res .= '<div class="description">' . $this->view->markupDotclear($r->description) . '</div>';
+                          $res .= '<a class="link" href="' . $r->url . '">' . __("Voir le site") . '</a>';
+                          $res .= '</div>';
 
-	      $res .= '<div class="detailRight"><div class="slides">' . $visuel . '</div><div class="close"></div></div>';
-	      $res .= '</div>'; */
-	    $res .= '<div class=" bloc' . $addClass . '" data-tags="' . $r->tags . '" data-pos="' . $count . '">';
-	    $res .= '<div class="project-photo">' . $image . '</div>';
-	    //$res .= '<div class="project-title" ' . $addOffline . '>' . $r->titre . '</div>';
-	    $res .= '</div>';
-	    $res .= '</a>';
-	    // if ($addSpacer) {
-	    //    $res .= '<div class="spacer"></div>';
-	    // }
-	    $test++;
+                          $res .= '<div class="detailRight"><div class="slides">' . $visuel . '</div><div class="close"></div></div>';
+                          $res .= '</div>'; */
+                        $res .= '<div class=" bloc' . $addClass . '" data-tags="' . $r->tags . '" data-pos="' . $count . '">';
+                        $res .= '<div class="project-photo">' . $image . '</div>';
+                        //$res .= '<div class="project-title" ' . $addOffline . '>' . $r->titre . '</div>';
+                        $res .= '</div>';
+                        $res .= '</a>';
+                        // if ($addSpacer) {
+                        //    $res .= '<div class="spacer"></div>';
+                        // }
+                        $test++;
 
-	    $count++;
-	}
+                        $count++;
+                }
 
-	return $res;
-    }
+                return $res;
+        }
 
 }
 
diff --git a/framework/application/views/scripts/templates/realisations.phtml b/framework/application/views/scripts/templates/realisations.phtml
index b94fe85..50778aa 100644
--- a/framework/application/views/scripts/templates/realisations.phtml
+++ b/framework/application/views/scripts/templates/realisations.phtml
@@ -10,8 +10,6 @@ $this->headScript()->addScriptAndStyle('realisations');
     <?php echo $this->CasestudiesTagsList($this->studies); ?>
 </div>
 
-
-
 <div id="realisations-list">
     <?php
     $datas = Bootstrap::getInstance()->getCMSDatasOfPage($this->id);
diff --git a/images/rea_close.jpg b/images/rea_close.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d14d4a4da7aa994fa24bfc0d51d3ea976da62818
GIT binary patch
literal 1833
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

literal 0
HcmV?d00001

diff --git a/js/common.js b/js/common.js
index 3c068e0..3e1f4c2 100644
--- a/js/common.js
+++ b/js/common.js
@@ -4,10 +4,10 @@ var colors = ["#6F216C", "#F34B0D", "#C50102", "#5DA537", "#F1D81B"];
 //turn an icon a random color
 $(function() {
     $("#header").hover(function() {
-        var color = colors[Math.floor(Math.random()*5)];
-        $(this).css('fill',color);       
-        },
-        function() {
-            $(this).css('fill','black');
-            })
+    var color = colors[Math.floor(Math.random()*5)];
+    $(this).css('fill',color);       
+    },
+    function() {
+	$(this).css('fill','black');
+	})
 });
diff --git a/js/realisations.js b/js/realisations.js
index 56a7d86..b0fcb78 100644
--- a/js/realisations.js
+++ b/js/realisations.js
@@ -5,13 +5,14 @@ var isAnim = false;
 var currentOpen = 0;
 var currentOpenValues;
 var detail = "";
-var switchTimer;
 var currentSlide = 1;
-var autoSlide = true;
+var autoSlide = false;
+var totalWidth;
+var lastWidth;
 
 function load_realisations() {
     //initTagsLink();
-
+    
      $(".bloc").click( function () {
 	 
 	 var currentRea = $(this).attr("data-pos");
@@ -42,9 +43,7 @@ function load_realisations() {
 	    }
 
 	    detail = "";
-	    
-
-           //$.ajax();
+	   
             $.ajax({
 		url		: '/ajax/displayrealisation',
 		type	: 'GET',
@@ -56,52 +55,80 @@ function load_realisations() {
 		    
 		    currentOpenValues = rea;
 		    
-		    detail += '<div id="detail">';
+		    detail += '<div id="detailContent"><div id="detail">';
 		    detail += '<div class="detailLeft">';
 		    detail += '<div class="titre">'+rea.titre+'</div>';
-		    detail += '<div class="legende">'+rea.legende+'</div>';
-		    detail += '<div class="agence">Agence : '+rea.agence+'</div>';
+                    
+                    if( rea.legende != '') {
+                         detail += '<div class="legende">'+rea.legende+'</div>';
+                    }
+                    
+                    if( rea.agence != '') {
+                         detail += '<div class="agence">Agence : '+rea.agence+'</div>';
+                    }
+                    
 		    detail += '<div class="description">'+rea.description+'</div>';
 		    detail += '<a class="link" href="'+rea.url+'">Voir le site</a>';
 		    detail += '</div>';
+		    detail += '<div class="detailRight"><div class="slides"><ul>';
 		    
-		    var image=new Image();
-		    image.src=rea.visuel_detail[0];
-		    
-		    detail += '<div class="detailRight"><div class="slides"><img id="visuel_detail" src="'+rea.visuel_detail[0]+'" /></div><div class="close"></div></div>';
-		    detail += '</div>';
+		    totalWidth = 0;
+		    for( var i=0; i<rea.visuel_detail.length; i++) {
+			
+			var image=new Image();
+			image.src=rea.visuel_detail[i];
+			totalWidth += image.width;
+			
+			if( i == ( rea.visuel_detail.length-1 ) ) {
+			    lastWidth = image.width;
+			}
+			
+			detail += '<li><img id="visuel_detail" src="'+rea.visuel_detail[i]+'" /></li>';
+		    }
 		    
-		    preloadSlides();
+		    detail += '</ul></div></div>';
+		    detail += '</div><div class="close"></div></div>';
 		    
-		    $(".bloc").find('.project-photo').removeClass("gray");
-
 		    if( $( "#detail" ).length > 0) {
-			$( "#detail" ).slideUp( "slow", function() {
-			    $('#detail').remove();
+			$( "#detail" ).slideUp( 500, function() {
+                                
+			    $('#detailContent').remove();
+                            
 			    $(cible.parent()).before(detail);
+			    
+			    $("html, body").animate({ scrollTop: $('#detailContent').offset().top-100 }, 1000);
+			    $('.close').css("top", $('#detailContent').offset().top);
+                            
+                            
 			    $( "#detail" ).slideDown( "slow", function() {
 				isAnim = false;
 				addCloseAction();
 				currentSlide = 1;
 				autoSlide = true;
-				switchTimer = window.setTimeout( nextSlide, 5000);
+                                initSlideShow();
+			    
 			    }).animate(
-				{ opacity: 1 },
+				{ opacity: 1  },
 				{ queue: false, duration: 'slow' }
 			      );
-
+                      
 			}).animate(
-			    { opacity: 0 },
+			    { opacity: 1 },
 			    { queue: false, duration: 'slow' }
 			  );
 		    }else{
 			$(cible.parent()).before(detail);
+			
+			$("html, body").animate({ scrollTop: $('#detailContent').offset().top-100 }, 1000);
+			$('.close').css("top", $('#detailContent').offset().top);
+                        
 			$( "#detail" ).slideDown( "slow", function() {
+			    
 			    isAnim = false;
 			    addCloseAction();
 			    currentSlide = 1;
 			    autoSlide = true;
-			    switchTimer = window.setTimeout( nextSlide, 5000);
+			    initSlideShow();
 			}).animate(
 			    { opacity: 1 },
 			    { queue: false, duration: 'slow' }
@@ -112,7 +139,9 @@ function load_realisations() {
 			var id = $(this).parent().attr("data-pos");
 			if( id != currentRea ) {
 			    $(this).addClass("gray");
-			}
+			}else{
+                            $(this).removeClass("gray");
+                        }
 		    });
 			}
 			
@@ -120,20 +149,22 @@ function load_realisations() {
 
 	    
 	 }
+	 
 	 currentOpen = currentRea;
     }); 
 }
 
 function addCloseAction() {
     $(".close").click(function() {
+        $("html, body").animate({ scrollTop: 0 }, 1000);
 	$( "#detail" ).slideUp( "slow", function() {
-	       $('#detail').remove();
+	       $('#detailContent').remove();
 	       currentOpen = 0;
 	       $(".project-photo").each( function() {
 		   $(this).removeClass("gray");
 	       });
 	   }).animate(
-	    { opacity: 0 },
+	    { opacity: 1 },
 	    { queue: false, duration: 'slow' }
 	  );
     });
@@ -158,66 +189,54 @@ function initTagsLink() {
             $(".tag:first").addClass('active');
         }
         
-        //displayStudies();
-        //alert(showIds);
     });
     
 }
 
-
-function preloadSlides() {
-    /*
-    var i=0;
+function initSlideShow() {
     
-    $('.slide[data-image]').each(function(){
-            var slide=this;
-            var image=new Image();
-            image.src=$(this).attr('data-image');
-           
-            if(image.complete){
-                    $(this).html("<a href='" + $(this).attr('data-link') + "'><img src='" + $(this).attr('data-image') + "' /></a>");
-            }
-            
-            $(image).load(function(){
-                    $(slide).html("<a href='" + $(slide).attr('data-link') + "'><img src='" + $(slide).attr('data-image') + "' /></a>");
-            });
-            
-            i++;
-    });*/
-}
+    var mouse_move=false;
+    function move(e) {
+	if(mouse_move) {
+	    if(document.documentElement.clientWidth>0) {
+
+		      position = e.pageX-document.documentElement.scrollLeft;
+	     } else {
+		      position = e.pageX-document.body.scrollLeft;
+	     }
+	}
+    }
+    document.onmousemove=move;
 
-function nextSlide() {
-    
-    var maxSlides = currentOpenValues.visuel_detail.length;
-    if(maxSlides == 1) autoSlide = false;
-	
-    if( autoSlide ) {
+    $(".slides").mouseover(function(e){
 
-	if( currentSlide < maxSlides ) {
-	    currentSlide++;
-	}else{
-	    currentSlide=1;
-	}
+	mouse_move = true;
+	le_div = '.' + 'slides';
 
-	$( "#visuel_detail" ).fadeOut( "slow", function() {
-	    $("#visuel_detail").attr("src", currentOpenValues.visuel_detail[currentSlide-1]);
-	    $( "#visuel_detail" ).fadeIn();
-	});
+	if($(le_div + " ul li").length > 1){
 
-	switchTimer = window.setTimeout( nextSlide, 5000);
-    }
-}
+	    var total_lenght = totalWidth;
 
-function displayRealisation( rea ) {
-    
-    //$(rea);
-    
-    var url = $(rea).attr("data-url");
-    
-    
-}
+	    var t= setInterval(function(){
 
-function resize() {
-    
-}
+		var offset = $(le_div).offset();
+
+		if((position - offset.left) < ($("#detailContent").width()/2) ){
+			if($(le_div + " ul").css('marginLeft').replace("px", "") > - (total_lenght - lastWidth)){
+				$(le_div + " ul").animate({marginLeft:"-=2px"},0);
+			}
+		}else{
+			if($(le_div + " ul").css('marginLeft').replace("px", "") <= 0){
+				$(le_div + " ul").animate({marginLeft:"+=2px"},0);
+			}
+		}
+	    },5);
 
+	    $(le_div).mouseout(function(){
+		    clearInterval(t);
+		    mouse_move=false;
+	    });
+	}
+    });
+	
+}
\ No newline at end of file
diff --git a/less/realisations.less b/less/realisations.less
index 6c70247..c1a8648 100644
--- a/less/realisations.less
+++ b/less/realisations.less
@@ -4,11 +4,10 @@
     margin: 0 auto;
     padding: 0 0 20px 0;
     
-    
     ul {
     list-style: none;
     }
-
+    
     li {
         font-size: 14px;
         color: #6f6f6f;
@@ -40,11 +39,12 @@
     max-width: 980px;
     margin: 0 auto;
     padding: 0 0 50px 0;
-    overflow: hidden;
+   // overflow: hidden;
     
     .bloc {    
         width:230px;
-        float:left;
+        //float:left;
+	display:inline-block;
     }
     
     a,a:hover {    
@@ -64,10 +64,21 @@
 	-moz-filter: grayscale(100%);
 	-o-filter: grayscale(100%);
 	-ms-filter: grayscale(100%);
-	 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
+	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
 	filter: gray; /* IE6-9 */
+
     }
     
+    .bloc  {
+       filter: grayscale(0%);
+	-webkit-filter: grayscale(0%);
+	-moz-filter: grayscale(0%);
+	-o-filter: grayscale(0%);
+	-ms-filter: grayscale(0%);
+	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
+        //filter: none; /* IE6-9 */
+        transition: all 500ms;
+    }
     
     
     .bloc .project-title {
@@ -91,15 +102,39 @@
 	clear: both;
 	display:none;
 	margin-bottom: 15px;
-	opacity: 0;
-	filter:alpha(opacity=0);
-	-moz-opacity:0;
+	width:10000px;
+	white-space: nowrap;
     }
     
+    #detailContent {
+	overflow: visible;
+	width: 100%;
+	height: auto;
+        
+        .close {
+		position:absolute;
+		right: 0;
+		//top: 0;
+		background-image: url('../images/rea_close.jpg');
+		width: 62px;
+		height: 62px;
+		cursor: pointer;
+	    }
+    }
+    
+    
     #detail .detailLeft {
-	float:left;
-	width:250px;
+	vertical-align: top;
+        display:inline-block;
+	width:230px;
+	min-width: 230px;
+	max-width: 230px;
 	padding-right:15px;
+        white-space: normal;
+	
+	div {
+	    max-width: 220px;
+	}
 	
 	.titre {
 	    font-size: 32px;
@@ -137,24 +172,37 @@
 	}
     
     #detail .detailRight {
-	//float:left;
-	position: absolute;
-	right: 0;
+	display:inline-block;
+	vertical-align:top;
+	//position: absolute;
+	//right: 0;
+	
+	
+	
 	
 	.slides {
 	    overflow: hidden;
-	    width: 1000px;
+	    width: 10000px;
 	}
 	
-	.close {
-	    position:absolute;
-	    right: 0;
-	    top: 0;
-	    background-image: url('../images/rea_close.jpg');
-	    width: 62px;
-	    height: 62px;
-	    cursor: pointer;
+	
+	.slides ul{
+		position:relative;
+		list-style-type:none;
+		margin: 0px;
+		padding: 0px;
+		width:9999px;
 	}
+
+	.slides li{
+		padding:0px;
+		margin:0px;
+		list-style:none;
+		display: inline-block;
+	}
+	
+	
+	
 	
     }
     
-- 
2.39.5