sproutit-sproutcore 1.0.0.20090407205609 → 1.0.0.20090408130025

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

@@ -0,0 +1,437 @@
+// ==========================================================================
+// 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)
+// ==========================================================================
+sc_require('views/button');
+sc_require('views/separator');
+
+/**
+  @class SC.MenuItemView
+  @extends SC.ButtonView
+  @since SproutCore 1.0
+*/
+SC.MenuItemView = SC.ButtonView.extend(
+/** @scope SC.MenuItemView.prototype */{
+  classNames: ['sc-menu-item'],
+  tagName: 'div',
+  anchor:null,
+  parentPane:null,
+  acceptsFirstResponder:YES,
+  // ..........................................................
+  // KEY PROPERTIES
+  // 
+  /**
+    The content object the menu view will display.
+
+    @type Object
+  */
+  content: null,
+  
+  /**
+    The cached Content to verify that the content has changed or not
+
+    @type Object
+  */
+  cachedContent:null,
+
+  /**
+    This returns true if the child view is a menu list view.
+    This property can be over written to have other child views as well.
+
+    @type View
+  */
+  childView: null,
+
+  /**
+    This returns true if the child view is a menu list view.
+    This property can be over written to have other child views as well.
+
+    @type Boolean
+  */
+  isSubMenuViewVisible: null,
+  
+  /**
+    This will return true if the menu item is a seperator.
+
+    @type Boolean
+  */
+  isSeperator: NO,
+
+  /**
+    (displayDelegate) The name of the property used for label itself   
+    If null, then the content object itself will be used.
+
+    @type String
+  */
+  contentValueKey: null,
+
+  /**
+    (displayDelegate) The name of the property used to determine if the menu 
+    item is a branch or leaf (i.e. if the branch arow should be displayed to 
+	the right edge.)   
+    If this is null, then the branch arrow will be collapsed.
+
+    @type String
+  */
+  contentIsBranchKey: null,
+
+  /**
+    The name of the property which will set the image for the short cut keys
+
+    @type String
+  */
+  shortCutKey: null,
+
+  /**
+    The name of the property which will set the icon image for the menu item.
+
+    @type String
+  */
+  contentIconKey: null,
+
+  /*
+    The name of the property which will set the checkbox image for the menu 
+    item.
+
+    @type String
+  */
+  contentCheckboxKey: null,
+
+  /*
+    The name of the property which will set the checkbox image for the menu 
+    item.
+
+    @type String
+  */
+  contentActionKey: null,
+  
+  /**
+    The name of the property which will set the checkbox state
+
+    @type Boolean
+  */
+  isCheckboxChecked: NO,  
+  
+  /**
+    Describes the width of the menu item    
+    Default it to 100
+
+    @type Integer
+  */
+  itemWidth: 100,
+  
+  /**
+    Describes the height of the menu item    
+    Default it to 20
+
+    @type Integer
+  */
+  itemHeight: 20,
+  
+  /**
+    Property specifies which menu item the mouseover stops at
+
+    @type Boolean
+  */
+  isSelected : NO,
+
+  /**
+    Sub Menu Items 
+    If this is null then there is no branching
+
+    @type View
+  */
+  subMenu:null,
+  
+  hasMouseExited:NO,
+  /**
+    This will hold the properties that can trigger a change in the diplay
+  */
+  displayProperties: ['contentValueKey', 'contentIconKey', 'shortCutKey',
+                  'contentIsBranchKey','isCheckboxChecked','itemHeight',
+                   'subMenu'],
+
+  /**
+    Fills the passed html-array with strings that can be joined to form the
+    innerHTML of the receiver element.  Also populates an array of classNames
+    to set on the outer element.
+    
+    @param {SC.RenderContext} context
+    @param {Boolean} firstTime
+    @returns {void}
+  */
+  render: function(context, firstTime) {
+    if (SC.BENCHMARK_RENDER) {
+
+      var bkey = '%@.render'.fmt(this) ;
+      SC.Benchmark.start(bkey);
+    }
+	
+    var content = this.get('content') ;
+    if (this.cachedContent && this.cachedContent == content) return; 
+    this.cachedContent = content ;
+
+    var del = this.displayDelegate ;
+    var key, value ;
+    var ic ;
+    var menu = this.parentMenu();
+    var itemWidth = this.get('itemWidth') || menu.layout.width ;
+    var itemHeight = this.get('itemHeight') || menu.layout.height ;
+    this.set('itemWidth',itemWidth);
+    this.set('itemHeight',itemHeight);
+      //handle seperator    
+    ic = context.begin('a').attr('href', 'javascript:;') ;   
+    key = this.getDelegateProperty(del, 'isSeparatorKey') ;
+    value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+    if (value) {
+      this.set('itemHeight',5) ;
+      this.adjust({height:this.get('itemHeight')}) ;
+      ic = ic.begin('span').addClass('separator') ;
+      ic = ic.end() ;
+      return ;
+    } else {
+      //handle checkbox
+      key = this.getDelegateProperty(del, 'contentCheckboxKey') ;
+      if (key) {
+        value = content ? (content.get ? content.get(key) : content[key]) : NO ;
+        if (value) {
+        ic.begin('div').addClass('checkbox').end() ;
+        }
+      }
+
+      // handle image -- always invoke
+      key = this.getDelegateProperty(del, 'contentIconKey') ;
+      value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+      if(value && SC.typeOf(value) !== SC.T_STRING) value = value.toString() ;
+      if(value) this.renderImage(ic, value) ;
+
+      // handle label -- always invoke
+      key = this.getDelegateProperty(del, 'contentValueKey') ;
+      value = (key && content) ? (content.get ? content.get(key) : content[key]) : content ;
+      if (value && SC.typeOf(value) !== SC.T_STRING) value = value.toString();
+      this.renderLabel(ic, value||'') ;
+
+      // handle branch
+      key = this.getDelegateProperty(del, 'contentIsBranchKey') ;
+      value = (key && content) ? (content.get ? content.get(key) : content[key]) : NO ;
+      if (value) {       
+        this.renderBranch(ic, value) ;
+        ic.addClass('has-branch') ;
+      } else { // handle action
+        
+        key = this.getDelegateProperty(del, 'action') ;
+        value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+        if (value && isNaN(value)) this.set('action', value) ;
+
+        key = this.getDelegateProperty(del, 'target') ;
+        value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+        if (value && isNaN(value)) this.set('target', value) ;
+
+        // handle short cut keys
+        if (this.getDelegateProperty(del, 'shortCutKey')) {
+        /* handle short cut keys here */
+          key = this.getDelegateProperty(del, 'shortCutKey') ;
+          value = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
+          if (value) {
+            this.renderShortcut(ic, value) ;
+            ic.addClass('shortcutkey') ;
+          }
+        }
+      }
+    }
+    ic.end();
+    if (SC.BENCHMARK_RENDER) SC.Benchmark.end(bkey);
+  },
+      
+  /** 
+   Generates the image used to represent the image icon. override this to 
+   return your own custom HTML
+ 
+   @param {SC.RenderContext} context the render context
+   @param {Boolean} hasBranch YES if the item has a branch
+   @returns {void}
+  */
+  renderImage: function(context, image) {
+    // get a class name and url to include if relevant
+
+    var url = undefined, className = undefined ;
+    if (image && SC.ImageView.valueIsUrl(image)) {
+      url = image ;
+      className = '' ;
+    } else {
+      className = image ;
+      url = sc_static('blank.gif') ; 
+    }
+    // generate the img element...
+    context.begin('img').addClass('image').addClass(className).attr('src', url).end() ;
+  },
+
+  renderLabel: function(context, label) {
+    context.push("<span class='value'>"+label+"</span>") ;
+  },
+  
+  /** 
+   Generates the string used to represent the branch arrow. override this to 
+   return your own custom HTML
+ 
+   @param {SC.RenderContext} context the render context
+   @param {Boolean} hasBranch YES if the item has a branch
+   @returns {void}
+  */
+
+  renderBranch: function(context, hasBranch) {
+
+    var a = '>' ;
+    var url = sc_static('blank.gif') ;
+    context.push('<span class= "hasBranch">'+a+'</span>') ; 
+  },
+
+  /** 
+   Generates the string used to represent the short cut keys. override this to 
+   return your own custom HTML
+
+   @param {SC.RenderContext} context the render context
+   @param {Boolean} hasBranch YES if the item has a branch
+   @returns {void}
+  */
+  renderShortcut: function(context, shortcut) {
+    context.push('<span class = "shortCut">' + shortcut + '</span>') ;
+  },
+
+  superClass: NO,
+
+  getAnchor: function() {
+    var anchor = this.get('anchor');
+    if(anchor.kindOf(SC.MenuItemView)) return anchor;
+    return null;
+  },
+  //..........................................
+  //Mouse Events Handling
+  //..........................................
+  
+  mouseUp: function(evt) {
+    if (!this.isEnabled) return YES ;
+    this.set('hasMouseExited',NO);
+    this.isSelected = YES ;
+    var key = this.get('contentCheckboxKey') ;
+    var content = this.get('content') ;
+    if (key) {
+      if (content && content.get(key)) {
+        this.$('.checkbox').setClass('inactive', YES) ;
+        content.set(key, NO) ;
+      } else {
+        this.$('.checkbox').removeClass('inactive') ;
+        content.set(key, YES) ;
+      }
+    }
+    this._action(evt);
+    var anchor = this.getAnchor();
+    if(anchor) anchor.mouseUp(evt);
+    var menu = this.parentMenu();
+    if(menu) menu.remove();
+    return YES ;
+  },
+
+  isCurrent: NO,
+  
+  /** @private
+    This has been over ridden from button view to prevent calling of render 
+    method (When isActive property is changed).
+  */
+  mouseEntered: function(evt) {
+    if (!this.isEnabled) return YES ;
+    this.becomeFirstResponder();
+    this.isSelected = YES ;
+
+    var parentPane = this.parentMenu() ;
+    if(parentPane) parentPane.set('currentItemSelected', this) ;
+
+    var key = this.get('contentIsBranchKey') ;
+    if(key){
+      var content = this.get('content');
+      var value = (key && content) ? (content.get ? content.get(key) : content[key]) : NO ;
+      if(value) this.invokeLater(this.branching,100);
+    }
+    this.$().addClass('sel');
+	  return YES;
+  },
+
+  isSubMenuAMenuPane: function(subMenu) {
+    if(subMenu.kindOf(SC.MenuPane)) return YES;
+    return NO;  
+  },
+  
+  hasSubMenu: function(){
+    var content = this.get('content') ;
+    var subMenu = content.get('subMenu') ;
+    if(subMenu) return subMenu;
+    return null;
+  },
+  
+  branching: function() {
+    if(this.get('hasMouseExited')) {
+      this.set('hasMouseExited',NO);
+      return;
+    }
+    var subMenu = this.hasSubMenu();
+    if(subMenu) {
+	    subMenu.set('anchor', this);
+      if(this.isSubMenuAMenuPane(subMenu)) {
+          subMenu.popup(this,[0,0,0]) ;
+          var context = SC.RenderContext(this) ;
+          context = context.begin(subMenu.get('tagName')) ;
+          subMenu.prepareContext(context, YES) ;
+          context = context.end() ;
+      }
+    }
+  },
+  
+  parentMenu: function() {
+    return this.get('parentPane');
+  },
+
+  mouseExited: function(evt) {
+    this.loseFocus();
+    return YES ;
+  },
+  
+  mouseDown: function(evt) {
+    return YES;
+  },
+
+  loseFocus: function() {
+    if(!this.hasSubMenu()) this.$().removeClass('sel');
+    this.set('hasMouseExited',YES);
+    this.set('isSelected',NO) ;
+    var menu = this.parentMenu();
+    if(menu) menu.set('currentItemSelected', null) ;
+  },
+    
+  moveUp: function(sender,evt) {
+    var menu = this.parentMenu();
+    if(menu) {
+      menu.moveUp(this);
+    }
+    return YES;
+  },
+  
+  moveDown: function(sender,evt) {
+    var menu = this.parentMenu();
+    if(menu) {
+      menu.moveDown(this);
+    }
+    return YES;
+  },
+  
+  keyDown: function(evt) {
+    // console.log('keyDown called on %@'.fmt(this));
+    return this.interpretKeyEvents(evt) ;
+  },
+  
+  keyUp: function(evt) {
+    return YES;
+  }
+
+});

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

@@ -0,0 +1,62 @@
+/**
+  @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'],
+	/**
+	  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 false ;
+	    var menu = this.get('menu') ;
+	    return (!!menu && menu.performKeyEquivalent(charCode, evt)) ;
+	  },
+	  /**
+	    this is the Menu View associated with Popup Button
+	  */
+	  menu: null,
+
+	  // /**
+	  //       Binds the button's selection state to the menu's visibility.
+	  //       @private
+	  //     */
+	  //     isSelectedBinding: '*menu.isVisible',
+	  /**
+	    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 false ;
+	    if (!this._didFirstRun) {
+	    // for some reason the menu#isVisible is true the first time we get 
+	    // it... and since this#isSelected is bound to it... we get an incorrect 
+	    // conditional check. hacking it here to keep moving.
+	    menu.popup(this) ;
+	    this._didFirstRun = true ;
+	    } else {
+	      // toggle the menu...
+	      this.get('isSelected') ? menu.set('isVisible', false) : menu.popup(this,SC.PICKER_MENU) ;
+	    }
+      return true;
+	  }
+});

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) ? (-16+Math.floor(Date.now()/75)%16) : 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 = [];
+    for(key in classNames) {
+      if(!classNames.hasOwnProperty(key)) continue;
+      if(classNames[key]) classNameArray.push(key);
+    }
+    return classNameArray.join(" ");
+  }
+  
+}) ;