1 $(function() {

     2     

     3     $('.masonry-177').masonry({

     4         columnWidth: 177,

     5         itemSelector: '.item-masonry'

     6     });

     7     

     8     function updateMasonry() {

     9         $('.masonry-177').data('masonry').layout();

    10     }

    11     

    12     var keywordsobj = {};

    13     

    14     $(".item-masonry").each(function(i, element) {

    15         $(element)

    16             .attr("data-keywords")

    17             .split(",")

    18             .forEach(function(kw) {

    19                 var keyword = kw.replace(/(^\s+|\s+$)/g,''),

    20                     basekw = keyword.toLowerCase();

    21                 if (!keywordsobj.hasOwnProperty(basekw)) {

    22                     keywordsobj[basekw] = {

    23                         keyword: keyword,

    24                         basekeyword: basekw,

    25                         count: 0,

    26                         items: $(),

    27                         enabled: true

    28                     };

    29                 }

    30                 kwobj = keywordsobj[basekw];

    31                 kwobj.count++;

    32                 kwobj.items.push(element);

    33             });

    34     });

    35     

    36     var keywordslist = [];

    37     

    38     for (var k in keywordsobj) {

    39         if (keywordsobj.hasOwnProperty(k)) {

    40             keywordslist.push(keywordsobj[k]);

    41         }

    42     }

    43     

    44     keywordslist.sort(function(a, b) {

    45         return b.count - a.count;

    46     });

    47     

    48     var filterlist = $(".filters");

    49     

    50     function updateKeywords() {

    51         var enabledItems = $();

    52         keywordslist.forEach(function(kw) {

    53             if (kw.enabled) {

    54                 enabledItems = enabledItems.add(kw.items);

    55                 kw.li.removeClass("disabled");

    56             } else {

    57                 kw.li.addClass("disabled");

    58             }

    59         });

    60         $(".item-masonry").addClass("disabled");

    61         enabledItems.removeClass("disabled");

    62     }

    63     

    64     keywordslist.slice(0,100).forEach(function(kw) {

    65         var li = $('<li class="box-shadow-2">'),

    66             outera = $('<a class="display-keyword" href="#">'),

    67             innera = $('<a class="icon-action" href="#">');

    68         outera.text(kw.keyword + ' ');

    69         outera.append(innera);

    70         li.append(outera);

    71         kw.li = li;

    72         li.click(function() {

    73             if (kw.enabled) {

    74                 keywordslist.forEach(function(k) {

    75                     k.enabled = false;

    76                 });

    77                 kw.enabled = true;

    78             } else {

    79                 keywordslist.forEach(function(k) {

    80                     k.enabled = true;

    81                 });

    82             }

    83             updateKeywords();

    84             return false;

    85         });

    86         innera.click(function() {

    87             kw.enabled = !kw.enabled;

    88             updateKeywords();

    89             return false;

    90         });

    91         filterlist.append(li);

    92     })

    93         

    94     $('.toggle-comment').click(function(e){

    95         e.preventDefault();

    96         $('.show-comment, .hide-comment').hide();

    97         if($('.mosaic').length){

    98             $('.mosaic').removeClass('mosaic').addClass('mosaic-comment');

    99             $('.hide-comment').show();

   100         }else{

   101             $('.mosaic-comment').removeClass('mosaic-comment').addClass('mosaic');

   102             $('.show-comment').show();

   103         }

   104         updateMasonry();

   105     });

   106 

   107 //##################

   108 /*

   109     $(document).on('click','.display-keyword', function(e){

   110         e.preventDefault();

   111         var ul = $(this).parents('ul'),

   112             li = $(this).parents('li'),

   113             iconAction = li.find('.icon-action'),

   114             index = li.index(),

   115             keyword = $(this).attr('data-keyword');

   116         

   117         if(!li.hasClass('disabled') && ul.find('li.disabled').length){

   118             ul.find('li').each(function(k, v){

   119                 var displayKeyword = $(v).find('.display-keyword'),

   120                     iconAction = $(v).find('.icon-action'),

   121                     keyword = $.trim(displayKeyword.attr('data-keyword'));

   122                 enabledDisplayKeyword($(v), keyword, iconAction);

   123             });

   124         }else{

   125             ul.find('li').each(function(k, v){

   126                 if(index != k){

   127                     var displayKeyword = $(v).find('.display-keyword'),

   128                         iconAction = $(v).find('.icon-action'),

   129                         keyword = displayKeyword.attr('data-keyword');

   130                     disabledDisplayKeyword($(v), keyword, iconAction);

   131                 }

   132             });

   133             enabledDisplayKeyword(li, keyword, iconAction);

   134         }

   135     });

   136     $('.icon-action').bind('click', function(e){

   137         e.preventDefault();

   138         var li = $(this).parents('li');

   139         toggleDisplayKeyword(li);

   140     });

   141 

   142     function toggleDisplayKeyword(li){

   143         var displayKeyword = li.find('.display-keyword'),

   144             iconAction = li.find('.icon-action'),

   145             keyword = displayKeyword.attr('data-keyword');

   146         if(li.hasClass('disabled')){

   147             enabledDisplayKeyword(li, keyword, iconAction);

   148         }else{

   149             disabledDisplayKeyword(li, keyword, iconAction);

   150         }

   151     }

   152     function enabledDisplayKeyword(li, keyword, iconAction){

   153 

   154         $('ul.mosaic > li').each(function(k, v){

   155 

   156             var keywords = $(v).attr('data-keywords'),

   157                 item = $(v);

   158             keywords = keywords.split(',');

   159             for(var i=0; i<= keywords.length; i++){

   160                 if($.trim(keywords[i]) == keyword){

   161                     item.find('.curtain').hide();

   162                 }

   163             }

   164         });

   165         $('li.keyword-'+keyword).find('.curtain').hide();

   166         iconAction.addClass('cross');

   167     }

   168     function disabledDisplayKeyword(li, keyword, iconAction){

   169 

   170         $('ul.mosaic > li').each(function(k, v){

   171 

   172             var keywords = $(v).attr('data-keywords'),

   173                 item = $(v);

   174             keywords = keywords.split(',');

   175             for(var i=0; i<= keywords.length; i++){

   176                 if($.trim(keywords[i]) == keyword){

   177                     item.find('.curtain').show();

   178                 }

   179             }

   180         });

   181         iconAction.addClass('circle');

   182     }

   183 */

   184 });