sproutcore 1.0.1046 → 1.0.1049.pre.1

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

@@ -0,0 +1,249 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2010 Sprout Systems, Inc. and contributors.
+//            Portions ©2008-2010 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/** @class
+  Master/Detail view is a simple view which manages a master view and a detail view.
+  This is not all that different from a SplitView, except that, for the moment (this
+  will hopefully change when SplitView becomes more palatable) the split point is not 
+  actually changeable and the split is always vertical.
+  
+  So, why use it when it is limited? Well, simple: it can hide the left side. Completely.
+  As in, there will be no split divider anymore. There will be no nothing. It will be gone.
+  Removed from DOM. Gone on to meet its maker, bereft of life, it rests in peace. If it weren't
+  for the possibility of opening it up in a picker it would be pushing up the daisies!
+  
+  Yes, it has a built-in option for opening the master portion in a PickerPane. This is THE KILLER
+  FEATURES. It is a command on the view: popupMasterPicker. And it is really really easy to call:
+  make a toolbar button with an action "popupMasterPicker". That's it.
+  
+  An interesting feature is that it sets the master and detail views' masterIsVisible settings,
+  allowing them to know if the master is visible.
+  
+  @since SproutCore 1.2
+*/
+require("views/workspace");
+require("views/toolbar");
+
+SC.VERTICAL_ORIENTATION = "vertical";
+SC.HORIZONTAL_ORIENTATION = "horizontal";
+
+SC.MasterDetailView = SC.View.extend({
+  classNames: ["sc-master-detail-view"],
+  
+  /**
+    The master view. For your development pleasure, it defaults to a
+    WorkspaceView with a top toolbar.
+  */
+  masterView: SC.WorkspaceView.extend({
+    topToolbar: SC.ToolbarView.extend({
+    }),
+    contentView: SC.View.extend({ backgroundColor: "white" })
+  }),
+  
+  /**
+    The detail view. For your development experience, it defaults to holding
+    a top toolbar view with a button that closes/shows master. Come take a peek at
+    the code to see what it looks like--it is so simple.
+  */
+  detailView: SC.WorkspaceView.extend({
+    topToolbar: SC.ToolbarView.extend({
+      childViews: "showHidePicker".w(),
+      showHidePicker: SC.ButtonView.extend({
+        layout: { left: 7, centerY: 0, height: 30, width: 100 },
+        controlSize: SC.AUTO_CONTROL_SIZE,
+        title: "Picker",
+        action: "toggleMasterPicker",
+        isVisible: NO,
+        isVisibleBinding: ".parentView.masterIsHidden"
+      })
+    })
+  }),
+  
+  /**
+    Whether to automatically hide the master panel in portrait orientation. 
+    
+    By default, this property is a computed property based on whether the browser is a touch
+    browser. Your purpose in overriding it is either to disable it from automatically
+    disappearing on iPad and other touch devices, or force it to appear when a desktop
+    browser changes.
+  */
+  autoHideMaster: function() {
+    if (SC.platform.touch) return YES;
+    return NO;
+  }.property().cacheable(),
+  
+  /**
+    The width of the master view.
+    @default 250
+  */
+  masterWidth: 250,
+  
+  /**
+    A property (computed) that says whether the master view is hidden.
+  */
+  masterIsHidden: function() {
+    if (!this.get("autoHideMaster")) return NO;
+    if (this.get("orientation") === SC.HORIZONTAL_ORIENTATION) return NO;
+    return YES;
+  }.property("autoHideMaster", "orientation"),
+  
+  /**
+    Tracks the orientation of the view. Is a computed property. Property, people, not a method.
+  */
+  orientation: function() {
+    var f = this.get("frame");
+    if (f.width > f.height) return SC.HORIZONTAL_ORIENTATION;
+    else return SC.VERTICAL_ORIENTATION;
+  }.property("frame").cacheable(),
+  
+  
+  /**
+    If the master is hidden, this toggles the master picker pane.
+    
+    Of course, since pickers are modal, this actually only needs to handle showing.
+  */
+  toggleMasterPicker: function(view) {
+    if (!this.get("masterIsHidden")) return;
+    if (this._picker && this._picker.get("isVisibleInWindow")) {
+      this.hideMasterPicker();
+    } else {
+      this.showMasterPicker(view);
+    }
+  },
+  
+  showMasterPicker: function(view) {
+    if (this._picker && this._picker.get("isVisibleInWindow")) return;
+    if (!this._picker) {
+      var pp = this.get("pickerPane");
+      this._picker = pp.create({ });
+      this._picker.set("contentView", this.get("masterView"));
+      this._picker.set("extraRightOffset", this.get("pointerDistanceFromEdge"));
+    }
+    this.showPicker(this._picker, view);
+  },
+  
+  hideMasterPicker: function() {
+    if (this._picker && this._picker.get("isVisibleInWindow")) {
+      this.hidePicker(this._picker);
+    }
+  },
+  
+  showPicker: function(p, view) {
+    p.popup(view, SC.PICKER_POINTER, [3, 0, 1, 2, 3], [9, -9, -18, 18]);
+  },
+  
+  hidePicker: function(p) {
+    p.remove();
+  },
+  
+  /**
+    The picker pane class from which to create a picker pane.
+    
+    This defaults to one with a special theme.
+  */
+  pickerPane: SC.PickerPane.extend({
+    layout: { width: 250, height: 480 },
+    theme: "popover"
+  }),
+  
+  /// INTERNAL CODE. HERE, THERE BE MONSTERS!
+  _picker: null,
+  pointerDistanceFromEdge: 46,
+  
+  
+  /**
+    @private
+    Updates masterIsHidden in child views.
+  */
+  _scmd_masterIsHiddenDidChange: function() {
+    var mih = this.get("masterIsHidden");
+    this.get("masterView").set("masterIsHidden", mih);
+    this.get("detailView").set("masterIsHidden", mih);
+  }.observes("masterIsHidden"),
+  
+  /**
+    @private
+    When the frame changes, we don't need to do anything. We use smart positioning.
+    However, if the orientation were to change, well, then we might need to do something.
+  */
+  _scmd_orientationDidChange: function() {
+    this.invokeOnce("_scmd_tile");
+  }.observes("orientation"),
+  
+  /**
+    Observes properties which require retiling.
+  */
+  _scmd_retileProperties: function() {
+    this.invokeOnce("_scmd_tile");
+  }.observes("masterIsHidden", "masterWidth"),
+  
+  /**
+    Creates the child views. Specifically, instantiates master and detail views.
+  */
+  createChildViews: function() {
+    var master = this.get("masterView");
+    master = this.masterView = this.createChildView(master);
+
+    var detail = this.get("detailView");
+    detail = this.detailView = this.createChildView(detail);
+    this.appendChild(detail);
+
+    this.invokeOnce("_scmd_tile");
+  },
+  
+  _masterIsDrawn: NO, // whether the master is in the view
+  /**
+    @private
+    Tiles the views as necessary.
+  */
+  _scmd_tile: function() {
+    // first, determine what is and is not visible.
+    var masterIsVisible = !this.get("masterIsHidden");
+    
+    // now, tile
+    var masterWidth = this.get("masterWidth"),
+        master = this.get("masterView"),
+        detail = this.get("detailView");
+    
+    if (masterIsVisible) {
+      // hide picker if needed
+      this.hideMasterPicker();
+      
+      // draw master if needed
+      if (!this._masterIsDrawn) {
+        this.appendChild(master);
+        this._masterIsDrawn = YES;
+      }
+      
+      // set master layout
+      master.set("layout", {
+        left: 0, top: 0, bottom: 0, width: masterWidth
+      });
+      
+      // and child, naturally
+      var extra = this.renderer ? this.renderer.BORDER : 0;
+      detail.set("layout", { left: masterWidth + extra, right: 0, top: 0, bottom: 0 });
+    } else {
+      // remove master if needed
+      if (this._masterIsDrawn) {
+        this.removeChild(master);
+        this._masterIsDrawn = NO;
+      }
+      
+      // and child, naturally
+      detail.set("layout", { left: 0, right: 0, top: 0, bottom: 0 });
+    }
+  },
+  
+  createRenderer: function(t) {
+    return t.masterDetail();
+  },
+  
+  updateRenderer: function(r) {
+    
+  }
+});

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

@@ -2,257 +2,182 @@
 // 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)
+// License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 sc_require('views/button') ;
 sc_require('views/separator') ;
 
-// Constants
-SC.BENCHMARK_MENU_ITEM_RENDER = YES ;
-
 /**
-  @class SC.MenuItemView
+  @class
+
+  An SC.MenuItemView is created for every item in a menu.
+
   @extends SC.ButtonView
   @since SproutCore 1.0
 */
-SC.MenuItemView = SC.ButtonView.extend( SC.ContentDisplay,
+SC.MenuItemView = SC.View.extend( SC.ContentDisplay,
 /** @scope SC.MenuItemView.prototype */{
-  
-  
+
   classNames: ['sc-menu-item'],
-  tagName: 'div',
+
+  escapeHTML: YES,
 
   /**
-    This provides the parentPane for the current MenuItemView
-  */
-  parentPane: null,
-  
-  /** 
     @private
     @property
     @type {Boolean}
   */
   acceptsFirstResponder: YES,
-
-  // ..........................................................
-  // KEY PROPERTIES
-  // 
-  /**
-    The content object the menu view will display.
-
-    @type Object
-  */
-  content: 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.
+    IE only attribute to block bluring of other controls
 
     @type Boolean
   */
-  isSubMenuViewVisible: null,
-  
+  blocksIEDeactivate: YES,
+
   /**
-    This will return true if the menu item is a separator.
+    IE only attribute to block bluring of other controls
 
     @type Boolean
   */
-  isSeparator: NO,
+  blocksIEDeactivate: YES,
 
-  /**
-    (displayDelegate) The name of the property used for label itself   
-    If null, then the content object itself will be used.
-    
-    @readOnly
-    @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.
-
-    @readOnly
-    @type String
-  */
-  contentIsBranchKey: null,
+  // ..........................................................
+  // KEY PROPERTIES
+  //
 
   /**
-    The name of the property which will set the image for the short cut keys
+    The content object the menu view will display.
 
-    @readOnly
-    @type String
+    @type Object
   */
-  shortCutKey: null,
+  content: null,
 
   /**
-    The name of the property which will set the icon image for the menu item.
+    YES if this menu item represents a separator.
 
-    @readOnly
-    @type String
+    @property {Boolean}
   */
-  contentIconKey: null,
+  isSeparator: function() {
+    return this.getContentProperty('itemSeparatorKey') === YES;
+  }.property('content').cacheable(),
 
   /**
-    The name of the property which will set the checkbox image for the menu 
-    item.
+    Whether the menu item is enabled.
 
-    @readOnly
-    @type String
+    @property {Boolean}
   */
-  contentCheckboxKey: 'checkbox',
+  isEnabled: function() {
+    return this.getContentProperty('itemIsEnabledKey') !== NO &&
+           this.getContentProperty('itemSeparatorKey') !== YES;
+  }.property('content.isEnabled').cacheable(),
 
   /**
-    The name of the property which will set the checkbox image for the menu 
-    item.
+    This menu item's submenu, if it exists.
+
+    @property {SC.MenuView}
+  */
+  subMenu: function() {
+    var content = this.get('content'), menuItems, parentMenu;
+
+    if (!content) return null;
+
+    parentMenu = this.get('parentMenu');
+    menuItems = content.get(parentMenu.itemSubMenuKey );
+    if (menuItems) {
+      if (SC.kindOf(menuItems, SC.MenuPane)) {
+        menuItems.set('isModal', NO);
+        menuItems.set('isSubMenu', YES);
+        menuItems.set('parentMenu', parentMenu);
+        return menuItems;
+      } else {
+        return SC.MenuPane.create({
+          layout: { width: 200 },
+          items: menuItems,
+          isModal: NO,
+          isSubMenu: YES,
+          parentMenu: parentMenu,
+          controlSize: parentMenu.get('controlSize')
+        });
+      }
+    }
 
-    @readOnly
-    @type String
-  */
-  contentActionKey: null,
-  
-  
-  /**
-    Describes the width of the menu item    
-    Default it to 100
+    return null;
+  }.property('content').cacheable(),
 
-    @type Integer
-  */
-  itemWidth: 100,
-  
   /**
-    Describes the height of the menu item    
-    Default it to 20
+    Whether or not this menu item has a submenu.
 
-    @type Integer
+    @property {Boolean}
   */
-  itemHeight: 20,
-  
-
-  /**
-    Sub Menu Items 
-    If this is null then there is no branching
+  hasSubMenu: function() {
+    return !!this.get('subMenu');
+  }.property('subMenu').cacheable(),
 
-    @type MenuPane
-  */
-  subMenu: null,
-  
   /**
-    This property specifies whether this menu item is currently in focus
-
-    @type Boolean
+    @private
   */
-  hasMouseExited: NO,
-  
-  /**
-    Anchor for the Parent Menu of which the Menu Item is part of
+  init: function() {
+    sc_super();
+    this.contentDidChange();
+  },
 
-    @type ButtonView/MenuItemView
-  */
-  anchor: null,
-  
-  /**
-    This will hold the properties that can trigger a change in the diplay
-  */
-  displayProperties: ['contentValueKey', 'contentIconKey', 'shortCutKey',
-                  'contentIsBranchKey', 'itemHeight',
-                   'subMenu','isEnabled','content'],
-  contentDisplayProperties: 'title value icon separator action checkbox shortcut branchItem subMenu'.w(),
   /**
     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) {
-    var bkey ;
-    if (SC.BENCHMARK_MENU_ITEM_RENDER) {
-      bkey = '%@.render'.fmt(this) ;
-      SC.Benchmark.start(bkey) ;
-    }
-    var content = this.get('content') ;
-    var del = this.displayDelegate ;
-    var key, val ;
-    var ic ;
-    var menu = this.parentMenu() ;
-    var itemWidth = this.get('itemWidth') || menu.layout.width ;
-    var itemHeight = this.get('itemHeight') || 20 ;
-    this.set('itemWidth',itemWidth) ;
-    this.set('itemHeight',itemHeight) ;
-    
-    if(!this.get('isEnabled')) context.addClass('disabled') ;
-    //handle separator    
-    ic = context.begin('a').attr('href', 'javascript: ;') ;   
-    key = this.getDelegateProperty('isSeparatorKey', del) ;
-    val = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-    if (val) {
-      ic.push("<span class='separator'></span>") ;
-      context.addClass('disabled') ;
+    var content = this.get('content'),
+        key, val,
+        menu = this.get('parentMenu'),
+        itemWidth = this.get('itemWidth') || menu.layout.width,
+        itemHeight = this.get('itemHeight') || SC.DEFAULT_MENU_ITEM_HEIGHT ;
+    this.set('itemWidth',itemWidth);
+    this.set('itemHeight',itemHeight);
+
+    context = context.begin('a').addClass('menu-item');
+
+    if (content.get(menu.itemSeparatorKey)) {
+      context.push('<span class="separator"></span>');
+      context.addClass('disabled');
     } else {
-      // handle checkbox
-      key = this.getDelegateProperty('contentCheckboxKey', del) ;
-      if (key) {
-        val = content ? (content.get ? content.get(key) : content[key]) : NO ;
-        if (val) {
-          ic.begin('div').addClass('checkbox').end() ;
-        }
+      val = content.get(menu.itemIconKey);
+      if (val) {
+        this.renderImage(context, val);
+        context.addClass('has-icon');
       }
 
-      // handle image -- always invoke
-      key = this.getDelegateProperty('contentIconKey', del) ;
-      val = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-      if(val && SC.typeOf(val) !== SC.T_STRING) val = val.toString() ;
-      if(val) {
-        this.renderImage(ic, val) ;
-        ic.addClass('hasIcon') ;
+      val = this.get('title');
+      if (SC.typeOf(val) !== SC.T_STRING) val = val.toString();
+      this.renderLabel(context, val);
+
+      if (this.getContentProperty('itemCheckboxKey')) {
+        context.push('<div class="checkbox"></div>');
       }
 
-      // handle label -- always invoke
-      key = this.getDelegateProperty('contentValueKey', del) ;
-      val = (key && content) ? (content.get ? content.get(key) : content[key]) : content ;
-      if (val && SC.typeOf(val) !== SC.T_STRING) val = val.toString() ;
-      this.renderLabel(ic, val||'') ;
-
-      // handle branch
-      key = this.getDelegateProperty('contentIsBranchKey', del) ;
-      val = (key && content) ? (content.get ? content.get(key) : content[key]) : NO ;
-      if (val) {       
-        this.renderBranch(ic, val) ;
-        ic.addClass('has-branch') ;
-      } else { // handle action
-        
-        key = this.getDelegateProperty('action', del) ;
-        val = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-        if (val && isNaN(val)) this.set('action', val) ;
-
-        key = this.getDelegateProperty('target', del) ;
-        val = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-        if (val && isNaN(val)) this.set('target', val) ;
-
-        // handle short cut keys
-        if (this.getDelegateProperty('shortCutKey', del)) {
-          key = this.getDelegateProperty('shortCutKey', del) ;
-          val = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-          if (val) {
-            this.renderShortcut(ic, val) ;
-            ic.addClass('shortcutkey') ;
-          }
-        }
+      if (this.get('hasSubMenu')) {
+        this.renderBranch(context);
+      }
+
+      val = this.getContentProperty('itemShortCutKey');
+      if (val) {
+        this.renderShortcut(context, val);
       }
     }
-    ic.end() ;
-    if (SC.BENCHMARK_MENU_ITEM_RENDER) SC.Benchmark.end(bkey) ;
+
+    context = context.end();
   },
-      
-  /** 
-   Generates the image used to represent the image icon. override this to 
+
+  /**
+   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 {String} the source path of the image
    @returns {void}
@@ -266,14 +191,14 @@ SC.MenuItemView = SC.ButtonView.extend( SC.ContentDisplay,
       className = '' ;
     } else {
       className = image ;
-      url = SC.BLANK_IMAGE_URL; 
+      url = SC.BLANK_IMAGE_URL;
     }
     // generate the img element...
     context.begin('img').addClass('image').addClass(className).attr('src', url).end() ;
   },
 
-  /** 
-   Generates the label used to represent the menu item. override this to 
+  /**
+   Generates the label used to represent the menu item. override this to
    return your own custom HTML
 
    @param {SC.RenderContext} context the render context
@@ -282,27 +207,26 @@ SC.MenuItemView = SC.ButtonView.extend( SC.ContentDisplay,
   */
 
   renderLabel: function(context, label) {
+    if (this.get('escapeHTML')) {
+      label = SC.RenderContext.escapeHTML(label) ;
+    }
     context.push("<span class='value ellipsis'>"+label+"</span>") ;
   },
-  
-  /** 
-   Generates the string used to represent the branch arrow. override this to 
+
+  /**
+   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.BLANK_IMAGE_URL;
-    context.push('<span class= "hasBranch">'+a+'</span>') ; 
+  renderBranch: function(context) {
+    context.push('<span class="has-branch"></span>') ;
   },
 
-  /** 
-   Generates the string used to represent the short cut keys. override this to 
+  /**
+   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
@@ -313,148 +237,155 @@ SC.MenuItemView = SC.ButtonView.extend( SC.ContentDisplay,
     context.push('<span class = "shortcut">' + shortcut + '</span>') ;
   },
 
-  /**
-    This method is used to fetch the Menu Item View to which the
-    Parent Menu Pane is anchored 
-    to
-
-    @param {}
-    @returns MenuPane
-  */
-  getAnchor: function() {
-    var anchor = this.get('anchor') ;
-    if(anchor && anchor.kindOf && anchor.kindOf(SC.MenuItemView)) return anchor ;
-    return null ;
-  },
-  
-  isCurrent: NO,
-
-  /**
-    This method checks if the menu item is a separator.
-
-    @param {}
-    @returns Boolean
-  */	  
-  isSeparator: function() {
-    var content = this.get('content') ;
-    var del = this.displayDelegate ;
-    var key = this.getDelegateProperty('isSeparatorKey', del) ;
-    var val = (key && content) ? (content.get ? content.get(key) : content[key]) : null ;
-    if (val) return YES ;
-    return NO ;
-  },
-  
-  /**
-    Checks if a menu is a sub menu, during branching.
-    
-    @param {}
-    @returns MenuPane
-  */
-  isSubMenuAMenuPane: function() {
-    var content = this.get('content') ;
-    var subMenu = content.get('subMenu') ;
-    if(subMenu && subMenu.kindOf(SC.MenuPane)) return subMenu ;
-    return NO ;  
-  },
-  
-  
   /**
     This method will check whether the current Menu Item is still
     selected and then create a submenu accordignly.
-    
-    @param {}
-    @returns void
-  */
-  branching: function() {
-    if(this.get('hasMouseExited')) {
-      this.set('hasMouseExited',NO) ;
-      return ;
-    }
-      this.createSubMenu() ;
-  },
-  
-  /**
-    This method will remove the focus of the current selected menu item.
 
-    @param {}
-  */
-  loseFocus: function() {
-    if(!this.isSubMenuAMenuPane()) {
-      this.set('hasMouseExited',YES) ;
-      this.$().removeClass('focus') ;
-      //this.resignFirstResponder() ;
-    }
-  },
-  
-  /**
-    This method will create the sub Menu with the current Menu Item as anchor
-    
     @param {}
     @returns void
   */
-  createSubMenu: function() {
-    var subMenu = this.isSubMenuAMenuPane() ;
+  showSubMenu: function() {
+    var subMenu = this.get('subMenu') ;
     if(subMenu) {
-      subMenu.set('anchor', this) ;
+      subMenu.set('mouseHasEntered', NO);
       subMenu.popup(this,[0,0,0]) ;
-      var context = SC.RenderContext(this) ;
-      context = context.begin(subMenu.get('tagName')) ;
-      subMenu.prepareContext(context, YES) ;
-      context = context.end() ;
-      var menuItemViews = subMenu.get('menuItemViews') ;
-      if(menuItemViews && menuItemViews.length>0) {
-        subMenu.becomeKeyPane();
-      }
     }
+
+    this._subMenuTimer = null;
   },
-  
-  parentMenu: function() {
-    return this.get('parentPane') ;
+
+  title: function() {
+    var ret = this.getContentProperty('itemTitleKey'),
+        localize = this.getPath('parentMenu.localize');
+
+    if (localize && ret) ret = ret.loc();
+
+    return ret||'';
+  }.property('content.title').cacheable(),
+
+  getContentProperty: function(property) {
+    var content = this.get('content'),
+        menu = this.get('parentMenu');
+
+    if (content) {
+      return content.get(menu.get(property));
+    }
   },
 
   //..........................................
-  //Mouse Events Handling
-  //..........................................
-
-  // to check the 'isMouseDown' property of the anchor 
-  isAnchorMouseDown: NO,
+  // Mouse Events Handling
+  //
 
   mouseUp: function(evt) {
     // SproutCore's event system will deliver the mouseUp event to the view
     // that got the mouseDown event, but for menus we want to track the mouse,
     // so we'll do our own dispatching.
-    var parentMenu = this.parentMenu() ;
-    if (parentMenu) {
-      var selectedMenuItem = parentMenu.get('currentSelectedMenuItem') ;
-      if (selectedMenuItem  &&  (this !== selectedMenuItem)) {
-        return selectedMenuItem.tryToPerform('mouseUp', evt) ;
-      }
-    }
+    var targetMenuItem;
+
+    targetMenuItem = this.getPath('parentMenu.rootMenu.targetMenuItem');
+
+    if (targetMenuItem) targetMenuItem.performAction();
+    return YES ;
+  },
+
+  /** @private
+    Called on mouse down to send the action to the target.
+
+    This method will start flashing the menu item to indicate to the user that
+    their selection has been received, unless disableMenuFlash has been set to
+    YES on the menu item.
 
-    if (!this.get('isEnabled')) {
-      this.set('hasMouseExited',NO) ;
-      return YES ;
+    @returns {Boolean}
+  */
+  performAction: function() {
+    // Disabled menu items and menu items with submenus should not have
+    // actions.
+    if (!this.get('isEnabled')||this.get('hasSubMenu')) return NO;
+
+    var disableFlash = this.getContentProperty('itemDisableMenuFlashKey'),
+        menu;
+
+    if (disableFlash) {
+      // Menu flashing has been disabled for this menu item, so perform
+      // the action immediately.
+      this.sendAction();
+    } else {
+      // Flash the highlight of the menu item to indicate selection,
+      // then actually send the action once its done.
+      this._flashCounter = 0;
+
+      // Set a flag on the root menu to indicate that we are in a
+      // flashing state. In the flashing state, no other menu items
+      // should become selected.
+      menu = this.getPath('parentMenu.rootMenu');
+      menu._isFlashing = YES;
+      this.invokeLater(this.flashHighlight, 25);
+      this.invokeLater(this.sendAction, 150);
     }
-    this.set('hasMouseExited',NO) ;
-    var key = this.get('contentCheckboxKey') ;
-    var content = this.get('content') ;
-    if (key) {
-      if (content && content.get(key)) {
-        content.set(key, NO) ;
-      } else if( content.get(key)!== undefined ) {
-        content.set(key, YES) ;
+
+    return YES;
+  },
+
+  /**
+    Actually sends the action of the menu item to the target.
+    @private
+  */
+  sendAction: function() {
+    var action = this.getContentProperty('itemActionKey'),
+        target = this.getContentProperty('itemTargetKey'),
+        rootMenu = this.getPath('parentMenu.rootMenu'),
+        responder;
+
+    // Close the menu
+    this.getPath('parentMenu.rootMenu').remove();
+    // We're no longer flashing
+    rootMenu._isFlashing = NO;
+
+    action = (action === undefined) ? rootMenu.get('action') : action;
+    target = (target === undefined) ? rootMenu.get('target') : target;
+
+    // Notify the root menu pane that the selection has changed
+    rootMenu.set('selectedItem', this.get('content'));
+
+    // Legacy support for actions that are functions
+    if (SC.typeOf(action) === SC.T_FUNCTION) {
+      action.apply(target, [rootMenu]);
+      //@if(debug)
+      SC.Logger.warn('Support for menu item action functions has been deprecated. Please use target and action.');
+      //@endif
+    } else {
+      responder = this.getPath('pane.rootResponder') || SC.RootResponder.responder;
+
+      if (responder) {
+        // Send the action down the responder chain
+        responder.sendAction(action, target, this);
       }
-      this.displayDidChange();
     }
-    this._action(evt) ;
-    var anchor = this.getAnchor() ;
-    if(anchor) {
-      anchor.mouseUp(evt) ;
+
+  },
+
+  /**
+    Toggles the focus class name on the menu item layer to quickly flash the
+    highlight. This indicates to the user that a selection has been made.
+
+    This is initially called by performAction(). flashHighlight then keeps
+    track of how many flashes have occurred, and calls itself until a maximum
+    has been reached.
+
+    @private
+  */
+  flashHighlight: function() {
+    var flashCounter = this._flashCounter, layer = this.$();
+    if (flashCounter % 2 === 0) {
+      layer.addClass('focus');
     } else {
-      this.resignFirstResponder() ;
+      layer.removeClass('focus');
+    }
+
+    if (flashCounter <= 2) {
+      this.invokeLater(this.flashHighlight, 50);
+      this._flashCounter++;
     }
-    this.closeParent() ;
-    return YES ;
   },
 
   /** @private*/
@@ -462,158 +393,289 @@ SC.MenuItemView = SC.ButtonView.extend( SC.ContentDisplay,
     return YES ;
   },
 
-  /** @private
-    This has been over ridden from button view to prevent calling of render 
-    method (When isActive property is changed).
-    Also based on whether the menu item has a sub Branch we create a sub Menu
-    
-    @returns Boolean
-  */
+  /** @private */
   mouseEntered: function(evt) {
-    var parentMenu = this.parentMenu() ;
-    this.set('hasMouseExited', NO) ;
-    if(parentMenu) {
-      parentMenu.becomeKeyPane() ;
-      // condition check whether the anchor tag has _isMouseDown or not
-      if(parentMenu.get('anchor')._isMouseDown){
-        var isAnchorMouseDown = parentMenu.getPath('anchor._isMouseDown') ;
-        this.set('isAnchorMouseDown', isAnchorMouseDown) ;
-        if(this.get('isAnchorMouseDown')) {
-          SC.Event.trigger(this.get('layer'), 'mousedown');
-        }
-      }
-    }
-    if (!this.get('isEnabled') && !this.isSeparator()) {
-      if (parentMenu) parentMenu.set('currentSelectedMenuItem', null);
-      return YES ;
+    var menu = this.get('parentMenu'),
+        rootMenu = menu.get('rootMenu');
+
+    // Ignore mouse entering if we're in the middle of
+    // a menu flash.
+    if (rootMenu._isFlashing) return;
+
+    menu.set('mouseHasEntered', YES);
+    this.set('mouseHasEntered', YES);
+    menu.set('currentMenuItem', this);
+
+    // Become first responder to show highlight
+    if (this.get('isEnabled')) {
+      this.becomeFirstResponder();
     }
 
-    var key = this.get('contentIsBranchKey') ;
-    if(key) {
-      var content = this.get('content') ;
-      var val = (key && content) ? (content.get ? content.get(key) : content[key]) : NO ;
-      if(val) this.invokeLater(this.branching(),100) ;
+    if(this.get('hasSubMenu')) {
+      this._subMenuTimer = this.invokeLater(this.showSubMenu,100) ;
     }
-    this.becomeFirstResponder() ;
 	  return YES ;
   },
 
   /** @private
-    Set the focus based on whether the current Menu item is selected or not.
-    
+    Set the focus based on whether the current menu item is selected or not.
+
     @returns Boolean
   */
   mouseExited: function(evt) {
-    this.loseFocus() ;
-    var parentMenu = this.parentMenu() ;
-    if(parentMenu) {
-      parentMenu.set('previousSelectedMenuItem', this) ;
+    var parentMenu, timer;
+
+    // If we have a submenu, we need to give the user's mouse time to get
+    // to the new menu before we remove highlight.
+    if (this.get('hasSubMenu')) {
+      // If they are exiting the view before we opened the submenu,
+      // make sure we don't open it once they've left.
+      timer = this._subMenuTimer;
+      if (timer) {
+        timer.invalidate();
+      } else {
+        this.invokeLater(this.checkMouseLocation, 100);
+      }
+    } else {
+      parentMenu = this.get('parentMenu');
+
+      if (parentMenu.get('currentMenuItem') === this) {
+        parentMenu.set('currentMenuItem', null);
+      }
     }
+
     return YES ;
   },
 
+  touchStart: function(evt){
+    this.mouseEntered(evt);
+    return YES;
+  },
+
+  touchEnd: function(evt){
+    return this.mouseUp(evt);
+  },
+
+  touchEntered: function(evt){
+    return this.mouseEntered(evt);
+  },
+
+  touchExited: function(evt){
+    return this.mouseExited(evt);
+  },
+
+  checkMouseLocation: function() {
+    var subMenu = this.get('subMenu'), parentMenu = this.get('parentMenu'),
+        currentMenuItem, previousMenuItem;
+
+    if (!subMenu.get('mouseHasEntered')) {
+      currentMenuItem = parentMenu.get('currentMenuItem');
+      if (currentMenuItem === this || currentMenuItem === null) {
+        previousMenuItem = parentMenu.get('previousMenuItem');
+
+        if (previousMenuItem) {
+          previousMenuItem.resignFirstResponder();
+        }
+        this.resignFirstResponder();
+        subMenu.remove();
+      }
+    }
+  },
 
   /** @private
     Call the moveUp function on the parent Menu
-    
+
     @returns Boolean
   */
   moveUp: function(sender,evt) {
-    var menu = this.parentMenu() ;
+    var menu = this.get('parentMenu') ;
     if(menu) {
       menu.moveUp(this) ;
     }
     return YES ;
   },
-  
+
   /** @private
     Call the moveDown function on the parent Menu
-    
+
     @returns Boolean
   */
   moveDown: function(sender,evt) {
-    var menu = this.parentMenu() ;
+    var menu = this.get('parentMenu') ;
     if(menu) {
       menu.moveDown(this) ;
     }
     return YES ;
   },
-  
+
   /** @private
     Call the function to create a branch
-    
+
     @returns Boolean
   */
   moveRight: function(sender,evt) {
-    this.createSubMenu() ;
-    return YES ;
+    this.showSubMenu() ;
+    return YES;
   },
-  
+
+  /** @private
+    Proxies insertText events to the parent menu so items can be selected
+    by typing their titles.
+  */
+  insertText: function(chr, evt) {
+    var menu = this.get('parentMenu');
+    if (menu) {
+      menu.insertText(chr, evt);
+    }
+  },
+
   /** @private*/
   keyDown: function(evt) {
     return this.interpretKeyEvents(evt) ;
   },
-  
+
   /** @private*/
   keyUp: function(evt) {
     return YES ;
   },
-  
+
   /** @private*/
   cancel: function(evt) {
-    this.loseFocus() ;
-    var menu = this.parentMenu() ;
-    if (menu) menu.remove() ;
-    var pane = menu.getPath('anchor.pane') ;
-    if (pane) pane.becomeKeyPane() ;
+    this.getPath('parentMenu.rootMenu').remove();
     return YES ;
   },
-  
+
   /** @private*/
   didBecomeFirstResponder: function(responder) {
     if (responder !== this) return;
-    if(!this.isSeparator()) {
-      this.$().addClass('focus') ;
-    }
-    var parentMenu = this.parentMenu() ;
+    var parentMenu = this.get('parentMenu') ;
     if(parentMenu) {
       parentMenu.set('currentSelectedMenuItem', this) ;
     }
   },
-  
+
   /** @private*/
   willLoseFirstResponder: function(responder) {
     if (responder !== this) return;
-    this.$().removeClass('focus') ;
-    var parentMenu = this.parentMenu() ;
+    var parentMenu = this.get('parentMenu') ;
     if(parentMenu) {
       parentMenu.set('currentSelectedMenuItem', null) ;
       parentMenu.set('previousSelectedMenuItem', this) ;
     }
   },
-  
+
   /** @private*/
   insertNewline: function(sender, evt) {
     this.mouseUp(evt) ;
   },
 
   /**
-    Close the parent Menu and remove the focus of the current Selected 
+    Close the parent Menu and remove the focus of the current Selected
     Menu Item
-    
+
     @returns void
   */
   closeParent: function() {
     this.$().removeClass('focus') ;
-    var menu = this.parentMenu() ;
+    var menu = this.get('parentMenu') ;
     if(menu) {
       menu.remove() ;
     }
   },
-  
+
   /** @private*/
   clickInside: function(frame, evt) {
     return SC.pointInRect({ x: evt.pageX, y: evt.pageY }, frame) ;
+  },
+
+
+  // ..........................................................
+  // CONTENT OBSERVING
+  //
+
+  /**
+    @private
+
+    Add an observer to ensure that we invalidate our cached properties
+    whenever the content object’s associated property changes.
+  */
+  contentDidChange: function() {
+    var content    = this.get('content'),
+        oldContent = this._content;
+
+    if (content === oldContent) return ;
+
+    var f = this.contentPropertyDidChange;
+    // remove an observer from the old content if necessary
+    if (oldContent  &&  oldContent.removeObserver) oldContent.removeObserver('*', this, f) ;
+
+    // add observer to new content if necessary.
+    this._content = content ;
+    if (content  &&  content.addObserver) content.addObserver('*', this, f) ;
+
+    // notify that value did change.
+    this.contentPropertyDidChange(content, '*') ;
+  }.observes('content'),
+
+
+  /**
+    @private
+
+    Invalidate our cached property whenever the content object’s associated
+    property changes.
+  */
+  contentPropertyDidChange: function(target, key) {
+    // If the key that changed in the content is one of the fields for which
+    // we (potentially) cache a value, update our cache.
+    var menu = this.get('parentMenu') ;
+    if (!menu) return ;
+
+    var mapping           = SC.MenuItemView._contentPropertyToMenuItemPropertyMapping,
+        contentProperties = SC.keys(mapping),
+        i, len, contentProperty, menuItemProperty ;
+
+
+    // Are we invalidating all keys?
+    if (key === '*') {
+      for (i = 0, len = contentProperties.length;  i < len;  ++i) {
+        contentProperty  = contentProperties[i] ;
+        menuItemProperty = mapping[contentProperty] ;
+        this.notifyPropertyChange(menuItemProperty) ;
+      }
+    }
+    else {
+      for (i = 0, len = contentProperties.length;  i < len;  ++i) {
+        contentProperty  = contentProperties[i] ;
+        if (menu.get(contentProperty) === key) {
+          menuItemProperty = mapping[contentProperty] ;
+          this.notifyPropertyChange(menuItemProperty) ;
+
+          // Note:  We won't break here in case the menu is set up to map
+          //        multiple properties to the same content key.
+        }
+      }
+    }
   }
-  
+
 }) ;
+
+
+// ..........................................................
+// CLASS PROPERTIES
+//
+
+/** @private
+  A mapping of the "content property key" keys to the properties we use to
+  wrap them.  This hash is used in 'contentPropertyDidChange' to ensure that
+  when the content changes a property that is locally cached inside the menu
+  item, the cache is properly invalidated.
+
+  Implementor note:  If you add such a cached property, you must add it to
+                     this mapping.
+*/
+SC.MenuItemView._contentPropertyToMenuItemPropertyMapping = {
+  itemTitleKey:     'title',
+  itemIsEnabledKey: 'isEnabled',
+  itemSeparatorKey: 'isSeparator',
+  itemSubMenuKey:   'subMenu'
+};