diff options
Diffstat (limited to 'vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar')
7 files changed, 777 insertions, 0 deletions
diff --git a/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/bower.json b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/bower.json new file mode 100644 index 00000000..b156a09f --- /dev/null +++ b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/bower.json @@ -0,0 +1,9 @@ +{ + "name": "angular-material-menuBar", + "version": "1.1.2-master-a9ba340", + "dependencies": { + "angular-material-core": "1.1.2-master-a9ba340", + "angular-material-icon": "1.1.2-master-a9ba340", + "angular-material-menu": "1.1.2-master-a9ba340" + } +}
\ No newline at end of file diff --git a/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar-default-theme.css b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar-default-theme.css new file mode 100644 index 00000000..4522df3b --- /dev/null +++ b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar-default-theme.css @@ -0,0 +1,35 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.3 + */ +md-menu-bar.md-THEME_NAME-theme > button.md-button { + color: '{{foreground-2}}'; + border-radius: 2px; } + +md-menu-bar.md-THEME_NAME-theme md-menu.md-open > button, md-menu-bar.md-THEME_NAME-theme md-menu > button:focus { + outline: none; + background: '{{background-200}}'; } + +md-menu-bar.md-THEME_NAME-theme.md-open:not(.md-keyboard-mode) md-menu:hover > button { + background-color: '{{ background-500-0.2}}'; } + +md-menu-bar.md-THEME_NAME-theme:not(.md-keyboard-mode):not(.md-open) md-menu button:hover, +md-menu-bar.md-THEME_NAME-theme:not(.md-keyboard-mode):not(.md-open) md-menu button:focus { + background: transparent; } + +md-menu-content.md-THEME_NAME-theme .md-menu > .md-button:after { + color: '{{background-A200-0.54}}'; } + +md-menu-content.md-THEME_NAME-theme .md-menu.md-open > .md-button { + background-color: '{{ background-500-0.2}}'; } + +md-toolbar.md-THEME_NAME-theme.md-menu-toolbar { + background-color: '{{background-A100}}'; + color: '{{background-A200}}'; } + md-toolbar.md-THEME_NAME-theme.md-menu-toolbar md-toolbar-filler { + background-color: '{{primary-color}}'; + color: '{{background-A100-0.87}}'; } + md-toolbar.md-THEME_NAME-theme.md-menu-toolbar md-toolbar-filler md-icon { + color: '{{background-A100-0.87}}'; } diff --git a/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar-default-theme.min.css b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar-default-theme.min.css new file mode 100644 index 00000000..d9cbd379 --- /dev/null +++ b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar-default-theme.min.css @@ -0,0 +1,6 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.2-master-a9ba340 + */md-menu-bar.md-THEME_NAME-theme>button.md-button{color:"{{foreground-2}}";border-radius:2px}md-menu-bar.md-THEME_NAME-theme md-menu.md-open>button,md-menu-bar.md-THEME_NAME-theme md-menu>button:focus{outline:none;background:"{{background-200}}"}md-menu-bar.md-THEME_NAME-theme.md-open:not(.md-keyboard-mode) md-menu:hover>button{background-color:"{{ background-500-0.2}}"}md-menu-bar.md-THEME_NAME-theme:not(.md-keyboard-mode):not(.md-open) md-menu button:focus,md-menu-bar.md-THEME_NAME-theme:not(.md-keyboard-mode):not(.md-open) md-menu button:hover{background:transparent}md-menu-content.md-THEME_NAME-theme .md-menu>.md-button:after{color:"{{background-A200-0.54}}"}md-menu-content.md-THEME_NAME-theme .md-menu.md-open>.md-button{background-color:"{{ background-500-0.2}}"}md-toolbar.md-THEME_NAME-theme.md-menu-toolbar{background-color:"{{background-A100}}";color:"{{background-A200}}"}md-toolbar.md-THEME_NAME-theme.md-menu-toolbar md-toolbar-filler{background-color:"{{primary-color}}";color:"{{background-A100-0.87}}"}md-toolbar.md-THEME_NAME-theme.md-menu-toolbar md-toolbar-filler md-icon{color:"{{background-A100-0.87}}"}
\ No newline at end of file diff --git a/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar.css b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar.css new file mode 100644 index 00000000..42071db3 --- /dev/null +++ b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar.css @@ -0,0 +1,99 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.3 + */ +md-toolbar.md-menu-toolbar h2.md-toolbar-tools { + line-height: 1rem; + height: auto; + padding: 28px; + padding-bottom: 12px; } + +md-toolbar.md-has-open-menu { + position: relative; + z-index: 100; } + +md-menu-bar { + padding: 0 20px; + display: block; + position: relative; + z-index: 2; } + md-menu-bar .md-menu { + display: inline-block; + padding: 0; + position: relative; } + md-menu-bar button { + font-size: 14px; + padding: 0 10px; + margin: 0; + border: 0; + background-color: transparent; + height: 40px; } + md-menu-bar md-backdrop.md-menu-backdrop { + z-index: -2; } + +md-menu-content.md-menu-bar-menu.md-dense { + max-height: none; + padding: 16px 0; } + md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent { + position: relative; } + md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent > md-icon { + position: absolute; + padding: 0; + width: 24px; + top: 6px; + left: 24px; } + [dir=rtl] md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent > md-icon { + left: auto; + right: 24px; } + md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent > .md-button, md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent .md-menu > .md-button { + padding: 0 32px 0 64px; } + [dir=rtl] md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent > .md-button, [dir=rtl] md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent .md-menu > .md-button { + padding: 0 64px 0 32px; } + md-menu-content.md-menu-bar-menu.md-dense .md-button { + min-height: 0; + height: 32px; } + md-menu-content.md-menu-bar-menu.md-dense .md-button span { + float: left; } + [dir=rtl] md-menu-content.md-menu-bar-menu.md-dense .md-button span { + float: right; } + md-menu-content.md-menu-bar-menu.md-dense .md-button span.md-alt-text { + float: right; + margin: 0 8px; } + [dir=rtl] md-menu-content.md-menu-bar-menu.md-dense .md-button span.md-alt-text { + float: left; } + md-menu-content.md-menu-bar-menu.md-dense md-menu-divider { + margin: 8px 0; } + md-menu-content.md-menu-bar-menu.md-dense md-menu-item > .md-button, md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button { + text-align: left; } + [dir=rtl] md-menu-content.md-menu-bar-menu.md-dense md-menu-item > .md-button, [dir=rtl] md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button { + text-align: right; } + md-menu-content.md-menu-bar-menu.md-dense .md-menu { + padding: 0; } + md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button { + position: relative; + margin: 0; + width: 100%; + text-transform: none; + font-weight: normal; + border-radius: 0px; + padding-left: 16px; } + [dir=rtl] md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button { + padding-left: 0; + padding-right: 16px; } + md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button:after { + display: block; + content: '\25BC'; + position: absolute; + top: 0px; + speak: none; + -webkit-transform: rotate(270deg) scaleY(0.45) scaleX(0.9); + transform: rotate(270deg) scaleY(0.45) scaleX(0.9); + right: 28px; } + [dir=rtl] md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button:after { + -webkit-transform: rotate(90deg) scaleY(0.45) scaleX(0.9); + transform: rotate(90deg) scaleY(0.45) scaleX(0.9); } + [dir=rtl] md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button:after { + right: auto; + left: 28px; } diff --git a/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar.js b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar.js new file mode 100644 index 00000000..d2a10a45 --- /dev/null +++ b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar.js @@ -0,0 +1,615 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.3 + */ +(function( window, angular, undefined ){ +"use strict"; + +/** + * @ngdoc module + * @name material.components.menuBar + */ + +angular.module('material.components.menuBar', [ + 'material.core', + 'material.components.icon', + 'material.components.menu' +]); + + +MenuBarController['$inject'] = ["$scope", "$rootScope", "$element", "$attrs", "$mdConstant", "$document", "$mdUtil", "$timeout"]; +angular + .module('material.components.menuBar') + .controller('MenuBarController', MenuBarController); + +var BOUND_MENU_METHODS = ['handleKeyDown', 'handleMenuHover', 'scheduleOpenHoveredMenu', 'cancelScheduledOpen']; + +/** + * ngInject + */ +function MenuBarController($scope, $rootScope, $element, $attrs, $mdConstant, $document, $mdUtil, $timeout) { + this.$element = $element; + this.$attrs = $attrs; + this.$mdConstant = $mdConstant; + this.$mdUtil = $mdUtil; + this.$document = $document; + this.$scope = $scope; + this.$rootScope = $rootScope; + this.$timeout = $timeout; + + var self = this; + angular.forEach(BOUND_MENU_METHODS, function(methodName) { + self[methodName] = angular.bind(self, self[methodName]); + }); +} + +MenuBarController.prototype.init = function() { + var $element = this.$element; + var $mdUtil = this.$mdUtil; + var $scope = this.$scope; + + var self = this; + var deregisterFns = []; + $element.on('keydown', this.handleKeyDown); + this.parentToolbar = $mdUtil.getClosest($element, 'MD-TOOLBAR'); + + deregisterFns.push(this.$rootScope.$on('$mdMenuOpen', function(event, el) { + if (self.getMenus().indexOf(el[0]) != -1) { + $element[0].classList.add('md-open'); + el[0].classList.add('md-open'); + self.currentlyOpenMenu = el.controller('mdMenu'); + self.currentlyOpenMenu.registerContainerProxy(self.handleKeyDown); + self.enableOpenOnHover(); + } + })); + + deregisterFns.push(this.$rootScope.$on('$mdMenuClose', function(event, el, opts) { + var rootMenus = self.getMenus(); + if (rootMenus.indexOf(el[0]) != -1) { + $element[0].classList.remove('md-open'); + el[0].classList.remove('md-open'); + } + + if ($element[0].contains(el[0])) { + var parentMenu = el[0]; + while (parentMenu && rootMenus.indexOf(parentMenu) == -1) { + parentMenu = $mdUtil.getClosest(parentMenu, 'MD-MENU', true); + } + if (parentMenu) { + if (!opts.skipFocus) parentMenu.querySelector('button:not([disabled])').focus(); + self.currentlyOpenMenu = undefined; + self.disableOpenOnHover(); + self.setKeyboardMode(true); + } + } + })); + + $scope.$on('$destroy', function() { + self.disableOpenOnHover(); + while (deregisterFns.length) { + deregisterFns.shift()(); + } + }); + + + this.setKeyboardMode(true); +}; + +MenuBarController.prototype.setKeyboardMode = function(enabled) { + if (enabled) this.$element[0].classList.add('md-keyboard-mode'); + else this.$element[0].classList.remove('md-keyboard-mode'); +}; + +MenuBarController.prototype.enableOpenOnHover = function() { + if (this.openOnHoverEnabled) return; + + var self = this; + + self.openOnHoverEnabled = true; + + if (self.parentToolbar) { + self.parentToolbar.classList.add('md-has-open-menu'); + + // Needs to be on the next tick so it doesn't close immediately. + self.$mdUtil.nextTick(function() { + angular.element(self.parentToolbar).on('click', self.handleParentClick); + }, false); + } + + angular + .element(self.getMenus()) + .on('mouseenter', self.handleMenuHover); +}; + +MenuBarController.prototype.handleMenuHover = function(e) { + this.setKeyboardMode(false); + if (this.openOnHoverEnabled) { + this.scheduleOpenHoveredMenu(e); + } +}; + +MenuBarController.prototype.disableOpenOnHover = function() { + if (!this.openOnHoverEnabled) return; + + this.openOnHoverEnabled = false; + + if (this.parentToolbar) { + this.parentToolbar.classList.remove('md-has-open-menu'); + angular.element(this.parentToolbar).off('click', this.handleParentClick); + } + + angular + .element(this.getMenus()) + .off('mouseenter', this.handleMenuHover); +}; + +MenuBarController.prototype.scheduleOpenHoveredMenu = function(e) { + var menuEl = angular.element(e.currentTarget); + var menuCtrl = menuEl.controller('mdMenu'); + this.setKeyboardMode(false); + this.scheduleOpenMenu(menuCtrl); +}; + +MenuBarController.prototype.scheduleOpenMenu = function(menuCtrl) { + var self = this; + var $timeout = this.$timeout; + if (menuCtrl != self.currentlyOpenMenu) { + $timeout.cancel(self.pendingMenuOpen); + self.pendingMenuOpen = $timeout(function() { + self.pendingMenuOpen = undefined; + if (self.currentlyOpenMenu) { + self.currentlyOpenMenu.close(true, { closeAll: true }); + } + menuCtrl.open(); + }, 200, false); + } +}; + +MenuBarController.prototype.handleKeyDown = function(e) { + var keyCodes = this.$mdConstant.KEY_CODE; + var currentMenu = this.currentlyOpenMenu; + var wasOpen = currentMenu && currentMenu.isOpen; + this.setKeyboardMode(true); + var handled, newMenu, newMenuCtrl; + switch (e.keyCode) { + case keyCodes.DOWN_ARROW: + if (currentMenu) { + currentMenu.focusMenuContainer(); + } else { + this.openFocusedMenu(); + } + handled = true; + break; + case keyCodes.UP_ARROW: + currentMenu && currentMenu.close(); + handled = true; + break; + case keyCodes.LEFT_ARROW: + newMenu = this.focusMenu(-1); + if (wasOpen) { + newMenuCtrl = angular.element(newMenu).controller('mdMenu'); + this.scheduleOpenMenu(newMenuCtrl); + } + handled = true; + break; + case keyCodes.RIGHT_ARROW: + newMenu = this.focusMenu(+1); + if (wasOpen) { + newMenuCtrl = angular.element(newMenu).controller('mdMenu'); + this.scheduleOpenMenu(newMenuCtrl); + } + handled = true; + break; + } + if (handled) { + e && e.preventDefault && e.preventDefault(); + e && e.stopImmediatePropagation && e.stopImmediatePropagation(); + } +}; + +MenuBarController.prototype.focusMenu = function(direction) { + var menus = this.getMenus(); + var focusedIndex = this.getFocusedMenuIndex(); + + if (focusedIndex == -1) { focusedIndex = this.getOpenMenuIndex(); } + + var changed = false; + + if (focusedIndex == -1) { focusedIndex = 0; changed = true; } + else if ( + direction < 0 && focusedIndex > 0 || + direction > 0 && focusedIndex < menus.length - direction + ) { + focusedIndex += direction; + changed = true; + } + if (changed) { + menus[focusedIndex].querySelector('button').focus(); + return menus[focusedIndex]; + } +}; + +MenuBarController.prototype.openFocusedMenu = function() { + var menu = this.getFocusedMenu(); + menu && angular.element(menu).controller('mdMenu').open(); +}; + +MenuBarController.prototype.getMenus = function() { + var $element = this.$element; + return this.$mdUtil.nodesToArray($element[0].children) + .filter(function(el) { return el.nodeName == 'MD-MENU'; }); +}; + +MenuBarController.prototype.getFocusedMenu = function() { + return this.getMenus()[this.getFocusedMenuIndex()]; +}; + +MenuBarController.prototype.getFocusedMenuIndex = function() { + var $mdUtil = this.$mdUtil; + var focusedEl = $mdUtil.getClosest( + this.$document[0].activeElement, + 'MD-MENU' + ); + if (!focusedEl) return -1; + + var focusedIndex = this.getMenus().indexOf(focusedEl); + return focusedIndex; +}; + +MenuBarController.prototype.getOpenMenuIndex = function() { + var menus = this.getMenus(); + for (var i = 0; i < menus.length; ++i) { + if (menus[i].classList.contains('md-open')) return i; + } + return -1; +}; + +MenuBarController.prototype.handleParentClick = function(event) { + var openMenu = this.querySelector('md-menu.md-open'); + + if (openMenu && !openMenu.contains(event.target)) { + angular.element(openMenu).controller('mdMenu').close(true, { + closeAll: true + }); + } +}; + +/** + * @ngdoc directive + * @name mdMenuBar + * @module material.components.menuBar + * @restrict E + * @description + * + * Menu bars are containers that hold multiple menus. They change the behavior and appearence + * of the `md-menu` directive to behave similar to an operating system provided menu. + * + * @usage + * <hljs lang="html"> + * <md-menu-bar> + * <md-menu> + * <button ng-click="$mdMenu.open()"> + * File + * </button> + * <md-menu-content> + * <md-menu-item> + * <md-button ng-click="ctrl.sampleAction('share', $event)"> + * Share... + * </md-button> + * </md-menu-item> + * <md-menu-divider></md-menu-divider> + * <md-menu-item> + * <md-menu-item> + * <md-menu> + * <md-button ng-click="$mdMenu.open()">New</md-button> + * <md-menu-content> + * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item> + * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item> + * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item> + * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item> + * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item> + * </md-menu-content> + * </md-menu> + * </md-menu-item> + * </md-menu-content> + * </md-menu> + * </md-menu-bar> + * </hljs> + * + * ## Menu Bar Controls + * + * You may place `md-menu-items` that function as controls within menu bars. + * There are two modes that are exposed via the `type` attribute of the `md-menu-item`. + * `type="checkbox"` will function as a boolean control for the `ng-model` attribute of the + * `md-menu-item`. `type="radio"` will function like a radio button, setting the `ngModel` + * to the `string` value of the `value` attribute. If you need non-string values, you can use + * `ng-value` to provide an expression (this is similar to how angular's native `input[type=radio]` works. + * + * <hljs lang="html"> + * <md-menu-bar> + * <md-menu> + * <button ng-click="$mdMenu.open()"> + * Sample Menu + * </button> + * <md-menu-content> + * <md-menu-item type="checkbox" ng-model="settings.allowChanges">Allow changes</md-menu-item> + * <md-menu-divider></md-menu-divider> + * <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 1</md-menu-item> + * <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 2</md-menu-item> + * <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 3</md-menu-item> + * </md-menu-content> + * </md-menu> + * </md-menu-bar> + * </hljs> + * + * + * ### Nesting Menus + * + * Menus may be nested within menu bars. This is commonly called cascading menus. + * To nest a menu place the nested menu inside the content of the `md-menu-item`. + * <hljs lang="html"> + * <md-menu-item> + * <md-menu> + * <button ng-click="$mdMenu.open()">New</md-button> + * <md-menu-content> + * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item> + * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item> + * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item> + * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item> + * <md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item> + * </md-menu-content> + * </md-menu> + * </md-menu-item> + * </hljs> + * + */ + +MenuBarDirective['$inject'] = ["$mdUtil", "$mdTheming"]; +angular + .module('material.components.menuBar') + .directive('mdMenuBar', MenuBarDirective); + +/* ngInject */ +function MenuBarDirective($mdUtil, $mdTheming) { + return { + restrict: 'E', + require: 'mdMenuBar', + controller: 'MenuBarController', + + compile: function compile(templateEl, templateAttrs) { + if (!templateAttrs.ariaRole) { + templateEl[0].setAttribute('role', 'menubar'); + } + angular.forEach(templateEl[0].children, function(menuEl) { + if (menuEl.nodeName == 'MD-MENU') { + if (!menuEl.hasAttribute('md-position-mode')) { + menuEl.setAttribute('md-position-mode', 'left bottom'); + + // Since we're in the compile function and actual `md-buttons` are not compiled yet, + // we need to query for possible `md-buttons` as well. + menuEl.querySelector('button, a, md-button').setAttribute('role', 'menuitem'); + } + var contentEls = $mdUtil.nodesToArray(menuEl.querySelectorAll('md-menu-content')); + angular.forEach(contentEls, function(contentEl) { + contentEl.classList.add('md-menu-bar-menu'); + contentEl.classList.add('md-dense'); + if (!contentEl.hasAttribute('width')) { + contentEl.setAttribute('width', 5); + } + }); + } + }); + + // Mark the child menu items that they're inside a menu bar. This is necessary, + // because mnMenuItem has special behaviour during compilation, depending on + // whether it is inside a mdMenuBar. We can usually figure this out via the DOM, + // however if a directive that uses documentFragment is applied to the child (e.g. ngRepeat), + // the element won't have a parent and won't compile properly. + templateEl.find('md-menu-item').addClass('md-in-menu-bar'); + + return function postLink(scope, el, attr, ctrl) { + el.addClass('_md'); // private md component indicator for styling + $mdTheming(scope, el); + ctrl.init(); + }; + } + }; + +} + + +angular + .module('material.components.menuBar') + .directive('mdMenuDivider', MenuDividerDirective); + + +function MenuDividerDirective() { + return { + restrict: 'E', + compile: function(templateEl, templateAttrs) { + if (!templateAttrs.role) { + templateEl[0].setAttribute('role', 'separator'); + } + } + }; +} + + +MenuItemController['$inject'] = ["$scope", "$element", "$attrs"]; +angular + .module('material.components.menuBar') + .controller('MenuItemController', MenuItemController); + + +/** + * ngInject + */ +function MenuItemController($scope, $element, $attrs) { + this.$element = $element; + this.$attrs = $attrs; + this.$scope = $scope; +} + +MenuItemController.prototype.init = function(ngModel) { + var $element = this.$element; + var $attrs = this.$attrs; + + this.ngModel = ngModel; + if ($attrs.type == 'checkbox' || $attrs.type == 'radio') { + this.mode = $attrs.type; + this.iconEl = $element[0].children[0]; + this.buttonEl = $element[0].children[1]; + if (ngModel) { + // Clear ngAria set attributes + this.initClickListeners(); + } + } +}; + +// ngAria auto sets attributes on a menu-item with a ngModel. +// We don't want this because our content (buttons) get the focus +// and set their own aria attributes appropritately. Having both +// breaks NVDA / JAWS. This undeoes ngAria's attrs. +MenuItemController.prototype.clearNgAria = function() { + var el = this.$element[0]; + var clearAttrs = ['role', 'tabindex', 'aria-invalid', 'aria-checked']; + angular.forEach(clearAttrs, function(attr) { + el.removeAttribute(attr); + }); +}; + +MenuItemController.prototype.initClickListeners = function() { + var self = this; + var ngModel = this.ngModel; + var $scope = this.$scope; + var $attrs = this.$attrs; + var $element = this.$element; + var mode = this.mode; + + this.handleClick = angular.bind(this, this.handleClick); + + var icon = this.iconEl; + var button = angular.element(this.buttonEl); + var handleClick = this.handleClick; + + $attrs.$observe('disabled', setDisabled); + setDisabled($attrs.disabled); + + ngModel.$render = function render() { + self.clearNgAria(); + if (isSelected()) { + icon.style.display = ''; + button.attr('aria-checked', 'true'); + } else { + icon.style.display = 'none'; + button.attr('aria-checked', 'false'); + } + }; + + $scope.$$postDigest(ngModel.$render); + + function isSelected() { + if (mode == 'radio') { + var val = $attrs.ngValue ? $scope.$eval($attrs.ngValue) : $attrs.value; + return ngModel.$modelValue == val; + } else { + return ngModel.$modelValue; + } + } + + function setDisabled(disabled) { + if (disabled) { + button.off('click', handleClick); + } else { + button.on('click', handleClick); + } + } +}; + +MenuItemController.prototype.handleClick = function(e) { + var mode = this.mode; + var ngModel = this.ngModel; + var $attrs = this.$attrs; + var newVal; + if (mode == 'checkbox') { + newVal = !ngModel.$modelValue; + } else if (mode == 'radio') { + newVal = $attrs.ngValue ? this.$scope.$eval($attrs.ngValue) : $attrs.value; + } + ngModel.$setViewValue(newVal); + ngModel.$render(); +}; + + +MenuItemDirective['$inject'] = ["$mdUtil", "$mdConstant", "$$mdSvgRegistry"]; +angular + .module('material.components.menuBar') + .directive('mdMenuItem', MenuItemDirective); + + /* ngInject */ +function MenuItemDirective($mdUtil, $mdConstant, $$mdSvgRegistry) { + return { + controller: 'MenuItemController', + require: ['mdMenuItem', '?ngModel'], + priority: $mdConstant.BEFORE_NG_ARIA, + compile: function(templateEl, templateAttrs) { + var type = templateAttrs.type; + var inMenuBarClass = 'md-in-menu-bar'; + + // Note: This allows us to show the `check` icon for the md-menu-bar items. + // The `md-in-menu-bar` class is set by the mdMenuBar directive. + if ((type == 'checkbox' || type == 'radio') && templateEl.hasClass(inMenuBarClass)) { + var text = templateEl[0].textContent; + var buttonEl = angular.element('<md-button type="button"></md-button>'); + var iconTemplate = '<md-icon md-svg-src="' + $$mdSvgRegistry.mdChecked + '"></md-icon>'; + + buttonEl.html(text); + buttonEl.attr('tabindex', '0'); + + templateEl.html(''); + templateEl.append(angular.element(iconTemplate)); + templateEl.append(buttonEl); + templateEl.addClass('md-indent').removeClass(inMenuBarClass); + + setDefault('role', type == 'checkbox' ? 'menuitemcheckbox' : 'menuitemradio', buttonEl); + moveAttrToButton('ng-disabled'); + + } else { + setDefault('role', 'menuitem', templateEl[0].querySelector('md-button, button, a')); + } + + + return function(scope, el, attrs, ctrls) { + var ctrl = ctrls[0]; + var ngModel = ctrls[1]; + ctrl.init(ngModel); + }; + + function setDefault(attr, val, el) { + el = el || templateEl; + if (el instanceof angular.element) { + el = el[0]; + } + if (!el.hasAttribute(attr)) { + el.setAttribute(attr, val); + } + } + + function moveAttrToButton(attribute) { + var attributes = $mdUtil.prefixer(attribute); + + angular.forEach(attributes, function(attr) { + if (templateEl[0].hasAttribute(attr)) { + var val = templateEl[0].getAttribute(attr); + buttonEl[0].setAttribute(attr, val); + templateEl[0].removeAttribute(attr); + } + }); + } + } + }; +} + +})(window, window.angular);
\ No newline at end of file diff --git a/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar.min.css b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar.min.css new file mode 100644 index 00000000..0607a404 --- /dev/null +++ b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar.min.css @@ -0,0 +1,6 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.2-master-a9ba340 + */md-toolbar.md-menu-toolbar h2.md-toolbar-tools{line-height:1rem;height:auto;padding:28px;padding-bottom:12px}md-toolbar.md-has-open-menu{position:relative;z-index:100}md-menu-bar{padding:0 20px;display:block;position:relative;z-index:2}md-menu-bar .md-menu{display:inline-block;padding:0;position:relative}md-menu-bar button{font-size:14px;padding:0 10px;margin:0;border:0;background-color:transparent;height:40px}md-menu-bar md-backdrop.md-menu-backdrop{z-index:-2}md-menu-content.md-menu-bar-menu.md-dense{max-height:none;padding:16px 0}md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent{position:relative}md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent>md-icon{position:absolute;padding:0;width:24px;top:6px;left:24px}[dir=rtl] md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent>md-icon{left:auto;right:24px}md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent .md-menu>.md-button,md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent>.md-button{padding:0 32px 0 64px}[dir=rtl] md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent .md-menu>.md-button,[dir=rtl] md-menu-content.md-menu-bar-menu.md-dense md-menu-item.md-indent>.md-button{padding:0 64px 0 32px}md-menu-content.md-menu-bar-menu.md-dense .md-button{min-height:0;height:32px}md-menu-content.md-menu-bar-menu.md-dense .md-button span{float:left}[dir=rtl] md-menu-content.md-menu-bar-menu.md-dense .md-button span{float:right}md-menu-content.md-menu-bar-menu.md-dense .md-button span.md-alt-text{float:right;margin:0 8px}[dir=rtl] md-menu-content.md-menu-bar-menu.md-dense .md-button span.md-alt-text{float:left}md-menu-content.md-menu-bar-menu.md-dense md-menu-divider{margin:8px 0}md-menu-content.md-menu-bar-menu.md-dense .md-menu>.md-button,md-menu-content.md-menu-bar-menu.md-dense md-menu-item>.md-button{text-align:left}[dir=rtl] md-menu-content.md-menu-bar-menu.md-dense .md-menu>.md-button,[dir=rtl] md-menu-content.md-menu-bar-menu.md-dense md-menu-item>.md-button{text-align:right}md-menu-content.md-menu-bar-menu.md-dense .md-menu{padding:0}md-menu-content.md-menu-bar-menu.md-dense .md-menu>.md-button{position:relative;margin:0;width:100%;text-transform:none;font-weight:400;border-radius:0;padding-left:16px}[dir=rtl] md-menu-content.md-menu-bar-menu.md-dense .md-menu>.md-button{padding-left:0;padding-right:16px}md-menu-content.md-menu-bar-menu.md-dense .md-menu>.md-button:after{display:block;content:"\25BC";position:absolute;top:0;speak:none;-webkit-transform:rotate(270deg) scaleY(.45) scaleX(.9);transform:rotate(270deg) scaleY(.45) scaleX(.9);right:28px}[dir=rtl] md-menu-content.md-menu-bar-menu.md-dense .md-menu>.md-button:after{-webkit-transform:rotate(90deg) scaleY(.45) scaleX(.9);transform:rotate(90deg) scaleY(.45) scaleX(.9);right:auto;left:28px}
\ No newline at end of file diff --git a/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar.min.js b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar.min.js new file mode 100644 index 00000000..0ecaf13b --- /dev/null +++ b/vnfmarket/src/main/webapp/common/thirdparty/angular-material/modules/js/menuBar/menuBar.min.js @@ -0,0 +1,7 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.2-master-a9ba340 + */ +!function(e,t,n){"use strict";function o(e,n,o,r,i,s,a,u){this.$element=o,this.$attrs=r,this.$mdConstant=i,this.$mdUtil=a,this.$document=s,this.$scope=e,this.$rootScope=n,this.$timeout=u;var d=this;t.forEach(l,function(e){d[e]=t.bind(d,d[e])})}function r(e,n){return{restrict:"E",require:"mdMenuBar",controller:"MenuBarController",compile:function(o,r){return r.ariaRole||o[0].setAttribute("role","menubar"),t.forEach(o[0].children,function(n){if("MD-MENU"==n.nodeName){n.hasAttribute("md-position-mode")||(n.setAttribute("md-position-mode","left bottom"),n.querySelector("button, a, md-button").setAttribute("role","menuitem"));var o=e.nodesToArray(n.querySelectorAll("md-menu-content"));t.forEach(o,function(e){e.classList.add("md-menu-bar-menu"),e.classList.add("md-dense"),e.hasAttribute("width")||e.setAttribute("width",5)})}}),o.find("md-menu-item").addClass("md-in-menu-bar"),function(e,t,o,r){t.addClass("_md"),n(e,t),r.init()}}}}function i(){return{restrict:"E",compile:function(e,t){t.role||e[0].setAttribute("role","separator")}}}function s(e,t,n){this.$element=t,this.$attrs=n,this.$scope=e}function a(e,n,o){return{controller:"MenuItemController",require:["mdMenuItem","?ngModel"],priority:n.BEFORE_NG_ARIA,compile:function(n,r){function i(e,o,r){r=r||n,r instanceof t.element&&(r=r[0]),r.hasAttribute(e)||r.setAttribute(e,o)}function s(o){var r=e.prefixer(o);t.forEach(r,function(e){if(n[0].hasAttribute(e)){var t=n[0].getAttribute(e);d[0].setAttribute(e,t),n[0].removeAttribute(e)}})}var a=r.type,l="md-in-menu-bar";if("checkbox"!=a&&"radio"!=a||!n.hasClass(l))i("role","menuitem",n[0].querySelector("md-button, button, a"));else{var u=n[0].textContent,d=t.element('<md-button type="button"></md-button>'),c='<md-icon md-svg-src="'+o.mdChecked+'"></md-icon>';d.html(u),d.attr("tabindex","0"),n.html(""),n.append(t.element(c)),n.append(d),n.addClass("md-indent").removeClass(l),i("role","checkbox"==a?"menuitemcheckbox":"menuitemradio",d),s("ng-disabled")}return function(e,t,n,o){var r=o[0],i=o[1];r.init(i)}}}}t.module("material.components.menuBar",["material.core","material.components.icon","material.components.menu"]),o.$inject=["$scope","$rootScope","$element","$attrs","$mdConstant","$document","$mdUtil","$timeout"],t.module("material.components.menuBar").controller("MenuBarController",o);var l=["handleKeyDown","handleMenuHover","scheduleOpenHoveredMenu","cancelScheduledOpen"];o.prototype.init=function(){var e=this.$element,t=this.$mdUtil,o=this.$scope,r=this,i=[];e.on("keydown",this.handleKeyDown),this.parentToolbar=t.getClosest(e,"MD-TOOLBAR"),i.push(this.$rootScope.$on("$mdMenuOpen",function(t,n){r.getMenus().indexOf(n[0])!=-1&&(e[0].classList.add("md-open"),n[0].classList.add("md-open"),r.currentlyOpenMenu=n.controller("mdMenu"),r.currentlyOpenMenu.registerContainerProxy(r.handleKeyDown),r.enableOpenOnHover())})),i.push(this.$rootScope.$on("$mdMenuClose",function(o,i,s){var a=r.getMenus();if(a.indexOf(i[0])!=-1&&(e[0].classList.remove("md-open"),i[0].classList.remove("md-open")),e[0].contains(i[0])){for(var l=i[0];l&&a.indexOf(l)==-1;)l=t.getClosest(l,"MD-MENU",!0);l&&(s.skipFocus||l.querySelector("button:not([disabled])").focus(),r.currentlyOpenMenu=n,r.disableOpenOnHover(),r.setKeyboardMode(!0))}})),o.$on("$destroy",function(){for(r.disableOpenOnHover();i.length;)i.shift()()}),this.setKeyboardMode(!0)},o.prototype.setKeyboardMode=function(e){e?this.$element[0].classList.add("md-keyboard-mode"):this.$element[0].classList.remove("md-keyboard-mode")},o.prototype.enableOpenOnHover=function(){if(!this.openOnHoverEnabled){var e=this;e.openOnHoverEnabled=!0,e.parentToolbar&&(e.parentToolbar.classList.add("md-has-open-menu"),e.$mdUtil.nextTick(function(){t.element(e.parentToolbar).on("click",e.handleParentClick)},!1)),t.element(e.getMenus()).on("mouseenter",e.handleMenuHover)}},o.prototype.handleMenuHover=function(e){this.setKeyboardMode(!1),this.openOnHoverEnabled&&this.scheduleOpenHoveredMenu(e)},o.prototype.disableOpenOnHover=function(){this.openOnHoverEnabled&&(this.openOnHoverEnabled=!1,this.parentToolbar&&(this.parentToolbar.classList.remove("md-has-open-menu"),t.element(this.parentToolbar).off("click",this.handleParentClick)),t.element(this.getMenus()).off("mouseenter",this.handleMenuHover))},o.prototype.scheduleOpenHoveredMenu=function(e){var n=t.element(e.currentTarget),o=n.controller("mdMenu");this.setKeyboardMode(!1),this.scheduleOpenMenu(o)},o.prototype.scheduleOpenMenu=function(e){var t=this,o=this.$timeout;e!=t.currentlyOpenMenu&&(o.cancel(t.pendingMenuOpen),t.pendingMenuOpen=o(function(){t.pendingMenuOpen=n,t.currentlyOpenMenu&&t.currentlyOpenMenu.close(!0,{closeAll:!0}),e.open()},200,!1))},o.prototype.handleKeyDown=function(e){var n=this.$mdConstant.KEY_CODE,o=this.currentlyOpenMenu,r=o&&o.isOpen;this.setKeyboardMode(!0);var i,s,a;switch(e.keyCode){case n.DOWN_ARROW:o?o.focusMenuContainer():this.openFocusedMenu(),i=!0;break;case n.UP_ARROW:o&&o.close(),i=!0;break;case n.LEFT_ARROW:s=this.focusMenu(-1),r&&(a=t.element(s).controller("mdMenu"),this.scheduleOpenMenu(a)),i=!0;break;case n.RIGHT_ARROW:s=this.focusMenu(1),r&&(a=t.element(s).controller("mdMenu"),this.scheduleOpenMenu(a)),i=!0}i&&(e&&e.preventDefault&&e.preventDefault(),e&&e.stopImmediatePropagation&&e.stopImmediatePropagation())},o.prototype.focusMenu=function(e){var t=this.getMenus(),n=this.getFocusedMenuIndex();n==-1&&(n=this.getOpenMenuIndex());var o=!1;if(n==-1?(n=0,o=!0):(e<0&&n>0||e>0&&n<t.length-e)&&(n+=e,o=!0),o)return t[n].querySelector("button").focus(),t[n]},o.prototype.openFocusedMenu=function(){var e=this.getFocusedMenu();e&&t.element(e).controller("mdMenu").open()},o.prototype.getMenus=function(){var e=this.$element;return this.$mdUtil.nodesToArray(e[0].children).filter(function(e){return"MD-MENU"==e.nodeName})},o.prototype.getFocusedMenu=function(){return this.getMenus()[this.getFocusedMenuIndex()]},o.prototype.getFocusedMenuIndex=function(){var e=this.$mdUtil,t=e.getClosest(this.$document[0].activeElement,"MD-MENU");if(!t)return-1;var n=this.getMenus().indexOf(t);return n},o.prototype.getOpenMenuIndex=function(){for(var e=this.getMenus(),t=0;t<e.length;++t)if(e[t].classList.contains("md-open"))return t;return-1},o.prototype.handleParentClick=function(e){var n=this.querySelector("md-menu.md-open");n&&!n.contains(e.target)&&t.element(n).controller("mdMenu").close(!0,{closeAll:!0})},r.$inject=["$mdUtil","$mdTheming"],t.module("material.components.menuBar").directive("mdMenuBar",r),t.module("material.components.menuBar").directive("mdMenuDivider",i),s.$inject=["$scope","$element","$attrs"],t.module("material.components.menuBar").controller("MenuItemController",s),s.prototype.init=function(e){var t=this.$element,n=this.$attrs;this.ngModel=e,"checkbox"!=n.type&&"radio"!=n.type||(this.mode=n.type,this.iconEl=t[0].children[0],this.buttonEl=t[0].children[1],e&&this.initClickListeners())},s.prototype.clearNgAria=function(){var e=this.$element[0],n=["role","tabindex","aria-invalid","aria-checked"];t.forEach(n,function(t){e.removeAttribute(t)})},s.prototype.initClickListeners=function(){function e(){if("radio"==a){var e=s.ngValue?i.$eval(s.ngValue):s.value;return r.$modelValue==e}return r.$modelValue}function n(e){e?u.off("click",d):u.on("click",d)}var o=this,r=this.ngModel,i=this.$scope,s=this.$attrs,a=(this.$element,this.mode);this.handleClick=t.bind(this,this.handleClick);var l=this.iconEl,u=t.element(this.buttonEl),d=this.handleClick;s.$observe("disabled",n),n(s.disabled),r.$render=function(){o.clearNgAria(),e()?(l.style.display="",u.attr("aria-checked","true")):(l.style.display="none",u.attr("aria-checked","false"))},i.$$postDigest(r.$render)},s.prototype.handleClick=function(e){var t,n=this.mode,o=this.ngModel,r=this.$attrs;"checkbox"==n?t=!o.$modelValue:"radio"==n&&(t=r.ngValue?this.$scope.$eval(r.ngValue):r.value),o.$setViewValue(t),o.$render()},a.$inject=["$mdUtil","$mdConstant","$$mdSvgRegistry"],t.module("material.components.menuBar").directive("mdMenuItem",a)}(window,window.angular);
\ No newline at end of file |