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 (function( window, angular, undefined ){
   8 "use strict";
   9
  10 /**
  11  * @ngdoc module
  12  * @name material.components.menuBar
  13  */
  14
  15 angular.module('material.components.menuBar', [
  16   'material.core',
  17   'material.components.icon',
  18   'material.components.menu'
  19 ]);
  20
  21
  22 MenuBarController['$inject'] = ["$scope", "$rootScope", "$element", "$attrs", "$mdConstant", "$document", "$mdUtil", "$timeout"];
  23 angular
  24   .module('material.components.menuBar')
  25   .controller('MenuBarController', MenuBarController);
  26
  27 var BOUND_MENU_METHODS = ['handleKeyDown', 'handleMenuHover', 'scheduleOpenHoveredMenu', 'cancelScheduledOpen'];
  28
  29 /**
  30  * ngInject
  31  */
  32 function 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
  48 MenuBarController.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
 100 MenuBarController.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
 105 MenuBarController.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
 126 MenuBarController.prototype.handleMenuHover = function(e) {
 127   this.setKeyboardMode(false);
 128   if (this.openOnHoverEnabled) {
 129     this.scheduleOpenHoveredMenu(e);
 130   }
 131 };
 132
 133 MenuBarController.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
 148 MenuBarController.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
 155 MenuBarController.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
 170 MenuBarController.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
 212 MenuBarController.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
 234 MenuBarController.prototype.openFocusedMenu = function() {
 235   var menu = this.getFocusedMenu();
 236   menu && angular.element(menu).controller('mdMenu').open();
 237 };
 238
 239 MenuBarController.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
 245 MenuBarController.prototype.getFocusedMenu = function() {
 246   return this.getMenus()[this.getFocusedMenuIndex()];
 247 };
 248
 249 MenuBarController.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
 261 MenuBarController.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
 269 MenuBarController.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
 369 MenuBarDirective['$inject'] = ["$mdUtil", "$mdTheming"];
 370 angular
 371   .module('material.components.menuBar')
 372   .directive('mdMenuBar', MenuBarDirective);
 373
 374 /* ngInject */
 375 function 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
 423 angular
 424   .module('material.components.menuBar')
 425   .directive('mdMenuDivider', MenuDividerDirective);
 426
 427
 428 function 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
 440 MenuItemController['$inject'] = ["$scope", "$element", "$attrs"];
 441 angular
 442   .module('material.components.menuBar')
 443   .controller('MenuItemController', MenuItemController);
 444
 445
 446 /**
 447  * ngInject
 448  */
 449 function MenuItemController($scope, $element, $attrs) {
 450   this.$element = $element;
 451   this.$attrs = $attrs;
 452   this.$scope = $scope;
 453 }
 454
 455 MenuItemController.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.
 475 MenuItemController.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
 483 MenuItemController.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
 531 MenuItemController.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
 546 MenuItemDirective['$inject'] = ["$mdUtil", "$mdConstant", "$$mdSvgRegistry"];
 547 angular
 548   .module('material.components.menuBar')
 549   .directive('mdMenuItem', MenuItemDirective);
 550
 551  /* ngInject */
 552 function 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);