sproutcore 1.5.0.pre.5 → 1.5.0.rc.1

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/toolbar/method.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2010 Sprout Systems, Inc. and contributors.
-//            portions copyright @2009 Apple Inc.
+//            portions copyright @2011 Apple Inc.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/toolbar/ui.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2010 Sprout Systems, Inc. and contributors.
-//            portions copyright @2009 Apple Inc.
+//            portions copyright @2011 Apple Inc.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/web/methods.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            portions copyright @2009 Apple Inc.
+//            portions copyright @2011 Apple Inc.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/web/ui.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            portions copyright @2009 Apple Inc.
+//            portions copyright @2011 Apple Inc.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 /*global module test htmlbody ok equals same stop start v*/

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/well/ui.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            portions copyright @2009 Apple Inc.
+//            portions copyright @2011 Apple Inc.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 

data/lib/frameworks/sproutcore/frameworks/desktop/views/button.js

@@ -1,10 +1,19 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
+// ..........................................................
+// CONSTANTS
+//
+SC.TOGGLE_BEHAVIOR = 'toggle';
+SC.PUSH_BEHAVIOR =   'push';
+SC.TOGGLE_ON_BEHAVIOR = 'on';
+SC.TOGGLE_OFF_BEHAVIOR = 'off';
+SC.HOLD_BEHAVIOR = 'hold';
+
 /** @class
 
   Implements a push-button-style button.  This class is used to implement
@@ -19,10 +28,9 @@
 
   @extends SC.View
   @extends SC.Control
-  @extends SC.Button
   @since SproutCore 1.0
 */
-SC.ButtonView = SC.View.extend(SC.Control, SC.Button,
+SC.ButtonView = SC.View.extend(SC.Control,
 /** @scope SC.ButtonView.prototype */ {
 
   /**
@@ -41,6 +49,135 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button,
   */
   themeName: 'square',
 
+  // ..........................................................
+  // VALUE 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
+    update the isSelected state of the button view.  The value will also
+    change as the user selects or deselects.  You can control which values
+    the button will treat as isSelected by setting the toggleOnValue and 
+    toggleOffValue.  Alternatively, if you leave these properties set to
+    YES or NO, the button will do its best to convert a value to an 
+    appropriate state:
+  
+    - null, false, 0  -> isSelected = false
+    - any other single value -> isSelected = true
+    - array -> if all values are the same state: that state.  otherwise MIXED.
+    
+    @property {Object}
+  */  
+  value: null,
+
+  /**
+    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 YES
+    
+    @property {Object}
+  */
+  toggleOnValue: YES,
+
+  /**
+    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 NO 
+  
+    @property {Object}
+  */
+  toggleOffValue: NO,
+
+
+  // ..........................................................
+  // TITLE 
+  // 
+  
+  /**
+    If YES, then the title will be localized.
+    
+    @property {Boolean}
+  */
+  localize: NO,
+  
+  /** @private */
+  localizeBindingDefault: SC.Binding.bool(),
+
+  /**
+    The button title.  If localize is YES, then this should be the localization key to display.  Otherwise, this will be the actual string displayed in the title.  This property is observable and bindable.
+    
+    @property {String}
+  */  
+  title: '',
+
+  /**
+    If you set this property, the title property will be updated automatically
+    from the content using the key you specify.
+    
+    @property {String}
+  */
+  contentTitleKey: null,
+  
+  /**
+    The button icon.  Set this to either a URL or a CSS class name (for 
+    spriting).  Note that if you pass a URL, it must contain at 
+    least one slash to be detected as such.
+    
+    @property {String}
+  */
+  icon: null,
+
+  /**
+    If you set this property, the icon will be updated automatically from the
+    content using the key you specify.
+    
+    @property {String}
+  */
+  contentIconKey: null,
+
+  /**
+    If YES, button will attempt to display an ellipsis if the title cannot 
+    fit inside of the visible area.  This feature is not available on all
+    browsers.
+    
+    @property {Boolean}
+  */
+  needsEllipsis: YES,
+  
+  /**
+    The computed display title.  This is generated by localizing the title 
+    property if necessary.
+    
+    @property {String}
+  */
+  displayTitle: function() {
+    var ret = this.get('title');
+    return (ret && this.get('localize')) ? ret.loc() : (ret || '');
+  }.property('title','localize').cacheable(),
+  
+  /**
+    The key equivalent that should trigger this button on the page.
+    
+    @property {String}
+  */
+  keyEquivalent: null,
+
+  // ..........................................................
+  // BEHAVIOR
+  // 
+
   /**
     The behavioral mode of this button.
 
@@ -123,7 +260,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button,
 
   /**
     If YES, use a focus ring.
-    
+
     TODO: When is this property ever changed? Is this redundant with
     render delegates since it can now be turned on on a theme-by-theme
     basis? --TD
@@ -132,6 +269,54 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button,
   */
   supportFocusRing: NO,
 
+  //
+  // Auto Resize Support
+  // These properties are provided so that SC.AutoResize can be mixed in
+  // to enable automatic resizing of the button.
+  //
+  /**
+    SC.ButtonView supports automatic resizing.
+
+    @private
+    @property
+  */
+  supportsAutoResize: YES,
+
+  /**
+    The layer for autoresizing buttons is the button layer itself.
+
+    TODO: get this from the render delegate so other elements may be used.
+
+    @private
+    @property
+  */
+  autoResizeLayer: function() {
+    return this.get('layer');
+  }.property('layer').cacheable(),
+
+  /**
+    The text to be used to automatically resize the view: the displayTitle.
+
+    @private
+    @property
+  */
+  autoResizeText: function() {
+    return this.get('displayTitle');
+  }.property('displayTitle').cacheable(),
+
+  /**
+    The padding to add to the measured size of the text to arrive at the measured
+    size for the view.
+
+    SC.ButtonView gets this from its render delegate, but if not supplied, defaults
+    to 10.
+
+    @default 10
+    @property
+  */
+  autoResizePadding: SC.propertyFromRenderDelegate('autoResizePadding', 10),
+
+
   // TODO: What the hell is this? --TD
   _labelMinWidthIE7: 0,
 
@@ -210,6 +395,10 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button,
     if (keyEquivalent) {
       this._defaultKeyEquivalent = keyEquivalent;
     }
+
+    // if value is not null, update isSelected to match value.  If value is
+    // null, we assume you may be using isSelected only.  
+    if (!SC.none(this.get('value'))) this._button_valueDidChange();  
   },
 
   /**
@@ -243,6 +432,140 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button,
   */
   renderDelegateName: 'buttonRenderDelegate',
 
+  /**
+    Updates the value, title, and icon keys based on the content object, if 
+    set.
+    
+    @property {Object} target the target of the object that changed
+    @property {String} key name of property that changed
+    @returns {SC.ButtonView} receiver
+  */
+  contentPropertyDidChange: function(target, key) {
+    var del = this.get('displayDelegate'), 
+        content = this.get('content'), value ;
+
+    var valueKey = this.getDelegateProperty('contentValueKey', del) ;
+    if (valueKey && (key === valueKey || key === '*')) {
+      this.set('value', content ? (content.get ? content.get(valueKey) : content[valueKey]) : null) ;
+    }
+
+    var titleKey = this.getDelegateProperty('contentTitleKey', del) ;
+    if (titleKey && (key === titleKey || key === '*')) {
+      this.set('title', content ? (content.get ? content.get(titleKey) : content[titleKey]) : null) ;
+    }
+
+    var iconKey = this.getDelegateProperty('contentIconKey', del);
+    if (iconKey && (key === iconKey || key === '*')) {
+      this.set('icon', content ? (content.get ? content.get(iconKey) : content[iconKey]) : null) ;
+    }
+    
+    return this ;
+  },
+
+  /** @private - when title changes, dirty display. */
+  _button_displayObserver: function() {
+    this.displayDidChange();
+  }.observes('title', 'icon', 'value'),
+
+  /**
+    Handle a key equivalent if set.  Trigger the default action for the 
+    button.  Depending on the implementation this may vary.
+    
+    @param {String} keystring
+    @param {SC.Event} evt
+    @returns {Boolean}  YES if handled, NO otherwise
+  */
+  performKeyEquivalent: function(keystring, evt) {
+    //If this is not visible
+    if (!this.get('isVisibleInWindow')) return NO;
+
+    if (!this.get('isEnabled')) return NO;
+    var equiv = this.get('keyEquivalent');
+
+    // 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)
+    if (equiv) {
+      if (equiv === keystring) return this.triggerAction(evt);
+    
+    // should fire if isDefault OR isCancel.  This way if isDefault AND 
+    // isCancel, responds to both return and escape
+    } else if ((this.get('isDefault') && (keystring === 'return')) ||
+        (this.get('isCancel') && (keystring === 'escape'))) {
+          return this.triggerAction(evt);
+    }
+
+    return NO; // did not handle it; keep searching
+  },
+
+  // ..........................................................
+  // VALUE <-> isSelected STATE MANAGEMNT
+  // 
+
+  /**
+    This is the standard logic to compute a proposed isSelected state for a
+    new value.  This takes into account the toggleOnValue/toggleOffValue 
+    properties, among other things.  It may return YES, NO, or SC.MIXED_STATE.
+    
+    @param {Object} value
+    @returns {Boolean} return state
+  */
+  computeIsSelectedForValue: function(value) {
+    var targetValue = this.get('toggleOnValue'), state, next ;
+    
+    if (SC.typeOf(value) === SC.T_ARRAY) {
+
+      // treat a single item array like a single value
+      if (value.length === 1) {
+        state = (value[0] == targetValue) ;
+        
+      // for a multiple item array, check the states of all items.
+      } else {
+        state = null;
+        value.find(function(x) {
+          next = (x == targetValue) ;
+          if (state === null) {
+            state = next ;
+          } else if (next !== state) state = SC.MIXED_STATE ;
+          return state === SC.MIXED_STATE ; // stop when we hit a mixed state.
+        });
+      }
+      
+    // for single values, just compare to the toggleOnValue...use truthiness
+    } else {
+      if(value === SC.MIXED_STATE) state = SC.MIXED_STATE;
+      else state = (value === targetValue) ;
+    }
+    return state ;
+  },
+
+    /** @private
+    Whenever the button value changes, update the selected state to match.
+  */
+  _button_valueDidChange: function() {
+    var value = this.get('value'),
+        state = this.computeIsSelectedForValue(value);
+    this.set('isSelected', state) ; // set new state...
+  }.observes('value'),
+  
+  /** @private
+    Whenever the selected state is changed, make sure the button value is also updated.  Note that this may be called because the value has just changed.  In that case this should do nothing.
+  */
+  _button_isSelectedDidChange: function() {
+    var newState = this.get('isSelected'),
+        curState = this.computeIsSelectedForValue(this.get('value'));
+    
+    // fix up the value, but only if computed state does not match.
+    // never fix up value if isSelected is set to MIXED_STATE since this can
+    // only come from the value.
+    if ((newState !== SC.MIXED_STATE) && (curState !== newState)) {
+      var valueKey = (newState) ? 'toggleOnValue' : 'toggleOffValue' ;
+      this.set('value', this.get(valueKey));
+    }
+  }.observes('isSelected'),
+
+
   /** @private
     Used to store the keyboard equivalent.
     
@@ -540,14 +863,7 @@ SC.ButtonView = SC.View.extend(SC.Control, SC.Button,
 
 }) ;
 
-// ..........................................................
-// CONSTANTS
-//
-SC.TOGGLE_BEHAVIOR = 'toggle';
-SC.PUSH_BEHAVIOR =   'push';
-SC.TOGGLE_ON_BEHAVIOR = 'on';
-SC.TOGGLE_OFF_BEHAVIOR = 'off';
-SC.HOLD_BEHAVIOR = 'hold';
+
 
 /**
   The delay after which "click" behavior should transition to "click and hold"
@@ -561,4 +877,4 @@ SC.ButtonView.CLICK_AND_HOLD_DELAY = SC.browser.msie ? 600 : 300;
 
 SC.REGULAR_BUTTON_HEIGHT=24;
 
-SC.ButtonView.hasGivenDeprecationWarning = NO;
+