sproutcore 1.4.5 → 1.5.0.pre.3

data/lib/frameworks/sproutcore/frameworks/foundation/views/label.js

@@ -5,12 +5,8 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-sc_require('views/view') ;
-sc_require('mixins/control') ;
-
-SC.ALIGN_LEFT = 'left';
-SC.ALIGN_RIGHT = 'right';
-SC.ALIGN_CENTER = 'center';
+sc_require('mixins/inline_editable');
+sc_require('mixins/inline_editor_delegate');
 
 SC.REGULAR_WEIGHT = 'normal';
 SC.BOLD_WEIGHT = 'bold';
@@ -25,14 +21,37 @@ SC.BOLD_WEIGHT = 'bold';
   
   @extends SC.View
   @extends SC.Control
+  @extends SC.InlineEditable
   @extends SC.InlineEditorDelegate
   @since SproutCore 1.0
 */
-SC.LabelView = SC.View.extend(SC.Control,
+SC.LabelView = SC.View.extend(SC.Control, SC.InlineEditorDelegate, SC.InlineEditable,
 /** @scope SC.LabelView.prototype */ {
 
   classNames: ['sc-label-view'],
 
+  displayProperties: 'displayTitle textAlign fontWeight icon escapeHTML needsEllipsis hint'.w(),
+
+
+  
+  isEditable: NO,
+  
+  /**
+    The exampleInlineTextFieldView property is by default a 
+    SC.InlineTextFieldView but it can be set to a customized inline text field
+    view.
+  
+    @property
+    @type {SC.View}
+    @default {SC.InlineTextFieldView}
+  */
+  exampleInlineTextFieldView: SC.InlineTextFieldView,
+  
+  /**
+    LabelView is its own delegate by default, but you can change this to use a customized editor.
+  */
+  editorDelegate: null,
+  
   /**
     Specify the font weight for this.  You may pass SC.REGULAR_WEIGHT, or SC.BOLD_WEIGHT.
   */
@@ -80,17 +99,6 @@ SC.LabelView = SC.View.extend(SC.Control,
   */
   hint: null,
 
-  /**
-    The exampleInlineTextFieldView property is by default a 
-    SC.InlineTextFieldView but it can be set to a customized inline text field
-    view.
-  
-    @property
-    @type {SC.View}
-    @default {SC.InlineTextFieldView}
-  */
-  exampleInlineTextFieldView: SC.InlineTextFieldView,
-  
   /**
     An optional icon to display to the left of the label.  Set this value
     to either a CSS class name (for spriting) or an image URL.
@@ -101,12 +109,14 @@ SC.LabelView = SC.View.extend(SC.Control,
     Set the alignment of the label view.
   */
   textAlign: SC.ALIGN_LEFT,
-  
+
   /**
-    If you want the inline editor to be multiline set this property to YES.
+    The name of the theme's SC.LabelView render delegate.
+
+    @property {String}
   */
-  isInlineEditorMultiline: NO,
-  
+  renderDelegateName: 'labelRenderDelegate',
+
   /**
     [RO] The value that will actually be displayed.
     
@@ -115,7 +125,7 @@ SC.LabelView = SC.View.extend(SC.Control,
     
     @field
   */
-  displayValue: function() {
+  displayTitle: function() {
     var value, formatter;
     
     value = this.get('value') ;
@@ -145,12 +155,9 @@ SC.LabelView = SC.View.extend(SC.Control,
     
     // 4. Localize
     if (value && this.getDelegateProperty('localize', this.displayDelegate)) value = value.loc() ;
-
-    // 5. escapeHTML if needed
-    if (this.get('escapeHTML')) value = SC.RenderContext.escapeHTML(value);
-    
+        
     return value ;
-  }.property('value', 'localize', 'formatter', 'escapeHTML').cacheable(),
+  }.property('value', 'localize', 'formatter').cacheable(),
   
   
   /**
@@ -162,31 +169,9 @@ SC.LabelView = SC.View.extend(SC.Control,
   */
   hintValue: function() {
     var hintVal = this.get('hint');
-    if (this.get('escapeHTML')) hintVal = SC.RenderContext.escapeHTML(hintVal);
     return hintVal ;
-  }.property('hint', 'escapeHTML').cacheable(),
-  
-  /**
-    Enables editing using the inline editor.
-  */
-  isEditable: NO,
-  isEditableBindingDefault: SC.Binding.bool(),
-
-  /**
-    YES if currently editing label view.
-  */
-  isEditing: NO,
+  }.property('hint').cacheable(),
   
-  /**
-    Validator to use during inline editing.
-    
-    If you have set isEditing to YES, then any validator you set on this
-    property will be used when the label view is put into edit mode.
-    
-    @type {SC.Validator}
-  */
-  validator: null,
-
   /**
     Event dispatcher callback.
     If isEditable is set to true, opens the inline text editor view.
@@ -197,62 +182,6 @@ SC.LabelView = SC.View.extend(SC.Control,
   doubleClick: function( evt ) { return this.beginEditing(); },
   
   
-  /**
-    Opens the inline text editor (closing it if it was already open for 
-    another view).
-    
-    @return {Boolean} YES if did begin editing
-  */
-  beginEditing: function() {
-    if (this.get('isEditing')) return YES ;
-    if (!this.get('isEditable')) return NO ;
-
-    var el = this.$(),
-        value = this.get('value'),
-        f = SC.viewportOffset(el[0]),
-        frameTemp = this.convertFrameFromView(this.get('frame'), null) ;
-    f.width=frameTemp.width;
-    f.height=frameTemp.height;
-    
-    SC.InlineTextFieldView.beginEditing({
-      frame: f,
-      delegate: this,
-      exampleElement: el,
-      value: value, 
-      multiline: this.get('isInlineEditorMultiline'), 
-      isCollection: NO,
-      validator: this.get('validator'),
-      exampleInlineTextFieldView: this.get('exampleInlineTextFieldView')
-    });
-  },
-  
-  /**
-    Cancels the current inline editor and then exits editor. 
-    
-    @return {Boolean} NO if the editor could not exit.
-  */
-  discardEditing: function() {
-    if (!this.get('isEditing')) return YES ;
-    return SC.InlineTextFieldView.discardEditing() ;
-  },
-  
-  /**
-    Commits current inline editor and then exits editor.
-    
-    @return {Boolean} NO if the editor could not exit
-  */
-  commitEditing: function() {
-    if (!this.get('isEditing')) return YES ;
-    return SC.InlineTextFieldView.commitEditing() ;
-  },
-
-  /** @private
-    Set editing to true so edits will no longer be allowed.
-  */
-  inlineEditorWillBeginEditing: function(inlineEditor) {
-    this.set('isEditing', YES);
-  },
-
   /** @private 
     Hide the label view while the inline editor covers it.
   */
@@ -262,78 +191,22 @@ SC.LabelView = SC.View.extend(SC.Control,
     layer.css('opacity', 0.0);
   },
   
-  /** @private
-    Delegate method defaults to the isEditable property
-  */
-  inlineEditorShouldBeginEditing: function(){
-    return this.get('isEditable');
-  },
   
-  /** @private
-    Could check with a validator someday...
+  /** @private 
+    Hide the label view while the inline editor covers it.
   */
-  inlineEditorShouldEndEditing: function(inlineEditor, finalValue) {
-    return YES ;
+  inlineEditorDidBeginEditing: function(editor) {
+    this._oldOpacity = this.get('layout').opacity ;
+    this.adjust('opacity', 0);
   },
-
+  
   /** @private
     Update the field value and make it visible again.
   */
-  inlineEditorDidEndEditing: function(inlineEditor, finalValue) {
+  inlineEditorDidEndEditing: function(editor, finalValue) {
     this.setIfChanged('value', finalValue) ;
-    this.$().css('opacity', this._oldOpacity);
+    this.adjust('opacity', this._oldOpacity);
     this._oldOpacity = null ;
     this.set('isEditing', NO) ;
-  },
-
-  displayProperties: 'displayValue textAlign fontWeight icon'.w(),
-  
-  _TEMPORARY_CLASS_HASH: {},
-  
-  render: function(context, firstTime) {
-    var value = this.get('displayValue'),
-        icon = this.get('icon'),
-        hint = this.get('hintValue'),
-        classes, stylesHash, text,
-        iconChanged = false, textChanged = false;
-    
-    if (icon) {
-      var url = (icon.indexOf('/')>=0) ? icon : SC.BLANK_IMAGE_URL,
-          className = (url === icon) ? '' : icon ;
-      icon = '<img src="'+url+'" alt="" class="icon '+className+'" />';
-      if(icon!==this._iconCache) {
-        this._iconCache=icon;
-        iconChanged = true;
-      }
-    }
-    
-    if (hint && (!value || value === '')) {
-      text = '<span class="sc-hint">'+hint+'</span>';
-    }else{
-      text = value;
-    }
-    if(text!==this._textCache) {
-      this._textCache=text;
-      textChanged = true;
-    }
-        
-    if(firstTime || textChanged || iconChanged){
-      context.push(icon, text);
-    }
-    
-    // and setup alignment and font-weight on styles
-    stylesHash = { 
-      'text-align': this.get('textAlign'), 
-      'font-weight': this.get('fontWeight')
-    };
-           
-    // if we are editing, set the opacity to 0
-    if (this.get('isEditing')) stylesHash['opacity']=0;
-    context.addStyle(stylesHash);
-    
-    classes = this._TEMPORARY_CLASS_HASH;
-    classes.icon = !!this.get('icon');
-    context.setClass(classes);
   }
-  
 });

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

@@ -68,6 +68,21 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   */
   isContextMenuEnabled: YES,
 
+  /**
+    If true, every change to the text in the text field updates 'value'.
+    If false, 'value' is only updated when commitEditing() is called (this
+    is called automatically when the text field loses focus), or whenever
+    the return key is pressed while editing the field.
+  */
+  continuouslyUpdatesValue: YES,
+
+  /**
+    If no, will not allow transform or validation errors (SC.Error objects)
+    to be passed to 'value'.  Upon focus lost, the text field will revert
+    to its previous value.
+  */
+  allowsErrorAsValue: YES,
+
   /**
     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
@@ -166,11 +181,19 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
         }
         else {
           // In IE8, input elements don't have hasOwnProperty() defined.
-          if ('selectionStart' in element) {
-            start = element.selectionStart ;
+          try{
+            if ('selectionStart' in element) {
+              start = element.selectionStart ;
+            }
+            if ('selectionEnd' in element) {
+              end = element.selectionEnd ;
+            }
           }
-          if ('selectionEnd' in element) {
-            end = element.selectionEnd ;
+          // In Firefox when you ask the selectionStart or End of a hidden 
+          // input, sometimes it throws a weird error.
+          // Adding this to just ignore it.
+          catch (e){
+            return null;
           }
 
           // Support Internet Explorer.
@@ -375,6 +398,8 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     this.set('_forceRenderFirstTime', YES);
   }.observes('isTextArea'),
   
+  shouldRenderBorder: YES,
+  
   _renderField: function(context, firstTime, value, leftAdjustment, rightAdjustment) {
     // TODO:  The cleanest thing might be to create a sub- rendering context
     //        here, but currently SC.RenderContext will render sibling
@@ -398,7 +423,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
       disabled = this.get('isEnabled') ? '' : 'disabled="disabled"' ;
       name = this.get('layerId');
       
-      context.push('<span class="border"></span>');
+      if(this.get('shouldRenderBorder')) context.push('<span class="border"></span>');
 
       // Render the padding element, with any necessary positioning
       // adjustments to accommodate accessory views.
@@ -600,7 +625,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     SC.Event.remove(input, 'focus',  this, this._textField_fieldDidFocus);
     SC.Event.remove(input, 'blur',   this, this._textField_fieldDidBlur);
     SC.Event.remove(input, 'select', this, this._textField_selectionDidChange);
-    SC.Event.remove(input, 'focus',  this, this._firefox_dispatch_keypress);
+    SC.Event.remove(input, 'keypress',  this, this._firefox_dispatch_keypress);
   },
   
   /**
@@ -650,7 +675,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     
     // now, hide the intercept on this pane if it has one
     var pane = this.get('pane');
-    if (pane && pane.get("usingTouchIntercept")) {
+    if (pane && pane.get('hasTouchIntercept')) {
       // hide
       pane.hideTouchIntercept();
       
@@ -751,6 +776,7 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     
     if (!selection  ||  ((selection.get('length') === 0  &&  (selection.get('start') === 0)  ||  selection.get('end') === valueLen))) {
       responder = SC.RootResponder.responder;
+      if(evt.keyCode===9) return;
       responder.keypress.call(responder, evt);
       evt.stopPropagation();
     }
@@ -833,16 +859,32 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     implementation.
   */
   keyDown: function(evt) {
+    var value, view;
     // Handle return and escape.  this way they can be passed on to the
     // responder chain.
     // If the event is triggered by a return while entering IME input,
     // don't got through this path.
     var which = evt.which, maxLengthReached = false;
-    if ((which === 13 && !evt.isIMEInput) && !this.get('isTextArea')) return NO ;
+    if ((which === 13 && !evt.isIMEInput) && !this.get('isTextArea')) {
+
+      // If we're not continuously updating 'value' as we type, force an update
+      // if return is pressed.
+      if (!this.get('continuouslyUpdatesValue')) {
+        value = this.getValidatedValueFromFieldValue(NO);
+        
+        if ((SC.typeOf(value) !== SC.T_ERROR) || this.get('allowsErrorAsValue')) {
+          this.setIfChanged('value', value);
+          this.applyValueToField(value); // sync text in the text field
+        }
+      }
+
+      return NO;
+    }
+
     if (which === 27) return NO ;
 
     // handle tab key
-    if (which === 9 && this.get('defaultTabbingEnabled')) {
+    if ((which === 9 || evt.keyCode===9) && this.get('defaultTabbingEnabled')) {
       var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
       if (view) view.becomeFirstResponder();
       else evt.allowDefault();
@@ -850,8 +892,12 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     }
     // maxlength for textareas
     if(!SC.browser.safari && this.get('isTextArea')){
-      var val = this.get('value');
-      if(val && evt.which>47 && (val.length >= this.get('maxLength'))) {
+      var val = this.get('value'),
+          code = evt.which;
+    // This code is nasty. It's thanks gecko .keycode table that has charters like & with the same keycode as up arrow key
+      if(val && ((!SC.browser.mozilla && code>47) || 
+        (SC.browser.mozilla && ((code>32 && code<43) || code>47) && !(evt.keyCode>36 && evt.keyCode<41))) &&
+        (val.length >= this.get('maxLength'))) {
         maxLengthReached = true;
       }
     }
@@ -914,8 +960,10 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
     Adds mouse wheel support for textareas.
   */
   mouseWheel: function(evt) {
-    evt.allowDefault();
-    return YES;
+    if(this.get('isTextArea')) {
+      evt.allowDefault();
+      return YES;
+    } else return NO;
   },
 
   /*
@@ -938,9 +986,14 @@ SC.TextFieldView = SC.FieldView.extend(SC.StaticLayout, SC.Editable,
   
   valueObserver: function(){
     // console.log('value observer');
-    var val = this.get('value');
-    if (val && val.length>0) this.set('hintON', NO);
-    else this.set('hintON', YES);
+    var val = this.get('value'), max;
+    if (val && val.length>0) {
+      this.set('hintON', NO);
+      max = this.get('maxLength');
+      if(!SC.browser.safari && val.length>max){
+        this.set('value', val.substr(0, max));
+      }
+    }else this.set('hintON', YES);
   }.observes('value')
   
 });