sproutit-sproutcore 1.0.20090721145281 → 1.0.20090721145282

data/frameworks/sproutcore/frameworks/foundation/tests/validators/validator.js

@@ -0,0 +1,20 @@
+// ========================================================================
+// SC.Validator Tests
+// ========================================================================
+/*globals module test ok isObj equals expects */
+
+module("SC.Validator");
+
+test("Calling fieldValueForObject() should not fail if this.prototypefieldValueForObject() is null", function() {
+  var Klass = SC.Validator.extend({
+    fieldValueForObject: null
+  });
+  equals(null, Klass.fieldValueForObject({}, null, null), "should return null") ;
+});
+
+test("Calling objectForFieldValue() should not fail if this.prototype.objectForFieldValue() is null", function() {
+  var Klass = SC.Validator.extend({
+    objectForFieldValue: null
+  });
+  equals(null, Klass.objectForFieldValue({}, null, null), "should return null") ;
+});

data/frameworks/sproutcore/frameworks/foundation/tests/views/image/ui.js

@@ -35,5 +35,18 @@ htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
       equals(pane.view('image_loaded').$().attr('src'), appleURL, "should be the same url");    
     });
     
+    test("Verify that the tooltip is correctly being set as both the title and attribute (disabling localization for this test)", function() {
+      var imageView = pane.view('image_loaded');
+      var testToolTip = 'This is a test tooltip';
+      
+      SC.RunLoop.begin();
+      imageView.set('localization', NO);
+      imageView.set('toolTip', testToolTip);
+      SC.RunLoop.end();
+      
+      ok((imageView.$().attr('title') === testToolTip), "The title attribute should be set to \"" + testToolTip + "\"");
+      ok((imageView.$().attr('alt') === testToolTip), "The alt attribute should be set to \"" + testToolTip + "\"");
+    });
+    
 })();
   

data/frameworks/sproutcore/frameworks/foundation/tests/views/text_field/ui.js

@@ -205,6 +205,138 @@ test("enabling disabled view", function() {
 });
 
 
+// ..........................................................
+// TEST ACCESSORY VIEWS
+// 
+
+test("Adding left accessory view", function() {  
+  var view = pane.view('with value');
+  
+  // test adding accessory view adds the view like it should
+  SC.RunLoop.begin();
+  var accessoryView = SC.View.create({
+    layout:  { top:1, left:2, width:16, height:16 }
+  });
+  view.set('leftAccessoryView', accessoryView);
+  SC.RunLoop.end();
+
+  ok(view.get('leftAccessoryView') === accessoryView, 'left accessory view should be set to ' + accessoryView.toString());
+  ok(view.get('childViews').length === 1, 'there should only be one child view');
+  ok(view.get('childViews')[0] === accessoryView, 'first child view should be set to ' + accessoryView.toString());
+  
+  
+  // The hint and field elements should automatically have their padding-left
+  // set to the accessory view's offset + width
+  // (18 = 2 left offset + 16 width)
+  var hintElement  = view.$('.sc-hint')[0];
+  var fieldElement = view.$field()[0];
+  ok(hintElement.style.paddingLeft  === '18px', 'hint element should get 18px padding-left');
+  ok(fieldElement.style.paddingLeft === '18px', 'field element should get 18px padding-left');
+  
+  // Test removing the accessory view.
+  SC.RunLoop.begin();
+  view.set('leftAccessoryView', null);
+  SC.RunLoop.end();
+  ok(view.get('childViews').length === 0, 'after removing the left accessory view there should be no child views left');
+  ok(!hintElement.style.paddingLeft, 'after removing the left accessory view the hint element should have no padding-left style');
+  ok(!fieldElement.style.paddingLeft, 'after removing the left accessory view the field element should have no padding-left style');
+});
+
+test("Adding right accessory view", function() {  
+  var view = pane.view('with value');
+  
+  // test adding accessory view adds the view like it should
+  SC.RunLoop.begin();
+  var accessoryView = SC.View.create({
+    layout:  { top:1, right:3, width:17, height:16 }
+  });
+  view.set('rightAccessoryView', accessoryView);
+  SC.RunLoop.end();
+
+  ok(view.get('rightAccessoryView') === accessoryView, 'right accessory view should be set to ' + accessoryView.toString());
+  ok(view.get('childViews').length === 1, 'there should only be one child view');
+  ok(view.get('childViews')[0] === accessoryView, 'first child view should be set to ' + accessoryView.toString());
+  
+  
+  // The hint and field elements should automatically have their padding-right
+  // set to the accessory view's offset + width
+  // (20 = 3 right offset + 17 width)
+  var hintElement  = view.$('.sc-hint')[0];
+  var fieldElement = view.$field()[0];
+  ok(hintElement.style.paddingRight  === '20px', 'hint element should get 20px padding-right');
+  ok(fieldElement.style.paddingRight === '20px', 'field element should get 20px padding-right');
+  
+  
+  // If a right accessory view is set with only 'left' (and not 'right')
+  // defined in its layout, 'left' should be cleared out and 'right' should
+  // be set to 0.
+  SC.RunLoop.begin();
+  var accessoryView = SC.View.create({
+    layout:  { top:1, left:2, width:16, height:16 }
+  });
+  view.set('rightAccessoryView', accessoryView);
+  SC.RunLoop.end();
+  
+  ok(view.get('rightAccessoryView').get('layout').left === null, "right accessory view created with 'left' rather than 'right' in layout should have layout.left set to null");
+  ok(view.get('rightAccessoryView').get('layout').right === 0, "right accessory view created with 'left' rather than 'right' in layout should have layout.right set to 0");
+  
+  
+  // Test removing the accessory view.
+  SC.RunLoop.begin();
+  view.set('rightAccessoryView', null);
+  SC.RunLoop.end();
+  ok(view.get('childViews').length === 0, 'after removing the right accessory view there should be no child views left');
+  ok(!hintElement.style.paddingRight, 'after removing the right accessory view the hint element should have no padding-right style');
+  ok(!fieldElement.style.paddingRight, 'after removing the right accessory view the field element should have no padding-right style');
+});
+
+test("Adding both left and right accessory views", function() {  
+  var view = pane.view('with value');
+  
+  // test adding accessory view adds the view like it should
+  SC.RunLoop.begin();
+  var leftAccessoryView = SC.View.create({
+    layout:  { top:1, left:2, width:16, height:16 }
+  });
+  view.set('leftAccessoryView', leftAccessoryView);
+  var rightAccessoryView = SC.View.create({
+    layout:  { top:1, right:3, width:17, height:16 }
+  });
+  view.set('rightAccessoryView', rightAccessoryView);
+  SC.RunLoop.end();
+
+  ok(view.get('childViews').length === 2, 'we should have two child views since we added both a left and a right accessory view');
+  
+  
+  // The hint and field elements should automatically have their padding-left
+  // and padding-right values set to the accessory views' offset + width
+  //   *  left:   18 = 2 left offset + 16 width)
+  //   *  right:  20 = 3 left offset + 17 width)
+  var hintElement  = view.$('.sc-hint')[0];
+  var fieldElement = view.$field()[0];
+  ok(hintElement.style.paddingLeft  === '18px', 'hint element should get 18px padding-left');
+  ok(fieldElement.style.paddingLeft === '18px', 'field element should get 18px padding-left');
+  ok(hintElement.style.paddingRight  === '20px', 'hint element should get 20px padding-right');
+  ok(fieldElement.style.paddingRight === '20px', 'field element should get 20px padding-right');
+  
+  
+  // Test removing the accessory views.
+  SC.RunLoop.begin();
+  view.set('rightAccessoryView', null);
+  SC.RunLoop.end();
+  ok(view.get('childViews').length === 1, 'after removing the right accessory view there should be one child view left (the left accessory view)');
+  ok(!hintElement.style.paddingRight, 'after removing the right accessory view the hint element should have no padding-right style');
+  ok(!fieldElement.style.paddingRight, 'after removing the right accessory view the field element should have no padding-right style');
+  SC.RunLoop.begin();
+  view.set('leftAccessoryView', null);
+  SC.RunLoop.end();
+  ok(view.get('childViews').length === 0, 'after removing both accessory views there should be no child views left');
+  ok(!hintElement.style.paddingLeft, 'after removing the left accessory view the hint element should have no padding-left style');
+  ok(!fieldElement.style.paddingLeft, 'after removing the left accessory view the field element should have no padding-left style');
+});
+
+
+
 // ..........................................................
 // TEST EVENTS
 // 

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/isVisibleInWindow.js

@@ -63,19 +63,22 @@ test("removing a view from a visible pane should make it invisible again", funct
 test("updateLayer should not be invoked even if layer becomes dirty until isVisibleInWindow changes, then it should invoke", function() {
 
 	var callCount = 0 ;
-	view.updateLayer = function() { callCount++; };
+	view.createLayer = function() {
+	  SC.View.prototype.createLayer.apply(this, arguments);
+	  callCount++;
+	};
 	ok(!view.get('isVisibleInWindow'), 'precond - view should not be visible to start');
 	
 	SC.RunLoop.begin();
 	view.displayDidChange();
 	SC.RunLoop.end();
-	equals(callCount, 0, 'updateLayer should not run b/c its not visible');
+	equals(callCount, 0, 'createLayer should not run b/c its not visible');
 	
 	SC.RunLoop.begin();
 	pane.appendChild(view); // make visible in window...
 	ok(view.get('isVisibleInWindow'), 'view should now be visible in window');
 	SC.RunLoop.end();
-	equals(callCount, 1, 'updateLayer should exec now b/c isVisibleInWindow is YES');
+	equals(callCount, 1, 'createLayer should exec now b/c isVisibleInWindow is YES');
 });
 
 test("layoutChildViewsIfNeeded should not be invoked even if layer needs layout until isVisibleInWindow changes, then it should invoke", function() {

data/frameworks/sproutcore/frameworks/foundation/validators/validator.js

@@ -296,16 +296,19 @@ SC.Validator.mixin(/** @scope SC.Validator */ {
     method you define in your subclass.
   */
   fieldValueForObject: function(object, form, field) {
-    return this.prototype.fieldValueForObject(object,form,field) ;
+    if (this.prototype && this.prototype.fieldValueForObject)
+      return this.prototype.fieldValueForObject(object,form,field) ;
+    else return null ;
   },
-
+  
   /**
     Convenience class method to call the objectForFieldValue() instance
     method you define in your subclass.
   */
   objectForFieldValue: function(value, form, field) {
-    return this.prototype.objectForFieldValue(value,form,field) ;
+    if (this.prototype && this.prototype.objectForFieldValue)
+      return this.prototype.objectForFieldValue(value,form,field) ;
+    else return null ;
   }
   
-}) ;
-
+});

data/frameworks/sproutcore/frameworks/foundation/views/image.js

@@ -89,17 +89,30 @@ SC.ImageView = SC.View.extend(SC.Control,
   */
   canLoadInBackground: NO,
   
-  displayProperties: 'status'.w(),
+  /**
+    If YES, any specified toolTip will be localized before display.
+  */
+  localize: YES,
+  
+  displayProperties: 'status toolTip'.w(),
   
   render: function(context, firstTime) {
     // the image source is the value if the status is LOADED or blank
-    var status = this.get('status'), value = this.get('value');
+    var status = this.get('status'), value = this.get('value') ;
     
     if (status === SC.IMAGE_STATE_NONE && value) this._image_valueDidChange() ; // setup initial state
     
-    var src = (status === SC.IMAGE_STATE_LOADED) ? value : SC.BLANK_IMAGE_URL;
-    if (status === SC.IMAGE_STATE_SPRITE) context.addClass(value);
-    context.attr('src', src);
+    var src = (status === SC.IMAGE_STATE_LOADED) ? value : SC.BLANK_IMAGE_URL ;
+    if (status === SC.IMAGE_STATE_SPRITE) context.addClass(value) ;
+    context.attr('src', src) ;
+    
+    // If there is a toolTip set, grab it and localize if necessary.
+    var toolTip = this.get('toolTip') ;
+    if (SC.typeOf(toolTip) === SC.T_STRING) {
+      if (this.get('localize')) toolTip = toolTip.loc() ;
+      context.attr('title', toolTip) ;
+      context.attr('alt', toolTip) ;
+    }
   },
   
   /** @private - 

data/frameworks/sproutcore/frameworks/foundation/views/text_field.js

@@ -38,9 +38,68 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   hint: null,
   
   /**
-    If YES then the text field is currently editing. 
+    If YES then the text field is currently editing.
   */
   isEditing: NO,
+  
+  /**
+    An optional view instance, or view class reference, which will be visible
+    on the left side of the text field.  Visually the accessory view will look
+    to be inside the field but the text editing will not overlap the accessory
+    view.
+    
+    The view will be rooted to the top-left of the text field.  You should use
+    a layout with 'left' and/or 'top' specified if you would like to adjust
+    the offset from the top-left.
+    
+    One example use would be for a web site's icon, found to the left of the
+    URL field, in many popular web browsers.
+    
+    Because the padding is set for you, it is recommended that you use the
+    'border-box' box-sizing CSS declaration for your hint and field elements
+    if you do not want them to resize as accessory views are added and
+    removed.
+    
+    Note:  If you set a left accessory view, the left padding of the text
+    field will automatically be set to the width of the accessory view,
+    overriding any CSS padding-left you may have defined.  If you would like
+    to customize the amount of left padding used when the accessory view is
+    visible, make the accessory view wider, with empty space on the right.
+  */
+  leftAccessoryView: null,
+  
+  /**
+    An optional view instance, or view class reference, which will be visible
+    on the right side of the text field.  Visually the accessory view will
+    look to be inside the field but the text editing will not overlap the
+    accessory view.
+    
+    The view will be rooted to the top-right of the text field.  You should
+    use a layout with 'right' and/or 'top' specified if you would like to
+    adjust the offset from the top-right.  If 'left' is specified in the
+    layout it will be cleared.
+    
+    One example use would be for a button to clear the contents of the text
+    field.
+    
+    Note:  If you set a right accessory view, the left padding of the text
+    field will automatically be set to the width of the accessory view,
+    overriding any CSS padding-right you may have defined.  If you would like
+    to customize the amount of right padding used when the accessory view is
+    visible, make the accessory view wider, with empty space on the left.
+    
+    Because the padding is set for you, it is recommended that you use the
+    'border-box' box-sizing CSS declaration for your hint and field elements
+    if you do not want them to resize as accessory views are added and
+    removed.
+    
+    IMPORTANT NOTE:  In Internet Explorer 7 and 8, fixed-width text views do
+    not respect the right padding property, so if you are using a right
+    accessory view in such a situation be aware that it may float over the
+    text if the text is long enough.  You may wish to use a translucent
+    background to somewhat mitigate this issue.
+  */
+  rightAccessoryView: null,
 
   
   /** isEditable maps to isEnabled with a TextField. */
@@ -52,44 +111,256 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   // INTERNAL SUPPORT
   // 
   
-  displayProperties: 'hint fieldValue isEditing'.w(),
+  displayProperties: 'hint fieldValue isEditing leftAccessoryView rightAccessoryView'.w(),
+  
+  
+  createChildViews: function() {
+    this.accessoryViewObserver() ;
+  },
+  
+  
+  accessoryViewObserver: function() {
+    var viewProperties = ['leftAccessoryView', 'rightAccessoryView'] ;
+    var len = viewProperties.length ;
+    for (var i=0; i<len; i++) {
+      var viewProperty = viewProperties[i] ;
+      
+      // Is there an accessory view specified?
+      var previousView = this['_'+viewProperty] ;
+      var accessoryView = this.get(viewProperty) ;
+      
+      // If the view is the same, there's nothing to do.  Otherwise, remove
+      // the old one (if any) and add the new one.
+      if (! (previousView
+             &&  accessoryView
+             &&  (previousView === accessoryView) ) ) {
+      
+        // If there was a previous previous accessory view, remove it now.
+        if (previousView) {
+          // Remove the "sc-text-field-accessory-view" class name that we had
+          // added earlier.
+          var classNames = previousView.get('classNames') ;
+          classNames = classNames.without('sc-text-field-accessory-view') ;
+          previousView.set('classNames', classNames) ;
+          this.removeChild(previousView) ;
+          previousView = null ;
+          this['_'+viewProperty] = null ;
+        }
+      
+        // If there's a new accessory view to add, do so now.
+        if (accessoryView) {        
+          // If the user passed in a class rather than an instance, create an
+          // instance now.
+          if (accessoryView.isClass) {
+            accessoryView = accessoryView.create({
+              layoutView: this
+            }) ;
+          }
+      
+          // Add in the "sc-text-field-accessory-view" class name so that the
+          // z-index gets set correctly.
+          var classNames = accessoryView.get('classNames') ;
+          var className = 'sc-text-field-accessory-view' ;
+          if (classNames.indexOf(className) < 0) {
+            classNames.push(className) ;
+          }
+      
+          // Actually add the view to our hierarchy and cache a reference.
+          this.appendChild(accessoryView) ;
+          this['_'+viewProperty] = accessoryView ;
+        }
+      }
+    }
+  }.observes('leftAccessoryView', 'rightAccessoryView'),
+  
+  
+  layoutChildViewsIfNeeded: function(isVisible) {
+    // For the right accessory view, adjust the positioning such that the view
+    // is right-justified, unless 'right' is specified.
+    if (!isVisible) isVisible = this.get('isVisibleInWindow') ;
+    if (isVisible && this.get('childViewsNeedLayout')) {
+      var rightAccessoryView = this.get('rightAccessoryView') ;
+      if (rightAccessoryView  &&  rightAccessoryView.get) {
+        var layout = rightAccessoryView.get('layout') ;
+        if (layout) {
+          // Clear out any 'left' value.
+          layout.left = null;
+          
+          // Unless the user specified a 'right' value, specify a default to
+          // right-justify the view.
+          if (!layout.right) layout.right = 0 ;
+          
+          rightAccessoryView.adjust({ layout: layout }) ;
+        }
+      }
+    }
+    
+    sc_super() ;
+  },
+  
   
   render: function(context, firstTime) {
+    sc_super() ;
     
     var disabled = this.get('isEnabled') ? '' : 'disabled="disabled"';
     var name = SC.guidFor(this);
-    var hint = this.get('hint');
     var type = this.get('isPassword') ? 'password' : 'text';
 
     // always have at least an empty string
     var v = this.get('fieldValue');
-    if (SC.none(v)) v = ''; 
+    if (SC.none(v)) v = '';
     
     // update layer classes always
-    context.setClass('not-empty', v.length>0);
-    
+    context.setClass('not-empty', v.length > 0);
+
+    // If we have accessory views, we'll want to update the padding on the
+    // hint to compensate for the width of the accessory view.  (It'd be nice
+    // if we could add in the original padding, too, but there's no efficient
+    // way to do that without first rendering the element somewhere on/off-
+    // screen, and we don't want to take the performance hit.)
+    var accessoryViewWidths = this._getAccessoryViewWidths();
+    var leftPadding  = accessoryViewWidths['left'] ;
+    var rightPadding = accessoryViewWidths['right'] ;
+    if (leftPadding)  leftPadding  += 'px' ;
+    if (rightPadding) rightPadding += 'px' ;
+
+
+    this._renderHint(context, firstTime, leftPadding, rightPadding);
+    this._renderField(context, firstTime, v, leftPadding, rightPadding);
+  },
+  
+  _renderHint: function(context, firstTime, leftPadding, rightPadding) {
+    // TODO:  The cleanest thing might be to create a sub- rendering context
+    //        here, but currently SC.RenderContext will render sibling
+    //        contexts as parent/child.
+    var hint = this.get('hint') ;
+        
     if (firstTime) {
-      context.push('<span class="sc-hint">', hint, '</span>');
-      if(this.get('isTextArea')){
-          context.push('<textarea name="%@" %@ value="%@"></textarea>'.fmt(name, disabled, v));
-      }else{
-        context.push('<input type="%@" name="%@" %@ value="%@"></input>'.fmt(type, name, disabled, v));
+      var paddingStyle = '' ;
+      if (leftPadding  ||  rightPadding) {
+        paddingStyle = 'style="' ;
+        if (leftPadding)  paddingStyle += 'padding-left: '  + leftPadding  + '; ' ;
+        if (rightPadding) paddingStyle += 'padding-right: ' + rightPadding + ';' ;
+        paddingStyle += '"' ;
       }
-    // if this is not first time rendering, update the hint itself since we
-    // can't just blow away the text field like we might most other controls
-    } else {
+      context.push('<span class="sc-hint" %@>'.fmt(paddingStyle), hint, '</span>') ;
+    }
+    else {
+      // If this is not first time rendering, update the hint itself since we
+      // can't just blow away the text field like we might most other controls
+      var elements = this.$('.sc-hint') ;
       if (hint !== this._textField_currentHint) {
         this._textField_currentHint = hint ;
-        this.$('.sc-hint').text(hint);
-      }  
-      if(!this.get('isEnabled')){
-        this.$field()[0].disabled='true';
-      }else{
-        this.$field()[0].disabled=null;
+        elements.text(hint) ;
+      }
+      
+      // Adjust the padding to accommodate any accessory views.
+      var element = elements[0] ;
+      if (element) {
+        if (leftPadding) {
+          if (element.style.paddingLeft !== leftPadding) {
+            element.style.paddingLeft = leftPadding ;
+          }
+        }
+        else {
+          element.style.paddingLeft = null ;
+        }
+          
+        if (rightPadding) {
+          if (element.style.paddingRight !== rightPadding) {
+            element.style.paddingRight = rightPadding ;
+          }
+        }
+        else {
+          element.style.paddingRight = null ;
+        }
       }
-              
     }
   },
+  
+  _renderField: function(context, firstTime, value, leftPadding, rightPadding) {
+    // TODO:  The cleanest thing might be to create a sub- rendering context
+    //        here, but currently SC.RenderContext will render sibling
+    //        contexts as parent/child.
+    if (firstTime) {
+      var disabled = this.get('isEnabled') ? '' : 'disabled="disabled"' ;
+      var name = SC.guidFor(this) ;
+      
+      var paddingStyle = '' ;
+      if (leftPadding  ||  rightPadding) {
+        paddingStyle = 'style="' ;
+        if (leftPadding)  paddingStyle += 'padding-left: '  + leftPadding  + '; ' ;
+        if (rightPadding) paddingStyle += 'padding-right: ' + rightPadding + ';' ;
+        paddingStyle += '"' ;
+      }
+      
+      if (this.get('isTextArea')) {
+        context.push('<textarea name="%@" %@ value="%@" %@></textarea>'.fmt(name, disabled, value, paddingStyle)) ;
+      }
+      else {
+        var type = this.get('isPassword') ? 'password' : 'text' ;
+        context.push('<input type="%@" name="%@" %@ value="%@" %@></input>'.fmt(type, name, disabled, value, paddingStyle)) ;
+      }
+    }
+    else {
+      var element = this.$field()[0];
+      if (element) {
+        if (!this.get('isEnabled')) {
+          element.disabled = 'true' ;
+        }
+        else {
+          element.disabled = null ;
+        }
+      
+        // Adjust the padding to accommodate any accessory views.
+        if (leftPadding) {
+          if (element.style.paddingLeft !== leftPadding) {
+            element.style.paddingLeft = leftPadding ;
+          }
+        }
+        else {
+          element.style.paddingLeft = null ;
+        }
+    
+        if (rightPadding) {
+          if (element.style.paddingRight !== rightPadding) {
+            element.style.paddingRight = rightPadding ;
+          }
+        }
+        else {
+          element.style.paddingRight = null ;
+        }
+      }
+    }
+  },
+  
+  _getAccessoryViewWidths: function() {
+    var widths = {};
+    var accessoryViewPositions = ['left', 'right'] ;
+    var numberOfAccessoryViewPositions = accessoryViewPositions.length ;
+    for (var i = 0;  i < numberOfAccessoryViewPositions;  i++) {
+      var position = accessoryViewPositions[i];
+      var accessoryView = this.get(position + 'AccessoryView');
+      if (accessoryView  &&  accessoryView.get) {
+        var frame = accessoryView.get('frame');
+        if (frame) {
+          var width = frame.width;
+          if (width) {
+            // Also account for the accessory view's inset.
+            var layout = accessoryView.get('layout');
+            if (layout) {
+              var offset = layout[position];
+              width += offset;
+            }
+            widths[position] = width;
+          }
+        }
+      }
+    }
+    return widths;
+  },
+  
+  
 
   // more efficient input
   $field: function() {