Extended Ember-Titanium Button

nice_button.js

var Button        = require('/components/button'),
    ColorChanger  = require('/lib/color_changer'),
    Ember         = require('/lib/em_ti/ember-runtime'),
    ImageView     = require('/lib/em_ti/ui/image_view'),
    Label         = require('/lib/em_ti/ui/label'),
    View          = require('/lib/em_ti/ui/view');
    
var BackgroundView = View.extend({
  backgroundGradientBinding: Ember.Binding.transform(function(value) {
    if (!Ember.none(value)) {
      return { type: 'linear', colors: [ColorChanger.lighter(value, 0.15), ColorChanger.darker(value, 0.2)], startPoint: {x:0, y:0}, endPoint: {x: 0, y:'100%'} };
    }
  }).from('parentView.backgroundColor').oneWay(),
  
  opacityBinding: Ember.Binding.transform(function(value) {
    return value === false ? 0.6 : 1;
  }).from('parentView.enabled').oneWay(),
  
  heightBinding: Ember.Binding.oneWay('parentView.height'),
  widthBinding: Ember.Binding.oneWay('parentView.width'),
  
  zIndex: 1
});

var IconImageView = ImageView.extend({
  heightBinding: Ember.Binding.transform(function(value) {
    return Ember.none(value) ? 0 : value;
  }).from('parentView.icon.height').oneWay(),
  
  imageBinding: Ember.Binding.oneWay('parentView.icon.image'),
  
  widthBinding: Ember.Binding.transform(function(value) {
    return Ember.none(value) ? 0 : value;
  }).from('parentView.icon.width').oneWay(),
  
  visibleBinding: Ember.Binding.transform(function(value) {
    return Ember.none(value) ? false : true;
  }).from('image').oneWay(),
  
  left: 10,
  zIndex: 2
});

var ButtonLabel = Label.extend({
  colorBinding: Ember.Binding.oneWay('parentView.color'),
  fontBinding: Ember.Binding.oneWay('parentView.font'),
  heightBinding: Ember.Binding.oneWay('parentView.height'),
  
  opacityBinding: Ember.Binding.transform(function(value) {
    return value === false ? 0.6 : 1;
  }).from('parentView.enabled').oneWay(),
  
  shadowColorBinding: Ember.Binding.transform(function(value) {
    if (!Ember.none(value)) {
      return ColorChanger.darker(value, 0.2);
    }
  }).from('parentView.backgroundColor').oneWay(),
  
  textBinding: Ember.Binding.oneWay('parentView.title'),
  widthBinding: Ember.Binding.oneWay('parentView.width'),
  
  minimunFontSize: 12,
  right: 0,
  shadowOffset: {x: -1, y: 1},
  textAlign: 'center',
  zIndex: 2,
  
  width: function() {
    var iconWidth = this.getPath('parentView.icon.width'), width = this.getPath('parentView.width');
    if (!Ember.none(width)) {
      return Ember.none(iconWidth) ? width : (width - iconWidth - 10);
    }
  }.property('parentView.icon.width', 'parentView.width'),
});

var ButtonOverlay = View.extend({
  heightBinding: Ember.Binding.oneWay('parentView.height'),
  widthBinding: Ember.Binding.oneWay('parentView.width'),

  backgroundColor: '#000',
  opacity: 0.4,
  zIndex: 10,

  visible: function() {
    return (this.getPath('parentView.enabled') === false || this.getPath('parentView.buttonPressed') || this.getPath('parentView.buttonClicked'));
  }.property('parentView.enabled', 'parentView.buttonPressed', 'parentView.buttonClicked')
});

/**
  @class

  Easily create a nice looking button on iOS and Android.

  @extends Button
*/
var NiceButton = Button.extend({
  childViews: [BackgroundView, IconImageView, ButtonLabel, ButtonOverlay],
  
  opacityBinding: Ember.Binding.transform(function(value) {
    return value === false ? 0.6 : 1;
  }).from('enabled').oneWay(),
  
  backgroundColor: '#0074aa',
  borderColor: '#825015',
  borderRadius: 14,
  borderWidth: 1,
  color: '#fff',
  font: {fontFamily: 'Lato', fontSize: 20},
  height: 40,
  style: 'plain',
  width: 140
});

module.exports = NiceButton;