+++ /dev/null
-/*!
- * Angular Material Design
- * https://github.com/angular/material
- * @license MIT
- * v0.9.8
- */
-goog.provide('ng.material.components.select');
-goog.require('ng.material.components.backdrop');
-goog.require('ng.material.core');
-/**
- * @ngdoc module
- * @name material.components.select
- */
-
-/***************************************************
-
-### TODO ###
-**DOCUMENTATION AND DEMOS**
-
-- [ ] ng-model with child mdOptions (basic)
-- [ ] ng-model="foo" ng-model-options="{ trackBy: '$value.id' }" for objects
-- [ ] mdOption with value
-- [ ] Usage with input inside
-
-### TODO - POST RC1 ###
-- [ ] Abstract placement logic in $mdSelect service to $mdMenu service
-
-***************************************************/
-
-var SELECT_EDGE_MARGIN = 8;
-var selectNextId = 0;
-
-angular.module('material.components.select', [
- 'material.core',
- 'material.components.backdrop'
-])
-.directive('mdSelect', SelectDirective)
-.directive('mdSelectMenu', SelectMenuDirective)
-.directive('mdOption', OptionDirective)
-.directive('mdOptgroup', OptgroupDirective)
-.provider('$mdSelect', SelectProvider);
-
-
-/**
- * @ngdoc directive
- * @name mdSelect
- * @restrict E
- * @module material.components.select
- *
- * @description Displays a select box, bound to an ng-model.
- *
- * @param {expression} ng-model The model!
- * @param {boolean=} multiple Whether it's multiple.
- * @param {string=} placeholder Placeholder hint text.
- * @param {string=} aria-label Optional label for accessibility. Only necessary if no placeholder or
- * explicit label is present.
- *
- * @usage
- * With a placeholder (label and aria-label are added dynamically)
- * <hljs lang="html">
- * <md-select
- * ng-model="someModel"
- * placeholder="Select a state">
- * <md-option ng-value="opt" ng-repeat="opt in neighborhoods2">{{ opt }}</md-option>
- * </md-select>
- * </hljs>
- *
- * With an explicit label
- * <hljs lang="html">
- * <md-select
- * ng-model="someModel">
- * <md-select-label>Select a state</md-select-label>
- * <md-option ng-value="opt" ng-repeat="opt in neighborhoods2">{{ opt }}</md-option>
- * </md-select>
- * </hljs>
- */
-function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $interpolate, $compile, $parse) {
- return {
- restrict: 'E',
- require: ['mdSelect', 'ngModel', '?^form'],
- compile: compile,
- controller: function() { } // empty placeholder controller to be initialized in link
- };
-
- function compile(element, attr) {
- // The user is allowed to provide a label for the select as md-select-label child
- var labelEl = element.find('md-select-label').remove();
-
- // If not provided, we automatically make one
- if (!labelEl.length) {
- labelEl = angular.element('<md-select-label><span></span></md-select-label>');
- } else {
- if (!labelEl[0].firstElementChild) {
- var spanWrapper = angular.element('<span>');
- spanWrapper.append(labelEl.contents());
- labelEl.append(spanWrapper);
- }
- }
- labelEl.append('<span class="md-select-icon" aria-hidden="true"></span>');
- labelEl.addClass('md-select-label');
- if (!labelEl[0].hasAttribute('id')) {
- labelEl.attr('id', 'select_label_' + $mdUtil.nextUid());
- }
-
- // There's got to be an md-content inside. If there's not one, let's add it.
- if (!element.find('md-content').length) {
- element.append( angular.element('<md-content>').append(element.contents()) );
- }
-
- // Add progress spinner for md-options-loading
- if (attr.mdOnOpen) {
- element.find('md-content').prepend(
- angular.element('<md-progress-circular>')
- .attr('md-mode', 'indeterminate')
- .attr('ng-hide', '$$loadingAsyncDone')
- .wrap('<div>')
- .parent()
- );
- }
-
- if (attr.name) {
- var autofillClone = angular.element('<select class="md-visually-hidden">');
- autofillClone.attr({
- 'name': '.' + attr.name,
- 'ng-model': attr.ngModel,
- 'aria-hidden': 'true',
- 'tabindex': '-1'
- });
- var opts = element.find('md-option');
- angular.forEach(opts, function(el) {
- var newEl = angular.element('<option>' + el.innerHTML + '</option>');
- if (el.hasAttribute('ng-value')) newEl.attr('ng-value', el.getAttribute('ng-value'));
- else if (el.hasAttribute('value')) newEl.attr('value', el.getAttribute('value'));
- autofillClone.append(newEl);
- });
-
- element.parent().append(autofillClone);
- }
-
- // Use everything that's left inside element.contents() as the contents of the menu
- var selectTemplate = '<div class="md-select-menu-container">' +
- '<md-select-menu ' +
- (angular.isDefined(attr.multiple) ? 'multiple' : '') + '>' +
- element.html() +
- '</md-select-menu></div>';
-
- element.empty().append(labelEl);
-
- attr.tabindex = attr.tabindex || '0';
-
- return function postLink(scope, element, attr, ctrls) {
- var isOpen;
- var isDisabled;
-
- var mdSelectCtrl = ctrls[0];
- var ngModel = ctrls[1];
- var formCtrl = ctrls[2];
-
- var labelEl = element.find('md-select-label');
- var customLabel = labelEl.text().length !== 0;
- var selectContainer, selectScope, selectMenuCtrl;
- createSelect();
-
- $mdTheming(element);
-
- if (attr.name && formCtrl) {
- var selectEl = element.parent()[0].querySelector('select[name=".' + attr.name + '"]')
- formCtrl.$removeControl(angular.element(selectEl).controller());
- }
-
- var originalRender = ngModel.$render;
- ngModel.$render = function() {
- originalRender();
- syncLabelText();
- };
-
- mdSelectCtrl.setLabelText = function(text) {
- if (customLabel) return; // Assume that user is handling it on their own
- mdSelectCtrl.setIsPlaceholder(!text);
- text = text || attr.placeholder || '';
- var target = customLabel ? labelEl : labelEl.children().eq(0);
- target.text(text);
- };
-
- mdSelectCtrl.setIsPlaceholder = function(val) {
- val ? labelEl.addClass('md-placeholder') : labelEl.removeClass('md-placeholder');
- };
-
- scope.$$postDigest(function() {
- setAriaLabel();
- syncLabelText();
- });
-
- function setAriaLabel() {
- var labelText = element.attr('placeholder');
- if (!labelText) {
- labelText = element.find('md-select-label').text();
- }
- $mdAria.expect(element, 'aria-label', labelText);
- }
-
- function syncLabelText() {
- if (selectContainer) {
- selectMenuCtrl = selectMenuCtrl || selectContainer.find('md-select-menu').controller('mdSelectMenu');
- mdSelectCtrl.setLabelText(selectMenuCtrl.selectedLabels());
- }
- }
-
- var deregisterWatcher;
- attr.$observe('ngMultiple', function(val) {
- if (deregisterWatcher) deregisterWatcher();
- var parser = $parse(val);
- deregisterWatcher = scope.$watch(function() { return parser(scope); }, function(multiple, prevVal) {
- if (multiple === undefined && prevVal === undefined) return; // assume compiler did a good job
- if (multiple) {
- element.attr('multiple', 'multiple');
- } else {
- element.removeAttr('multiple');
- }
- if (selectContainer) {
- selectMenuCtrl.setMultiple(multiple);
- originalRender = ngModel.$render;
- ngModel.$render = function() {
- originalRender();
- syncLabelText();
- };
- selectMenuCtrl.refreshViewValue();
- ngModel.$render();
- }
- });
- });
-
- attr.$observe('disabled', function(disabled) {
- if (typeof disabled == "string") {
- disabled = true;
- }
- // Prevent click event being registered twice
- if (isDisabled !== undefined && isDisabled === disabled) {
- return;
- }
- isDisabled = disabled;
- if (disabled) {
- element.attr({'tabindex': -1, 'aria-disabled': 'true'});
- element.off('click', openSelect);
- element.off('keydown', handleKeypress);
- } else {
- element.attr({'tabindex': attr.tabindex, 'aria-disabled': 'false'});
- element.on('click', openSelect);
- element.on('keydown', handleKeypress);
- }
- });
- if (!attr.disabled && !attr.ngDisabled) {
- element.attr({'tabindex': attr.tabindex, 'aria-disabled': 'false'});
- element.on('click', openSelect);
- element.on('keydown', handleKeypress);
- }
-
- var ariaAttrs = {
- role: 'combobox',
- 'aria-expanded': 'false'
- };
- if (!element[0].hasAttribute('id')) {
- ariaAttrs.id = 'select_' + $mdUtil.nextUid();
- }
- element.attr(ariaAttrs);
-
- scope.$on('$destroy', function() {
- if (isOpen) {
- $mdSelect.cancel().then(function() {
- selectContainer.remove();
- });
- } else {
- selectContainer.remove();
- }
- });
-
-
- // Create a fake select to find out the label value
- function createSelect() {
- selectContainer = angular.element(selectTemplate);
- var selectEl = selectContainer.find('md-select-menu');
- selectEl.data('$ngModelController', ngModel);
- selectEl.data('$mdSelectController', mdSelectCtrl);
- selectScope = scope.$new();
- selectContainer = $compile(selectContainer)(selectScope);
- selectMenuCtrl = selectContainer.find('md-select-menu').controller('mdSelectMenu');
- }
-
- function handleKeypress(e) {
- var allowedCodes = [32, 13, 38, 40];
- if (allowedCodes.indexOf(e.keyCode) != -1 ) {
- // prevent page scrolling on interaction
- e.preventDefault();
- openSelect(e);
- } else {
- if (e.keyCode <= 90 && e.keyCode >= 31) {
- e.preventDefault();
- var node = selectMenuCtrl.optNodeForKeyboardSearch(e);
- if (!node) return;
- var optionCtrl = angular.element(node).controller('mdOption');
- if (!selectMenuCtrl.isMultiple) {
- selectMenuCtrl.deselect( Object.keys(selectMenuCtrl.selected)[0] );
- }
- selectMenuCtrl.select(optionCtrl.hashKey, optionCtrl.value);
- selectMenuCtrl.refreshViewValue();
- ngModel.$render();
- }
- }
- }
-
- function openSelect() {
- scope.$evalAsync(function() {
- isOpen = true;
- $mdSelect.show({
- scope: selectScope,
- preserveScope: true,
- skipCompile: true,
- element: selectContainer,
- target: element[0],
- hasBackdrop: true,
- loadingAsync: attr.mdOnOpen ? scope.$eval(attr.mdOnOpen) || true : false,
- }).then(function(selectedText) {
- isOpen = false;
- });
- });
- }
- };
- }
-}
-SelectDirective.$inject = ["$mdSelect", "$mdUtil", "$mdTheming", "$mdAria", "$interpolate", "$compile", "$parse"];
-
-function SelectMenuDirective($parse, $mdUtil, $mdTheming) {
-
- SelectMenuController.$inject = ["$scope", "$attrs", "$element"];
- return {
- restrict: 'E',
- require: ['mdSelectMenu', '?ngModel'],
- controller: SelectMenuController,
- link: { pre: preLink }
- };
-
- // We use preLink instead of postLink to ensure that the select is initialized before
- // its child options run postLink.
- function preLink(scope, element, attr, ctrls) {
- var selectCtrl = ctrls[0];
- var ngModel = ctrls[1];
-
- $mdTheming(element);
- element.on('click', clickListener);
- element.on('keypress', keyListener);
- if (ngModel) selectCtrl.init(ngModel);
- configureAria();
-
- function configureAria() {
- element.attr({
- 'id': 'select_menu_' + $mdUtil.nextUid(),
- 'role': 'listbox',
- 'aria-multiselectable': (selectCtrl.isMultiple ? 'true' : 'false')
- });
- }
-
- function keyListener(e) {
- if (e.keyCode == 13 || e.keyCode == 32) {
- clickListener(e);
- }
- }
-
- function clickListener(ev) {
- var option = $mdUtil.getClosest(ev.target, 'md-option');
- var optionCtrl = option && angular.element(option).data('$mdOptionController');
- if (!option || !optionCtrl) return;
-
- var optionHashKey = selectCtrl.hashGetter(optionCtrl.value);
- var isSelected = angular.isDefined(selectCtrl.selected[optionHashKey]);
-
- scope.$apply(function() {
- if (selectCtrl.isMultiple) {
- if (isSelected) {
- selectCtrl.deselect(optionHashKey);
- } else {
- selectCtrl.select(optionHashKey, optionCtrl.value);
- }
- } else {
- if (!isSelected) {
- selectCtrl.deselect( Object.keys(selectCtrl.selected)[0] );
- selectCtrl.select( optionHashKey, optionCtrl.value );
- }
- }
- selectCtrl.refreshViewValue();
- });
- }
- }
-
-
-
- function SelectMenuController($scope, $attrs, $element) {
- var self = this;
- self.isMultiple = angular.isDefined($attrs.multiple);
- // selected is an object with keys matching all of the selected options' hashed values
- self.selected = {};
- // options is an object with keys matching every option's hash value,
- // and values matching every option's controller.
- self.options = {};
-
- $scope.$watch(function() { return self.options; }, function() {
- self.ngModel.$render();
- }, true);
-
- var deregisterCollectionWatch;
- self.setMultiple = function(isMultiple) {
- var ngModel = self.ngModel;
- self.isMultiple = isMultiple;
- if (deregisterCollectionWatch) deregisterCollectionWatch();
-
- if (self.isMultiple) {
- ngModel.$validators['md-multiple'] = validateArray;
- ngModel.$render = renderMultiple;
-
- // watchCollection on the model because by default ngModel only watches the model's
- // reference. This allowed the developer to also push and pop from their array.
- $scope.$watchCollection($attrs.ngModel, function(value) {
- if (validateArray(value)) renderMultiple(value);
- });
- } else {
- delete ngModel.$validators['md-multiple'];
- ngModel.$render = renderSingular;
- }
-
- function validateArray(modelValue, viewValue) {
- // If a value is truthy but not an array, reject it.
- // If value is undefined/falsy, accept that it's an empty array.
- return angular.isArray(modelValue || viewValue || []);
- }
- };
-
- var searchStr = '';
- var clearSearchTimeout, optNodes, optText;
- var CLEAR_SEARCH_AFTER = 300;
- self.optNodeForKeyboardSearch = function(e) {
- clearSearchTimeout && clearTimeout(clearSearchTimeout);
- clearSearchTimeout = setTimeout(function() {
- clearSearchTimeout = undefined;
- searchStr = '';
- optText = undefined;
- optNodes = undefined;
- }, CLEAR_SEARCH_AFTER);
- searchStr += String.fromCharCode(e.keyCode);
- var search = new RegExp('^' + searchStr, 'i');
- if (!optNodes) {
- optNodes = $element.find('md-option');
- optText = new Array(optNodes.length);
- angular.forEach(optNodes, function(el, i) {
- optText[i] = el.textContent.trim();
- });
- }
- for (var i = 0; i < optText.length; ++i) {
- if (search.test(optText[i])) {
- return optNodes[i];
- }
- }
- };
-
-
- self.init = function(ngModel) {
- self.ngModel = ngModel;
-
- // Allow users to provide `ng-model="foo" ng-model-options="{trackBy: 'foo.id'}"` so
- // that we can properly compare objects set on the model to the available options
- if (ngModel.$options && ngModel.$options.trackBy) {
- var trackByLocals = {};
- var trackByParsed = $parse(ngModel.$options.trackBy);
- self.hashGetter = function(value, valueScope) {
- trackByLocals.$value = value;
- return trackByParsed(valueScope || $scope, trackByLocals);
- };
- // If the user doesn't provide a trackBy, we automatically generate an id for every
- // value passed in
- } else {
- self.hashGetter = function getHashValue(value) {
- if (angular.isObject(value)) {
- return 'object_' + (value.$$mdSelectId || (value.$$mdSelectId = ++selectNextId));
- }
- return value;
- };
- }
- self.setMultiple(self.isMultiple);
- };
-
- self.selectedLabels = function() {
- var selectedOptionEls = nodesToArray($element[0].querySelectorAll('md-option[selected]'));
- if (selectedOptionEls.length) {
- return selectedOptionEls.map(function(el) { return el.textContent; }).join(', ');
- } else {
- return '';
- }
- };
-
- self.select = function(hashKey, hashedValue) {
- var option = self.options[hashKey];
- option && option.setSelected(true);
- self.selected[hashKey] = hashedValue;
- };
- self.deselect = function(hashKey) {
- var option = self.options[hashKey];
- option && option.setSelected(false);
- delete self.selected[hashKey];
- };
-
- self.addOption = function(hashKey, optionCtrl) {
- if (angular.isDefined(self.options[hashKey])) {
- throw new Error('Duplicate md-option values are not allowed in a select. ' +
- 'Duplicate value "' + optionCtrl.value + '" found.');
- }
- self.options[hashKey] = optionCtrl;
-
- // If this option's value was already in our ngModel, go ahead and select it.
- if (angular.isDefined(self.selected[hashKey])) {
- self.select(hashKey, optionCtrl.value);
- self.refreshViewValue();
- }
- };
- self.removeOption = function(hashKey) {
- delete self.options[hashKey];
- // Don't deselect an option when it's removed - the user's ngModel should be allowed
- // to have values that do not match a currently available option.
- };
-
- self.refreshViewValue = function() {
- var values = [];
- var option;
- for (var hashKey in self.selected) {
- // If this hashKey has an associated option, push that option's value to the model.
- if ((option = self.options[hashKey])) {
- values.push(option.value);
- } else {
- // Otherwise, the given hashKey has no associated option, and we got it
- // from an ngModel value at an earlier time. Push the unhashed value of
- // this hashKey to the model.
- // This allows the developer to put a value in the model that doesn't yet have
- // an associated option.
- values.push(self.selected[hashKey]);
- }
- }
- self.ngModel.$setViewValue(self.isMultiple ? values : values[0]);
- };
-
- function renderMultiple() {
- var newSelectedValues = self.ngModel.$modelValue || self.ngModel.$viewValue;
- if (!angular.isArray(newSelectedValues)) return;
-
- var oldSelected = Object.keys(self.selected);
-
- var newSelectedHashes = newSelectedValues.map(self.hashGetter);
- var deselected = oldSelected.filter(function(hash) {
- return newSelectedHashes.indexOf(hash) === -1;
- });
-
- deselected.forEach(self.deselect);
- newSelectedHashes.forEach(function(hashKey, i) {
- self.select(hashKey, newSelectedValues[i]);
- });
- }
- function renderSingular() {
- var value = self.ngModel.$viewValue || self.ngModel.$modelValue;
- Object.keys(self.selected).forEach(self.deselect);
- self.select( self.hashGetter(value), value );
- }
- }
-
-}
-SelectMenuDirective.$inject = ["$parse", "$mdUtil", "$mdTheming"];
-
-function OptionDirective($mdButtonInkRipple, $mdUtil) {
-
- OptionController.$inject = ["$element"];
- return {
- restrict: 'E',
- require: ['mdOption', '^^mdSelectMenu'],
- controller: OptionController,
- compile: compile
- };
-
- function compile(element, attr) {
- // Manual transclusion to avoid the extra inner <span> that ng-transclude generates
- element.append( angular.element('<div class="md-text">').append(element.contents()) );
-
- element.attr('tabindex', attr.tabindex || '0');
- return postLink;
- }
-
- function postLink(scope, element, attr, ctrls) {
- var optionCtrl = ctrls[0];
- var selectCtrl = ctrls[1];
-
- if (angular.isDefined(attr.ngValue)) {
- scope.$watch(attr.ngValue, setOptionValue);
- } else if (angular.isDefined(attr.value)) {
- setOptionValue(attr.value);
- } else {
- scope.$watch(function() { return element.text(); }, setOptionValue);
- }
-
- scope.$$postDigest(function() {
- attr.$observe('selected', function(selected) {
- if (!angular.isDefined(selected)) return;
- if (selected) {
- if (!selectCtrl.isMultiple) {
- selectCtrl.deselect( Object.keys(selectCtrl.selected)[0] );
- }
- selectCtrl.select(optionCtrl.hashKey, optionCtrl.value);
- } else {
- selectCtrl.deselect(optionCtrl.hashKey);
- }
- selectCtrl.refreshViewValue();
- selectCtrl.ngModel.$render();
- });
- });
-
- $mdButtonInkRipple.attach(scope, element);
- configureAria();
-
- function setOptionValue(newValue, oldValue) {
- var oldHashKey = selectCtrl.hashGetter(oldValue, scope);
- var newHashKey = selectCtrl.hashGetter(newValue, scope);
-
- optionCtrl.hashKey = newHashKey;
- optionCtrl.value = newValue;
-
- selectCtrl.removeOption(oldHashKey, optionCtrl);
- selectCtrl.addOption(newHashKey, optionCtrl);
- }
-
- scope.$on('$destroy', function() {
- selectCtrl.removeOption(optionCtrl.hashKey, optionCtrl);
- });
-
- function configureAria() {
- var ariaAttrs = {
- 'role': 'option',
- 'aria-selected': 'false'
- };
-
- if (!element[0].hasAttribute('id')) {
- ariaAttrs.id = 'select_option_' + $mdUtil.nextUid();
- }
- element.attr(ariaAttrs);
- }
- }
-
- function OptionController($element) {
- this.selected = false;
- this.setSelected = function(isSelected) {
- if (isSelected && !this.selected) {
- $element.attr({
- 'selected': 'selected',
- 'aria-selected': 'true'
- });
- } else if (!isSelected && this.selected) {
- $element.removeAttr('selected');
- $element.attr('aria-selected', 'false');
- }
- this.selected = isSelected;
- };
- }
-
-}
-OptionDirective.$inject = ["$mdButtonInkRipple", "$mdUtil"];
-
-function OptgroupDirective() {
- return {
- restrict: 'E',
- compile: compile
- };
- function compile(el, attrs) {
- var labelElement = el.find('label');
- if (!labelElement.length) {
- labelElement = angular.element('<label>');
- el.prepend(labelElement);
- }
- if (attrs.label) labelElement.text(attrs.label);
- }
-}
-
-function SelectProvider($$interimElementProvider) {
- selectDefaultOptions.$inject = ["$mdSelect", "$mdConstant", "$$rAF", "$mdUtil", "$mdTheming", "$timeout", "$window"];
- return $$interimElementProvider('$mdSelect')
- .setDefaults({
- methods: ['target'],
- options: selectDefaultOptions
- });
-
- /* ngInject */
- function selectDefaultOptions($mdSelect, $mdConstant, $$rAF, $mdUtil, $mdTheming, $timeout, $window ) {
- return {
- parent: 'body',
- onShow: onShow,
- onRemove: onRemove,
- hasBackdrop: true,
- disableParentScroll: true,
- themable: true
- };
-
- function onShow(scope, element, opts) {
- if (!opts.target) {
- throw new Error('$mdSelect.show() expected a target element in options.target but got ' +
- '"' + opts.target + '"!');
- }
-
- angular.extend(opts, {
- isRemoved: false,
- target: angular.element(opts.target), //make sure it's not a naked dom node
- parent: angular.element(opts.parent),
- selectEl: element.find('md-select-menu'),
- contentEl: element.find('md-content'),
- backdrop: opts.hasBackdrop && angular.element('<md-backdrop class="md-select-backdrop md-click-catcher">')
- });
-
- opts.resizeFn = function() {
- $$rAF(function() {
- $$rAF(function() {
- animateSelect(scope, element, opts);
- });
- });
- };
-
- angular.element($window).on('resize', opts.resizeFn);
- angular.element($window).on('orientationchange', opts.resizeFn);
-
-
- configureAria();
-
- element.removeClass('md-leave');
-
- var optionNodes = opts.selectEl[0].getElementsByTagName('md-option');
-
- if (opts.loadingAsync && opts.loadingAsync.then) {
- opts.loadingAsync.then(function() {
- scope.$$loadingAsyncDone = true;
- // Give ourselves two frames for the progress loader to clear out.
- $$rAF(function() {
- $$rAF(function() {
- // Don't go forward if the select has been removed in this time...
- if (opts.isRemoved) return;
- animateSelect(scope, element, opts);
- });
- });
- });
- } else if (opts.loadingAsync) {
- scope.$$loadingAsyncDone = true;
- }
-
- if (opts.disableParentScroll && !$mdUtil.getClosest(opts.target, 'MD-DIALOG')) {
- opts.restoreScroll = $mdUtil.disableScrollAround(opts.target);
- } else {
- opts.disableParentScroll = false;
- }
- // Only activate click listeners after a short time to stop accidental double taps/clicks
- // from clicking the wrong item
- $timeout(activateInteraction, 75, false);
-
- if (opts.backdrop) {
- $mdTheming.inherit(opts.backdrop, opts.parent);
- opts.parent.append(opts.backdrop);
- }
- opts.parent.append(element);
-
- // Give the select a frame to 'initialize' in the DOM,
- // so we can read its height/width/position
- $$rAF(function() {
- $$rAF(function() {
- if (opts.isRemoved) return;
- animateSelect(scope, element, opts);
- });
- });
-
- return $mdUtil.transitionEndPromise(opts.selectEl, {timeout: 350});
-
- function configureAria() {
- opts.target.attr('aria-expanded', 'true');
- }
-
- function activateInteraction() {
- if (opts.isRemoved) return;
- var selectCtrl = opts.selectEl.controller('mdSelectMenu') || {};
- element.addClass('md-clickable');
-
- opts.backdrop && opts.backdrop.on('click', function(e) {
- e.preventDefault();
- e.stopPropagation();
- opts.restoreFocus = false;
- scope.$apply($mdSelect.cancel);
- });
-
- // Escape to close
- opts.selectEl.on('keydown', function(ev) {
- switch (ev.keyCode) {
- case $mdConstant.KEY_CODE.SPACE:
- case $mdConstant.KEY_CODE.ENTER:
- var option = $mdUtil.getClosest(ev.target, 'md-option');
- if (option) {
- opts.selectEl.triggerHandler({
- type: 'click',
- target: option
- });
- ev.preventDefault();
- }
- break;
- case $mdConstant.KEY_CODE.TAB:
- case $mdConstant.KEY_CODE.ESCAPE:
- ev.preventDefault();
- opts.restoreFocus = true;
- scope.$apply($mdSelect.cancel);
- }
- });
-
- // Cycling of options, and closing on enter
- opts.selectEl.on('keydown', function(ev) {
- switch (ev.keyCode) {
- case $mdConstant.KEY_CODE.UP_ARROW: return focusPrevOption();
- case $mdConstant.KEY_CODE.DOWN_ARROW: return focusNextOption();
- default:
- if (ev.keyCode >= 31 && ev.keyCode <= 90) {
- var optNode = opts.selectEl.controller('mdSelectMenu').optNodeForKeyboardSearch(ev);
- optNode && optNode.focus();
- }
- }
- });
-
-
- function focusOption(direction) {
- var optionsArray = nodesToArray(optionNodes);
- var index = optionsArray.indexOf(opts.focusedNode);
- if (index === -1) {
- // We lost the previously focused element, reset to first option
- index = 0;
- } else if (direction === 'next' && index < optionsArray.length - 1) {
- index++;
- } else if (direction === 'prev' && index > 0) {
- index--;
- }
- var newOption = opts.focusedNode = optionsArray[index];
- newOption && newOption.focus();
- }
- function focusNextOption() {
- focusOption('next');
- }
- function focusPrevOption() {
- focusOption('prev');
- }
-
- opts.selectEl.on('click', checkCloseMenu);
- opts.selectEl.on('keydown', function(e) {
- if (e.keyCode == 32 || e.keyCode == 13) {
- checkCloseMenu();
- }
- });
-
- function checkCloseMenu() {
- if (!selectCtrl.isMultiple) {
- opts.restoreFocus = true;
- scope.$evalAsync(function() {
- $mdSelect.hide(selectCtrl.ngModel.$viewValue);
- });
- }
- }
- }
-
- }
-
- function onRemove(scope, element, opts) {
- opts.isRemoved = true;
- element.addClass('md-leave')
- .removeClass('md-clickable');
- opts.target.attr('aria-expanded', 'false');
-
-
- angular.element($window).off('resize', opts.resizeFn);
- angular.element($window).off('orientationchange', opts.resizefn);
- opts.resizeFn = undefined;
-
- var mdSelect = opts.selectEl.controller('mdSelect');
- if (mdSelect) {
- mdSelect.setLabelText(opts.selectEl.controller('mdSelectMenu').selectedLabels());
- }
-
- return $mdUtil.transitionEndPromise(element, { timeout: 350 }).then(function() {
- element.removeClass('md-active');
- opts.backdrop && opts.backdrop.remove();
- if (element[0].parentNode === opts.parent[0]) {
- opts.parent[0].removeChild(element[0]); // use browser to avoid $destroy event
- }
- if (opts.disableParentScroll) {
- opts.restoreScroll();
- }
- if (opts.restoreFocus) opts.target.focus();
- });
- }
-
- function animateSelect(scope, element, opts) {
- var containerNode = element[0],
- targetNode = opts.target[0].firstElementChild.firstElementChild, // target the first span, functioning as the label
- parentNode = opts.parent[0],
- selectNode = opts.selectEl[0],
- contentNode = opts.contentEl[0],
- parentRect = parentNode.getBoundingClientRect(),
- targetRect = targetNode.getBoundingClientRect(),
- shouldOpenAroundTarget = false,
- bounds = {
- left: parentRect.left + SELECT_EDGE_MARGIN,
- top: SELECT_EDGE_MARGIN,
- bottom: parentRect.height - SELECT_EDGE_MARGIN,
- right: parentRect.width - SELECT_EDGE_MARGIN - ($mdUtil.floatingScrollbars() ? 16 : 0)
- },
- spaceAvailable = {
- top: targetRect.top - bounds.top,
- left: targetRect.left - bounds.left,
- right: bounds.right - (targetRect.left + targetRect.width),
- bottom: bounds.bottom - (targetRect.top + targetRect.height)
- },
- maxWidth = parentRect.width - SELECT_EDGE_MARGIN * 2,
- isScrollable = contentNode.scrollHeight > contentNode.offsetHeight,
- selectedNode = selectNode.querySelector('md-option[selected]'),
- optionNodes = selectNode.getElementsByTagName('md-option'),
- optgroupNodes = selectNode.getElementsByTagName('md-optgroup');
-
-
- var centeredNode;
- // If a selected node, center around that
- if (selectedNode) {
- centeredNode = selectedNode;
- // If there are option groups, center around the first option group
- } else if (optgroupNodes.length) {
- centeredNode = optgroupNodes[0];
- // Otherwise, center around the first optionNode
- } else if (optionNodes.length){
- centeredNode = optionNodes[0];
- // In case there are no options, center on whatever's in there... (eg progress indicator)
- } else {
- centeredNode = contentNode.firstElementChild || contentNode;
- }
-
- if (contentNode.offsetWidth > maxWidth) {
- contentNode.style['max-width'] = maxWidth + 'px';
- }
- if (shouldOpenAroundTarget) {
- contentNode.style['min-width'] = targetRect.width + 'px';
- }
-
- // Remove padding before we compute the position of the menu
- if (isScrollable) {
- selectNode.classList.add('md-overflow');
- }
-
- // Get the selectMenuRect *after* max-width is possibly set above
- var selectMenuRect = selectNode.getBoundingClientRect();
- var centeredRect = getOffsetRect(centeredNode);
-
- if (centeredNode) {
- var centeredStyle = $window.getComputedStyle(centeredNode);
- centeredRect.paddingLeft = parseInt(centeredStyle.paddingLeft, 10) || 0;
- centeredRect.paddingRight = parseInt(centeredStyle.paddingRight, 10) || 0;
- }
-
- var focusedNode = centeredNode;
- if ((focusedNode.tagName || '').toUpperCase() === 'MD-OPTGROUP') {
- focusedNode = optionNodes[0] || contentNode.firstElementChild || contentNode;
- }
-
- if (isScrollable) {
- var scrollBuffer = contentNode.offsetHeight / 2;
- contentNode.scrollTop = centeredRect.top + centeredRect.height / 2 - scrollBuffer;
-
- if (spaceAvailable.top < scrollBuffer) {
- contentNode.scrollTop = Math.min(
- centeredRect.top,
- contentNode.scrollTop + scrollBuffer - spaceAvailable.top
- );
- } else if (spaceAvailable.bottom < scrollBuffer) {
- contentNode.scrollTop = Math.max(
- centeredRect.top + centeredRect.height - selectMenuRect.height,
- contentNode.scrollTop - scrollBuffer + spaceAvailable.bottom
- );
- }
- }
-
- var left, top, transformOrigin;
- if (shouldOpenAroundTarget) {
- left = targetRect.left;
- top = targetRect.top + targetRect.height;
- transformOrigin = '50% 0';
- if (top + selectMenuRect.height > bounds.bottom) {
- top = targetRect.top - selectMenuRect.height;
- transformOrigin = '50% 100%';
- }
- } else {
- left = targetRect.left + centeredRect.left - centeredRect.paddingLeft;
- top = Math.floor(targetRect.top + targetRect.height / 2 - centeredRect.height / 2 -
- centeredRect.top + contentNode.scrollTop);
-
-
- transformOrigin = (centeredRect.left + targetRect.width / 2) + 'px ' +
- (centeredRect.top + centeredRect.height / 2 - contentNode.scrollTop) + 'px 0px';
-
- containerNode.style.minWidth = targetRect.width + centeredRect.paddingLeft +
- centeredRect.paddingRight + 'px';
- }
-
- // Keep left and top within the window
- var containerRect = containerNode.getBoundingClientRect();
- containerNode.style.left = clamp(bounds.left, left, bounds.right - containerRect.width) + 'px';
- containerNode.style.top = clamp(bounds.top, top, bounds.bottom - containerRect.height) + 'px';
- selectNode.style[$mdConstant.CSS.TRANSFORM_ORIGIN] = transformOrigin;
-
- selectNode.style[$mdConstant.CSS.TRANSFORM] = 'scale(' +
- Math.min(targetRect.width / selectMenuRect.width, 1.0) + ',' +
- Math.min(targetRect.height / selectMenuRect.height, 1.0) +
- ')';
-
-
- $$rAF(function() {
- element.addClass('md-active');
- selectNode.style[$mdConstant.CSS.TRANSFORM] = '';
- if (focusedNode) {
- opts.focusedNode = focusedNode;
- focusedNode.focus();
- }
- });
- }
-
- }
-
- function clamp(min, n, max) {
- return Math.max(min, Math.min(n, max));
- }
-
- function getOffsetRect(node) {
- return node ? {
- left: node.offsetLeft,
- top: node.offsetTop,
- width: node.offsetWidth,
- height: node.offsetHeight
- } : { left: 0, top: 0, width: 0, height: 0 };
- }
-}
-SelectProvider.$inject = ["$$interimElementProvider"];
-
-// Annoying method to copy nodes to an array, thanks to IE
-function nodesToArray(nodes) {
- var results = [];
- for (var i = 0; i < nodes.length; ++i) {
- results.push(nodes.item(i));
- }
- return results;
-}
-
-ng.material.components.select = angular.module("material.components.select");
\ No newline at end of file
Code Review / portal.git / blobdiff