sproutcore 1.0.1046 → 1.0.1049.pre.1

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

@@ -0,0 +1,181 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, 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/frameworks/sproutcore/frameworks/desktop/views/popup_button.js

@@ -1,84 +1,202 @@
+sc_require('views/button');
+
 /**
-  @class
+  Describes the time after which "click and hold" behavior will replace the
+  standard "click and release" behavior.
+*/
+
+
+/** @class
+
+  SC.PopupButtonView displays a pop-up menu when clicked, from which the user
+  can select an item.
+
+  To use, create the SC.PopupButtonView as you would a standard SC.ButtonView,
+  then set the menu property to an instance of SC.MenuPane. For example:
+
+{{{
+SC.PopupButtonView.design({
+  layout: { width: 200, height: 18 },
+  menuBinding: 'MyApp.menuController.menuPane'
+});
+}}}
+
+  You would then have your MyApp.menuController return an instance of the menu
+  to display.
 
   @extends SC.ButtonView
   @author Santosh Shanbhogue
-  @copyright 2008-2009, Sprout Systems, Inc. and contributors.
+  @author Tom Dale
+  @copyright 2008-2010, Sprout Systems, Inc. and contributors.
   @version 1.0
 */
-sc_require('views/button');
-SC.PopupButtonView = SC.ButtonView.extend({
-  /**
-    This property shows whether the menu is currently displayed or not
-  */
-  keyEquivalent: null,
+SC.PopupButtonView = SC.ButtonView.extend(
+/** @scope SC.PopupButtonView.prototype */ {
   classNames: ['sc-popup-button'],
-  
+
+  // ..........................................................
+  // PROPERTIES
+  //
+
   /**
-    Prefer matrix to pass the offsets to position the pane popped up by this 
-    button.
-    
+    The prefer matrix to use when displaying the menu.
+
     @property
   */
   preferMatrix: null,
-    
-  /**private */
-  acceptsFirstResponder: function() {
-    if(!SC.SAFARI_FOCUS_BEHAVIOR) return this.get('isEnabled');
-    else return NO;
-  }.property('isEnabled'),
-  /**
-    Overriding the default SC.ButtonView#performKeyEquivalent method to pass 
-    it onto the menu
-    
-    @param {string} keystring method name corresponding to the keys pressed 
-    (i.e alt_shift_z)
-    @param {DOMMouseEvent} evt mousedown event
-  */
-  isSelected: NO,
-  performKeyEquivalent: function( charCode, evt )
-  {
-    if (!this.get('isEnabled')) return NO ;
-    var menu = this.get('menu') ;
-    return (!!menu && menu.performKeyEquivalent(charCode, evt)) ;
-  },
-  
+
   /**
-    Menu attached to the popupButton
-    @default SC.MenuView
+    The SC.MenuPane that should be displayed when the button is clicked.
+
+    @type {SC.MenuPane}
+    @default null
   */
-  menu : null,
-  
-  /**
+  menu: null,
+
+  // ..........................................................
+  // INTERNAL SUPPORT
+  //
+
+  /** @private
     Binds the button's selection state to the menu's visibility.
-    @private
   */
-  isSelectedBinding: '*menu.isVisibleInWindow',
-  
-  /**
-    Button action handler
-    @param {DOMMouseEvent} evt mouseup event that triggered the action
+  isActiveBinding: '*menu.isVisibleInWindow',
+
+  /** @private
+    Displays the menu.
+
+    @param {SC.Event} evt
   */
-  action: function( evt )
+  action: function(evt)
   {
     var menu = this.get('menu') ;
-    // no menu to toggle... bail...
-    if (!menu) return NO ;
-    menu.popup(this, this.preferMatrix) ;
+
+    if (!menu) {
+      //@ if (debug)
+      SC.Logger.warn("SC.PopupButton - Unable to show menu because the menu property is set to %@.".fmt(menu));
+      //@ endif
+      return NO ;
+    }
+
+    menu.popup(this, this.get('preferMatrix')) ;
     return YES;
   },
-  
-  /**
-    @private
 
-    Holding down the button should display the menu pane.
+  /** @private
+    On mouse down, we set the state of the button, save some state for further
+    processing, then call the button's action method.
+
+    @param {SC.Event} evt
+    @returns {Boolean}
   */
   mouseDown: function(evt) {
-    if (!this.get('isEnabled')) return YES ; // handled event, but do nothing
-    this.set('isActive', YES);
+    // If disabled, handle mouse down but ignore it.
+    if (!this.get('isEnabled')) return YES ;
+
     this._isMouseDown = YES;
+
     this._action() ;
+
+    // Store the current timestamp. We register the timestamp at the end of
+    // the runloop so that the menu has been rendered, in case that operation
+    // takes more than a few hundred milliseconds.
+
+    // One mouseUp, we'll use this value to determine how long the mouse was
+    // pressed.
+    this.invokeLast(this._recordMouseDownTimestamp);
+
     return YES ;
-  }
-  
+  },
+
+  /** @private
+    Records the current timestamp. This is invoked at the end of the runloop
+    by mouseDown. We use this value to determine the delay between mouseDown
+    and mouseUp.
+  */
+  _recordMouseDownTimestamp: function() {
+    this._menuRenderedTimestamp = new Date().getTime();
+  },
+
+  /** @private
+    Because we responded YES to the mouseDown event, we have responsibility
+    for handling the corresponding mouseUp event.
+
+    However, the user may click on this button, then drag the mouse down to a
+    menu item, and release the mouse over the menu item. We therefore need to
+    delegate any mouseUp events to the menu's menu item, if one is selected.
+
+    We also need to differentiate between a single click and a click and hold.
+    If the user clicks and holds, we want to close the menu when they release.
+    Otherwise, we should wait until they click on the menu's modal pane before
+    removing our active state.
+
+    @param {SC.Event} evt
+    @returns {Boolean}
+  */
+  mouseUp: function(evt) {
+    var timestamp = new Date().getTime(),
+        previousTimestamp = this._menuRenderedTimestamp,
+        menu = this.get('menu'),
+        touch = SC.platform.touch,
+        targetMenuItem;
+
+    if (menu) {
+      // Get the menu item the user is currently hovering their mouse over
+      targetMenuItem = menu.getPath('rootMenu.targetMenuItem');
+
+      if (targetMenuItem) {
+        // Have the menu item perform its action.
+        // If the menu returns NO, it had no action to
+        // perform, so we should close the menu immediately.
+        if (!targetMenuItem.performAction()) menu.remove();
+      } else {
+        // If the user waits more than certain amount of time between
+        // mouseDown and mouseUp, we can assume that they are clicking and
+        // dragging to the menu item, and we should close the menu if they
+        //mouseup anywhere not inside the menu.
+        if (!touch && (timestamp - previousTimestamp > SC.ButtonView.CLICK_AND_HOLD_DELAY)) {
+          menu.remove();
+        }
+      }
+    }
+
+    // Reset state.
+    this._isMouseDown = NO;
+    sc_super();
+    return YES;
+  },
+
+  /** @private
+    Overrides ButtonView's mouseExited method to remove the behavior where the
+    active state is removed on mouse exit. We want the button to remain active
+    as long as the menu is visible.
+
+    @param {SC.Event} evt
+    @returns {Boolean}
+  */
+  mouseExited: function(evt) {
+    return YES;
+  },
+
+  /** @private
+    Overrides performKeyEquivalent method to pass any keyboard shortcuts to
+    the menu.
+
+    @param {String} charCode string corresponding to shortcut pressed (e.g.,
+    alt_shift_z)
+    @param {SC.Event} evt
+  */
+  performKeyEquivalent: function( charCode, evt )
+  {
+    if (!this.get('isEnabled')) return NO ;
+    var menu = this.get('menu') ;
+    return (!!menu && menu.performKeyEquivalent(charCode, evt)) ;
+  },
+
+  /** @private */
+  acceptsFirstResponder: function() {
+    if(!SC.SAFARI_FOCUS_BEHAVIOR) return this.get('isEnabled');
+    else return NO;
+  }.property('isEnabled')
+
 });

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

@@ -2,7 +2,7 @@
 // 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)
 // ==========================================================================
 
 /**
@@ -148,7 +148,7 @@ SC.ProgressView = SC.View.extend(SC.Control, {
     if (delay===0) delay = 1000/30;
     if (this.get('isRunning') && this.get('isVisibleInWindow')) {
       this.displayDidChange();
-      this.invokeLater(this._animateProgressBar, delay, 10);
+      this.invokeLater(this._animateProgressBar, delay, 600);
     }
   },
   
@@ -169,18 +169,7 @@ SC.ProgressView = SC.View.extend(SC.Control, {
     } else if (isIndeterminate) {
       value = "120%";
     } else {
-      var minimum = this.get('minimum') || 0.0;
-      var maximum = this.get('maximum') || 1.0;
-      value = this.get('value') || 0.0;
-      value = (value - minimum) / (maximum - minimum);
-      if (value > 1.0) value = 1.0;
-
-      if(isNaN(value)) value = 0.0;
-      // cannot be smaller then minimum
-      if(value<minimum) value = 0.0;
-      // cannot be larger then maximum
-      if(value>maximum) value = 1.0;
-      value = (value * 100) + "%";
+      value = (this.get("_percentageNumeric") * 100) + "%";
     }
 
     var classNames = {
@@ -191,26 +180,30 @@ SC.ProgressView = SC.View.extend(SC.Control, {
     
     if(firstTime) {
       var classString = this._createClassNameString(classNames);
-      context.push('<div class="sc-inner ', classString, '" style="width: ', value, ';left: ', offset, '">');
-      context.push('<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>');
+      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+"; ";
+      cssString = cssString + "left: "+offset+"px; ";
       if (animatedBackground.length === 3 ) {
-        backPosition = '0px -'+ 
-                      (animatedBackground[0] + 
-                      animatedBackground[1]*this._currentBackground)+'px';
+        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+"; ";
+        cssString = cssString + "backgroundPosition: "+backPosition+"px; ";
         //Instead of using css() set attr for faster perf.
         inner.attr('style', cssString);
       }else{
@@ -230,6 +223,21 @@ SC.ProgressView = SC.View.extend(SC.Control, {
     .endPropertyChanges();
   },
   
+  _percentageNumeric: function(){
+    var minimum = this.get('minimum') || 0.0,
+        maximum = this.get('maximum') || 1.0,
+        value = this.get('value') || 0.0;
+    value = (value - minimum) / (maximum - minimum);
+    if (value > 1.0) value = 1.0;
+
+    if(isNaN(value)) value = 0.0;
+    // cannot be smaller then minimum
+    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) {