Updates, Changed POD

Author: sitefinitysteve

demo/app/app.css

@@ -16,9 +16,11 @@ button {
 }
 
 .fab-button {
-    height: 70;
+    height: 50;
+    width: 50;
     margin: 15;
     horizontal-align: right;
     vertical-align: bottom;
-    color: red;
+    color: #FFF;
+    background-color: #ff4081;
 }

demo/app/main-page.js

@@ -11,8 +11,7 @@ var users = [
     { name: 'Lance' },
     { name: 'Johnson' },
     { name: 'William' },
-    { name: 'Franklin' },
-    { name: 'Napoleon' },
+    { name: 'Franklin' }
 ];
 var viewModel = new observable.Observable({
     users: users
@@ -28,9 +27,9 @@ function pageLoaded(args) {
         }
     }
     page.bindingContext = viewModel;
-    
-    var button = page.getViewById("fabButton");
-    debugger;
-    page.ios.view.addSubview(button.ios);
 }
-exports.pageLoaded = pageLoaded;
+exports.pageLoaded = pageLoaded;
+
+exports.fabTap = function(args){
+    alert("FAB TAP")
+}

demo/app/main-page.xml

@@ -6,12 +6,14 @@
     <grid-layout rows="auto, *">
         <list-view row="1" items="{{ users }}">
             <list-view.itemTemplate>
-                <label text="{{ name }}" textWrap="true" fontSize="18" margin="20" />
+                <label text="{{ name }}" textWrap="true" fontSize="15" margin="20" />
             </list-view.itemTemplate>
         </list-view>
         <FAB:fab
                 id="fabButton"
+                row="1"
+                icon="res://ic_add_white"
+                tap="fabTap"
                 class="fab-button" />
-
     </grid-layout>
 </Page>

fab.ios.js

@@ -4,11 +4,15 @@
  * https://twitter.com/BradWayneMartin
  * https://github.com/bradmartin
  * Pull requests are welcome. Enjoy!
+ * Cocoapod via: https://cocoapods.org/pods/KCFloatingActionButton by Lee Sun-hyoup
  *************************************************************************************/
 
- var common = require("./fab-common");
- var ImageSource = require("image-source");
+var common = require("./fab-common");
+var ImageSource = require("image-source");
+var stateChanged = require("ui/core/control-state-change");
 var style = require("ui/styling/style");
+var utils = require("utils/utils");
+var enums = require("ui/enums");
 
  require("utils/module-merge").merge(common, module.exports);
 
@@ -18,47 +22,59 @@ var FloatingActionButton = (function (_super) {
     function FloatingActionButton() {
         var _this = this;
         _super.call(this);
-        var size = CGRectMake(0, 0, 50, 50);
-        this._ios = MNFloatingActionButton.alloc().initWithFrame(size);
 
+        var button = KCFloatingActionButton.alloc().init();
+        this._ios = button;
     }
 
     Object.defineProperty(FloatingActionButton.prototype, "ios", {
         get: function () {
             return this._ios;
         }
     });
-    
+
     return FloatingActionButton;
 
 })(common.Fab);
 
 exports.Fab = FloatingActionButton;
- 
-// this function is called when the `color` Style property changes on a `NumberPicker` instance 
-function setColor(view, value) {
-    var fab = view.ios;
-
-    // value is UIColor, so we may apply it directly
-    fab.backgroundColor = value;
-}
-
-// this function is called when the `color` Style property changes and the new value is `undefined`
-function resetColor(view, value) {
-    var fab = view.ios;
-
-    // value is native UIColor, so apply it directly
-    fab.backgroundColor = value;
-}
 
-// this function is called when the `Styler` is about to reset the `color` property to its default (original) value.
-function getNativeColorValue(view) {
-    var fab = view.ios;
-
-    return fab.backgroundColor;
-}
-debugger;
-var changedHandler = new style.StylePropertyChangedHandler(setColor, resetColor, getNativeColorValue);
-
-// register the handler for the color property on the NumberPicker type
-style.registerHandler(style.properties.colorProperty, changedHandler, "FloatingActionButton");
+var FloatingActionButtonStyler = (function () {
+    function FloatingActionButtonStyler() {
+    }
+    // COLOR
+    FloatingActionButtonStyler.setColorProperty = function (view, newValue) {
+        var fab = view.ios;
+        fab.plusColor = newValue;
+    };
+    FloatingActionButtonStyler.resetColorProperty = function (view, nativeValue) {
+        var fab = view.ios;
+        fab.plusColor = nativeValue;
+    };
+    FloatingActionButtonStyler.getNativeColorValue = function (view) {
+        var fab = view.ios;
+        return fab.plusColor;
+    };
+    
+    // BACKGROUND COLOR
+    FloatingActionButtonStyler.setBackgroundColorProperty = function (view, newValue) {
+        var fab = view.ios;
+        fab.buttonColor = newValue;
+    };
+    FloatingActionButtonStyler.resetBackgroundColorProperty = function (view, nativeValue) {
+        var fab = view.ios;
+        fab.buttonColor = nativeValue;
+    };
+    FloatingActionButtonStyler.getNativeBackgroundColorValue = function (view) {
+        var fab = view.ios;
+        return fab.buttonColor;
+    };
+    
+    FloatingActionButtonStyler.registerHandlers = function () {
+        style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(FloatingActionButtonStyler.setColorProperty, FloatingActionButtonStyler.resetColorProperty, FloatingActionButtonStyler.getNativeColorValue), "FloatingActionButton");
+        style.registerHandler(style.backgroundColorProperty, new style.StylePropertyChangedHandler(FloatingActionButtonStyler.setBackgroundColorProperty, FloatingActionButtonStyler.resetBackgroundColorProperty, FloatingActionButtonStyler.getNativeBackgroundColorValue), "FloatingActionButton");
+    };
+    return FloatingActionButtonStyler;
+})();
+exports.FloatingActionButtonStyler = FloatingActionButtonStyler;
+FloatingActionButtonStyler.registerHandlers();

platforms/ios/PodFile

@@ -1 +1 @@
-pod 'MNFloatingActionButton'
+pod 'KCFloatingActionButton'