sproutit-sproutcore 1.0.20090721145236 → 1.0.20090721145251

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

@@ -0,0 +1,331 @@
+// ========================================================================
+// SproutCore -- JavaScript Application Framework
+// Copyright ©2006-2008, Sprout Systems, Inc. and contributors.
+// Portions copyright ©2008 Apple, Inc.  All rights reserved.
+// ========================================================================
+
+/**
+  @class
+
+  SelectFieldView displays browser-native popup menu.  To use this view,
+  you should either bake into the HTML the preset list of options, or 
+  you can set the -objects property to an array of items to show.  The
+  value is current value of the select.
+  
+  @extends SC.FieldView
+  @author Charles Jolley
+  @author Mike Ball
+  @since SproutCore 1.0
+*/
+SC.SelectFieldView = SC.FieldView.extend(
+/** @scope SC.SelectFieldView.prototype */ {
+
+  tagName: 'select',
+  classNames: ['sc-select-field-view'],
+ 
+  /**
+    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 
+    menu item will be pulled from the object using the named property.
+    if this is null, the collection objects themselves will be used.
+  */
+  nameKey: null,
+
+  /**
+   If you set this to a non-null value, then the value of this key will
+   be used to sort the objects.  If this is not set, then nameKey will
+   be used.
+  */ 
+  sortKey: null,
+
+  /**
+     Set this to a non-null value to use a key from the passed set of objects
+     as the value for the options popup.  If you don't set this, then the
+     objects themselves will be used as the value.
+  */ 
+  valueKey: null,
+
+  /**
+    set this to non-null to place an empty option at the top of the menu.   
+  */
+  emptyName: null,
+
+  /**
+    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
+    are built.  Return false if you want the menu item to be disabled.
+    
+    @param itemValue the value for the item to validate
+    @param itemName the name of the menu item to validate
+    @returns YES if the item should be enabled, NO otherwise
+  */  
+  validateMenuItem: function(itemValue, itemName) {
+    return true ;
+  },
+
+  /**
+    override this method to implement your own sorting of the menu. By
+    default, menu items are sorted using the value shown or the sortKey
+    
+    @param objects the unsorted array of objects to display.
+    @returns sorted array of objects
+  */
+  sortObjects: function(objects) {
+    var nameKey = this.get('sortKey') || this.get('nameKey') ;
+    objects = objects.sort(function(a,b) {
+      if (nameKey) {
+        a = a.get ? a.get(nameKey) : a[nameKey] ;
+        b = b.get ? b.get(nameKey) : b[nameKey] ;
+      }
+      return (a<b) ? -1 : ((a>b) ? 1 : 0) ;
+    }) ;
+
+    return objects ;
+  },
+
+  /**
+    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, 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'); 
+   
+    // convert fieldValue to guid, if it is an object.
+    if (!valueKey && fieldValue) fieldValue = SC.guidFor(fieldValue) ;
+    if ((fieldValue === null) || (fieldValue === '')) fieldValue = '***' ;
+   
+    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() ;
+          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.
+      objects.forEach(function(object) {
+        if (object) {
+   
+          // either get the name from the object or convert object to string.
+          var name = nameKey ? (object.get ? object.get(nameKey) : object[nameKey]) : object.toString() ;
+   
+          // localize name if specified.
+          if(shouldLocalize)
+          {
+            name = name.loc();
+          }
+   
+          // get the value using the valueKey or the object if no valueKey.
+          // then convert to a string or use _guid if one of available.
+          var value = (valueKey) ? (object.get ? object.get(valueKey) : object[valueKey]) : object ;
+          if (value) value = (SC.guidFor(value)) ? SC.guidFor(value) : value.toString() ;
+   
+          // render HTML
+          var disable = (this.validateMenuItem && this.validateMenuItem(value, name)) ? '' : 'disabled="disabled" ' ;
+          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 {
+          if(firstTime){
+            context.push('<option disabled="disabled"></option>') ;
+          }else{
+            el=document.createElement('option');
+            el.disabled="disabled";
+            selectElement.appendChild(el);
+          }
+        }
+      }, this );
+   
+      this.setFieldValue(fieldValue);
+   
+    } else {
+      this.set('value',null);
+    }
+  },
+   
+  // .......................................
+  // PRIVATE
+  //
+   
+  $input: function() { return this.$(); },
+   
+  /* @private */
+  mouseDown: function(evt) {
+    
+    if (!this.get('isEnabled')) {
+      evt.stop();
+      return YES;
+    } else return sc_super();
+  },
+   
+  // when fetching the raw value, convert back to an object if needed...
+  /** @private */
+  getFieldValue: function() {
+    var value = sc_super(); // get raw value... 
+    var valueKey = this.get('valueKey') ;
+    var objects = this.get('objects') ;
+    
+    // Handle empty selection.
+    if (value == '***') {
+      value = null ;
+    
+    // If no value key was set and there are objects then match back to an
+    // object.
+    } else if (value && objects) {
+      // objects = Array.from(objects) ;
+      var loc = objects.length ;
+      var found = null ; // matching object goes here.
+      while(!found && (--loc >= 0)) {
+        var object = objects[loc] ;
+      
+        // get value using valueKey if there is one or use object
+        // map to _guid or toString.
+        if (valueKey) object = (object.get) ? object.get(valueKey) : object[valueKey] ;
+        var ov = (object) ? (SC.guidFor(object) ? SC.guidFor(object) : object.toString()) : null ;
+      
+        // use this object value if it matches.
+        if (value == ov) found = object ;
+      }
+    }
+    
+    return valueKey ? value : found ;
+  },
+  
+  // object changes to the objects array of objects if possible.
+  render: function(context, firstTime) {
+    // if (this.didChangeFor('_objO','objects','nameKey','valueKey')) {
+      var loc ;
+      var objects = this.get('objects') ;
+      var func = this._objectsItemObserver ;
+    
+      // stop observing old objects.
+      if (this._objects) {
+        loc = this._objects.length ;
+        while(--loc >= 0) {
+          var object = this._objects[loc] ;
+          if (object && object.removeObserver) {
+            if (this._nameKey && this._valueKey) {
+              object.removeObserver(this._nameKey, this, func) ;
+              object.removeObserver(this._valueKey, this, func) ;
+            } else {
+              object.removeObserver('*', this, func) ;
+            } // if (this._nameKey)
+          } // if (object &&...)
+        } // while(--loc)
+      } // if (this._objects)
+    
+      // start observing new objects.
+      this._objects = objects ;
+      this._nameKey = this.get('nameKey') ;
+      this._valueKey = this.get('valueKey') ;
+    
+      if (this._objects) {
+        loc = this._objects.length ;
+        while(--loc >= 0) {
+          object = this._objects[loc] ;
+          if (object && object.addObserver) {
+            if (this._nameKey && this._valueKey) {
+              object.addObserver(this._nameKey, this, func) ;
+              object.addObserver(this._valueKey, this, func) ;
+            } else {
+              object.addObserver('*', this, func) ;
+            } // if (this._nameKey)
+          } // if (object &&...)
+        } // while(--loc)
+      } // if (this._objects)
+     this.rebuildMenu(context, firstTime) ;
+     //} // if (this.didChangeFor...)
+  },
+
+  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) {
+    if (item.didChangeFor(SC.guidFor(this), key)) {
+      this.rebuildMenu() ;
+    }
+  },
+
+  fieldDidFocus: function() {
+    var isFocused = this.get('isFocused');
+    if (!isFocused) this.set('isFocused', true);
+  },
+
+  fieldDidBlur: function() {
+    var isFocused = this.get('isFocused');
+    if (isFocused) this.set('isFocused', false);
+  },
+
+  _isFocusedObserver: function() {
+    this.$().setClass('focus', this.get('isFocused'));
+  }.observes('isFocused'),
+
+  didCreateLayer: function() {
+    var input = this.$();
+    SC.Event.add(input, 'blur', this, this.fieldDidBlur);
+    SC.Event.add(input, 'focus',this, this.fieldDidFocus);
+    return sc_super();
+  },
+  
+  willDestroyLayer: function() {
+    var input = this.$input();
+    SC.Event.remove(input, 'focus', this, this.fieldDidFocus);
+    SC.Event.remove(input, 'blur', this, this.fieldDidBlur);
+    return sc_super();
+  }
+ 
+});

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

@@ -0,0 +1,37 @@
+// ========================================================================
+// SproutCore -- JavaScript Application Framework
+// Copyright ©2006-2008, Sprout Systems, Inc. and contributors.
+// Portions copyright ©2008 Apple, Inc.  All rights reserved.
+// ========================================================================
+
+/**
+  @class
+
+  Displays a horizontal or vertical separator line.  Simply create one of 
+  these views and configure the layout direction and layout frame.
+  
+  @extends SC.View
+  @since SproutCore 1.0
+*/
+SC.SeparatorView = SC.View.extend(
+/** @scope SC.SeparatorView.prototype */ {
+
+  classNames: ['sc-separator-view'],
+  tagName: 'span',
+
+  /** 
+    Select the direction of the separator line.  Must be one of SC.LAYOUT_VERTICAL or SC.LAYOUT_HORIZONTAL.
+    
+    @property {String}
+  */
+  layoutDirection: SC.LAYOUT_HORIZONTAL,
+
+  render: function(context, firstTime) {
+
+    context.push('<span></span>');
+	context.addClass(this.get('layoutDirection'));
+  }
+
+
+
+});

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

@@ -0,0 +1,180 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2009 Apple, Inc. All rights reserved.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/** @class
+
+  A SliderView shows a horizontal slider control that you can use to set 
+  variable values.
+
+  You can use a slider view much like you would any other control.  Simply
+  set the value or content/contentValueKey to whatever value you want to 
+  display.  You can also set the maximumValue and minValue properties to 
+  determine the mapping of the control to its children.
+  
+  @extends SC.View
+  @extends SC.Control
+  @since SproutCore 1.0
+  @test in progress
+*/
+SC.SliderView = SC.View.extend(SC.Control,
+/** @scope SC.SliderView.prototype */ {
+  
+  classNames: 'sc-slider-view',
+  
+  /** 
+    The DOM element that displays the handle.  This element will have its
+    top-left corner updated to reflect the current state of the slider.  Use
+    margin-offsets to properly position your handle over this location.
+  */
+  handleSelector: 'img.sc-handle',
+  
+  /**
+    Bind this to the current value of the progress bar.  Note that by default 
+    an empty value will disable the progress bar and a multiple value too make 
+    it indeterminate.
+  */
+  value: 0.50,
+  valueBindingDefault: SC.Binding.single().notEmpty(),
+  
+  /**
+    The minimum value of the progress.
+  */ 
+  minimum: 0,
+  minimumBindingDefault: SC.Binding.single().notEmpty(),
+
+  /**
+    Optionally specify the key used to extract the minimum progress value 
+    from the content object.  If this is set to null then the minimum value
+    will not be derived from the content object.
+    
+    @property {String}
+  */
+  contentMinimumKey: null,
+  
+  /**
+    The maximum value of the progress bar.
+  */
+  maximum: 1.0,
+  maximumBindingDefault: SC.Binding.single().notEmpty(),
+
+  /**
+    Optionally specify the key used to extract the maximum progress value 
+    from the content object.  If this is set to null then the maximum value
+    will not be derived from the content object.
+    
+    @property {String}
+  */
+  contentMaximumKey: null,
+  
+  /**
+    Optionally set to the minimum step size allowed.
+    
+    All values will be rounded to this step size when displayed.
+  */
+  step: 0.1,
+
+  // ..........................................................
+  // INTERNAL PROPERTIES
+  // 
+  
+  displayProperties: 'value minimum maximum'.w(),
+  
+  render: function(context, firstTime) {
+    sc_super();
+    
+    var min = this.get('minimum');
+    var max = this.get('maximum');
+    var value = this.get('value');
+
+    // determine the constrained value.  Must fit within min & max
+    value = Math.min(Math.max(value, min), max);
+
+    // limit to step value
+    var step = this.get('step');
+    if (!SC.none(step) && step !== 0) {
+      value = Math.round(value / step) * step;
+    }
+    
+    // determine the percent across
+    value = Math.floor((value - min) / (max - min) * 100);
+    
+    if(firstTime) {
+      var blankImage = static_url('blank');
+      context.push('<span class="sc-inner">');
+      context.push('<span class="sc-leftcap"></span>');
+      context.push('<span class="sc-rightcap"></span>');
+      context.push('<img src="', blankImage, '" class="sc-handle" style="left: ', value, '%" />');
+      context.push('</span>');
+    }
+    else {
+      this.$(this.get('handleSelector')).css('left', value + "%");
+    }
+    
+  },
+  
+  _isMouseDown: NO,
+  
+  mouseDown: function(evt) {
+    if (!this.get('isEnabled')) return YES; // nothing to do...
+    
+    this.set('isActive', YES);
+    this._isMouseDown = YES ;
+    
+    return this._triggerHandle(evt);
+  },
+  
+  // mouseDragged uses same technique as mouseDown.
+  mouseDragged: function(evt) { 
+    return this._isMouseDown ? this._triggerHandle(evt) : YES; 
+  },
+  
+  // remove active class
+  mouseUp: function(evt) {
+    if (this._isMouseDown) this.set('isActive', NO);
+    var ret = this._isMouseDown ? this._triggerHandle(evt) : YES ;
+    this._isMouseDown = NO;
+    return ret ;
+  },
+  
+  /** @private
+    Updates the handle based on the mouse location of the handle in the
+    event.
+  */
+  _triggerHandle: function(evt) {
+    var loc = this.convertFrameFromView({ x: evt.pageX }).x ;
+    var width = this.get('frame').width ;
+
+    // constrain loc to 8px on either side (left to allow knob overhang)
+    loc = Math.max(Math.min(loc,width-8), 8) - 8;
+    width -= 16 ; // reduce by margin
+    
+    // convert to percentage
+    loc = loc / width ;
+    
+    var min = this.get('minimum'),max=this.get('maximum');  
+    var step = this.get('step'), v=this.get('value');
+
+    // convert to value using minimum/maximum then constrain to steps
+    loc = min + ((max-min)*loc);
+    if (step !== 0) loc = Math.round(loc / step) * step ;
+
+    // if changes by more than a rounding amount, set v.
+    if (Math.abs(v-loc)>=0.01) this.set('value', loc); // adjust 
+    return YES ;
+  },
+
+  contentPropertyDidChange: function(target, key) {
+    var content = this.get('content');
+    this.beginPropertyChanges()
+      .updatePropertyFromContent('value', key, 'contentValueKey', content)
+      .updatePropertyFromContent('minimum', key, 'contentMinimumKey', content)
+      .updatePropertyFromContent('maximum', key, 'contentMaximumKey', content)
+      .updatePropertyFromContent('isIndeterminate', key, 'contentIsIndeterminateKey', content)
+    .endPropertyChanges();
+  }  
+  
+});