sproutcore 1.6.0.1 → 1.7.1.beta

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/menu/views/menu/scroll.js

@@ -0,0 +1,363 @@
+// ==========================================================================
+// 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/menu/scroller');
+
+/** @class
+
+  Implements a scroll view for menus.  This class extends SC.ScrollView for
+  menus.
+
+  The main difference with SC.ScrollView is that there is only vertical
+  scrolling. Value Syncing between SC.MenuScrollView and SC.MenuScrollerView
+  is done using valueBinding.
+
+  @extends SC.ScrollView
+  @since SproutCore 1.6
+ */
+SC.MenuScrollView = SC.ScrollView.extend(
+  /** @scope SC.MenuScrollView.prototype */{
+
+  /**
+    @type Array
+    @default ['sc-menu-scroll-view']
+    @see SC.View#classNames
+   */
+  classNames: ['sc-menu-scroll-view'],
+
+  // ..........................................................
+  // PROPERTIES
+  //
+
+  /**
+    The maximum horizontal scroll offset allowed given the current
+    contentView size and the size of the scroll view.
+
+    @type Number
+    @default 0
+   */
+  maximumHorizontalScrollOffset: 0,
+
+
+  // ..........................................................
+  // SCROLLERS
+  //
+
+  /**
+    @type Boolean
+    @default NO
+   */
+  hasHorizontalScroller: NO,
+
+  /**
+    @type Boolean
+    @default NO
+   */
+  isHorizontalScrollerVisible: NO,
+
+  /**
+    @type Boolean
+    @default NO
+   */
+  canScrollHorizontal: NO,
+
+  /**
+    @type Boolean
+    @default NO
+   */
+  autohidesHorizontalScroller: NO,
+
+  /**
+    YES if the view shuld maintain a vertical scroller.
+    This property must be set when the view is created.
+
+    @type Boolean
+    @default YES
+   */
+  hasVerticalScroller: YES,
+
+  /**
+    The vertical scroller view class. This will be replaced with a view
+    instance when the ScrollView is created unless hasVerticalScroller is NO.
+
+    @type SC.View
+    @default SC.MenuScrollerView
+   */
+  verticalScrollerView: SC.MenuScrollerView,
+  verticalScrollerView2: SC.MenuScrollerView,
+
+  /**
+    YES if the vertical scroller should be visible.  For SC.MenuScroll the
+    vertical scroller is always there we just hide the arrows to scroll.
+
+    @type Boolean
+    @default YES
+   */
+  isVerticalScrollerVisible: YES,
+
+  /**
+    @type Boolean
+    @default YES
+   */
+  canScrollVertical: YES,
+
+  /**
+    If YES, the vertical scroller will autohide if the contentView is
+    smaller than the visible area.  You must set `autohidesVerticalScroller`
+    or `hasVerticalScroller` to YES for this property to have any effect.
+
+    @type Boolean
+    @default YES
+   */
+  autohidesVerticalScrollers: YES,
+
+  /**
+    If YES, the vertical scroller will autohide (and show) both scrollers if the
+    contentView is smaller than the visible area.
+
+    @type Boolean
+    @default YES
+   */
+  autohidesVerticalScroller: YES,
+
+  /**
+    Use this property to set the 'bottom' offset of your vertical scroller,
+    to make room for a thumb view or other accessory view. Default is 0.
+
+    @type Number
+    @default 0
+   */
+  verticalScrollerBottom: 0,
+
+  /**
+    Control Size for Menu content: change verticalLineScroll
+
+    @type String
+    @default SC.REGULAR_CONTROL_SIZE
+   */
+  controlSize: SC.REGULAR_CONTROL_SIZE,
+
+  /**
+    Wants scroll notifications all the time.
+    @type Number
+    @default 0
+   */
+  incrementalRenderingDelta: 0,
+
+  // ..........................................................
+  // METHODS
+  //
+
+  _scmsv_lastVerticalScrollOffset: 0,
+
+  /** @private
+    Does internal adjustments to the scroll offset to account for the
+    scrollers appearing / disappearing.
+   */
+  _scmsv_verticalScrollOffsetDidChange: function () {
+    var vOffset = this._scmsv_lastVerticalScrollOffset,
+        offset = this.get('verticalScrollOffset'),
+        topThickness = this.getPath('verticalScrollerView.scrollerThickness');
+
+    if (vOffset !== offset && this.get('autohidesVerticalScrollers')) {
+      // When the top scroller appears...
+      if (vOffset === 0 && offset > 0) {
+        offset += topThickness;
+
+      // When the top scroller disappears...
+      } else if (vOffset > 0 && offset - topThickness <= 0) {
+        offset = 0;
+      }
+
+      this.set('verticalScrollOffset', offset);
+      this._scmsv_lastVerticalScrollOffset = offset;
+    }
+  }.observes('verticalScrollOffset'),
+
+  /** @private
+    Adjusts the layout for the various internal views.  This method is called
+    once when the scroll view is first configured and then anytime a scroller
+    is shown or hidden.  You can call this method yourself as well to retile.
+
+    You may also want to override this method to handle layout for any
+    additional controls you have added to the view.
+   */
+  tile: function () {
+    var vScroller, layout = { left: 0, top: 0, bottom: 0 },
+        hasScroller = this.get('hasVerticalScroller'),
+        isVisible = this.get('isVerticalScrollerVisible'),
+        vOffset = this.get('verticalScrollOffset'),
+        maxOffset = this.get('maximumVerticalScrollOffset'),
+        scrollerThickness, vScrollerIsVisible,
+        cView = this.get('contentView'),
+        cFrame = cView.get('frame'),
+        view = this.get('containerView'),
+        frame = view.get('frame');
+
+    this.set('canScrollVertical',
+             (cView.get('calculatedHeight') || cFrame.height || 0) * this._scale > this.get('frame').height);
+
+    // Fast path when the scrollers shouldn't be automatically hidden.
+    if (hasScroller && !this.get('autohidesVerticalScrollers')) {
+      vScroller = this.get('verticalScrollerView');
+      vScrollerIsVisible = vScroller && isVisible;
+      vScroller.set('isVisible', vScrollerIsVisible);
+      if (vScrollerIsVisible) {
+        layout.top = vScroller.get('scrollerThickness');
+        vScroller.set('layout', { height: layout.top, top: 0, right: 0, left: 0 });
+      }
+
+      vScroller = this.get('verticalScrollerView2');
+      vScrollerIsVisible = vScroller && isVisible;
+      vScroller.set('isVisible', vScrollerIsVisible);
+      if (vScrollerIsVisible) {
+        layout.bottom = vScroller.get('scrollerThickness');
+        vScroller.set('layout', { height: layout.bottom, bottom: 0, right: 0, left: 0 });
+      }
+
+    // Automatically hide scrollers.
+    } else {
+
+      // Top scrollbar calculations.
+      vScroller = hasScroller ? this.get('verticalScrollerView') : null;
+      vScrollerIsVisible = vScroller && isVisible;
+      if (vScrollerIsVisible) {
+        scrollerThickness = vScroller.get('scrollerThickness');
+        layout.top = (vOffset === 0) ? 0 : scrollerThickness; // Scrolled; show the scrollbar.
+        vScroller.set('layout', { height: layout.top, top: 0, right: 0, left: 0 });
+      }
+      vScroller.set('isVisible', vScrollerIsVisible && layout.top !== 0);
+
+      // Bottom scrollbar calculations
+      vScroller = hasScroller ? this.get('verticalScrollerView2') : null;
+      vScrollerIsVisible = vScroller && isVisible;
+      if (vScroller && isVisible) {
+        scrollerThickness = vScroller.get('scrollerThickness');
+
+        // Adjust for visible scrollers.
+        var padding = 0;
+        if (layout.top === 0 || view.getPath('layout.top') > 0) {
+          padding = view.getPath('layout.bottom') || 0;
+          padding = SC.none(padding) ? scrollerThickness : padding;
+        }
+
+        layout.bottom = cFrame && (vOffset < (cFrame.height - frame.height - padding)) ?
+          scrollerThickness : 0;
+        vScroller.set('layout', { height: layout.bottom, bottom: 0, right: 0, left: 0 });
+      }
+      vScroller.set('isVisible', vScrollerIsVisible && layout.bottom !== 0);
+    }
+
+    view.adjust(layout);
+  },
+
+  /** @private
+    Called whenever a scroller visibility changes.  Calls the tile() method.
+   */
+  scrollerVisibilityDidChange: function () {
+    this.tile();
+  }.observes('isVerticalScrollerVisible', 'verticalScrollOffset'),
+
+
+  // ..........................................................
+  // INTERNAL SUPPORT
+  //
+
+  /** @private
+    Instantiate scrollers & container views as needed.
+    Replace their classes in the regular properties.
+   */
+  createChildViews: function () {
+    var childViews = [], view, view2, controlSize = this.get('controlSize');
+
+    // create the containerView.  We must always have a container view.
+    // also, setup the contentView as the child of the containerView...
+    if (SC.none(view = this.containerView)) view = SC.ContainerView;
+
+    childViews.push(this.containerView = this.createChildView(view, {
+      contentView: this.contentView,
+      isScrollContainer: YES
+    }));
+
+    // and replace our own contentView...
+    this.contentView = this.containerView.get('contentView');
+
+    // create a vertical scroller
+    if ((view=this.verticalScrollerView) && (view2=this.verticalScrollerView2)) {
+      if (this.get('hasVerticalScroller')) {
+        view = this.verticalScrollerView = this.createChildView(view, {
+          layout: { top: 0, left: 0, right: 0 },
+          controlSize: controlSize,
+          valueBinding: '*owner.verticalScrollOffset'
+        });
+        childViews.push(view);
+        view2 = this.verticalScrollerView2 = this.createChildView(view2, {
+          scrollDown: YES,
+          layout: { bottom: 0, left: 0, right: 0 },
+          controlSize: controlSize,
+          valueBinding: '*owner.verticalScrollOffset'
+        });
+        childViews.push(view2);
+      } else {
+        this.verticalScrollerView = null;
+        this.verticalScrollerView2 = null;
+      }
+    }
+
+    // set childViews array.
+    this.childViews = childViews;
+
+    this.contentViewFrameDidChange(); // setup initial display...
+    this.tile(); // set up initial tiling
+  },
+
+  /** @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 (force) {
+    var view   = this.get('contentView'), view2,
+        f      = (view) ? view.get('frame') : null,
+        scale  = this._scale, height,
+        dim    = this.get('frame'),
+        viewportHeight, elem;
+
+    // If no view has been set yet, or it doesn't have a frame,
+    // we can avoid doing any work.
+    if (!view || !f) { return; }
+
+    height = view.get('calculatedHeight') || f.height || 0;
+    height *= scale;
+
+    // cache out scroll settings...
+    if (!force && height === this._scroll_contentHeight) return;
+    this._scroll_contentHeight = height;
+
+
+    if (this.get('hasVerticalScroller') && (view = this.get('verticalScrollerView')) && (view2 = this.get('verticalScrollerView2'))) {
+      // decide if it should be visible or not
+      if (this.get('autohidesVerticalScroller')) {
+        this.set('isVerticalScrollerVisible', height > dim.height);
+      }
+      height -= this.get('verticalScrollerBottom');
+      viewportHeight = 0;
+      elem = this.containerView.$()[0];
+      if (elem) viewportHeight = elem.offsetHeight;
+      height = height - viewportHeight;
+      view.setIfChanged('maximum', height);
+      view2.setIfChanged('maximum', height);
+
+      this.tile(); // Retile to make sure scrollers become invisible / visible
+    }
+  },
+
+  /** @private */
+  _scroll_horizontalScrollOffsetDidChange: function () {}
+
+});

data/lib/frameworks/sproutcore/frameworks/experimental/frameworks/menu/views/menu/scroller.js

@@ -0,0 +1,250 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+
+/** @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.CoreScrollerView
+  @since SproutCore 1.6
+ */
+SC.MenuScrollerView = SC.CoreScrollerView.extend(
+  /** @scope SC.MenuScrollerView.prototype */{
+
+  /**
+    @type Array
+    @default ['sc-menu-scroller-view']
+    @see SC.View#classNames
+  */
+  classNames: ['sc-menu-scroller-view'],
+
+  /**
+    @type Array
+    @default ['scrollDown']
+    @see SC.View#displayProperties
+   */
+  displayProperties: ['scrollDown'],
+
+  /**
+    @type String
+    @default 'menuScrollerRenderDelegate'
+   */
+  renderDelegateName: 'menuScrollerRenderDelegate',
+
+  // ..........................................................
+  // PROPERTIES
+  //
+
+  /**
+    Used to set the scrolling direction of the scroller.
+
+    @type Boolean
+    @default NO
+   */
+  scrollDown: NO,
+
+  /**
+    The maximum offset value for the scroller.  This will be used to calculate
+    the internal height/width of the scroller itself. It is not necessarily
+    the same as the height of a scroll view's content view.
+
+    When set less than the height of the scroller, the scroller is disabled.
+
+    @type Number
+    @default 0
+   */
+  maximum: 0,
+
+  /**
+    YES if enable scrollbar, NO to disable it.  Scrollbars will automatically
+    disable if the maximum scroll width does not exceed their capacity.
+
+    @type Boolean
+    @default YES
+   */
+  isEnabled: YES,
+
+  /**
+    This function overrides the default function in SC.Scroller as
+    menus only have vertical scrolling.
+
+    @field
+    @type String
+    @default 'verticalScrollOffset'
+   */
+  ownerScrollValueKey: function() {
+    return 'verticalScrollOffset';
+  }.property('layoutDirection').cacheable(),
+
+
+  // ..........................................................
+  // 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 */
+  mouseEntered: function(evt) {
+    this.set('isMouseOver', YES);
+    this._invokeScrollOnMouseOver();
+  },
+
+  /** @private */
+  mouseExited: function(evt) {
+    this.set('isMouseOver', NO);
+  },
+
+  mouseWheel: function (evt) {
+    var el = this.getPath('parentView.containerView.layer'),
+        rawEvent = evt.originalEvent;
+
+    if (el && rawEvent) {
+      try {
+        if (SC.typeOf(el.fireEvent) === SC.T_FUNCTION) { // IE
+          el.fireEvent(rawEvent.type, rawEvent);
+        } else { // W3C
+          el.dispatchEvent(rawEvent);
+        }
+      } catch (x) {
+        // Can't dispatch the event; give up.
+      }
+    }
+  },
+
+  /** @private */
+  _sc_scroller_armScrollTimer: function() {
+    if (!this._sc_scrollTimer) {
+      SC.RunLoop.begin();
+      var method = this._sc_scroller_scrollDidChange;
+      this._sc_scrollTimer = this.invokeLater(method, 50);
+      SC.RunLoop.end();
+    }
+  },
+
+  /** @private */
+  _sc_scroller_scrollDidChange: function() {
+    var now = (new Date()).getTime(),
+        last = this._sc_lastScroll,
+        layer = this.get('layer'),
+        scroll = 0;
+
+    if (last && (now - last) < 50) {
+      this._sc_scroller_armScrollTimer();
+
+    } else {
+      this._sc_scrollTimer = null;
+      this._sc_lastScroll = now;
+
+      SC.RunLoop.begin();
+      if (!this.get('isEnabled')) {
+        this._sc_scrollValue = scroll = layer.scrollTop;
+        this.set('value', scroll); // will now enforce minimum and maximum
+      }
+      SC.RunLoop.end();
+    }
+  },
+
+  /** @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 val = this.get('value'),
+        lineScroll = this.getPath('parentView.verticalLineScroll'),
+        newval;
+
+    if (this.get('scrollDown')) {
+      newval = val + lineScroll;
+      if (newval <= this.get('maximum')) {
+        this.set('value', newval);
+      }
+    } else {
+      newval = val - lineScroll;
+      if (newval >= 0) {
+        this.set('value', newval);
+      } else if (val <= this.verticalLineScroll && val > 0) {
+        this.set('value', 0);
+      }
+    }
+    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, 100);
+    }
+  }
+});
+
+/**
+  @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/experimental/frameworks/scroll_view/render_delegates/desktop_scroller.js

@@ -0,0 +1,92 @@
+// ==========================================================================
+// 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.BaseTheme.desktopScrollerRenderDelegate = SC.RenderDelegate.create({
+  className: 'desktop-scroller',
+
+  render: function (dataSource, context) {
+    var layoutDirection = dataSource.get('layoutDirection'),
+        isVertical = layoutDirection === SC.LAYOUT_VERTICAL,
+        isHorizontal = layoutDirection === SC.LAYOUT_HORIZONTAL;
+
+    context.setClass({
+      'sc-vertical': isVertical,
+      'sc-horizontal': isHorizontal,
+      disabled: !dataSource.get('isEnabled'),
+      'controls-hidden': dataSource.get('controlsHidden')
+    });
+
+    context.push(
+      '<div class="track"></div>',
+      '<div class="cap"></div>',
+      dataSource.get('hasButtons') ?
+        '<div class="button-bottom"></div><div class="button-top"></div>' :
+        '<div class="endcap"></div>',
+      ('<div class="thumb" style="%@:' + dataSource.get('thumbLength') + 'px;' +
+                                'top:' + dataSource.get('thumbPosition') + 'px;">').
+        fmt(isVertical ? 'height' : 'width'),
+         '<div class="thumb-center"></div>',
+         '<div class="thumb-top"></div>',
+         '<div class="thumb-bottom"></div>',
+      '</div>');
+
+
+    context.attr('aria-orientation',
+                 (layoutDirection === SC.LAYOUT_VERTICAL) ? 'vertical' : 'horizontal');
+    context.attr('aria-valuemax', dataSource.get('maximum'));
+    context.attr('aria-valuemin', dataSource.get('minimum'));
+    context.attr('aria-valuenow', dataSource.get('value'));
+    context.attr('aria-controls', dataSource.get('controlsId'));
+  },
+
+  update: function (dataSource, context) {
+    var layoutDirection = dataSource.get('layoutDirection'),
+        isVertical = layoutDirection === SC.LAYOUT_VERTICAL,
+        isHorizontal = layoutDirection === SC.LAYOUT_HORIZONTAL,
+        controlsAreHidden = dataSource.get('controlsHidden'),
+        thumb, K = 'desktopScrollerRenderDelegate';
+
+    context.setClass({
+      'sc-vertical': isVertical,
+      'sc-horizontal': isHorizontal,
+      disabled: !dataSource.get('isEnabled'),
+      'controls-hidden': controlsAreHidden
+    });
+
+    if (dataSource.didChangeFor(K, 'maximum')) {
+      context.attr('aria-valuemax', dataSource.get('maximum'));
+    }
+
+    if (dataSource.didChangeFor(K, 'minimum')) {
+      context.attr('aria-valuemin', dataSource.get('minimum'));
+    }
+
+    if (dataSource.didChangeFor(K, 'value')) {
+      context.attr('aria-valuenow', dataSource.get('value'));
+    }
+
+    if (dataSource.didChangeFor(K, 'controlsId')) {
+      context.attr('aria-controls', dataSource.get('controlsId'));
+    }
+
+    // Don't bother if the controls are hidden.
+    if (!controlsAreHidden) {
+      thumb = context.find('.thumb');
+
+      if (dataSource.didChangeFor(K, 'thumbPosition')) {
+        thumb.css(layoutDirection === SC.LAYOUT_VERTICAL ?
+                  'top' : 'left', dataSource.get('thumbPosition'));
+      }
+
+      if (dataSource.didChangeFor(K, 'thumbLength')) {
+        thumb.css(layoutDirection === SC.LAYOUT_VERTICAL ?
+                  'height' : 'width', dataSource.get('thumbLength'));
+      }
+    }
+  }
+});