commonroutesApp/www/lib/angular-material/modules/js/menuBar/menuBar.js
www/lib/angular-material/modules/js/menuBar/menuBar.jsRaw
1/*!
2 * Angular Material Design
3 * https://github.com/angular/material
4 * @license MIT
5 * v1.1.1
6 */
7(function( window, angular, undefined ){
8"use strict";
9
10/**
11 * @ngdoc module
12 * @name material.components.menu-bar
13 */
14
15angular.module('material.components.menuBar', [
16 'material.core',
17 'material.components.icon',
18 'material.components.menu'
19]);
20
21
22MenuBarController.$inject = ["$scope", "$rootScope", "$element", "$attrs", "$mdConstant", "$document", "$mdUtil", "$timeout"];
23angular
24 .module('material.components.menuBar')
25 .controller('MenuBarController', MenuBarController);
26
27var BOUND_MENU_METHODS = ['handleKeyDown', 'handleMenuHover', 'scheduleOpenHoveredMenu', 'cancelScheduledOpen'];
28
29/**
30 * ngInject
31 */
32function MenuBarController($scope, $rootScope, $element, $attrs, $mdConstant, $document, $mdUtil, $timeout) {
33 this.$element = $element;
34 this.$attrs = $attrs;
35 this.$mdConstant = $mdConstant;
36 this.$mdUtil = $mdUtil;
37 this.$document = $document;
38 this.$scope = $scope;
39 this.$rootScope = $rootScope;
40 this.$timeout = $timeout;
41
42 var self = this;
43 angular.forEach(BOUND_MENU_METHODS, function(methodName) {
44 self[methodName] = angular.bind(self, self[methodName]);
45 });
46}
47
48MenuBarController.prototype.init = function() {
49 var $element = this.$element;
50 var $mdUtil = this.$mdUtil;
51 var $scope = this.$scope;
52
53 var self = this;
54 var deregisterFns = [];
55 $element.on('keydown', this.handleKeyDown);
56 this.parentToolbar = $mdUtil.getClosest($element, 'MD-TOOLBAR');
57
58 deregisterFns.push(this.$rootScope.$on('$mdMenuOpen', function(event, el) {
59 if (self.getMenus().indexOf(el[0]) != -1) {
60 $element[0].classList.add('md-open');
61 el[0].classList.add('md-open');
62 self.currentlyOpenMenu = el.controller('mdMenu');
63 self.currentlyOpenMenu.registerContainerProxy(self.handleKeyDown);
64 self.enableOpenOnHover();
65 }
66 }));
67
68 deregisterFns.push(this.$rootScope.$on('$mdMenuClose', function(event, el, opts) {
69 var rootMenus = self.getMenus();
70 if (rootMenus.indexOf(el[0]) != -1) {
71 $element[0].classList.remove('md-open');
72 el[0].classList.remove('md-open');
73 }
74
75 if ($element[0].contains(el[0])) {
76 var parentMenu = el[0];
77 while (parentMenu && rootMenus.indexOf(parentMenu) == -1) {
78 parentMenu = $mdUtil.getClosest(parentMenu, 'MD-MENU', true);
79 }
80 if (parentMenu) {
81 if (!opts.skipFocus) parentMenu.querySelector('button:not([disabled])').focus();
82 self.currentlyOpenMenu = undefined;
83 self.disableOpenOnHover();
84 self.setKeyboardMode(true);
85 }
86 }
87 }));
88
89 $scope.$on('$destroy', function() {
90 self.disableOpenOnHover();
91 while (deregisterFns.length) {
92 deregisterFns.shift()();
93 }
94 });
95
96
97 this.setKeyboardMode(true);
98};
99
100MenuBarController.prototype.setKeyboardMode = function(enabled) {
101 if (enabled) this.$element[0].classList.add('md-keyboard-mode');
102 else this.$element[0].classList.remove('md-keyboard-mode');
103};
104
105MenuBarController.prototype.enableOpenOnHover = function() {
106 if (this.openOnHoverEnabled) return;
107
108 var self = this;
109
110 self.openOnHoverEnabled = true;
111
112 if (self.parentToolbar) {
113 self.parentToolbar.classList.add('md-has-open-menu');
114
115 // Needs to be on the next tick so it doesn't close immediately.
116 self.$mdUtil.nextTick(function() {
117 angular.element(self.parentToolbar).on('click', self.handleParentClick);
118 }, false);
119 }
120
121 angular
122 .element(self.getMenus())
123 .on('mouseenter', self.handleMenuHover);
124};
125
126MenuBarController.prototype.handleMenuHover = function(e) {
127 this.setKeyboardMode(false);
128 if (this.openOnHoverEnabled) {
129 this.scheduleOpenHoveredMenu(e);
130 }
131};
132
133MenuBarController.prototype.disableOpenOnHover = function() {
134 if (!this.openOnHoverEnabled) return;
135
136 this.openOnHoverEnabled = false;
137
138 if (this.parentToolbar) {
139 this.parentToolbar.classList.remove('md-has-open-menu');
140 angular.element(this.parentToolbar).off('click', this.handleParentClick);
141 }
142
143 angular
144 .element(this.getMenus())
145 .off('mouseenter', this.handleMenuHover);
146};
147
148MenuBarController.prototype.scheduleOpenHoveredMenu = function(e) {
149 var menuEl = angular.element(e.currentTarget);
150 var menuCtrl = menuEl.controller('mdMenu');
151 this.setKeyboardMode(false);
152 this.scheduleOpenMenu(menuCtrl);
153};
154
155MenuBarController.prototype.scheduleOpenMenu = function(menuCtrl) {
156 var self = this;
157 var $timeout = this.$timeout;
158 if (menuCtrl != self.currentlyOpenMenu) {
159 $timeout.cancel(self.pendingMenuOpen);
160 self.pendingMenuOpen = $timeout(function() {
161 self.pendingMenuOpen = undefined;
162 if (self.currentlyOpenMenu) {
163 self.currentlyOpenMenu.close(true, { closeAll: true });
164 }
165 menuCtrl.open();
166 }, 200, false);
167 }
168};
169
170MenuBarController.prototype.handleKeyDown = function(e) {
171 var keyCodes = this.$mdConstant.KEY_CODE;
172 var currentMenu = this.currentlyOpenMenu;
173 var wasOpen = currentMenu && currentMenu.isOpen;
174 this.setKeyboardMode(true);
175 var handled, newMenu, newMenuCtrl;
176 switch (e.keyCode) {
177 case keyCodes.DOWN_ARROW:
178 if (currentMenu) {
179 currentMenu.focusMenuContainer();
180 } else {
181 this.openFocusedMenu();
182 }
183 handled = true;
184 break;
185 case keyCodes.UP_ARROW:
186 currentMenu && currentMenu.close();
187 handled = true;
188 break;
189 case keyCodes.LEFT_ARROW:
190 newMenu = this.focusMenu(-1);
191 if (wasOpen) {
192 newMenuCtrl = angular.element(newMenu).controller('mdMenu');
193 this.scheduleOpenMenu(newMenuCtrl);
194 }
195 handled = true;
196 break;
197 case keyCodes.RIGHT_ARROW:
198 newMenu = this.focusMenu(+1);
199 if (wasOpen) {
200 newMenuCtrl = angular.element(newMenu).controller('mdMenu');
201 this.scheduleOpenMenu(newMenuCtrl);
202 }
203 handled = true;
204 break;
205 }
206 if (handled) {
207 e && e.preventDefault && e.preventDefault();
208 e && e.stopImmediatePropagation && e.stopImmediatePropagation();
209 }
210};
211
212MenuBarController.prototype.focusMenu = function(direction) {
213 var menus = this.getMenus();
214 var focusedIndex = this.getFocusedMenuIndex();
215
216 if (focusedIndex == -1) { focusedIndex = this.getOpenMenuIndex(); }
217
218 var changed = false;
219
220 if (focusedIndex == -1) { focusedIndex = 0; changed = true; }
221 else if (
222 direction < 0 && focusedIndex > 0 ||
223 direction > 0 && focusedIndex < menus.length - direction
224 ) {
225 focusedIndex += direction;
226 changed = true;
227 }
228 if (changed) {
229 menus[focusedIndex].querySelector('button').focus();
230 return menus[focusedIndex];
231 }
232};
233
234MenuBarController.prototype.openFocusedMenu = function() {
235 var menu = this.getFocusedMenu();
236 menu && angular.element(menu).controller('mdMenu').open();
237};
238
239MenuBarController.prototype.getMenus = function() {
240 var $element = this.$element;
241 return this.$mdUtil.nodesToArray($element[0].children)
242 .filter(function(el) { return el.nodeName == 'MD-MENU'; });
243};
244
245MenuBarController.prototype.getFocusedMenu = function() {
246 return this.getMenus()[this.getFocusedMenuIndex()];
247};
248
249MenuBarController.prototype.getFocusedMenuIndex = function() {
250 var $mdUtil = this.$mdUtil;
251 var focusedEl = $mdUtil.getClosest(
252 this.$document[0].activeElement,
253 'MD-MENU'
254 );
255 if (!focusedEl) return -1;
256
257 var focusedIndex = this.getMenus().indexOf(focusedEl);
258 return focusedIndex;
259};
260
261MenuBarController.prototype.getOpenMenuIndex = function() {
262 var menus = this.getMenus();
263 for (var i = 0; i < menus.length; ++i) {
264 if (menus[i].classList.contains('md-open')) return i;
265 }
266 return -1;
267};
268
269MenuBarController.prototype.handleParentClick = function(event) {
270 var openMenu = this.querySelector('md-menu.md-open');
271
272 if (openMenu && !openMenu.contains(event.target)) {
273 angular.element(openMenu).controller('mdMenu').close();
274 }
275};
276
277
278
279
280
281
282
283/**
284 * @ngdoc directive
285 * @name mdMenuBar
286 * @module material.components.menu-bar
287 * @restrict E
288 * @description
289 *
290 * Menu bars are containers that hold multiple menus. They change the behavior and appearence
291 * of the `md-menu` directive to behave similar to an operating system provided menu.
292 *
293 * @usage
294 * <hljs lang="html">
295 * <md-menu-bar>
296 * <md-menu>
297 * <button ng-click="$mdOpenMenu()">
298 * File
299 * </button>
300 * <md-menu-content>
301 * <md-menu-item>
302 * <md-button ng-click="ctrl.sampleAction('share', $event)">
303 * Share...
304 * </md-button>
305 * </md-menu-item>
306 * <md-menu-divider></md-menu-divider>
307 * <md-menu-item>
308 * <md-menu-item>
309 * <md-menu>
310 * <md-button ng-click="$mdOpenMenu()">New</md-button>
311 * <md-menu-content>
312 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>
313 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item>
314 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item>
315 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item>
316 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item>
317 * </md-menu-content>
318 * </md-menu>
319 * </md-menu-item>
320 * </md-menu-content>
321 * </md-menu>
322 * </md-menu-bar>
323 * </hljs>
324 *
325 * ## Menu Bar Controls
326 *
327 * You may place `md-menu-items` that function as controls within menu bars.
328 * There are two modes that are exposed via the `type` attribute of the `md-menu-item`.
329 * `type="checkbox"` will function as a boolean control for the `ng-model` attribute of the
330 * `md-menu-item`. `type="radio"` will function like a radio button, setting the `ngModel`
331 * to the `string` value of the `value` attribute. If you need non-string values, you can use
332 * `ng-value` to provide an expression (this is similar to how angular's native `input[type=radio]` works.
333 *
334 * <hljs lang="html">
335 * <md-menu-bar>
336 * <md-menu>
337 * <button ng-click="$mdOpenMenu()">
338 * Sample Menu
339 * </button>
340 * <md-menu-content>
341 * <md-menu-item type="checkbox" ng-model="settings.allowChanges">Allow changes</md-menu-item>
342 * <md-menu-divider></md-menu-divider>
343 * <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 1</md-menu-item>
344 * <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 2</md-menu-item>
345 * <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 3</md-menu-item>
346 * </md-menu-content>
347 * </md-menu>
348 * </md-menu-bar>
349 * </hljs>
350 *
351 *
352 * ### Nesting Menus
353 *
354 * Menus may be nested within menu bars. This is commonly called cascading menus.
355 * To nest a menu place the nested menu inside the content of the `md-menu-item`.
356 * <hljs lang="html">
357 * <md-menu-item>
358 * <md-menu>
359 * <button ng-click="$mdOpenMenu()">New</md-button>
360 * <md-menu-content>
361 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>
362 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item>
363 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item>
364 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item>
365 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item>
366 * </md-menu-content>
367 * </md-menu>
368 * </md-menu-item>
369 * </hljs>
370 *
371 */
372
373MenuBarDirective.$inject = ["$mdUtil", "$mdTheming"];
374angular
375 .module('material.components.menuBar')
376 .directive('mdMenuBar', MenuBarDirective);
377
378/* ngInject */
379function MenuBarDirective($mdUtil, $mdTheming) {
380 return {
381 restrict: 'E',
382 require: 'mdMenuBar',
383 controller: 'MenuBarController',
384
385 compile: function compile(templateEl, templateAttrs) {
386 if (!templateAttrs.ariaRole) {
387 templateEl[0].setAttribute('role', 'menubar');
388 }
389 angular.forEach(templateEl[0].children, function(menuEl) {
390 if (menuEl.nodeName == 'MD-MENU') {
391 if (!menuEl.hasAttribute('md-position-mode')) {
392 menuEl.setAttribute('md-position-mode', 'left bottom');
393
394 // Since we're in the compile function and actual `md-buttons` are not compiled yet,
395 // we need to query for possible `md-buttons` as well.
396 menuEl.querySelector('button, a, md-button').setAttribute('role', 'menuitem');
397 }
398 var contentEls = $mdUtil.nodesToArray(menuEl.querySelectorAll('md-menu-content'));
399 angular.forEach(contentEls, function(contentEl) {
400 contentEl.classList.add('md-menu-bar-menu');
401 contentEl.classList.add('md-dense');
402 if (!contentEl.hasAttribute('width')) {
403 contentEl.setAttribute('width', 5);
404 }
405 });
406 }
407 });
408
409 // Mark the child menu items that they're inside a menu bar. This is necessary,
410 // because mnMenuItem has special behaviour during compilation, depending on
411 // whether it is inside a mdMenuBar. We can usually figure this out via the DOM,
412 // however if a directive that uses documentFragment is applied to the child (e.g. ngRepeat),
413 // the element won't have a parent and won't compile properly.
414 templateEl.find('md-menu-item').addClass('md-in-menu-bar');
415
416 return function postLink(scope, el, attr, ctrl) {
417 el.addClass('_md'); // private md component indicator for styling
418 $mdTheming(scope, el);
419 ctrl.init();
420 };
421 }
422 };
423
424}
425
426
427angular
428 .module('material.components.menuBar')
429 .directive('mdMenuDivider', MenuDividerDirective);
430
431
432function MenuDividerDirective() {
433 return {
434 restrict: 'E',
435 compile: function(templateEl, templateAttrs) {
436 if (!templateAttrs.role) {
437 templateEl[0].setAttribute('role', 'separator');
438 }
439 }
440 };
441}
442
443
444MenuItemController.$inject = ["$scope", "$element", "$attrs"];
445angular
446 .module('material.components.menuBar')
447 .controller('MenuItemController', MenuItemController);
448
449
450/**
451 * ngInject
452 */
453function MenuItemController($scope, $element, $attrs) {
454 this.$element = $element;
455 this.$attrs = $attrs;
456 this.$scope = $scope;
457}
458
459MenuItemController.prototype.init = function(ngModel) {
460 var $element = this.$element;
461 var $attrs = this.$attrs;
462
463 this.ngModel = ngModel;
464 if ($attrs.type == 'checkbox' || $attrs.type == 'radio') {
465 this.mode = $attrs.type;
466 this.iconEl = $element[0].children[0];
467 this.buttonEl = $element[0].children[1];
468 if (ngModel) {
469 // Clear ngAria set attributes
470 this.initClickListeners();
471 }
472 }
473};
474
475// ngAria auto sets attributes on a menu-item with a ngModel.
476// We don't want this because our content (buttons) get the focus
477// and set their own aria attributes appropritately. Having both
478// breaks NVDA / JAWS. This undeoes ngAria's attrs.
479MenuItemController.prototype.clearNgAria = function() {
480 var el = this.$element[0];
481 var clearAttrs = ['role', 'tabindex', 'aria-invalid', 'aria-checked'];
482 angular.forEach(clearAttrs, function(attr) {
483 el.removeAttribute(attr);
484 });
485};
486
487MenuItemController.prototype.initClickListeners = function() {
488 var self = this;
489 var ngModel = this.ngModel;
490 var $scope = this.$scope;
491 var $attrs = this.$attrs;
492 var $element = this.$element;
493 var mode = this.mode;
494
495 this.handleClick = angular.bind(this, this.handleClick);
496
497 var icon = this.iconEl;
498 var button = angular.element(this.buttonEl);
499 var handleClick = this.handleClick;
500
501 $attrs.$observe('disabled', setDisabled);
502 setDisabled($attrs.disabled);
503
504 ngModel.$render = function render() {
505 self.clearNgAria();
506 if (isSelected()) {
507 icon.style.display = '';
508 button.attr('aria-checked', 'true');
509 } else {
510 icon.style.display = 'none';
511 button.attr('aria-checked', 'false');
512 }
513 };
514
515 $scope.$$postDigest(ngModel.$render);
516
517 function isSelected() {
518 if (mode == 'radio') {
519 var val = $attrs.ngValue ? $scope.$eval($attrs.ngValue) : $attrs.value;
520 return ngModel.$modelValue == val;
521 } else {
522 return ngModel.$modelValue;
523 }
524 }
525
526 function setDisabled(disabled) {
527 if (disabled) {
528 button.off('click', handleClick);
529 } else {
530 button.on('click', handleClick);
531 }
532 }
533};
534
535MenuItemController.prototype.handleClick = function(e) {
536 var mode = this.mode;
537 var ngModel = this.ngModel;
538 var $attrs = this.$attrs;
539 var newVal;
540 if (mode == 'checkbox') {
541 newVal = !ngModel.$modelValue;
542 } else if (mode == 'radio') {
543 newVal = $attrs.ngValue ? this.$scope.$eval($attrs.ngValue) : $attrs.value;
544 }
545 ngModel.$setViewValue(newVal);
546 ngModel.$render();
547};
548
549
550MenuItemDirective.$inject = ["$mdUtil", "$$mdSvgRegistry"];
551angular
552 .module('material.components.menuBar')
553 .directive('mdMenuItem', MenuItemDirective);
554
555 /* ngInject */
556function MenuItemDirective($mdUtil, $$mdSvgRegistry) {
557 return {
558 controller: 'MenuItemController',
559 require: ['mdMenuItem', '?ngModel'],
560 priority: 210, // ensure that our post link runs after ngAria
561 compile: function(templateEl, templateAttrs) {
562 var type = templateAttrs.type;
563 var inMenuBarClass = 'md-in-menu-bar';
564
565 // Note: This allows us to show the `check` icon for the md-menu-bar items.
566 // The `md-in-menu-bar` class is set by the mdMenuBar directive.
567 if ((type == 'checkbox' || type == 'radio') && templateEl.hasClass(inMenuBarClass)) {
568 var text = templateEl[0].textContent;
569 var buttonEl = angular.element('<md-button type="button"></md-button>');
570 var iconTemplate = '<md-icon md-svg-src="' + $$mdSvgRegistry.mdChecked + '"></md-icon>';
571
572 buttonEl.html(text);
573 buttonEl.attr('tabindex', '0');
574
575 templateEl.html('');
576 templateEl.append(angular.element(iconTemplate));
577 templateEl.append(buttonEl);
578 templateEl.addClass('md-indent').removeClass(inMenuBarClass);
579
580 setDefault('role', type == 'checkbox' ? 'menuitemcheckbox' : 'menuitemradio', buttonEl);
581 moveAttrToButton('ng-disabled');
582
583 } else {
584 setDefault('role', 'menuitem', templateEl[0].querySelector('md-button, button, a'));
585 }
586
587
588 return function(scope, el, attrs, ctrls) {
589 var ctrl = ctrls[0];
590 var ngModel = ctrls[1];
591 ctrl.init(ngModel);
592 };
593
594 function setDefault(attr, val, el) {
595 el = el || templateEl;
596 if (el instanceof angular.element) {
597 el = el[0];
598 }
599 if (!el.hasAttribute(attr)) {
600 el.setAttribute(attr, val);
601 }
602 }
603
604 function moveAttrToButton(attribute) {
605 var attributes = $mdUtil.prefixer(attribute);
606
607 angular.forEach(attributes, function(attr) {
608 if (templateEl[0].hasAttribute(attr)) {
609 var val = templateEl[0].getAttribute(attr);
610 buttonEl[0].setAttribute(attr, val);
611 templateEl[0].removeAttribute(attr);
612 }
613 });
614 }
615 }
616 };
617}
618
619})(window, window.angular);