sproutcore 1.10.3.1 → 1.11.0.rc1

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

@@ -0,0 +1,206 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+sc_require('views/scroller');
+
+/** @class
+
+  Implements a complete scroller view for menus.  This class implements the
+  arrows displayed in a menu to scroll.
+
+  The main difference with SC.ScrollerView is that there is only vertical
+  scrollers. Value Syncing between SC.MenuScrollView and SC.MenuScrollerView
+  is done using valueBinding.
+
+  @extends SC.ScrollerView
+  @since SproutCore 1.0
+*/
+SC.MenuScrollerView = SC.ScrollerView.extend(
+/** @scope SC.MenuScrollerView.prototype */ {
+
+  // ---------------------------------------------------------------------------------------------
+  // Properties
+  //
+
+  /**
+    @type Array
+    @default ['sc-menu-scroller-view']
+    @see SC.View#classNames
+  */
+  classNames: ['sc-menu-scroller-view'],
+
+  /**
+    Used to set the scrolling direction of the scroller.
+
+    @type Boolean
+    @default false
+  */
+  scrollDown: false,
+
+  /**
+     Amount to scroll one vertical line.
+
+     @type Number
+     @default 20
+  */
+  verticalLineScroll: 20,
+
+
+  // ..........................................................
+  // INTERNAL SUPPORT
+  //
+
+  /** @private */
+  init: function () {
+    // Set the scrollerThickness based on controlSize
+    switch (this.get('controlSize')) {
+    case SC.TINY_CONTROL_SIZE:
+      this.set('scrollerThickness', SC.MenuScrollerView.TINY_SCROLLER_THICKNESS);
+      break;
+    case SC.SMALL_CONTROL_SIZE:
+      this.set('scrollerThickness', SC.MenuScrollerView.SMALL_SCROLLER_THICKNESS);
+      break;
+    case SC.REGULAR_CONTROL_SIZE:
+      this.set('scrollerThickness', SC.MenuScrollerView.REGULAR_SCROLLER_THICKNESS);
+      break;
+    case SC.LARGE_CONTROL_SIZE:
+      this.set('scrollerThickness', SC.MenuScrollerView.LARGE_SCROLLER_THICKNESS);
+      break;
+    case SC.HUGE_CONTROL_SIZE:
+      this.set('scrollerThickness', SC.MenuScrollerView.HUGE_SCROLLER_THICKNESS);
+      break;
+    }
+
+    return sc_super();
+  },
+
+  /** @private */
+  render: function (context, firstTime) {
+    context.addClass('sc-vertical');
+    context.addClass(this.get('controlSize'));
+    if (firstTime) {
+      var direction = this.get('scrollDown') ? 'arrowDown' : 'arrowUp';
+      context.push('<span class="scrollArrow ' + direction + '">&nbsp;</span>');
+    }
+  },
+
+  /** @private */
+  willDestroyLayer: function () {
+    var callback = this._sc_scroller_scrollDidChange;
+    SC.Event.remove(this.$(), 'scroll', this, callback);
+  },
+
+  /** @private */
+  mouseEntered: function (evt) {
+    this.set('isMouseOver', YES);
+    this._invokeScrollOnMouseOver();
+  },
+
+  /** @private */
+  mouseExited: function (evt) {
+    this.set('isMouseOver', NO);
+  },
+
+  /** @private */
+  _sc_scroller_armScrollTimer: function () {
+    if (!this._sc_scrollTimer) {
+      SC.run(function () {
+        var method = this._sc_scroller_scrollDidChange;
+        this._sc_scrollTimer = this.invokeLater(method, 50);
+      });
+    }
+  },
+
+  /** @private */
+  _sc_scroller_scrollDidChange: function () {
+    var now = Date.now(),
+        last = this._sc_lastScroll,
+        layer = this.get('layer'),
+        scroll = 0;
+
+    if (last && (now - last) < 50) return this._sc_scroller_armScrollTimer();
+    this._sc_scrollTimer = null;
+    this._sc_lastScroll = now;
+
+    SC.run(function () {
+      if (!this.get('isEnabledInPane')) return; // nothing to do.
+
+      this._sc_scrollValue = scroll = layer.scrollTop;
+      this.set('value', scroll); // will now enforce minimum and maximum
+    });
+  },
+
+
+  /** @private
+    Scroll the menu if it is is an up or down arrow. This is called by
+    the function that simulates mouseOver.
+  */
+  _scrollMenu: function () {
+    var value = this.get('value');
+
+    if (this.get('scrollDown')) {
+      value = value + this.verticalLineScroll;
+      value = Math.min(value, this.get('maximum'));
+    } else {
+      value = value - this.verticalLineScroll;
+      value = Math.max(value, this.get('minimum'));
+    }
+
+    this.set('value', value);
+
+    return YES;
+  },
+
+  /** @private
+
+    We use this function to simulate mouseOver. It checks for the flag
+    isMouseOver which is turned on when mouseEntered is called and turned off
+    when mouseExited is called.
+  */
+  _invokeScrollOnMouseOver: function () {
+    this._scrollMenu();
+    if (this.get('isMouseOver')) {
+      this.invokeLater(this._invokeScrollOnMouseOver, 50);
+    }
+  }
+
+});
+
+
+/**
+  @static
+  @type Number
+  @default 18
+*/
+SC.MenuScrollerView.REGULAR_SCROLLER_THICKNESS = 18;
+
+/**
+  @static
+  @type Number
+  @default 10
+*/
+SC.MenuScrollerView.TINY_SCROLLER_THICKNESS    = 10;
+
+/**
+  @static
+  @type Number
+  @default 14
+*/
+SC.MenuScrollerView.SMALL_SCROLLER_THICKNESS   = 14;
+
+/**
+  @static
+  @type Number
+  @default 23
+*/
+SC.MenuScrollerView.LARGE_SCROLLER_THICKNESS   = 23;
+
+/**
+  @static
+  @type Number
+  @default 26
+*/
+SC.MenuScrollerView.HUGE_SCROLLER_THICKNESS    = 26;

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

@@ -181,6 +181,9 @@ SC.PopupButtonView = SC.ButtonView.extend(
     @returns {Boolean}
   */
   mouseDown: function(evt) {
+    // Fast path, reject secondary clicks.
+    if (evt.which && evt.which !== 1) return false;
+
     // If disabled, handle mouse down but ignore it.
     if (!this.get('isEnabledInPane')) return YES ;
 

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

@@ -83,14 +83,15 @@ SC.ProgressView = SC.View.extend(SC.Control,
     var minimum = this.get('minimum') || 0.0,
         maximum = this.get('maximum') || 1.0,
         value = this.get('value') || 0.0;
+
+    // Percent value.
     value = (value - minimum) / (maximum - minimum);
-    if (value > 1.0) value = 1.0;
 
-    if(isNaN(value)) value = 0.0;
+    if (isNaN(value)) value = 0.0;
     // cannot be smaller then minimum
-    if(value<minimum) value = 0.0;
+    if (value < 0.0) value = 0.0;
     // cannot be larger then maximum
-    if(value>maximum) value = 1.0;
+    if (value > 1.0) value = 1.0;
 
     return value;
   }.property('value', 'maximum', 'minimum').cacheable(),

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

@@ -347,6 +347,9 @@ SC.RadioView = SC.View.extend(SC.Control,
     mouseUp.
   */
   mouseDown: function(evt) {
+    // Fast path, reject secondary clicks.
+    if (evt.which && evt.which !== 1) return false;
+
     if (!this.get('isEnabledInPane')) return YES;
 
     var delegate = this.get('renderDelegate'), proxy = this.get('renderDelegateProxy'),

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

@@ -7,201 +7,99 @@
 
 /** @class
 
-  This view was significantly more limited than what can be achieved
-  using the new transition plugins in SproutCore 1.10.  Please use the
-  `transition` property in SC.ContainerView for animating between
-  views.
+  Displays several views as scenes that can slide on and off the screen.  The
+  scene view is a nice way to provide a simple effect of moving from a
+  higher level screen to a more detailed level screen.  You will be able to
+  optionally choose the kind of animation used to transition the two scenes
+  as well if supported on the web browser.
+
+  # Using SC.SceneView
+
+  To setup the scene view, you should define the 'scenes' property with an
+  array of scene names.  These will be the properties on the scene view that
+  you can shift in an out of view as needed.  You can edit the scenes property
+  at any time.  It will only be used when you start to transition from one
+  scene to another.
+
+  Next you should set your nowShowing property to the name of the scene you
+  would like to display.  This will cause the view to transition scenes if it
+  is visible on screen.  Otherwise, it will simply make the new scene view
+  the current content view and that's it.
 
   @extends SC.ContainerView
-  @deprecated Version 1.10
-  @see SC.ContainerView#transition
   @since Version 1.0
 */
 SC.SceneView = SC.ContainerView.extend(
 /** @scope SC.SceneView.prototype */ {
 
-  //@if(debug)
-  init: function () {
-    sc_super();
-
-    SC.warn("Developer Warning: SC.SceneView has been deprecated.  Please use the transition property of SC.ContainerView for animated view swapping.");
-  },
-  //@endif
-
   /**
     Array of scene names.  Scenes will slide on and off screen in the order
     that you specify them here.  That is, if you shift from a scene at index
-    2 to a scene at index 1, the scenes will animation backwards.  If you
+    2 to a scene at index 1, the scenes will animate backwards.  If you
     shift to a scene at index 3, the scenes will animate forwards.
 
     @type Array
-    @default ['master', 'detail']
+    @default null
   */
-  scenes: ['master', 'detail'],
+  scenes: null,
 
   /**
-    The currently showing scene.  Changing this property will cause the
-    scene view to transition to the new scene.  If you set this property to
-    null, an empty string, or a non-existent scene, then the scene will appear
-    empty.
+    The transitionSwap plugin to use when animating backwards.
 
-    @type String
+    @type Object (SC.SwapTransitionProtocol)
     @default null
+    @see SC.ContainerView#transitionSwap
   */
-  nowShowing: null,
+  transitionBackward: SC.ContainerView.PUSH,
 
   /**
-    Speed of transition.  Should be expressed in msec.
+    The options for the given transitionSwap plugin when animating backwards.
 
-    @type Number
-    @default 200
+    @type Object
+    @default { duration: .25, direction: 'right' }
+    @see SC.ContainerView#transitionBackwardOptions
   */
-  transitionDuration: 200,
-
-  /** @private */
-  _state: 'NO_VIEW', // no view
+  transitionBackwardOptions: { duration: .25, direction: 'right' },
 
-  /** @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 ;
-  },
+  /**
+    The transitionSwap plugin to use when animating forwards.
 
-  /** @private
-    Invoked whenever we just need to swap the scenes without playing an
-    animation.
+    @type Object (SC.SwapTransitionProtocol)
+    @default null
+    @see SC.ContainerView#transitionSwap
   */
-  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;
+  transitionForward: SC.ContainerView.PUSH,
 
+  /**
+    The options for the given transitionSwap plugin when animating forwards.
 
-    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.
+    @type Object
+    @default { duration: .25, direction: 'left' }
+    @see SC.ContainerView#transitionBackwardOptions
   */
-  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();
-  },
+  transitionForwardOptions: { duration: .25, direction: 'left' },
 
   /** @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().
+    @param {SC.View} newContent the new content view or null.
+    @see SC.ContainerView#replaceContent
   */
-  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);
-    }
+  replaceContent: function(newContent) {
+    var scenes = this.get('scenes'),
+      nowShowing = this.get('nowShowing'),
+      outIdx = scenes ? scenes.indexOf(this._lastNowShowingView) : -1,
+      inIdx = scenes ? scenes.indexOf(nowShowing) : -1;
 
-    // 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);
+    this._lastNowShowingView = nowShowing;
 
+    if (outIdx < inIdx) {
+      this.transitionSwap = this.transitionForward;
+      this.transitionSwapOptions = this.transitionForwardOptions;
     } else {
-      layout.left = 0-adjust ;
-      left.set('layout', layout);
-
-      layout = SC.clone(layout);
-      layout.left = layout.width-adjust;
-      right.set('layout', layout);
+      this.transitionSwap = this.transitionBackward;
+      this.transitionSwapOptions = this.transitionBackwardOptions;
     }
 
-    this._timer = this.invokeLater(this.tick, 20);
-    return this;
+    sc_super();
   },
 
-
-  /** @private */
-  NO_VIEW: 'NO_VIEW',
-
-  /** @private */
-  ANIMATING: 'ANIMATING',
-
-  /** @private */
-  READY: 'READY',
-
-  /** @private
-    Standard layout assigned to views at rest
-  */
-  STANDARD_LAYOUT: { top: 0, left: 0, bottom: 0, right: 0 }
-
 });