sproutcore 0.9.0

data/frameworks/sproutcore/views/button.js

@@ -0,0 +1,425 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/view') ;
+require('views/label') ;
+
+// Constants
+SC.TOGGLE_BEHAVIOR = 'toggle';
+SC.PUSH_BEHAVIOR =   'push';
+SC.TOGGLE_ON_BEHAVIOR = "on";
+SC.TOGGLE_OFF_BEHAVIOR = "off" ;  
+SC.MIXED_STATE = '__MIXED__' ;
+
+/** @class
+
+  A button handles simple link functions.  It can be set to a selected,
+  enabled or disabled state.
+  
+  @extends SC.View
+*/
+SC.ButtonView = SC.View.extend(
+  /** @scope SC.ButtonView.prototype */ 
+  {
+  
+  emptyElement: '<a href="javascript:;" class="regular"><span class="button-inner"><span class="label"></span></span></a>',
+  
+  // PROPERTIES
+  
+  /**
+    Used to automatically update the state of the button view for toggle style
+    buttons.
+    
+    for toggle style buttons, you can set the value and it will be used to
+    automatically update the state of the button view.  The value will also
+    change as the user selects to deselects.  The button will make its best
+    effort to convert this value into a reasonable selection state:
+  
+    null, false, 0 -> isSelected = false
+    any other single value -> isSelected = true
+    array -> if all values are the same state: that state.  otherwise MIXED.
+    
+    @type Object
+
+  */  
+  value: false,
+  
+  /**
+    Value of a selected toggle button.
+  
+    for a toggle button, set this to any object value you want.  The button
+    will be selected if the value property equals the targetValue.  If the
+    value is an array of multiple items that contains the targetValue, then
+    the button will be set to a mixed state.
+
+    default is false
+    
+    @type Object
+  */
+  toggleOnValue: true,
+
+  /**
+    Value of an unselected toggle button.
+  
+    For a toggle button, set this to any object value you want.  When the
+    user toggle's the button off, the value of the button will be set to this
+    value.
+  
+    default is false 
+  
+    @type Object
+
+  */
+  toggleOffValue: false,
+  
+  /**
+    optionally set this to the theme you want this button to have.  
+    
+    This is used to determine the type of button this is.  You generally 
+    should set a class name on the HTML with the same value to allow CSS 
+    styling.
+    
+    The default SproutCore theme supports "regular", "back", "checkbox", and
+    "radio"
+  */
+  theme: 'regular',
+  
+  /**
+    Optionally set the behavioral mode of this button.  
+  
+    Possible values are:
+
+    {{{
+     SC.PUSH_BEHAVIOR: ('push')
+       Pressing the button will trigger an action tied to the button. Does
+       not change the value of the button.
+  
+     SC.TOGGLE_BEHAVIOR: ('toggle')
+       Pressing the button will invert the current value of the button. If
+       the button has a mixed value, it will be set to true.
+  
+     SC.TOGGLE_ON_BEHAVIOR: ('on')
+       Pressing the button will set the current state to true no matter the
+       previous value.
+  
+     SC.TOGGLE_OFF_BEHAVIOR: ('off')
+       Pressing the button will set the current state to false no matter the
+       previous value.
+    }}}
+  
+  */  
+  buttonBehavior: SC.PUSH_BEHAVIOR,
+  
+  /**
+    set to false to disable the button. clicks will be ignored.
+    
+    @type bool
+  */  
+  isEnabled: true,
+  isEnabledBindingDefault: SC.Binding.OneWayBool,
+  
+  /**
+    this is the buttons selection state.  Returns true, false or SC.MIXED_STATE.
+  */
+  isSelected: false,
+  isSelectedBindingDefault: SC.Binding.OneWayBool,
+
+  /**
+    if set to true, then this button will be triggered when you hit return
+    while focused on a form view.  This will also apply the 'def' class name
+    to the button.
+  */
+  isDefault: false,
+  isDefaultBindingDefault: SC.Binding.OneWayBool,
+  
+  /**
+    is set to true, then this button will be triggered when you hit escape
+    inside a pane.
+  */  
+  isCancel: false,
+  isCancelBindingDefault: SC.Binding.OneWayBool,
+  
+  /**
+    set to true if you want the internal element with the class name 
+    'label' to be localized on init.
+  */
+  localize: false,
+  
+  /**
+    this property can be used to edit the contents of the label element,
+    (if there is one).
+  */
+  labelText: function(key, value) {
+    // set the value of the label text.  Possibly localize and set innerHTML.
+    if (value !== undefined) {
+      if (this._labelText != value) {
+        var text = this._labelText = value ;
+        var lsel = this.get('labelSelector') ;
+        var el = (lsel) ? this.$sel(lsel) : this.rootElement ;
+
+        if (this.get('localize')) text = text.loc() ;
+        if (el) Element.update(el, text) ;
+      }
+      
+      // lazily fetch the label text.  This only happens if localization is
+      // turned off.
+      if (!this._labelText) {
+        var el = this.$sel(this.labelSelector) ;
+        this._labelText = (el) ? el.innerHTML : '' ;
+      }
+      return this._labelText ;
+    }
+    
+    // return value.
+    return this._labelText ;
+  }.property(),
+  
+  labelSelector: '.label',
+  
+  /**
+    The name of the action you want triggered when the button is pressed.  
+    
+    This property is used in conjunction with the target property to execute
+    a method when a regular button is pressed.  These properties are not 
+    relevant when the button is used in toggle mode.
+    
+    If you do not set a target, then pressing a button will cause the
+    responder chain to search for a view that implements the action you name
+    here.  If you set a target, then the button will try to call the method
+    on the target itself.
+    
+    For legacy support, you can also set the action property to a function.  
+    Doing so will cause the function itself to be called when the button is
+    clicked.  It is generally better to use the target/action approach and 
+    to implement your code in a controller of some type.
+    
+    @type String
+  */
+  action: null,
+  
+  /**
+    The target object to invoke the action on when the button is pressed.
+    
+    If you set this target, the action will be called on the target object
+    directly when the button is clicked.  If you leave this property set to
+    null, then the button will search the responder chain for a view that 
+    implements the action when the button is pressed instead.
+    
+    @type Object
+  */
+  target: null,
+
+  /**
+    The key equivalent that should trigger this button on the page.
+  */
+  keyEquivalent: null,
+  
+  performKeyEquivalent: function( keystring, evt )
+  {
+    if (!this.get('isEnabled')) return false;
+    
+    var keyEquivalent = this.get('keyEquivalent');
+    if (keyEquivalent && (keyEquivalent == keystring))
+    {
+      // button has defined a keyEquivalent and it matches!
+      // if triggering succeeded, true will be returned and the operation will be handeled 
+      // (i.e performKeyEquivalent will cease crawling the view tree)
+      return this.triggerAction(evt);
+    }
+    return false;
+  },
+  
+  /**
+    fakes a click... evt is optional.  
+    
+    Temporarily highlights the button to show that it is being triggered.  
+    Does nothing if the button is disabled. 
+    
+    @returns {bool} success/failure of the request
+  */  
+  triggerAction: function(evt) {  
+    if (!this.get('isEnabled')) return false;
+    this.setClassName('active', true);
+    this.didTriggerAction();
+    this._action(evt);
+    var view = this;
+    setTimeout(function() { view.setClassName('active', false); }, 200);
+    return true;
+  },
+  
+  didTriggerAction: function() {},
+
+  // ................................................................
+  // INTERNAL SUPPORT
+  
+  /** @private */
+  init: function() {
+    arguments.callee.base.call(this) ;
+    this._updateClassForState() ;
+    
+    var el ;
+    var lsel = this.get('labelSelector') ;
+    if (this.get('localize') && (el = (lsel) ? this.$sel(lsel) : this.rootElement)) {
+      this._labelText = el.innerHTML.strip() ;
+      Element.update(el, this._labelText.loc()) ;
+    }
+  },
+
+  _selectedStateFromValue: function(value) {
+    var targetValue = this.get('toggleOnValue') ;
+    var state ;
+    
+    if ($type(value) == T_ARRAY) {
+      if (value.length == 1) {
+        state = (value[0] == targetValue) ;
+      } else {
+        state = (value.include(targetValue)) ? SC.MIXED_STATE : false ;
+      }
+    } else {
+      state = (value == targetValue) ;
+    }
+    return state ;
+  },
+  
+  /** @private */
+  propertyObserver: function(observing,target,key,value) {
+    if (target != this) return ;
+
+    // handle changes to the value
+    if (key == 'value') {
+      // determine the new selection state.
+      value = this.get('value') ;
+      if (value == this._value) return ; // process value one time.
+      this._value = value ;
+      
+      // if the new selected state does not match the computed value, set it.
+      var state = this._selectedStateFromValue(value) ;
+      if (!(this.get('isSelected') == state)) {
+        this.set('isSelected', state) ;
+        this._updateClassForState() ;
+      }
+      
+    // handle changes to the selected state
+    // forward to value if needed...
+    } else if (key == "isSelected") {
+      var newState = this.get('isSelected') ;
+      var curState = this._selectedStateFromValue(this.get('value')) ;
+      if (curState != newState) {
+        var valueKey = (newState) ? 'toggleOnValue' : 'toggleOffValue' ;
+        this.set('value', this.get(valueKey)) ;
+      }
+      this._updateClassForState() ;
+      
+    // otherwise, handle changes to the isEnabled or isDefault states...
+    } else if ((key == 'isEnabled') || (key == 'isDefault')) {
+      this._updateClassForState() ;
+    }
+  },
+  
+  _updateClassForState: function() {
+    var enabled = !!this.get('isEnabled') ; // force to bool.
+    var tagName = this.rootElement.tagName.toLowerCase() ;
+    if (tagName == "button") {
+      this.rootElement.disabled = !enabled ;
+    }
+    
+    this.setClassName('disabled', !enabled) ;
+    this.setClassName('def', this.get('isDefault')) ;
+    
+    // handle selected state.
+    var sel =this.get('isSelected') ;
+    var mixed = (sel == SC.MIXED_STATE) ;
+    this.setClassName('mixed', mixed) ;
+    this.setClassName('sel', ((mixed) ? false : sel)) ;
+  },
+  
+  // on mouse down, set active only if enabled.  
+  /** @private */
+  mouseDown: function(evt) {
+    this.setClassName('active',this.get('isEnabled')) ;
+    return true ;
+  },
+  
+  // on mouse up, trigger the action only if we are enabled and the mouse
+  // was released inside the view.
+  /** @private */
+  mouseUp: function(evt) {
+    this.setClassName('active', false) ;
+    
+    var tgt = Event.element(evt) ;
+    var inside = false ;
+    while(tgt && (tgt != this.rootElement)) tgt = tgt.parentNode;
+    if (tgt == this.rootElement) inside = true ;
+    
+    if (inside && this.get('isEnabled')) this._action(evt) ;
+    return true ;
+  },
+
+  // perform action depending on the behavior of the button.
+  _action: function(evt) {
+    switch(this.get('buttonBehavior')) {
+      
+    // When toggling, try to invert like values. i.e. 1 => 0, etc.
+    case SC.TOGGLE_BEHAVIOR:
+      var sel = this.get('isSelected') ;
+      if (sel == true) {
+        this.set('value', this.get('toggleOffValue')) ;
+      } else {
+        this.set('value', this.get('toggleOnValue')) ;
+      }
+      break ;
+      
+    // set value to on.  change 0 => 1.
+    case SC.TOGGLE_ON_BEHAVIOR:
+      this.set('value', this.get('toggleOnValue')) ;
+      break ;
+      
+    // set the value to false. change 1 => 0
+    case SC.TOGGLE_OFF_BEHAVIOR:
+      this.set('value', this.get('toggleOffValue')) ;
+      break ;
+      
+    // otherwise, just trigger an action if there is one.
+    default:
+      //if (this.action) this.action(evt);
+      var action = this.get('action');
+      var target = this.get('target') || null;
+      if (action)
+      {
+        if (this._hasLegacyActionHandler()) {
+          // old school... 
+          this._triggerLegacyActionHandler(evt);
+        } else {
+          // newer action method + optional target syntax...
+          SC.app.sendAction(action, target, this);
+        }
+      }
+    }
+  },
+  
+  /** @private */
+  _hasLegacyActionHandler: function()
+  {
+    var action = this.get('action');
+    if (action && ($type(action) == T_FUNCTION)) return true;
+    if (action && ($type(action) == T_STRING) && (action.indexOf('.') != -1)) return true;
+    return false;
+  },
+
+  /** @private */
+  _triggerLegacyActionHandler: function( evt )
+  {
+    if (!this._hasLegacyActionHandler()) return false;
+    
+    var action = this.get('action');
+    if ($type(action) == T_FUNCTION) this.action(evt);
+    if ($type(action) == T_STRING)
+    {
+      eval("this.action = function(e) { return "+ action +"(this, e); };");
+      this.action(evt);
+    }
+  }
+  
+}) ;

data/frameworks/sproutcore/views/checkbox_field.js

@@ -0,0 +1,30 @@
+// ========================================================================
+// SproutCore
+// copyright 2006-2007 Sprout Systems, Inc.
+// ========================================================================
+
+require('views/field') ;
+
+// A text field is an input element with type "text".  This view adds support
+// for hinted values, etc.
+SC.CheckboxFieldView = SC.FieldView.extend({
+  
+  emptyElement: '<input type="checkbox" value="1" />',
+  
+  setFieldValue: function(value) {
+    this.rootElement.checked = !!value;
+  },
+  
+  getFieldValue: function() {
+    return this.rootElement.checked;
+  },
+  
+  valueBindingDefault: SC.Binding.Flag,
+  
+  init: function() {
+    arguments.callee.base.apply(this,arguments) ;
+    var f = this.fieldValueDidChange.bind(this, false) ;
+    Event.observe(this.rootElement,'click', f) ;
+  }
+  
+}) ;