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 });