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