sproutit-sproutcore 1.0.0.20090416161445 → 1.0.0.20090720093355

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

@@ -8,55 +8,61 @@
 */
 sc_require('views/button');
 SC.PopupButtonView = SC.ButtonView.extend({
-	/**
-	  This property shows whether the menu is currently displayed or not
-	*/
-	  keyEquivalent:null,
-	  classNames:['sc-popup-button'],
-	/**
-	  Overriding the default SC.ButtonView#performKeyEquivalent method to pass 
-	  it onto the menu
+  /**
+    This property shows whether the menu is currently displayed or not
+  */
+  keyEquivalent: null,
+  classNames: ['sc-popup-button'],
     
-	  @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 false ;
-	    var menu = this.get('menu') ;
-	    return (!!menu && menu.performKeyEquivalent(charCode, evt)) ;
-	  },
-	  /**
-	    this is the Menu View associated with Popup Button
-	  */
-	  menu: null,
-
-	  // /**
-	  //       Binds the button's selection state to the menu's visibility.
-	  //       @private
-	  //     */
-	  //     isSelectedBinding: '*menu.isVisible',
-	  /**
-	    Button action handler
-	    @param {DOMMouseEvent} evt mouseup event that triggered the action
-	  */
-	  action: function( evt )
-	  {
-	    var menu = this.get('menu') ;
-	    // no menu to toggle... bail...
-	    if (!menu) return false ;
-	    if (!this._didFirstRun) {
-	    // for some reason the menu#isVisible is true the first time we get 
-	    // it... and since this#isSelected is bound to it... we get an incorrect 
-	    // conditional check. hacking it here to keep moving.
-	    menu.popup(this) ;
-	    this._didFirstRun = true ;
-	    } else {
-	      // toggle the menu...
-	      this.get('isSelected') ? menu.set('isVisible', false) : menu.popup(this,SC.PICKER_MENU) ;
-	    }
-      return true;
-	  }
-});
+  /**private */
+  acceptsFirstResponder: YES,
+  /**
+    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
+  */
+  menu : null,
+  
+  /**
+    Binds the button's selection state to the menu's visibility.
+    @private
+  */
+  isSelectedBinding: '*menu.isVisibleInWindow',
+  
+  /**private*/
+  render: function(context,firstTime) {
+    sc_super() ;
+    var menu = this.get('menu') ;
+    if(firstTime && menu) {
+      menu.createLayer() ;
+    }
+  },
+  /**
+    Button action handler
+    @param {DOMMouseEvent} evt mouseup event that triggered the action
+  */
+  action: function( evt )
+  {
+    var menu = this.get('menu') ;
+    // no menu to toggle... bail...
+    if (!menu) return NO ;
+    menu.popup(this) ;
+    return YES;
+  }
+  
+});

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

@@ -143,7 +143,7 @@ SC.ProgressView = SC.View.extend(SC.Control, {
     var isRunning = this.get('isRunning');
     var isEnabled = this.get('isEnabled');
   
-    var offset = (isIndeterminate && isRunning) ? (-16+Math.floor(Date.now()/75)%16) : 0;
+    var offset = (isIndeterminate && isRunning) ? (-24+Math.floor(Date.now()/75)%24) : 0;
   
     // compute value for setting the width of the inner progress
     var value;
@@ -196,7 +196,7 @@ SC.ProgressView = SC.View.extend(SC.Control, {
   },
   
   _createClassNameString: function(classNames) {
-    var classNameArray = [];
+    var classNameArray = [], key;
     for(key in classNames) {
       if(!classNames.hasOwnProperty(key)) continue;
       if(classNames[key]) classNameArray.push(key);

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

@@ -29,7 +29,7 @@
   @extends SC.View
   @since SproutCore 1.0
 */
-SC.SceneView = SC.View.extend(
+SC.SceneView = SC.ContainerView.extend(
   /** @scope SC.SceneView.prototype */ {
 
   /**
@@ -51,6 +51,154 @@ SC.SceneView = SC.View.extend(
     null, an empty string, or a non-existant scene, then the scene will appear
     empty.
   */
-  nowShowing: null
+  nowShowing: null,
+  
+  /**
+    Speed of transition.  Should be expressed in msec.
+  */
+  transitionDuration: 200,
+  
+  _state: 'NO_VIEW', // no view
+
+  /** @private
+  
+    Whenever called to change the content, save the nowShowing state and 
+    then animate in by adjusting the layout.
+    
+  */
+  replaceContent: function(content) {
+    if (content && this._state===this.READY) this.animateScene(content);
+    else this.replaceScene(content);
+    return this ;
+  },
+
+  /** @private
+  
+    Invoked whenever we just need to swap the scenes without playing an
+    animation.
+  */
+  replaceScene: function(newContent) {
+    var oldContent = this._targetView,
+        layout     = this.STANDARD_LAYOUT,
+        scenes     = this.get('scenes'),
+        idx        = scenes ? scenes.indexOf(this.get('nowShowing')) : -1;
+
+    // cleanup animation here too..
+    this._targetView = newContent ;
+    this._targetIndex  = idx;
+    
+    if (this._timer) this._timer.invalidate();
+    this._leftView = this._rightView = this._start = this._end = null;
+    this._timer = null;
+    
+    
+    this.removeAllChildren();
+
+    if (oldContent) oldContent.set('layout', layout);
+    if (newContent) newContent.set('layout', layout);
+    
+    if (newContent) this.appendChild(newContent);
+    this._state = newContent ? this.READY : this.NO_VIEW ;
+  },
+
+  /** @private
+  
+    Invoked whenever we need to animate in the new scene.
+  */
+  animateScene: function(newContent) {
+    var oldContent = this._targetView,
+        outIdx     = this._targetIndex,
+        scenes     = this.get('scenes'),
+        inIdx      = scenes ? scenes.indexOf(this.get('nowShowing')) : -1,
+        layout;
+
+    if (outIdx<0 || inIdx<0 || outIdx===inIdx) {
+      return this.replaceScene(newContent);
+    }
+
+    this._targetView = newContent ;
+    this._targetIndex = inIdx; 
+    
+    // save some info needed for animation
+    if (inIdx > outIdx) {
+      this._leftView  = oldContent;
+      this._rightView = newContent;
+      this._target    = -1;
+    } else {
+      this._leftView  = newContent ;
+      this._rightView = oldContent ;
+      this._target    = 1 ;
+    }
+
+    // setup views
+    this.removeAllChildren();
+
+    if (oldContent) this.appendChild(oldContent)
+    if (newContent) this.appendChild(newContent);
+
+    // setup other general state
+    this._start   = Date.now();
+    this._end     = this._start + this.get('transitionDuration');
+    this._state   = this.ANIMATING;
+    this.tick();
+  },
+
+  /** @private - called while the animation runs.  Compute the new layout for
+    the left and right views based on the portion completed.  When we finish
+    call replaceScene().
+  */
+  tick: function() {  
+    this._timer = null ; // clear out
+    
+    var now    = Date.now(),
+        pct    = (now-this._start)/(this._end-this._start),
+        target = this._target,
+        left   = this._leftView,
+        right  = this._rightView,
+        layout, adjust;
+        
+    if (pct<0) pct = 0;
+    
+    // if we're done or the view is no longer visible, just replace the 
+    // scene.
+    if (!this.get('isVisibleInWindow') || (pct>=1)) {
+      return this.replaceScene(this._targetView);
+    }
+
+    // ok, now let's compute the new layouts for the two views and set them
+    layout = SC.clone(this.get('frame'));
+    adjust = Math.floor(layout.width * pct);
+    
+    // set the layout for the views, depending on the direction
+    if (target>0) {
+      layout.left = 0-(layout.width-adjust);
+      left.set('layout', layout);
+
+      layout = SC.clone(layout);
+      layout.left = adjust ;
+      right.set('layout', layout);
+      
+    } else {
+      layout.left = 0-adjust ;
+      left.set('layout', layout);
+      
+      layout = SC.clone(layout);
+      layout.left = layout.width-adjust;
+      right.set('layout', layout);
+    }
+
+    this._timer = this.invokeLater(this.tick, 20);
+    return this;
+  },
+  
+
+  // states for view animation
+  NO_VIEW: 'NO_VIEW',
+  ANIMATING: 'ANIMATING',
+  READY: 'READY',
+
+  /** @private - standard layout assigned to views at rest */
+  STANDARD_LAYOUT: { top: 0, left: 0, bottom: 0, right: 0 }
+  
   
 });

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

@@ -6,6 +6,7 @@
 // ==========================================================================
 
 sc_require('views/scroller');
+sc_require('mixins/border');
 
 /** @class
 
@@ -22,7 +23,7 @@ sc_require('views/scroller');
   @extends SC.View
   @since SproutCore 1.0
 */
-SC.ScrollView = SC.View.extend({
+SC.ScrollView = SC.View.extend(SC.Border, {
 
   classNames: 'sc-scroll-view',
   
@@ -133,7 +134,11 @@ SC.ScrollView = SC.View.extend({
   horizontalScrollerView: SC.ScrollerView,
   
   /**
-    YES if the horizontal scroller should be visible.  You can change this property value anytime to show or hide the horizontal scroller.  If you do not want to use a horizontal scroller at all, you should instead set hasHorizontalScroller to NO to avoid creating a scroller view in the first place.
+    YES if the horizontal scroller should be visible.  You can change this 
+    property value anytime to show or hide the horizontal scroller.  If you do 
+    not want to use a horizontal scroller at all, you should instead set 
+    hasHorizontalScroller to NO to avoid creating a scroller view in the first 
+    place.
     
     @property {Boolean}
   */
@@ -203,7 +208,10 @@ SC.ScrollView = SC.View.extend({
   // 
   
   /**
-    The container view that will contain your main content view.  You can replace this property with your own custom subclass if you prefer.
+    The container view that will contain your main content view.  You can 
+    replace this property with your own custom subclass if you prefer.
+    
+    @type {SC.ContainerView}
   */
   containerView: SC.ContainerView,
   
@@ -271,7 +279,6 @@ SC.ScrollView = SC.View.extend({
     y = (y) ? this.get('verticalScrollOffset')+y : null ;
     return this.scrollTo(x,y);
   },
-
   
   /**
     Scroll the view to make the view's frame visible.  For this to make sense,
@@ -281,27 +288,37 @@ SC.ScrollView = SC.View.extend({
     @param {SC.ScrollView} receiver
   */
   scrollToVisible: function(view) {
-
     var contentView = this.get('contentView') ;
     if (!contentView) return this; // nothing to do if no contentView.
 
+    // get the viewportOffset for the view layer the convert that.  this will
+    // work even  with views using static layout.
+    var layer = view.get('layer'), vf;
+    if(!layer) return this ; // nothing to do
+    vf =  SC.viewportOffset(layer);
+    vf.width = layer.offsetWidth;
+    vf.height = layer.offsetHeight;
+    
     // convert view's frame to an offset from the contentView origin.  This
     // will become the new scroll offset after some adjustment.
-    var vf = contentView.convertFrameFromView(view.get('frame'), view);
-
+    vf = contentView.convertFrameFromView(vf, null);
+    var cf = contentView.get('frame');
+    vf.x -= cf.x;
+    vf.y -= cf.y;
+    
     // find current visible frame.
     var vo = this.get('containerView').get('frame');
     vo.x = this.get('horizontalScrollOffset');
     vo.y = this.get('verticalScrollOffset');
-
+    
     // if top edge is not visible, shift origin
     vo.y -= Math.max(0, SC.minY(vo) - SC.minY(vf)) ;
     vo.x -= Math.max(0, SC.minX(vo) - SC.minX(vf)) ;
-
+    
     // if bottom edge is not visible, shift origin
     vo.y += Math.max(0, SC.maxY(vf) - SC.maxY(vo)) ;
     vo.x += Math.max(0, SC.maxX(vf) - SC.maxX(vo)) ;
-
+    
     // scroll to that origin.
     return this.scrollTo(vo.x, vo.y) ;
   },
@@ -317,11 +334,11 @@ SC.ScrollView = SC.View.extend({
     if (lines === undefined) lines = 1 ;
     return this.scrollBy(null, this.get('verticalLineScroll')*lines) ;
   },
-
+  
   /**
     Scrolls the receiver up one or more lines if allowed.  If number of
     lines is not specified, scrolls one line.
-  
+    
     @param lines {Number} options number of lines
     @returns {SC.ScrollView} receiver
   */
@@ -329,11 +346,11 @@ SC.ScrollView = SC.View.extend({
     if (lines === undefined) lines = 1 ;
     return this.scrollBy(null, 0-this.get('verticalLineScroll')*lines) ;
   },
-
+  
   /**
     Scrolls the receiver right one or more lines if allowed.  If number of
     lines is not specified, scrolls one line.
-  
+    
     @param lines {Number} options number of lines
     @returns {SC.ScrollView} receiver
   */
@@ -341,11 +358,11 @@ SC.ScrollView = SC.View.extend({
     if (lines === undefined) lines = 1 ;
     return this.scrollTo(this.get('horizontalLineScroll')*lines, null) ;
   },
-
+  
   /**
     Scrolls the receiver left one or more lines if allowed.  If number of
     lines is not specified, scrolls one line.
-
+    
     @param lines {Number} options number of lines
     @returns {SC.ScrollView} receiver
   */
@@ -353,13 +370,13 @@ SC.ScrollView = SC.View.extend({
     if (lines === undefined) lines = 1 ;
     return this.scrollTo(0-this.get('horizontalLineScroll')*lines, null) ;
   },
-
+  
   /**
     Scrolls the receiver down one or more page if allowed.  If number of
     pages is not specified, scrolls one page.  The page size is determined by
     the verticalPageScroll value.  By default this is the size of the current
     scrollable area.
-
+    
     @param pages {Number} options number of pages
     @returns {SC.ScrollView} receiver
   */
@@ -367,13 +384,13 @@ SC.ScrollView = SC.View.extend({
     if (pages === undefined) pages = 1 ;
     return this.scrollBy(null, this.get('verticalPageScroll')*pages) ;
   },
-
+  
   /**
     Scrolls the receiver up one or more page if allowed.  If number of
     pages is not specified, scrolls one page.  The page size is determined by
     the verticalPageScroll value.  By default this is the size of the current
     scrollable area.
-
+    
     @param pages {Number} options number of pages
     @returns {SC.ScrollView} receiver
   */
@@ -381,13 +398,13 @@ SC.ScrollView = SC.View.extend({
     if (pages === undefined) pages = 1 ;
     return this.scrollBy(null, 0-(this.get('verticalPageScroll')*pages)) ;
   },
-
+  
   /**
     Scrolls the receiver right one or more page if allowed.  If number of
     pages is not specified, scrolls one page.  The page size is determined by
     the verticalPageScroll value.  By default this is the size of the current
     scrollable area.
-
+    
     @param pages {Number} options number of pages
     @returns {SC.ScrollView} receiver
   */
@@ -395,13 +412,13 @@ SC.ScrollView = SC.View.extend({
     if (pages === undefined) pages = 1 ;
     return this.scrollBy(this.get('horizontalPageScroll')*pages, null) ;
   },
-
+  
   /**
     Scrolls the receiver left one or more page if allowed.  If number of
     pages is not specified, scrolls one page.  The page size is determined by
     the verticalPageScroll value.  By default this is the size of the current
     scrollable area.
-
+    
     @param pages {Number} options number of pages
     @returns {SC.ScrollView} receiver
   */
@@ -419,11 +436,10 @@ SC.ScrollView = SC.View.extend({
     additional controls you have added to the view.
   */
   tile: function() {
-    
     // get horizontal scroller/determine if we should have a scroller
     var hscroll = this.get('hasHorizontalScroller') ? this.get('horizontalScrollerView') : null;
     var hasHorizontal = hscroll && this.get('isHorizontalScrollerVisible');
-
+    
     // get vertical scroller/determine if we should have a scroller
     var vscroll = this.get('hasVerticalScroller') ? this.get('verticalScrollerView') : null;
     var hasVertical = vscroll && this.get('isVerticalScrollerVisible');
@@ -433,8 +449,8 @@ SC.ScrollView = SC.View.extend({
     var clipLayout = { left: 0, top: 0 };
     var t ;
     
-    var ht = (hasHorizontal) ? hscroll.get('scrollerThickness') : 0;
-    var vt = (hasVertical) ?   vscroll.get('scrollerThickness') : 0;
+    var ht = (hasHorizontal) ? hscroll.get('scrollerThickness') : 0 ;
+    var vt = (hasVertical) ?   vscroll.get('scrollerThickness') : 0 ;
     
     if (hasHorizontal) {
       hscroll.set('layout', { left: 0, bottom: 0, right: vt, height: ht });
@@ -443,7 +459,7 @@ SC.ScrollView = SC.View.extend({
       clipLayout.bottom = 0 ;
     }
     if (hscroll) hscroll.set('isVisible', hasHorizontal);
-
+    
     if (hasVertical) {
       vscroll.set('layout', { top: 0, bottom: ht, right: 0, width: vt });
       clipLayout.right = vt-1;
@@ -461,12 +477,12 @@ SC.ScrollView = SC.View.extend({
   scrollerVisibilityDidChange: function() {
     this.tile();
   }.observes('isVerticalScrollerVisible', 'isHorizontalScrollerVisible'),
-    
+  
   // ..........................................................
   // SCROLL WHEEL SUPPORT
   // 
   
-  _scroll_wheelDeltaX: 0, 
+  _scroll_wheelDeltaX: 0,
   _scroll_wheelDeltaY: 0,
   
   // save adjustment and then invoke the actual scroll code later.  This will
@@ -530,29 +546,40 @@ SC.ScrollView = SC.View.extend({
     
     // set childViews array.
     this.childViews = childViews ;
-  },
-  
-  didCreateLayer: function() {
-    sc_super();
+    
     this.contentViewFrameDidChange() ; // setup initial display...
-    this.tile(); // setup initial tiling
-    window.scrollView = this ;
+    this.tile() ; // set up initial tiling
   },
   
+  // didCreateLayer: function() {
+  //   window.scrollView = this ;
+  // },
+  
   init: function() {
     sc_super();
     
     // start observing initial content view.  The content view's frame has
     // already been setup in prepareDisplay so we don't need to call 
     // viewFrameDidChange...
-    var contentView = this.get('contentView');
+    var contentView = this.get('contentView') ;
     this._scroll_contentView = contentView ;
     if (contentView) {
-      contentView.addObserver('frame', this, this.contentViewFrameDidChange);
+      contentView.addObserver('frame', this, this.contentViewFrameDidChange) ;
     }
     
+    if (this.get('isVisibleInWindow')) this._scsv_registerAutoscroll();
   },
   
+  /**
+    @private
+    
+    Registers/deregisters view with SC.Drag for autoscrolling
+  */
+  _scsv_registerAutoscroll: function() {
+    if (this.get('isVisibleInWindow')) SC.Drag.addScrollableView(this);
+    else SC.Drag.removeScrollableView(this);
+  }.observes('isVisibleInWindow'),
+  
   /** @private
     Whenever the contentView is changed, we need to observe the content view's
     frame to be notified whenever it's size changes.
@@ -564,7 +591,7 @@ SC.ScrollView = SC.View.extend({
       
       // stop observing old content view
       if (oldView) oldView.removeObserver('frame', this, f);
-
+      
       // update cache
       this._scroll_contentView = newView;
       if (newView) newView.addObserver('frame', this, f);
@@ -576,16 +603,19 @@ SC.ScrollView = SC.View.extend({
     }
   },
   
-  /** @private 
+  /** @private
     Invoked whenever the contentView's frame changes.  This will update the 
     scroller maxmimum and optionally update the scroller visibility if the
     size of the contentView changes.  We don't care about the origin since
     that is tracked separately from the offset values.
   */
   contentViewFrameDidChange: function() {
-    var view = this.get('contentView'), f = (view) ? view.get('frame'):null;
-    var width = (f) ? f.width : 0,  height = (f) ? f.height : 0 ;
-
+    var view   = this.get('contentView'), 
+        f      = (view) ? view.get('frame') : null,
+        width  = (f) ? f.width : 0,  
+        height = (f) ? f.height : 0,
+        dim    = this.get('frame') ;
+    
     // cache out scroll settings...
     if ((width === this._scroll_contentWidth) && (height === this._scroll_contentHeight)) return ;
     this._scroll_contentWidth = width;
@@ -598,16 +628,28 @@ SC.ScrollView = SC.View.extend({
     // visibleHeight = this.frame.height - horizontalScroller if visible
     
     if (this.get('hasHorizontalScroller') && (view = this.get('horizontalScrollerView'))) {
+      
+      // decide if it should be visible or not
+      if (this.get('autohidesHorizontalScroller')) {
+        this.set('isHorizontalScrollerVisible', width > dim.width);
+      }
       view.set('maximum', width) ;
     }
-
+    
     if (this.get('hasVerticalScroller') && (view = this.get('verticalScrollerView'))) {
+      
+      
+      // decide if it should be visible or not
+      if (this.get('autohidesVerticalScroller')) {
+        this.set('isVerticalScrollerVisible', height > dim.height);
+      }
+      
       view.set('maximum', height) ;
     }
     
   },
   
-  /** 
+  /**
     Whenever the horizontal scroll offset changes, update the scrollers and 
     edit the location of the contentView.
   */
@@ -625,8 +667,8 @@ SC.ScrollView = SC.View.extend({
     }
     
   }.observes('horizontalScrollOffset'),
-
-  /** 
+  
+  /**
     Whenever the vertical scroll offset changes, update the scrollers and 
     edit the location of the contentView.
   */
@@ -644,5 +686,5 @@ SC.ScrollView = SC.View.extend({
     }
     
   }.observes('verticalScrollOffset')
-
-}) ;
+  
+});