feat(menu): add custom position feature

Author: kara

e2e/components/menu/menu-page.ts

@@ -0,0 +1,59 @@
+import ElementFinder = protractor.ElementFinder;
+
+export class MenuPage {
+
+  constructor() {
+    browser.get('/menu');
+  }
+
+  menu() { return element(by.css('.md-menu')); }
+
+  trigger() { return element(by.id('trigger')); }
+
+  triggerTwo() { return element(by.id('trigger-two')); }
+
+  body() { return element(by.tagName('body')); }
+
+  firstItem() { return element(by.id('one')); }
+
+  secondItem() { return element(by.id('two')); }
+
+  thirdItem() { return element(by.id('three')); }
+
+  textArea() { return element(by.id('text')); }
+
+  beforeTrigger() { return element(by.id('before-t')); }
+
+  aboveTrigger() { return element(by.id('above-t')); }
+
+  combinedTrigger() { return element(by.id('combined-t')); }
+
+  beforeMenu() { return element(by.css('.md-menu.before')); }
+
+  aboveMenu() { return element(by.css('.md-menu.above')); }
+
+  combinedMenu() { return element(by.css('.md-menu.combined')); }
+
+  expectMenuPresent(expected: boolean) {
+    return browser.isElementPresent(by.css('.md-menu')).then((isPresent) => {
+      expect(isPresent).toBe(expected);
+    });
+  }
+
+  expectMenuLocation(el: ElementFinder, {x,y}: {x: number, y: number}) {
+    el.getLocation().then((loc) => {
+      expect(loc.x).toEqual(x);
+      expect(loc.y).toEqual(y);
+    });
+  }
+
+  expectMenuAlignedWith(el: ElementFinder, id: string) {
+    element(by.id(id)).getLocation().then((loc) => {
+      this.expectMenuLocation(el, {x: loc.x, y: loc.y});
+    });
+  }
+
+  getResultText() {
+    return this.textArea().getText();
+  }
+}

e2e/components/menu/menu.e2e.ts

@@ -1,81 +1,113 @@
+import { MenuPage } from './menu-page';
+
 describe('menu', function () {
+  let page: MenuPage;
+
   beforeEach(function() {
-    browser.get('/menu');
+    page = new MenuPage();
   });
 
   it('should open menu when the trigger is clicked', function () {
-    expectMenuPresent(false);
-    element(by.id('trigger')).click();
-
-    expectMenuPresent(true);
-    expect(element(by.css('.md-menu')).getText()).toEqual("One\nTwo\nThree");
-  });
+    page.expectMenuPresent(false);
+    page.trigger().click();
 
-  it('should align menu when open', function() {
-    element(by.id('trigger')).click();
-    expectMenuAlignedWith('trigger');
+    page.expectMenuPresent(true);
+    expect(page.menu().getText()).toEqual("One\nTwo\nThree");
   });
 
   it('should close menu when area outside menu is clicked', function () {
-    element(by.id('trigger')).click();
-    element(by.tagName('body')).click();
-    expectMenuPresent(false);
+    page.trigger().click();
+    page.body().click();
+    page.expectMenuPresent(false);
   });
 
   it('should close menu when menu item is clicked', function () {
-    element(by.id('trigger')).click();
-    element(by.id('one')).click();
-    expectMenuPresent(false);
+    page.trigger().click();
+    page.firstItem().click();
+    page.expectMenuPresent(false);
   });
 
   it('should run click handlers on regular menu items', function() {
-    element(by.id('trigger')).click();
-    element(by.id('one')).click();
-    expect(element(by.id('text')).getText()).toEqual('one');
+    page.trigger().click();
+    page.firstItem().click();
+    expect(page.getResultText()).toEqual('one');
 
-    element(by.id('trigger')).click();
-    element(by.id('two')).click();
-    expect(element(by.id('text')).getText()).toEqual('two');
+    page.trigger().click();
+    page.secondItem().click();
+    expect(page.getResultText()).toEqual('two');
   });
 
   it('should run not run click handlers on disabled menu items', function() {
-    element(by.id('trigger')).click();
-    element(by.id('three')).click();
-    expect(element(by.id('text')).getText()).toEqual('');
+    page.trigger().click();
+    page.thirdItem().click();
+    expect(page.getResultText()).toEqual('');
   });
 
   it('should support multiple triggers opening the same menu', function() {
-    element(by.id('trigger-two')).click();
-    expect(element(by.css('.md-menu')).getText()).toEqual("One\nTwo\nThree");
-    expectMenuAlignedWith('trigger-two');
+    page.triggerTwo().click();
+    expect(page.menu().getText()).toEqual("One\nTwo\nThree");
+    page.expectMenuAlignedWith(page.menu(), 'trigger-two');
 
-    element(by.tagName('body')).click();
-    expectMenuPresent(false);
+    page.body().click();
+    page.expectMenuPresent(false);
 
-    element(by.id('trigger')).click();
-    expect(element(by.css('.md-menu')).getText()).toEqual("One\nTwo\nThree");
-    expectMenuAlignedWith('trigger');
+    page.trigger().click();
+    expect(page.menu().getText()).toEqual("One\nTwo\nThree");
+    page.expectMenuAlignedWith(page.menu(), 'trigger');
 
-    element(by.tagName('body')).click();
-    expectMenuPresent(false);
+    page.body().click();
+    page.expectMenuPresent(false);
   });
 
-  function expectMenuPresent(bool: boolean) {
-    return browser.isElementPresent(by.css('.md-menu')).then((isPresent) => {
-      expect(isPresent).toBe(bool);
+  it('should mirror classes on host to menu template in overlay', () => {
+    page.trigger().click();
+    page.menu().getAttribute('class').then((classes) => {
+      expect(classes).toEqual('md-menu custom');
+    });
+  });
+
+  describe('position - ', () => {
+
+    it('should default menu alignment to "after below" when not set', function() {
+      page.trigger().click();
+
+      // menu.x should equal trigger.x, menu.y should equal trigger.y
+      page.expectMenuAlignedWith(page.menu(), 'trigger');
+    });
+
+    it('should align overlay end to origin end when x-position is "before"', () => {
+      page.beforeTrigger().click();
+      page.beforeTrigger().getLocation().then((trigger) => {
+
+        // the menu's right corner must be attached to the trigger's right corner.
+        // menu = 112px wide. trigger = 60px wide.  112 - 60 =  52px of menu to the left of trigger.
+        // trigger.x (left corner) - 52px (menu left of trigger) = expected menu.x (left corner)
+        // menu.y should equal trigger.y because only x position has changed.
+        page.expectMenuLocation(page.beforeMenu(), {x: trigger.x - 52, y: trigger.y});
+      });
     });
-  }
 
-  function expectMenuAlignedWith(id: string) {
-    element(by.id(id)).getLocation().then((loc) => {
-      expectMenuLocation({x: loc.x, y: loc.y});
+    it('should align overlay bottom to origin bottom when y-position is "above"', () => {
+      page.aboveTrigger().click();
+      page.aboveTrigger().getLocation().then((trigger) => {
+
+        // the menu's bottom corner must be attached to the trigger's bottom corner.
+        // menu.x should equal trigger.x because only y position has changed.
+        // menu = 64px high. trigger = 20px high. 64 - 20 = 44px of menu extending up past trigger.
+        // trigger.y (top corner) - 44px (menu above trigger) = expected menu.y (top corner)
+        page.expectMenuLocation(page.aboveMenu(), {x: trigger.x, y: trigger.y - 44});
+      });
     });
-  }
 
-  function expectMenuLocation({x,y}: {x: number, y: number}) {
-    element(by.css('.md-menu')).getLocation().then((loc) => {
-      expect(loc.x).toEqual(x);
-      expect(loc.y).toEqual(y);
+    it('should align menu to top left of trigger when "below" and "above"', () => {
+      page.combinedTrigger().click();
+      page.combinedTrigger().getLocation().then((trigger) => {
+
+        // trigger.x (left corner) - 52px (menu left of trigger) = expected menu.x
+        // trigger.y (top corner) - 44px (menu above trigger) = expected menu.y
+        page.expectMenuLocation(page.combinedMenu(), {x: trigger.x - 52, y: trigger.y - 44});
+      });
     });
-  }
+
+  });
 });

src/components/menu/menu-errors.ts

@@ -13,3 +13,27 @@ export class MdMenuMissingError extends MdError {
     `);
   }
 }
+
+/**
+ * Exception thrown when menu's x-position value isn't valid.
+ * In other words, it doesn't match 'before' or 'after'.
+ */
+export class MdMenuInvalidPositionX extends MdError {
+  constructor() {
+    super(`x-position value must be either 'before' or after'.
+      Example: <md-menu x-position="before" #menu="mdMenu"></md-menu>
+    `);
+  }
+}
+
+/**
+ * Exception thrown when menu's y-position value isn't valid.
+ * In other words, it doesn't match 'above' or 'below'.
+ */
+export class MdMenuInvalidPositionY extends MdError {
+  constructor() {
+    super(`y-position value must be either 'above' or below'.
+      Example: <md-menu y-position="above" #menu="mdMenu"></md-menu>
+    `);
+  }
+}

src/components/menu/menu-trigger.ts

@@ -22,6 +22,10 @@ import {
 import {
     ConnectedPositionStrategy
 } from '@angular2-material/core/overlay/position/connected-position-strategy';
+import {
+  HorizontalConnectionPos,
+  VerticalConnectionPos
+} from '@angular2-material/core/overlay/position/connected-position';
 
 /**
  * This directive is intended to be used in conjunction with an md-menu tag.  It is
@@ -115,10 +119,13 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
    * @returns ConnectedPositionStrategy
    */
   private _getPosition(): ConnectedPositionStrategy  {
+    const positionX: HorizontalConnectionPos = this.menu.positionX === 'before' ? 'end' : 'start';
+    const positionY: VerticalConnectionPos = this.menu.positionY === 'above' ? 'bottom' : 'top';
+
     return this._overlay.position().connectedTo(
       this._element,
-      {originX: 'start', originY: 'top'},
-      {overlayX: 'start', overlayY: 'top'}
+      {originX: positionX, originY: positionY},
+      {overlayX: positionX, overlayY: positionY}
     );
   }
 }

src/components/menu/menu.html

@@ -1,5 +1,5 @@
 <template>
-  <div class="md-menu" (click)="_emitCloseEvent()">
+  <div class="md-menu" [ngClass]="_classList" (click)="_emitCloseEvent()">
     <ng-content></ng-content>
   </div>
 </template>

src/components/menu/menu.scss

@@ -14,6 +14,7 @@ $md-menu-overlay-max-width: 280px !default;   // 56 * 5
 $md-menu-item-height: 48px !default;
 $md-menu-font-size: 16px !default;
 $md-menu-side-padding: 16px !default;
+$md-menu-vertical-padding: 8px !default;
 
 .md-menu {
   @include md-elevation(2);
@@ -26,6 +27,8 @@ $md-menu-side-padding: 16px !default;
   -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
 
   background: md-color($md-background, 'card');
+  padding-top: $md-menu-vertical-padding;
+  padding-bottom: $md-menu-vertical-padding;
 }
 
 [md-menu-item] {
@@ -35,7 +38,6 @@ $md-menu-side-padding: 16px !default;
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: 100%;
   height: $md-menu-item-height;
   padding: 0 $md-menu-side-padding;
 
@@ -55,6 +57,10 @@ $md-menu-side-padding: 16px !default;
   }
 }
 
+button[md-menu-item] {
+  width: 100%;
+}
+
 .md-menu-click-catcher {
   @include md-fullscreen();
 }

src/components/menu/menu.ts

@@ -3,13 +3,15 @@
 // TODO(kara): set position of menu
 
 import {
+    Attribute,
     Component,
-    ViewEncapsulation,
+    EventEmitter,
     Output,
-    ViewChild,
     TemplateRef,
-    EventEmitter
+    ViewChild,
+    ViewEncapsulation
 } from '@angular/core';
+import {MdMenuInvalidPositionX, MdMenuInvalidPositionY} from './menu-errors';
 
 @Component({
   moduleId: module.id,
@@ -22,10 +24,21 @@ import {
 })
 export class MdMenu {
   private _showClickCatcher: boolean = false;
+  private _classList: Object;
+  positionX: 'before' | 'after' = 'after';
+  positionY: 'above' | 'below' = 'below';
 
   @Output() close = new EventEmitter;
   @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
 
+  constructor(@Attribute('x-position') posX: 'before' | 'after',
+              @Attribute('y-position') posY: 'above' | 'below',
+              @Attribute('class') classes: string) {
+    if (posX) { this._setPositionX(posX); }
+    if (posY) { this._setPositionY(posY); }
+    this._mirrorHostClasses(classes);
+  }
+
   /**
    * This function toggles the display of the menu's click catcher element.
    * This element covers the viewport when the menu is open to detect clicks outside the menu.
@@ -35,6 +48,35 @@ export class MdMenu {
     this._showClickCatcher = bool;
   }
 
+  /**
+   * This method takes classes set on the host md-menu element and applies them on the
+   * menu template that displays in the overlay container.  Otherwise, it's difficult
+   * to style the containing menu from outside the component.
+   * @param classes: list of class names
+   */
+  private _mirrorHostClasses(classes: string): void {
+    if (!classes) { return; }
+
+    this._classList = classes.split(' ').reduce((obj: any, className: string) => {
+      obj[className] = true;
+      return obj;
+    }, {});
+  }
+
+  private _setPositionX(pos: 'before' | 'after'): void {
+    if ( pos !== 'before' && pos !== 'after') {
+      throw new MdMenuInvalidPositionX();
+    }
+    this.positionX = pos;
+  }
+
+  private _setPositionY(pos: 'above' | 'below'): void {
+    if ( pos !== 'above' && pos !== 'below') {
+      throw new MdMenuInvalidPositionY();
+    }
+    this.positionY = pos;
+  }
+
   private _emitCloseEvent(): void {
     this.close.emit(null);
   }