feat(menu): add a basic dropdown menu component

References #78

src/components/menu/_menu.js

@@ -0,0 +1,232 @@
+/**
+ * @ngdoc module
+ * @name material.components.menu
+ */
+
+angular.module('material.components.menu', [
+ 'material.core',
+ 'material.components.backdrop'
+])
+.directive('mdMenu', MenuDirective);
+
+/**
+ * @ngdoc directive
+ * @name mdMenu
+ * @module material.components.menu
+ * @restrict E
+ * @description
+ *
+ * Menus are elements that open when clicked. They are useful for displaying
+ * additional options within the context of an action.
+ *
+ * Every `md-menu` must specify exactly two child elements. The first element is what is
+ * left in the DOM and is used to open the menu. This element is called the origin element.
+ * The origin element's scope has access to `$mdOpenMenu()`
+ * which it may call to open the menu.
+ *
+ * The second element is the `md-menu-content` element which represents the
+ * contents of the menu when it is open. Typically this will contain `md-menu-item`s,
+ * but you can do custom content as well.
+ *
+ * <hljs lang="html">
+ * <md-menu>
+ * <!-- Origin element is a md-button with an icon -->
+ * <md-button ng-click="$mdOpenMenu()" class="md-icon-button">
+ * <md-icon md-svg-icon="call:phone"></md-icon>
+ * </md-button>
+ * <md-menu-content>
+ * <md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
+ * </md-menu-content>
+ * </md-menu>
+ * </hljs>
+
+ * ## Sizing Menus
+ *
+ * The width of the menu when it is open may be specified by specifying a `width`
+ * attribute on the `md-menu-content` element.
+ * See the [Material Design Spec](http://www.google.com/design/spec/components/menus.html#menus-specs)
+ * for more information.
+ *
+ *
+ * ## Aligning Menus
+ *
+ * When a menu opens, it is important that the content aligns with the origin element.
+ * Failure to align menus can result in jarring experiences for users as content
+ * suddenly shifts. To help with this, `md-menu` provides serveral APIs to help
+ * with alignment.
+ *
+ * ### Target Mode
+ *
+ * By default, `md-menu` will attempt to align the `md-menu-content` by aligning
+ * designated child elements in both the origin and the menu content.
+ *
+ * To specify the alignment element in the `origin` you can use the `md-menu-origin`
+ * attribute on a child element. If no `md-menu-origin` is specified, the `md-menu`
+ * will be used as the origin element.
+ *
+ * Similarly, the `md-menu-content` may specify a `md-menu-align-target` for a
+ * `md-menu-item` to specify the node that it should try and allign with.
+ *
+ * In this example code, we specify an icon to be our origin element, and an
+ * icon in our menu content to be our alignment target. This ensures that both
+ * icons are aligned when the menu opens.
+ *
+ * <hljs lang="html">
+ * <md-menu>
+ * <md-button ng-click="$mdOpenMenu()" class="md-icon-button">
+ * <md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>
+ * </md-button>
+ * <md-menu-content>
+ * <md-menu-item>
+ * <md-button ng-click="doSomething()">
+ * <md-icon md-menu-align-target md-svg-icon="call:phone"></md-icon>
+ * Do Something
+ * </md-button>
+ * </md-menu-item>
+ * </md-menu-content>
+ * </md-menu>
+ * </hljs>
+ *
+ * Sometimes we want to specify alignment on the right side of an element, for example
+ * if we have a menu on the right side a toolbar, we want to right align our menu content.
+ *
+ * We can specify the origin by using the `md-position-mode` attribute on both
+ * the `x` and `y` axis. Right now only the `x-axis` has more than one option.
+ * You may specify the default mode of `target target` or
+ * `target-right target` to specify a right-oriented alignment target. See the
+ * position section of the demos for more examples.
+ *
+ * ### Menu Offsets
+ *
+ * It is sometimes unavoidable to need to have a deeper level of control for
+ * the positioning of a menu to ensure perfect alignment. `md-menu` provides
+ * the `md-offset` attribute to allow pixel level specificty of adjusting the
+ * exact positioning.
+ *
+ * This offset is provided in the format of `x y` or `n` where `n` will be used
+ * in both the `x` and `y` axis.
+ *
+ * For example, to move a menu by 2px from the top, we can use:
+ * <hljs lang="html">
+ * <md-menu md-offset="2 0">
+ * <!-- menu-content -->
+ * </md-menu>
+ * </hljs>
+ *
+ * @usage
+ * <hljs lang="html">
+ * <md-menu>
+ * <md-button ng-click="$mdOpenMenu()" class="md-icon-button">
+ * <md-icon md-svg-icon="call:phone"></md-icon>
+ * </md-button>
+ * <md-menu-content>
+ * <md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
+ * </md-menu-content>
+ * </md-menu>
+ * </hljs>
+ *
+ * @param {string} md-position-mode The position mode in the form of
+ `x`, `y`. Default value is `target`,`target`. Right now the `x` axis
+ also suppports `target-right`.
+ * @param {string} md-offset An offset to apply to the dropdown after positioning
+ `x`, `y`. Default value is `0`,`0`.
+ *
+ */
+
+function MenuDirective($mdMenu) {
+ return {
+ restrict: 'E',
+ require: 'mdMenu',
+ controller: function() { }, // empty function to be built by link
+ scope: true,
+ compile: compile
+ };
+
+ function compile(tEl) {
+ tEl.addClass('md-menu');
+ tEl.children().eq(0).attr('aria-haspopup', 'true');
+ return link;
+ }
+
+ function link(scope, el, attrs, mdMenuCtrl) {
+ // Se up mdMenuCtrl to keep our code squeaky clean
+ buildCtrl();
+
+ // Expose a open function to the child scope for their html to use
+ scope.$mdOpenMenu = function() {
+ mdMenuCtrl.open();
+ };
+
+ if (el.children().length != 2) {
+ throw new Error('Invalid HTML for md-menu. Expected two children elements.');
+ }
+
+ // Move everything into a md-menu-container
+ var menuContainer = angular.element('<div class="md-open-menu-container md-whiteframe-z2"></div>');
+ var menuContents = el.children()[1];
+ menuContainer.append(menuContents);
+
+ var enabled;
+ mdMenuCtrl.enable();
+
+ function buildCtrl() {
+ mdMenuCtrl.enable = function enableMenu() {
+ if (!enabled) {
+ //el.on('keydown', handleKeypress);
+ enabled = true;
+ }
+ };
+
+ mdMenuCtrl.disable = function disableMenu() {
+ if (enabled) {
+ //el.off('keydown', handleKeypress);
+ enabled = false;
+ }
+ };
+
+ mdMenuCtrl.open = function openMenu() {
+ el.attr('aria-expanded', 'true');
+ $mdMenu.show({
+ mdMenuCtrl: mdMenuCtrl,
+ element: menuContainer,
+ target: el[0]
+ });
+ };
+
+ mdMenuCtrl.close = function closeMenu(skipFocus) {
+ el.attr('aria-expanded', 'false');
+ $mdMenu.hide();
+ if (!skipFocus) el.children()[0].focus();
+ };
+
+ mdMenuCtrl.positionMode = function() {
+ var attachment = (attrs.mdPositionMode || 'target').split(' ');
+
+ if (attachment.length == 1) { attachment.push(attachment[0]); }
+
+ return {
+ left: attachment[0],
+ top: attachment[1]
+ };
+
+ };
+
+ mdMenuCtrl.offsets = function() {
+ var offsets = (attrs.mdOffset || '0 0').split(' ').map(function(x) { return parseFloat(x, 10); });
+ if (offsets.length == 2) {
+ return {
+ left: offsets[0],
+ top: offsets[1]
+ };
+ } else if (offsets.length == 1) {
+ return {
+ top: offsets[0],
+ left: offsets[0]
+ };
+ } else {
+ throw new Error('Invalid offsets specified. Please follow format <x, y> or <n>');
+ }
+ };
+ }
+ }
+}

src/components/menu/demoBasicUsage/index.html

@@ -0,0 +1,33 @@
+<div class="md-menu-demo" ng-controller="BasicDemoCtrl as ctrl">
+
+ <div class="menu-demo-container" layout-align="center center" layout="column">
+ <h2 class="md-title">Simple dropdown menu</h2>
+ <p>Note that applying the <code>md-menu-origin</code> and <code>md-menu-align-target</code> attributes ensure that the menu elements align</p>
+ <md-menu>
+ <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+ <md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>
+ </md-button>
+ <md-menu-content width="4">
+ <md-menu-item>
+ <md-button ng-click="ctrl.redial($event)">
+ <md-icon md-svg-icon="call:dialpad" md-menu-align-target></md-icon>
+ Redial
+ </md-button>
+ </md-menu-item>
+ <md-menu-item>
+ <md-button disabled="disabled" ng-click="ctrl.checkVoicemail()">
+ <md-icon md-svg-icon="call:voicemail"></md-icon>
+ Check voicemail
+ </md-button>
+ </md-menu-item>
+ <md-menu-divider></md-menu-divider>
+ <md-menu-item>
+ <md-button ng-click="ctrl.toggleNotifications()">
+ <md-icon md-svg-icon="social:notifications-{{ctrl.notificationsEnabled ? 'off' : 'on'}}"></md-icon>
+ {{ctrl.notificationsEnabled ? 'Disable' : 'Enable' }} notifications
+ </md-button>
+ </md-menu-item>
+ </md-menu-content>
+ </md-menu>
+ </div>
+</div>

src/components/menu/demoBasicUsage/script.js

@@ -0,0 +1,28 @@
+angular.module('menuDemoBasic', ['ngMaterial'])
+.config(function($mdIconProvider) {
+ $mdIconProvider
+ .iconSet("call", '/img/icons/sets/communication-icons.svg', 24)
+ .iconSet("social", '/img/icons/sets/social-icons.svg', 24);
+})
+.controller('BasicDemoCtrl', DemoCtrl);
+
+function DemoCtrl($mdDialog) {
+ var vm = this;
+ vm.notificationsEnabled = true;
+ vm.toggleNotifications = function() {
+ vm.notificationsEnabled = !vm.notificationsEnabled;
+ };
+
+ vm.redial = function(e) {
+ $mdDialog.show(
+ $mdDialog.alert()
+ .title('Suddenly, a redial')
+ .content('You just called someone back. They told you the most amazing story that has ever been told. Have a cookie.')
+ .ok('That was easy')
+ );
+ };
+
+ vm.checkVoicemail = function() {
+ // This never happens.
+ };
+}

src/components/menu/demoBasicUsage/style.css

@@ -0,0 +1,7 @@
+.md-menu-demo {
+ padding: 24px;
+}
+
+.menu-demo-container {
+ min-height: 200px;
+}

src/components/menu/demoMenuPositionModes/index.html

@@ -0,0 +1,56 @@
+<div class="md-menu-demo" ng-controller="PositionDemoCtrl as ctrl">
+ <div class="menu-demo-container" layout-align="center center" layout="column">
+ <h2 class="md-title">Positon Mode Demos</h2>
+ <p>The <code>md-position-mode</code> attribute can be used to specify the positioning along the <code>x</code> and <code>y</code> axis.</p>
+ <h3 class="md-subhead">Target-Based Position Modes</h3>
+ <div class="menus" layout-fill layout-wrap layout="row" layout-align="space-between center">
+ <div layout="column" flex="33" flex-sm="100" layout-align="center center">
+ <p>Target Mode Positioning (default)</p>
+ <md-menu>
+ <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+ <md-icon md-menu-origin md-svg-icon="call:business"></md-icon>
+ </md-button>
+ <md-menu-content width="6">
+ <md-menu-item ng-repeat="item in [1, 2, 3]">
+ <md-button ng-click="ctrl.announceClick($index)">
+ <md-icon md-menu-align-target md-svg-icon="call:no-sim"></md-icon>
+ Option {{item}} 
+ </md-button>
+ </md-menu-item>
+ </md-menu-content>
+ </md-menu>
+ </div>
+ <div layout="column" flex-sm="100" flex="33" layout-align="center center">
+ <p>Target mode with <code>md-offset</code></p>
+ <md-menu md-offset="0 -5">
+ <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+ <md-icon md-menu-origin md-svg-icon="call:ring-volume"></md-icon>
+ </md-button>
+ <md-menu-content width="4">
+ <md-menu-item ng-repeat="item in [1, 2, 3]">
+ <md-button ng-click="ctrl.announceClick($index)"> <span md-menu-align-target>Option</span> {{item}} </md-button>
+ </md-menu-item>
+ </md-menu-content>
+ </md-menu>
+ </div>
+ <div layout="column" flex-sm="100" flex="33" layout-align="center center">
+ <p><code>md-position-mode="target-right target"</code></p>
+ <md-menu md-position-mode="target-right target">
+ <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu()">
+ <md-icon md-menu-origin md-svg-icon="call:portable-wifi-off"></md-icon>
+ </md-button>
+ <md-menu-content width="4">
+ <md-menu-item ng-repeat="item in [1, 2, 3]">
+ <md-button ng-click="ctrl.announceClick($index)"> 
+ <p>Option {{item}}</p>
+ <md-icon md-menu-align-target md-svg-icon="call:portable-wifi-off"></md-icon>
+ </md-button>
+ </md-menu-item>
+ </md-menu-content>
+ </md-menu>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+

src/components/menu/demoMenuPositionModes/script.js

@@ -0,0 +1,22 @@
+angular.module('menuDemoPosition', ['ngMaterial'])
+.config(function($mdIconProvider) {
+ $mdIconProvider
+ .iconSet("call", '/img/icons/sets/communication-icons.svg', 24)
+ .iconSet("social", '/img/icons/sets/social-icons.svg', 24);
+})
+.controller('PositionDemoCtrl', DemoCtrl);
+
+function DemoCtrl($mdDialog) {
+ var vm = this;
+
+ this.announceClick = function(index) {
+ $mdDialog.show(
+ $mdDialog.alert()
+ .title('You clicked!')
+ .content('You clicked the menu item at index ' + index)
+ .ok('Nice')
+ );
+ };
+}
+
+

src/components/menu/demoMenuPositionModes/style.css

@@ -0,0 +1,7 @@
+.md-menu-demo {
+ padding: 24px;
+}
+
+.menu-demo-container {
+ min-height: 200px;
+}