sproutcore 1.6.0.beta.3-java → 1.6.0-java

data/lib/frameworks/sproutcore/frameworks/core_foundation/tests/views/view/view.js

@@ -56,7 +56,7 @@ test("it still works with the backward compatible theme property when extending"
     }.observes('theme')
   });
 
-  view = View.create();
+  var view = View.create();
   equals(SC.Theme.find('sc-base'), view.get('theme'));
   view.set('themeName', 'hello');
   equals(1, count, "theme observers should get called");

data/lib/frameworks/sproutcore/frameworks/core_foundation/{system → views}/bindable_span.js

@@ -11,7 +11,8 @@ sc_require('views/template');
   set up. When the associated property changes, just the template for this view
   will re-render.
 */
-SC._BindableSpan = SC.TemplateView.extend({
+SC._BindableSpan = SC.TemplateView.extend(
+  /** @scope SC._BindableSpan.prototype */{
   /**
    The type of HTML tag to use. To ensure compatibility with
    Internet Explorer 7, a <span> tag is used to ensure that inline elements are

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/template_collection.js

@@ -1,6 +1,23 @@
 sc_require('views/template');
 
-SC.TemplateCollectionView = SC.TemplateView.extend({
+/** @class
+
+  @author Tom Dale
+  @author Yehuda Katz
+  @extends SC.TemplateView
+  @since SproutCore 1.5
+*/
+SC.TemplateCollectionView = SC.TemplateView.extend(
+  /** @scope SC.TemplateCollectionView.prototype */{
+  /**
+    Name of the tag that is used for the collection
+
+    If the tag is a list ('ul' or 'ol') each item will be wrapped into a 'li' tag.
+    If the tag is a table ('table', 'thead', 'tbody') each item will be wrapped into a 'tr' tag.
+
+    @property {String}
+    @default ul
+  */
   tagName: 'ul',
   content: null,
   template: SC.Handlebars.compile(''),
@@ -21,6 +38,12 @@ SC.TemplateCollectionView = SC.TemplateView.extend({
   // In case a default content was set, trigger the child view creation
   // as soon as the empty layer was created
   didCreateLayer: function() {
+    // FIXME: didCreateLayer gets called multiple times when template collection
+    // views are nested - this is a hack to avoid rendering the content more
+    // than once.
+    if (this._sctcv_layerCreated) { return; }
+    this._sctcv_layerCreated = true;
+
     var content = this.get('content');
     if(content) {
       this.arrayContentDidChange(0, 0, content.get('length'));
@@ -55,6 +78,37 @@ SC.TemplateCollectionView = SC.TemplateView.extend({
   */
   itemViewTemplateName: null,
 
+  /**
+    A template to render when there is no content or the content length is 0.
+  */
+  inverseTemplate: function(key, value) {
+    if (value !== undefined) {
+      return value;
+    }
+
+    var templateName = this.get('inverseTemplateName'),
+        template = this.get('templates').get(templateName);
+
+    if (!template) {
+      //@if(debug)
+      if (templateName) {
+        SC.Logger.warn('%@ - Unable to find template "%@".'.fmt(this, templateName));
+      }
+      //@endif
+
+      return function() { return ''; };
+    }
+
+    return template;
+  }.property('inverseTemplateName').cacheable(),
+
+  /**
+    The name of a template to lookup if no inverse template is provided.
+
+    @property {String}
+  */
+  inverseTemplateName: null,
+
   itemContext: null,
 
   itemViewClass: function() {
@@ -127,9 +181,11 @@ SC.TemplateCollectionView = SC.TemplateView.extend({
   }.observes('content'),
 
   arrayContentWillChange: function(start, removedCount, addedCount) {
+    if (!this.get('layer')) { return; }
+
     // If the contents were empty before and this template collection has an empty view
     // remove it now.
-    emptyView = this.get('emptyView');
+    var emptyView = this.get('emptyView');
     if (emptyView) { emptyView.$().remove(); emptyView.removeFromParent(); }
 
     // Loop through child views that correspond with the removed items.
@@ -167,47 +223,49 @@ SC.TemplateCollectionView = SC.TemplateView.extend({
         addedViews    = [],
         renderFunc, childView, itemOptions, elem, insertAtElement, item, itemElem, idx, len;
 
-    var addedObjects = content.slice(start, start+addedCount);
-
-    // If we have content to display, create a view for
-    // each item.
-    itemOptions = this.get('itemViewOptions') || {};
-
-    elem = this.$();
-    insertAtElement = elem.find('li')[start-1] || null;
-    len = addedObjects.get('length');
-
-    // TODO: This logic is duplicated from the view helper. Refactor
-    // it so we can share logic.
-    var itemAttrs = {
-      "id": itemOptions.id,
-      "class": itemOptions['class'],
-      "classBinding": itemOptions.classBinding
-    };
-
-    renderFunc = function(context) {
-      sc_super();
-      SC.Handlebars.ViewHelper.applyAttributes(itemAttrs, this, context);
-    };
-
-    itemOptions = SC.clone(itemOptions);
-    delete itemOptions.id;
-    delete itemOptions['class'];
-    delete itemOptions.classBinding;
+    if (content) {
+      var addedObjects = content.slice(start, start+addedCount);
+
+      // If we have content to display, create a view for
+      // each item.
+      itemOptions = this.get('itemViewOptions') || {};
+
+      elem = this.$();
+      insertAtElement = elem.find('li')[start-1] || null;
+      len = addedObjects.get('length');
+
+      // TODO: This logic is duplicated from the view helper. Refactor
+      // it so we can share logic.
+      var itemAttrs = {
+        "id": itemOptions.id,
+        "class": itemOptions['class'],
+        "classBinding": itemOptions.classBinding
+      };
+
+      renderFunc = function(context) {
+        sc_super();
+        SC.Handlebars.ViewHelper.applyAttributes(itemAttrs, this, context);
+      };
+
+      itemOptions = SC.clone(itemOptions);
+      delete itemOptions.id;
+      delete itemOptions['class'];
+      delete itemOptions.classBinding;
 
     for (idx = 0; idx < len; idx++) {
       item = addedObjects.objectAt(idx);
-      view = this.createChildView(itemViewClass.extend(itemOptions, {
+      childView = this.createChildView(itemViewClass.extend(itemOptions, {
         content: item,
-        render: renderFunc
+        render: renderFunc,
+        tagName: itemViewClass.prototype.tagName || this.get('itemTagName')
       }));
 
-      var contextProperty = view.get('contextProperty');
+      var contextProperty = childView.get('contextProperty');
       if (contextProperty) {
-        view.set('context', view.get(contextProperty));
+        childView.set('context', childView.get(contextProperty));
       }
 
-      itemElem = view.createLayer().$();
+      itemElem = childView.createLayer().$();
       if (!insertAtElement) {
         elem.append(itemElem);
       } else {
@@ -215,20 +273,21 @@ SC.TemplateCollectionView = SC.TemplateView.extend({
       }
       insertAtElement = itemElem;
 
-      addedViews.push(view);
+      addedViews.push(childView);
     }
 
-    childViews.replace(start, 0, addedViews);
+      childViews.replace(start, 0, addedViews);
+    }
 
     var inverseTemplate = this.get('inverseTemplate');
     if (childViews.get('length') === 0 && inverseTemplate) {
-      view = this.createChildView(SC.TemplateView.extend({
+      childView = this.createChildView(SC.TemplateView.extend({
         template: inverseTemplate,
         content: this
       }));
-      this.set('emptyView', view);
-      view.createLayer().$().appendTo(elem);
-      this.childViews = [view];
+      this.set('emptyView', childView);
+      childView.createLayer().$().appendTo(elem);
+      this.childViews = [childView];
     }
 
     // Because the layer has been modified, we need to invalidate the frame
@@ -237,6 +296,19 @@ SC.TemplateCollectionView = SC.TemplateView.extend({
     this.invokeLast('invalidateFrame');
   },
 
+  itemTagName: function() {
+    switch(this.get('tagName')) {
+      case 'ul':
+      case 'ol':
+        return 'li';
+      case 'table':
+      case 'thead':
+      case 'tbody':
+      case 'tfoot':
+        return 'tr';
+    }
+  }.property('tagName'),
+
   invalidateFrame: function() {
     this.notifyPropertyChange('frame');
   }

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view.js

@@ -24,7 +24,7 @@ SC.CONTEXT_MENU_ENABLED = YES;
   Default property to disable or enable if the focus can jump to the address
   bar or not.
 */
-SC.TABBING_ONLY_INSIDE_DOCUMENT = YES;
+SC.TABBING_ONLY_INSIDE_DOCUMENT = NO;
 
 /**
   Tells the property (when fetched with themed()) to get its value from the renderer (if any).
@@ -674,7 +674,12 @@ SC.CoreView.reopen(
 
     if (this.get('isTextSelectable')) { context.addClass('allow-select'); }
     if (!this.get('isVisible')) { context.addClass('sc-hidden'); }
-    if (this.get('isFirstResponder')) { context.addClass('focus'); }
+    if (this.get('isFirstResponder')) { 
+      context.addClass('focus');
+      context.attr('tabindex', '0'); 
+    }else{
+      context.attr('tabindex', '-1');
+    }
 
     context.id(this.get('layerId'));
     context.attr('role', this.get('ariaRole'));
@@ -999,7 +1004,7 @@ SC.CoreView.reopen(
     pv = this.get('parentView');
     if (pv) {
       cf = pv.get('clippingFrame');
-      if (!cf) return f;
+      if (!cf) return { x: 0, y: 0, width: f.width, height: f.height};
       ret = SC.intersectRects(cf, f);
     }
     ret.x -= f.x;
@@ -1236,7 +1241,7 @@ SC.CoreView.reopen(
 
 });
 
-SC.CoreView.mixin(/** @scope SC.View.prototype */ {
+SC.CoreView.mixin(/** @scope SC.CoreView.prototype */ {
 
   /** @private walk like a duck -- used by SC.Page */
   isViewClass: YES,
@@ -1252,9 +1257,9 @@ SC.CoreView.mixin(/** @scope SC.View.prototype */ {
   */
   design: function() {
     if (this.isDesign) {
-      //@ if (debug)
+      // @if (debug)
       SC.Logger.warn("SC.View#design called twice for %@.".fmt(this));
-      //@ endif
+      // @endif
       return this;
     }
 
@@ -1472,7 +1477,8 @@ SC.CoreView.unload = function() {
    2. They act as first responders for incoming keyboard, mouse, and
      touch events.
 
-  ## View Initialization
+  View Initialization
+  ====
 
   When a view is setup, there are several methods you can override that
   will be called at different times depending on how your view is created.

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/enabled.js

@@ -1,6 +1,7 @@
 sc_require("views/view");
 
-SC.View.reopen({
+SC.View.reopen(
+  /** @scope SC.View.prototype */ {
   // ..........................................................
   // IS ENABLED SUPPORT
   //

data/lib/frameworks/sproutcore/frameworks/core_foundation/views/view/keyboard.js

@@ -1,6 +1,7 @@
 sc_require("views/view");
 
-SC.View.reopen({
+SC.View.reopen(
+  /** @scope SC.View.prototype */ {
   // ..........................................................
   // KEY RESPONDER
   //
@@ -38,13 +39,20 @@ SC.View.reopen({
 
   /**
     Invokved just after the responder loses key responder status.
+    @param {SC.Responder} responder
   */
   didLoseKeyResponderTo: function(responder) {},
 
   /**
     Invoked just after the responder gains key responder status.
+    By default, it calls focus on the view root element. For accessibility 
+    purposes.
+  
+    @param {SC.Responder} responder
   */
-  didBecomeKeyResponderFrom: function(responder) {},
+  didBecomeKeyResponderFrom: function(responder) {
+    this.$().focus();
+  },
 
   /**
     This method will process a key input event, attempting to convert it to
@@ -124,100 +132,270 @@ SC.View.reopen({
     return ret ;
   },
 
+  /**
+    The first child of this view for the purposes of tab ordering. If not
+    provided, the first element of childViews is used. Override this if
+    your view displays its child views in an order different from that
+    given in childViews.
+
+    @type SC.View
+    @default null
+  */
+  firstKeyView: null,
+
+  /**
+    @private
+
+    Actually calculates the firstKeyView as described in firstKeyView.
+
+    @returns {SC.View}
+  */
+  _getFirstKeyView: function() {
+    // if first was given, just return it
+    var firstKeyView = this.get('firstKeyView');
+    if(firstKeyView) return firstKeyView;
+
+    // otherwise return the first childView
+    var childViews = this.get('childViews');
+    if(childViews) return childViews[0];
+  },
+
+  /**
+    The last child of this view for the purposes of tab ordering. If not set, can be generated two different ways:
+    1. If firstKeyView is provided, it will be generated by starting from firstKeyView and traversing the childViews nextKeyView properties.
+    2. If firstKeyView is not provided, it will simply return the last element of childViews.
+
+    The first way is not very efficient, so if you provide firstKeyView you should also provide lastKeyView.
+
+    @type SC.View
+    @default null
+  */
+  lastKeyView: null,
+
+  /**
+    @private
+
+    Actually calculates the lastKeyView as described in lastKeyView.
+
+    @returns {SC.View}
+  */
+  _getLastKeyView: function() {
+    // if last was given, just return it
+    var lastKeyView = this.get('lastKeyView');
+    if(lastKeyView) return lastKeyView;
+
+    var view,
+    prev = this.get('firstKeyView');
+
+    // if first was given but not last, build by starting from first and
+    // traversing until we hit the end. this is obviously the least efficient
+    // way
+    if(prev) {
+      while(view = prev._getNextKeyView()) {
+        prev = view;
+      }
+
+      return prev;
+    }
+
+    // if neither was given, it's more efficient to just return the last
+    // childView
+    else {
+      var childViews = this.get('childViews');
+
+      if(childViews) return childViews[childViews.length - 1];
+    }
+  },
+
   /**
     Optionally points to the next key view that should gain focus when tabbing
     through an interface.  If this is not set, then the next key view will
-    be set automatically to the next child.
+    be set automatically to the next sibling as defined by its parent's
+    childViews property.
+
+    If any views define this, all of their siblings should define it as well,
+    otherwise undefined behavior may occur. Their parent view should also define
+    a firstKeyView.
+
+    This may also be set to a view that is not a sibling, but once again all
+    views in the chain must define it or undefined behavior will occur.
+
+    Likewise, any view that sets nextKeyView should also set previousKeyView.
+
+    @type SC.View
+    @default null
   */
-  nextKeyView: null,
+
+  nextKeyView: undefined,
+
+  /**
+    @private
+
+    Gets the next key view by checking if the user set it and otherwise just
+    getting the next by index in childViews.
+
+    @return {SC.View}
+  */
+  _getNextKeyView: function() {
+    var pv = this.get('parentView'),
+    nextKeyView = this.get('nextKeyView');
+
+    // if the parent defines lastKeyView, it takes priority over this views
+    // nextKeyView
+    if(pv && pv.get('lastKeyView') === this) return null;
+
+    // if this view defines a nextKeyView, use it
+    if(nextKeyView !== undefined) return nextKeyView;
+
+    // otherwise generate one based on parent view's childViews
+    if(pv) {
+      var childViews = pv.get('childViews');
+      return childViews[childViews.indexOf(this) + 1];
+    }
+  },
 
   /**
-    Computes the next valid key view, possibly returning the receiver or null.
-    This is the next key view that acceptsFirstResponder.
+    Computes the next valid key view. This is the next key view that
+    acceptsFirstResponder. Computed using depth first search. If the current view
+    is not valid, it will first traverse its children before trying siblings. If
+    the current view is the only valid view, the current view will be returned. Will
+    return null if no valid view can be found.
 
     @property
     @type SC.View
   */
   nextValidKeyView: function() {
-    var seen = [],
-        rootView = this.get('pane'), ret = this.get('nextKeyView');
+    var cur = this, next;
 
-    if(!ret) { ret = rootView._computeNextValidKeyView(this, seen); }
+    while(next !== this) {
+      next = null;
 
-    if(SC.TABBING_ONLY_INSIDE_DOCUMENT && !ret) {
-      ret = rootView._computeNextValidKeyView(rootView, seen);
-    }
+      // only bother to check children if we are visible
+      if(cur.get('isVisibleInWindow')) next = cur._getFirstKeyView();
 
-    return ret ;
-  }.property('nextKeyView'),
+      // if we have no children, check our sibling
+      if(!next) next = cur._getNextKeyView();
 
-  _computeNextValidKeyView: function(currentView, seen) {
-    var ret = this.get('nextKeyView'),
-        children, i, childLen, child;
-    if(this !== currentView && seen.indexOf(currentView)!=-1 &&
-      this.get('acceptsFirstResponder') && this.get('isVisibleInWindow')){
-      return this;
-    }
-    seen.push(this); // avoid cycles
-
-    // find next sibling
-    if (!ret) {
-      children = this.get('childViews');
-      for(i=0, childLen = children.length; i<childLen; i++){
-        child = children[i];
-        if(child._computeNextValidKeyView && child.get('isVisibleInWindow') && child.get('isVisible')){
-          ret = child._computeNextValidKeyView(currentView, seen);
-        }
-        if (ret) { return ret; }
+      // if we have no children or siblings, unroll up closest parent that has a
+      // next sibling
+      if(!next) while(cur = cur.get('parentView')) {
+        if(next = cur._getNextKeyView()) break;
+      }
+
+      // if no parents have a next sibling, start over from the beginning
+      if(!next) {
+        if(!SC.TABBING_ONLY_INSIDE_DOCUMENT) break;
+        else next = this.get('pane');
       }
-      ret = null;
+
+      // if it's a valid firstResponder, we're done!
+      if(next.get('isVisibleInWindow') && next.get('acceptsFirstResponder')) return next;
+
+      // otherwise keep looking
+      cur = next;
     }
-    return ret ;
-  },
+
+    // this will only happen if no views are visible and accept first responder
+    return null;
+  }.property('nextKeyView'),
+
+  /**
+    Optionally points to the previous key view that should gain focus when tabbing
+    through an interface.  If this is not set, then the previous key view will
+    be set automatically to the previous sibling as defined by its parent's
+    childViews property.
+
+    If any views define this, all of their siblings should define it as well,
+    otherwise undefined behavior may occur. Their parent view should also define
+    a lastKeyView.
+
+    This may also be set to a view that is not a sibling, but once again all
+    views in the chain must define it or undefined behavior will occur.
+
+    Likewise, any view that sets previousKeyView should also set nextKeyView.
+
+    @type SC.View
+    @default null
+  */
+  previousKeyView: undefined,
 
   /**
-    Optionally points to the previous key view that should gain focus when
-    tabbing through the interface. If this is not set then the previous
-    key view will be set automatically to the previous child.
+    @private
+
+    Gets the previous key view by checking if the user set it and otherwise just
+    getting the previous by index in childViews.
+
+    @return {SC.View}
   */
-  previousKeyView: null,
+  _getPreviousKeyView: function() {
+    var pv = this.get('parentView'),
+    previousKeyView = this.get('previousKeyView');
+
+    // if the parent defines firstKeyView, it takes priority over this views
+    // previousKeyView
+    if(pv && pv.get('firstKeyView') === this) return null;
+
+    // if this view defines a previousKeyView, use it
+    if(previousKeyView !== undefined) return previousKeyView;
+
+    // otherwise generate one based on parent view's childViews
+    if(pv) {
+      var childViews = pv.get('childViews');
+      return childViews[childViews.indexOf(this) - 1];
+    }
+  },
 
   /**
-    Computes the previous valid key view, possibly returning the receiver or
-    null.  This is the previous key view that acceptsFirstResponder.
+    Computes the previous valid key view. This is the previous key view that
+    acceptsFirstResponder. Traverse views in the opposite order from
+    nextValidKeyView. If the current view is the pane, tries deepest child. If the
+    current view has a previous view, tries its last child. If this view is the
+    first child, tries the parent. Will return null if no valid view can be
+    found.
 
     @property
     @type SC.View
   */
+  // TODO: clean this up
   previousValidKeyView: function() {
-    var seen = [],
-        rootView = this.pane(), ret = this.get('previousKeyView');
-    if(!ret) { ret = rootView._computePreviousValidKeyView(this, seen); }
-    return ret ;
-  }.property('previousKeyView'),
+    var cur = this, prev;
 
-  _computePreviousValidKeyView: function(currentView, seen) {
-    var ret = this.get('previousKeyView'),
-        children, i, child;
+    while(prev !== this) {
+      // normally, just try to get previous view's last child
+      if(cur.get('parentView')) prev = cur._getPreviousKeyView();
 
-    if(this !== currentView && seen.indexOf(currentView)!=-1 &&
-      this.get('acceptsFirstResponder') && this.get('isVisibleInWindow')){
-      return this;
-    }
-    seen.push(this); // avoid cycles
-
-    // find next sibling
-    if (!ret) {
-      children = this.get('childViews');
-      for(i=children.length-1; 0<=i; i--){
-        child = children[i];
-        if(child._computePreviousValidKeyView && child.get('isVisibleInWindow') && child.get('isVisible')){
-          ret = child._computePreviousValidKeyView(currentView, seen);
-        }
-        if (ret) { return ret; }
+      // if we are the pane and address bar tabbing is enabled, trigger it now
+      else if(!SC.TABBING_ONLY_INSIDE_DOCUMENT) break;
+
+      // if we are the pane, get our own last child
+      else prev = cur;
+
+      // loop down to the last valid child
+      if(prev) {
+        do {
+          cur = prev;
+          prev = prev._getLastKeyView();
+        } while(prev && prev.get('isVisibleInWindow'));
+
+        // if we ended on a null, unroll to the last one
+        // we don't unroll if we ended on a hidden view because we need
+        // to traverse to its previous view next iteration
+        if(!prev) prev = cur;
       }
-      ret = null;
+
+      // if there is no previous view, traverse to the parent
+      else prev = cur.get('parentView');
+
+      // if the view is valid, return it
+      if(prev.get('isVisibleInWindow') && prev.get('acceptsFirstResponder')) return prev;
+
+      // otherwise, try to find its previous valid keyview
+      cur = prev;
     }
-    return ret ;
-  }
+
+    // if none of the views accept first responder and we make it back to where
+    // we started, just return null
+    return null;
+  }.property('previousKeyView')
 });
+