@@ -407,5 +393,6 @@ + diff -r 26dddb3f5804 -r be4eb4db3418 integration/v2/css/style.css --- 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;} diff -r 26dddb3f5804 -r be4eb4db3418 integration/v2/js/keyword-mosaic.js --- /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 = $('

'), + outera = $(''), + innera = $(''); + 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'); + } +*/ +}); diff -r 26dddb3f5804 -r be4eb4db3418 integration/v2/js/main.js --- 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()