Add built-in scroll animation support

Author: sitefinitysteve

README.md

@@ -69,6 +69,8 @@ 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
 

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,5 +1,6 @@
 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");
 
@@ -9,6 +10,37 @@ var FloatingActionButton = (function (_super) {
     function FloatingActionButton() {
         _super.call(this);
     }
+    
+    FloatingActionButton.prototype.onLoaded = function () {
+        _super.prototype.onLoaded.call(this);
+        var fab = this;
+        var viewToAttachTo = this.hideOnSwipeOfView;
+        var swipeItem = this.page.getViewById(viewToAttachTo);
+        
+        if(swipeItem !== undefined){
+            var duration = (this.hideAnimationDuration == undefined) ? 300 : this.hideAnimationDuration;
+            
+            //Wire up action
+            swipeItem.on("swipe", function (args) {
+ 
+            //if scrolling down (swipe up) --  hide FAB
+            if (args.direction === 4) {
+                    fab.animate({
+                        translate: { x: 0, y: 200 },
+                        opacity: 0,
+                        duration: duration
+                    });
+                } //if scrolling up (swipe down) -- show FAB
+                else if (args.direction === 8) {
+                    fab.animate({
+                        translate: { x: 0, y: 0 },
+                        opacity: 1,
+                        duration: duration
+                    });
+                };  
+            });
+        }
+    };
 
     Object.defineProperty(FloatingActionButton.prototype, "rippleColor", {
         get: function () {
@@ -41,7 +73,9 @@ 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);
 
+
 exports.Fab = FloatingActionButton;