Maheshjayachandran / closure-library

Automatically exported from code.google.com/p/closure-library
0 stars 0 forks source link

allow setting the emoji popup position relative to the target element #426

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
The following add an option to change the position of the emoji picker popup 
from the default BOTTOM_LEFT.
The change doesn't break old code.

File:
goog/ui/emoji/popupemojipicker.js

Changes:
1. In show_ use this.position_ instead of the hardcoded value.
2. Added position_ property, getPosition and setPosition method.

Thanks

/**
 * Handles click events on the element this picker is attached to and shows the
 * emoji picker in a popup.
 *
 * @param {goog.events.BrowserEvent} e The browser event.
 * @private
 */
goog.ui.emoji.PopupEmojiPicker.prototype.show_ = function(e) {
  if (this.popup_.isOrWasRecentlyVisible() && this.toggleMode_ &&
      this.lastTarget_ == e.currentTarget) {
    this.popup_.setVisible(false);
    return;
  }

  this.lastTarget_ = /** @type {Element} */ (e.currentTarget);
  this.popup_.setPosition(new goog.positioning.AnchoredPosition(
      this.lastTarget_, this.position_));
  this.popup_.setVisible(true);
};

/**
 * The popup position relative to the target element.
 * @type {goog.positioning.Corner}
 * @private
 */
goog.ui.emoji.PopupEmojiPicker.prototype.position_ = 
goog.positioning.Corner.BOTTOM_LEFT;

/**
 * @return {goog.positioning.Corner} he popup position relative to the target element.
 */
goog.ui.emoji.PopupEmojiPicker.prototype.getPosition = function() {
  return this.position_;
};

/**
 * Sets the popup position relative to the target element.
 *
 * @param {goog.positioning.Corner} position The popup position relative to the target element.
 */
goog.ui.emoji.PopupEmojiPicker.prototype.setPosition = function(position) {
  this.position_ = position;
};

Original issue reported on code.google.com by pablo.platt@gmail.com on 21 Feb 2012 at 11:56

GoogleCodeExporter commented 9 years ago
PopupEmojiPicker's behavior is similar to MenuButton. Their public interface 
should also converge.

We probably don't need to support overriding the anchor element, but setting 
the positioning algorithm instead of just the corner would be nice.

/**
 * Specify which positioning algorithm to use.
 *
 * This method is preferred over the fine-grained positioning methods like
 * setPositionElement, setAlignMenuToStart, and setScrollOnOverflow. Calling
 * this method will override settings by those methods.
 *
 * @param {goog.positioning.AnchoredPosition} position The position of the
 *     Menu the button. If the position has a null anchor, we will use the
 *     menubutton element as the anchor.
 */
goog.ui.MenuButton.prototype.setMenuPosition = function(position) {
  if (position) {
    this.menuPosition_ = position;
    this.positionElement_ = position.element;
  }
};

Original comment by pall...@google.com on 29 Feb 2012 at 11:29