sproutit-sproutcore 1.0.0.20090416161445 → 1.0.0.20090720093355

data/frameworks/sproutcore/frameworks/desktop/views/scroller.js

@@ -19,15 +19,13 @@ SC.NATURAL_SCROLLER_THICKNESS = 16;
 */
 SC.ScrollerView = SC.View.extend({
   
-  // emptyElement: '<%@1><div class="sc-inner"></div></%@1>',
-  emptyElement: '<%@1></%@1>',
   classNames: ['sc-scroller-view'],
   
   // ..........................................................
   // PROPERTIES
   // 
-
-  /** 
+  
+  /**
    Used by the SC.ScrollView to properly layout the scrollers.
   */
   scrollerThickness: SC.NATURAL_SCROLLER_THICKNESS,
@@ -90,7 +88,7 @@ SC.ScrollerView = SC.View.extend({
     var key = null;
     switch(this.get('layoutDirection')) {
       case SC.LAYOUT_VERTICAL:
-        key = 'verticalScrollOffset';
+        key = 'verticalScrollOffset' ;
         break;
       case SC.LAYOUT_HORIZONTAL:
         key = 'horizontalScrollOffset' ;
@@ -105,99 +103,124 @@ SC.ScrollerView = SC.View.extend({
   // INTERNAL SUPPORT
   // 
   
-  displayProperties: 'value minimum maximum isEnabled'.w(),
-
+  displayProperties: 'minimum maximum isEnabled'.w(),
+  
   /** @private
     Update the scroll location or inner height/width if needed.
   */
   render: function(context, firstTime) {
-    // console.log('%@.render called'.fmt(this));
-    sc_super();
-    
-    var dir = this.get('layoutDirection');
-    var min = this.get('minimum'), max = this.get('maximum');
-    var enabled = this.get('isEnabled'), value = this.get('value');
-    
-    // console.log(dir) ;
-    
-    if (firstTime) {
-      if (dir===SC.LAYOUT_HORIZONTAL) context.addClass('sc-horizontal') ;
-      else context.addClass('sc-vertical') ;
-    }
+    // console.log('%@.render(context=%@, firstTime=%@)'.fmt(this, context, firstTime?'YES':'NO'));
+    var dir = this.get('layoutDirection') ;
+    var min = this.get('minimum'), max = this.get('maximum') ;
+    var enabled = this.get('isEnabled'), value = this.get('value') ;
     
-    // calculate required size...
+     // calculate required size...
     var size = (enabled) ? max-min-2 : 0 ;
+    
     switch (dir) {
       case SC.LAYOUT_VERTICAL:
-        context.push('<div class="sc-inner" style="height: %@px"></div>'.fmt(size));
-        context.addStyle('scrollTop', value-min) ;
-        break;
-        
+        // if (firstTime) context.addClass('sc-vertical') ;
+        context.addClass('sc-vertical') ;
+        context.push('<div class="sc-inner" style="height: %@px;">&nbsp;</div>'.fmt(size)) ;
+        break ;
       case SC.LAYOUT_HORIZONTAL:
-        context.push('<div class="sc-inner" style="width: %@px"></div>'.fmt(size));
-        context.addStyle('scrollLeft', value-min) ;
-        break;
-      
+        // if (firstTime) context.addClass('sc-horizontal') ;
+        context.addClass('sc-horizontal') ;
+        context.push('<div class="sc-inner" style="width: %@px;">&nbsp;</div>'.fmt(size)) ;
+        break ;
       default:
-        break;
+        throw "You must set a layoutDirection for your scroller class." ;
     }
   },
   
   didCreateLayer: function() {
     // console.log('%@.didCreateLayer called'.fmt(this));
-    SC.Event.add(this.$(), 'scroll', this, this.scrollDidChange) ;
+    var callback = this._sc_scroller_scrollDidChange ;
+    SC.Event.add(this.$(), 'scroll', this, callback) ;
+    
+    // set scrollOffset first time
+    var amt = this.get('value') - this.get('minimum') ;
+    var layer = this.get('layer') ;
+    
+    switch (this.get('layoutDirection')) {
+      case SC.LAYOUT_VERTICAL:
+        layer.scrollTop = amt ;
+        break;
+        
+      case SC.LAYOUT_HORIZONTAL:
+        layer.scrollLeft = amt ;
+        break;
+    }
   },
   
-  didDestroyLayer: function() {
-    // console.log('%@.didDestroyLayer called'.fmt(this));
-    SC.Event.remove(this.$(), 'scroll', this, this.scrollDidChange) ;
+  willDestroyLayer: function() {
+    // console.log('%@.willDestroyLayer()'.fmt(this));
+    var callback = this._sc_scroller_scrollDidChange ;
+    SC.Event.remove(this.$(), 'scroll', this, callback) ;
   },
 
-  /** 
-    Whenever the scroll location changes, simply set a timer to fire to 
-    update the scroll location and then exit.  It's important to minimize the
-    actual work done during an onscroll change since it will block the UI
-    from updating.
-  */
-  scrollDidChange: function() {
-    // schedule scrollDidChange to execute later if not already scheduled...
-    if (!this._scrollTimer) {
+  // after 50msec, fire event again
+  _sc_scroller_armScrollTimer: function() {
+    if (!this._sc_scrollTimer) {
       SC.RunLoop.begin();
-      this._scrollTimer = this.invokeLater(this._scroll_scrollDidChange, 1);
+      var method = this._sc_scroller_scrollDidChange ;
+      this._sc_scrollTimer = this.invokeLater(method, 50) ;
       SC.RunLoop.end();
     }
   },
   
-  _scroll_scrollDidChange: function() {
-    // console.log('%@._scroll_scrollDidChange called'.fmt(this));
-    this._scrollTimer = null; // clear so we can fire again
+  _sc_scroller_scrollDidChange: function() {
+    
+    var now = Date.now(), last = this._sc_lastScroll;
+    if (last && (now-last)<50) return this._sc_scroller_armScrollTimer();
+    this._sc_scrollTimer = null; 
+    this._sc_lastScroll = now;
+
+    SC.RunLoop.begin();
     
     if (!this.get('isEnabled')) return ; // nothing to do.
-    var dir = this.get('layoutDirection');
-    var loc = 0;
-    switch(dir) {
+    
+    var layer = this.get('layer'), loc = 0 ;
+    switch (this.get('layoutDirection')) {
       case SC.LAYOUT_VERTICAL:
-        loc = this.$().get(0).scrollTop;
-        break;
+        this._sc_scrollValue = loc = layer.scrollTop ;
+        break ;
         
       case SC.LAYOUT_HORIZONTAL:
-        loc = this.$().get(0).scrollLeft;
-        break;
-      
-      default:
-        break;
+        this._sc_scrollValue = loc = layer.scrollLeft ;
+        break ;
     }
     
-    this.set('value', loc + this.get('minimum'));
+    this.set('value', loc + this.get('minimum')) ;
+    
+    SC.RunLoop.end();
   },
+  
+  /** @private */
+  _sc_scroller_valueDidChange: function() {
+    //console.log('%@._sc_scroller_valueDidChange called'.fmt(this));
 
-  /** @private Notify owner if it has a *ScrollOffset value */
-  _scroll_scrollDidChange2: function() {
-    // console.log('%@._scroll_scrollDidChange2 called'.fmt(this));
+    var v = (this.get('value')||0) - (this.get('minimum')||0),
+        layer;
+        
+    if (v !== this._sc_scrollValue) {
+      layer = this.get('layer');
+      switch (this.get('layoutDirection')) {
+        case SC.LAYOUT_VERTICAL:
+          layer.scrollTop = v;
+          break ;
+
+        case SC.LAYOUT_HORIZONTAL:
+          layer.scrollLeft = v;
+          break ;
+      }
+    }
+    
+    // notify owner if it has a different scroll value
     var key = this.get('ownerScrollValueKey');
     if (key && this.owner && (this.owner[key] !== undefined)) {
-      this.owner.setIfChanged(key, this.get('value'));
+      this.owner.setIfChanged(key, this.get('value')) ;
     }
   }.observes('value')
   
-}) ;
+});

data/frameworks/sproutcore/frameworks/desktop/views/segmented.js

@@ -168,7 +168,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     
     @property {Array}
   */
-  itemKeys: 'itemTitleKey itemValueKey itemIsEnabledKey itemIconKey itemWidthKey'.w(),
+  itemKeys: 'itemTitleKey itemValueKey itemIsEnabledKey itemIconKey itemWidthKey itemToolTipKey'.w(),
   
   /**
     This computed property is generated from the items array based on the 
@@ -190,11 +190,11 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     for(idx=0;idx<max;idx++) {
       item = items.objectAt(idx) ;
       if (SC.none(item)) continue; //skip is null or undefined
-
+      
       // if the item is a string, build the array using defaults...
       itemType = SC.typeOf(item);
       if (itemType === SC.T_STRING) {
-        cur = [item.humanize().titleize(), item, YES, null, null, idx] ;
+        cur = [item.humanize().titleize(), item, YES, null, null,  null, idx] ;
         
       // if the item is not an array, try to use the itemKeys.
       } else if (itemType !== SC.T_ARRAY) {
@@ -220,6 +220,9 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       
       // finally, be sure to loc the title if needed
       if (loc && cur[0]) cur[0] = cur[0].loc();
+
+      // finally, be sure to loc the toolTip if needed
+      if (loc && cur[5] && SC.typeOf(cur[5]) === SC.T_STRING) cur[5] = cur[5].loc();
       
       // add to return array
       ret[ret.length] = cur;
@@ -227,7 +230,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     
     // all done, return!
     return ret ;
-  }.property('items', 'itemTitleKey', 'itemValueKey', 'itemIsEnabledKey', 'localize', 'itemIconKey', 'itemWidthKey').cacheable(),
+  }.property('items', 'itemTitleKey', 'itemValueKey', 'itemIsEnabledKey', 'localize', 'itemIconKey', 'itemWidthKey', 'itemToolTipKey').cacheable(),
   
   /** If the items array itself changes, add/remove observer on item... */
   itemsDidChange: function() { 
@@ -301,16 +304,18 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     any "transient" states such as the global isEnabled property or selection.
   */
   renderDisplayItems: function(context, items) {
-    var title = null, icon = null, url=null, className=null, ic=null, item=null;
-    var value = this.get('value');
-    var isArray = SC.isArray(value);
-    var activeIndex = this.get('activeIndex');
-    var len= items.length;
-    for(var i=0; i< len; i++){
+    var value       = this.get('value'),
+        isArray     = SC.isArray(value),
+        activeIndex = this.get('activeIndex'),
+        len         = items.length,
+        title, icon, url, className, ic, item, toolTip, width, i;
+
+    for(i=0; i< len; i++){
       ic = context.begin('a').attr('href', 'javascript:;');
       item=items[i];
       title = item[0]; 
       icon = item[3];
+      toolTip = item[5];
       ic.addStyle('display', 'inline-block');
       ic.addClass('sc-segment');
       if(!item[2]){
@@ -335,6 +340,11 @@ SC.SegmentedView = SC.View.extend(SC.Control,
         width=item[4];
         ic.addStyle('width', width+'px');
       }
+
+      if(toolTip) {
+        ic.attr('title', toolTip) ;
+      }
+
       if (icon) {
         url = (icon.indexOf('/')>=0) ? icon : static_url('blank');
         className = (url === icon) ? '' : icon ;
@@ -348,6 +358,7 @@ SC.SegmentedView = SC.View.extend(SC.Control,
       ic.end();
     }   
   },  
+  
   // ..........................................................
   // EVENT HANDLING
   // 
@@ -425,16 +436,19 @@ SC.SegmentedView = SC.View.extend(SC.Control,
     will update the value if possible and fire the action.
   */
   triggerItemAtIndex: function(idx) {
-    var items = this.get('displayItems') ;
-    var item = items.objectAt(idx);
+    var items = this.get('displayItems'),
+        item  = items.objectAt(idx),
+        sel, value, val, empty, mult;
+        
     if (!item[2]) return this; // nothing to do!
 
-    var empty = this.get('allowsEmptySelection');
-    var mult = this.get('allowsMultipleSelection');
+    empty = this.get('allowsEmptySelection');
+    mult = this.get('allowsMultipleSelection');
+    
     
-    // get new value... bail if not enabled
-    var sel = item[1];
-    var value = this.get('value') ;
+    // get new value... bail if not enabled. Also save original for later.
+    sel = item[1];
+    value = val = this.get('value') ;
     if (!SC.isArray(value)) value = [value]; // force to array
     
     // if we do not allow multiple selection, either replace the current
@@ -470,23 +484,25 @@ SC.SegmentedView = SC.View.extend(SC.Control,
         break;
     }
     
-    // set the new value
-    this.set('value', value);
-    
     // also, trigger target if needed.
     var actionKey = this.get('itemActionKey');
     var targetKey = this.get('itemTargetKey');
     var action, target = null;
     var resp = this.getPath('pane.rootResponder');
-    if (actionKey && (item = this.get('items').objectAt(item[5]))) {
+
+    if (actionKey && (item = this.get('items').objectAt(item[6]))) {
       // get the source item from the item array.  use the index stored...
       action = item.get ? item.get(actionKey) : item[actionKey];
       if (targetKey) {
         target = item.get ? item.get(targetKey) : item[targetKey];
       }
-      
       if (resp) resp.sendAction(action, target, this, this.get('pane'));
     }
+
+    // Only set value if there is no action and a value is defined.
+    if(!action && val !== undefined) {
+      this.set('value', value);
+    }
     
     // if an action/target is defined on self use that also
     action =this.get('action');

data/frameworks/sproutcore/frameworks/desktop/views/select_field.js

@@ -27,6 +27,11 @@ SC.SelectFieldView = SC.FieldView.extend(
     An array of items that will form the menu you want to show.
   */ 
   objects: [],
+  
+  /**
+    Binding default for an array of objects
+  */ 
+  objectsBindingDefault: SC.Binding.multiple(),
 
   /**
     If you set this to a non-null value, then the name shown for each 
@@ -58,6 +63,11 @@ SC.SelectFieldView = SC.FieldView.extend(
     if true, the empty name will be localized.
   */
   localize: false,
+  
+  /**
+    if true, it means that the nameKey, valueKey or objects changed
+  */
+  cpDidChange: YES,
 
   /**
     override this to change the enabled/disabled state of menu items as they
@@ -95,13 +105,14 @@ SC.SelectFieldView = SC.FieldView.extend(
     call this method to rebuild the menu manually.  Normally you should not
     need to do this since the menu will be rebuilt as its data changes.
   */
-  rebuildMenu: function(context) {
+  rebuildMenu: function(context, firstTime) {
 
     // get list of objects.
     var nameKey = this.get('nameKey') ;
     var valueKey = this.get('valueKey') ;
     var objects = this.get('objects') ;
     var fieldValue = this.get('value') ;
+    var el, selectElement;
    
     // get the localization flag.
     var shouldLocalize = this.get('localize'); 
@@ -113,12 +124,26 @@ SC.SelectFieldView = SC.FieldView.extend(
     if (objects) {
       objects = this.sortObjects(objects) ; // sort'em.
       // var html = [] ;       
-   
+      if(!firstTime){
+        selectElement=this.$input()[0];
+        selectElement.innerHTML='';
+      }
+      
       var emptyName = this.get('emptyName') ;
       if (emptyName) {
         if (shouldLocalize) emptyName = emptyName.loc() ;
-        context.push('<option value="***">%@</option>'.fmt(emptyName)) ;
-        context.push('<option disabled="disabled"></option>') ;
+          if(firstTime){
+            context.push('<option value="***">%@</option>'.fmt(emptyName)) ;
+            context.push('<option disabled="disabled"></option>') ;
+          }else{
+            el=document.createElement('option');
+            el.value="***";
+            el.innerHTML=emptyName;
+            selectElement.appendChild(el);
+            el=document.createElement('option');
+            el.disabled="disabled";
+            selectElement.appendChild(el);
+          }
       }
    
       // generate option elements.
@@ -141,16 +166,27 @@ SC.SelectFieldView = SC.FieldView.extend(
    
           // render HTML
           var disable = (this.validateMenuItem && this.validateMenuItem(value, name)) ? '' : 'disabled="disabled" ' ;
-          context.push('<option %@value="%@">%@</option>'.fmt(disable,value,name)) ;
-   
+          if(firstTime){
+            context.push('<option %@value="%@">%@</option>'.fmt(disable,value,name)) ;
+          } else{
+            el=document.createElement('option');
+            el.value=value;
+            el.innerHTML=name;
+            if(disable.length>0) el.disable="disabled";
+            selectElement.appendChild(el);
+          }
         // null value means separator.
         } else {
-          context.push('<option disabled="disabled"></option>') ;
+          if(firstTime){
+            context.push('<option disabled="disabled"></option>') ;
+          }else{
+            el=document.createElement('option');
+            el.disabled="disabled";
+            selectElement.appendChild(el);
+          }
         }
       }, this );
    
-      // replace the contents of this HTML element.
-      // this.$input().html(context.join(""));//this.update(html.join("")); //TODO: this won't work
       this.setFieldValue(fieldValue);
    
     } else {
@@ -166,6 +202,7 @@ SC.SelectFieldView = SC.FieldView.extend(
    
   /* @private */
   mouseDown: function(evt) {
+    
     if (!this.get('isEnabled')) {
       evt.stop();
       return YES;
@@ -247,12 +284,14 @@ SC.SelectFieldView = SC.FieldView.extend(
           } // if (object &&...)
         } // while(--loc)
       } // if (this._objects)
-     this.rebuildMenu(context) ;
-    // } // if (this.didChangeFor...)
+     this.rebuildMenu(context, firstTime) ;
+     //} // if (this.didChangeFor...)
   },
 
-displayProperties: ['objects','nameKey','valueKey'],
+  displayProperties: ['objects','nameKey','valueKey'],
 
+  
+  
   // this is invoked anytime an item we are interested in in the menu changes
   // rebuild the menu when this happens, but only one time.
   _objectsItemObserver: function(item, key, value) {