From 9ac4b64692e6b42b768ba7edda2b9dca2a809735 Mon Sep 17 00:00:00 2001
From: Dandy Umlauft <dandy.umlauft@googlemail.com>
Date: Fri, 21 Jul 2017 23:38:16 +0200
Subject: [PATCH] Update multipleFilterMasonry.js

Solve the Issue: https://github.com/dynamick/multiple-filter-masonry/issues/2
Implemented the callback layoutComplete https://masonry.desandro.com/events.html#layoutcomplete
The layout must be completed before the next filter action can started, so the teaser can animate and does not overlap
---
 multipleFilterMasonry.js | 52 +++++++++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/multipleFilterMasonry.js b/multipleFilterMasonry.js
index d8bf4e5..52d55d0 100644
--- a/multipleFilterMasonry.js
+++ b/multipleFilterMasonry.js
@@ -3,6 +3,8 @@
   $.fn.multipleFilterMasonry = function(options){
     var cache=[];
     var filters = [];
+    // layoutComplete is true for the first filter change
+    var layoutComplete = true;
 
     if(options.selectorType === 'list') {
       $(options.filtersGroupSelector).children().each(function() {
@@ -15,7 +17,11 @@
       $container.find(options.itemSelector).each(function(){
         cache.push($(this));
       });
-      $container.masonry(options);
+      $container
+        .masonry(options)
+        .on("layoutComplete", function () {
+          layoutComplete = true;
+        });
     };
 
     //filter items in cache
@@ -52,17 +58,21 @@
     var proc = function($container){
       $(options.filtersGroupSelector).find('input[type=checkbox]').each(function(){
         $(this).change(function(){
-          var selector = [];
-          $(options.filtersGroupSelector).find('input[type=checkbox]').each( function() {
-            if ( $(this).is(':checked') ) {
-              selector.push( '.' + $(this).val() );
+          if (layoutComplete) {
+            layoutComplete = false;
+
+            var selector = [];
+            $(options.filtersGroupSelector).find('input[type=checkbox]').each( function() {
+              if ( $(this).is(':checked') ) {
+                selector.push( '.' + $(this).val() );
+              }
+            });
+            var items = cache;
+            if (selector.length > 0) {
+              items = filterItems(selector);
             }
-          });
-          var items = cache;
-          if (selector.length > 0) {
-            items = filterItems(selector);
+            reload($container,items);
           }
-          reload($container,items);
         });
       });
     };
@@ -70,16 +80,20 @@
     var procUL = function($container){
       $(options.filtersGroupSelector).children().each(function(){
         $(this).click(function(){
-          $(options.filtersGroupSelector).children().removeClass('selected');
-          window.location.hash = $(this).data('filter');
-          var selector = [];
-          selector.push( '.' + $(this).data('filter') );
-          $(this).addClass('selected');
-          var items = cache;
-          if (selector.length > 0) {
-            items = filterItems(selector);
+          if (layoutComplete) {
+              layoutComplete = false;
+
+            $(options.filtersGroupSelector).children().removeClass('selected');
+            window.location.hash = $(this).data('filter');
+            var selector = [];
+            selector.push('.' + $(this).data('filter'));
+            $(this).addClass('selected');
+            var items = cache;
+            if (selector.length > 0) {
+              items = filterItems(selector);
+            }
+            reload($container, items);
           }
-          reload($container,items);
         });
       });