sproutit-sproutcore 1.0.203 → 1.0.20090721145236

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

@@ -1,207 +0,0 @@
-// ==========================================================================
-// 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

@@ -1,332 +0,0 @@
-// ==========================================================================
-// 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;
-  }
-
-});