Perigon UI testbead

by ud3323

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.js"></script>
<h1>Testbed</h1>
<script type="text/x-handlebars"> 
    {{view Perigon.Button text="button" icon="tag" iconPosition="before"}}
</script>

JavaScript

window.Perigon = Ember.Application.create({
    ready: function() {}
});

var get = Ember.get;


Perigon.Button = Ember.Button.extend({
  classNames: ['btn'],
  attributeBindings: ['tabindex', 'title', 'value'],
  classNameBindings: ['disabled', '_styleClass', '_sizeClass'],
  
  /**
    Walk like a duck...
  
    @type Boolean
    @default true
    @constant
  */
  isButton: true,

  /**
    The class name for the icon to display on the button. For a list of class names see 
    the Perigon Ui docs under the 'Icons' section.
    
    If this property is set to any value that Ember.empty() evaluates as true no icon 
    will be displayed.

    @type String
    @default null
   */
  icon: null,
  
  /**
    The position that the icon will appear on the button. Can be either "before" or "after" 
    the button's text. 
    
    Any other value will default to "before".

    @type String
    @default "before"
   */
  iconPosition: "before",
  
  /**
    Display the icon as an inverted (white) icon.

    @type Boolean
    @default false
   */
  inverseIcon: false,
  
  /**
    Flag to indicate if this is disabled or not
    
    @type Boolean
    @default false
   */
  isDisabled: Ember.computed(function(key, value) {
    var disabled = get(this, 'disabled');
    
    if (value !== undefined) { return value ? true : false; }
    return disabled ? true : false;
  }).property('disabled').cacheable(),
  
  /**
    The size of the button. The supported sizes are:

    large:    For larger buttons
    small:    For smaller buttons
    mini:     For miniature buttons
    
    @type String
    @default null
   */
  size: null,
  
  /**
    The name of the style to apply to the button. Default is a standard gray button with gradient.
    The other supported styles are:
    
    primary:    Provides extra visual weight and identifies the primary action in a set of buttons
    info:     Used as an alternative to the default styles
    success:    Indicates a successful or...