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