socketioMEANseed/www/bower_components/angular-material/modules/js/menuBar/menuBar.js
www/bower_components/angular-material/modules/js/menuBar/menuBar.jsRaw
1/*!
2 * Angular Material Design
3 * https://github.com/angular/material
4 * @license MIT
5 * v1.1.3
6 */
7(function( window, angular, undefined ){
8"use strict";
9
10/**
11 * @ngdoc module
12 * @name material.components.menuBar
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(true, {
274 closeAll: true
275 });
276 }
277};
278
279/**
280 * @ngdoc directive
281 * @name mdMenuBar
282 * @module material.components.menuBar
283 * @restrict E
284 * @description
285 *
286 * Menu bars are containers that hold multiple menus. They change the behavior and appearence
287 * of the `md-menu` directive to behave similar to an operating system provided menu.
288 *
289 * @usage
290 * <hljs lang="html">
291 * <md-menu-bar>
292 * <md-menu>
293 * <button ng-click="$mdMenu.open()">
294 * File
295 * </button>
296 * <md-menu-content>
297 * <md-menu-item>
298 * <md-button ng-click="ctrl.sampleAction('share', $event)">
299 * Share...
300 * </md-button>
301 * </md-menu-item>
302 * <md-menu-divider></md-menu-divider>
303 * <md-menu-item>
304 * <md-menu-item>
305 * <md-menu>
306 * <md-button ng-click="$mdMenu.open()">New</md-button>
307 * <md-menu-content>
308 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>
309 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item>
310 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item>
311 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item>
312 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item>
313 * </md-menu-content>
314 * </md-menu>
315 * </md-menu-item>
316 * </md-menu-content>
317 * </md-menu>
318 * </md-menu-bar>
319 * </hljs>
320 *
321 * ## Menu Bar Controls
322 *
323 * You may place `md-menu-items` that function as controls within menu bars.
324 * There are two modes that are exposed via the `type` attribute of the `md-menu-item`.
325 * `type="checkbox"` will function as a boolean control for the `ng-model` attribute of the
326 * `md-menu-item`. `type="radio"` will function like a radio button, setting the `ngModel`
327 * to the `string` value of the `value` attribute. If you need non-string values, you can use
328 * `ng-value` to provide an expression (this is similar to how angular's native `input[type=radio]` works.
329 *
330 * <hljs lang="html">
331 * <md-menu-bar>
332 * <md-menu>
333 * <button ng-click="$mdMenu.open()">
334 * Sample Menu
335 * </button>
336 * <md-menu-content>
337 * <md-menu-item type="checkbox" ng-model="settings.allowChanges">Allow changes</md-menu-item>
338 * <md-menu-divider></md-menu-divider>
339 * <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 1</md-menu-item>
340 * <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 2</md-menu-item>
341 * <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 3</md-menu-item>
342 * </md-menu-content>
343 * </md-menu>
344 * </md-menu-bar>
345 * </hljs>
346 *
347 *
348 * ### Nesting Menus
349 *
350 * Menus may be nested within menu bars. This is commonly called cascading menus.
351 * To nest a menu place the nested menu inside the content of the `md-menu-item`.
352 * <hljs lang="html">
353 * <md-menu-item>
354 * <md-menu>
355 * <button ng-click="$mdMenu.open()">New</md-button>
356 * <md-menu-content>
357 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>
358 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item>
359 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item>
360 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item>
361 * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item>
362 * </md-menu-content>
363 * </md-menu>
364 * </md-menu-item>
365 * </hljs>
366 *
367 */
368
369MenuBarDirective['$inject'] = ["$mdUtil", "$mdTheming"];
370angular
371 .module('material.components.menuBar')
372 .directive('mdMenuBar', MenuBarDirective);
373
374/* ngInject */
375function MenuBarDirective($mdUtil, $mdTheming) {
376 return {
377 restrict: 'E',
378 require: 'mdMenuBar',
379 controller: 'MenuBarController',
380
381 compile: function compile(templateEl, templateAttrs) {
382 if (!templateAttrs.ariaRole) {
383 templateEl[0].setAttribute('role', 'menubar');
384 }
385 angular.forEach(templateEl[0].children, function(menuEl) {
386 if (menuEl.nodeName == 'MD-MENU') {
387 if (!menuEl.hasAttribute('md-position-mode')) {
388 menuEl.setAttribute('md-position-mode', 'left bottom');
389
390 // Since we're in the compile function and actual `md-buttons` are not compiled yet,
391 // we need to query for possible `md-buttons` as well.
392 menuEl.querySelector('button, a, md-button').setAttribute('role', 'menuitem');
393 }
394 var contentEls = $mdUtil.nodesToArray(menuEl.querySelectorAll('md-menu-content'));
395 angular.forEach(contentEls, function(contentEl) {
396 contentEl.classList.add('md-menu-bar-menu');
397 contentEl.classList.add('md-dense');
398 if (!contentEl.hasAttribute('width')) {
399 contentEl.setAttribute('width', 5);
400 }
401 });
402 }
403 });
404
405 // Mark the child menu items that they're inside a menu bar. This is necessary,
406 // because mnMenuItem has special behaviour during compilation, depending on
407 // whether it is inside a mdMenuBar. We can usually figure this out via the DOM,
408 // however if a directive that uses documentFragment is applied to the child (e.g. ngRepeat),
409 // the element won't have a parent and won't compile properly.
410 templateEl.find('md-menu-item').addClass('md-in-menu-bar');
411
412 return function postLink(scope, el, attr, ctrl) {
413 el.addClass('_md'); // private md component indicator for styling
414 $mdTheming(scope, el);
415 ctrl.init();
416 };
417 }
418 };
419
420}
421
422
423angular
424 .module('material.components.menuBar')
425 .directive('mdMenuDivider', MenuDividerDirective);
426
427
428function MenuDividerDirective() {
429 return {
430 restrict: 'E',
431 compile: function(templateEl, templateAttrs) {
432 if (!templateAttrs.role) {
433 templateEl[0].setAttribute('role', 'separator');
434 }
435 }
436 };
437}
438
439
440MenuItemController['$inject'] = ["$scope", "$element", "$attrs"];
441angular
442 .module('material.components.menuBar')
443 .controller('MenuItemController', MenuItemController);
444
445
446/**
447 * ngInject
448 */
449function MenuItemController($scope, $element, $attrs) {
450 this.$element = $element;
451 this.$attrs = $attrs;
452 this.$scope = $scope;
453}
454
455MenuItemController.prototype.init = function(ngModel) {
456 var $element = this.$element;
457 var $attrs = this.$attrs;
458
459 this.ngModel = ngModel;
460 if ($attrs.type == 'checkbox' || $attrs.type == 'radio') {
461 this.mode = $attrs.type;
462 this.iconEl = $element[0].children[0];
463 this.buttonEl = $element[0].children[1];
464 if (ngModel) {
465 // Clear ngAria set attributes
466 this.initClickListeners();
467 }
468 }
469};
470
471// ngAria auto sets attributes on a menu-item with a ngModel.
472// We don't want this because our content (buttons) get the focus
473// and set their own aria attributes appropritately. Having both
474// breaks NVDA / JAWS. This undeoes ngAria's attrs.
475MenuItemController.prototype.clearNgAria = function() {
476 var el = this.$element[0];
477 var clearAttrs = ['role', 'tabindex', 'aria-invalid', 'aria-checked'];
478 angular.forEach(clearAttrs, function(attr) {
479 el.removeAttribute(attr);
480 });
481};
482
483MenuItemController.prototype.initClickListeners = function() {
484 var self = this;
485 var ngModel = this.ngModel;
486 var $scope = this.$scope;
487 var $attrs = this.$attrs;
488 var $element = this.$element;
489 var mode = this.mode;
490
491 this.handleClick = angular.bind(this, this.handleClick);
492
493 var icon = this.iconEl;
494 var button = angular.element(this.buttonEl);
495 var handleClick = this.handleClick;
496
497 $attrs.$observe('disabled', setDisabled);
498 setDisabled($attrs.disabled);
499
500 ngModel.$render = function render() {
501 self.clearNgAria();
502 if (isSelected()) {
503 icon.style.display = '';
504 button.attr('aria-checked', 'true');
505 } else {
506 icon.style.display = 'none';
507 button.attr('aria-checked', 'false');
508 }
509 };
510
511 $scope.$$postDigest(ngModel.$render);
512
513 function isSelected() {
514 if (mode == 'radio') {
515 var val = $attrs.ngValue ? $scope.$eval($attrs.ngValue) : $attrs.value;
516 return ngModel.$modelValue == val;
517 } else {
518 return ngModel.$modelValue;
519 }
520 }
521
522 function setDisabled(disabled) {
523 if (disabled) {
524 button.off('click', handleClick);
525 } else {
526 button.on('click', handleClick);
527 }
528 }
529};
530
531MenuItemController.prototype.handleClick = function(e) {
532 var mode = this.mode;
533 var ngModel = this.ngModel;
534 var $attrs = this.$attrs;
535 var newVal;
536 if (mode == 'checkbox') {
537 newVal = !ngModel.$modelValue;
538 } else if (mode == 'radio') {
539 newVal = $attrs.ngValue ? this.$scope.$eval($attrs.ngValue) : $attrs.value;
540 }
541 ngModel.$setViewValue(newVal);
542 ngModel.$render();
543};
544
545
546MenuItemDirective['$inject'] = ["$mdUtil", "$mdConstant", "$$mdSvgRegistry"];
547angular
548 .module('material.components.menuBar')
549 .directive('mdMenuItem', MenuItemDirective);
550
551 /* ngInject */
552function MenuItemDirective($mdUtil, $mdConstant, $$mdSvgRegistry) {
553 return {
554 controller: 'MenuItemController',
555 require: ['mdMenuItem', '?ngModel'],
556 priority: $mdConstant.BEFORE_NG_ARIA,
557 compile: function(templateEl, templateAttrs) {
558 var type = templateAttrs.type;
559 var inMenuBarClass = 'md-in-menu-bar';
560
561 // Note: This allows us to show the `check` icon for the md-menu-bar items.
562 // The `md-in-menu-bar` class is set by the mdMenuBar directive.
563 if ((type == 'checkbox' || type == 'radio') && templateEl.hasClass(inMenuBarClass)) {
564 var text = templateEl[0].textContent;
565 var buttonEl = angular.element('<md-button type="button"></md-button>');
566 var iconTemplate = '<md-icon md-svg-src="' + $$mdSvgRegistry.mdChecked + '"></md-icon>';
567
568 buttonEl.html(text);
569 buttonEl.attr('tabindex', '0');
570
571 templateEl.html('');
572 templateEl.append(angular.element(iconTemplate));
573 templateEl.append(buttonEl);
574 templateEl.addClass('md-indent').removeClass(inMenuBarClass);
575
576 setDefault('role', type == 'checkbox' ? 'menuitemcheckbox' : 'menuitemradio', buttonEl);
577 moveAttrToButton('ng-disabled');
578
579 } else {
580 setDefault('role', 'menuitem', templateEl[0].querySelector('md-button, button, a'));
581 }
582
583
584 return function(scope, el, attrs, ctrls) {
585 var ctrl = ctrls[0];
586 var ngModel = ctrls[1];
587 ctrl.init(ngModel);
588 };
589
590 function setDefault(attr, val, el) {
591 el = el || templateEl;
592 if (el instanceof angular.element) {
593 el = el[0];
594 }
595 if (!el.hasAttribute(attr)) {
596 el.setAttribute(attr, val);
597 }
598 }
599
600 function moveAttrToButton(attribute) {
601 var attributes = $mdUtil.prefixer(attribute);
602
603 angular.forEach(attributes, function(attr) {
604 if (templateEl[0].hasAttribute(attr)) {
605 var val = templateEl[0].getAttribute(attr);
606 buttonEl[0].setAttribute(attr, val);
607 templateEl[0].removeAttribute(attr);
608 }
609 });
610 }
611 }
612 };
613}
614
615})(window, window.angular);