sproutcore 1.10.3.1 → 1.11.0.rc1

data/lib/frameworks/sproutcore/frameworks/desktop/system/drag.js

@@ -399,7 +399,11 @@ SC.Drag = SC.Object.extend(
     var ary = this._dropTargets();
 
     for (var idx = 0, len = ary.length; idx < len; idx++) {
-      ary[idx].tryToPerform('dragStarted', this, evt);
+      var target = ary[idx];
+      // If the target is not visible, it is not valid.
+      if (!target.get('isVisibleInWindow')) continue;
+
+      target.tryToPerform('dragStarted', this, evt);
     }
   },
 
@@ -413,8 +417,7 @@ SC.Drag = SC.Object.extend(
     @see SC.Drag.endDrag
   */
   cancelDrag: function (evt) {
-    var target = this._lastTarget,
-        loc = this.get('location');
+    var target = this._lastTarget;
 
     if (target && target.dragExited) target.dragExited(this, this._lastMouseDraggedEvent);
 
@@ -444,22 +447,25 @@ SC.Drag = SC.Object.extend(
       }
     }
 
-    if (this.get('sourceIsDraggable')) {
-      // destroy the ghost view
-      this._destroyGhostView();
-
-      if (this.get('ghost')) {
-        // Show the dragView if it was hidden.
-        if (this._dragViewWasVisible) this._getDragView().set('isVisible', YES);
-        this._dragViewWasVisible = null;
-      }
+    // Trigger a slide-back if triggered and if the drag was unsuccessful.
+    if (this.get('sourceIsDraggable') && this.get('slideBack') && op === SC.DRAG_NONE) {
+      this._slideGhostViewBack();
+    }
+    // Otherwise, wrap up the drag right now.
+    else {
+      this._endDrag();
     }
 
-    // notify the source that everything has completed
-    var source = this.source;
-    if (source && source.dragDidEnd) source.dragDidEnd(this, loc, op);
-    
-    this._cleanUpDrag();
+    var source = this.get('source');
+    if (source) {
+      // notify the source that the drag succeeded
+      if (source.dragDidSucceed && op !== SC.DRAG_NONE) source.dragDidSucceed(this, loc, op);
+      // notify the source that the drag was cancelled
+      else if (source.dragDidCancel && op === SC.DRAG_NONE) source.dragDidCancel(this, loc, op);
+
+      // always notify the source that everything has completed
+      if (source.dragDidEnd) source.dragDidEnd(this, loc, op);
+    }
   },
 
   // ..........................................
@@ -587,10 +593,8 @@ SC.Drag = SC.Object.extend(
     This will create the ghostView and add it to the document.
   */
   _createGhostView: function () {
-    var that  = this,
-        dragView = this._getDragView(),
+    var dragView = this._getDragView(),
         frame = dragView.get('borderFrame'),
-        layout = dragView.get('layout'),
         ghostLayout, view;
 
     // Create a fixed layout for the ghost view.
@@ -604,15 +608,32 @@ SC.Drag = SC.Object.extend(
 
       didCreateLayer: function () {
         if (dragView) {
-          var layer = dragView.get('layer');
-          if (layer) {
-            layer = layer.cloneNode(true);
+          var dragLayer = dragView.get('layer');
+          if (dragLayer) {
+            var layer = dragLayer.cloneNode(true);
+
+            // Canvas elements need manual copying.
+            var dragCanvasses = dragView.$().find('canvas');
+            if (dragCanvasses.length) {
+              var ghostCanvasses = $(layer).find('canvas'),
+                  len = dragCanvasses.length,
+                  i, dragCanvas, ghostCanvas;
+              for (i = 0; i < len; i++) {
+                dragCanvas = dragCanvasses[i];
+                ghostCanvas = ghostCanvasses[i];
+                ghostCanvas.width = dragCanvas.width;
+                ghostCanvas.height = dragCanvas.height;
+                ghostCanvas.getContext('2d').drawImage(dragCanvas, 0, 0);
+              }
+            }
 
             // Make sure the layer we put in the ghostView wrapper is not displaced.
             layer.style.top = "0px";
             layer.style.left = "0px";
             layer.style.bottom = "0px";
             layer.style.right = "0px";
+
+            // Attach the cloned layer.
             this.get('layer').appendChild(layer);
           }
         }
@@ -667,6 +688,35 @@ SC.Drag = SC.Object.extend(
     }
   },
 
+  /** @private Called instead of _destroyGhostView if slideBack is YES. */
+  _slideGhostViewBack: function () {
+    if (this.ghostView) {
+      var dragView = this._getDragView(),
+          frame = dragView.get('borderFrame'),
+          dragParentView = dragView.get('parentView'),
+          globalOrigin = dragParentView ? dragParentView.convertFrameToView(frame, null) : dragView.get('frame'),
+          slidebackLayout;
+
+      // Create a fixed layout for the ghost view.
+      slidebackLayout = { top: globalOrigin.y, left: globalOrigin.x };
+
+      // Animate the ghost view back to its original position; destroy after.
+      this.ghostView.animate(slidebackLayout, 0.5, this, function () {
+        this.invokeNext(function() {
+          // notify the source that slideback has completed
+          var source = this.get('source');
+          if (this.get('slideBack') && source && source.dragSlideBackDidEnd) source.dragSlideBackDidEnd(this);
+
+          this._endDrag();
+        });
+      });
+
+    }
+    else {
+      this._endDrag();
+    }
+  },
+
   /** @private */
   _destroyGhostView: function () {
     if (this.ghostView) {
@@ -677,12 +727,26 @@ SC.Drag = SC.Object.extend(
   },
 
   /** @private */
-  _cleanUpDrag: function() {
+  _endDrag: function () {
+    if (this.get('sourceIsDraggable')) {
+      this._destroyGhostView();
+      if (this.get('ghost')) {
+        // Show the dragView if it was hidden.
+        if (this._dragViewWasVisible) this._getDragView().set('isVisible', YES);
+        this._dragViewWasVisible = null;
+      }
+    }
+
+    this._cleanUpDrag();
+  },
+
+  /** @private */
+  _cleanUpDrag: function () {
     this._lastTarget = null;
     this._dragInProgress = NO;
     this._cachedDropTargets = null;
   },
-  
+
   /** @private
     Return an array of drop targets, sorted with any nested drop targets
     at the top of the array.  The first time this method is called during
@@ -713,7 +777,7 @@ SC.Drag = SC.Object.extend(
       var ret = depth[guid];
       if (!ret) {
         ret = 1;
-        while (x = x.get('parentView')) {
+        while ((x = x.get('parentView'))) {
           if (dropTargets[SC.guidFor(x)] !== undefined) ret = ret + 1;
           if (x.isPane && x.isMainPane) ret = ret + 10000; // Arbitrary value always have the main pain on top
         }
@@ -765,7 +829,7 @@ SC.Drag = SC.Object.extend(
   */
   _findNextDropTarget: function (target) {
     var dropTargets = SC.Drag._dropTargets;
-    while (target = target.get('parentView')) {
+    while ((target = target.get('parentView'))) {
       if (dropTargets[SC.guidFor(target)]) return target;
     }
     return null;
@@ -798,7 +862,7 @@ SC.Drag = SC.Object.extend(
     var loc  = evt ? { x: evt.pageX, y: evt.pageY } : this.get('location'),
         view = this._findScrollableView(loc),
         scrollableView = null, // become final view when found
-        vscroll, hscroll, min, max, edge, container, f;
+        vscroll, hscroll, min, max, container, f;
 
     // hscroll and vscroll will become either 1 or -1 to indicate scroll
     // direction or 0 for no scroll.
@@ -915,7 +979,7 @@ SC.Drag = SC.Object.extend(
     // at the start of the list.
     ret = ret.sort(function (a, b) {
       var view = a;
-      while (view = view.get('parentView')) {
+      while ((view = view.get('parentView'))) {
         if (b === view) return -1;
       }
       return 1;
@@ -954,7 +1018,7 @@ SC.Drag = SC.Object.extend(
   */
   _findNextScrollableView: function (view) {
     var scrollableViews = SC.Drag._scrollableViews;
-    while (view = view.get('parentView')) {
+    while ((view = view.get('parentView'))) {
       if (scrollableViews[SC.guidFor(view)]) return view;
     }
     return null;

data/lib/frameworks/sproutcore/frameworks/desktop/tests/panes/alert/ui.js

@@ -19,7 +19,9 @@ module("SC.AlertPane UI", {
 
 var pane ;
 
-function evaluatePane(pane, message, description, caption, button1Title, button2Title, button3Title, iconClass, themeName) {
+function evaluatePane(pane, message, description, caption, button1Title, button2Title, button3Title, iconClass, themeName,
+    button1ToolTip, button2ToolTip, button3ToolTip, button1LayerId, button2LayerId, button3LayerId, defaultButton, cancelButton,
+    localizeButton1, localizeButton2, localizeButton3) {
   // wrapper
   ok(pane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be YES');
   ok(pane.$().hasClass('sc-alert'), 'pane should have sc-alert class');
@@ -75,6 +77,82 @@ function evaluatePane(pane, message, description, caption, button1Title, button2
     ok(button3.$().hasClass('sc-hidden'), 'pane.div button3 should be hidden');
   }
 
+  if (localizeButton1) {
+    ok(button1.get('localize'), "button1 is set to localize.");
+  }
+  if (localizeButton2) {
+    ok(button2.get('localize'), "button2 is set to localize.");
+  }
+  if (localizeButton3) {
+    ok(button3.get('localize'), "button3 is set to localize.");
+  }
+
+  if (button1ToolTip) {
+    equals(button1.$('label').prop('title'), button1ToolTip, 'pane.div.div button1 should have custom toolTip %@'.fmt(button1ToolTip));
+  } else {
+    equals(button1.$('label').prop('title'), '', 'pane.div.div button1 should have default toolTip BLANK');
+  }
+  if (button2ToolTip) {
+    equals(button2.$('label').prop('title'), button2ToolTip, 'pane.div.div button2 should have custom toolTip %@'.fmt(button2ToolTip));
+  } else {
+    equals(button2.$('label').prop('title'), '', 'pane.div.div button2 should have default toolTip BLANK');
+  }
+  if (button3ToolTip) {
+    equals(button3.$('label').prop('title'), button3ToolTip, 'pane.div.div button3 should have custom toolTip %@'.fmt(button3ToolTip));
+  } else {
+    equals(button3.$('label').prop('title'), '', 'pane.div.div button3 should have default toolTip BLANK');
+  }
+
+  if (button1LayerId) {
+    equals(button1.$().prop('id'), button1LayerId, 'pane.div.div button1 should have custom layerId %@'.fmt(button1LayerId));
+  } else {
+    ok(button1.$().prop('id').indexOf('sc') === 0, 'pane.div.div button1 should have default layerId');
+  }
+  if (button2LayerId) {
+    equals(button2.$().prop('id'), button2LayerId, 'pane.div.div button2 should have custom layerId %@'.fmt(button2LayerId));
+  } else {
+    ok(button2.$().prop('id').indexOf('sc') === 0, 'pane.div.div button2 should have default layerId');
+  }
+  if (button3LayerId) {
+    equals(button3.$().prop('id'), button3LayerId, 'pane.div.div button3 should have custom layerId %@'.fmt(button3LayerId));
+  } else {
+    ok(button3.$().prop('id').indexOf('sc') === 0, 'pane.div.div button3 should have default layerId');
+  }
+
+  if (defaultButton == null) defaultButton = 1;
+  if (defaultButton === 1) {
+    ok(button1.$().hasClass('def'), 'pane.div.div button1 should be default');
+  } else {
+    ok(!button1.$().hasClass('def'), 'pane.div.div button1 should not be default');
+  }
+  if (defaultButton === 2) {
+    ok(button2.$().hasClass('def'), 'pane.div.div button2 should be default');
+  } else {
+    ok(!button2.$().hasClass('def'), 'pane.div.div button2 should not be default');
+  }
+  if (defaultButton === 3) {
+    ok(button3.$().hasClass('def'), 'pane.div.div button3 should be default');
+  } else {
+    ok(!button3.$().hasClass('def'), 'pane.div.div button3 should not be default');
+  }
+
+  if (cancelButton == null) cancelButton = 2;
+  if (cancelButton === 1) {
+    ok(button1.$().hasClass('cancel'), 'pane.div.div button1 should be cancel');
+  } else {
+    ok(!button1.$().hasClass('cancel'), 'pane.div.div button1 should not be cancel');
+  }
+  if (cancelButton === 2) {
+    ok(button2.$().hasClass('cancel'), 'pane.div.div button2 should be cancel');
+  } else {
+    ok(!button2.$().hasClass('cancel'), 'pane.div.div button2 should not be cancel');
+  }
+  if (cancelButton === 3) {
+    ok(button3.$().hasClass('cancel'), 'pane.div.div button3 should be cancel');
+  } else {
+    ok(!button3.$().hasClass('cancel'), 'pane.div.div button3 should not be cancel');
+  }
+
   if (!themeName) themeName = 'capsule';
   ok(button1.$().hasClass(themeName), 'pane.div.div button1 should have class ' + themeName);
   ok(button2.$().hasClass(themeName), 'pane.div.div button2 should have class ' + themeName);
@@ -82,6 +160,7 @@ function evaluatePane(pane, message, description, caption, button1Title, button2
 }
 
 test("AlertPane.show with icon, message, description, caption and 3 buttons", function() {
+  SC.RunLoop.begin();
   pane = SC.AlertPane.show({
     message: 'AlertPane.message',
     description: 'AlertPane.description',
@@ -94,19 +173,47 @@ test("AlertPane.show with icon, message, description, caption and 3 buttons", fu
       { title: 'extraButtonTitle' }
     ]
   });
+  SC.RunLoop.end();
   evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24');
   pane.dismiss();
   pane.destroy();
 });
 
+test("AlertPane.show with 3 buttons with isDefault, isCancel, toolTip, layerId and localize", function () {
+  SC.RunLoop.begin();
+  pane = SC.AlertPane.show({
+    message: 'AlertPane.message',
+    description: 'AlertPane.description',
+    caption: 'AlertPane.caption',
+    icon: 'sc-icon-tools-24',
+    delegate: this,
+    buttons: [
+      { title: 'okButtonTitle', toolTip: 'okButtonToolTip', layerId: 'okButtonLayerId', isCancel: true, localize: true },
+      { title: 'cancelButtonTitle', toolTip: 'cancelButtonToolTip', layerId: 'cancelButtonLayerId', localize: true },
+      { title: 'extraButtonTitle', toolTip: 'extraButtonToolTip', layerId: 'extraButtonLayerId', isDefault: true, localize: true }
+    ]
+  });
+  SC.RunLoop.end();
+  evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption',
+    "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24', null,
+    'okButtonToolTip', 'cancelButtonToolTip', 'extraButtonToolTip',
+    'okButtonLayerId', 'cancelButtonLayerId', 'extraButtonLayerId',
+    3, 1, true, true, true);
+  pane.dismiss();
+  pane.destroy();
+});
+
 test("AlertPane.show with icon, message, description, caption and 3 buttons - old style", function() {
+  SC.RunLoop.begin();
   pane = SC.AlertPane.show("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24', this);
+  SC.RunLoop.end();
   evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24');
   pane.dismiss();
   pane.destroy();
 });
 
 test("AlertPane.warn with icon, message, description, caption and 3 buttons", function() {
+  SC.RunLoop.begin();
   pane = SC.AlertPane.warn({
     message: "AlertPane.message",
     description: 'AlertPane.description',
@@ -118,12 +225,14 @@ test("AlertPane.warn with icon, message, description, caption and 3 buttons", fu
     ],
     delegate: this
   });
+  SC.RunLoop.end();
   evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-alert-48');
   pane.dismiss();
   pane.destroy();
 });
 
 test("AlertPane.error with icon, message, description, caption and 3 buttons", function() {
+  SC.RunLoop.begin();
   pane = SC.AlertPane.error({
     message: "AlertPane.message",
     description: 'AlertPane.description',
@@ -135,12 +244,14 @@ test("AlertPane.error with icon, message, description, caption and 3 buttons", f
     ],
     delegate: this
   });
+  SC.RunLoop.end();
   evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-error-48');
   pane.dismiss();
   pane.destroy();
 });
 
 test("AlertPane.plain with message, description, caption and 3 buttons", function() {
+  SC.RunLoop.begin();
   pane = SC.AlertPane.plain({
     message: "AlertPane.message",
     description: 'AlertPane.description',
@@ -152,12 +263,14 @@ test("AlertPane.plain with message, description, caption and 3 buttons", functio
     ],
     delegate: this
   });
+  SC.RunLoop.end();
   evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'blank');
   pane.dismiss();
   pane.destroy();
 });
 
 test("AlertPane.info with icon, message, description, caption and 3 buttons", function() {
+  SC.RunLoop.begin();
   pane = SC.AlertPane.info({
     message: "AlertPane.message",
     description: 'AlertPane.description',
@@ -169,27 +282,34 @@ test("AlertPane.info with icon, message, description, caption and 3 buttons", fu
     ],
     delegate: this
   });
+  SC.RunLoop.end();
   evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-info-48');
   pane.dismiss();
   pane.destroy();
 });
 
 test("AlertPane.info with icon, message and 1 default button (omit all optional parameters) - old style", function() {
+  SC.RunLoop.begin();
   pane = SC.AlertPane.info("AlertPane.message");
+  SC.RunLoop.end();
   evaluatePane(pane, "AlertPane.message", null, null, null, null, null, 'sc-icon-info-48');
   pane.dismiss();
   pane.destroy();
 });
 
 test("AlertPane.info with icon, message and 3 buttons (passing null to optional description and caption) - old style", function() {
+  SC.RunLoop.begin();
   pane = SC.AlertPane.info("AlertPane.message", null, null, "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', this);
+  SC.RunLoop.end();
   evaluatePane(pane, "AlertPane.message", null, null, "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-info-48');
   pane.dismiss();
   pane.destroy();
 });
 
 test("AlertPane.info with icon, message, description, caption and 1 button (passing null to 3 buttons) - old style", function() {
+  SC.RunLoop.begin();
   pane = SC.AlertPane.info("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', null, null, null, this);
+  SC.RunLoop.end();
   evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', null, null, null, 'sc-icon-info-48');
   pane.dismiss();
   pane.destroy();
@@ -223,21 +343,31 @@ test("AlertPane.info with individual actions and targets for three buttons", fun
   }
 
   function clickButton(button) {
-    var elem = button.$();
-    SC.Event.trigger(elem, 'mousedown');
+    var elem = button.get('layer');
+    var evt = SC.Event.simulateEvent(elem, 'mousedown', { which: 1 });
+    SC.Event.trigger(elem, 'mousedown', [evt]);
     SC.Event.trigger(elem, 'mouseup');
   }
 
+  SC.RunLoop.begin();
   showPane();
   clickButton(pane.get('button1'));
+  SC.RunLoop.end();
+
   equals(clickValue, 'OK', 'Action for the OK button was clicked');
 
+  SC.RunLoop.begin();
   showPane();
   clickButton(pane.get('button2'));
+  SC.RunLoop.end();
+
   equals(clickValue, 'Cancel', 'Action for the Cancel button was clicked');
 
+  SC.RunLoop.begin();
   showPane();
   clickButton(pane.get('button3'));
+  SC.RunLoop.end();
+
   equals(clickValue, 'Extra', 'Action for the Extra button was clicked');
 
   pane.destroy();
@@ -363,6 +493,7 @@ test("users interaction with mutiple alert panes with 1-3 buttons - old style",
 
 
 test("AlertPane.show with custom themeName", function() {
+  SC.RunLoop.begin();
   pane = SC.AlertPane.show({
     themeName: 'AlertPane.themeName',
     message: 'AlertPane.message',
@@ -376,7 +507,36 @@ test("AlertPane.show with custom themeName", function() {
       { title: 'extraButtonTitle' }
     ]
   });
+  SC.RunLoop.end();
   evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24', 'AlertPane.themeName');
   pane.dismiss();
   pane.destroy();
 });
+
+test("AlertPane.show with more than three buttons specified", function() {
+  var didError = NO;
+
+  SC.RunLoop.begin();
+  try {
+    pane = SC.AlertPane.show({
+      themeName: 'AlertPane.themeName',
+      message: 'AlertPane.message',
+      description: 'AlertPane.description',
+      caption: 'AlertPane.caption',
+      icon: 'sc-icon-tools-24',
+      delegate: this,
+      buttons: [
+        { title: 'okButtonTitle' },
+        { title: 'cancelButtonTitle' },
+        { title: 'extraButtonTitle' },
+        { title: 'extraExtraButtonTitle' }
+      ]
+    });
+  } catch (e) {
+    didError = YES;
+  }
+  SC.RunLoop.end();
+
+  ok(!didError, "Specifying more than three buttons doesn't trigger an unhandled error.");
+  pane.destroy();
+})