--- a/integration/v2/03-collection_non_connecte.html Wed Jun 26 18:22:30 2013 +0200
+++ b/integration/v2/03-collection_non_connecte.html Thu Jun 27 11:09:25 2013 +0200
@@ -76,6 +76,53 @@
</div>
<ul class="list-projets-3 clearfix masonry-465">
+
+ <li class="clearfix horizontal item-masonry">
+ <div class="col-left">
+ <img src="img/225x225.png" alt="">
+ <div class="tools toggle">
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="col-right">
+ <div class="project-title">
+ <a href="#" class="edit toggle"><img src="img/icon-pencil-15.png" alt=""></a>
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio consectetur provident inventore nihil rerum cum atque sequi reprehenderit culpa nemo iure commodi est repellendus qui excepturi pariatur non amet.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio consectetur provident </p>
+ </div>
+ </li>
+ <li class="clearfix horizontal item-masonry">
+ <div class="col-left">
+ <img src="img/225x297.png" alt="">
+ <div class="tools toggle">
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="col-right">
+ <div class="project-title">
+ <a href="#" class="edit toggle"><img src="img/icon-pencil-15.png" alt=""></a>
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio consectetur provident inventore nihil rerum cum atque sequi reprehenderit culpa nemo iure commodi est repellendus qui excepturi pariatur non amet.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio consectetur provident </p>
+ </div>
+ </li>
<li class="clearfix horizontal item-masonry">
<div class="col-left">
<img src="img/225x297.png" alt="">
@@ -99,6 +146,75 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio consectetur provident </p>
</div>
</li>
+ <li class="clearfix horizontal item-masonry">
+ <div class="col-left">
+ <img src="img/225x297.png" alt="">
+ <div class="tools toggle">
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="col-right">
+ <div class="project-title">
+ <a href="#" class="edit toggle"><img src="img/icon-pencil-15.png" alt=""></a>
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio consectetur provident inventore nihil rerum cum atque sequi reprehenderit culpa nemo iure commodi est repellendus qui excepturi pariatur non amet.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio consectetur provident </p>
+ </div>
+ </li>
+ <li class="item-masonry">
+ <div class="col-left">
+ <img src="img/225x225.png" alt="">
+ <div class="tools toggle">
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="col-right">
+ <div class="project-title">
+ <a href="#" class="edit toggle"><img src="img/icon-pencil-15.png" alt=""></a>
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio consectetur provident inventore nihil rerum cum atque sequi reprehenderit culpa nemo iure commodi est repellendus qui excepturi pariatur non amet.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio consectetur provident </p>
+ </div>
+ </li>
+ <li class="item-masonry">
+ <div class="col-left">
+ <img src="img/469x295.png" alt="">
+ <div class="tools toggle">
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="col-right">
+ <div class="project-title">
+ <a href="#" class="edit toggle"><img src="img/icon-pencil-15.png" alt=""></a>
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio consectetur provident inventore nihil rerum cum atque sequi reprehenderit culpa nemo iure commodi est repellendus qui excepturi pariatur non amet.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio consectetur provident </p>
+ </div>
+ </li>
<li class="item-masonry">
<div class="col-left">
<img src="img/469x295.png" alt="">
--- a/integration/v2/18-19-20-21-collection_vue_mosaique.html Wed Jun 26 18:22:30 2013 +0200
+++ b/integration/v2/18-19-20-21-collection_vue_mosaique.html Thu Jun 27 11:09:25 2013 +0200
@@ -156,23 +156,25 @@
<div class="clearfix">
<div class="filters-wrap float-left">
<ul class="filters">
- <li class="box-shadow-2"><a class="display-keyword" data-keyword="azerty" href="#">
- Paris, musée Victor Hugo <a class="icon-action cross" href="#"></a>
+ <li class="box-shadow-2"><a class="display-keyword" data-keyword="Musée Grévin" href="#">
+ Musée Grévin <a class="icon-action cross" href="#"></a>
</a></li>
- <li class="box-shadow-2"><a class="display-keyword" data-keyword="lorem" href="#">
- Bonjour hello world lorem ipsum dolor <a class="icon-action cross" href="#"></a>
+ <li class="box-shadow-2"><a class="display-keyword" data-keyword="Beaux Arts" href="#">
+ Beaux Arts <a class="icon-action cross" href="#"></a>
</a></li>
- <li class="box-shadow-2"><a class="display-keyword" data-keyword="ipsum" href="#">
- ipsum tag <a class="icon-action cross" href="#"></a>
+ <li class="box-shadow-2"><a class="display-keyword" data-keyword="éè" href="#">
+ éè <a class="icon-action cross" href="#"></a>
</a></li>
- <li class="box-shadow-2"><a class="display-keyword" data-keyword="hello" href="#">
- hello tag tag it <a class="icon-action cross" href="#"></a>
+ <li class="box-shadow-2"><a class="display-keyword" data-keyword="über ällës" href="#">
+ über ällës <a class="icon-action cross" href="#"></a>
</a></li>
</ul>
</div>
<ul class="list-projets-5 mosaic float-left clearfix masonry-177">
- <li class="item-masonry keyword-azerty">
+
+
+ <li class="item-masonry" data-keywords="Musée Grévin, über ällës, Beaux Arts, éè">
<div class="curtain"></div>
<div class="visuel-project">
<img src="img/177x224.png" alt="">
@@ -198,85 +200,8 @@
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
</div>
</li>
- <li class="item-masonry keyword-ipsum">
- <div class="curtain"></div>
- <div class="visuel-project">
- <img src="img/177x264.png" alt="">
- <div class="tools toggle">
- <div class="title-project">
- <h3>Dolores ipsum des dolores</h3>
- <h4>Théodore Chasseriau</h4>
- </div>
- <ul class="clearfix">
- <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
- <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
- <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
- <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
- <li><a title="Supprimer" class="tool trash" href="#"></a></li>
- </ul>
- </div>
- </div>
- <div class="content-project">
- <div class="title-project">
- <h3>Dolores ipsum des dolores</h3>
- <h4>Théodore Chasseriau</h4>
- </div>
- <p>Lorem ipsum dolor</p>
- </div>
- </li>
- <li class="item-masonry keyword-azerty">
- <div class="curtain"></div>
- <div class="visuel-project">
- <img src="img/177x232.png" alt="">
- <div class="tools toggle">
- <div class="title-project">
- <h3>azerty qwerty allo hello</h3>
- <h4>Théodore Chasseriau</h4>
- </div>
- <ul class="clearfix">
- <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
- <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
- <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
- <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
- <li><a title="Supprimer" class="tool trash" href="#"></a></li>
- </ul>
- </div>
- </div>
- <div class="content-project">
- <div class="title-project">
- <h3>azerty qwerty allo hello</h3>
- <h4>Théodore Chasseriau</h4>
- </div>
- <p>azerty qwerty allo hello azerty qwerty allo hello</p>
- </div>
- </li>
- <li class="item-masonry keyword-hello">
- <div class="curtain"></div>
- <div class="visuel-project">
- <img src="img/177x224.png" alt="">
- <div class="tools toggle">
- <div class="title-project">
- <h3>Sapho</h3>
- <h4>Théodore Chasseriau</h4>
- </div>
- <ul class="clearfix">
- <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
- <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
- <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
- <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
- <li><a title="Supprimer" class="tool trash" href="#"></a></li>
- </ul>
- </div>
- </div>
- <div class="content-project">
- <div class="title-project">
- <h3>Sapho</h3>
- <h4>Théodore Chasseriau</h4>
- </div>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
- </div>
- </li>
- <li class="item-masonry keyword-azerty">
+
+ <li class="item-masonry" data-keywords="Beaux Arts">
<div class="curtain"></div>
<div class="visuel-project">
<img src="img/177x264.png" alt="">
@@ -302,33 +227,8 @@
<p>Lorem ipsum dolor</p>
</div>
</li>
- <li class="item-masonry keyword-ipsum">
- <div class="curtain"></div>
- <div class="visuel-project">
- <img src="img/177x232.png" alt="">
- <div class="tools toggle">
- <div class="title-project">
- <h3>azerty qwerty allo hello</h3>
- <h4>Théodore Chasseriau</h4>
- </div>
- <ul class="clearfix">
- <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
- <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
- <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
- <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
- <li><a title="Supprimer" class="tool trash" href="#"></a></li>
- </ul>
- </div>
- </div>
- <div class="content-project">
- <div class="title-project">
- <h3>azerty qwerty allo hello</h3>
- <h4>Théodore Chasseriau</h4>
- </div>
- <p>azerty qwerty allo hello azerty qwerty allo hello</p>
- </div>
- </li>
- <li class="item-masonry keyword-azerty">
+
+ <li class="item-masonry" data-keywords="éè">
<div class="curtain"></div>
<div class="visuel-project">
<img src="img/177x232.png" alt="">
@@ -354,7 +254,35 @@
<p>azerty qwerty allo hello azerty qwerty allo hello</p>
</div>
</li>
- <li class="item-masonry keyword-lorem">
+
+ <li class="item-masonry" data-keywords="über ällës">
+ <div class="curtain"></div>
+ <div class="visuel-project">
+ <img src="img/177x224.png" alt="">
+ <div class="tools toggle">
+ <div class="title-project">
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="content-project">
+ <div class="title-project">
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
+ </div>
+ </li>
+
+ <li class="item-masonry" data-keywords="Musée Grévin, über ällës">
<div class="curtain"></div>
<div class="visuel-project">
<img src="img/177x224.png" alt="">
@@ -380,7 +308,8 @@
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
</div>
</li>
- <li class="item-masonry keyword-hello">
+
+ <li class="item-masonry" data-keywords="Beaux Arts">
<div class="curtain"></div>
<div class="visuel-project">
<img src="img/177x264.png" alt="">
@@ -406,7 +335,8 @@
<p>Lorem ipsum dolor</p>
</div>
</li>
- <li class="item-masonry keyword-lorem">
+
+ <li class="item-masonry" data-keywords="éè">
<div class="curtain"></div>
<div class="visuel-project">
<img src="img/177x232.png" alt="">
@@ -432,6 +362,33 @@
<p>azerty qwerty allo hello azerty qwerty allo hello</p>
</div>
</li>
+
+ <li class="item-masonry" data-keywords="über ällës">
+ <div class="curtain"></div>
+ <div class="visuel-project">
+ <img src="img/177x224.png" alt="">
+ <div class="tools toggle">
+ <div class="title-project">
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="content-project">
+ <div class="title-project">
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
+ </div>
+ </li>
</ul>
</div>
--- a/integration/v2/css/style.css Wed Jun 26 18:22:30 2013 +0200
+++ b/integration/v2/css/style.css Thu Jun 27 11:09:25 2013 +0200
@@ -119,7 +119,7 @@
.list-projets-3{margin-bottom: 50px;}
.list-projets-3>li{width: 465px; background-color: #eee; margin-bottom: 20px;}
.list-projets-3 .col-left{position: relative;}
-.list-projets-3 li img{max-width: 465px; display: inherit;}
+.list-projets-3 li img{max-width: 465px; display: block; margin: 0 auto;}
.list-projets-3 li.horizontal .col-left{ width: 225px;}
.list-projets-3 li.horizontal .col-right{height:100%; width: 240px; }
.list-projets-3 .project-title{position:relative; padding-left: 14px; font-size: 18px;height: 60px; border-bottom: 1px solid #CCC;}
--- a/integration/v2/js/main.js Wed Jun 26 18:22:30 2013 +0200
+++ b/integration/v2/js/main.js Thu Jun 27 11:09:25 2013 +0200
@@ -81,7 +81,7 @@
iconAction = li.find('.icon-action'),
index = li.index(),
keyword = $(this).attr('data-keyword');
- enabledDisplayKeyword(li, keyword, iconAction);
+
ul.find('li').each(function(k, v){
if(index != k){
@@ -91,12 +91,15 @@
disabledDisplayKeyword($(v), keyword, iconAction);
}
});
+
+ enabledDisplayKeyword(li, keyword, iconAction);
});
$('.icon-action').bind('click', function(e){
e.preventDefault();
var li = $(this).parents('li');
toggleDisplayKeyword(li);
});
+/*
function toggleDisplayKeyword(li){
var displayKeyword = li.find('.display-keyword'),
iconAction = li.find('.icon-action'),
@@ -119,6 +122,50 @@
$('li.keyword-'+keyword).find('.curtain').show();
iconAction.addClass('circle');
}
+*/
+ function toggleDisplayKeyword(li){
+ var displayKeyword = li.find('.display-keyword'),
+ iconAction = li.find('.icon-action'),
+ keyword = displayKeyword.attr('data-keyword');
+ if(li.hasClass('disabled')){
+ enabledDisplayKeyword(li, keyword, iconAction);
+ }else{
+ disabledDisplayKeyword(li, keyword, iconAction);
+ }
+ }
+ function enabledDisplayKeyword(li, keyword, iconAction){
+ iconAction.removeClass('cross').removeClass('circle');
+ li.removeClass('disabled');
+ $('ul.mosaic > li').each(function(k, v){
+
+ var keywords = $(v).attr('data-keywords'),
+ item = $(v);
+ keywords = keywords.split(',');
+ for(var i=0; i<= keywords.length; i++){
+ if($.trim(keywords[i]) == keyword){
+ item.find('.curtain').hide();
+ }
+ }
+ });
+ $('li.keyword-'+keyword).find('.curtain').hide();
+ iconAction.addClass('cross');
+ }
+ function disabledDisplayKeyword(li, keyword, iconAction){
+ iconAction.removeClass('cross').removeClass('circle');
+ li.addClass('disabled');
+ $('ul.mosaic > li').each(function(k, v){
+
+ var keywords = $(v).attr('data-keywords'),
+ item = $(v);
+ keywords = keywords.split(',');
+ for(var i=0; i<= keywords.length; i++){
+ if($.trim(keywords[i]) == keyword){
+ item.find('.curtain').show();
+ }
+ }
+ });
+ iconAction.addClass('circle');
+ }
//map
if($('#map').length){
initmap()