sproutcore 1.4.5 → 1.5.0.pre.3

data/lib/frameworks/sproutcore/frameworks/desktop/views/navigation_bar.js

@@ -0,0 +1,181 @@
+// ==========================================================================
+// 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("views/toolbar");
+
+/** @class
+  NavigationBars do Great Things. They transition themselves (fade in/out) and
+  all children (swoosh left/right). They accept isSwipeLeft and isSwipeRight views
+  that handle, well, swiping. In short, they are neat.
+  
+  @extends SC.ToolbarView
+  @since SproutCore 1.0
+*/
+SC.NavigationBarView = SC.ToolbarView.extend(SC.Gesturable, {
+  gestures: ["swipeGesture"],
+  swipeGesture: SC.SwipeGesture,
+
+  
+  init: function() {
+    sc_super();
+    
+    if (!SC.Animatable) {
+      SC.Logger.error(
+        "NavigationBarView requires SC.Animatable. " +
+        "Please make your app or framework require the animation framework. CRASH."
+      );
+    }
+  },
+
+  /**
+    @private
+    Mixies in animatable and the navigation bar transitions.
+  */
+  mixinAnimatable: function() {
+    this.mixin(SC.Animatable);
+    this.transitions = this.navigationTransitions;    
+  },
+  
+  /**
+    The default navigation transitions.
+  */
+  navigationTransitions: { 
+    opacity: {
+      duration: 0.25, action: "didFinishTransition"
+    } 
+  },
+  
+  /**
+    The default style (opacity is 1)
+  */
+  style: {
+    opacity: 1
+  },
+  
+  //
+  // GESTURE SUPPORT
+  //
+  
+  swipe: function(gesture, touch, direction) {
+    var lookingFor = (direction === SC.SWIPE_LEFT) ? "isSwipeLeft" : "isSwipeRight",
+        cv = this.get("childViews"), 
+        child, idx, len = cv.get("length");
+    
+    // loop through the children
+    for (idx = 0; idx < len; idx++) {
+      child = cv[idx];
+      
+      // see if this is the view we are looking for
+      if (child.get(lookingFor)) {
+        // just give it touch responder and end right away, just like ScrollView. Good times, eh?
+        touch.makeTouchResponder(child);
+        touch.end();
+        return;
+      }
+    }
+    
+  },
+  
+  //
+  // BUILD IN/OUT
+  //
+  
+  // for various reasons, including the fact that mixing in init  is VERY BAD, we do this lazily.
+  resetBuild: function() {
+    if (!this.isAnimatable) this.mixinAnimatable();
+  },
+  
+  // callback
+  didFinishTransition: function() {
+    if (this.isBuildingIn) {
+      // and please continue
+      this.buildInDidFinish();
+    } else if (this.isBuildingOut) this.buildOutDidFinish();
+  },
+  
+  preBuildIn: function() {
+    // first, fade this view out
+    this.disableAnimation();
+    this.adjust("opacity", 0).updateLayout();
+    this.enableAnimation();
+    
+    // now, loop over child views
+    var cv = this.get("childViews"), child, idx, len = cv.get("length");
+    for (idx = 0; idx < len; idx++) {
+      child = cv[idx];
+      
+      // if the child disables navigation transitions, skip
+      if (child.disableNavigationTransition) continue;
+      
+      // make sure the navigation stuff is mixed in as needed
+      if (!child._nv_mixedIn) this.mixinNavigationChild(child);
+      
+      // now, set the initial state, which is either to the left or to the right 100px.
+      child.disableAnimation();
+      child.transform(this.buildDirection === SC.TO_LEFT ? 100  : -100);
+      child.enableAnimation();
+    }
+  },
+  
+  buildIn: function() {
+    // first, we do the precursor
+    this.preBuildIn();
+    
+    // then, we queue the actual animation
+    this.invokeLater("startBuildIn", 10);
+  },
+  
+  startBuildIn: function() {
+    this.adjust("opacity", 1);
+
+    // get our frame, because we use it when computing child frames.
+    var cv = this.get("childViews"), child, idx, len = cv.get("length");
+    for (idx = 0; idx < len; idx++) {
+      child = cv[idx];
+      if (child.disableNavigationTransition) continue;
+      child.transform(0);
+    }
+  },
+
+  buildOut: function() {
+    this.adjust("opacity", 0);
+    
+    var cv = this.get("childViews"), child, idx, len = cv.get("length");
+    for (idx = 0; idx < len; idx++) {
+      child = cv[idx];
+      if (child.disableNavigationTransition) continue;
+      if (!child._nv_mixedIn) this.mixinNavigationChild(child);
+      child.transform(this.buildDirection === SC.TO_LEFT ? -100  : 100);
+    }
+  },
+  
+  /* CHILD VIEWS */
+  mixinNavigationChild: function(child) {
+    if (child.isAnimatable) return;
+    
+    // mix in animatable
+    child.mixin(SC.Animatable);
+    
+    // mix in the transitions (and the "natural" layout)
+    child.mixin({
+      transitions: {
+        transform: {timing: SC.Animatable.TRANSITION_EASE_IN_OUT, duration: 0.25}
+      },
+      naturalLayout: child.get("layout"),
+      transform: function(pos) {
+        if (SC.platform.supportsCSS3DTransforms) {
+          this.adjust("transform", "translate3d(" + pos + "px,0px,0px)");
+        } else {
+          this.adjust("transform", "translate(" + pos + "px,0px)");          
+        }
+      }
+    });
+    
+    // and mark as having mixed in.
+    child._nv_mixedIn = YES;
+  }
+});

data/lib/frameworks/sproutcore/frameworks/desktop/views/popup_button.js

@@ -113,7 +113,7 @@ SC.PopupButtonView = SC.ButtonView.extend(
     var menu = this.get('menu');
     
     // if it is already instantiated or does not exist, we cannot do anything
-    if (!menu.isClass || !menu) return;
+    if (!menu || !menu.isClass) return;
     
     // create
     this.menu = menu.create();
@@ -274,7 +274,8 @@ SC.PopupButtonView = SC.ButtonView.extend(
   {
     if (!this.get('isEnabled')) return NO ;
     var menu = this.get('instantiatedMenu') ;
-    return (!!menu && menu.performKeyEquivalent(charCode, evt)) ;
+
+    return (!!menu && menu.performKeyEquivalent(charCode, evt, YES)) ;
   },
 
   /** @private */

data/lib/frameworks/sproutcore/frameworks/desktop/views/progress.js

@@ -68,12 +68,14 @@ SC.ProgressView = SC.View.extend(SC.Control, {
   maximumBindingDefault: SC.Binding.single().notEmpty(),
 
   /**
-    The value of the progress inner offset range. Should be the same as width 
-    of image. Default it to 24
-
+    Deprecated. This is a render setting, and as such, should be adjusted in
+    the theme. Investigate your theme's progressRenderDelegate.
+    
+    @deprecated This should now be changed in themes.
     @type Integer
+    @deprecated
   */
-  offsetRange: 24,
+  offsetRange: undefined,
 
   /**
     Optionally specify the key used to extract the maximum progress value 
@@ -104,7 +106,7 @@ SC.ProgressView = SC.View.extend(SC.Control, {
     [1st image y-location, offset, total number of images]
     @property {Array}
   */
-  animatedBackgroundMatrix: [],
+  animatedBackgroundMatrix: undefined,
   
   /**
     Optionally specify the key used to extract the isIndeterminate value 
@@ -152,66 +154,9 @@ SC.ProgressView = SC.View.extend(SC.Control, {
     }
   },
   
-  displayProperties: 'value minimum maximum isIndeterminate'.w(),
-  
-  render: function(context, firstTime) {
-    var inner, animatedBackground, value, cssString, backPosition,
-        isIndeterminate = this.get('isIndeterminate'),
-        isRunning = this.get('isRunning'),
-        isEnabled = this.get('isEnabled'),
-        offsetRange = this.get('offsetRange'),
-        offset = (isIndeterminate && isRunning) ? 
-                (Math.floor(Date.now()/75)%offsetRange-offsetRange) : 0;
-  
-    // compute value for setting the width of the inner progress
-    if (!isEnabled) {
-      value = "0%" ;
-    } else if (isIndeterminate) {
-      value = "120%";
-    } else {
-      value = (this.get("_percentageNumeric") * 100) + "%";
-    }
-
-    var classNames = {
-      'sc-indeterminate': isIndeterminate,
-      'sc-empty': (value <= 0),
-      'sc-complete': (value >= 100)
-    };
-    
-    if(firstTime) {
-      var classString = this._createClassNameString(classNames);
-      context.push('<div class="sc-inner ', classString, '" style="width: ', 
-                    value, ';left: ', offset, 'px;">',
-                    '<div class="sc-inner-head">','</div>',
-                    '<div class="sc-inner-tail"></div></div>',
-                    '<div class="sc-outer-head"></div>',
-                    '<div class="sc-outer-tail"></div>');
-    }
-    else {
-      context.setClass(classNames);
-      inner = this.$('.sc-inner');
-      animatedBackground = this.get('animatedBackgroundMatrix');
-      cssString = "width: "+value+"; ";
-      cssString = cssString + "left: "+offset+"px; ";
-      if (animatedBackground.length === 3 ) {
-        inner.css('backgroundPosition', '0px -'+ 
-                (animatedBackground[0] + 
-                animatedBackground[1]*this._currentBackground)+'px');
-        if(this._currentBackground===animatedBackground[2]-1
-           || this._currentBackground===0){
-          this._nextBackground *= -1;
-        }
-        this._currentBackground += this._nextBackground;
-        
-        cssString = cssString + "backgroundPosition: "+backPosition+"px; ";
-        //Instead of using css() set attr for faster perf.
-        inner.attr('style', cssString);
-      }else{
-        inner.attr('style', cssString);
-      }
-    }
-    
-  },
+  displayProperties: 'displayValue minimum maximum isRunning isEnabled isIndeterminate animatedBackgroundMatrix offsetRange'.w(),
+  
+  renderDelegateName: 'progressRenderDelegate',
   
   contentPropertyDidChange: function(target, key) {
     var content = this.get('content');
@@ -223,7 +168,7 @@ SC.ProgressView = SC.View.extend(SC.Control, {
     .endPropertyChanges();
   },
   
-  _percentageNumeric: function(){
+  displayValue: function(){
     var minimum = this.get('minimum') || 0.0,
         maximum = this.get('maximum') || 1.0,
         value = this.get('value') || 0.0;
@@ -235,16 +180,9 @@ SC.ProgressView = SC.View.extend(SC.Control, {
     if(value<minimum) value = 0.0;
     // cannot be larger then maximum
     if(value>maximum) value = 1.0;
+    
     return value;
-  }.property('value').cacheable(),
-  
-  _createClassNameString: function(classNames) {
-    var classNameArray = [], key;
-    for(key in classNames) {
-      if(!classNames.hasOwnProperty(key)) continue;
-      if(classNames[key]) classNameArray.push(key);
-    }
-    return classNameArray.join(" ");
-  }
+  }.property('value', 'maximum', 'minimum').cacheable()
+
   
 }) ;

data/lib/frameworks/sproutcore/frameworks/desktop/views/radio.js

@@ -62,6 +62,8 @@ SC.RadioView = SC.View.extend(SC.Control,
   // HTML design options
   classNames: ['sc-radio-view'],
 
+  ariaRole: 'radiogroup',
+  
   /**
     The value of the currently selected item, and which will be checked in the 
     UI. This can be either a string or an array with strings for checking 
@@ -141,7 +143,7 @@ SC.RadioView = SC.View.extend(SC.Control,
     // Force regeneration of buttons
     this._renderAsFirstTime = YES;
   
-    this.notifyPropertyChange('_displayItems');
+    this.notifyPropertyChange('displayItems');
   },
 
   // ..........................................................
@@ -150,108 +152,16 @@ SC.RadioView = SC.View.extend(SC.Control,
   /** 
     The display properties for radio buttons are the value and _displayItems.
   */
-  displayProperties: ['value', '_displayItems'],
-
-  render: function(context, firstTime) {
-    var items = this.get('_displayItems'),
-        value = this.get('value'),
-        isArray = SC.isArray(value),
-        item, idx, icon, name, width, itemsLength, url,
-        className, disabled, sel, labelText,
-        selectionState, selectionStateClassNames;
-
-    context.addClass(this.get('layoutDirection'));
-
-    // isArray is set only when there are two active checkboxes 
-    // which can only happen with mixed state
-    if (isArray && value.length <= 0) {
-      value = value[0];
-      isArray = NO;
-    }
-
-    // if necessary, regenerate the radio buttons
-    if (this._renderAsFirstTime) {
-      firstTime = YES;
-      this._renderAsFirstTime = NO;
-    }
-
-    if (firstTime) {
-      context.attr('role', 'radiogroup');
-      // generate tags from this.
-      name = SC.guidFor(this); // name for this group
-      itemsLength = items.length;
-      for (idx = 0; idx < itemsLength; idx++) {
-        item = items[idx];
-
-        // get the icon from the item, if one exists...
-        icon = item[3];
-        if (icon) {
-          url = (icon.indexOf('/') >= 0) ? icon: SC.BLANK_IMAGE_URL;
-          className = (url === icon) ? '': icon;
-          icon = '<img src="' + url + '" class="icon ' + className + '" alt="" />';
-        } else icon = '';
-
-        if (item) {
-          sel = (isArray) ? (value.indexOf(item[1]) >= 0) : (value === item[1]);
-        } else {
-          sel = NO;
-        }
-        selectionStateClassNames = this._getSelectionStateClassNames(item, sel, value, isArray, false);
-
-        labelText = this.escapeHTML ? SC.RenderContext.escapeHTML(item[0]) : item[0];
-        
-        width = item[4];
-        
-        context.push('<div class="sc-radio-button ',
-                    selectionStateClassNames, '" ',
-                    width ? 'style="width: ' + width + 'px;" ' : '',
-                    'aria-checked="', sel ? 'true':'false','" ',
-                    'role="radio"' , ' index="', idx,'">',
-                    '<span class="button"></span>',
-                    '<span class="sc-button-label">', 
-                    icon, labelText, '</span></div>');
-      }
-
-    } else {
-      // update the selection state on all of the DOM elements.  The options are
-      // sel or mixed.  These are used to display the proper setting...
-      this.$('.sc-radio-button').forEach(function(button) {
-
-        button = this.$(button);
-        idx = parseInt(button.attr('index'), 0);
-        item = (idx >= 0) ? items[idx] : null;
-
-        if (item) {
-          sel = (isArray) ? (value.indexOf(item[1]) >= 0) : (value === item[1]);
-        } else {
-          sel = NO;
-        }
-        
-        width = item[4];
-        if (width) button.width(width);
-        
-        selectionState = this._getSelectionStateClassNames(item, sel, value, isArray, true);
-        button.attr('aria-checked', sel ? 'true': 'false');
-        // set class of label
-        button.setClass(selectionState);
-
-        // avoid memory leaks
-        idx = selectionState = null;
-      },
-      this);
-    }
-  },
+  displayProperties: ['displayItems', 'isEnabled', 'layoutDirection'],
+  renderDelegateName: 'radioGroupRenderDelegate',
 
-  /** @private - 
-    Will iterate the items property to return an array with items that is 
-    indexed in the following structure:
-      [0] => Title (or label)
-      [1] => Value
-      [2] => Enabled (YES default)
-      [3] => Icon (image URL)
+  /** @private
+    Data Sources for radioRenderDelegates, as required by radioGroupRenderDelegate.
   */
-  _displayItems: function() {
-    var items = this.get('items'), 
+  displayItems: function() {
+    var items = this.get('items'),
+        viewValue = this.get('value'),
+        isArray = SC.isArray(viewValue),
         loc = this.get('localize'),
         titleKey = this.get('itemTitleKey'),
         valueKey = this.get('itemValueKey'),
@@ -259,8 +169,8 @@ SC.RadioView = SC.View.extend(SC.Control,
         isHorizontal = this.get('layoutDirection') === SC.LAYOUT_HORIZONTAL,
         isEnabledKey = this.get('itemIsEnabledKey'), 
         iconKey = this.get('itemIconKey'),
-        ret = [], max = (items)? items.get('length') : 0,
-        item, title, width, value, idx, isArray, isEnabled, icon;
+        ret = this._displayItems || [], max = (items)? items.get('length') : 0,
+        item, title, width, value, idx, isEnabled, icon, sel, active;
     
     for(idx=0;idx<max;idx++) {
       item = items.objectAt(idx); 
@@ -299,44 +209,33 @@ SC.RadioView = SC.View.extend(SC.Control,
         title = value = icon = null;
         isEnabled = NO;
       }
+      
+      if (item) {
+        sel = (isArray) ? (viewValue.indexOf(value) >= 0) : (viewValue === value);
+      } else {
+        sel = NO;
+      }
 
       // localize title if needed
       if (loc) title = title.loc();
-      ret.push([title, value, isEnabled, icon, width]);
+      ret.push(SC.Object.create({
+        title: title,
+        icon: icon,
+        width: width,
+        value: value,
+        
+        isEnabled: isEnabled,
+        isSelected: (isArray && viewValue.indexOf(value) >= 0 && viewValue.length === 1) || (viewValue === value),
+        isMixed: (isArray && viewValue.indexOf(value) >= 0),
+        isActive: this._activeRadioButton === idx,
+        
+        theme: this.get('theme'),
+        renderState: {}
+      }));
     }
 
     return ret; // done!
-  }.property('items', 'itemTitleKey', 'itemWidthKey', 'itemValueKey', 'itemIsEnabledKey', 'localize', 'itemIconKey').cacheable(),
-
-  /** @private - 
-    Will figure out what class names to assign each radio button.
-    This method can be invoked either as part of render() either when:
-    1. firstTime is set and we need to assign the class names as a string
-    2. we already have the DOM rendered but we just need to update class names
-       assigned to the the input field parent
-  */
-  _getSelectionStateClassNames: function(item, sel, value, isArray, shouldReturnObject) {
-    var classNames, key;
-
-    // now set class names
-    classNames = {
-      sel: (sel && !isArray),
-      mixed: (sel && isArray),
-      disabled: (!item[2])
-    };
-
-    if (shouldReturnObject) {
-      return classNames;
-    } else {
-      // convert object values to string
-      var classNameArray = [];
-      for (key in classNames) {
-        if (!classNames.hasOwnProperty(key)) continue;
-        if (classNames[key]) classNameArray.push(key);
-      }
-      return classNameArray.join(" ");
-    }
-  },
+  }.property('value', 'items', 'itemTitleKey', 'itemWidthKey', 'itemValueKey', 'itemIsEnabledKey', 'localize', 'itemIconKey').cacheable(),
 
   /**
     If the user clicks on of the items mark it as active on mouseDown unless
@@ -347,17 +246,17 @@ SC.RadioView = SC.View.extend(SC.Control,
   */
   mouseDown: function(evt) {
     if (!this.get('isEnabled')) return YES;
-    var target = evt.target;
-    while (target) {
-      if (target.className && target.className.indexOf('sc-radio-button') > -1) break;
-      target = target.parentNode;
+    
+    var delegate = this.get('renderDelegate'), proxy = this.get('renderDelegateProxy');
+    var index = delegate.indexForEvent(proxy, this.$(), evt);
+    
+    this._activeRadioButton = index;
+    
+    if (index !== undefined) {
+      this.get('displayItems')[index].set('isActive', YES);
+      delegate.updateRadioAtIndex(proxy, this.$(), index);
     }
-    if (!target) return NO;
-
-    target = this.$(target);
-    if (target.hasClass('disabled')) return YES;
-    target.addClass('active');
-    this._activeRadioButton = target;
+    
     // even if radiobuttons are not set to get firstResponder, allow default 
     // action, that way textfields loose focus as expected.
     evt.allowDefault();
@@ -371,27 +270,23 @@ SC.RadioView = SC.View.extend(SC.Control,
   */
   mouseUp: function(evt) {
     if (!this.get('isEnabled')) return YES;
-    var active = this._activeRadioButton,
-    target = evt.target,
-    items = this.get('_displayItems'),
-    index,
-    item;
-
-    if (active) {
-      active.removeClass('active');
-      this._activeRadioButton = null;
-    } else return YES;
 
-    while (target) {
-      if (target.className && target.className.indexOf('sc-radio-button') > -1) break;
-      target = target.parentNode;
+    var delegate = this.get('renderDelegate'), proxy = this.get('renderDelegateProxy'),
+        displayItems = this.get('displayItems');
+    var index = delegate.indexForEvent(proxy, this.$(), evt);
+    
+    if (this._activeRadioButton !== undefined && index !== this._activeRadioButton) {
+      displayItems[this._activeRadioButton].set('isActive', NO);
+      delegate.updateRadioAtIndex(proxy, this.$(), this._activeRadioButton);
+    }
+    
+    this._activeRadioButton = undefined;
+    
+    if (index !== undefined) {
+      displayItems[index].set('isActive', NO);
+      delegate.updateRadioAtIndex(proxy, this.$(), index);
+      this.set('value', displayItems[index].value);
     }
-    target = this.$(target);
-    if (target[0] !== active[0] || target.hasClass('disabled')) return YES;
-
-    index = parseInt(target.attr('index'), 0);
-    item = items[index];
-    this.set('value', item[1]);
   },
 
   touchStart: function(evt) {