angular-material-npfixed
Version:
The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M
142 lines (134 loc) • 5.93 kB
JavaScript
/**
* @ngdoc directive
* @name mdMenuBar
* @module material.components.menuBar
* @restrict E
* @description
*
* Menu bars are containers that hold multiple menus. They change the behavior and appearence
* of the `md-menu` directive to behave similar to an operating system provided menu.
*
* @usage
* <hljs lang="html">
* <md-menu-bar>
* <md-menu>
* <button ng-click="$mdMenu.open()">
* File
* </button>
* <md-menu-content>
* <md-menu-item>
* <md-button ng-click="ctrl.sampleAction('share', $event)">
* Share...
* </md-button>
* </md-menu-item>
* <md-menu-divider></md-menu-divider>
* <md-menu-item>
* <md-menu-item>
* <md-menu>
* <md-button ng-click="$mdMenu.open()">New</md-button>
* <md-menu-content>
* <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>
* <md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item>
* <md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item>
* <md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item>
* <md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item>
* </md-menu-content>
* </md-menu>
* </md-menu-item>
* </md-menu-content>
* </md-menu>
* </md-menu-bar>
* </hljs>
*
* ## Menu Bar Controls
*
* You may place `md-menu-items` that function as controls within menu bars.
* There are two modes that are exposed via the `type` attribute of the `md-menu-item`.
* `type="checkbox"` will function as a boolean control for the `ng-model` attribute of the
* `md-menu-item`. `type="radio"` will function like a radio button, setting the `ngModel`
* to the `string` value of the `value` attribute. If you need non-string values, you can use
* `ng-value` to provide an expression (this is similar to how angular's native `input[type=radio]` works.
*
* <hljs lang="html">
* <md-menu-bar>
* <md-menu>
* <button ng-click="$mdMenu.open()">
* Sample Menu
* </button>
* <md-menu-content>
* <md-menu-item type="checkbox" ng-model="settings.allowChanges">Allow changes</md-menu-item>
* <md-menu-divider></md-menu-divider>
* <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 1</md-menu-item>
* <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 2</md-menu-item>
* <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 3</md-menu-item>
* </md-menu-content>
* </md-menu>
* </md-menu-bar>
* </hljs>
*
*
* ### Nesting Menus
*
* Menus may be nested within menu bars. This is commonly called cascading menus.
* To nest a menu place the nested menu inside the content of the `md-menu-item`.
* <hljs lang="html">
* <md-menu-item>
* <md-menu>
* <button ng-click="$mdMenu.open()">New</md-button>
* <md-menu-content>
* <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>
* <md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item>
* <md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item>
* <md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item>
* <md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item>
* </md-menu-content>
* </md-menu>
* </md-menu-item>
* </hljs>
*
*/
angular
.module('material.components.menuBar')
.directive('mdMenuBar', MenuBarDirective);
/* @ngInject */
function MenuBarDirective($mdUtil, $mdTheming) {
return {
restrict: 'E',
require: 'mdMenuBar',
controller: 'MenuBarController',
compile: function compile(templateEl, templateAttrs) {
if (!templateAttrs.ariaRole) {
templateEl[0].setAttribute('role', 'menubar');
}
angular.forEach(templateEl[0].children, function(menuEl) {
if (menuEl.nodeName == 'MD-MENU') {
if (!menuEl.hasAttribute('md-position-mode')) {
menuEl.setAttribute('md-position-mode', 'left bottom');
// Since we're in the compile function and actual `md-buttons` are not compiled yet,
// we need to query for possible `md-buttons` as well.
menuEl.querySelector('button, a, md-button').setAttribute('role', 'menuitem');
}
var contentEls = $mdUtil.nodesToArray(menuEl.querySelectorAll('md-menu-content'));
angular.forEach(contentEls, function(contentEl) {
contentEl.classList.add('md-menu-bar-menu');
contentEl.classList.add('md-dense');
if (!contentEl.hasAttribute('width')) {
contentEl.setAttribute('width', 5);
}
});
}
});
// Mark the child menu items that they're inside a menu bar. This is necessary,
// because mnMenuItem has special behaviour during compilation, depending on
// whether it is inside a mdMenuBar. We can usually figure this out via the DOM,
// however if a directive that uses documentFragment is applied to the child (e.g. ngRepeat),
// the element won't have a parent and won't compile properly.
templateEl.find('md-menu-item').addClass('md-in-menu-bar');
return function postLink(scope, el, attr, ctrl) {
el.addClass('_md'); // private md component indicator for styling
$mdTheming(scope, el);
ctrl.init();
};
}
};
}