sproutcore 1.0.1046 → 1.0.1049.pre.1

data/frameworks/sproutcore/frameworks/foundation/mixins/gestureable.js

@@ -0,0 +1,106 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+SC.Gesturable = {
+  concatenatedProperties: ["gestures"],
+  gestures: [],
+  
+  initMixin: function() {
+    this.createGestures();
+  },
+  
+  createGestures: function() {
+    var gestures = this.get("gestures"), idx, len = gestures.length, g, _g = [];
+
+    // loop through all gestures
+    for (idx = 0; idx < len; idx++) {
+      // get the proper gesture
+      if (SC.typeOf(gestures[idx]) === SC.T_STRING) {
+        g = this.get(gestures[idx]);
+      } else {
+        g = gestures[idx];
+      }
+      
+      // if it was not found, well, that's an error.
+      if (!g) {
+        throw "Could not find gesture named '" + gestures[idx] + "' on view.";
+      }
+      
+      // if it is a class, instantiate (it really ought to be a class...)
+      if (g.isClass) {
+        g = g.create({
+          view: this
+        });
+      }
+      
+      // and set the gesture instance and add it to the array.
+      if (SC.typeOf(gestures[idx]) === SC.T_STRING) this[gestures[idx]] = g;
+      _g.push(g);
+    }
+    
+    this.set("gestures", _g);
+  },
+  
+  /**
+    Handles touch start. By default, merely passes it to gestureTouchStart.
+    If you override, pass any touch you don't want to take to gestureTouchStart yourself.
+    
+    After letting gestureTouchStart handle a touch, you can check the "isInteresting" property
+    of the touch to see if any gesture is interested.
+    
+    Usually, even if no gesture is interested (yet), you'll not want to release the touch just yet.
+  */
+  touchStart: function(touch) {
+    this.gestureTouchStart(touch);
+  },
+  
+  /**
+    Handles touch drags, similarly to touch starts.
+  */
+  touchesDragged: function(evt, touches) {
+    this.gestureTouchesDragged(evt, touches);
+  },
+  
+  /**
+    Passes touchEnd along to gestureTouchEnd.
+  */
+  touchEnd: function(touch) {
+    this.gestureTouchEnd(touch);
+  },
+  
+  /**
+    Passes the touch to the gestures to 
+  */
+  gestureTouchStart: function(touch) {
+    touch.isInteresting = 0;
+    
+    var gestures = this.get("gestures"), idx, len = gestures.length, g;
+    for (idx = 0; idx < len; idx++) {
+      g = gestures[idx];
+      g.unassignedTouchDidStart(touch);
+    }
+  },
+  
+  /**
+    Loops over touches and passes them to the gestures.
+  */
+  gestureTouchesDragged: function(evt, touches) {
+    var gestures = this.get("gestures"), idx, len = gestures.length, g;
+    for (idx = 0; idx < len; idx++) {
+      g = gestures[idx];
+      g.unassignedTouchesDidChange(evt, touches);
+    }
+  },
+  
+  gestureTouchEnd: function(touch) {
+    var gestures = this.get("gestures"), idx, len = gestures.length, g;
+    for (idx = 0; idx < len; idx++) {
+      g = gestures[idx];
+      g.unassignedTouchDidEnd(touch);
+    }
+  }
+};

data/frameworks/sproutcore/frameworks/foundation/mixins/inline_text_field.js

@@ -12,7 +12,7 @@ sc_require('views/text_field') ;
   that are not always editable such as label views and source list views.
   
   You generally will not use the inline editor directly but instead will
-  invoke beginEditing() and endEditing() on the views yous are 
+  invoke beginEditing() and endEditing() on the views you are 
   editing. If you would like to use the inline editor for your own views, 
   you can do that also by using the editing API described here.
   
@@ -40,14 +40,14 @@ sc_require('views/text_field') ;
   You can pass a variety of options to this method to configure the inline
   editor behavior, including:
 
-  - *frame* The editors initial frame in viewport coordinates (REQ)
+  - *frame* The editors initial frame in viewport coordinates. (REQ)
+  - *delegate* Delegate to receive update notices. (REQ)
+  - *value* Initial value of the edit field.
   - *exampleElement* A DOM element to use when copying styles.
-  - *delegate* Optional delegate to receive update notices.  If not passed, the target view will be treated as the delegate. (REQ)
-  - *value* The initial value of the edit field.  If not passed, the value property of the target view will be used instead.
   - *multiline* If YES then the hitting return will add to the value instead of exiting the inline editor.
   - *selectedRange* The range of text that should be selected.  If omitted, then the insertion point will be placed at the end of the value.
-  - *commitOnBlur* If YES then bluring will commit the value, otherwise it will discard the current value.  Defaults to YES.
-  - *validator* Optional validator will be attached to the field.
+  - *commitOnBlur* If YES then blurring will commit the value, otherwise it will discard the current value.  Defaults to YES.
+  - *validator* Validator to be attached to the field.
   
   If the inline editor is currently in use elsewhere, it will automatically
   close itself over there and begin editing for your view instead.  The 
@@ -98,20 +98,35 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     @returns {Boolean} YES if editor began editing, NO if it failed.
   */
   beginEditing: function(options) {
-    if (!options) return;
+
+    // options are required
+    //@if(debug)
+    if (!options) throw "InlineTextField.beginEditing() requires options";
+    //@end
+
+    // can't begin editing again if already editing
+    if (this.get('isEditing')) return NO ;
     
-    var layout={}, pane, delLayout, paneElem;
+    var layout={}, pane, delLayout, paneElem, del;
+
+    del = this._delegate = options.delegate ;
+    this.set('delegate', this._delegate);
     
-    // end existing editing if necessary
-    this.beginPropertyChanges();
-    if (this.get('isEditing') && !this.blurEditor()) {
-      this.endPropertyChanges();  return NO ;
+    // continue only if the delegate allows it
+    if (!this.invokeDelegateMethod(del, 'inlineEditorShouldBeginEditing', this)) {
+      //@if(debug)
+      SC.Logger.warn('InlineTextField.beginEditing() cannot begin without inlineEditorShouldBeginEditing() on the delegate.');
+      //@end
+      return NO;
     }
-
+    this.beginPropertyChanges();
+    
+    this.set('isEditing', YES) ;
+    this.set('escapeHTML', options.escapeHTML) ;
+    
     this._optframe = options.frame ;
     this._optIsCollection = options.isCollection;
     this._exampleElement = options.exampleElement ;
-    this._delegate = options.delegate ;
 
     if (!this._optframe || !this._delegate) {
       throw "At least frame and delegate options are required for inline editor";
@@ -119,10 +134,10 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     
     this._originalValue = options.value || '' ;
     this._multiline = (options.multiline !== undefined) ? options.multiline : NO ;
-    if(this._multiline){
+    if (this._multiline) {
       this.set('isTextArea', YES);
-    }else{
-    this.set('isTextArea', NO);
+    } else {
+      this.set('isTextArea', NO);
     }
     this._commitOnBlur =  (options.commitOnBlur !== undefined) ? options.commitOnBlur : YES ;
 
@@ -130,8 +145,6 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     this.set('validator', options.validator) ;
     this.set('value', this._originalValue) ;
     //this.set('selectedRange', options.selectedRange || { start: this._originalValue.length, length: 0 }) ;
-
-    this.set('isEditing', YES) ;
     
     // add to window.
     
@@ -141,17 +154,18 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     layout.width=this._optframe.width;
     delLayout = this._delegate.get('layout');
     paneElem = pane.$()[0];
-    if(this._optIsCollection && delLayout.left){
+    if (this._optIsCollection && delLayout.left) {
       layout.left=this._optframe.x-delLayout.left-paneElem.offsetLeft-1;
       if(SC.browser.msie==7) layout.left--;
-    }else{
+    } else {
       layout.left=this._optframe.x-paneElem.offsetLeft-1;
       if(SC.browser.msie==7) layout.left--;
     }
-    if(this._optIsCollection && delLayout.top){
+    
+    if (this._optIsCollection && delLayout.top) {
       layout.top=this._optframe.y-delLayout.top-paneElem.offsetTop;
       if(SC.browser.msie==7) layout.top=layout.top-2;
-    }else{
+    } else {
       layout.top=this._optframe.y-paneElem.offsetTop;
       if(SC.browser.msie==7) layout.top=layout.top-2;  
     }
@@ -163,30 +177,26 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
    
     pane.appendChild(this);
     
-    SC.RunLoop.begin().end();
-    
-    var del = this._delegate ;
+    del = this._delegate ;
 
     this._className = this.getDelegateProperty(del,"inlineEditorClassName");
     if(this._className && !this.hasClassName(this._className)) {
-        this.setClassName(this._className,true);
-      }
+      this.setClassName(this._className,true);
+    }
     
     this.invokeDelegateMethod(del, 'inlineEditorWillBeginEditing', this) ;
     // this.resizeToFit(this.getFieldValue()) ;
 
-    // allow notifications to go
-    
-    
-    // and become first responder
     this._previousFirstResponder = pane ? pane.get('firstResponder') : null;
-   
+    this.becomeFirstResponder();
     this.endPropertyChanges() ;
-
-    this.invokeDelegateMethod(del, 'inlineEditorDidBeginEditing', this) ;
-    //if(SC.browser.mozilla)this.invokeOnce(this.becomeFirstResponder) ;
-    this.invokeLast(this.becomeFirstResponder) ;
-
+    
+    // TODO: remove? if(SC.browser.mozilla)this.invokeOnce(this.becomeFirstResponder) ;
+      
+    // Become first responder and notify the delegate after run loop completes
+    this.invokeLast(function() {
+      this.invokeDelegateMethod(del, 'inlineEditorDidBeginEditing', this);
+    });
   },
   
   
@@ -195,12 +205,13 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     
     Do not use this method, use the class method instead.
     
+    @param {Event} evt that triggered the commit to happen
     @returns {Boolean}
   */
-  commitEditing: function() {
+  commitEditing: function(evt) {
     // try to validate field.  If it fails, return false.  
     if (!SC.$ok(this.validateSubmit())) return NO ;
-    return this._endEditing(this.get('value')) ;
+    return this._endEditing(this.get('value'), evt) ;
   },
   
   /**
@@ -211,7 +222,7 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     @returns {Boolean}
   */
   discardEditing: function() {
-    return this._endEditing(this._originalValue) ;
+    return this._endEditing(this._originalValue, null, YES) ;
   },
   
   /**
@@ -220,26 +231,33 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     
     @returns {Boolean}
   */
-  blurEditor: function() {
+  blurEditor: function(evt) {
     if (!this.get('isEditing')) return YES ;
-    return this._commitOnBlur ? this.commitEditing() : this.discardEditing();  
+    return this._commitOnBlur ? this.commitEditing(evt) : this.discardEditing(evt);  
   },
   
   /** @private
     Called by commitEditing and discardEditing to actually end editing.
-
+    
+    @param {String} finalValue that will be set as value
+    @param {Event} evt that triggered the end editing to occur
+    @param {Boolean} didDiscard if called from discardEditing
     @returns {Boolean} NO if editing did not exit
   */
-  _endEditing: function(finalValue) {
+  _endEditing: function(finalValue, evt, didDiscard) {
     if (!this.get('isEditing')) return YES ;
     
     // get permission from the delegate.
     var del = this._delegate ;
-    if (!this.invokeDelegateMethod(del, 'inlineEditorShouldEndEditing', this, finalValue)) return NO ; 
-
+    if (!this.invokeDelegateMethod(del, 'inlineEditorShouldEndEditing', this, finalValue, evt, didDiscard)) {
+      //@if(debug)
+      SC.Logger.warn('InlineTextField._endEditing() cannot end without inlineEditorShouldEndEditing() on the delegate.');
+      //@end
+      return NO;
+    }
     // OK, we are allowed to end editing.  Notify delegate of final value
     // and clean up.
-    this.invokeDelegateMethod(del, 'inlineEditorDidEndEditing', this, finalValue) ;
+    this.invokeDelegateMethod(del, 'inlineEditorDidEndEditing', this, finalValue, evt, didDiscard) ;
 
     // If the delegate set a class name, let's clean it up:
     if(this._className) this.setClassName(this._className, false);
@@ -307,6 +325,10 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     return this.get('isEditing');
   },
   
+  touchStart: function(e){
+    this.mouseDown(e);
+  },
+  
   /** @private */
   keyDown: function(evt) {
     var ret = this.interpretKeyEvents(evt) ;
@@ -319,16 +341,22 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
   
   //keyUp: function() { return true; },
 
+  _scitf_blurInput: function() {
+    var el = this.$input()[0];
+    if (el) el.blur();
+    el = null;
+  },
+
   // [Safari] if you don't take key focus away from an element before you 
   // remove it from the DOM key events are no longer sent to the browser.
   /** @private */
   willRemoveFromParent: function() {
-    this.$input()[0].blur();
+    return this._scitf_blurInput();
   },
   
   // ask owner to end editing.
   /** @private */
-  willLoseFirstResponder: function(responder) {
+  willLoseFirstResponder: function(responder, evt) {
     if (responder !== this) return;
 
     // if we're about to lose first responder for any reason other than
@@ -336,12 +364,16 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     // isn't cached
     this._previousFirstResponder = null;
     
+    // store the original event that caused this to loose focus so that
+    // it can be passed to the delegate
+    this._origEvent = evt;
+    
     // should have been covered by willRemoveFromParent, but this was needed 
     // too.
-    this.$input()[0].blur();
-    return this.blurEditor() ;
+    this._scitf_blurInput();
+    return this.blurEditor(evt) ;
   },
-
+  
   /**
     invoked when the user presses escape.  Returns true to ignore keystroke
     
@@ -391,7 +423,7 @@ SC.InlineTextFieldView = SC.TextFieldView.extend(SC.DelegateSupport,
     this.commitEditing() ;
     if(this._delegate){
       var next = this._delegate.nextValidKeyView();
-      if(next) next.beginEditing();
+      if(next && next.beginEditing) next.beginEditing();
     }
     return YES ;
   },
@@ -444,16 +476,15 @@ SC.InlineTextFieldView.mixin(
     // If exampleInlineTextFieldView is set, load this class otherwise use
     // the default, this.
     var klass = options.exampleInlineTextFieldView 
-              ? options.exampleInlineTextFieldView : this;
-    
-    var layout = options.delegate.get('layout');
-    var s = this.updateViewStyle();
-    var p = this.updateViewPaddingStyle();
+              ? options.exampleInlineTextFieldView : this,
+        layout = options.delegate.get('layout'),
+        s = this.updateViewStyle(),
+        p = this.updateViewPaddingStyle();
     
     var str= ".inline-editor input{"+s+"} ";
     str= str+".inline-editor textarea{"+s+"} .inline-editor .padding{"+p+"}";
-    var pa= document.getElementsByTagName('head')[0] ;
-    var el= document.createElement('style');
+    var pa= document.getElementsByTagName('head')[0],
+    el= document.createElement('style');
     el.type= 'text/css';
     el.media= 'screen';
     if(el.styleSheet) el.styleSheet.cssText= str;// IE method
@@ -494,9 +525,9 @@ SC.InlineTextFieldView.mixin(
   
   /** @private */
   updateViewStyle: function() {
-    var el = this._exampleElement[0] ;   
-    var styles = '';
-    var s=SC.getStyle(el,'font-size');
+    var el = this._exampleElement[0],
+        styles = '',
+        s=SC.getStyle(el,'font-size');
     if(s && s.length>0) styles = styles + "font-size: "+ s + " !important; ";
     s=SC.getStyle(el,'font-family');
     if(s && s.length>0) styles = styles + "font-family: " + s + " !important; ";

data/frameworks/sproutcore/frameworks/foundation/{system → mixins}/responder_context.js

@@ -2,12 +2,12 @@
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
 //            Portions ©2008-2009 Apple Inc. All rights reserved.
-// License:   Licened under MIT license (see license.js)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 sc_require('system/responder');
 
-/** @class
+/** @namespace
 
   The root object for a responder chain.  A responder context can dispatch
   actions directly to a first responder; walking up the responder chain until
@@ -19,12 +19,12 @@ sc_require('system/responder');
   You can have as many ResponderContext's as you want within your application.
   Every SC.Pane and SC.Application automatically implements this mixin.
   
-  Note that to implement this you must be a responder yourself.
-  
-  @extends SC.Responder
+  Note that to implement this, you should mix SC.ResponderContext into an
+  SC.Responder or SC.Responder subclass.
+
   @since SproutCore 1.0
 */
-SC.ResponderContext = SC.Responder.extend({
+SC.ResponderContext = {
 
   // ..........................................................
   // PROPERTIES
@@ -43,8 +43,7 @@ SC.ResponderContext = SC.Responder.extend({
     The default responder.  Set this to point to a responder object that can 
     respond to events when no other view in the hierarchy handles them.
     
-    You can also implement actions directly on the application object if you
-    prefer.
+    @type SC.Responder
   */
   defaultResponder: null,
   
@@ -118,9 +117,10 @@ SC.ResponderContext = SC.Responder.extend({
     it will stop notifying.
     
     @param {SC.Responder} responder
+    @param {Event} evt that cause this to become first responder
     @returns {SC.ResponderContext} receiver
   */
-  makeFirstResponder: function(responder) {
+  makeFirstResponder: function(responder, evt) {
     var current = this.get('firstResponder'), 
         last    = this.get('nextResponder'),
         trace   = this.get('trace'),
@@ -139,12 +139,15 @@ SC.ResponderContext = SC.Responder.extend({
       console.log('%@: makeFirstResponder => %@'.fmt(this, this.responderNameFor(responder)));
     }
     
+    if (responder) responder.set("becomingFirstResponder", YES);
+    
     this._locked = YES;
     this._pendingResponder = null;
     
     // Find the nearest common responder in the responder chain for the new
     // responder.  If there are no common responders, use last responder.
-    common = responder ? this.nextResponderFor(responder) : null;
+    // Note: start at the responder itself: it could be the common responder.
+    common = responder ? responder : null;
     while (common) {
       if (common.get('hasFirstResponder')) break;
       common = (common===last) ? null : this.nextResponderFor(common);
@@ -152,29 +155,38 @@ SC.ResponderContext = SC.Responder.extend({
     if (!common) common = last;
     
     // Cleanup old first responder
-    this._notifyWillLoseFirstResponder(current, current, common);
+    this._notifyWillLoseFirstResponder(current, current, common, evt);
     if (current) current.set('isFirstResponder', NO);
 
     // Set new first responder.  If new firstResponder does not have its 
     // responderContext property set, then set it.
+    
+    // but, don't tell anyone until we have _also_ updated the hasFirstResponder state.
+    this.beginPropertyChanges();
+    
     this.set('firstResponder', responder) ;
     if (responder) responder.set('isFirstResponder', YES);
     
     this._notifyDidBecomeFirstResponder(responder, responder, common);
     
+    // now, tell everyone the good news!
+    this.endPropertyChanges();
+    
     this._locked = NO ;
     if (this._pendingResponder) {
       this.makeFirstResponder(this._pendingResponder);
       this._pendingResponder = null;
     }
     
+    if (responder) responder.set("becomingFirstResponder", NO);
+    
     return this ;
   },
 
-  _notifyWillLoseFirstResponder: function(responder, cur, root) {
+  _notifyWillLoseFirstResponder: function(responder, cur, root, evt) {
     if (cur === root) return ; // nothing to do
 
-    cur.willLoseFirstResponder(responder);  
+    cur.willLoseFirstResponder(responder, evt);  
     cur.set('hasFirstResponder', NO);
 
     var next = this.nextResponderFor(cur);
@@ -191,6 +203,16 @@ SC.ResponderContext = SC.Responder.extend({
     cur.didBecomeFirstResponder(responder);  
   },
   
+  /**
+    Re-enters the current responder (calling willLoseFirstResponder and didBecomeFirstResponder).
+  */
+  resetFirstResponder: function() {
+    var current = this.get('firstResponder');
+    if (!current) return;
+    current.willLoseFirstResponder();
+    current.didBecomeFirstResponder();
+  },
+  
   /**
     Send the passed action down the responder chain, starting with the 
     current first responder.  This will look for the first responder that 
@@ -213,12 +235,16 @@ SC.ResponderContext = SC.Responder.extend({
     if (trace) {
       console.log("%@: begin action '%@' (%@, %@)".fmt(this, action, sender, context));
     }
-    
+
+    if (!handled && !working && this.tryToPerform) {
+      handled = this.tryToPerform(action, sender, context);
+    }
+
     while (!handled && working) {
       if (working.tryToPerform) {
         handled = working.tryToPerform(action, sender, context);
       }
-      
+
       if (!handled) {
         working = (working===last) ? null : this.nextResponderFor(working);
       }
@@ -240,4 +266,4 @@ SC.ResponderContext = SC.Responder.extend({
     return working ;
   }
 
-});
+};