gerrit.onap Code Review - vnfsdk/refrepo.git/blob

   1 /*!
   2  * Angular Material Design
   3  * https://github.com/angular/material
   4  * @license MIT
   5  * v1.1.3
   6  */
   7 goog.provide('ngmaterial.components.menuBar');
   8 goog.require('ngmaterial.components.icon');
   9 goog.require('ngmaterial.components.menu');
  10 goog.require('ngmaterial.core');
  11 /**
  12  * @ngdoc module
  13  * @name material.components.menuBar
  14  */
  15
  16 angular.module('material.components.menuBar', [
  17   'material.core',
  18   'material.components.icon',
  19   'material.components.menu'
  20 ]);
  21
  22
  23 MenuBarController['$inject'] = ["$scope", "$rootScope", "$element", "$attrs", "$mdConstant", "$document", "$mdUtil", "$timeout"];
  24 angular
  25   .module('material.components.menuBar')
  26   .controller('MenuBarController', MenuBarController);
  27
  28 var BOUND_MENU_METHODS = ['handleKeyDown', 'handleMenuHover', 'scheduleOpenHoveredMenu', 'cancelScheduledOpen'];
  29
  30 /**
  31  * ngInject
  32  */
  33 function 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
  49 MenuBarController.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
 101 MenuBarController.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
 106 MenuBarController.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
 127 MenuBarController.prototype.handleMenuHover = function(e) {
 128   this.setKeyboardMode(false);
 129   if (this.openOnHoverEnabled) {
 130     this.scheduleOpenHoveredMenu(e);
 131   }
 132 };
 133
 134 MenuBarController.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
 149 MenuBarController.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
 156 MenuBarController.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
 171 MenuBarController.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
 213 MenuBarController.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
 235 MenuBarController.prototype.openFocusedMenu = function() {
 236   var menu = this.getFocusedMenu();
 237   menu && angular.element(menu).controller('mdMenu').open();
 238 };
 239
 240 MenuBarController.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
 246 MenuBarController.prototype.getFocusedMenu = function() {
 247   return this.getMenus()[this.getFocusedMenuIndex()];
 248 };
 249
 250 MenuBarController.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
 262 MenuBarController.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
 270 MenuBarController.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
 370 MenuBarDirective['$inject'] = ["$mdUtil", "$mdTheming"];
 371 angular
 372   .module('material.components.menuBar')
 373   .directive('mdMenuBar', MenuBarDirective);
 374
 375 /* ngInject */
 376 function 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
 424 angular
 425   .module('material.components.menuBar')
 426   .directive('mdMenuDivider', MenuDividerDirective);
 427
 428
 429 function 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
 441 MenuItemController['$inject'] = ["$scope", "$element", "$attrs"];
 442 angular
 443   .module('material.components.menuBar')
 444   .controller('MenuItemController', MenuItemController);
 445
 446
 447 /**
 448  * ngInject
 449  */
 450 function MenuItemController($scope, $element, $attrs) {
 451   this.$element = $element;
 452   this.$attrs = $attrs;
 453   this.$scope = $scope;
 454 }
 455
 456 MenuItemController.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.
 476 MenuItemController.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
 484 MenuItemController.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
 532 MenuItemController.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
 547 MenuItemDirective['$inject'] = ["$mdUtil", "$mdConstant", "$$mdSvgRegistry"];
 548 angular
 549   .module('material.components.menuBar')
 550   .directive('mdMenuItem', MenuItemDirective);
 551
 552  /* ngInject */
 553 function 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
 616 ngmaterial.components.menuBar = angular.module("material.components.menuBar");