sproutcore 1.0.1009 → 1.0.1024

data/frameworks/sproutcore/frameworks/desktop/english.lproj/alert.css

@@ -1,5 +1,5 @@
 .sc-alert {
-  background: sc_static('standard-white-fade') repeat ;
+  background: white;
 }
 
 .sc-pane.sc-panel.sc-alert > div > .sc-view {

data/frameworks/sproutcore/frameworks/desktop/english.lproj/menu_item_view.css

@@ -17,8 +17,12 @@
 }
 
 .sc-menu-item a{
+  position: absolute;
   display: block;
   top: 0;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
   line-height: 22px;
   text-shadow: #b0b0b0 0px 1px 0px;
   text-decoration: none ;
@@ -95,16 +99,32 @@
   background-image: sc_static('icons/mini_ffffff'); 
 }
 
+
 .sc-menu-item.disabled div.checkbox,
 .sc-menu-item div.checkbox.inactive {
-  background-image: sc_static('blank.gif'); 
+  background-image: url(data:image/gif;base64,R0lGODlhAQABAJAAAP///wAAACH5BAUQAAAALAAAAAABAAEAAAICBAEAOw==) top left no-repeat; 
+  *background-image: sc_static('blank.gif') top left no-repeat; /* IE < 8 */
 }
 
 .sc-menu-item span.value {
-  text-align:center;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 15px;
+  right: 5px;
+  display: inline-block;
+  text-align:left;
   margin-left:30px;
 }
 
+.sc-menu-item a.shortcutkey span.value {
+  right: 55px;
+}
+
+.sc-menu-item a.hasIcon span.value {
+  margin-left: 45px;
+}
+
 .sc-menu-item span.hasBranch {
   position:absolute;
   text-align:center;

data/frameworks/sproutcore/frameworks/desktop/english.lproj/panel.css

@@ -6,7 +6,11 @@
 }
 
 .sc-pane.sc-modal.for-sc-panel {
-  background: static_url('images/standard_fade/000000') repeat ;
+  background: black;
+  opacity: 0.3;
+  -moz-opacity: 0.3;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
 }
 
 .sc-pane.sc-panel > .sc-view {

data/frameworks/sproutcore/frameworks/desktop/english.lproj/well.css

@@ -0,0 +1,72 @@
+.sc-well-view .top-right-edge {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  top: 0px;
+  right: 0px;
+}
+
+.sc-well-view .top-left-edge {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  top: 0px;
+  left: 0px;
+}
+
+.sc-well-view .bottom-left-edge {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  bottom: 0px;
+  left: 0px;
+}
+
+.sc-well-view .bottom-right-edge {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  bottom: 0px;
+  right: 0px;
+}
+
+.sc-well-view .top-edge {
+  position: absolute;
+  height: 5px;
+  top: 0px;
+  right: 7px;
+  left: 7px;
+}
+
+.sc-well-view .bottom-edge {
+  position: absolute;
+  height: 5px;
+  bottom: 0px;
+  right: 7px;
+  left: 7px;
+}
+
+.sc-well-view .left-edge {
+  position: absolute;
+  width: 7px;
+  top: 7px;
+  bottom: 7px;
+  left: 0px;
+}
+
+.sc-well-view .right-edge {
+  position: absolute;
+  width: 7px;
+  top: 7px;
+  bottom: 7px;
+  right: 0px;
+}
+
+.sc-well-view .content-background {
+  position: absolute;
+  top: 5px;
+  bottom: 5px;
+  right: 7px;
+  left: 7px;
+  z-index:-1;
+}

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

@@ -216,7 +216,7 @@ SC.AlertPane = SC.PanelPane.extend({
 
         render: function(context, firstTime) {
           var pane = this.get('pane');
-          var blank = sc_static('blank') ;
+          var blank = SC.BLANK_IMAGE_URL ;
           if(pane.get('icon') == 'blank') context.addClass('plain');
           context.push('<img src="%@" class="icon %@" />'.fmt(blank, pane.get('icon')));
           context.begin('h1').text(pane.get('message') || '').end();

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

@@ -299,7 +299,7 @@ SC.PickerPane = SC.PalettePane.extend({
   */
   fitPositionToScreenMenu: function(w, f) {
     // min left/right padding to the window
-    if( (f.x + f.width) > (w.width-20) ) f.x = w.width - f.width - 20;
+    if( (f.x + f.width) > (w.width-9) ) f.x = w.width - f.width - 9;
     if( f.x < 7 ) f.x = 7;
 	
 	// if the height of the menu is bigger than the window height resize it.

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

@@ -263,11 +263,11 @@ SC.SelectButtonView = SC.ButtonView.extend(
     @default YES
   */
   needsEllipsis: YES,
-  
+
   /**
-    This property allows you at add extra padding to the height 
+    This property allows you at add extra padding to the height
     of the menu pane.
-    
+
     @default 0
     @property {Number} heightPadding for menu pane.
   */
@@ -403,6 +403,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
 
       //Set the items in the itemList array
       itemList.push(item);
+
     }
 
     idx += 1 ;
@@ -441,18 +442,43 @@ SC.SelectButtonView = SC.ButtonView.extend(
   _action: function( evt )
   {
     var buttonLabel = this.$('.sc-button-label')[0] ;
-    var menuWidth = this.get('layer').offsetWidth ; // Get the length of the text on the button in pixels
+    // Get the length of the text on the button in pixels
+    var menuWidth = this.get('layer').offsetWidth ;
     var scrollWidth = buttonLabel.scrollWidth ;
     var lastMenuWidth = this.get('lastMenuWidth') ;
     if(scrollWidth) {
-       var offsetWidth = buttonLabel.offsetWidth ; // Get the original width of the label in the button
+       // Get the original width of the label in the button
+       var offsetWidth = buttonLabel.offsetWidth ;
        if(scrollWidth && offsetWidth) {
-          menuWidth = menuWidth + scrollWidth - offsetWidth ; //Add the difference of the offset Height and the scrollHeight to the menu width
+          menuWidth = menuWidth + scrollWidth - offsetWidth ;
        }
     }
     if (!lastMenuWidth || (menuWidth > lastMenuWidth)) {
       lastMenuWidth = menuWidth ;
     }
+
+    var items = this.get('itemList') ;
+    var elementOffsetWidth, largestMenuWidth ;
+
+    for (var idx = 0; idx < items.length; ++idx) {
+      //getting the width of largest menu item
+      var item = items.objectAt(idx) ;
+      var element = document.createElement('div') ;
+      element.style.cssText = 'top:-10000px; left: -10000px;  position: absolute;' ;
+      element.className = 'sc-view sc-pane sc-panel sc-palette sc-picker sc-menu select-button sc-scroll-view sc-menu-scroll-view sc-container-view menuContainer sc-button-view sc-menu-item sc-regular-size' ;
+      element.innerHTML = item.title ;
+      document.body.appendChild(element) ;
+      elementOffsetWidth = element.offsetWidth ;
+
+      if (!largestMenuWidth || (elementOffsetWidth > largestMenuWidth)) {
+        largestMenuWidth = elementOffsetWidth ;
+      }
+      document.body.removeChild(element) ;
+    }
+
+    lastMenuWidth = (largestMenuWidth > lastMenuWidth) ?
+                      largestMenuWidth: lastMenuWidth ;
+
     this.set('lastMenuWidth',lastMenuWidth) ;
     var currSel = this.get('currentSelItem') ;
     var itemList = this.get('itemList') ;
@@ -491,7 +517,7 @@ SC.SelectButtonView = SC.ButtonView.extend(
         @property
       */
       isEnabled: YES,
-      
+
       menuHeightPadding: menuHeightPadding,
 
       preferType: SC.PICKER_MENU,

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

@@ -67,9 +67,9 @@ SC.RootResponder = SC.RootResponder.extend(
     @returns {SC.RootResponder} receiver
   */
   orderBefore: function(pane, beforePane) {
-    var currentFocus = this.get('focusedPane');
-    var panes = this.get('orderedPanes').without(pane);
-    var len, idx, currentOrder, newFocus ;
+    var currentFocus = this.get('focusedPane'),
+        panes = this.get('orderedPanes').without(pane),
+        len, idx, currentOrder, newFocus ;
 
     // adjust the beforePane to match orderLayer
     var orderLayer = pane.get('orderLayer');
@@ -396,17 +396,16 @@ SC.RootResponder = SC.RootResponder.extend(
     // This code is to check for the simulated keypressed event
     if(!evt.kindOf) this._ffevt=null;
     else evt=this._ffevt;
-    if (evt === null) return YES;
-    
+    if (SC.none(evt)) return YES;    
     // Firefox does NOT handle delete here...
-    if (SC.browser.mozilla > 0 && (evt.which === 8)) return true ;
+    if (SC.browser.mozilla && (evt.which === 8)) return true ;
     
     // modifier keys are handled separately by the 'flagsChanged' event
     // send event for modifier key changes, but only stop processing if this 
     // is only a modifier change
-    var ret = this._handleModifierChanges(evt);
-    var target = evt.target || evt.srcElement;
-    var forceBlock = (evt.which === 8) && !SC.allowsBackspaceToPreviousPage && (target === document.body);
+    var ret = this._handleModifierChanges(evt),
+        target = evt.target || evt.srcElement,
+        forceBlock = (evt.which === 8) && !SC.allowsBackspaceToPreviousPage && (target === document.body);
     
     if (this._isModifierKey(evt)) return (forceBlock ? NO : ret);
     
@@ -421,7 +420,7 @@ SC.RootResponder = SC.RootResponder.extend(
       if (SC.browser.mozilla && evt.keyCode>=37 && evt.keyCode<=40){
         this._ffevt=evt;
         SC.RunLoop.begin();
-        this.invokeLater(this.keydown, 50);
+        this.invokeLater(this.keydown, 100);
         SC.RunLoop.end();
       }
       // otherwise, send as keyDown event.  If no one was interested in this
@@ -453,7 +452,7 @@ SC.RootResponder = SC.RootResponder.extend(
     var ret ;
     
     // delete is handled in keydown() for most browsers
-    if (SC.browser.mozilla > 0 && (evt.which === 8)) {
+    if (SC.browser.mozilla && (evt.which === 8)) {
       ret = this.sendEvent('keyDown', evt);
       return ret ? (SC.allowsBackspaceToPreviousPage || evt.hasCustomEventHandling) : YES ;
 
@@ -491,12 +490,11 @@ SC.RootResponder = SC.RootResponder.extend(
       }
       evt.clickCount = this._clickCount ;
       
-      var view = this.targetViewForEvent(evt) ;
+      var fr, view = this.targetViewForEvent(evt) ;
       // InlineTextField needs to loose firstResponder whenever you click outside
       // 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.
-      var fr=null;
       if(view) fr=view.get('pane').get('firstResponder');
       
       if(fr && fr.kindOf(SC.InlineTextFieldView) && fr!==view){
@@ -587,8 +585,8 @@ SC.RootResponder = SC.RootResponder.extend(
   
   mousewheel: function(evt) {
     try {
-      var view = this.targetViewForEvent(evt) ;
-      var handler = this.sendEvent('mouseWheel', evt, view) ;
+      var view = this.targetViewForEvent(evt) ,
+          handler = this.sendEvent('mouseWheel', evt, view) ;
     } catch (e) {
       throw e;
     }
@@ -607,13 +605,19 @@ 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;
+      }
+    }
+    
     SC.RunLoop.begin();
     try {
-      
       // make sure the view gets focus no matter what.  FF is inconsistant 
       // about this.
       this.focus();
-      
       // only do mouse[Moved|Entered|Exited|Dragged] if not in a drag session
       // drags send their own events, e.g. drag[Moved|Entered|Exited]
       if (this._drag) {
@@ -627,11 +631,8 @@ SC.RootResponder = SC.RootResponder.extend(
           this._drag.tryToPerform('mouseDragged', evt);
         }
       } else {
-        
-        var lh = this._lastHovered || [] ;
-        var nh = [] ;
-        var view = this.targetViewForEvent(evt) ;
-        var exited;
+        var lh = this._lastHovered || [] , nh = [] , exited, loc, len, 
+            view = this.targetViewForEvent(evt) ;
         
         // work up the view chain.  Notify of mouse entered and
         // mouseMoved if implemented.
@@ -648,7 +649,7 @@ SC.RootResponder = SC.RootResponder.extend(
         }
         // now find those views last hovered over that were no longer found 
         // in this chain and notify of mouseExited.
-        for(var loc=0, len=lh.length; loc < len; loc++) {
+        for(loc=0, len=lh.length; loc < len; loc++) {
           view = lh[loc] ;
           exited = view.respondsTo('mouseExited') ;
           if (exited && !(nh.indexOf(view) !== -1)) {

data/frameworks/sproutcore/frameworks/desktop/tests/views/list/ui_alternatingrows.js

@@ -0,0 +1,130 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+
+/*
+  This test evaluates the creation of list item views with alternating rows
+*/
+
+module("SC.ListView - alternating rows");
+
+// create a fake content array.  Generates a list with whatever length you
+// want of objects with a title based on the index.  Cannot mutate.
+var ContentArray = SC.Object.extend(SC.Array, {
+  
+  length: 0,
+  
+  objectAt: function(idx) {
+    if (idx >= this.get('length')) return undefined;
+    
+    var content = this._content, ret ;
+    if (!content) content = this._content = [];
+    
+    ret = content[idx];
+    if (!ret) {
+      ret = content[idx] = SC.Object.create({ 
+        title: "ContentItem %@".fmt(idx)
+      });
+    }
+    
+    return ret ;
+  }
+});
+
+var pane = SC.ControlTestPane.design()
+  .add("basic-even", SC.ScrollView.design({
+    layout: { left: 0, right: 0, top: 0, height: 180 },
+    hasHorizontalScroller: NO,
+    contentView: SC.ListView.design({
+      content: ContentArray.create({ length: 10 }),
+      showAlternatingRows: YES,
+      rowHeight: 20
+    })
+  }))
+  .add("basic-odd", SC.ScrollView.design({
+    layout: { left: 0, right: 0, top: 0, height: 180 },
+    hasHorizontalScroller: NO,
+    contentView: SC.ListView.design({
+      content: ContentArray.create({ length: 11 }),
+      showAlternatingRows: YES,
+      rowHeight: 20
+    })
+  }));
+  
+pane.show(); // add a test to show the test pane
+window.pane = pane ;
+
+function verifyClasses(views) {
+  var evens = SC.IndexSet.create(0).addEach([2,4,6,8,10]);
+  var odds = SC.IndexSet.create(1).addEach([3,5,7,9]);
+
+  views.forEach(function(item) {
+    var cq = item.$();
+    var idx = item.get('contentIndex');
+
+    if (evens.contains(idx)) {
+      ok(!cq.hasClass('odd'), "item %@ doesn't have 'odd' CSS class".fmt(idx));
+      ok(cq.hasClass('even'), "item %@ has 'even' CSS class".fmt(idx));
+    }
+    else if (odds.contains(idx)) {
+      ok(cq.hasClass('odd'), "item %@ has 'odd' CSS class".fmt(idx));
+      ok(!cq.hasClass('even'), "item %@ doesn't have 'even' CSS class".fmt(idx));
+    }
+  });
+}
+
+test("alternating class set on list view", function() {
+  var listView = pane.view("basic-even").contentView;
+  var cq = listView.$();
+  
+  ok(cq.hasClass('alternating'), "ListView instance should have 'alternating' CSS class");
+});
+
+test("even/odd classes on ListItemView children - even", function() {
+  var items = pane.view("basic-even").contentView.childViews;
+  verifyClasses(items);
+});
+
+test("even/odd classes on ListItemView children - odd", function() {
+  items = pane.view("basic-odd").contentView.childViews;
+  verifyClasses(items);
+});
+
+test("even/odd classes with incremental rendering - even", function() {
+  var scrollView = pane.view("basic-even"),
+      listView = scrollView.contentView,
+      item = listView.childViews;
+  
+  SC.run(function() {
+    scrollView.scrollTo(0,21);
+  });
+  
+  verifyClasses(items);
+  
+  SC.run(function() {
+    scrollView.scrollTo(0,0);
+  });
+  
+  verifyClasses(items);
+});
+
+test("even/odd classes with incremental rendering - odd", function() {
+  var scrollView = pane.view("basic-odd"),
+      listView = scrollView.contentView,
+      item = listView.childViews;
+  
+  SC.run(function() {
+    scrollView.scrollTo(0,21);
+  });
+  
+  verifyClasses(items);
+  
+  SC.run(function() {
+    scrollView.scrollTo(0,0);
+  });
+  
+  verifyClasses(items);
+});