sproutcore 1.4.5 → 1.5.0.pre.3

data/lib/frameworks/sproutcore/frameworks/foundation/mixins/auto_mixin.js

@@ -0,0 +1,39 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  @namespace 
+
+  Use this mixin to automatically mix in a a collection of mixins into all
+  child views created _by the view_ (that are created at view initialization).
+  
+  @since SproutCore 1.0
+*/
+SC.AutoMixin = {
+  /**
+    The mixins to automatically mix in.
+    @property
+  */
+  autoMixins: [],
+  
+  /**
+    @private
+    Override createChildViews to mix in the mixins defined in autoMixins.
+  */
+  createChildView: function(v, attrs) {
+    if (!attrs) attrs = {};
+    attrs.owner = attrs.parentView = this;
+    attrs.isVisibleInWindow = this.get('isVisibleInWindow');
+    if (!attrs.page) attrs.page = this.page;
+    
+    var applyMixins = this.get("autoMixins");
+    applyMixins.push(attrs);
+    
+    v = v.create.apply(v, applyMixins);
+    return v;
+  }
+};

data/lib/frameworks/sproutcore/frameworks/foundation/mixins/auto_resize.js

@@ -0,0 +1,244 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+sc_require("system/utils/string_measurement");
+
+/**
+  @namespace
+  Use this mixin to make your view automatically resize based upon its value,
+  title, or other string property.
+  
+  The view uses SproutCore's text measuring API 
+*/
+SC.AutoResize = {
+  /**
+    Determines the property containing the string to measure.
+    
+    For efficiency, this may only be set _before_ initialization.
+    
+    @property {String}
+  */
+  autoResizeField: 'displayTitle',
+  
+  /**
+    If YES, automatically resizes the view (default). If NO, only measures,
+    setting 'measuredSize' to the measured value (you can bind to measuredSize
+    and update size manually).
+    
+    @property {Boolean}
+  */
+  shouldAutoResize: YES,
+  
+  /**
+    If NO, prevents SC.AutoResize from doing anything at all.
+    
+    @property {Boolean}
+  */
+  shouldMeasureSize: YES,
+  
+  /**
+    Determines if the view's width should be resized
+    on calculation. Default is YES.
+    
+    @property {Boolean}
+  */
+  shouldResizeWidth: YES,
+  
+  /**
+    Determines if the view's height should be resized
+    on calculation. Default is NO to retain backwards
+    compatibility.
+    
+    @property {Boolean}
+  */
+  shouldResizeHeight: NO,
+  
+  /**
+    The measured size of the view's content (the value of the autoResizeField). 
+    This property is observable, and, if used in conjunction with setting
+    shouldAutoResize to NO, allows you to customize the 'sizing' part, using
+    SC.AutoResize purely for its measuring code.
+    
+    @property {Rect}
+  */
+  measuredSize: { width: 0, height: 0 },
+  
+  /**
+    An amount to add to the calculated width and height to ensure that any parts
+    not included in the measurement by the browser are covered (otherwise artifacts
+    can occur).
+    
+    @private
+  */
+  autoSizePadding: 10,
+  
+  /**
+    @private
+    Begins observing the auto resize field.
+  */
+  initMixin: function() {
+    this.addObserver(this.get('autoResizeField'), this, this._scar_valueDidChange);
+  },
+  
+  /**
+    If this property is provided, all views that share the same value for this property will be resized as a batch for increased performance.
+    
+    @property {String}
+  */
+  batchResizeId: null,
+  
+  _SCAR_measurementPending: NO,
+  _SCAR_requestedBatchResizeId: null,
+  
+  // if the batch id changed while a request is out, we have to fix it
+  _SCAR_batchResizeIdDidChange: function() {
+    var batchResizeId = this.get('batchResizeId'),
+    requestedBatchResizeId = this._SCAR_requestedBatchResizeId;
+    
+    // check if a request is out and the id changed
+    if(this._SCAR_measurementPending && this._SCAR_requestedBatchResizeId !== batchResizeId) {
+      // if so, cancel the old request and make a new one
+      SC.AutoResize.cancelResize(this, requestedBatchResizeId);
+      SC.AutoResize.requestResize(this, batchResizeId);
+    }
+  }.observes('batchResizeId'),
+  
+  measureSizeLater: function() {
+    if (!this.get('shouldMeasureSize')) return;
+    
+    var batchResizeId = this.get('batchResizeId');
+    
+    SC.AutoResize.requestResize(this, batchResizeId);
+    
+    this._SCAR_measurementPending = YES;
+    this._SCAR_requestedBatchResizeId = batchResizeId;
+  },
+  
+  measureSize: function(batch) {
+    var metrics, layer, value = this.get(this.get('autoResizeField')), autoSizePadding, paddingHeight, paddingWidth;
+    
+    // if there's nothing to measure, don't bother actually measuring it
+    if(SC.none(value) || value === "") metrics = { width: 0, height: 0 };
+    
+    // get metrics in batch mode
+    else if(batch) metrics = SC.measureString(value);
+    
+    // do a singleton measurement using our own layer
+    else {
+      layer = this.kindOf(SC.TextFieldView) ? this.$input()[0] : this.get('layer');
+      if(!layer) return;
+      metrics = SC.metricsForString(value, layer);
+    }
+    
+    this.set('measuredSize', metrics);
+    
+    // if we are allowed to autoresize, add padding and adjust layout
+    if (this.get('shouldAutoResize')) {
+      autoSizePadding = this.get('autoSizePadding');
+      
+      if(SC.typeOf(autoSizePadding) === SC.T_NUMBER) paddingHeight = paddingWidth = autoSizePadding;
+      else {
+        paddingHeight = autoSizePadding.height;
+        paddingWidth = autoSizePadding.width;
+      }
+      
+      if (this.get('shouldResizeWidth')) this.adjust('width', metrics.width + paddingWidth);
+      if (this.get('shouldResizeHeight')) this.adjust('height', metrics.height + paddingHeight);
+    }
+    
+    this._SCAR_measurementPending = NO;
+    
+    return metrics;
+  },
+  
+  // we need to update the measurement when the value changes
+  _scar_valueDidChange: function() {
+    this.measureSizeLater();
+  },
+  
+  /**
+    @private
+    When the view is appended to the document, various factors (such as class names)
+    could have changed, so it will need to be remeasured.
+  */
+  didAppendToDocument: function(){
+    sc_super(); // just in case
+    this.measureSizeLater();
+  },
+  
+  /**
+    @private
+    When the layer is first created, measurement will need to take place.
+  */
+  didCreateLayer: function() {
+    sc_super();
+    this.measureSizeLater();
+  },
+  
+  needResize: null,
+  untaggedViews: null,
+
+  requestResize: function(view, id) {
+    // views with no tag just get put in their own list
+    if(SC.none(id)) {
+      var untaggedViews = SC.AutoResize.untaggedViews || (SC.AutoResize.untaggedViews = SC.CoreSet.create());
+      
+      untaggedViews.add(view);
+      
+    // views with a tag get a set for each tag
+    } else {
+      var needResize = SC.AutoResize.needResize || (SC.AutoResize.needResize = {}),
+      views = needResize[id] || (needResize[id] = SC.CoreSet.create());
+      
+      views.add(view);
+    }
+
+    SC.RunLoop.currentRunLoop.invokeLast(SC.AutoResize.doBatchResize);
+  },
+  
+  cancelResize: function(view, id) {
+    var set = SC.none(id) ? SC.AutoResize.untaggedViews : SC.AutoResize.needResize[id];
+    
+    if(set) set.remove(view);
+  },
+
+  doBatchResize: function() {
+    var tag, views, view, layer, batches;
+    
+    // first measure all the batched views
+    batches = SC.AutoResize.needResize;
+    for(tag in batches) {
+      views = batches[tag];
+      
+      // step through until you find one with a layer
+      while(view = views.pop()) {
+        layer = view.get('layer');
+        
+        // use the layer to prepare the measurement
+        if(layer) {
+          SC.prepareStringMeasurement(layer);
+          view.measureSize(YES);
+          break;
+        }
+      }
+      
+      // now measure the rest using the same settings
+      while(view = views.pop()) {
+        view.measureSize(YES);
+      }
+
+      SC.teardownStringMeasurement();
+    }
+    
+    // measure views with no batch id
+    views = SC.AutoResize.untaggedViews;
+    if(!views) return;
+    while(view = views.pop()) {
+      view.measureSize();
+    }
+  }
+};

data/lib/frameworks/sproutcore/frameworks/foundation/mixins/control.js

@@ -7,12 +7,18 @@
 
 sc_require('mixins/string');
 
+/**
+  Option for controls to automatically calculate their size (should be default 
+  on controls that use renderers).
+*/
+SC.AUTO_CONTROL_SIZE = '__AUTO__';
+
 /** 
-  Indicates a value has a mixed state of both on and off. 
+  Option for HUGE control size.
   
   @property {String}
 */
-SC.MIXED_STATE = '__MIXED__' ;
+SC.JUMBO_CONTROL_SIZE = 'sc-jumbo-size' ;
 
 /** 
   Option for HUGE control size.
@@ -103,6 +109,8 @@ SC.TINY_CONTROL_SIZE = 'sc-tiny-size' ;
 */
 SC.Control = {
   
+  isControl: YES,
+  
   /** @private */
   initMixin: function() {
     this._control_contentDidChange() ; // setup content observing if needed.
@@ -190,7 +198,7 @@ SC.Control = {
     
     The key will typically contain the name of the property that changed or 
     '*' if the content object itself has changed.  You should generally do
-    a total reset of '*' is changed.
+    a total reset if '*' is changed.
     
     @param {Object} target the content object
     @param {String} key the property that changes
@@ -198,7 +206,7 @@ SC.Control = {
     @test in content
   */
   contentPropertyDidChange: function(target, key) {
-    return this.updatePropertyFromContent('value', key, 'contentValueKey');
+    return this.updatePropertyFromContent('value', key, 'contentValueKey', target);
   },
   
   /**
@@ -216,23 +224,27 @@ SC.Control = {
     @returns {SC.Control} receiver
   */
   updatePropertyFromContent: function(prop, key, contentKey, content) {
-    var all = key === '*';
-    if (contentKey === undefined) {
-      contentKey = "content"+prop.capitalize()+"Key";
-    }
-    if (content === undefined) content = this.get('content');
+    var del, v;
     
-    // get actual content key
-    contentKey = this[contentKey] ?
-      this.get(contentKey) :
-      this.getDelegateProperty(contentKey, this.displayDelegate) ;
+    if (contentKey === undefined) contentKey = "content"+prop.capitalize()+"Key";
     
-    if (contentKey && (all || key === contentKey)) {
-      var v = (content) ?
-        (content.get ? content.get(contentKey) : content[contentKey]) :
-        null ;
+    // prefer our own definition of contentKey
+    if(this[contentKey]) contentKey = this.get(contentKey);
+    // if we don't have one defined check the delegate
+    else if((del = this.displayDelegate) && (v = del[contentKey])) contentKey = del.get ? del.get(contentKey) : v;
+    // if we have no key we can't do anything so just short circuit out
+    else return this;
+    
+    // only bother setting value if the observer triggered for the correct key
+    if (key === '*' || key === contentKey) {
+      if (content === undefined) content = this.get('content');
+      
+      if(content) v = content.get ? content.get(contentKey) : content[contentKey];
+      else v = null;
+      
       this.set(prop, v) ;
     }
+    
     return this ;
   },
   
@@ -321,6 +333,12 @@ SC.Control = {
     The control size.  This will set a CSS style on the element that can be 
     used by the current theme to vary the appearance of the control.
     
+    Some controls will default to SC.AUTO_CONTROL_SIZE, which will allow you
+    to simply size the control, and the most appropriate control size will
+    automatically be picked; be warned, though, that if you don't specify
+    a height, performance will be impacted as it must be calculated; if you do
+    this, a warning will be issued. If you don't care, use SC.CALCULATED_CONTROL_SIZE.
+    
     @property {String}
   */
   controlSize: SC.REGULAR_CONTROL_SIZE,
@@ -339,11 +357,29 @@ SC.Control = {
     var sel = this.get('isSelected'), disabled = !this.get('isEnabled'),
     // update the CSS classes for the control.  note we reuse the same hash
     // to avoid consuming more memory
-        names = this._CONTROL_TMP_CLASSNAMES ; // temporary object
+    names = this._CONTROL_TMP_CLASSNAMES ; // temporary object
     names.mixed = sel === SC.MIXED_STATE;
     names.sel = sel && (sel !== SC.MIXED_STATE) ;
     names.active = this.get('isActive') ;
-    context.setClass(names).addClass(this.get('controlSize'));
+
+    var controlSize = this.get("controlSize");
+
+    if (firstTime) {
+      context.setClass(names);
+      if (controlSize !== SC.AUTO_CONTROL_SIZE) context.addClass(controlSize);
+    } else {
+      context.$().setClass(names);
+      if (controlSize !== SC.AUTO_CONTROL_SIZE) context.$().addClass(controlSize);
+    }
+
+    // if the control implements the $input() helper, then fixup the input
+    // tags
+    if (!firstTime && this.$input) {
+      var inps = this.$input();
+      if(inps.attr('type')!=="radio"){
+        this.$input().attr('disabled', disabled);
+      }
+    }
   },
   
   /** @private
@@ -356,22 +392,31 @@ SC.Control = {
     Observes when a content object has changed and handles notifying 
     changes to the value of the content object.
   */
+  // TODO: observing * is unnecessary and inefficient, but a bunch of stuff in sproutcore depends on it (like button)
   _control_contentDidChange: function() {
-    var content = this.get('content') ;
+    var content = this.get('content');
+    
     if (this._control_content === content) return; // nothing changed
     
     var f = this.contentPropertyDidChange,
     // remove an observer from the old content if necessary
         old = this._control_content ;
     if (old && old.removeObserver) old.removeObserver('*', this, f) ;
-    
-    // add observer to new content if necessary.
+  
+    // update previous values
     this._control_content = content ;
+  
+    // add observer to new content if necessary.
     if (content && content.addObserver) content.addObserver('*', this, f) ;
     
     // notify that value did change.
     this.contentPropertyDidChange(content, '*') ;
     
-  }.observes('content')
+  }.observes('content'),
   
+  // since we always observe *, just call the update function
+  _control_contentValueKeyDidChange: function() {
+    // notify that value did change.
+    this.contentPropertyDidChange(this.get('content'), '*') ;
+  }.observes('contentValueKey')
 };