--- a/integration/v2/18-19-20-21-collection_vue_mosaique.html Thu Jun 27 16:16:18 2013 +0200
+++ b/integration/v2/18-19-20-21-collection_vue_mosaique.html Thu Jun 27 17:31:15 2013 +0200
@@ -156,21 +156,7 @@
<div class="clearfix">
<div class="filters-wrap float-left">
<ul class="filters">
- <li class="box-shadow-2"><a class="display-keyword" data-keyword="héroïne gréco-romaine" href="#">
- Musée Grévin Musée GrévinMusée GrévinMusée GrévinMusée Grévin<a class="icon-action cross" href="#"></a>
- </a></li>
- <li class="box-shadow-2"><a class="display-keyword" data-keyword="Musée Grévin" href="#">
- Musée Grévin Musée GrévinMusée GrévinMusée GrévinMusée Grévin<a class="icon-action cross" href="#"></a>
- </a></li>
- <li class="box-shadow-2"><a class="display-keyword" data-keyword="Beaux Arts" href="#">
- Beaux Arts Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat perferendis esse ab error tempora vel dolore beatae eveniet quaerat ut facilis tenetur minima corporis suscipit quidem alias accusantium ex recusandae. <a class="icon-action cross" href="#"></a>
- </a></li>
- <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="über ällës" href="#">
- über ällës <a class="icon-action cross" href="#"></a>
- </a></li>
+
</ul>
</div>
@@ -407,5 +393,6 @@
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/masonry.min.js"></script>
<script src="js/main.js"></script>
+ <script src="js/keyword-mosaic.js"></script>
</body>
</html>
--- a/integration/v2/css/style.css Thu Jun 27 16:16:18 2013 +0200
+++ b/integration/v2/css/style.css Thu Jun 27 17:31:15 2013 +0200
@@ -234,13 +234,15 @@
.item-masonry{margin-bottom: 20px;}
.filters{padding: 10px 0; text-align: center;}
.filters li{ margin-bottom: 10px; position: relative; text-align: left; font-size: 12px; font-family: 'Lato'; display:inline-block; width: 200px; height: 28px; line-height: 28px; background-color: #fff;}
-.filters a:first-child{ overflow: hidden; color: #7F7F7F; padding-left: 6px; display: block; }
+.filters a.display-keyword:first-child{ overflow: hidden; color: #7F7F7F; padding-left: 6px; display: block; }
.filters li:hover{-webkit-box-shadow : none; -moz-box-shadow : none; box-shadow : none;}
-.filters .icon-action{position: absolute; top: 10px; right: 6px;width: 10px; height: 10px; display: inline-block;}
-.filters .cross{ background: url(../img/icon-cross-10.png) 0 0 no-repeat; }
-.filters .circle{width: 10px; height: 10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; background-color: #7F7F7F;}
+.filters .icon-action{position: absolute; top: 10px; right: 6px;width: 10px; height: 10px; display: inline-block;}
+
+.filters li.disabled .icon-action{width: 10px; height: 10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; background-color: #7F7F7F;}
.filters li.disabled a{opacity: 0.5;}
+.filters li .icon-action{background: url(../img/icon-cross-10.png) 0 0 no-repeat;}
+
.float-left{float: left;}
.filters-wrap{width: 225px; background-color: #EEE; margin-right: 17px;}
.list-projets-5{width: 708px;}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/v2/js/keyword-mosaic.js Thu Jun 27 17:31:15 2013 +0200
@@ -0,0 +1,184 @@
+$(function() {
+
+ $('.masonry-177').masonry({
+ columnWidth: 177,
+ itemSelector: '.item-masonry'
+ });
+
+ function updateMasonry() {
+ $('.masonry-177').data('masonry').layout();
+ }
+
+ var keywordsobj = {};
+
+ $(".item-masonry").each(function(i, element) {
+ $(element)
+ .attr("data-keywords")
+ .split(",")
+ .forEach(function(kw) {
+ var keyword = kw.replace(/(^\s+|\s+$)/g,''),
+ basekw = keyword.toLowerCase();
+ if (!keywordsobj.hasOwnProperty(basekw)) {
+ keywordsobj[basekw] = {
+ keyword: keyword,
+ basekeyword: basekw,
+ count: 0,
+ items: $(),
+ enabled: true
+ };
+ }
+ kwobj = keywordsobj[basekw];
+ kwobj.count++;
+ kwobj.items.push(element);
+ });
+ });
+
+ var keywordslist = [];
+
+ for (var k in keywordsobj) {
+ if (keywordsobj.hasOwnProperty(k)) {
+ keywordslist.push(keywordsobj[k]);
+ }
+ }
+
+ keywordslist.sort(function(a, b) {
+ return b.count - a.count;
+ });
+
+ var filterlist = $(".filters");
+
+ function updateKeywords() {
+ var enabledItems = $();
+ keywordslist.forEach(function(kw) {
+ if (kw.enabled) {
+ enabledItems = enabledItems.add(kw.items);
+ kw.li.removeClass("disabled");
+ } else {
+ kw.li.addClass("disabled");
+ }
+ });
+ $(".item-masonry").addClass("disabled");
+ enabledItems.removeClass("disabled");
+ }
+
+ keywordslist.slice(0,100).forEach(function(kw) {
+ var li = $('<li class="box-shadow-2">'),
+ outera = $('<a class="display-keyword" href="#">'),
+ innera = $('<a class="icon-action" href="#">');
+ outera.text(kw.keyword + ' ');
+ outera.append(innera);
+ li.append(outera);
+ kw.li = li;
+ li.click(function() {
+ if (kw.enabled) {
+ keywordslist.forEach(function(k) {
+ k.enabled = false;
+ });
+ kw.enabled = true;
+ } else {
+ keywordslist.forEach(function(k) {
+ k.enabled = true;
+ });
+ }
+ updateKeywords();
+ return false;
+ });
+ innera.click(function() {
+ kw.enabled = !kw.enabled;
+ updateKeywords();
+ return false;
+ });
+ filterlist.append(li);
+ })
+
+ $('.toggle-comment').click(function(e){
+ e.preventDefault();
+ $('.show-comment, .hide-comment').hide();
+ if($('.mosaic').length){
+ $('.mosaic').removeClass('mosaic').addClass('mosaic-comment');
+ $('.hide-comment').show();
+ }else{
+ $('.mosaic-comment').removeClass('mosaic-comment').addClass('mosaic');
+ $('.show-comment').show();
+ }
+ updateMasonry();
+ });
+
+//##################
+/*
+ $(document).on('click','.display-keyword', function(e){
+ e.preventDefault();
+ var ul = $(this).parents('ul'),
+ li = $(this).parents('li'),
+ iconAction = li.find('.icon-action'),
+ index = li.index(),
+ keyword = $(this).attr('data-keyword');
+
+ if(!li.hasClass('disabled') && ul.find('li.disabled').length){
+ ul.find('li').each(function(k, v){
+ var displayKeyword = $(v).find('.display-keyword'),
+ iconAction = $(v).find('.icon-action'),
+ keyword = $.trim(displayKeyword.attr('data-keyword'));
+ enabledDisplayKeyword($(v), keyword, iconAction);
+ });
+ }else{
+ ul.find('li').each(function(k, v){
+ if(index != k){
+ var displayKeyword = $(v).find('.display-keyword'),
+ iconAction = $(v).find('.icon-action'),
+ keyword = displayKeyword.attr('data-keyword');
+ 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'),
+ keyword = displayKeyword.attr('data-keyword');
+ if(li.hasClass('disabled')){
+ enabledDisplayKeyword(li, keyword, iconAction);
+ }else{
+ disabledDisplayKeyword(li, keyword, iconAction);
+ }
+ }
+ function enabledDisplayKeyword(li, keyword, iconAction){
+
+ $('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){
+
+ $('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');
+ }
+*/
+});
--- a/integration/v2/js/main.js Thu Jun 27 16:16:18 2013 +0200
+++ b/integration/v2/js/main.js Thu Jun 27 17:31:15 2013 +0200
@@ -21,14 +21,6 @@
gutter : 16
});
- function masonry177(){
- var masonry177 = $('.masonry-177');
- masonry177.masonry({
- columnWidth: 177,
- itemSelector: '.item-masonry'
- });
- }
- masonry177();
//popin
$('.open-popin').bind('click', function(e){
e.preventDefault();
@@ -60,119 +52,7 @@
keywordsTagIt.tagit("createTag", tag);
});
}
-//mosaic
- $('.toggle-comment').bind('click', function(e){
- e.preventDefault();
- $('.show-comment, .hide-comment').hide();
- if($('.mosaic').length){
- $('.mosaic').removeClass('mosaic').addClass('mosaic-comment');
- $('.hide-comment').show();
- }else{
- $('.mosaic-comment').removeClass('mosaic-comment').addClass('mosaic');
- $('.show-comment').show();
- }
- masonry177();
- });
- $('.display-keyword').bind('click', function(e){
- e.preventDefault();
- var ul = $(this).parents('ul'),
- li = $(this).parents('li'),
- iconAction = li.find('.icon-action'),
- index = li.index(),
- keyword = $(this).attr('data-keyword');
-
- if(!li.hasClass('disabled') && ul.find('li.disabled').length){
- ul.find('li').each(function(k, v){
- var displayKeyword = $(v).find('.display-keyword'),
- iconAction = $(v).find('.icon-action'),
- keyword = $.trim(displayKeyword.attr('data-keyword'));
- enabledDisplayKeyword($(v), keyword, iconAction);
- });
- }else{
- ul.find('li').each(function(k, v){
- if(index != k){
- var displayKeyword = $(v).find('.display-keyword'),
- iconAction = $(v).find('.icon-action'),
- keyword = displayKeyword.attr('data-keyword');
- 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'),
- 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');
- $('li.keyword-'+keyword).find('.curtain').hide();
- iconAction.addClass('cross');
- }
- function disabledDisplayKeyword(li, keyword, iconAction){
- iconAction.removeClass('cross').removeClass('circle');
- li.addClass('disabled');
- $('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()