resolve conflicts

Author: bradmartin

README.md

@@ -69,7 +69,15 @@ exports.fabTap = function(args) {
 | backColor  |         X         | X    | Sets the background color of the button | None
 | icon       |         X         | X     | Supports the same image source options that NativeScript images support | Required on android
 | rippleColor|         X         |      | Ripple color on lollipop devices, it will fill the FAB on pre-lollipop devices | None
-                 
+| hideOnSwipeOfView|         X         |   X   | Directs the fab to animate itself in and out on scroll | Pass it the name of the view to monitor for a scroll event example: hideOnSwipeOfView="userListView"
+| hideAnimationDuration|         X         |   X   | How many milliseconds it takes for the button to hide. | Default of not set: 300ms
+
+## NativeScript Compatibility
+
+| NativeScript Version | FloatingActionButton Plugin Version |
+|----------------------|-------------------------------------|
+| 1.6                  | 2.+                                 |
+| 1.5                  | 1.91                                |  
 
 ## iOS Notes
 - We're using [MNFloatingActionButton](http://cocoapods.org/pods/MNFloatingActionButton) by [Matt Nydam](https://github.com/mattnydam)

demo/app/main-page.js

@@ -5,6 +5,14 @@ var platformModule = require("platform");
 var color = require("color");
 
 var users = [
+    { name: 'Billy Bob' },
+    { name: 'Tweeder' }, 
+    { name: 'Mox' },
+    { name: 'Coach' },
+    { name: 'Lance' },
+    { name: 'Johnson' },
+    { name: 'William' },
+    { name: 'Franklin' },
     { name: 'Billy Bob' },
     { name: 'Tweeder' }, 
     { name: 'Mox' },
@@ -32,5 +40,5 @@ function pageLoaded(args) {
 exports.pageLoaded = pageLoaded;
 
 exports.fabTap = function(args){
-    viewModel.users.push({ name: "Gary"});
+    viewModel.users.unshift({ name: "Gary"}); 
 }

demo/app/main-page.xml

@@ -4,7 +4,7 @@
         <ActionBar title="Native FAB" backgroundColor="#3F51B5" color="#fff" />
     </Page.actionBar>
     <grid-layout rows="auto, *">
-        <list-view row="1" items="{{ users }}">
+        <list-view id="userList" row="1" items="{{ users }}">
             <list-view.itemTemplate>
                 <label text="{{ name }}" textWrap="true" fontSize="15" margin="20" />
             </list-view.itemTemplate>
@@ -15,6 +15,7 @@
                 icon="res://ic_add_white"
                 tap="fabTap"
                 rippleColor="#ffffff"
-                class="fab-button" />
+                class="fab-button"
+                hideOnSwipeOfView="userList" />
     </grid-layout>
 </Page>

fab-common.js

@@ -1,14 +1,54 @@
 var view = require("ui/core/view");
 var color = require("color");
+var frameModule = require("ui/frame");
 var dObservable = require("ui/core/dependency-observable");
 var proxy = require("ui/core/proxy");
-
+var swipeLoaded = false;
+    
 var FloatingActionButton = (function (_super) {
     global.__extends(FloatingActionButton, _super);
 
     function FloatingActionButton() {
         _super.call(this);
     }
+    
+
+    FloatingActionButton.prototype.onLoaded = function () {
+        _super.prototype.onLoaded.call(this);
+
+        if(swipeLoaded === false){
+            var fab = this;
+            var viewToAttachTo = this.hideOnSwipeOfView;
+            if(viewToAttachTo !== undefined){
+                var swipeItem = this.page.getViewById(viewToAttachTo);
+
+                if(swipeItem !== undefined){
+                    console.log("Wiring up swipe");
+                    var duration = (this.hideAnimationDuration == undefined) ? 300 : this.hideAnimationDuration;
+                    swipeItem.on("swipe", function (args) { 
+                        //Swipe up
+                        if (args.direction === 4) {
+                            fab.animate({
+                                translate: { x: 0, y: 200 },
+                                opacity: 0,
+                                duration: duration
+                            });
+                        } 
+                        //Swipe Down
+                        else if (args.direction === 8) {
+                            fab.animate({
+                                translate: { x: 0, y: 0 },
+                                opacity: 1,
+                                duration: duration
+                            });
+                        };  
+                    });
+                    
+                    swipeLoaded = true;
+                }
+            }
+        }
+    };
 
     Object.defineProperty(FloatingActionButton.prototype, "rippleColor", {
         get: function () {
@@ -41,6 +81,7 @@ var FloatingActionButton = (function (_super) {
     FloatingActionButton.iconProperty = new dObservable.Property("icon", "FloatingActionButton", new proxy.PropertyMetadata(0, dObservable.PropertyMetadataSettings.AffectsLayout));
     FloatingActionButton.rippleColorProperty = new dObservable.Property("rippleColor", "FloatingActionButton", new proxy.PropertyMetadata(0, dObservable.PropertyMetadataSettings.AffectsLayout));
 
+    
     return FloatingActionButton;
 })(view.View);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-floatingactionbutton",
-  "version": "2.1.2",
+  "version": "2.1.2",
   "description": "A NativeScript plugin to provide an XML widget to implement the Material Design Floating Action Button in NativeScript apps.",
    "main": "fab.js",
   "nativescript": {