|
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; |