sproutit-sproutcore 1.0.0.20090416161445 → 1.0.0.20090720093355

data/frameworks/sproutcore/frameworks/desktop/panes/menu.js

@@ -7,23 +7,27 @@
 require('panes/picker');
 require('views/menu_item');
 
-SC.MENU_ITEM_KEYS = 'itemTitleKey itemValueKey itemIsEnabledKey itemIconKey itemSeparatorKey itemActionKey itemCheckboxKey itemShortCutKey itemBranchKey itemHeightKey subMenuKey itemKeyEquivalentKey itemTargetKey'.w();
+// Constants
 SC.BENCHMARK_MENU_PANE_RENDER = YES ;
+
 /**
   @class SC.MenuPane
   @extends SC.PickerPane
   @since SproutCore 1.0
 */
-
 SC.MenuPane = SC.PickerPane.extend( 
 /** @scope SC.MenuPane.prototype */ {
+
+  menuItemKeys: 'itemTitleKey itemValueKey itemIsEnabledKey itemIconKey itemSeparatorKey itemActionKey itemCheckboxKey itemShortCutKey itemBranchKey itemHeightKey subMenuKey itemKeyEquivalentKey itemTargetKey'.w(),
   classNames: ['sc-menu'],
 
   tagName: 'div',
+  
+  isModal: YES,
 
   /**
-    The key that explains whether each item is Enabled. If omitted, no icons will
-    be displayed.
+    The key that explains whether each item is Enabled. If omitted, no icons 
+    will be displayed.
 
     @readOnly
     @type Boolean
@@ -73,6 +77,13 @@ SC.MenuPane = SC.PickerPane.extend(
     @type String
   */
   itemWidth: null,
+  
+  /** 
+    The default height for each menu item.
+
+    @type String
+  */
+  itemHeight: 20,
 
   /** 
     The height of the menu and ultimately the menu itself.
@@ -124,7 +135,7 @@ SC.MenuPane = SC.PickerPane.extend(
     @readOnly
     @type String
   */
-  itemBranchKey:null,
+  itemBranchKey: null,
   
   /** 
     The key for setting a branch for the menu item.
@@ -132,7 +143,7 @@ SC.MenuPane = SC.PickerPane.extend(
     @readOnly
     @type String
   */
-  itemShortCutKey:null,
+  itemShortCutKey: null,
   
   /** 
     The key for setting Key Equivalent for the menu item.
@@ -140,7 +151,7 @@ SC.MenuPane = SC.PickerPane.extend(
     @readOnly
     @type String
   */
-  itemKeyEquivalentKey:null,
+  itemKeyEquivalentKey: null,
   
   /** 
     The key for setting Key Equivalent for the menu item.
@@ -148,103 +159,122 @@ SC.MenuPane = SC.PickerPane.extend(
     @readOnly
     @type String
   */
-  itemTargetKey:null,
+  itemTargetKey: null,
   
   /** @private */
   isKeyPane: YES,
 
   /** @private */
-  preferType:SC.PICKER_MENU,
+  preferType: SC.PICKER_MENU,
 
   /**
     Define the current Selected Menu Item.
+
     type SC.MenuItemView
   */
-  currentItemSelected : null,
+  currentSelectedMenuItem : null,
 
   /**
-    The final layout for the inside content View
-    @type Array
+    Define the current Selected Menu Item.
+
+    @type SC.MenuItemView
   */
-  layoutShadow: {},
-  
-  /*
+  previousSelectedMenuItem : null,
+
+  /**
     The anchor for this Menu
+
     @type ButtonView/MenuItemView
   */
   anchor: null,
   
+  /** @private
+
+    Array of Display Items which is produced by displayItems function
+  */
   displayItemsArray: null,
   
-  menuItemViews: [],
   /**
-    This returns whether the anchor for this pane is of MenuItemView type
-    @returns Boolean
+    Set of Menu Item Views created from items array
+    
+    @type SC.Array
   */
-  isAnchorAMenu: function() {
-    var anchor = this.get('anchor');
-    if(anchor && anchor.kindOf('SC.MenuItemView')) {
-      return YES;
-    }  
-    return NO;
-  },
+  menuItemViews: [],
+
+  /** 
+    Example view which will be used to create the Menu Items
     
+    @default SC.MenuItemView
+    @type SC.View
+  */
+  exampleView: SC.MenuItemView,
+  
   /**
+    @private
+    
     Overwrite the popup function of the pickerPane
   */
-  popup: function(anchorViewOrElement, preferMatrix) {
-    this.set('anchorElement',anchorViewOrElement.get('layer')) ;
+  popup: function(anchorViewOrElement, preferMatrix) {  
+    var anchor = anchorViewOrElement.isView ? anchorViewOrElement.get('layer') : anchorViewOrElement;
+    this.beginPropertyChanges();
+    this.set('anchorElement',anchor) ;
     this.set('anchor',anchorViewOrElement);
     this.set('preferType',SC.PICKER_MENU) ;
     if(preferMatrix) this.set('preferMatrix',preferMatrix) ;
-    this.positionPane() ;
+    this.endPropertyChanges();
     this.append() ;
+    this.positionPane() ;
+    this.becomeKeyPane() ;
   },
   
   /**
     This computed property is generated from the items array
+
+    @property
+    @type {String}
   */
   displayItems: function() {
-
     var items = this.get('items') ;
     var loc = this.get('localize') ;
     var keys = null,itemType, cur ;
-    var ret = [] ;
+    var ret = [], rel;
     var max = items.get('length') ;
     var idx, item ;
     var fetchKeys = SC._menu_fetchKeys ;
     var fetchItem = SC._menu_fetchItem ;
-    var menuHeight = this.get('menuHeight')||0 ;
+    var menuHeight = 0 ;
     // loop through items and collect data
     for (idx = 0; idx < max; ++idx) {
       item = items.objectAt(idx) ;
       if (SC.none(item)) continue ;
       itemType = SC.typeOf(item) ;
+      rel = ret.length;
       if (itemType === SC.T_STRING) {
-        ret[ret.length] = SC.Object.create({ title: item.humanize().titleize(), value: item,
-                            isEnabled: YES, icon: null, isSeparator: null, 
-                            action: null, isCheckbox: NO, menuItemNumber: idx,
-                            isShortCut: NO, isBranch: NO,itemHeight: 20, subMenu: null, 
-                            keyEquivalent: null, target:null });
+        ret[rel] = SC.Object.create({ title: item.humanize().titleize(),   
+	                        value: item, isEnabled: YES, icon: null, 
+	                        isSeparator: null, action: null, isCheckbox: NO, 
+	                        menuItemNumber: idx, isShortCut: NO, isBranch: NO,
+	                        itemHeight: 20, subMenu: null,keyEquivalent: null,
+	                        target:null });
         menuHeight = menuHeight+20 ;
       } else if (itemType !== SC.T_ARRAY) {
-          if (keys === null) keys = SC.MENU_ITEM_KEYS.map(fetchKeys, this) ;
+          if (keys === null) keys = this.menuItemKeys.map(fetchKeys, this) ;
           cur = keys.map(fetchItem, item) ;
           cur[cur.length] = idx ;
           if (!keys[0] && item.toString) cur[0] = item.toString() ;
           if (!keys[1]) cur[1] = item ;
           if (!keys[2]) cur[2] = YES ;
-          if (!cur[9]) cur[9] = 20 ;
-          if (cur[4]) cur[9] = 5 ;
+          if (!cur[9]) cur[9] = this.get('itemHeight') ;
+          if (cur[4]) cur[9] = 9 ;
           menuHeight = menuHeight+cur[9] ;
           if (loc && cur[0]) cur[0] = cur[0].loc() ;
-          ret[ret.length] = SC.Object.create({ title: cur[0], value: cur[1],
+          ret[rel] = SC.Object.create({ title: cur[0], value: cur[1],
                                               isEnabled: cur[2], icon: cur[3], 
                                               isSeparator: cur[4], action: cur[5],
                                               isCheckbox: cur[6], isShortCut: cur[7],
-                                              menuItemNumber: cur[9], isBranch: cur[8],
+                                              menuItemNumber: idx, isBranch: cur[8],
                                               itemHeight: cur[9], subMenu: cur[10], 
-                                              keyEquivalent: cur[11], target:cur[12] });                         
+                                              keyEquivalent: cur[11], target: cur[12] }) ;                         
       }
     }
     this.set('menuHeight',menuHeight);
@@ -252,7 +282,9 @@ SC.MenuPane = SC.PickerPane.extend(
     return ret;
   }.property('items').cacheable(),
 
-  /** If the items array itself changes, add/remove observer on item... */
+  /**
+    If the items array itself changes, add/remove observer on item...
+  */
   itemsDidChange: function() {
     if (this._items) {
       this._items.removeObserver('[]', this, this.itemContentDidChange) ;
@@ -285,50 +317,56 @@ SC.MenuPane = SC.PickerPane.extend(
       var bkey = '%@.render'.fmt(this) ;
       SC.Benchmark.start(bkey);
     }
-
     // collect some data 
     var items = this.get('displayItems') ;
-
+    //var ret = sc_super();
     // regenerate the buttons only if the new display items differs from the
-    // last cached version of it needsFirstDisplay is YES.
+    // last cached version of it.
 
     var last = this.get('_menu_displayItems') ;
-    var parentView = this.parentView ;
     if (firstTime || (items !== last)) {
       if(!this.get('isEnabled') || !this.get('contentView')) return ;
-      var contentView = this.get('contentView');
-      var s = contentView.get('layoutShadow') ;
-      var ss = '' ;
-      for(var key in s) {
-        var value = s[key] ;
-        var menuHeight = this.get('menuHeight');
-        if(key === "height" && menuHeight) value = menuHeight ;
-        if (value !== null) {
-          ss = ss + key +' : ' + value + 'px; ';
-        }
-      }
-      if(ss.length>0) context.push("<div style='position:absolute;"+ss+"'>") ;
+      var menuHeight = this.get('menuHeight');
       this.set('_menu_displayItems',items) ; // save for future
       context.addStyle('text-align', 'center') ;
-      var itemWidth = this.get('itemWidth');
+      var itemWidth = this.get('itemWidth') ;
       if (SC.none(itemWidth)) {
-        itemWidth = contentView.get('layout').width || itemWidth;
-        this.set('itemWidth',itemWidth); 
+        itemWidth = this.get('layout').width || 100;
+        this.set('itemWidth',itemWidth) ; 
       }
       this.renderChildren(context,items) ;
-      context.push("<div class='top-left-edge'></div>") ;
-      context.push("<div class='top-edge'></div>") ;
-      context.push("<div class='top-right-edge'></div>") ;
-      context.push("<div class='right-edge'></div>") ;
-      context.push("<div class='bottom-right-edge'></div>") ;
-      context.push("<div class='bottom-edge'></div>") ;
-      context.push("<div class='bottom-left-edge'></div>") ;
-      context.push("<div class='left-edge'></div>") ;
-      context.push("</div>") ;
+      context.push("<div class='top-left-edge'></div>",
+       "<div class='top-edge'></div>",
+       "<div class='top-right-edge'></div>",
+       "<div class='right-edge'></div>",
+       "<div class='bottom-right-edge'></div>",
+       "<div class='bottom-edge'></div>",
+       "<div class='bottom-left-edge'></div>",
+       "<div class='left-edge'></div>");
+    }
+    else {
+      this.get('menuItemViews').forEach( function(menuItemView) { 
+        menuItemView.updateLayer();
+      }, this) ;
     }
-    if (SC.BENCHMARK_MENU_PANE_RENDER) SC.Benchmark.end(bkey);
+    if (SC.BENCHMARK_MENU_PANE_RENDER) SC.Benchmark.end(bkey) ;
+    //return ret ;
   },
 
+  /**
+    This method is used to observe the menuHeight and set the layout accordingly
+    and position the pane.
+    
+    @observes menuHeight
+  */
+  menuHeightObserver: function() {
+    var height = this.layout.height ;
+    var menuHeight = this.get('menuHeight') ; 
+    if( height !== menuHeight) {
+      this.adjust('height',menuHeight).updateLayout() ;
+    }
+  }.observes('menuHeight'),
+  
   /**
     Actually generates the menu HTML for the display items.  This method 
     is called the first time a view is constructed and any time the display
@@ -336,7 +374,7 @@ SC.MenuPane = SC.PickerPane.extend(
     any "transient" states such as the global isEnabled property or selection.
   */
   renderChildren: function(context,items) {
-    if(!this.isEnabled) return ;
+    if(!this.get('isEnabled')) return ;
     var menuItemViews = [];
     var len = items.length ;
     var content = SC.makeArray(items) ;
@@ -353,12 +391,13 @@ SC.MenuPane = SC.PickerPane.extend(
       var isShortCut = item.get('isShortCut') ;
       var isBranch   = item.get('isBranch') ;
       var itemSubMenu = item.get('subMenu') ;
-      var itemHeight = item.get('itemHeight') || 20 ;
+      var itemHeight = item.get('itemHeight') ;
       var itemKeyEquivalent = item.get('keyEquivalent') ;
-      var itemWidth = this.get('itemWidth');
-      var itemTarget = this.get('itemTarget');
+      var itemTarget = item.get('target') ;
+      var itemWidth = this.get('itemWidth') ;
+      
       var itemView = this.createChildView(
-        SC.MenuItemView, {
+        this.exampleView, {
           owner : itemView,
           displayDelegate : itemView,
           parentPane: this,
@@ -366,46 +405,64 @@ SC.MenuPane = SC.PickerPane.extend(
           isVisible : YES,
           contentValueKey : 'title',
           contentIconKey : 'icon',
-          contentCheckboxKey : 'checkbox',
+          contentCheckboxKey: this.itemCheckboxKey,
           contentIsBranchKey :'branchItem',  
           isSeparatorKey : 'separator',
-          shortCutKey :'shortCut',  
+          shortCutKey : 'shortCut',  
           action : itemAction,
           target : itemTarget,
-          contentTargetKey:'target',
-          layout : { top:0, left:0, width:itemWidth, height:itemHeight, centerX:0, centerY:0},
+          layout : { top: 0, left: 0, width: itemWidth, height: itemHeight },
           isEnabled : itemIsEnabled,
           itemHeight : itemHeight,
           itemWidth : itemWidth,
           keyEquivalent : itemKeyEquivalent,
           content : SC.Object.create({
-          title : itemTitle,
-          value : itemValue,
-          icon : itemIcon,
-          separator : isSeparator,
-          action : itemAction,
-          checkbox : isCheckbox,
-          shortCut : isShortCut,
-          branchItem : isBranch,
-          subMenu : itemSubMenu
-        }),
+            title : itemTitle,
+            value : itemValue,
+            icon : itemIcon,
+            separator : isSeparator,
+            action : itemAction,
+            checkbox : isCheckbox,
+            shortCut : isShortCut,
+            branchItem : isBranch,
+            subMenu : itemSubMenu
+          }),
         rootElementPath : [menuItemNumber]
       });
       context = context.begin(itemView.get('tagName')) ;
       itemView.prepareContext(context, YES) ;
       context = context.end() ;
-      menuItemViews.push(itemView);
-      this.set('menuItemViews',menuItemViews);
+      menuItemViews.push(itemView) ;
+      this.set('menuItemViews',menuItemViews) ;
     }
   },
   
+  /**
+    Get the current selected Menu item
+    
+    @returns void
+  */
+  currentSelectedMenuItemObserver: function(){
+    var currentSelectedMenuItem = this.get('currentSelectedMenuItem') ;
+    var previousSelectedMenuItem = this.get('previousSelectedMenuItem') ;
+    if(previousSelectedMenuItem){
+      var subMenu = previousSelectedMenuItem.isSubMenuAMenuPane() ;
+      if(subMenu) subMenu.remove() ;
+      previousSelectedMenuItem.resignFirstResponder() ;
+    }
+    if(currentSelectedMenuItem) {
+      currentSelectedMenuItem.becomeFirstResponder() ;
+    }
+  }.observes('currentSelectedMenuItem'),
+  
   /**
     This function returns whether the anchor is of type of MenuItemView
+    
     @returns Boolean
   */
   isAnchorMenuItemType: function() {
-    var anchor = this.get('anchor');
-    return (anchor && anchor.kindOf(SC.MenuItemView));
+    var anchor = this.get('anchor') ;
+    return (anchor && anchor.kindOf(SC.MenuItemView)) ;
   },
   
   //..........................................................
@@ -420,77 +477,168 @@ SC.MenuPane = SC.PickerPane.extend(
     @returns {Boolean}  YES if handled, NO otherwise
   */
   performKeyEquivalent: function(keyString,evt) {
-    if(!this.isEnabled) return YES ;
-    var items = this.get('displayItemsArray');
-    var len = items.length ;
+    var items, len, menuItems, item, keyEquivalent, 
+        action, isEnabled, target;
+    if(!this.get('isEnabled')) return NO ;
+
+    items = this.get('displayItemsArray') ;
+    if (!items) return NO;
+
+    len = items.length ;
+    menuItems = this.get('menuItemViews');
     for(var idx=0; idx<len; ++idx) {
-      var item = items[idx];
-      var keyEquivalent = item.get('keyEquivalent');
-      var action = item.get('action') ;
-      var isEnabled = item.get('isEnabled') ;
-      var target = item.get('itemTarget') || this;
+      item          = items[idx] ;
+      keyEquivalent = item.get('keyEquivalent') ;
+      action        = item.get('action') ;
+      isEnabled     = item.get('isEnabled') ;
+      target        = item.get('target') || this ;
       if(keyEquivalent == keyString && isEnabled) {
-        return this.performAction(target,action) ;
+        if(menuItems && menuItems[idx]) {
+          var retVal = menuItems[idx].triggerAction(evt);
+          return retVal;
+        }
       }
     }
     return YES ;
   },
   
+  //Mouse and Key Events
+  
+  /** @private */
+  mouseDown: function(evt) {
+    return YES ;
+  },
+  
+  /** 
+    @private 
+    
+    Get the anchor and send the event to the anchor in case the 
+    current Menu is a subMenu
+  */
+  mouseUp: function(evt) {
+    this.remove() ;
+    var anchor = this.get('anchor') ;
+    if(this.isAnchorMenuItemType()) this.sendEvent('mouseUp', evt, anchor) ;
+    return YES ;
+  },
+  
+  /** 
+    @private 
+    
+    This function gets called from the Menu Item in order to set the 
+    current Selected Menu Item and move the selection
+  */
+  moveDown: function(menuItem) {
+    var currentSelectedMenuItem = this.getNextEnabledMenuItem(menuItem) ;
+    this.set('currentItemSelected',currentSelectedMenuItem) ;
+    if(menuItem) menuItem.resignFirstResponder() ;
+    currentSelectedMenuItem.becomeFirstResponder() ;
+  },
+  
+  /** 
+    @private 
+    
+    This function gets called from the Menu Item in order to set the 
+    current Selected Menu Item and move the selection
+  */
+  moveUp: function(menuItem) {
+    var currentSelectedMenuItem = this.getPreviousEnabledMenuItem(menuItem) ;
+    this.set('currentItemSelected',currentSelectedMenuItem) ;
+    if(menuItem) menuItem.resignFirstResponder() ;
+    currentSelectedMenuItem.becomeFirstResponder() ;
+    return YES ;
+  },
+  
   /**
-    Actually fires the action.Pass the target and action to
-    the function.
-
-    @param {Object} target
-    @returns {function,string} action  
-  */
-  performAction: function(target,action) {
-
-    var typeOfAction = SC.typeOf(action) ;    
-    // if the action is a function, just try to call it.
-    if (typeOfAction == SC.T_FUNCTION) {
-      action.call((target || this), this) ;
-
-    // otherwise, action should be a string.  If it has a period, treat it
-    // like a property path.
-    } else if (typeOfAction === SC.T_STRING) {
-      if (action.indexOf('.') >= 0) {
-
-        var path = action.split('.') ;
-        var property = path.pop() ;
-        var newTarget = SC.objectForPropertyPath(path, window) ;
-        var newAction = target.get ? target.get(property) : target[property] ;
-        if (newAction && SC.typeOf(newAction) == SC.T_FUNCTION) {
-          newAction.call(newTarget, this) ;
-        } else {
-          throw '%@: Menu could not find a function at %@'.fmt(this, this.action) ;
+    Get the previous Enabled Menu Item which is not a separator
+    
+    @returns MenuItemView
+  */
+  getPreviousEnabledMenuItem : function(menuItem) {
+    var menuItemViews = this.get('menuItemViews') ;
+    if(menuItemViews) {
+      var len = menuItemViews.length ;
+      var idx = (menuItemViews.indexOf(menuItem) === -1) ? len : menuItemViews.indexOf(menuItem) ;
+      var isEnabled = NO ;
+      var isSeparator = NO ;
+      while(--idx >= 0 && !isEnabled && !isSeparator) {
+        isEnabled = menuItemViews[idx].get('isEnabled') ;
+        var content = menuItemViews[idx].get('content') ;
+        if(content) {
+          isSeparator = content.get(menuItemViews[idx].get('isSeparatorKey'));
         }
-
-      // otherwise, try to execute action direction on target or send down
-      // responder chain.
-      } else {
-        SC.RootResponder.responder.sendAction(this.action, this.target, this);
       }
+      if(idx === -1) idx = len - 1;
+      return menuItemViews[idx];
     }
   },
-  
-  mouseDown: function(evt) {
-    return YES;
+
+  /**
+    Get the next Enabled Menu Item which is not a separator
+    
+    @returns MenuItemView
+  */
+  getNextEnabledMenuItem : function(menuItem) {
+    var menuItemViews = this.get('menuItemViews') ;
+    if(menuItemViews) {
+      var len = menuItemViews.length ;
+      var idx = (menuItemViews.indexOf(menuItem) === -1) ? 0 : menuItemViews.indexOf(menuItem) ;
+      var isEnabled = NO ;
+      var isSeparator = NO ;
+      while(!isEnabled && !isSeparator && ++idx < len) {
+        isEnabled = menuItemViews[idx].get('isEnabled') ;
+        var content = menuItemViews[idx].get('content') ;
+        if(content) {
+          isSeparator = content.get(menuItemViews[idx].get('isSeparatorKey'));
+        }
+      }
+      if(idx === len) idx = 0 ;
+      return menuItemViews[idx] ;
+    }
   },
   
-  mouseUp: function(evt) {
-    this.remove();
-    var anchor = this.get('anchor');
-    if(this.isAnchorMenuItemType()) this.sendEvent('mouseUp', evt, anchor);
+  /** 
+    @private - click away picker. 
+    
+    Override to pass the event to the parent Menu
+    in case the current Menu is a subMenu
+    
+    @returns Boolean
+  */
+  modalPaneDidClick: function(evt) {
+    var f = this.get("frame");
+    var currentSelectedMenuItem = this.get('currentSelectedMenuItem');
+    if(currentSelectedMenuItem) {
+      var anchor = currentSelectedMenuItem.getAnchor();
+      if(anchor) {
+        var parentMenu =  anchor.parentMenu();
+        if(parentMenu.kindOf(SC.MenuPane)) parentMenu.modalPaneDidClick(evt);
+      }
+    }
+    if(!this.clickInside(f, evt)) {
+      this.remove() ;
+    }
     return YES;
   },
   
-  moveUp: function(childMenu) {
-    //TODO
+  /** 
+    Get the Menu Item based on the key,value passed
+    @params {String} key 
+    @params {String} value 
+    
+    @returns SC.MenuItemView
+  */
+  getMenuItem: function(key,value) {
+    var displayItems = this.get('displayItemsArray') ;
+    var menuItemViews = this.get('menuItemViews') ;
+    if(displayItems && menuItemViews) {
+      var idx = displayItems.get(key).indexOf(value);
+      if(idx !== -1) return menuItemViews[idx];
+      else return null;
+    }
+    else return null;
   },
   
-  moveDown: function(childMenu) {
-    //TODO
-  }
   
   
 });