--- a/integration/v2/18-19-20-21-collection_vue_mosaique.html Thu Jun 27 12:58:16 2013 +0200
+++ b/integration/v2/18-19-20-21-collection_vue_mosaique.html Thu Jun 27 16:13:51 2013 +0200
@@ -156,18 +156,6 @@
<div class="clearfix">
<div class="filters-wrap float-left">
<ul class="filters">
- <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="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="éè" 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>
@@ -404,5 +392,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>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/v2/js/keyword-mosaic.js Thu Jun 27 16:13:51 2013 +0200
@@ -0,0 +1,107 @@
+$(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();
+ });
+
+});
--- a/integration/v2/js/main.js Thu Jun 27 12:58:16 2013 +0200
+++ b/integration/v2/js/main.js Thu Jun 27 16:13:51 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,112 +52,6 @@
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');
-
-
- 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()