sproutcore 1.10.3.1 → 1.11.0.rc1

data/lib/frameworks/sproutcore/frameworks/desktop/protocols/drag_source.js

@@ -10,25 +10,28 @@ sc_require('system/drag') ;
 /**
   @namespace
 
-  The DragSource protocol is used to dynamically generate multiple types of
-  data from a single object.  You must implement this protocol if you want to
-  provide the data for a drag event.
+  If you implement the SC.DragSource protocol on your drag's source, it will
+  receive a series of callbacks throughout the course of the drag, and be consulted
+  about what operations to allow on a particular candidate drop target. All methods
+  are optional.
+
+  (Note that when you initiate a drag you must also provide an object implementing
+  SC.DragDataSource, which includes some required methods. A single object may
+  serve as both the drag's source and its data source.)
 */
 SC.DragSource = {
 
   /**
-    This method must be overridden for drag operations to be allowed. 
     Return a bitwise OR'd mask of the drag operations allowed on the
     specified target.  If you don't care about the target, just return a
-    constant value.
-    
-    The default implementation returns `SC.DRAG_NONE`
+    constant value. If a drag's source does not implement this method,
+    it will assume that any drag operation (SC.DRAG_ANY) is allowed.
     
-    @param {SC.View} dropTarget The proposed target of the drop.
     @param {SC.Drag} drag The SC.Drag instance managing this drag.
+    @param {SC.View} dropTarget The proposed target of the drop.
   */
   dragSourceOperationMaskFor: function(drag, dropTarget) {
-    return SC.DRAG_NONE;
+    return SC.DRAG_ANY;
   },
   
   /**
@@ -63,10 +66,34 @@ SC.DragSource = {
       coordinates.
   */
   dragDidMove: function(drag, loc) {},
+
+  /**
+    This method is called if the drag ends and is successfully handled by a
+    drop target (i.e. the drop target returns any operation other than
+    SC.DRAG_NONE).
+
+    @param {SC.Drag} drag The drag instance managing the drag.
+    @param {Point} loc The point in WINDOW coordinates where the drag
+      ended.
+    @param {DragOp} op The drag operation that was performed. One of
+      SC.DRAG_COPY, SC.DRAG_MOVE, or SC.DRAG_LINK.
+  */
+  dragDidSucceed: function(drag, loc, op) {},
+
+  /**
+    This method is called if the drag ends without being handled, or if a drop
+    target handles it but returns SC.DRAG_NONE.
+
+    @param {SC.Drag} drag The drag instance managing the drag.
+    @param {Point} loc The point in WINDOW coordinates where the drag
+      ended.
+    @param {DragOp} op Provided for consistency. Always SC.DRAG_NONE.
+  */
+  dragDidCancel: function(drag, loc, op) {},
   
   /**
-    This method is called when the drag ended. You can use this to do any
-    cleanup.  The operation is the actual operation performed on the drag.
+    This method is called when the drag ended, regardless of whether it succeeded
+    or not. You can use this to do any cleanup.
     
     @param {SC.Drag} drag The drag instance managing the drag.
     @param {Point} loc The point in WINDOW coordinates where the drag
@@ -74,6 +101,16 @@ SC.DragSource = {
     @param {DragOp} op The drag operation that was performed. One of
       SC.DRAG_COPY, SC.DRAG_MOVE, SC.DRAG_LINK, or SC.DRAG_NONE.
   */
-  dragDidEnd: function(drag, loc, op) {}
+  dragDidEnd: function(drag, loc, op) {},
+
+  /**
+    If a drag is canceled or not handled, and has its slideBack property set
+    to YES, then the drag's ghost view will slide back to its initial location.
+    dragDidEnd is called immediately upon mouseUp; dragSlideBackDidEnd is called
+    after the slide-back animation completes.
+    
+    @param {SC.Drag} drag The drag instance managing the drag.
+  */
+  dragSlideBackDidEnd: function(drag) {}
 
 };

data/lib/frameworks/sproutcore/frameworks/desktop/render_delegates/slider.js

@@ -23,29 +23,49 @@ SC.BaseTheme.sliderRenderDelegate = SC.RenderDelegate.create({
   render: function(dataSource, context) {
     this.addSizeClassName(dataSource, context);
 
-    var blankImage = SC.BLANK_IMAGE_URL,
-        valueMax    = dataSource.get('maximum'),
-        valueMin    = dataSource.get('minimum'),
-        valueNow    = dataSource.get('ariaValue');
+    var valueMax = dataSource.get('maximum'),
+        valueMin = dataSource.get('minimum'),
+        valueNow = dataSource.get('ariaValue');
 
-    //addressing accessibility
+    // Add accessibility values.
     context.setAttr('aria-valuemax', valueMax);
     context.setAttr('aria-valuemin', valueMin);
     context.setAttr('aria-valuenow', valueNow);
     if(valueMin !== 0 || valueMax !== 100) context.setAttr('aria-valuetext', valueNow);
     context.setAttr('aria-orientation', 'horizontal');
 
+    // Begin the track element.
     context = context.begin('span').addClass('track');
+
+    // Draw the track's visual elements ("beginning", "middle" and "end").
     this.includeSlices(dataSource, context, SC.THREE_SLICE);
-    context.push(
-      '<img src="' + blankImage +
-      '" class="sc-handle" style="left: '+ dataSource.get('value') + '%" />'+
-      '</span>'
-    );
 
-    context = context.end();
+    // If desired, draw the step choinks.
+    if (dataSource.get('markSteps')) {
+      var stepPositions = dataSource.get('stepPositions');
+      if (stepPositions) {
+        var i, len = stepPositions.length;
+        for (i = 0; i < len; i++) {
+          context.begin()
+            .setStyle('left', '%@%'.fmt(stepPositions[i] * 100))
+            .addClass(['sc-slider-step-mark', 'sc-slider-step-mark-%@'.fmt(i)])
+            .setClass({
+              'sc-slider-step-mark-first': i === 0,
+              'sc-slider-step-mark-last': i === len - 1
+            }).end();
+        }
+      }
+    }
 
+    // Draw the handle.
+    context.begin('img')
+      .setAttr('src', SC.BLANK_IMAGE_URL)
+      .addClass('sc-handle')
+      .setStyle('left', '%@%'.fmt(dataSource.get('value')))
+      .end();
 
+    // End the track element.
+    context = context.end();
 
     dataSource.get('renderState')._cachedHandle = null;
   },
@@ -53,26 +73,64 @@ SC.BaseTheme.sliderRenderDelegate = SC.RenderDelegate.create({
   update: function(dataSource, jquery) {
     this.updateSizeClassName(dataSource, jquery);
 
-    var valueMax    = dataSource.get('maximum'),
-        valueMin    = dataSource.get('minimum'),
-        valueNow    = dataSource.get('ariaValue');
+    var valueMax = dataSource.get('maximum'),
+        valueMin = dataSource.get('minimum'),
+        valueNow = dataSource.get('ariaValue'),
+        handle = dataSource.get('renderState')._cachedHandle;
 
-    //addressing accessibility
+    // Snag the handle if we haven't cached it yet.
+    if (!handle) {
+      handle = dataSource.get('renderState')._cachedHandle = jquery.find('.sc-handle');
+    }
+
+    // Update accessibility values.
     jquery.attr('aria-valuemax', valueMax);
     jquery.attr('aria-valuemin', valueMin);
     jquery.attr('aria-valuenow', valueNow);
     if(valueMin !== 0 || valueMax !== 100) jquery.attr('aria-valuetext', valueNow);
     jquery.attr('aria-orientation', 'horizontal');
 
-    if (dataSource.didChangeFor('sliderRenderDelegate', 'value')) {
-      var handle = dataSource.get('renderState')._cachedHandle;
-      if (!handle) {
-        handle = dataSource.get('renderState')._cachedHandle = jquery.find('.sc-handle');
+    // If the minimum, maximum, step, or markSteps have changed, repoint the choinks.
+    if (dataSource.didChangeFor('sliderRenderDelegateMinimumMaximumStepMarkSteps', 'minimum', 'maximum', 'step', 'markSteps')) {
+      var marks = jquery.find('.sc-slider-step-mark'),
+        markSteps = dataSource.get('markSteps'),
+        stepPositions;
+      // Ten years ago we had no marks, no steps and
+      if (!markSteps || !(stepPositions = dataSource.get('stepPositions'))) {
+        marks.remove();
+      }
+      // Otherwise, reposition them, adding new ones as needed.
+      else {
+        var choinkVal,
+          i, len = stepPositions.length,
+          firstLastClass,
+          choinkTemplate = '<div style="left:%@%" class="sc-slider-step-mark sc-slider-step-mark-%@ %@"></div>',
+          choinkMarkup;
+
+        for (i = 0; i < len; i++) {
+          if (marks[i]) {
+            marks.eq(i).css('left', '%@%'.fmt(stepPositions[i] * 100)).setClass({
+              'sc-slider-step-mark-first': i === 0,
+              'sc-slider-step-mark-last': i === len - 1
+            });
+          }
+          else {
+            if (i === 0) firstLastClass = 'sc-slider-step-mark-first';
+            else if (i === len - 1) firstLastClass = 'sc-slider-step-mark-last';
+            else firstLastClass = '';
+            choinkMarkup = choinkTemplate.fmt(stepPositions[i] * 100, i, firstLastClass);
+            handle.before(choinkMarkup);
+          }
+        }
+        // Remove any remaining.
+        marks.slice(i).remove();
       }
+    }
 
-      var frame = dataSource.get('frame'), value = dataSource.get('value');
+    // Update the value, if needed.
+    if (dataSource.didChangeFor('sliderRenderDelegateValue', 'value')) {
+      var value = dataSource.get('value');
       handle.css('left', value + "%");
     }
   }
-
 });

data/lib/frameworks/sproutcore/frameworks/desktop/render_delegates/split.js

@@ -8,11 +8,21 @@
 SC.BaseTheme.splitRenderDelegate = SC.RenderDelegate.create({
   className: 'split',
 
+  // Returns { SC.LAYOUT_VERTICAL: true/false, SC.LAYOUT_HORIZONTAL: true/false }
+  // for use in setClass.
+  _classesForDataSource: function(dataSource) {
+    var classes = {},
+      layoutDirection = dataSource.get('layoutDirection');
+    classes[SC.LAYOUT_VERTICAL] = layoutDirection === SC.LAYOUT_VERTICAL;
+    classes[SC.LAYOUT_HORIZONTAL] = layoutDirection === SC.LAYOUT_HORIZONTAL;
+    return classes;
+  },
+
   render: function(dataSource, context) {
-    context.addClass(dataSource.get('layoutDirection'));
+    context.setClass(this._classesForDataSource(dataSource));
   },
 
   update: function(dataSource, jquery) {
-    jquery.addClass(dataSource.get('layoutDirection'));
+    jquery.setClass(this._classesForDataSource(dataSource));
   }
 });

data/lib/frameworks/sproutcore/frameworks/desktop/resources/menu_item_view.css

@@ -27,6 +27,14 @@
     &.shortcutkey span.value {
       right: 55px;
     }
+    span.has-branch {
+      position: absolute;
+      right: 10px;
+      top: 5px; 
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-left: 5px solid black;
+    }
   }
   &.disabled{
     border:none;

data/lib/frameworks/sproutcore/frameworks/desktop/resources/overlay-scroller.css

@@ -0,0 +1,187 @@
+@import "compass/css3";
+
+
+.sc-overlay-scroller-view {
+
+  /* Track */
+  .track {
+    background: none;
+    display: none;
+  }
+
+  /* Cap */
+  .cap, .endcap {
+    background: none;
+    display: none;
+  }
+
+  /* Buttons */
+  .button-top {
+    background: none;
+    display: none;
+  }
+
+  .button-bottom {
+    background: none;
+    display: none;
+  }
+
+  /* Active */
+  .button-top:active {
+    background: none;
+    display: none;
+  }
+
+  .button-bottom:active {
+    background: none;
+    display: none;
+  }
+
+  /* Thumb */
+  .thumb {
+    @include transform(translateZ(0px));
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .thumb-top {
+    background-color: black;
+    position: absolute;
+  }
+
+  .thumb-clip {
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .thumb-inner {
+    @include transform(translate3d(0px,0px,0px));
+    position: absolute;
+  }
+
+  .thumb-center {
+    background-color: black;
+    position: absolute;
+  }
+
+  .thumb-bottom {
+    background-color: black;
+    position: absolute;
+  }
+
+  &.fade-out {
+    // When the overlay scroller isn't visible, pass events through. This isn't
+    // supported in IE < 11 (http://caniuse.com/#feat=pointer-events).
+    pointer-events: none;
+  }
+
+  &.sc-vertical {
+
+    /* Thumb */
+    .thumb {
+      width: 12px;
+      height: 1044px;
+    }
+
+    .thumb-top {
+      @include border-top-radius(4px);
+      width: 7px;
+      top: 0px;
+      left: 3px;
+      height: 10px;
+    }
+
+    .thumb-clip {
+      height: 1034px;
+      width: 7px;
+      top: 10px;
+      left: 3px;
+    }
+
+    .thumb-inner {
+      left: 0px;
+      top: 0px;
+      width: 7px;
+      height: 1034px;
+    }
+
+    .thumb-center {
+      width: 7px;
+      left: 0px;
+      top: 0px;
+      height: 1024px;
+    }
+
+    .thumb-bottom {
+      @include border-bottom-radius(4px);
+      width: 7px;
+      top: 1024px;
+      left: 0px;
+      height: 10px;
+    }
+  }
+
+  &.sc-horizontal {
+
+    /* Thumb */
+    .thumb {
+      height: 12px;
+      width: 1044px;
+    }
+
+    .thumb-top {
+      @include border-left-radius(4px);
+      width: 10px;
+      top: 3px;
+      left: 0px;
+      height: 7px;
+    }
+
+    .thumb-clip {
+      width: 1034px;
+      height: 7px;
+      left: 10px;
+      top: 3px;
+    }
+
+    .thumb-inner {
+      top: 0px;
+      left: 0px;
+      height: 7px;
+      width: 1034px;
+    }
+
+    .thumb-center {
+      height: 7px;
+      top: 0px;
+      left: 0px;
+      width: 1024px;
+    }
+
+    .thumb-bottom {
+      @include border-right-radius(4px);
+      height: 7px;
+      left: 1024px;
+      top: 0px;
+      width: 10px;
+    }
+  }
+
+  /* Fading in & out */
+  &.sc-vertical, &.sc-horizontal {
+
+    &.fade-in {
+      @include transition-duration(0.1s);
+      @include transition-property(opacity);
+      @include transition-timing-function(ease);
+      opacity: 0.5;
+    }
+
+    &.fade-out {
+      @include transition-duration(0.5s);
+      @include transition-property(opacity);
+      @include transition-timing-function(ease);
+      opacity: 0;
+    }
+  }
+}