sproutcore 1.0.1037 → 1.0.1042

data/frameworks/sproutcore/frameworks/desktop/panes/sheet.js

@@ -8,10 +8,10 @@
 sc_require('panes/panel');
 
 /**
-  Displays a modal sheet pane animated drop down from top.
+  Displays a modal sheet pane that animates from the top of the viewport.
 
   The default way to use the sheet pane is to simply add it to your page like this:
-  
+
   {{{
     SC.SheetPane.create({
       layout: { width: 400, height: 200, centerX: 0 },
@@ -19,36 +19,136 @@ sc_require('panes/panel');
       })
     }).append();
   }}}
-  
-  This will cause your sheet panel to display.  The default layout for a Sheet 
-  is to cover the entire document window with a semi-opaque background, and to 
+
+  This will cause your sheet panel to display.  The default layout for a Sheet
+  is to cover the entire document window with a semi-opaque background, and to
   resize with the window.
-  
+
   @extends SC.PanelPane
   @since SproutCore 1.0
+  @author Evin Grano
+  @author Tom Dale
 */
 SC.SheetPane = SC.PanelPane.extend({
-  
   classNames: 'sc-sheet',
 
   /**
-    The modal pane to place behind this pane if this pane is modal.  This 
-    must be a subclass or an instance of SC.ModalPane.
+    Speed of transition.  Should be expressed in msec.
+
+    @property {Number}
   */
-  modalPane: SC.ModalPane.extend({
-    classNames: 'for-sc-panel for-sc-sheet'
-  }),
-
-  init: function() {
-    sc_super() ;
-
-/** TODO: Implement Animation   
-    this.visibleAnimation = {
-      visible: 'top: 0px',
-      hidden: 'top: -500px',
-      duration: 300
-    } ;
-*/
-  }    
+  transitionDuration: 200,
+
+  // states for view animation
+  NO_VIEW: 'NO_VIEW',
+  ANIMATING: 'ANIMATING',
+  READY: 'READY',
+
+  SLIDE_DOWN: 'SLIDEDOWN',
+  SLIDE_UP: 'SLIDEUP',
+
+  _state: 'NO_VIEW', // no view
+
+  /**
+    Displays the pane.  SheetPane will calculate the height of your pane, draw it offscreen, then
+    animate it down so that it is attached to the top of the viewport.
+
+    @returns {SC.SheetPane} receiver
+  */
+  append: function() {
+    var layout = this.get('layout');
+    if (!layout.height || !layout.top) {
+      layout = SC.View.convertLayoutToAnchoredLayout(layout, this.computeParentDimensions());
+    }
+
+    // Gently rest the pane atop the viewport
+    layout.top = -1*layout.height;
+    this.adjust(layout);
+    return sc_super();
+  },
+
+  /**
+    Animates the sheet up, then removes it from the DOM once it is hidden from view.
+
+    @returns {SC.SheetPane} receiver
+  */
+  remove: function() {
+    // We want the functionality of SC.PanelPane.remove(), but we only want it once the animation is complete.
+    // Store the reference to the superclass function, and it call it after the transition is complete.
+    var that = this, args = arguments;
+    this.invokeLater(function() { args.callee.base.apply(that, args) ;}, this.transitionDuration);
+    this.slideUp();
+
+    return this;
+  },
+
+  /**
+    Once the pane has been rendered out to the DOM, begin the animation.
+  */
+  paneDidAttach: function() {
+    var ret = sc_super();
+    // this.invokeLast(this.slideDown, this);
+    this.slideDown();
+
+    return ret;
+  },
+
+  slideDown: function(){
+    // setup other general state
+    this._start   = Date.now();
+    this._end     = this._start + this.get('transitionDuration');
+    this._state   = this.ANIMATING;
+    this._direction = this.SLIDE_DOWN;
+    this.tick();
+  },
+
+  slideUp: function(){
+    // setup other general state
+    this._start   = Date.now();
+    this._end     = this._start + this.get('transitionDuration');
+    this._state   = this.ANIMATING;
+    this._direction = this.SLIDE_UP;
+    this.tick();
+  },
+
+  // Needed because of the runLoop and that it is animated...must lose focus because will break if selection is change on text fields that don't move.
+  blurTo: function(pane) { this.setFirstResponder(''); },
+
+  /** @private - called while the animation runs.  Will move the content view down until it is in position and then set the layout to the content layout
+   */
+  tick: function() {
+    this._timer = null ; // clear out
+
+    var now = Date.now();
+    var target = this;
+    var pct = (now-this._start)/(this._end-this._start);
+    var dir = this._direction, layout = this.get('layout'), newLayout, adjust;
+    if (pct<0) pct = 0;
+
+    // If we are done...
+    if (pct>=1) {
+      if (dir === this.SLIDE_DOWN){
+        target.adjust('top', 0);
+      } else {
+        target.adjust('top', -1*layout.height);
+      }
+      this._state = SC.SheetPane.READY;
+      this.updateLayout();
+      return this;
+    }
+
+    // ok, now let's compute the new layouts for the two views and set them
+    adjust = Math.floor(layout.height * pct);
+
+    // set the layout for the views, depending on the direction
+    if (dir == this.SLIDE_DOWN) {
+      target.adjust('top', 0-(layout.height-adjust));
+    } else if (dir == this.SLIDE_UP) {
+      target.adjust('top', 0-adjust);
+    }
 
+    this._timer = this.invokeLater(this.tick, 20);
+    target.updateLayout();
+    return this;
+  }
 });

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

@@ -338,7 +338,7 @@ SC.Drag = SC.Object.extend(
   mouseDragged: function(evt) {
     var scrolled = this._autoscroll(evt) ;
     var loc = this.get('location') ;
-    if (!scrolled && (evt.pageX == loc.x) && (evt.pageY == loc.y)) {
+    if (!scrolled && (evt.pageX === loc.x) && (evt.pageY === loc.y)) {
       return ; // quickly ignore duplicate calls
     } 
     
@@ -355,7 +355,7 @@ SC.Drag = SC.Object.extend(
     var target = this._findDropTarget(evt) ; // deepest drop target
     var op = SC.DRAG_NONE ;
     
-    while (target && (target != last) && (op == SC.DRAG_NONE)) {
+    while (target && (target !== last) && (op === SC.DRAG_NONE)) {
       // make sure the drag source will permit a drop operation on the named 
       // target
       if (target && source && source.dragSourceOperationMaskFor) {
@@ -363,18 +363,18 @@ SC.Drag = SC.Object.extend(
       } else op = SC.DRAG_ANY ; // assume drops are allowed
       
       // now, let's see if the target will accept the drag
-      if ((op != SC.DRAG_NONE) && target && target.computeDragOperations) {
+      if ((op !== SC.DRAG_NONE) && target && target.computeDragOperations) {
         op = op & target.computeDragOperations(this, evt, op) ;
       } else op = SC.DRAG_NONE ; // assume drops AREN'T allowed
       
       this.allowedDragOperations = op ;
       
       // if DRAG_NONE, then look for the next parent that is a drop zone
-      if (op == SC.DRAG_NONE) target = this._findNextDropTarget(target) ;
+      if (op === SC.DRAG_NONE) target = this._findNextDropTarget(target) ;
     }
     
     // STEP 2: Refocus the drop target if needed
-    if (target != last) {
+    if (target !== last) {
       if (last && last.dragExited) last.dragExited(this, evt) ;
       
       if (target) {

data/frameworks/sproutcore/frameworks/desktop/system/root_responder.js

@@ -228,12 +228,17 @@ SC.RootResponder = SC.RootResponder.extend(
     var keyPane  = this.get('keyPane'), mainPane = this.get('mainPane'), 
         mainMenu = this.get('mainMenu');
 
-    // try the keyPane
-    if (keyPane) ret = keyPane.performKeyEquivalent(keystring, evt) ;
+    // Try the keyPane.  If it's modal, then try the equivalent there but on
+    // nobody else.
+    if (keyPane) {
+      ret = keyPane.performKeyEquivalent(keystring, evt) ;
+      if (ret || keyPane.get('isModal')) return ret ;
+    }
     
     // if not, then try the main pane
     if (!ret && mainPane && (mainPane!==keyPane)) {
       ret = mainPane.performKeyEquivalent(keystring, evt);
+      if (ret || mainPane.get('isModal')) return ret ;
     }
 
     // if not, then try the main menu
@@ -393,10 +398,8 @@ SC.RootResponder = SC.RootResponder.extend(
     the keypress event.
   */
   keydown: function(evt) {
-    // This code is to check for the simulated keypressed event
-    if(!evt.kindOf) this._ffevt=null;
-    else evt=this._ffevt;
-    if (SC.none(evt)) return YES;    
+    if (SC.none(evt)) return YES;
+    
     // Firefox does NOT handle delete here...
     if (SC.browser.mozilla && (evt.which === 8)) return true ;
     
@@ -414,18 +417,13 @@ SC.RootResponder = SC.RootResponder.extend(
     // responder can do something useful with the event.
     ret = YES ;
     if (this._isFunctionOrNonPrintableKey(evt)) {
-      // Simulate keydown events for firefox since keypress only triggers once
-      // We don't do it in keypress as it doesn't work in certain cases, ie.
-      // Caret is at last position and you press down arrow key.
-      if (SC.browser.mozilla && evt.keyCode>=37 && evt.keyCode<=40){
-        this._ffevt=evt;
-        SC.RunLoop.begin();
-        this.invokeLater(this.keydown, 100);
-        SC.RunLoop.end();
-      }
       // otherwise, send as keyDown event.  If no one was interested in this
       // keyDown event (probably the case), just let the browser do its own
       // processing.
+      
+      // Arrow keys are handled in keypress for firefox
+      if (evt.keyCode>=37 && evt.keyCode<=40 && SC.browser.mozilla) return YES;
+      
       ret = this.sendEvent('keyDown', evt) ;
       
       // attempt key equivalent if key not handled
@@ -453,12 +451,17 @@ SC.RootResponder = SC.RootResponder.extend(
     
     // delete is handled in keydown() for most browsers
     if (SC.browser.mozilla && (evt.which === 8)) {
+      //get the keycode and set it for which.
+      evt.which=evt.keyCode;
       ret = this.sendEvent('keyDown', evt);
       return ret ? (SC.allowsBackspaceToPreviousPage || evt.hasCustomEventHandling) : YES ;
 
-    // normal processing.  send keyDown for printable keys...
+    // normal processing.  send keyDown for printable keys... 
+    //there is a special case for arrow key repeating of events in FF.
     } else {
-      if (evt.charCode !== undefined && evt.charCode === 0) return YES;
+      var isFirefoxArrowKeys = (evt.keyCode>=37 && evt.keyCode<=40 && SC.browser.mozilla);
+      if ((evt.charCode !== undefined && evt.charCode === 0) && !isFirefoxArrowKeys) return YES;
+      if (isFirefoxArrowKeys) evt.which=evt.keyCode;
       return this.sendEvent('keyDown', evt) ? evt.hasCustomEventHandling:YES;
     }
   },
@@ -476,7 +479,10 @@ SC.RootResponder = SC.RootResponder.extend(
   mousedown: function(evt) {
     try {
       // make sure the window gets focus no matter what.  FF is inconsistant 
-      // about this.
+      // about this. You have to regain focus on the window for the key events
+      // to get triggered. This happens when we don't let the browser trigger
+      // the default action and we have something in the app like an iframe.
+      window.focus();
       this.focus();
       if(SC.browser.msie) {
         this._lastMouseDownX = evt.clientX;
@@ -495,6 +501,7 @@ SC.RootResponder = SC.RootResponder.extend(
       // the view. This is a special case as textfields are not supposed to loose 
       // focus unless you click on a list, another textfield or an special
       // view/control.
+      
       if(view) fr=view.get('pane').get('firstResponder');
       
       if(fr && fr.kindOf(SC.InlineTextFieldView) && fr!==view){
@@ -605,14 +612,15 @@ SC.RootResponder = SC.RootResponder.extend(
    trigger calls to mouseDragged.
   */
   mousemove: function(evt) {
-    if(SC.browser.msie){
-      if(this._lastMoveX === evt.clientX && this._lastMoveY === evt.clientY) return;
-      else {
-        this._lastMoveX = evt.clientX;
-        this._lastMoveY = evt.clientY;
-      }
+    if (SC.browser.msie) {
+      if (this._lastMoveX === evt.clientX && this._lastMoveY === evt.clientY) return;
     }
-    
+
+    // We'll record the last positions in all browsers, in case a special pane
+    // or some such UI absolutely needs this information.
+    this._lastMoveX = evt.clientX;
+    this._lastMoveY = evt.clientY;
+
     SC.RunLoop.begin();
     try {
       // make sure the view gets focus no matter what.  FF is inconsistant 

data/frameworks/sproutcore/frameworks/desktop/tests/panes/pane_page.js

@@ -0,0 +1,41 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+module('SC.Pane-SC.Page') ;
+
+test("isVisible changes should update views that are instantiated in a page", function() {
+  var page = SC.Page.design({
+    inspector: SC.PickerPane.design({
+      layout: { width: 300, height: 300, centerX: 0 },
+      contentView: SC.View.extend({
+        layout: { top: 0, left: 0, bottom: 0, right: 0 },
+        childViews: 'labelView'.w(),
+
+        labelView: SC.LabelView.extend({
+          layout: { centerY: -10, height: 24, left: 0, right: 0 },
+          value: "PrefPane"
+        })
+      })  
+    })
+  }) ;
+  
+  
+  var pp = page.get('inspector');
+  pp.append();
+  SC.RunLoop.begin().end();
+  pp.remove();
+  SC.RunLoop.begin().end();
+  pp.childViews[0].childViews[0].set('isVisible', NO);
+  SC.RunLoop.begin().end();
+  pp.append();
+  SC.RunLoop.begin().end();
+  var res = pp.childViews[0].childViews[0].$().hasClass('hidden');
+  ok(res, "The view (isVisible) has been properly rerendered even though it was part of a page, the pane was detached and the visibility was changed while detached");
+  
+});

data/frameworks/sproutcore/frameworks/desktop/tests/panes/select_button/methods.js

@@ -52,6 +52,18 @@ module("SC.SelectButtonView",{
           valueKey: 'title',
           nameKey: 'title',
           sortKey: 'pos'
+        }),
+        
+        //view5
+        SC.SelectButtonView.extend({
+          objects: ["My","New", "List"]
+        }),
+        
+        //view6
+        SC.SelectButtonView.extend({
+          objects: ["My","New", "List"],
+          customViewClassName: 'custom-menu-item',
+          customViewMenuOffsetWidth: 46
         })
       ]
     });
@@ -60,7 +72,9 @@ module("SC.SelectButtonView",{
     view2 = pane.childViews[1] ;
     view3 = pane.childViews[2] ;
     view4 = pane.childViews[3] ;
-
+    view5 = pane.childViews[4] ;
+    view6 = pane.childViews[5] ;
+    
     pane.append(); // make sure there is a layer...
     SC.RunLoop.end();
   },
@@ -163,3 +177,18 @@ test("objects should change on changing the binding", function() {
   ok(objects===newObjects, 'Objects should be bound') ;
 });
 
+//test11
+test("The properties for select button should take default values unless specified", function() {
+  var prop1 = view5.get('customViewClassName');
+  var prop2 = view5.get('customViewMenuOffsetWidth');
+  equals(prop1,null,'Custom view class name should be null');
+  equals(prop2,0,'Custom view menu off set width should be 0');
+});
+
+//test12
+test("The properties for select button should take the specified values", function() {
+  var prop1 = view6.get('customViewClassName');
+  var prop2 = view6.get('customViewMenuOffsetWidth');
+  equals(prop1,'custom-menu-item','Custom view class name should be custom-menu-item');
+  equals(prop2,46,'Custom view menu off set width should be 46');
+});

data/frameworks/sproutcore/frameworks/desktop/tests/panes/select_button/ui.js

@@ -70,6 +70,19 @@ var pane = SC.ControlTestPane.design()
       useStaticLayout: YES,
       objects:['None', 'Low', 'Medium', 'High'],
       layout: { width: '150', right: '0' }
+    })
+
+    //sample10
+    .add("DisableItem", SC.SelectButtonView, {
+      objects: [{ title: "None", pos: 3, isEnabled: YES },
+        { title: "Low", pos: 1, isEnabled: NO },
+        { title: "Medium", pos: 2, isEnabled: YES },
+        { title: "High", pos: 4, isEnabled: NO }],
+      nameKey: 'title',
+      disableSort: NO,
+      isEnabledKey: 'isEnabled',
+      sortKey: 'pos',
+      checkboxEnabled: YES
     }) ;
 
     pane.show();

data/frameworks/sproutcore/frameworks/desktop/tests/panes/sheet/ui.js

@@ -9,30 +9,36 @@
 
 module("SC.SheetPane UI");
 
-var pane ;
+var slidePane;
 
-test("verify sheet pane content container is visible at correct location with right size", function() { 
-  pane = SC.SheetPane.create({
-    layout: { width: 400, height: 200, centerX: 0 },
-    contentView: SC.View.extend({
+test("verify sheet pane slide down works", function() { 
+  slidePane = SC.SheetPane.create({
+    layout: { top: 60, width: 400, height: 200, centerX: 0 },
+    contentView: SC.LabelView.extend({
+      escapeHTML: NO,
+      value: '<h1>Slide Down!</h1>'
     })
   });
-  pane.append();
-
-  ok(pane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be YES');
-  ok(pane.$().hasClass('sc-sheet'), 'pane should have sc-sheet class');
-  ok(pane.childViews[0].get('isVisibleInWindow'), 'pane.div.isVisibleInWindow should be YES');
-  ok(pane.childViews[0].$().hasClass('sc-view'), 'pane.div should have sc-view class');
   
-  var pw = pane.layout.width;
-  var ph = pane.layout.height;
-  var ret = pane.layoutStyle();
-
-  equals(ret.top, '0px', 'pane should be displayed at default position top');
-  equals(ret.left, '50%', 'pane should center horizontally');
-  equals(ret.width, '400px', 'pane should have width 400px');
-  equals(ret.height, '200px', 'pane should have height 200px');
-  equals(ret.marginLeft, -pw/2+'px', 'pane should shift-left %@ px'.fmt(-pw/2));
+  var layout = slidePane.get('layout');
+  var pt = layout.top;
+  var pl = layout.left;
+  var pw = layout.width;
+  var ph = layout.height;
+  var ret = slidePane.layoutStyle();
 
-  pane.remove();
+  slidePane.append();
+  var f = function() {
+    // make sure all fo the timers have had an opportunity to fire
+    SC.RunLoop.begin().end();
+    equals(slidePane.get('layout').top, 0, 'pane should be displayed at default position top after animating');
+    ok(slidePane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be YES');
+    ok(slidePane.$().hasClass('sc-sheet'), 'pane should have sc-sheet class');
+    ok(slidePane.childViews[0].get('isVisibleInWindow'), 'pane.div.isVisibleInWindow should be YES');
+    ok(slidePane.childViews[0].$().hasClass('sc-view'), 'pane.div should have sc-view class');
+    window.start();
+    slidePane.remove();
+  };
+  stop();
+  setTimeout(f, 250);
 }) ;