(no commit message)

diff --git a/framework/application/controllers/AjaxController.php b/framework/application/controllers/AjaxController.php
index 54805d4fe8c851081c04c4feec16dbf0be3f583f..e6f525481666796c2ae7b1fc23b5ac4bf5ff64f8 100644 (file)
--- a/framework/application/controllers/AjaxController.php
+++ b/framework/application/controllers/AjaxController.php
@@ -3,9 +3,33 @@
 class AjaxController extends CubeIT_Controller_AjaxController {
 
     public function displayCaseStudies() {
-        $studies = $_GET['studies'];
-        //fb($studies, 'displayCaseStudies');
-        //$this->view->CasestudiesList($this->studies);
+       $studies = $_GET['studies'];
+       //fb($studies, 'displayCaseStudies');
+       //$this->view->CasestudiesList($this->studies);
+    }
+
+    public function displayRealisation() {
+       $rea_id = $_GET['realisation_id'];
+       //fb($rea_id, 'Realisation id ');
+
+       $db = $this->getDb();
+       $s = $db->select()->from('realisations')
+               ->order('id ASC');
+       $s->where('id = ?', $rea_id);
+
+       $q = $s->query();
+       $r = $q->fetch();
+
+       $r = CubeIT_Util_Cms::unserialize($r);
+
+       for ($i = 0; $i < count($r->visuel_detail); $i++) {
+           $image_url = $this->view->imageProcess()->imageProcessGetUrl($r->visuel_detail[$i], '', null, 440);
+           $r->visuel_detail[$i] = $image_url;
+       }
+
+       $r->description = $this->view->markupDotclear($r->description);
+
+       $this->_datas->addVariable("rea", $r);
     }
 
 }

diff --git a/framework/application/layouts/scripts/layout.phtml b/framework/application/layouts/scripts/layout.phtml
index de3c281c3c9c5994007c3af649dc612e246276cb..b375859018986a32250c570972e07fe09da2f90a 100644 (file)
--- a/framework/application/layouts/scripts/layout.phtml
+++ b/framework/application/layouts/scripts/layout.phtml
@@ -2,7 +2,7 @@
 \r
 //$fonts = array('custom' => array('families' => array('roboto_condensedlight'), 'urls' => array('/css/fonts/robotocondensed-light.css?nocache=1')));\r
 $fonts = array('google' => array('families' => array('Roboto+Condensed:400,300,700:latin')));\r
-\r
+$this->headScript()->addGSAP();\r
 $this->headScript()->addWebFont($fonts);\r
 \r
 if ($this->acl()->isAllowed('edition')) {\r

diff --git a/framework/application/views/helpers/RealisationsList.php b/framework/application/views/helpers/RealisationsList.php
index 3a48265b10f170ed1d3ca3442a9aa321967de6a2..301f7f2490795bddd725516f7acd4ce7d36a1bdf 100644 (file)
--- a/framework/application/views/helpers/RealisationsList.php
+++ b/framework/application/views/helpers/RealisationsList.php
@@ -9,7 +9,6 @@ class Cubedesigners_View_Helper_RealisationsList extends Zend_View_Helper_Abstra
        $db = Zend_Db_Table::getDefaultAdapter();\r
        $s = $db->select()->from('realisations')\r
                ->order('id ASC');\r
-\r
        if (!$acl) {\r
            $s->where('online = ?', 1);\r
        }\r
@@ -20,39 +19,63 @@ class Cubedesigners_View_Helper_RealisationsList extends Zend_View_Helper_Abstra
 \r
        $res = '';\r
 \r
+       $test = 0;\r
        while ($r = $q->fetch()) {\r
 \r
            $r = CubeIT_Util_Cms::unserialize($r);\r
 \r
            $addSpacer = false;\r
 \r
-           if ($count == 4) {\r
-               $count = 1;\r
-               $addClass = '';\r
-               //   $addSpacer = true;\r
-           } else {\r
-               $addClass = ' blocmargin';\r
-               $count++;\r
-           }\r
+           /* if ($count == 4) {\r
+             $count = 1;\r
+             $addClass = '';\r
+             //$addSpacer = true;\r
+             } else {\r
+             $addClass = ' blocmargin';\r
+             $count++;\r
+             } */\r
+\r
+           $addClass = ' blocmargin';\r
+\r
 \r
            $addOffline = '';\r
            if ($acl && $r->online == 0) {\r
                $addOffline = 'data-offline="1"';\r
            }\r
 \r
+           //$res .= '<a href="' . $url . '">';\r
+\r
+           $visuel = $this->view->imageProcess($r->visuel_detail, '', null, 440);\r
+\r
+\r
+           fb($r);\r
+\r
            $image = $this->view->imageProcess($r->visuel, $r->titre, 230, 230);\r
            $url = CubeIT_Navigation_Page::generateAutoUri($r, $datas['seourl_rea']);\r
-           //$res .= '<a href="' . $url . '">';\r
 \r
-           $res .= '<a href="#" onclick="return false;" data-url="' . $url . '">';\r
-           $res .= '<div class="bloc' . $addClass . '" data-tags="' . $r->tags . '">';\r
+           $res .= '<a href="#" onclick="return false;" data-url="' . $url . '" data-id="' . $r->id . '">';\r
+           /* $res .= '<div class="detail">';\r
+             $res .= '<div class="detailLeft">';\r
+             $res .= '<div class="titre">' . $r->titre . '</div>';\r
+             $res .= '<div class="legende">' . $r->legende . '</div>';\r
+             $res .= '<div class="agence">' . $r->agence . '</div>';\r
+             $res .= '<div class="description">' . $this->view->markupDotclear($r->description) . '</div>';\r
+             $res .= '<a class="link" href="' . $r->url . '">' . __("Voir le site") . '</a>';\r
+             $res .= '</div>';\r
+\r
+             $res .= '<div class="detailRight"><div class="slides">' . $visuel . '</div><div class="close"></div></div>';\r
+             $res .= '</div>'; */\r
+           $res .= '<div class=" bloc' . $addClass . '" data-tags="' . $r->tags . '" data-pos="' . $count . '">';\r
            $res .= '<div class="project-photo">' . $image . '</div>';\r
-           $res .= '<div class="project-title" ' . $addOffline . '>' . $r->titre . '</div>';\r
+           //$res .= '<div class="project-title" ' . $addOffline . '>' . $r->titre . '</div>';\r
            $res .= '</div>';\r
            $res .= '</a>';\r
            // if ($addSpacer) {\r
            //    $res .= '<div class="spacer"></div>';\r
            // }\r
+           $test++;\r
+\r
+           $count++;\r
        }\r
 \r
        return $res;\r

diff --git a/framework/application/views/scripts/templates/realisations.phtml b/framework/application/views/scripts/templates/realisations.phtml
index 87b1d977ce0d535ce5acb8507d6379f0c96f3f3d..b94fe856a31ab9cbde1c0a49e566a1eaad25abc9 100644 (file)
--- a/framework/application/views/scripts/templates/realisations.phtml
+++ b/framework/application/views/scripts/templates/realisations.phtml
@@ -1,5 +1,7 @@
 <?php\r
 $this->headScript()->addScriptAndStyle('realisations');\r
+//$datas = Bootstrap::getInstance()->getCMSDatasOfPage($this->id);\r
+//$this->headScriptVariables()->setVariable('realisations', $datas);\r
 ?>\r
 \r
 <div class="title"><?php echo $this->markupDotclear($this->titre); ?></div>\r
@@ -8,6 +10,8 @@ $this->headScript()->addScriptAndStyle('realisations');
     <?php echo $this->CasestudiesTagsList($this->studies); ?>\r
 </div>\r
 \r
+\r
+\r
 <div id="realisations-list">\r
     <?php\r
     $datas = Bootstrap::getInstance()->getCMSDatasOfPage($this->id);\r

diff --git a/js/home.js b/js/home.js
index 3fad1064610ec60585027db04c73f6e7e9d3acf5..5ca3ce1460c21f3c10266f236d231f0243c0b4e9 100644 (file)
--- a/js/home.js
+++ b/js/home.js
@@ -30,7 +30,7 @@ function load_home() {
 
 function slideShow() {
     nbSlides = $('.slide').length;
-    
+  
     currentSlideId = 0;
 
     currentSlide=$('.slide:first');

diff --git a/js/realisations.js b/js/realisations.js
index 4ef57ed2a1726db8277577de8317cf21fdba7d77..56a7d86fae5d8c2efbd313c2520d95ae10711845 100644 (file)
--- a/js/realisations.js
+++ b/js/realisations.js
@@ -1,9 +1,142 @@
 TO_LOAD_ONCE[TO_LOAD_ONCE.length]='load_realisations();';\r
 \r
 var showIds = new Array();\r
+var isAnim = false;\r
+var currentOpen = 0;\r
+var currentOpenValues;\r
+var detail = "";\r
+var switchTimer;\r
+var currentSlide = 1;\r
+var autoSlide = true;\r
 \r
 function load_realisations() {\r
-       //initTagsLink();\r
+    //initTagsLink();\r
+\r
+     $(".bloc").click( function () {\r
+        \r
+        var currentRea = $(this).attr("data-pos");\r
+           \r
+        if( !isAnim && currentRea != currentOpen ) {\r
+\r
+           isAnim = true;\r
+\r
+           var reaWidth = $(this).width() + parseInt($(this).css("margin-right").split("px")[0]);\r
+           var reaId = $(this).parent().attr("data-id");\r
+           var reaPerRow = $(this).parent().parent().width() / reaWidth;\r
+\r
+           var nbReas = $('.project-photo').length;\r
+\r
+           var nbRow = Math.ceil(nbReas / reaPerRow ); \r
+           \r
+           var reaPos = 1;\r
+           var count = 0;\r
+\r
+           var cible = $("#realisations-list").find("[data-pos='1']");\r
+\r
+           while( count < currentRea) {\r
+               count++;\r
+               if( (count % (reaPerRow+1)) == 0 ) {\r
+                   reaPos++;\r
+                   cible = $("#realisations-list").find("[data-pos='" + count + "']");\r
+               }\r
+           }\r
+\r
+           detail = "";\r
+           \r
+\r
+           //$.ajax();\r
+            $.ajax({\r
+               url             : '/ajax/displayrealisation',\r
+               type    : 'GET',\r
+                data: 'realisation_id=' + reaId,\r
+               complete: function(ret) {\r
+                   \r
+                   var response = JSON.parse(ret.responseText);\r
+                   var rea = response.vars.rea;\r
+                   \r
+                   currentOpenValues = rea;\r
+                   \r
+                   detail += '<div id="detail">';\r
+                   detail += '<div class="detailLeft">';\r
+                   detail += '<div class="titre">'+rea.titre+'</div>';\r
+                   detail += '<div class="legende">'+rea.legende+'</div>';\r
+                   detail += '<div class="agence">Agence : '+rea.agence+'</div>';\r
+                   detail += '<div class="description">'+rea.description+'</div>';\r
+                   detail += '<a class="link" href="'+rea.url+'">Voir le site</a>';\r
+                   detail += '</div>';\r
+                   \r
+                   var image=new Image();\r
+                   image.src=rea.visuel_detail[0];\r
+                   \r
+                   detail += '<div class="detailRight"><div class="slides"><img id="visuel_detail" src="'+rea.visuel_detail[0]+'" /></div><div class="close"></div></div>';\r
+                   detail += '</div>';\r
+                   \r
+                   preloadSlides();\r
+                   \r
+                   $(".bloc").find('.project-photo').removeClass("gray");\r
+\r
+                   if( $( "#detail" ).length > 0) {\r
+                       $( "#detail" ).slideUp( "slow", function() {\r
+                           $('#detail').remove();\r
+                           $(cible.parent()).before(detail);\r
+                           $( "#detail" ).slideDown( "slow", function() {\r
+                               isAnim = false;\r
+                               addCloseAction();\r
+                               currentSlide = 1;\r
+                               autoSlide = true;\r
+                               switchTimer = window.setTimeout( nextSlide, 5000);\r
+                           }).animate(\r
+                               { opacity: 1 },\r
+                               { queue: false, duration: 'slow' }\r
+                             );\r
+\r
+                       }).animate(\r
+                           { opacity: 0 },\r
+                           { queue: false, duration: 'slow' }\r
+                         );\r
+                   }else{\r
+                       $(cible.parent()).before(detail);\r
+                       $( "#detail" ).slideDown( "slow", function() {\r
+                           isAnim = false;\r
+                           addCloseAction();\r
+                           currentSlide = 1;\r
+                           autoSlide = true;\r
+                           switchTimer = window.setTimeout( nextSlide, 5000);\r
+                       }).animate(\r
+                           { opacity: 1 },\r
+                           { queue: false, duration: 'slow' }\r
+                         );\r
+                   }\r
+\r
+                   $(".project-photo").each( function() {\r
+                       var id = $(this).parent().attr("data-pos");\r
+                       if( id != currentRea ) {\r
+                           $(this).addClass("gray");\r
+                       }\r
+                   });\r
+                       }\r
+                       \r
+               });\r
+\r
+           \r
+        }\r
+        currentOpen = currentRea;\r
+    }); \r
+}\r
+\r
+function addCloseAction() {\r
+    $(".close").click(function() {\r
+       $( "#detail" ).slideUp( "slow", function() {\r
+              $('#detail').remove();\r
+              currentOpen = 0;\r
+              $(".project-photo").each( function() {\r
+                  $(this).removeClass("gray");\r
+              });\r
+          }).animate(\r
+           { opacity: 0 },\r
+           { queue: false, duration: 'slow' }\r
+         );\r
+    });\r
 }\r
 \r
 function initTagsLink() {\r
@@ -18,19 +151,63 @@ function initTagsLink() {
             var index = $.inArray( $(this).attr("data-id"), showIds );\r
             showIds.splice(index, 1);\r
         }\r
-        \r
+       \r
         if( showIds.length > 0 ) {\r
             $(".tag:first").removeClass('active');\r
         }else{\r
             $(".tag:first").addClass('active');\r
         }\r
         \r
-        displayStudies();\r
+        //displayStudies();\r
         //alert(showIds);\r
     });\r
     \r
 }\r
 \r
+\r
+function preloadSlides() {\r
+    /*\r
+    var i=0;\r
+    \r
+    $('.slide[data-image]').each(function(){\r
+            var slide=this;\r
+            var image=new Image();\r
+            image.src=$(this).attr('data-image');\r
+           \r
+            if(image.complete){\r
+                    $(this).html("<a href='" + $(this).attr('data-link') + "'><img src='" + $(this).attr('data-image') + "' /></a>");\r
+            }\r
+            \r
+            $(image).load(function(){\r
+                    $(slide).html("<a href='" + $(slide).attr('data-link') + "'><img src='" + $(slide).attr('data-image') + "' /></a>");\r
+            });\r
+            \r
+            i++;\r
+    });*/\r
+}\r
+\r
+function nextSlide() {\r
+    \r
+    var maxSlides = currentOpenValues.visuel_detail.length;\r
+    if(maxSlides == 1) autoSlide = false;\r
+       \r
+    if( autoSlide ) {\r
+\r
+       if( currentSlide < maxSlides ) {\r
+           currentSlide++;\r
+       }else{\r
+           currentSlide=1;\r
+       }\r
+\r
+       $( "#visuel_detail" ).fadeOut( "slow", function() {\r
+           $("#visuel_detail").attr("src", currentOpenValues.visuel_detail[currentSlide-1]);\r
+           $( "#visuel_detail" ).fadeIn();\r
+       });\r
+\r
+       switchTimer = window.setTimeout( nextSlide, 5000);\r
+    }\r
+}\r
+\r
 function displayRealisation( rea ) {\r
     \r
     //$(rea);\r
@@ -40,3 +217,7 @@ function displayRealisation( rea ) {
     \r
 }\r
 \r
+function resize() {\r
+    \r
+}\r
+\r

diff --git a/less/realisations.less b/less/realisations.less
index 280107df0a9adf8fe7ccaf7ddaad6c4e4091ecd9..6c702475400f69033513bbd86db72b61af83e23d 100644 (file)
--- a/less/realisations.less
+++ b/less/realisations.less
@@ -46,7 +46,7 @@
         width:230px;
         float:left;
     }
-
+    
     a,a:hover {    
         color:#000;
     }
@@ -55,9 +55,21 @@
         width:230px;
         height:230px;
         background-color: #ccc;
-        margin:0 0 5px 0;
+        margin:0;
     }
-
+    
+    .bloc .gray {
+       filter: grayscale(100%);
+       -webkit-filter: grayscale(100%);
+       -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: gray; /* IE6-9 */
+    }
+    
+    
+    
     .bloc .project-title {
         font-size: 14px;
         padding: 0 0 20px 0;
@@ -65,12 +77,88 @@
     }
 
     .blocmargin {
-        margin-right:15px;
+       margin:0 15px 15px 0;
+           
     }
     
     .spacer {
         clear: left;
         height:20px;
     }
+    
+    #detail {
+       height:440px;
+       clear: both;
+       display:none;
+       margin-bottom: 15px;
+       opacity: 0;
+       filter:alpha(opacity=0);
+       -moz-opacity:0;
+    }
+    
+    #detail .detailLeft {
+       float:left;
+       width:250px;
+       padding-right:15px;
+       
+       .titre {
+           font-size: 32px;
+       }
+       
+       .legende {
+           font-size: 14px;
+           color: #545454;
+       }
+       
+       .agence {
+           font-size: 14px;
+           color: #545454;
+       }
+       
+       .description {
+           font-size: 14px;
+           color: #545454;
+           margin-bottom: 20px;
+           margin-top:20px;
+       }
+       
+    }
+    
+    .link {
+           background-color: #3885e0;
+           border-radius: 2px;
+           padding: 5px 20px;
+           color:#fff;
+       }
+
+    .link:hover {
+           background-color: #84ae1e;
+           color:#fff;
+       }
+    
+    #detail .detailRight {
+       //float:left;
+       position: absolute;
+       right: 0;
+       
+       .slides {
+           overflow: hidden;
+           width: 1000px;
+       }
+       
+       .close {
+           position:absolute;
+           right: 0;
+           top: 0;
+           background-image: url('../images/rea_close.jpg');
+           width: 62px;
+           height: 62px;
+           cursor: pointer;
+       }
+       
+    }
+    
+    
+
+}
 
-}
\ No newline at end of file