Fixed Dismissable CollectionItem Inialization

Author: kevzlou7979

gwt-material/src/main/java/gwt/material/design/client/ui/MaterialCollectionItem.java

@@ -50,13 +50,25 @@ public class MaterialCollectionItem extends MaterialWidget implements HasClickHa
     private final ToggleStyleMixin<MaterialCollectionItem> dismissableMixin = new ToggleStyleMixin<>(this, "dismissable");
 
     private HandlerRegistration handlerReg;
+    private Runnable swipeLeftCallback;
+    private Runnable swipeRightCallback;
 
     public MaterialCollectionItem() {
         super(Document.get().createLIElement());
         setStyleName("collection-item");
         UiHelper.addMousePressedHandlers(this);
     }
 
+    @Override
+    protected void onLoad() {
+        super.onLoad();
+        initDismissableCollection(getSwipeLeftCallback(), getSwipeRightCallback());
+    }
+
+    private native void initDismissableCollection(Runnable swipeLeftCallback, Runnable swipeRightCallback) /*-{
+        $wnd.initDismissableCollection(swipeLeftCallback, swipeRightCallback);
+    }-*/;
+
     public void setType(CollectionType type) {
         switch (type) {
         case AVATAR:
@@ -123,4 +135,20 @@ public boolean isAvatar() {
     public HandlerRegistration addClickHandler(ClickHandler handler) {
         return addDomHandler(handler, ClickEvent.getType());
     }
+
+    public Runnable getSwipeLeftCallback() {
+        return swipeLeftCallback;
+    }
+
+    public void setSwipeLeftCallback(Runnable swipeLeftCallback) {
+        this.swipeLeftCallback = swipeLeftCallback;
+    }
+
+    public Runnable getSwipeRightCallback() {
+        return swipeRightCallback;
+    }
+
+    public void setSwipeRightCallback(Runnable swipeRightCallback) {
+        this.swipeRightCallback = swipeRightCallback;
+    }
 }

gwt-material/src/main/resources/gwt/material/design/client/resources/js/animation.js

@@ -34,4 +34,86 @@ function closeGrid(id, duration){
 		.addClass('closed');
 	});
   });
+}
+
+var swipeLeft = false;
+var swipeRight = false;
+
+/* Hook the Dismissable Collection to includke the swipe left and swipe right
+   callback */
+function initDismissableCollection(swipeLeftCallback, swipeRightCallback) {
+  // Right On Remove callback
+  var rightCallbacks = $.Callbacks();
+  rightCallbacks.add(swipeRightCallback);
+
+  // Left on Remove callback
+  var leftCallbacks = $.Callbacks();
+  leftCallbacks.add(swipeLeftCallback);
+
+  // Dismissible Collections
+  $('.dismissable').each(function() {
+    $(this).hammer({
+      prevent_default: false
+    }).bind('pan', function(e) {
+      if (e.gesture.pointerType === "touch") {
+        var $this = $(this);
+        var direction = e.gesture.direction;
+        var x = e.gesture.deltaX;
+        var velocityX = e.gesture.velocityX;
+
+        $this.velocity({ translateX: x
+        }, {duration: 50, queue: false, easing: 'easeOutQuad'});
+
+        // Swipe Left
+        if (direction === 4 && (x > ($this.innerWidth() / 2) || velocityX < -0.75)) {
+          swipeLeft = true;
+        }
+
+        // Swipe Right
+        if (direction === 2 && (x < (-1 * $this.innerWidth() / 2) || velocityX > 0.75)) {
+          swipeRight = true;
+        }
+      }
+    }).bind('panend', function(e) {
+      // Reset if collection is moved back into original position
+      if (Math.abs(e.gesture.deltaX) < ($(this).innerWidth() / 2)) {
+        swipeRight = false;
+        swipeLeft = false;
+      }
+
+      if (e.gesture.pointerType === "touch") {
+        var $this = $(this);
+        if (swipeLeft || swipeRight) {
+          var fullWidth;
+          if (swipeLeft) { fullWidth = $this.innerWidth(); }
+          else { fullWidth = -1 * $this.innerWidth(); }
+
+          $this.velocity({ translateX: fullWidth,
+          }, {duration: 100, queue: false, easing: 'easeOutQuad', complete:
+              function() {
+                $this.css('border', 'none');
+                $this.velocity({ height: 0, padding: 0,
+                }, {duration: 200, queue: false, easing: 'easeOutQuad', complete:
+                    function() {
+                      if(swipeRight){
+                        rightCallbacks.fire();
+                      }else{
+                        leftCallbacks.fire();
+                      }
+                      $this.remove();
+                    }
+                });
+              }
+          });
+        }
+        else {
+          $this.velocity({ translateX: 0,
+          }, {duration: 100, queue: false, easing: 'easeOutQuad'});
+        }
+        swipeLeft = false;
+        swipeRight = false;
+      }
+    });
+
+  });
 }