sproutit-sproutcore 1.0.20090721145236 → 1.0.20090721145251

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

@@ -0,0 +1,68 @@
+/**
+  @class
+
+  @extends SC.ButtonView
+  @author Santosh Shanbhogue
+  @copyright 2008-2009, Sprout Systems, Inc. and contributors.
+  @version 1.0
+*/
+sc_require('views/button');
+SC.PopupButtonView = SC.ButtonView.extend({
+  /**
+    This property shows whether the menu is currently displayed or not
+  */
+  keyEquivalent: null,
+  classNames: ['sc-popup-button'],
+    
+  /**private */
+  acceptsFirstResponder: YES,
+  /**
+    Overriding the default SC.ButtonView#performKeyEquivalent method to pass 
+    it onto the menu
+    
+    @param {string} keystring method name corresponding to the keys pressed 
+    (i.e alt_shift_z)
+    @param {DOMMouseEvent} evt mousedown event
+  */
+  isSelected: NO,
+  performKeyEquivalent: function( charCode, evt )
+  {
+    if (!this.get('isEnabled')) return NO ;
+    var menu = this.get('menu') ;
+    return (!!menu && menu.performKeyEquivalent(charCode, evt)) ;
+  },
+  
+  /**
+    Menu attached to the popupButton
+    @default SC.MenuView
+  */
+  menu : null,
+  
+  /**
+    Binds the button's selection state to the menu's visibility.
+    @private
+  */
+  isSelectedBinding: '*menu.isVisibleInWindow',
+  
+  /**private*/
+  render: function(context,firstTime) {
+    sc_super() ;
+    var menu = this.get('menu') ;
+    if(firstTime && menu) {
+      menu.createLayer() ;
+    }
+  },
+  /**
+    Button action handler
+    @param {DOMMouseEvent} evt mouseup event that triggered the action
+  */
+  action: function( evt )
+  {
+    var menu = this.get('menu') ;
+    // no menu to toggle... bail...
+    if (!menu) return NO ;
+    menu.popup(this) ;
+    return YES;
+  }
+  
+});

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

@@ -0,0 +1,207 @@
+// ==========================================================================
+// 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
+
+  Displays a progress bar.  You can display both a defined and an 
+  indeterminate progressbar.  The progress bar itself is designed to be styled
+  using CSS classes with the following structure:
+  
+  <div class="sc-progress-view"><div class="inner"></div></div>
+  
+  The outer can form the boundary of the bar while the inner will be adjusted 
+  to fit the percentage of the progress.
+  
+  Creating a ProgressView accepts a number of properties, for example:
+  {
+    value: 50, 
+    minimum: 0, 
+    maximum: 100,
+    isIndeterminate: NO,
+    isEnabled: YES
+  }
+  
+  Default isEnabled value is YES.
+
+  @extends SC.View
+  @extends SC.Control
+  @since SproutCore 1.0
+*/
+SC.ProgressView = SC.View.extend(SC.Control, {
+  
+  // ........................................
+  // PROPERTIES
+  //
+
+  /**
+    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 will 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,
+
+  /** 
+    Set to true if the item in progress is indeterminate.  This may be 
+    overridden by the actual value.
+    @returns {Boolean} 
+  */
+  isIndeterminate: NO,
+  isIndeterminateBindingDefault: SC.Binding.bool(),
+
+  /**
+    Set to YES when the process is currently running.  This will cause the 
+    progress bar to animate, especially if it is indeterminate.  
+  */
+  isRunning: NO,
+  isRunningBindingDefault: SC.Binding.bool(),
+  
+  /**
+    Optionally specify the key used to extract the isIndeterminate value 
+    from the content object.  If this is set to null then the isIndeterminate 
+    value will not be derived from the content object.
+    
+    @property {String}
+  */
+  contentIsIndeterminateKey: null,
+
+  // ........................................
+  // STRUCTURE
+  //
+
+  classNames: 'sc-progress-view',
+  
+  // ........................................
+  // INTERNAL SUPPORT
+  //
+
+  _backgroundOffset: 0,
+  
+  // start animating at the end of the init() method.  note that we call this
+  // here because we want this to make sure this function is called anytime 
+  // the progress view is instantiated.
+  init: function() {
+    sc_super();
+    this.animateProgressBar(); // start animating...  
+  },
+  
+  // start/stop running animation based on isRunning state.
+  animateProgressBar: function() {
+    if (this.get('isRunning') && this.get('isVisibleInWindow')) {
+      this._animateProgressBar(500); // wait to start to avoid probs
+    }
+  }.observes('isRunning', 'isVisibleInWindow'),
+
+  _animateProgressBar: function(delay) {  
+    if (delay===0) delay = 1000/30;
+    if (this.get('isRunning') && this.get('isVisibleInWindow')) {
+      this.displayDidChange();
+      this.invokeLater(this._animateProgressBar, delay, 0);
+    }
+  },
+  
+  displayProperties: 'value minimum maximum isIndeterminate'.w(),
+  
+  render: function(context, firstTime) {
+    
+    var isIndeterminate = this.get('isIndeterminate');
+    var isRunning = this.get('isRunning');
+    var isEnabled = this.get('isEnabled');
+  
+    var offset = (isIndeterminate && isRunning) ? (-24+Math.floor(Date.now()/75)%24) : 0;
+  
+    // compute value for setting the width of the inner progress
+    var value;
+    if (!isEnabled) {
+      value = "0%" ;
+    } else if (isIndeterminate) {
+      value = "120%";
+    } else {
+      var minimum = this.get('minimum') || 0.0;
+      var maximum = this.get('maximum') || 1.0;
+      value = this.get('value') || 0.0;
+      value = (value - minimum) / (maximum - minimum);
+      if (value > 1.0) value = 1.0;
+
+      if(isNaN(value)) value = 0.0;
+      // cannot be smaller then minimum
+      if(value<minimum) value = 0.0;
+      // cannot be larger then maximum
+      if(value>maximum) value = 1.0;
+      value = (value * 100) + "%";
+    }
+
+    var classNames = {
+      'sc-indeterminate': isIndeterminate,
+      'sc-empty': (value <= 0),
+      'sc-complete': (value >= 100)
+    };
+    
+    if(firstTime) {
+      var classString = this._createClassNameString(classNames);
+      context.push('<div class="sc-outer-head"></div>');
+      context.push('<div class="sc-inner ', classString, '" style="width: ', value, ';left: ', offset, '">');
+      context.push('<div class="sc-inner-head"></div><div class="sc-inner-tail"></div></div><div class="sc-outer-tail"></div>');
+    }
+    else {
+      context.setClass(classNames);
+      this.$('.sc-inner').css('width', value).css('left',offset);
+    }
+    
+  },
+  
+  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();
+  },
+  
+  _createClassNameString: function(classNames) {
+    var classNameArray = [], key;
+    for(key in classNames) {
+      if(!classNames.hasOwnProperty(key)) continue;
+      if(classNames[key]) classNameArray.push(key);
+    }
+    return classNameArray.join(" ");
+  }
+  
+}) ;

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

@@ -0,0 +1,332 @@
+// ==========================================================================
+// 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 RadioView is used to create a group of radio buttons.  The user can use
+  these buttons to pick from a choice of options.
+  
+  This view renders simulated radio buttons that can display a mixed state and 
+  has other features not found in platform-native controls.
+  
+  The radio buttons themselves are designed to be styled using CSS classes with
+  the following structure:
+  
+  <label class="sc-radio-button">
+  <img class="button" src="some_image.gif"/>
+  <input type="radio" name="<sc-guid>" value=""/>
+  <span class="sc-button-label">Label for button1</span>
+  </label>
+  
+  Setting up a RadioView accepts a number of properties, for example:
+  {
+    items: [{ title: "Red", 
+              value: "red", 
+              enabled: YES, 
+              icon: "button_red" },
+            { title: "Green", 
+              value: "green", 
+              enabled: YES, 
+              icon: 'button_green' }],
+    value: 'red',
+    itemTitleKey: 'title',
+    itemValueKey: 'value',
+    itemIconKey: 'icon',
+    itemIsEnabledKey: 'enabled',
+    isEnabled: YES,
+    layoutDirection: SC.LAYOUT_HORIZONTAL
+  }
+  
+  Default layoutDirection is vertical. 
+  Default isEnabled is YES.
+  
+  The value property can be either a string, as above, or an array of strings
+  for pre-checking multiple values.
+  
+  The items array can contain either strings, or as in the example above a 
+  hash. When using a hash, make sure to also specify the itemTitleKey
+  and itemValueKey you are using. Similarly, you will have to provide 
+  itemIconKey if you are using icons radio buttons. The individual items 
+  enabled property is YES by default, and the icon is optional.
+  
+  @extends SC.FieldView
+  @since SproutCore 1.0
+*/
+SC.RadioView = SC.FieldView.extend(
+  /** @scope SC.RadioView.prototype */ {
+
+  // HTML design options
+  classNames: ['sc-radio-view'],
+
+  /**
+    The value of the currently selected item, and which will be checked in the 
+    UI. This can be either a string or an array with strings for checking 
+    multiple values.
+  */
+  value: null,
+  
+  layoutDirection: SC.LAYOUT_VERTICAL,
+  
+  // escape the HTML in label text
+  escapeHTML: YES,
+  
+  /** 
+    The items property can be either an array with strings, or a
+    hash. When using a hash, make sure to also specify the appropriate
+    itemTitleKey, itemValueKey, itemIsEnabledKey and itemIconKey.
+  */
+  items: [],
+
+  /** 
+    If items property is a hash, specify which property will function as
+    the title with this itemTitleKey property.
+  */
+  itemTitleKey: null,
+  
+  /** 
+    If items property is a hash, specify which property will function as
+    the value with this itemValueKey property.
+  */
+  itemValueKey: null,
+  
+  /** 
+    If items property is a hash, specify which property will function as
+    the value with this itemIsEnabledKey property.
+  */
+  itemIsEnabledKey: null,
+  
+  /** 
+    If items property is a hash, specify which property will function as
+    the value with this itemIconKey property.
+  */
+  itemIconKey: null,
+  
+  /** @private - 
+    Will iterate the items property to return an array with items that is 
+    indexed in the following structure:
+      [0] => Title (or label)
+      [1] => Value
+      [2] => Enabled (YES default)
+      [3] => Icon (image URL)
+  */
+  displayItems: function() {
+    var items = this.get('items'), loc = this.get('localize'),
+      titleKey = this.get('itemTitleKey'), valueKey = this.get('itemValueKey'),
+      isEnabledKey = this.get('itemIsEnabledKey'), 
+      iconKey = this.get('itemIconKey');
+      
+    var ret = [], max = (items)? items.length : 0 ;
+    var item, title, value, idx, isArray, isEnabled, icon;
+    
+    for(idx=0;idx<max;idx++) {
+      item = items.objectAt(idx); 
+      
+      // if item is an array, just use the items...
+      if (SC.typeOf(item) === SC.T_ARRAY) {
+        title = item[0];  value = item[1] ;
+        
+      // otherwise, possibly use titleKey,etc.
+      } else if (item) {
+        // get title.  either use titleKey or try to convert the value to a 
+        // string.
+        if (titleKey) {
+          title = item.get ? item.get(titleKey) : item[titleKey] ;
+        } else title = (item.toString) ? item.toString() : null;
+        
+        if (valueKey) {
+          value = item.get ? item.get(valueKey) : item[valueKey] ;
+        } else value = item ;
+        
+        if (isEnabledKey) {
+          isEnabled = item.get ? item.get(isEnabledKey) : item[isEnabledKey];
+        } else isEnabled = YES ;
+        
+        if (iconKey) {
+          icon = item.get ? item.get(iconKey) : item[iconKey] ;
+        } else icon = null ;
+        
+      // if item is nil, use somedefaults...
+      } else { title = value = icon = null; isEnabled = NO; }
+
+      // localize title if needed
+      if (loc) title = title.loc();
+      ret.push([title, value, isEnabled, icon]) ;
+    }
+    
+    return ret; // done!
+  }.property('items', 'itemTitleKey', 'itemValueKey', 'itemIsEnabledKey', 'localize', 'itemIconKey').cacheable(),
+  
+  /** If the items array itself changes, add/remove observer on item... */
+  itemsDidChange: function() {
+    if (this._items) {
+      this._items.removeObserver('[]',this,this.itemContentDidChange) ;
+    } 
+    this._items = this.get('items');
+    if (this._items) {
+      this._items.addObserver('[]', this, this.itemContentDidChange) ;
+    }
+    this.itemContentDidChange();
+  }.observes('items'),
+  
+  /** 
+    Invoked whenever the item array or an item in the array is changed.
+    This method will regenerate the list of items.
+  */
+  itemContentDidChange: function() {
+    this.notifyPropertyChange('displayItems');
+  },
+
+  // ..........................................................
+  // PRIVATE SUPPORT
+  // 
+  
+  $input: function() { return this.$('input'); },
+  
+  displayProperties: ['value', 'displayItems'],
+  
+  render: function(context, firstTime) {
+    // if necessary, regenerate the radio buttons
+    var item, idx, icon, name, itemsLength, url, className, disabled, labelText, selectionState, items = this.get('displayItems'), 
+      value = this.get('value'), isArray = SC.isArray(value);
+    
+    context.addClass(this.get('layoutDirection'));
+    
+    // isArray is set only when there are two active checkboxes 
+    // which can only happen with mixed state
+    if (isArray && value.length<=0) {
+      value = value[0]; isArray = NO;
+    }
+    
+    if (firstTime) {
+      // generate tags from this.
+      name = SC.guidFor(this); // name for this group
+      itemsLength = items.length;
+      for(idx=0;idx<itemsLength;idx++) {
+        item = items[idx];
+        
+        // get the icon from the item, if one exists...
+        icon = item[3];
+        if (icon) {
+          url = (icon.indexOf('/')>=0) ? icon : static_url('blank');
+          className = (url === icon) ? '' : icon ;
+          icon = '<img src="%@" class="icon %@" alt="" />'.fmt(url, className);
+        } else icon = '';
+        
+        selectionStateClassNames = this._getSelectionState(item, value, isArray, false);
+        disabled = (!item[2]) || (!this.get('isEnabled')) ? 'disabled="disabled" ' : '';
+        
+        labelText = this.escapeHTML ? SC.RenderContext.escapeHTML(item[0]) : item[0];
+        var blankImage = static_url('blank');
+        
+        context.push('<label class="sc-radio-button ', selectionStateClassNames, '">');
+        context.push('<img src="', blankImage, '" class="button" />');
+        context.push('<input type="radio" value="', idx, '" name="', name, '" ', disabled, '/>');
+        context.push('<span class="sc-button-label">', icon, labelText, '</span></label>');
+      }
+      
+      // first remove listener on existing radio buttons
+      this._field_setFieldValue(this.get('value'));
+    }
+    else {
+      // update the selection state on all of the DOM elements.  The options are
+      // sel or mixed.  These are used to display the proper setting...
+      this.$input().forEach(function(input) {
+        
+        input = this.$(input);
+        idx = parseInt(input.val(),0);
+        item = (idx>=0) ? items[idx] : null;
+        
+        input.attr('disabled', (!item[2]) ? 'disabled' : null);
+        selectionState = this._getSelectionState(item, value, isArray, true);
+
+        // set class of label
+        input.parent().setClass(selectionState);
+        
+        // avoid memory leaks
+        input = val = idx = selectionState = null;
+      }, this);
+    
+    }
+    
+  },
+  
+  /** @private - 
+    Will figure out what class names to assign each radio button.
+    This method can be invoked either as part of render() either when:
+    1. firstTime is set and we need to assign the class names as a string
+    2. we already have the DOM rendered but we just need to update class names
+       assigned to the the input field parent
+  */
+  _getSelectionState: function(item, value, isArray, shouldReturnObject) {
+      var sel, classNames;
+      
+      // determine if the current item is selected
+      if (item) {
+        sel = (isArray) ? (value.indexOf(item[1])>=0) : (value===item[1]);
+      } else {
+        sel = NO;
+      }
+      
+      // now set class names
+      classNames = {
+        sel: (sel && !isArray), mixed: (sel && isArray), disabled: (!item[2]) 
+      }
+      
+      if(shouldReturnObject) {
+        return classNames;
+      } else {
+        // convert object values to string
+        var classNameArray = [];
+        for(key in classNames) {
+          if(!classNames.hasOwnProperty(key)) continue;
+          if(classNames[key]) classNameArray.push(key);
+        }
+        return classNameArray.join(" ");
+      }
+      
+  },
+
+  getFieldValue: function() {
+    var val = this.$input().filter(function() { return this.checked; }).val();
+    var items = this.get('displayItems') ;
+    val = items[parseInt(val,0)];
+    
+    // if no items are selected there is a saved mixed value, return that...
+    return val ? val[1] : this._mixedValue;
+  },
+  
+  setFieldValue: function(v) {
+    // if setting a mixed value, actually clear everything and save mixed
+    // value
+    if (SC.isArray(v)) {
+      if (v.get('length')>1) {
+        this._mixedValue = v;
+        v = undefined ;
+      } else v = v.objectAt(0);
+    }
+
+    // v now contains one item only.  find the index in the display items
+    // array matching that value.
+    var items, idx;
+    if (v === undefined) {
+      idx = -1;
+    } else {
+      items = this.get('displayItems');
+      idx = items.indexOf(items.find(function(x) { return x[1] === v; }));
+    }
+    
+    // now loop through input elements. set their checked value accordingly
+    this.$input().forEach(function(input) {
+      input = SC.$(input);
+      input.attr('checked', parseInt(input.val(),0) === idx);
+      input = null;
+    });
+    
+    return this;
+  }
+
+});