sproutcore 1.10.3.1 → 1.11.0.rc1

data/lib/frameworks/sproutcore/frameworks/desktop/panes/draggable.js

@@ -0,0 +1,202 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  @namespace
+
+  Provides drag functionality to a pane. If you need to disable dragging at certain times set the
+  property isAnchored to YES and the pane will no longer move.
+
+  See SC.PalettePane, a simple panel pane with SC.DraggablePaneSupport mixed in.
+*/
+SC.DraggablePaneSupport = /** @scope SC.DraggablePaneSupport.prototype */{
+
+  /**
+    Walk like a duck.
+
+    @type Boolean
+  */
+  isDraggablePane: YES,
+
+  /**
+   @type Boolean
+   @default NO
+  */
+  isAnchored: NO,
+
+  /** @private */
+  _drag_cachedMouseX: null,
+
+  /** @private */
+  _drag_cachedMouseY: null,
+
+  /**
+   To provide drag functionality enhance mouseDown, mouseDragged, touchStart, and touchesDragged if they exist.
+   */
+  initMixin: function() {
+    if (this.mouseDown) {
+      this.mouseDown = SC._enhance(this.mouseDown, function(original, evt) {
+        var ret = this._drag_mouseDown(evt);
+        return original(evt) || ret;
+      });
+    } else {
+      this.mouseDown = this._drag_mouseDown;
+    }
+
+    if (this.mouseDragged) {
+      this.mouseDragged = SC._enhance(this.mouseDragged, function(original, evt) {
+        var ret = this._drag_mouseDragged(evt);
+        return original(evt) || ret;
+      });
+    } else {
+      this.mouseDragged = this._drag_mouseDragged;
+    }
+
+    if (this.touchStart) {
+      this.touchStart = SC._enhance(this.touchStart, function(original, evt) {
+        var ret = this._drag_touchStart(evt);
+        return original(evt) || ret;
+      });
+    } else {
+      this.touchStart = this._drag_touchStart;
+    }
+
+    if (this.touchesDragged) {
+      this.touchesDragged = SC._enhance(this.touchesDragged, function(original, evt) {
+        var ret = this._drag_touchesDragged(evt);
+        return original(evt) || ret;
+      });
+    } else {
+      this.touchesDragged = this._drag_touchesDragged;
+    }
+  },
+
+  /**
+    Returns true if the target view of the event exists and has a truthy isTextSelectable
+
+    @param evt The event
+    @return {Boolean}
+  */
+  _drag_targetHasSelectableText: function(evt) {
+    var targetView = SC.RootResponder.responder.targetViewForEvent(evt);
+
+    return !!(targetView && targetView.isTextSelectable);
+  },
+
+  /**
+    Returns true if we should handle a drag.
+
+    @param evt The event
+    @return {Boolean}
+  */
+  _drag_shouldHandleDrag: function(evt) {
+    return !this.get('isAnchored') && !this._drag_targetHasSelectableText(evt);
+  },
+
+  /**
+    The drag code will modify the existing layout by the difference between each drag event so for the first one store
+    the original mouse down position.
+
+    @param evt The mouseDown event
+    @return {Boolean} YES
+  */
+  _drag_mouseDown: function(evt) {
+    this._drag_cachedMouseX = evt.pageX;
+    this._drag_cachedMouseY = evt.pageY;
+    return this._drag_shouldHandleDrag(evt);
+  },
+
+  /**
+    Modify the current layout by the movement since the last drag event.
+
+    @param evt The mouseDrag event
+    @return {Boolean} YES if we moved the view, NO if we didn't due to isAnchored being YES
+  */
+  _drag_mouseDragged: function(evt) {
+    var xOffset = this._drag_cachedMouseX - evt.pageX,
+        yOffset = this._drag_cachedMouseY - evt.pageY,
+        frame = this.get('frame'),
+        // NOTE: wFrame will be incorrect if this pane is not attached to document.body (e.g. via appendTo).
+        wFrame = SC.RootResponder.responder.computeWindowSize(),
+        oldLayout = SC.clone(this.get('layout')),
+        layout = {},
+        isPercent = function(num) {
+          return (num < 1 && num > 0);
+        };
+
+    //Update the cached coordinates so we can track the change between each drag event
+    this._drag_cachedMouseX = evt.pageX;
+    this._drag_cachedMouseY = evt.pageY;
+
+    if (!this._drag_shouldHandleDrag(evt)) {
+      return NO;
+    }
+
+    // If a layout property is in the layout no matter what other layout properties are used we need to modify it the
+    // same way. For the 4 offsets we check if they've been specified as percentages and if so convert them to regular
+    // offsets based on our current frame and the current window. For simplicity's sake, it is assumed that the frame
+    // frame coordinates are in the browser window's coordinates (see above note on wFrame).
+
+    if (oldLayout.hasOwnProperty('left')) {
+      if (isPercent(oldLayout.left)) {
+        oldLayout.left = frame.x;
+      }
+
+      layout.left = oldLayout.left - xOffset;
+    }
+
+    if (oldLayout.hasOwnProperty('right')) {
+      if (isPercent(oldLayout.right)) {
+        oldLayout.right = wFrame.width - (frame.x + frame.width);
+      }
+
+      layout.right = oldLayout.right + xOffset;
+    }
+
+    if (oldLayout.hasOwnProperty('centerX')) {
+      layout.centerX = oldLayout.centerX - xOffset;
+    }
+
+    if (oldLayout.hasOwnProperty('top')) {
+      if (isPercent(oldLayout.top)) {
+        oldLayout.top = frame.y;
+      }
+
+      layout.top = oldLayout.top - yOffset;
+    }
+
+    if (oldLayout.hasOwnProperty('bottom')) {
+      if (isPercent(oldLayout.bottom)) {
+        oldLayout.bottom = wFrame.height - (frame.y + frame.height);
+      }
+
+      layout.bottom = oldLayout.bottom + yOffset;
+    }
+
+    if (oldLayout.hasOwnProperty('centerY')) {
+      layout.centerY = oldLayout.centerY - yOffset;
+    }
+
+    this.adjust(layout);
+
+    return YES;
+  },
+
+  /**
+    Forward to our mouseDown handler.
+  */
+  _drag_touchStart: function(evt) {
+    return this._drag_mouseDown(evt);
+  },
+
+  /**
+    Forward to our mouseDragged handler.
+  */
+  _drag_touchesDragged: function(evt) {
+    return this._drag_mouseDragged(evt);
+  }
+};

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

@@ -61,6 +61,9 @@ sc_require('views/menu_item');
 SC.MenuPane = SC.PickerPane.extend(
 /** @scope SC.MenuPane.prototype */ {
 
+  /** @private Cache of the items array, used for clean up of observers. */
+  _sc_menu_items: null,
+
   /**
     @type Array
     @default ['sc-menu']
@@ -228,6 +231,14 @@ SC.MenuPane = SC.PickerPane.extend(
   */
   isSubMenu: NO,
 
+  /**
+    If true, title of menu items will be escaped to avoid scripting attacks.
+
+    @type Boolean
+    @default YES
+  */
+  escapeHTML: YES,
+
   /**
     Whether the title of menu items should be localized before display.
 
@@ -284,6 +295,8 @@ SC.MenuPane = SC.PickerPane.extend(
    // this.set('anchor',anchorViewOrElement);
     if (preferMatrix) this.set('preferMatrix', preferMatrix);
 
+    // Resize the pane's initial height to fit the height of the menu.
+    // Note: SC.PickerPane's positioning code may adjust the height to fit within the window.
     this.adjust('height', this.get('menuHeight'));
     this.positionPane();
 
@@ -296,6 +309,11 @@ SC.MenuPane = SC.PickerPane.extend(
     // Prevent body overflow (we don't want to overflow because of shadows).
     SC.bodyOverflowArbitrator.requestHidden(this, true);
 
+    //@if(debug)
+    // A debug-mode only flag to indicate that the popup method was called (see override of append in SC.PickerPane).
+    this._sc_didUsePopup = true;
+    //@endif
+
     this.append();
   },
 
@@ -313,22 +331,31 @@ SC.MenuPane = SC.PickerPane.extend(
   itemTitleKey: 'title',
 
   /**
-    The name of the property that determines whether the item is enabled.
+    The name of the property that contains the value for each item.
 
     @type String
-    @default "isEnabled"
+    @default "value"
     @commonTask Menu Item Properties
   */
-  itemIsEnabledKey: 'isEnabled',
+  itemValueKey: 'value',
 
   /**
-    The name of the property that contains the value for each item.
+    The name of the property that contains the tooltip for each item.
 
     @type String
-    @default "value"
+    @default "toolTip"
     @commonTask Menu Item Properties
   */
-  itemValueKey: 'value',
+  itemToolTipKey: 'toolTip',
+
+  /**
+    The name of the property that determines whether the item is enabled.
+
+    @type String
+    @default "isEnabled"
+    @commonTask Menu Item Properties
+  */
+  itemIsEnabledKey: 'isEnabled',
 
   /**
     The name of the property that contains the icon for each item.
@@ -468,7 +495,7 @@ SC.MenuPane = SC.PickerPane.extend(
     @isReadOnly
     @type Array
   */
-  menuItemKeys: ['itemTitleKey', 'itemValueKey', 'itemIsEnabledKey', 'itemIconKey', 'itemSeparatorKey', 'itemActionKey', 'itemCheckboxKey', 'itemShortCutKey', 'itemHeightKey', 'itemSubMenuKey', 'itemKeyEquivalentKey', 'itemTargetKey', 'itemLayerIdKey'],
+  menuItemKeys: ['itemTitleKey', 'itemValueKey', 'itemToolTipKey', 'itemIsEnabledKey', 'itemIconKey', 'itemSeparatorKey', 'itemActionKey', 'itemCheckboxKey', 'itemShortCutKey', 'itemHeightKey', 'itemSubMenuKey', 'itemKeyEquivalentKey', 'itemTargetKey', 'itemLayerIdKey'],
 
   // ..........................................................
   // DEFAULT PROPERTIES
@@ -497,15 +524,6 @@ SC.MenuPane = SC.PickerPane.extend(
   /** @private */
   preferType: SC.PICKER_MENU,
 
-  /**
-    Create a modal pane beneath the menu that will prevent any mouse clicks
-    that fall outside the menu pane from triggering an inadvertent action.
-
-    @type Boolean
-    @private
-  */
-  isModal: YES,
-
   // ..........................................................
   // INTERNAL METHODS
   //
@@ -521,6 +539,9 @@ SC.MenuPane = SC.PickerPane.extend(
 
     // Continue initializing now that default values exist.
     sc_super();
+
+    // Initialize the observer function once.
+    this._sc_menu_itemsDidChange();
   },
 
   displayProperties: ['controlSize'],
@@ -538,27 +559,16 @@ SC.MenuPane = SC.PickerPane.extend(
   createChildViews: function () {
     var scroll, menuView, menuItemViews;
 
-    scroll = this._menuScrollView = this.createChildView(SC.MenuScrollView, {
-      controlSize: this.get('controlSize')
-    });
-
+    // Create the menu items collection view.
+    // TODO: Should this not be an SC.ListView?
     menuView = this._menuView = SC.View.create({
-      parentViewDidResize: function () {
-        this.notifyPropertyChange('frame');
-      },
-
-      viewDidResize: function () {
-
-      }
+      layout: { height: 0 }
     });
 
-    menuItemViews = this.get('menuItemViews');
-    menuView.replaceAllChildren(menuItemViews);
-
-    // Adjust our menu view's layout to fit the calculated menu height.
-    menuView.set('layout', { top: 0, left: 0, height : this.get('menuHeight')});
-
-    scroll.set('contentView', menuView);
+    scroll = this._menuScrollView = this.createChildView(SC.MenuScrollView, {
+      controlSize: this.get('controlSize'),
+      contentView: menuView
+    });
 
     this.childViews = [scroll];
 
@@ -649,7 +659,7 @@ SC.MenuPane = SC.PickerPane.extend(
         exampleViewKey, itemExampleView,
         height, heightKey, separatorKey, defaultHeight, separatorHeight,
         menuHeight, menuHeightPadding, keyEquivalentKey, keyEquivalent,
-        keyArray, idx, layerIdKey, propertiesHash,
+        keyArray, idx, layerIdKey, propertiesHash, escapeHTML,
         len;
 
     if (!items) return views; // return an empty array
@@ -661,6 +671,7 @@ SC.MenuPane = SC.PickerPane.extend(
     keyEquivalentKey = this.get('itemKeyEquivalentKey');
     separatorHeight = this.get('itemSeparatorHeight');
     layerIdKey = this.get('itemLayerIdKey');
+    escapeHTML = this.get('escapeHTML');
     menuHeightPadding = Math.floor(this.get('menuHeightPadding') / 2);
     menuHeight = menuHeightPadding;
 
@@ -672,24 +683,14 @@ SC.MenuPane = SC.PickerPane.extend(
       height = item.get(heightKey);
       if (!height) {
         height = item.get(separatorKey) ? separatorHeight : defaultHeight;
-        //@if(debug)
-        // TODO: Remove in 1.10 and 2.0
-        // Help the developer if they were relying on the previously misleading
-        // default value of itemSeparatorKey.  We need to ensure that the change
-        // is backwards compatible with apps prior to 1.9.
-        if (separatorKey === 'isSeparator' && SC.none(item.get('isSeparator')) && item.get('separator')) {
-          SC.warn("Developer Warning: the default value of itemSeparatorKey has been changed from 'separator' to 'isSeparator' to match the documentation.  Please update your menu item properties to 'isSeparator: YES' to remove this warning.");
-          height = separatorHeight;
-          item.set('isSeparator', YES);
-        }
-        //@endif
       }
 
       propertiesHash = {
         layout: { height: height, top: menuHeight },
         contentDisplayProperties: keyArray,
         content: item,
-        parentMenu: this
+        parentMenu: this,
+        escapeHTML: escapeHTML
       };
 
       if (item.get(layerIdKey)) {
@@ -751,7 +752,7 @@ SC.MenuPane = SC.PickerPane.extend(
     return this;
   }.property('isSubMenu').cacheable(),
 
-
+  /** @private @see SC.Object */
   destroy: function () {
     var ret = sc_super();
 
@@ -819,7 +820,7 @@ SC.MenuPane = SC.PickerPane.extend(
       item = items.objectAt(idx);
 
       // fast track out if we can't do anything with this item
-      if (!item) continue;
+      if (!item || (!ret.length && item[this.get('itemSeparatorKey')])) continue;
 
       itemType = SC.typeOf(item);
       if (itemType === SC.T_STRING) {
@@ -838,6 +839,7 @@ SC.MenuPane = SC.PickerPane.extend(
     return ret;
   }.property('items').cacheable(),
 
+  /** @private */
   _sc_menu_itemsDidChange: function () {
     var items = this.get('items');
 
@@ -860,6 +862,7 @@ SC.MenuPane = SC.PickerPane.extend(
     this._menuView.adjust('height', this.get('menuHeight'));
   }.observes('items'),
 
+  /** @private */
   _sc_menu_itemPropertiesDidChange: function () {
     // Indicate that the displayItems changed.
     this.notifyPropertyChange('displayItems');
@@ -884,6 +887,7 @@ SC.MenuPane = SC.PickerPane.extend(
     return this._currentMenuItem;
   }.property().cacheable(),
 
+  /** @private */
   _sc_menu_currentMenuItemDidChange: function () {
     var currentMenuItem = this.get('currentMenuItem'),
         previousMenuItem = this.get('previousMenuItem');
@@ -1071,7 +1075,7 @@ SC.MenuPane = SC.PickerPane.extend(
         verticalOffset = 0,
         verticalPageScroll;
 
-    if (this._menuScrollView && this._menuScrollView.verticalScrollerView2) {
+    if (this._menuScrollView && this._menuScrollView.bottomScrollerView) {
 
       if (currentMenuItem) {
         idx = currentMenuItem.getPath('content.contentIndex');
@@ -1117,7 +1121,7 @@ SC.MenuPane = SC.PickerPane.extend(
         verticalOffset = 0,
         verticalPageScroll;
 
-    if (this._menuScrollView && this._menuScrollView.verticalScrollerView) {
+    if (this._menuScrollView && this._menuScrollView.topScrollerView) {
 
       if (currentMenuItem) {
         idx = currentMenuItem.getPath('content.contentIndex');
@@ -1258,15 +1262,14 @@ SC.MenuPane = SC.PickerPane.extend(
   }
 });
 
+
+/** @private */
 SC._menu_fetchKeys = function (k) {
   return this.get(k);
 };
+
+/** @private */
 SC._menu_fetchItem = function (k) {
   if (!k) return null;
   return this.get ? this.get(k) : this[k];
 };
-
-// If a menu pane exceeds the height of the viewport, it will
-// be truncated to fit. This value determines the amount by which
-// the menu will be offset from the top and bottom of the viewport.
-SC.MenuPane.VERTICAL_OFFSET = 23;