hurbis-ui-v1
Version:
Biblioteca com componentes de interface de usuário para AngularJS em TypeScript.
12,369 lines • 491 kB
JavaScript
/**
* @license AngularJS v1.7.2
* (c) 2010-2018 Google, Inc. http://angularjs.org
* License: MIT
*/
(function(window, angular) {'use strict';
/**
* @ngdoc module
* @name ngAria
* @description
*
* The `ngAria` module provides support for common
* [<abbr title="Accessible Rich Internet Applications">ARIA</abbr>](http://www.w3.org/TR/wai-aria/)
* attributes that convey state or semantic information about the application for users
* of assistive technologies, such as screen readers.
*
* ## Usage
*
* For ngAria to do its magic, simply include the module `ngAria` as a dependency. The following
* directives are supported:
* `ngModel`, `ngChecked`, `ngReadonly`, `ngRequired`, `ngValue`, `ngDisabled`, `ngShow`, `ngHide`,
* `ngClick`, `ngDblClick`, and `ngMessages`.
*
* Below is a more detailed breakdown of the attributes handled by ngAria:
*
* | Directive | Supported Attributes |
* |---------------------------------------------|-----------------------------------------------------------------------------------------------------|
* | {@link ng.directive:ngModel ngModel} | aria-checked, aria-valuemin, aria-valuemax, aria-valuenow, aria-invalid, aria-required, input roles |
* | {@link ng.directive:ngDisabled ngDisabled} | aria-disabled |
* | {@link ng.directive:ngRequired ngRequired} | aria-required |
* | {@link ng.directive:ngChecked ngChecked} | aria-checked |
* | {@link ng.directive:ngReadonly ngReadonly} | aria-readonly |
* | {@link ng.directive:ngValue ngValue} | aria-checked |
* | {@link ng.directive:ngShow ngShow} | aria-hidden |
* | {@link ng.directive:ngHide ngHide} | aria-hidden |
* | {@link ng.directive:ngDblclick ngDblclick} | tabindex |
* | {@link module:ngMessages ngMessages} | aria-live |
* | {@link ng.directive:ngClick ngClick} | tabindex, keydown event, button role |
*
* Find out more information about each directive by reading the
* {@link guide/accessibility ngAria Developer Guide}.
*
* ## Example
* Using ngDisabled with ngAria:
* ```html
* <md-checkbox ng-disabled="disabled">
* ```
* Becomes:
* ```html
* <md-checkbox ng-disabled="disabled" aria-disabled="true">
* ```
*
* ## Disabling Specific Attributes
* It is possible to disable individual attributes added by ngAria with the
* {@link ngAria.$ariaProvider#config config} method. For more details, see the
* {@link guide/accessibility Developer Guide}.
*
* ## Disabling `ngAria` on Specific Elements
* It is possible to make `ngAria` ignore a specific element, by adding the `ng-aria-disable`
* attribute on it. Note that only the element itself (and not its child elements) will be ignored.
*/
var ARIA_DISABLE_ATTR = 'ngAriaDisable';
var ngAriaModule = angular.module('ngAria', ['ng']).
info({ angularVersion: '1.7.2' }).
provider('$aria', $AriaProvider);
/**
* Internal Utilities
*/
var nodeBlackList = ['BUTTON', 'A', 'INPUT', 'TEXTAREA', 'SELECT', 'DETAILS', 'SUMMARY'];
var isNodeOneOf = function(elem, nodeTypeArray) {
if (nodeTypeArray.indexOf(elem[0].nodeName) !== -1) {
return true;
}
};
/**
* @ngdoc provider
* @name $ariaProvider
* @this
*
* @description
*
* Used for configuring the ARIA attributes injected and managed by ngAria.
*
* ```js
* angular.module('myApp', ['ngAria'], function config($ariaProvider) {
* $ariaProvider.config({
* ariaValue: true,
* tabindex: false
* });
* });
*```
*
* ## Dependencies
* Requires the {@link ngAria} module to be installed.
*
*/
function $AriaProvider() {
var config = {
ariaHidden: true,
ariaChecked: true,
ariaReadonly: true,
ariaDisabled: true,
ariaRequired: true,
ariaInvalid: true,
ariaValue: true,
tabindex: true,
bindKeydown: true,
bindRoleForClick: true
};
/**
* @ngdoc method
* @name $ariaProvider#config
*
* @param {object} config object to enable/disable specific ARIA attributes
*
* - **ariaHidden** – `{boolean}` – Enables/disables aria-hidden tags
* - **ariaChecked** – `{boolean}` – Enables/disables aria-checked tags
* - **ariaReadonly** – `{boolean}` – Enables/disables aria-readonly tags
* - **ariaDisabled** – `{boolean}` – Enables/disables aria-disabled tags
* - **ariaRequired** – `{boolean}` – Enables/disables aria-required tags
* - **ariaInvalid** – `{boolean}` – Enables/disables aria-invalid tags
* - **ariaValue** – `{boolean}` – Enables/disables aria-valuemin, aria-valuemax and
* aria-valuenow tags
* - **tabindex** – `{boolean}` – Enables/disables tabindex tags
* - **bindKeydown** – `{boolean}` – Enables/disables keyboard event binding on non-interactive
* elements (such as `div` or `li`) using ng-click, making them more accessible to users of
* assistive technologies
* - **bindRoleForClick** – `{boolean}` – Adds role=button to non-interactive elements (such as
* `div` or `li`) using ng-click, making them more accessible to users of assistive
* technologies
*
* @description
* Enables/disables various ARIA attributes
*/
this.config = function(newConfig) {
config = angular.extend(config, newConfig);
};
function watchExpr(attrName, ariaAttr, nodeBlackList, negate) {
return function(scope, elem, attr) {
if (attr.hasOwnProperty(ARIA_DISABLE_ATTR)) return;
var ariaCamelName = attr.$normalize(ariaAttr);
if (config[ariaCamelName] && !isNodeOneOf(elem, nodeBlackList) && !attr[ariaCamelName]) {
scope.$watch(attr[attrName], function(boolVal) {
// ensure boolean value
boolVal = negate ? !boolVal : !!boolVal;
elem.attr(ariaAttr, boolVal);
});
}
};
}
/**
* @ngdoc service
* @name $aria
*
* @description
* @priority 200
*
* The $aria service contains helper methods for applying common
* [ARIA](http://www.w3.org/TR/wai-aria/) attributes to HTML directives.
*
* ngAria injects common accessibility attributes that tell assistive technologies when HTML
* elements are enabled, selected, hidden, and more. To see how this is performed with ngAria,
* let's review a code snippet from ngAria itself:
*
*```js
* ngAriaModule.directive('ngDisabled', ['$aria', function($aria) {
* return $aria.$$watchExpr('ngDisabled', 'aria-disabled', nodeBlackList, false);
* }])
*```
* Shown above, the ngAria module creates a directive with the same signature as the
* traditional `ng-disabled` directive. But this ngAria version is dedicated to
* solely managing accessibility attributes on custom elements. The internal `$aria` service is
* used to watch the boolean attribute `ngDisabled`. If it has not been explicitly set by the
* developer, `aria-disabled` is injected as an attribute with its value synchronized to the
* value in `ngDisabled`.
*
* Because ngAria hooks into the `ng-disabled` directive, developers do not have to do
* anything to enable this feature. The `aria-disabled` attribute is automatically managed
* simply as a silent side-effect of using `ng-disabled` with the ngAria module.
*
* The full list of directives that interface with ngAria:
* * **ngModel**
* * **ngChecked**
* * **ngReadonly**
* * **ngRequired**
* * **ngDisabled**
* * **ngValue**
* * **ngShow**
* * **ngHide**
* * **ngClick**
* * **ngDblclick**
* * **ngMessages**
*
* Read the {@link guide/accessibility ngAria Developer Guide} for a thorough explanation of each
* directive.
*
*
* ## Dependencies
* Requires the {@link ngAria} module to be installed.
*/
this.$get = function() {
return {
config: function(key) {
return config[key];
},
$$watchExpr: watchExpr
};
};
}
ngAriaModule.directive('ngShow', ['$aria', function($aria) {
return $aria.$$watchExpr('ngShow', 'aria-hidden', [], true);
}])
.directive('ngHide', ['$aria', function($aria) {
return $aria.$$watchExpr('ngHide', 'aria-hidden', [], false);
}])
.directive('ngValue', ['$aria', function($aria) {
return $aria.$$watchExpr('ngValue', 'aria-checked', nodeBlackList, false);
}])
.directive('ngChecked', ['$aria', function($aria) {
return $aria.$$watchExpr('ngChecked', 'aria-checked', nodeBlackList, false);
}])
.directive('ngReadonly', ['$aria', function($aria) {
return $aria.$$watchExpr('ngReadonly', 'aria-readonly', nodeBlackList, false);
}])
.directive('ngRequired', ['$aria', function($aria) {
return $aria.$$watchExpr('ngRequired', 'aria-required', nodeBlackList, false);
}])
.directive('ngModel', ['$aria', function($aria) {
function shouldAttachAttr(attr, normalizedAttr, elem, allowBlacklistEls) {
return $aria.config(normalizedAttr) &&
!elem.attr(attr) &&
(allowBlacklistEls || !isNodeOneOf(elem, nodeBlackList)) &&
(elem.attr('type') !== 'hidden' || elem[0].nodeName !== 'INPUT');
}
function shouldAttachRole(role, elem) {
// if element does not have role attribute
// AND element type is equal to role (if custom element has a type equaling shape) <-- remove?
// AND element is not in nodeBlackList
return !elem.attr('role') && (elem.attr('type') === role) && !isNodeOneOf(elem, nodeBlackList);
}
function getShape(attr, elem) {
var type = attr.type,
role = attr.role;
return ((type || role) === 'checkbox' || role === 'menuitemcheckbox') ? 'checkbox' :
((type || role) === 'radio' || role === 'menuitemradio') ? 'radio' :
(type === 'range' || role === 'progressbar' || role === 'slider') ? 'range' : '';
}
return {
restrict: 'A',
require: 'ngModel',
priority: 200, //Make sure watches are fired after any other directives that affect the ngModel value
compile: function(elem, attr) {
if (attr.hasOwnProperty(ARIA_DISABLE_ATTR)) return;
var shape = getShape(attr, elem);
return {
post: function(scope, elem, attr, ngModel) {
var needsTabIndex = shouldAttachAttr('tabindex', 'tabindex', elem, false);
function ngAriaWatchModelValue() {
return ngModel.$modelValue;
}
function getRadioReaction(newVal) {
// Strict comparison would cause a BC
// eslint-disable-next-line eqeqeq
var boolVal = (attr.value == ngModel.$viewValue);
elem.attr('aria-checked', boolVal);
}
function getCheckboxReaction() {
elem.attr('aria-checked', !ngModel.$isEmpty(ngModel.$viewValue));
}
switch (shape) {
case 'radio':
case 'checkbox':
if (shouldAttachRole(shape, elem)) {
elem.attr('role', shape);
}
if (shouldAttachAttr('aria-checked', 'ariaChecked', elem, false)) {
scope.$watch(ngAriaWatchModelValue, shape === 'radio' ?
getRadioReaction : getCheckboxReaction);
}
if (needsTabIndex) {
elem.attr('tabindex', 0);
}
break;
case 'range':
if (shouldAttachRole(shape, elem)) {
elem.attr('role', 'slider');
}
if ($aria.config('ariaValue')) {
var needsAriaValuemin = !elem.attr('aria-valuemin') &&
(attr.hasOwnProperty('min') || attr.hasOwnProperty('ngMin'));
var needsAriaValuemax = !elem.attr('aria-valuemax') &&
(attr.hasOwnProperty('max') || attr.hasOwnProperty('ngMax'));
var needsAriaValuenow = !elem.attr('aria-valuenow');
if (needsAriaValuemin) {
attr.$observe('min', function ngAriaValueMinReaction(newVal) {
elem.attr('aria-valuemin', newVal);
});
}
if (needsAriaValuemax) {
attr.$observe('max', function ngAriaValueMinReaction(newVal) {
elem.attr('aria-valuemax', newVal);
});
}
if (needsAriaValuenow) {
scope.$watch(ngAriaWatchModelValue, function ngAriaValueNowReaction(newVal) {
elem.attr('aria-valuenow', newVal);
});
}
}
if (needsTabIndex) {
elem.attr('tabindex', 0);
}
break;
}
if (!attr.hasOwnProperty('ngRequired') && ngModel.$validators.required
&& shouldAttachAttr('aria-required', 'ariaRequired', elem, false)) {
// ngModel.$error.required is undefined on custom controls
attr.$observe('required', function() {
elem.attr('aria-required', !!attr['required']);
});
}
if (shouldAttachAttr('aria-invalid', 'ariaInvalid', elem, true)) {
scope.$watch(function ngAriaInvalidWatch() {
return ngModel.$invalid;
}, function ngAriaInvalidReaction(newVal) {
elem.attr('aria-invalid', !!newVal);
});
}
}
};
}
};
}])
.directive('ngDisabled', ['$aria', function($aria) {
return $aria.$$watchExpr('ngDisabled', 'aria-disabled', nodeBlackList, false);
}])
.directive('ngMessages', function() {
return {
restrict: 'A',
require: '?ngMessages',
link: function(scope, elem, attr, ngMessages) {
if (attr.hasOwnProperty(ARIA_DISABLE_ATTR)) return;
if (!elem.attr('aria-live')) {
elem.attr('aria-live', 'assertive');
}
}
};
})
.directive('ngClick',['$aria', '$parse', function($aria, $parse) {
return {
restrict: 'A',
compile: function(elem, attr) {
if (attr.hasOwnProperty(ARIA_DISABLE_ATTR)) return;
var fn = $parse(attr.ngClick);
return function(scope, elem, attr) {
if (!isNodeOneOf(elem, nodeBlackList)) {
if ($aria.config('bindRoleForClick') && !elem.attr('role')) {
elem.attr('role', 'button');
}
if ($aria.config('tabindex') && !elem.attr('tabindex')) {
elem.attr('tabindex', 0);
}
if ($aria.config('bindKeydown') && !attr.ngKeydown && !attr.ngKeypress && !attr.ngKeyup) {
elem.on('keydown', function(event) {
var keyCode = event.which || event.keyCode;
if (keyCode === 32 || keyCode === 13) {
scope.$apply(callback);
}
function callback() {
fn(scope, { $event: event });
}
});
}
}
};
}
};
}])
.directive('ngDblclick', ['$aria', function($aria) {
return function(scope, elem, attr) {
if (attr.hasOwnProperty(ARIA_DISABLE_ATTR)) return;
if ($aria.config('tabindex') && !elem.attr('tabindex') && !isNodeOneOf(elem, nodeBlackList)) {
elem.attr('tabindex', 0);
}
};
}]);
})(window, window.angular);
/**
* @license AngularJS v1.7.2
* (c) 2010-2018 Google, Inc. http://angularjs.org
* License: MIT
*/
(function(window, angular) {'use strict';
var ELEMENT_NODE = 1;
var COMMENT_NODE = 8;
var ADD_CLASS_SUFFIX = '-add';
var REMOVE_CLASS_SUFFIX = '-remove';
var EVENT_CLASS_PREFIX = 'ng-';
var ACTIVE_CLASS_SUFFIX = '-active';
var PREPARE_CLASS_SUFFIX = '-prepare';
var NG_ANIMATE_CLASSNAME = 'ng-animate';
var NG_ANIMATE_CHILDREN_DATA = '$$ngAnimateChildren';
// Detect proper transitionend/animationend event names.
var CSS_PREFIX = '', TRANSITION_PROP, TRANSITIONEND_EVENT, ANIMATION_PROP, ANIMATIONEND_EVENT;
// If unprefixed events are not supported but webkit-prefixed are, use the latter.
// Otherwise, just use W3C names, browsers not supporting them at all will just ignore them.
// Note: Chrome implements `window.onwebkitanimationend` and doesn't implement `window.onanimationend`
// but at the same time dispatches the `animationend` event and not `webkitAnimationEnd`.
// Register both events in case `window.onanimationend` is not supported because of that,
// do the same for `transitionend` as Safari is likely to exhibit similar behavior.
// Also, the only modern browser that uses vendor prefixes for transitions/keyframes is webkit
// therefore there is no reason to test anymore for other vendor prefixes:
// http://caniuse.com/#search=transition
if ((window.ontransitionend === undefined) && (window.onwebkittransitionend !== undefined)) {
CSS_PREFIX = '-webkit-';
TRANSITION_PROP = 'WebkitTransition';
TRANSITIONEND_EVENT = 'webkitTransitionEnd transitionend';
} else {
TRANSITION_PROP = 'transition';
TRANSITIONEND_EVENT = 'transitionend';
}
if ((window.onanimationend === undefined) && (window.onwebkitanimationend !== undefined)) {
CSS_PREFIX = '-webkit-';
ANIMATION_PROP = 'WebkitAnimation';
ANIMATIONEND_EVENT = 'webkitAnimationEnd animationend';
} else {
ANIMATION_PROP = 'animation';
ANIMATIONEND_EVENT = 'animationend';
}
var DURATION_KEY = 'Duration';
var PROPERTY_KEY = 'Property';
var DELAY_KEY = 'Delay';
var TIMING_KEY = 'TimingFunction';
var ANIMATION_ITERATION_COUNT_KEY = 'IterationCount';
var ANIMATION_PLAYSTATE_KEY = 'PlayState';
var SAFE_FAST_FORWARD_DURATION_VALUE = 9999;
var ANIMATION_DELAY_PROP = ANIMATION_PROP + DELAY_KEY;
var ANIMATION_DURATION_PROP = ANIMATION_PROP + DURATION_KEY;
var TRANSITION_DELAY_PROP = TRANSITION_PROP + DELAY_KEY;
var TRANSITION_DURATION_PROP = TRANSITION_PROP + DURATION_KEY;
var ngMinErr = angular.$$minErr('ng');
function assertArg(arg, name, reason) {
if (!arg) {
throw ngMinErr('areq', 'Argument \'{0}\' is {1}', (name || '?'), (reason || 'required'));
}
return arg;
}
function mergeClasses(a,b) {
if (!a && !b) return '';
if (!a) return b;
if (!b) return a;
if (isArray(a)) a = a.join(' ');
if (isArray(b)) b = b.join(' ');
return a + ' ' + b;
}
function packageStyles(options) {
var styles = {};
if (options && (options.to || options.from)) {
styles.to = options.to;
styles.from = options.from;
}
return styles;
}
function pendClasses(classes, fix, isPrefix) {
var className = '';
classes = isArray(classes)
? classes
: classes && isString(classes) && classes.length
? classes.split(/\s+/)
: [];
forEach(classes, function(klass, i) {
if (klass && klass.length > 0) {
className += (i > 0) ? ' ' : '';
className += isPrefix ? fix + klass
: klass + fix;
}
});
return className;
}
function removeFromArray(arr, val) {
var index = arr.indexOf(val);
if (val >= 0) {
arr.splice(index, 1);
}
}
function stripCommentsFromElement(element) {
if (element instanceof jqLite) {
switch (element.length) {
case 0:
return element;
case 1:
// there is no point of stripping anything if the element
// is the only element within the jqLite wrapper.
// (it's important that we retain the element instance.)
if (element[0].nodeType === ELEMENT_NODE) {
return element;
}
break;
default:
return jqLite(extractElementNode(element));
}
}
if (element.nodeType === ELEMENT_NODE) {
return jqLite(element);
}
}
function extractElementNode(element) {
if (!element[0]) return element;
for (var i = 0; i < element.length; i++) {
var elm = element[i];
if (elm.nodeType === ELEMENT_NODE) {
return elm;
}
}
}
function $$addClass($$jqLite, element, className) {
forEach(element, function(elm) {
$$jqLite.addClass(elm, className);
});
}
function $$removeClass($$jqLite, element, className) {
forEach(element, function(elm) {
$$jqLite.removeClass(elm, className);
});
}
function applyAnimationClassesFactory($$jqLite) {
return function(element, options) {
if (options.addClass) {
$$addClass($$jqLite, element, options.addClass);
options.addClass = null;
}
if (options.removeClass) {
$$removeClass($$jqLite, element, options.removeClass);
options.removeClass = null;
}
};
}
function prepareAnimationOptions(options) {
options = options || {};
if (!options.$$prepared) {
var domOperation = options.domOperation || noop;
options.domOperation = function() {
options.$$domOperationFired = true;
domOperation();
domOperation = noop;
};
options.$$prepared = true;
}
return options;
}
function applyAnimationStyles(element, options) {
applyAnimationFromStyles(element, options);
applyAnimationToStyles(element, options);
}
function applyAnimationFromStyles(element, options) {
if (options.from) {
element.css(options.from);
options.from = null;
}
}
function applyAnimationToStyles(element, options) {
if (options.to) {
element.css(options.to);
options.to = null;
}
}
function mergeAnimationDetails(element, oldAnimation, newAnimation) {
var target = oldAnimation.options || {};
var newOptions = newAnimation.options || {};
var toAdd = (target.addClass || '') + ' ' + (newOptions.addClass || '');
var toRemove = (target.removeClass || '') + ' ' + (newOptions.removeClass || '');
var classes = resolveElementClasses(element.attr('class'), toAdd, toRemove);
if (newOptions.preparationClasses) {
target.preparationClasses = concatWithSpace(newOptions.preparationClasses, target.preparationClasses);
delete newOptions.preparationClasses;
}
// noop is basically when there is no callback; otherwise something has been set
var realDomOperation = target.domOperation !== noop ? target.domOperation : null;
extend(target, newOptions);
// TODO(matsko or sreeramu): proper fix is to maintain all animation callback in array and call at last,but now only leave has the callback so no issue with this.
if (realDomOperation) {
target.domOperation = realDomOperation;
}
if (classes.addClass) {
target.addClass = classes.addClass;
} else {
target.addClass = null;
}
if (classes.removeClass) {
target.removeClass = classes.removeClass;
} else {
target.removeClass = null;
}
oldAnimation.addClass = target.addClass;
oldAnimation.removeClass = target.removeClass;
return target;
}
function resolveElementClasses(existing, toAdd, toRemove) {
var ADD_CLASS = 1;
var REMOVE_CLASS = -1;
var flags = {};
existing = splitClassesToLookup(existing);
toAdd = splitClassesToLookup(toAdd);
forEach(toAdd, function(value, key) {
flags[key] = ADD_CLASS;
});
toRemove = splitClassesToLookup(toRemove);
forEach(toRemove, function(value, key) {
flags[key] = flags[key] === ADD_CLASS ? null : REMOVE_CLASS;
});
var classes = {
addClass: '',
removeClass: ''
};
forEach(flags, function(val, klass) {
var prop, allow;
if (val === ADD_CLASS) {
prop = 'addClass';
allow = !existing[klass] || existing[klass + REMOVE_CLASS_SUFFIX];
} else if (val === REMOVE_CLASS) {
prop = 'removeClass';
allow = existing[klass] || existing[klass + ADD_CLASS_SUFFIX];
}
if (allow) {
if (classes[prop].length) {
classes[prop] += ' ';
}
classes[prop] += klass;
}
});
function splitClassesToLookup(classes) {
if (isString(classes)) {
classes = classes.split(' ');
}
var obj = {};
forEach(classes, function(klass) {
// sometimes the split leaves empty string values
// incase extra spaces were applied to the options
if (klass.length) {
obj[klass] = true;
}
});
return obj;
}
return classes;
}
function getDomNode(element) {
return (element instanceof jqLite) ? element[0] : element;
}
function applyGeneratedPreparationClasses(element, event, options) {
var classes = '';
if (event) {
classes = pendClasses(event, EVENT_CLASS_PREFIX, true);
}
if (options.addClass) {
classes = concatWithSpace(classes, pendClasses(options.addClass, ADD_CLASS_SUFFIX));
}
if (options.removeClass) {
classes = concatWithSpace(classes, pendClasses(options.removeClass, REMOVE_CLASS_SUFFIX));
}
if (classes.length) {
options.preparationClasses = classes;
element.addClass(classes);
}
}
function clearGeneratedClasses(element, options) {
if (options.preparationClasses) {
element.removeClass(options.preparationClasses);
options.preparationClasses = null;
}
if (options.activeClasses) {
element.removeClass(options.activeClasses);
options.activeClasses = null;
}
}
function blockTransitions(node, duration) {
// we use a negative delay value since it performs blocking
// yet it doesn't kill any existing transitions running on the
// same element which makes this safe for class-based animations
var value = duration ? '-' + duration + 's' : '';
applyInlineStyle(node, [TRANSITION_DELAY_PROP, value]);
return [TRANSITION_DELAY_PROP, value];
}
function blockKeyframeAnimations(node, applyBlock) {
var value = applyBlock ? 'paused' : '';
var key = ANIMATION_PROP + ANIMATION_PLAYSTATE_KEY;
applyInlineStyle(node, [key, value]);
return [key, value];
}
function applyInlineStyle(node, styleTuple) {
var prop = styleTuple[0];
var value = styleTuple[1];
node.style[prop] = value;
}
function concatWithSpace(a,b) {
if (!a) return b;
if (!b) return a;
return a + ' ' + b;
}
var $$rAFSchedulerFactory = ['$$rAF', function($$rAF) {
var queue, cancelFn;
function scheduler(tasks) {
// we make a copy since RAFScheduler mutates the state
// of the passed in array variable and this would be difficult
// to track down on the outside code
queue = queue.concat(tasks);
nextTick();
}
queue = scheduler.queue = [];
/* waitUntilQuiet does two things:
* 1. It will run the FINAL `fn` value only when an uncanceled RAF has passed through
* 2. It will delay the next wave of tasks from running until the quiet `fn` has run.
*
* The motivation here is that animation code can request more time from the scheduler
* before the next wave runs. This allows for certain DOM properties such as classes to
* be resolved in time for the next animation to run.
*/
scheduler.waitUntilQuiet = function(fn) {
if (cancelFn) cancelFn();
cancelFn = $$rAF(function() {
cancelFn = null;
fn();
nextTick();
});
};
return scheduler;
function nextTick() {
if (!queue.length) return;
var items = queue.shift();
for (var i = 0; i < items.length; i++) {
items[i]();
}
if (!cancelFn) {
$$rAF(function() {
if (!cancelFn) nextTick();
});
}
}
}];
/**
* @ngdoc directive
* @name ngAnimateChildren
* @restrict AE
* @element ANY
*
* @description
*
* ngAnimateChildren allows you to specify that children of this element should animate even if any
* of the children's parents are currently animating. By default, when an element has an active `enter`, `leave`, or `move`
* (structural) animation, child elements that also have an active structural animation are not animated.
*
* Note that even if `ngAnimateChildren` is set, no child animations will run when the parent element is removed from the DOM (`leave` animation).
*
*
* @param {string} ngAnimateChildren If the value is empty, `true` or `on`,
* then child animations are allowed. If the value is `false`, child animations are not allowed.
*
* @example
* <example module="ngAnimateChildren" name="ngAnimateChildren" deps="angular-animate.js" animations="true">
<file name="index.html">
<div ng-controller="MainController as main">
<label>Show container? <input type="checkbox" ng-model="main.enterElement" /></label>
<label>Animate children? <input type="checkbox" ng-model="main.animateChildren" /></label>
<hr>
<div ng-animate-children="{{main.animateChildren}}">
<div ng-if="main.enterElement" class="container">
List of items:
<div ng-repeat="item in [0, 1, 2, 3]" class="item">Item {{item}}</div>
</div>
</div>
</div>
</file>
<file name="animations.css">
.container.ng-enter,
.container.ng-leave {
transition: all ease 1.5s;
}
.container.ng-enter,
.container.ng-leave-active {
opacity: 0;
}
.container.ng-leave,
.container.ng-enter-active {
opacity: 1;
}
.item {
background: firebrick;
color: #FFF;
margin-bottom: 10px;
}
.item.ng-enter,
.item.ng-leave {
transition: transform 1.5s ease;
}
.item.ng-enter {
transform: translateX(50px);
}
.item.ng-enter-active {
transform: translateX(0);
}
</file>
<file name="script.js">
angular.module('ngAnimateChildren', ['ngAnimate'])
.controller('MainController', function MainController() {
this.animateChildren = false;
this.enterElement = false;
});
</file>
</example>
*/
var $$AnimateChildrenDirective = ['$interpolate', function($interpolate) {
return {
link: function(scope, element, attrs) {
var val = attrs.ngAnimateChildren;
if (isString(val) && val.length === 0) { //empty attribute
element.data(NG_ANIMATE_CHILDREN_DATA, true);
} else {
// Interpolate and set the value, so that it is available to
// animations that run right after compilation
setData($interpolate(val)(scope));
attrs.$observe('ngAnimateChildren', setData);
}
function setData(value) {
value = value === 'on' || value === 'true';
element.data(NG_ANIMATE_CHILDREN_DATA, value);
}
}
};
}];
/* exported $AnimateCssProvider */
var ANIMATE_TIMER_KEY = '$$animateCss';
/**
* @ngdoc service
* @name $animateCss
* @kind object
*
* @description
* The `$animateCss` service is a useful utility to trigger customized CSS-based transitions/keyframes
* from a JavaScript-based animation or directly from a directive. The purpose of `$animateCss` is NOT
* to side-step how `$animate` and ngAnimate work, but the goal is to allow pre-existing animations or
* directives to create more complex animations that can be purely driven using CSS code.
*
* Note that only browsers that support CSS transitions and/or keyframe animations are capable of
* rendering animations triggered via `$animateCss` (bad news for IE9 and lower).
*
* ## General Use
* Once again, `$animateCss` is designed to be used inside of a registered JavaScript animation that
* is powered by ngAnimate. It is possible to use `$animateCss` directly inside of a directive, however,
* any automatic control over cancelling animations and/or preventing animations from being run on
* child elements will not be handled by AngularJS. For this to work as expected, please use `$animate` to
* trigger the animation and then setup a JavaScript animation that injects `$animateCss` to trigger
* the CSS animation.
*
* The example below shows how we can create a folding animation on an element using `ng-if`:
*
* ```html
* <!-- notice the `fold-animation` CSS class -->
* <div ng-if="onOff" class="fold-animation">
* This element will go BOOM
* </div>
* <button ng-click="onOff=true">Fold In</button>
* ```
*
* Now we create the **JavaScript animation** that will trigger the CSS transition:
*
* ```js
* ngModule.animation('.fold-animation', ['$animateCss', function($animateCss) {
* return {
* enter: function(element, doneFn) {
* var height = element[0].offsetHeight;
* return $animateCss(element, {
* from: { height:'0px' },
* to: { height:height + 'px' },
* duration: 1 // one second
* });
* }
* }
* }]);
* ```
*
* ## More Advanced Uses
*
* `$animateCss` is the underlying code that ngAnimate uses to power **CSS-based animations** behind the scenes. Therefore CSS hooks
* like `.ng-EVENT`, `.ng-EVENT-active`, `.ng-EVENT-stagger` are all features that can be triggered using `$animateCss` via JavaScript code.
*
* This also means that just about any combination of adding classes, removing classes, setting styles, dynamically setting a keyframe animation,
* applying a hardcoded duration or delay value, changing the animation easing or applying a stagger animation are all options that work with
* `$animateCss`. The service itself is smart enough to figure out the combination of options and examine the element styling properties in order
* to provide a working animation that will run in CSS.
*
* The example below showcases a more advanced version of the `.fold-animation` from the example above:
*
* ```js
* ngModule.animation('.fold-animation', ['$animateCss', function($animateCss) {
* return {
* enter: function(element, doneFn) {
* var height = element[0].offsetHeight;
* return $animateCss(element, {
* addClass: 'red large-text pulse-twice',
* easing: 'ease-out',
* from: { height:'0px' },
* to: { height:height + 'px' },
* duration: 1 // one second
* });
* }
* }
* }]);
* ```
*
* Since we're adding/removing CSS classes then the CSS transition will also pick those up:
*
* ```css
* /* since a hardcoded duration value of 1 was provided in the JavaScript animation code,
* the CSS classes below will be transitioned despite them being defined as regular CSS classes */
* .red { background:red; }
* .large-text { font-size:20px; }
*
* /* we can also use a keyframe animation and $animateCss will make it work alongside the transition */
* .pulse-twice {
* animation: 0.5s pulse linear 2;
* -webkit-animation: 0.5s pulse linear 2;
* }
*
* @keyframes pulse {
* from { transform: scale(0.5); }
* to { transform: scale(1.5); }
* }
*
* @-webkit-keyframes pulse {
* from { -webkit-transform: scale(0.5); }
* to { -webkit-transform: scale(1.5); }
* }
* ```
*
* Given this complex combination of CSS classes, styles and options, `$animateCss` will figure everything out and make the animation happen.
*
* ## How the Options are handled
*
* `$animateCss` is very versatile and intelligent when it comes to figuring out what configurations to apply to the element to ensure the animation
* works with the options provided. Say for example we were adding a class that contained a keyframe value and we wanted to also animate some inline
* styles using the `from` and `to` properties.
*
* ```js
* var animator = $animateCss(element, {
* from: { background:'red' },
* to: { background:'blue' }
* });
* animator.start();
* ```
*
* ```css
* .rotating-animation {
* animation:0.5s rotate linear;
* -webkit-animation:0.5s rotate linear;
* }
*
* @keyframes rotate {
* from { transform: rotate(0deg); }
* to { transform: rotate(360deg); }
* }
*
* @-webkit-keyframes rotate {
* from { -webkit-transform: rotate(0deg); }
* to { -webkit-transform: rotate(360deg); }
* }
* ```
*
* The missing pieces here are that we do not have a transition set (within the CSS code nor within the `$animateCss` options) and the duration of the animation is
* going to be detected from what the keyframe styles on the CSS class are. In this event, `$animateCss` will automatically create an inline transition
* style matching the duration detected from the keyframe style (which is present in the CSS class that is being added) and then prepare both the transition
* and keyframe animations to run in parallel on the element. Then when the animation is underway the provided `from` and `to` CSS styles will be applied
* and spread across the transition and keyframe animation.
*
* ## What is returned
*
* `$animateCss` works in two stages: a preparation phase and an animation phase. Therefore when `$animateCss` is first called it will NOT actually
* start the animation. All that is going on here is that the element is being prepared for the animation (which means that the generated CSS classes are
* added and removed on the element). Once `$animateCss` is called it will return an object with the following properties:
*
* ```js
* var animator = $animateCss(element, { ... });
* ```
*
* Now what do the contents of our `animator` variable look like:
*
* ```js
* {
* // starts the animation
* start: Function,
*
* // ends (aborts) the animation
* end: Function
* }
* ```
*
* To actually start the animation we need to run `animation.start()` which will then return a promise that we can hook into to detect when the animation ends.
* If we choose not to run the animation then we MUST run `animation.end()` to perform a cleanup on the element (since some CSS classes and styles may have been
* applied to the element during the preparation phase). Note that all other properties such as duration, delay, transitions and keyframes are just properties
* and that changing them will not reconfigure the parameters of the animation.
*
* ### runner.done() vs runner.then()
* It is documented that `animation.start()` will return a promise object and this is true, however, there is also an additional method available on the
* runner called `.done(callbackFn)`. The done method works the same as `.finally(callbackFn)`, however, it does **not trigger a digest to occur**.
* Therefore, for performance reasons, it's always best to use `runner.done(callback)` instead of `runner.then()`, `runner.catch()` or `runner.finally()`
* unless you really need a digest to kick off afterwards.
*
* Keep in mind that, to make this easier, ngAnimate has tweaked the JS animations API to recognize when a runner instance is returned from $animateCss
* (so there is no need to call `runner.done(doneFn)` inside of your JavaScript animation code).
* Check the {@link ngAnimate.$animateCss#usage animation code above} to see how this works.
*
* @param {DOMElement} element the element that will be animated
* @param {object} options the animation-related options that will be applied during the animation
*
* * `event` - The DOM event (e.g. enter, leave, move). When used, a generated CSS class of `ng-EVENT` and `ng-EVENT-active` will be applied
* to the element during the animation. Multiple events can be provided when spaces are used as a separator. (Note that this will not perform any DOM operation.)
* * `structural` - Indicates that the `ng-` prefix will be added to the event class. Setting to `false` or omitting will turn `ng-EVENT` and
* `ng-EVENT-active` in `EVENT` and `EVENT-active`. Unused if `event` is omitted.
* * `easing` - The CSS easing value that will be applied to the transition or keyframe animation (or both).
* * `transitionStyle` - The raw CSS transition style that will be used (e.g. `1s linear all`).
* * `keyframeStyle` - The raw CSS keyframe animation style that will be used (e.g. `1s my_animation linear`).
* * `from` - The starting CSS styles (a key/value object) that will be applied at the start of the animation.
* * `to` - The ending CSS styles (a key/value object) that will be applied across the animation via a CSS transition.
* * `addClass` - A space separated list of CSS classes that will be added to the element and spread across the animation.
* * `removeClass` - A space separated list of CSS classes that will be removed from the element and spread across the animation.
* * `duration` - A number value representing the total duration of the transition and/or keyframe (note that a value of 1 is 1000ms). If a value of `0`
* is provided then the animation will be skipped entirely.
* * `delay` - A number value representing the total delay of the transition and/or keyframe (note that a value of 1 is 1000ms). If a value of `true` is
* used then whatever delay value is detected from the CSS classes will be mirrored on the elements styles (e.g. by setting delay true then the style value
* of the element will be `transition-delay: DETECTED_VALUE`). Using `true` is useful when you want the CSS classes and inline styles to all share the same
* CSS delay value.
* * `stagger` - A numeric time value representing the delay between successively animated elements
* ({@link ngAnimate#css-staggering-animations Click here to learn how CSS-based staggering works in ngAnimate.})
* * `staggerIndex` - The numeric index representing the stagger item (e.g. a value of 5 is equal to the sixth item in the stagger; therefore when a
* `stagger` option value of `0.1` is used then there will be a stagger delay of `600ms`)
* * `applyClassesEarly` - Whether or not the classes being added or removed will be used when detecting the animation. This is set by `$animate` when enter/leave/move animations are fired to ensure that the CSS classes are resolved in time. (Note that this will prevent any transitions from occurring on the classes being added and removed.)
* * `cleanupStyles` - Whether or not the provided `from` and `to` styles will be removed once
* the animation is closed. This is useful for when the styles are used purely for the sake of
* the animation and do not have a lasting visual effect on the element (e.g. a collapse and open animation).
* By default this value is set to `false`.
*
* @return {object} an object with start and end methods and details about the animation.
*
* * `start` - The method to start the animation. This will return a `Promise` when called.
* * `end` - This method will cancel the animation and remove all applied CSS classes and styles.
*/
var ONE_SECOND = 1000;
var ELAPSED_TIME_MAX_DECIMAL_PLACES = 3;
var CLOSING_TIME_BUFFER = 1.5;
var DETECT_CSS_PROPERTIES = {
transitionDuration: TRANSITION_DURATION_PROP,
transitionDelay: TRANSITION_DELAY_PROP,
transitionProperty: TRANSITION_PROP + PROPERTY_KEY,
animationDuration: ANIMATION_DURATION_PROP,
animationDelay: ANIMATION_DELAY_PROP,
animationIterationCount: ANIMATION_PROP + ANIMATION_ITERATION_COUNT_KEY
};
var DETECT_STAGGER_CSS_PROPERTIES = {
transitionDuration: TRANSITION_DURATION_PROP,
transitionDelay: TRANSITION_DELAY_PROP,
animationDuration: ANIMATION_DURATION_PROP,
animationDelay: ANIMATION_DELAY_PROP
};
function getCssKeyframeDurationStyle(duration) {
return [ANIMATION_DURATION_PROP, duration + 's'];
}
function getCssDelayStyle(delay, isKeyframeAnimation) {
var prop = isKeyframeAnimation ? ANIMATION_DELAY_PROP : TRANSITION_DELAY_PROP;
return [prop, delay + 's'];
}
function computeCssStyles($window, element, properties) {
var styles = Object.create(null);
var detectedStyles = $window.getComputedStyle(element) || {};
forEach(properties, function(formalStyleName, actualStyleName) {
var val = detectedStyles[formalStyleName];
if (val) {
var c = val.charAt(0);
// only numerical-based values have a negative sign or digit as the first value
if (c === '-' || c === '+' || c >= 0) {
val = parseMaxTime(val);
}
// by setting this to null in the event that the delay is not set or is set directly as 0
// then we can still allow for negative values to be used later on and not mistake this
// value for being greater than any other negative value.
if (val === 0) {
val = null;
}
styles[actualStyleName] = val;
}
});
return styles;
}
function parseMaxTime(str) {
var maxValue = 0;
var values = str.split(/\s*,\s*/);
forEach(values, function(value) {
// it's always safe to consider only second values and omit `ms` values since
// getComputedStyle will always handle the conversion for us
if (value.charAt(value.length - 1) === 's') {
value = value.substring(0, value.length - 1);
}
value = parseFloat(value) || 0;
maxValue = maxValue ? Math.max(value, maxValue) : value;
});
return maxValue;
}
function truthyTimingValue(val) {
return val === 0 || val != null;
}
function getCssTransitionDurationStyle(duration, applyOnlyDuration) {
var style = TRANSITION_PROP;
var value = duration + 's';
if (applyOnlyDuration) {
style += DURATION_KEY;
} else {
value += ' linear all';
}
return [style, value];
}
function createLocalCacheLookup() {
var cache = Object.create(null);
return {
flush: function() {
cache = Object.create(null);
},
count: function(key) {
var entry = cache[key];
return entry ? entry.total : 0;
},
get: function(key) {
var entry = cache[key];
return entry && entry.value;
},
put: function(key, value) {
if (!cache[key]) {
cache[key] = { total: 1, value: value };
} else {
cache[key].total++;
}
}
};
}
// we do not reassign an already present style value since
// if we detect the style property value again we may be
// detecting styles that were added via the `from` styles.
// We make use of `isDefined` here since an empty string
// or null value (which is what getPropertyValue will return
// for a non-existing style) will still be marked as a valid
// value for the style (a falsy value implies that the style
// is to be removed at the end of the animation). If we had a simple
// "OR" statement then it would not be enough to catch that.
function registerRestorableStyles(backup, node, properties) {
forEach(properties, function(prop) {
backup[prop] = isDefined(backup[prop])
? backup[prop]
: node.style.getPropertyValue(prop);
});
}
var $AnimateCssProvider = ['$animateProvider', /** @this */ function($animateProvider) {
var gcsLookup = createLocalCacheLookup();
var gcsStaggerLookup = createLocalCacheLookup();
this.$get = ['$window', '$$jqLite', '$$AnimateRunner', '$timeout',
'$$forceReflow', '$sniffer', '$$rAFScheduler', '$$animateQueue',
function($window, $$jqLite, $$AnimateRunner, $timeout,
$$forceReflow, $sniffer, $$rAFScheduler, $$animateQueue) {
var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
var parentCounter = 0;
function gcsHashFn(node, extraClasses) {
var KEY = '$$ngAnimateParentKey';
var parentNode = node.parentNode;
var parentID = parentNode[KEY] || (parentNode[KEY] = ++parentCounter);
return parentID + '-' + node.getAttribute('class') + '-' + extraClasses;
}
function computeCachedCssStyles(node, className, cacheKey, properties) {
var timings = gcsLookup.get(cacheKey);
if (!timings) {
timings = computeCssStyles($window, node, properties);
if (timings.animationIterationCount === 'infinite') {
timings.animationIterationCount = 1;
}
}
// we keep putting this in multiple times even though the value and the cacheKey are the same
// because we're keeping an internal tally of how many duplicate animations are detected.
gcsLookup.put(cacheKey, timings);
return timings;
}
function computeCachedCssStaggerStyles(node, className, cacheKey, properties) {
var stagger;
// if we have one or more existing matches of matching elements
// containing the same parent + CSS styles (which is how cacheKey works)
// then staggering is possible
if (gcsLookup.count(cacheKey) > 0) {
stagger = gcsStaggerLookup.get(cacheKey);
if (!stagger) {
var staggerClassName = pendClasses(className, '-stagger');
$$jqLite.addClass(node, staggerClassName);
stagger = computeCssStyles($window, node, properties);
// force the conversion of a null value to zero incase not set
stagger.animationDuration = Math.max(stagger.animationDuration, 0);
stagger.transitionDuration = Math.max(stagger.transitionDuration, 0);
$$jqLite.removeClass(node, staggerClassName);
gcsStaggerLookup.put(cacheKey, stagger);
}
}
return stagger || {};
}
var rafWaitQueue = [];
function waitUntilQuiet(callback) {
rafWaitQueue.push(callback);
$$rAFScheduler.waitUntilQuiet(function() {
gcsLookup.flush();
gcsStaggerLookup.flush();
// DO NOT REMOVE THIS LINE OR REFACTOR OUT THE `pageWidth` variable.
// PLEASE EXAMINE THE `$$forceReflow` service to understand why.
var pageWidth = $$forceReflow();
// we use a for loop to ensure that if the queue is changed
// during this looping then it will consider new requests
for (var i = 0; i < rafWaitQueue.length; i++) {
rafWaitQueue[i](pageWidth);
}
rafWaitQueue.length = 0;
});
}
function computeTimings(node, className, cacheKey) {
var timings = computeCachedCssStyles(node, className, cacheKey, DETECT_CSS_PROPERTIES);
var aD = timings.animationDelay;
var tD = timings.transitionDelay;
timings.maxDelay = aD && tD
? Math.max(aD, tD)
: (aD || tD);
timings.maxDuration = Math.max(
timings.animationDuration * timings.animationIterationCount,
timings.transitionDuration);
return timings;
}
return function init(element, initialOptions) {
// all of the animation functions should create
// a copy of the options data, however, if a
// parent service has already created a copy then
// we should stick to using that
var options = initialOptions || {};
if (!options.$$prepared) {
options = prepareAnimationOptions(copy(options));
}
var restoreStyles = {};
var node = getDomNode(element);
if (!node
|| !node.parentNode
|| !$$animateQueue.enabled()) {
return closeAndReturnNoopAnimator();
}
var temporaryStyles = [];
var classes = element.attr('class');
var styles = packageStyles(options);
var animationClosed;
var animationPaused;
var animationCompleted;
var runner;
var runnerHost;
var maxDelay;
var maxDelayTime;
var maxDuration;
var maxDurationTime;
var startTime;
var events = [];
if (options.duration === 0 || (!$sniffer.animations && !$sniffer.transitions)) {
return closeAndReturnNoopAnimator();
}
var method = options.event && isArray(options.event)
? options.event.join(' ')
: options.event;
var isStructural = method && options.structural;
var structuralClassName = '';
var addRemoveClassName = '';
if (isStructural) {
structuralClassName = pendClasses(method, EVENT_CLASS_PREFIX, true);
} else if (method) {
structuralClassName = method;
}
if (options.addClass) {
addRemoveClassName += pendClasses(options.addClass, ADD_CLASS_SUFFIX);
}
if (options.removeClass) {
if (addRemoveClassName.length) {
addRemoveClassName += ' ';
}
addRemoveClassName += pendClasses(options.removeClass, REMOVE_CLASS_SUFFIX);
}
// there may be a situation where a structural animation is combined together
// with CSS classes that need to resolve before the animation is computed.
// However this means that there is no explicit CSS code to block the animation
// from happening (by setting 0s none in the class name). If this is the case
// we need to apply the classes before the first rAF so we know to continue if
// there actually is a detected transition or keyframe animation
if (options.applyClassesEarly && addRemoveClassName.length) {
applyAnimationClasses(element, options);
}
var preparationClasses = [structuralClassName, addRemoveClassName].join(' ').trim();
var fullClassName = classes + ' ' + preparationClasses;
var activeClasses = pendClasses(preparationClasses, ACTIVE_CLASS_SUFFIX);
var hasToStyles = styles.to && Object.keys(styles.to).length > 0;
var containsKeyframeAnimation = (options.keyframeStyle || '').length > 0;
// there is no way we can trigger an animation if no styles and
// no classes are being applied which would then trigger a transition,
// unless there a is raw keyframe value that is applied to the element.
if (!containsKeyframeAnimation
&& !hasToStyles
&& !preparationClasses) {
return closeAndReturnNoopAnimator();
}
var cacheKey, stagger;
if (options.stagger > 0) {
var staggerVal = parseFloat(options.stagger);
stagger = {
transitionDelay: staggerVal,
animationDelay: staggerVal,
transitionDuration: 0,
animationDuration: 0
};
} else {
cacheKey = gcsHashFn(node, fullClassName);
stagger = computeCachedCssStaggerStyles(node, preparationClasses, cacheKey, DETECT_STAGGER_CSS_PROPERTIES);
}
if (!options.$$skipPreparationClasses) {
$$jqLite.addClass(element, preparationClasses);
}
var applyOnlyDuration;
if (options.transitionStyle) {
var transitionStyle = [TRANSITION_PROP, options.transitionStyle];
applyInlineStyle(node, transitionStyle);
temporaryStyles.push(transitionStyle);
}
if (options.duration >= 0) {
applyOnlyDuration = node.style[TRANSITION_PROP].length > 0;
var durationStyle = getCssTransitionDurationStyle(options.duration, applyOnlyDuration);
// we set the duration so that it will be picked up by getComputedStyle later
applyInlineStyle(node, durationStyle);
temporaryStyles.push(durationStyle);
}
if (options.keyframeStyle) {
var keyframeStyle = [ANIMATION_PROP, options.keyframeStyle];
applyInlineStyle(node, keyframeStyle);
temporaryStyles.push(keyframeStyle);
}
var itemIndex = stagger
? options.staggerIndex >= 0
? options.staggerIndex
: gcsLookup.count(cacheKey)
: 0;
var isFirst = itemIndex === 0;
// this is a pre-emptive way of forcing the setup classes to be added and applied INSTANTLY
// without causing any combination of transitions to kick in. By adding a negative delay value
// it forces the setup class' transition to end immediately. We later then remove the negative
// transition delay to allow for the transition to naturally do it's thing. The beauty here is
// that if there is no transition defined then nothing will happen and this will also allow
// other transitions to be stacked on top of each other without any chopping them out.
if (isFirst && !options.skipBlocking) {
blockTransitions(node, SAFE_FAST_FORWARD_DURATION_VALUE);
}
var timings = computeTimings(node, fullClassName, cacheKey);
var relativeDelay = timings.maxDelay;
maxDelay = Math.max(relativeDelay, 0);
maxDuration = timings.maxDuration;
var flags = {};
flags.hasTransitions = timings.transitionDuration > 0;
flags.hasAnimations = timings.animationDuration > 0;
flags.hasTransitionAll = flags.hasTransitions && timings.transitionProperty === 'all';
flags.applyTransitionDuration = hasToStyles && (
(flags.hasTransitions && !flags.hasTransitionAll)
|| (flags.hasAnimations && !flags.hasTransitions));
flags.applyAnimationDuration = options.duration && flags.hasAnimations;
flags.applyTransitionDelay = truthyTimingValue(options.delay) && (flags.applyTransitionDuration || flags.hasTransitions);
flags.applyAnimationDelay = truthyTimingValue(options.delay) && flags.hasAnimations;
flags.recalculateTimingStyles = addRemoveClassName.length > 0;
if (flags.applyTransitionDuration || flags.applyAnimationDuration) {
maxDuration = options.duration ? parseFloat(options.duration) : maxDuration;
if (flags.applyTransitionDuration) {
flags.hasTransitions = true;
timings.transitionDuration = maxDuration;
applyOnlyDuration = node.style[TRANSITION_PROP + PROPERTY_KEY].length > 0;
temporaryStyles.push(getCssTransitionDurationStyle(maxDuration, applyOnlyDuration));
}
if (flags.applyAnimationDuration) {
flags.hasAnimations = true;
timings.animationDuration = maxDuration;
temporaryStyles.push(getCssKeyframeDurationStyle(maxDuration));
}
}
if (maxDuration === 0 && !flags.recalculateTimingStyles) {
return closeAndReturnNoopAnimator();
}
if (options.delay != null) {
var delayStyle;
if (typeof options.delay !== 'boolean') {
delayStyle = parseFloat(options.delay);
// number in options.delay means we have to recalculate the delay for the closing timeout
maxDelay = Math.max(delayStyle, 0);
}
if (flags.applyTransitionDelay) {
temporaryStyles.push(getCssDelayStyle(delayStyle));
}
if (flags.applyAnimationDelay) {
temporaryStyles.push(getCssDelayStyle(delayStyle, true));
}
}
// we need to recalculate the delay value since we used a pre-emptive negative
// delay value and the delay value is required for the final event checking. This
// property will ensure that this will happen after the RAF phase has passed.
if (options.duration == null && timings.transitionDuration > 0) {
flags.recalculateTimingStyles = flags.recalculateTimingStyles || isFirst;
}
maxDelayTime = maxDelay * ONE_SECOND;
maxDurationTime = maxDuration * ONE_SECOND;
if (!options.skipBlocking) {
flags.blockTransition = timings.transitionDuration > 0;
flags.blockKeyframeAnimation = timings.animationDuration > 0 &&
stagger.animationDelay > 0 &&
stagger.animationDuration === 0;
}
if (options.from) {
if (options.cleanupStyles) {
registerRestorableStyles(restoreStyles, node, Object.keys(options.from));
}
applyAnimationFromStyles(element, options);
}
if (flags.blockTransition || flags.blockKeyframeAnimation) {
applyBlocking(maxDuration);
} else if (!options.skipBlocking) {
blockTransitions(node, false);
}
// TODO(matsko): for 1.5 change this code to have an animator object for better debugging
return {
$$willAnimate: true,
end: endFn,
start: function() {
if (animationClosed) return;
runnerHost = {
end: endFn,
cancel: cancelFn,
resume: null, //this will be set during the start() phase
pause: null
};
runner = new $$AnimateRunner(runnerHost);
waitUntilQuiet(start);
// we don't have access to pause/resume the animation
// since it hasn't run yet. AnimateRunner will therefore
// set noop functions for resume and pause and they will
// later be overridden once the animation is triggered
return runner;
}
};
function endFn() {
close();
}
function cancelFn() {
close(true);
}
function close(rejected) {
// if the promise has been called already then we shouldn't close
// the animation again
if (animationClosed || (animationCompleted && animationPaused)) return;
animationClosed = true;
animationPaused = false;
if (!options.$$skipPreparationClasses) {
$$jqLite.removeClass(element, preparationClasses);
}
$$jqLite.removeClass(element, activeClasses);
blockKeyframeAnimations(node, false);
blockTransitions(node, false);
forEach(temporaryStyles, function(entry) {
// There is only one way to remove inline style properties entirely from elements.
// By using `removeProperty` this works, but we need to convert camel-cased CSS
// styles down to hyphenated values.
node.style[entry[0]] = '';
});
applyAnimationClasses(element, options);
applyAnimationStyles(element, options);
if (Object.keys(restoreStyles).length) {
forEach(restoreStyles, function(value, prop) {
if (value) {
node.style.setProperty(prop, value);
} else {
node.style.removeProperty(prop);
}
});
}
// the reason why we have this option is to allow a synchronous closing callback
// that is fired as SOON as the animation ends (when the CSS is removed) or if
// the animation never takes off at all. A good example is a leave animation since
// the element must be removed just after the animation is over or else the element
// will appear on screen for one animation frame causing an overbearing flicker.
if (options.onDone) {
options.onDone();
}
if (events && events.length) {
// Remove the transitionend / animationend listener(s)
element.off(events.join(' '), onAnimationProgress);
}
//Cancel the fallback closing timeout and remove the timer data
var animationTimerData = element.data(ANIMATE_TIMER_KEY);
if (animationTimerData) {
$timeout.cancel(animationTimerData[0].timer);
element.removeData(ANIMATE_TIMER_KEY);
}
// if the preparation function fails then the promise is not setup
if (runner) {
runner.complete(!rejected);
}
}
function applyBlocking(duration) {
if (flags.blockTransition) {
blockTransitions(node, duration);
}
if (flags.blockKeyframeAnimation) {
blockKeyframeAnimations(node, !!duration);
}
}
function closeAndReturnNoopAnimator() {
runner = new $$AnimateRunner({
end: endFn,
cancel: cancelFn
});
// should flush the cache animation
waitUntilQuiet(noop);
close();
return {
$$willAnimate: false,
start: function() {
return runner;
},
end: endFn
};
}
function onAnimationProgress(event) {
event.stopPropagation();
var ev = event.originalEvent || event;
if (ev.target !== node) {
// Since TransitionEvent / AnimationEvent bubble up,
// we have to ignore events by finished child animations
return;
}
// we now always use `Date.now()` due to the recent changes with
// event.timeStamp in Firefox, Webkit and Chrome (see #13494 for more info)
var timeStamp = ev.$manualTimeStamp || Date.now();
/* Firefox (or possibly just Gecko) likes to not round values up
* when a ms measurement is used for the animation */
var elapsedTime = parseFloat(ev.elapsedTime.toFixed(ELAPSED_TIME_MAX_DECIMAL_PLACES));
/* $manualTimeStamp is a mocked timeStamp value which is set
* within browserTrigger(). This is only here so that tests can
* mock animations properly. Real events fallback to event.timeStamp,
* or, if they don't, then a timeStamp is automatically created for them.
* We're checking to see if the timeStamp surpasses the expected delay,
* but we're using elapsedTime instead of the timeStamp on the 2nd
* pre-condition since animationPauseds sometimes close off early */
if (Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) {
// we set this flag to ensure that if the transition is paused then, when resumed,
// the animation will automatically close itself since transitions cannot be paused.
animationCompleted = true;
close();
}
}
function start() {
if (animationClosed) return;
if (!node.parentNode) {
close();
return;
}
// even though we only pause keyframe animations here the pause flag
// will still happen when transitions are used. Only the transition will
// not be paused since that is not possible. If the animation ends when
// paused then it will not complete until unpaused or cancelled.
var playPause = function(playAnimation) {
if (!animationCompleted) {
animationPaused = !playAnimation;
if (timings.animationDuration) {
var value = blockKeyframeAnimations(node, animationPaused);
if (animationPaused) {
temporaryStyles.push(value);
} else {
removeFromArray(temporaryStyles, value);
}
}
} else if (animationPaused && playAnimation) {
animationPaused = false;
close();
}
};
// checking the stagger duration prevents an accidentally cascade of the CSS delay style
// being inherited from the parent. If the transition duration is zero then we can safely
// rely that the delay value is an intentional stagger delay style.
var maxStagger = itemIndex > 0
&& ((timings.transitionDuration && stagger.transitionDuration === 0) ||
(timings.animationDuration && stagger.animationDuration === 0))
&& Math.max(stagger.animationDelay, stagger.transitionDelay);
if (maxStagger) {
$timeout(triggerAnimationStart,
Math.floor(maxStagger * itemIndex * ONE_SECOND),
false);
} else {
triggerAnimationStart();
}
// this will decorate the existing promise runner with pause/resume methods
runnerHost.resume = function() {
playPause(true);
};
runnerHost.pause = function() {
playPause(false);
};
function triggerAnimationStart() {
// just incase a stagger animation kicks in when the animation
// itself was cancelled entirely
if (animationClosed) return;
applyBlocking(false);
forEach(temporaryStyles, function(entry) {
var key = entry[0];
var value = entry[1];
node.style[key] = value;
});
applyAnimationClasses(element, options);
$$jqLite.addClass(element, activeClasses);
if (flags.recalculateTimingStyles) {
fullClassName = node.getAttribute('class') + ' ' + preparationClasses;
cacheKey = gcsHashFn(node, fullClassName);
timings = computeTimings(node, fullClassName, cacheKey);
relativeDelay = timings.maxDelay;
maxDelay = Math.max(relativeDelay, 0);
maxDuration = timings.maxDuration;
if (maxDuration === 0) {
close();
return;
}
flags.hasTransitions = timings.transitionDuration > 0;
flags.hasAnimations = timings.animationDuration > 0;
}
if (flags.applyAnimationDelay) {
relativeDelay = typeof options.delay !== 'boolean' && truthyTimingValue(options.delay)
? parseFloat(options.delay)
: relativeDelay;
maxDelay = Math.max(relativeDelay, 0);
timings.animationDelay = relativeDelay;
delayStyle = getCssDelayStyle(relativeDelay, true);
temporaryStyles.push(delayStyle);
node.style[delayStyle[0]] = delayStyle[1];
}
maxDelayTime = maxDelay * ONE_SECOND;
maxDurationTime = maxDuration * ONE_SECOND;
if (options.easing) {
var easeProp, easeVal = options.easing;
if (flags.hasTransitions) {
easeProp = TRANSITION_PROP + TIMING_KEY;
temporaryStyles.push([easeProp, easeVal]);
node.style[easeProp] = easeVal;
}
if (flags.hasAnimations) {
easeProp = ANIMATION_PROP + TIMING_KEY;
temporaryStyles.push([easeProp, easeVal]);
node.style[easeProp] = easeVal;
}
}
if (timings.transitionDuration) {
events.push(TRANSITIONEND_EVENT);
}
if (timings.animationDuration) {
events.push(ANIMATIONEND_EVENT);
}
startTime = Date.now();
var timerTime = maxDelayTime + CLOSING_TIME_BUFFER * maxDurationTime;
var endTime = startTime + timerTime;
var animationsData = element.data(ANIMATE_TIMER_KEY) || [];
var setupFallbackTimer = true;
if (animationsData.length) {
var currentTimerData = animationsData[0];
setupFallbackTimer = endTime > currentTimerData.expectedEndTime;
if (setupFallbackTimer) {
$timeout.cancel(currentTimerData.timer);
} else {
animationsData.push(close);
}
}
if (setupFallbackTimer) {
var timer = $timeout(onAnimationExpired, timerTime, false);
animationsData[0] = {
timer: timer,
expectedEndTime: endTime
};
animationsData.push(close);
element.data(ANIMATE_TIMER_KEY, animationsData);
}
if (events.length) {
element.on(events.join(' '), onAnimationProgress);
}
if (options.to) {
if (options.cleanupStyles) {
registerRestorableStyles(restoreStyles, node, Object.keys(options.to));
}
applyAnimationToStyles(element, options);
}
}
function onAnimationExpired() {
var animationsData = element.data(ANIMATE_TIMER_KEY);
// this will be false in the event that the element was
// removed from the DOM (via a leave animation or something
// similar)
if (animationsData) {
for (var i = 1; i < animationsData.length; i++) {
animationsData[i]();
}
element.removeData(ANIMATE_TIMER_KEY);
}
}
}
};
}];
}];
var $$AnimateCssDriverProvider = ['$$animationProvider', /** @this */ function($$animationProvider) {
$$animationProvider.drivers.push('$$animateCssDriver');
var NG_ANIMATE_SHIM_CLASS_NAME = 'ng-animate-shim';
var NG_ANIMATE_ANCHOR_CLASS_NAME = 'ng-anchor';
var NG_OUT_ANCHOR_CLASS_NAME = 'ng-anchor-out';
var NG_IN_ANCHOR_CLASS_NAME = 'ng-anchor-in';
function isDocumentFragment(node) {
return node.parentNode && node.parentNode.nodeType === 11;
}
this.$get = ['$animateCss', '$rootScope', '$$AnimateRunner', '$rootElement', '$sniffer', '$$jqLite', '$document',
function($animateCss, $rootScope, $$AnimateRunner, $rootElement, $sniffer, $$jqLite, $document) {
// only browsers that support these properties can render animations
if (!$sniffer.animations && !$sniffer.transitions) return noop;
var bodyNode = $document[0].body;
var rootNode = getDomNode($rootElement);
var rootBodyElement = jqLite(
// this is to avoid using something that exists outside of the body
// we also special case the doc fragment case because our unit test code
// appends the $rootElement to the body after the app has been bootstrapped
isDocumentFragment(rootNode) || bodyNode.contains(rootNode) ? rootNode : bodyNode
);
return function initDriverFn(animationDetails) {
return animationDetails.from && animationDetails.to
? prepareFromToAnchorAnimation(animationDetails.from,
animationDetails.to,
animationDetails.classes,
animationDetails.anchors)
: prepareRegularAnimation(animationDetails);
};
function filterCssClasses(classes) {
//remove all the `ng-` stuff
return classes.replace(/\bng-\S+\b/g, '');
}
function getUniqueValues(a, b) {
if (isString(a)) a = a.split(' ');
if (isString(b)) b = b.split(' ');
return a.filter(function(val) {
return b.indexOf(val) === -1;
}).join(' ');
}
function prepareAnchoredAnimation(classes, outAnchor, inAnchor) {
var clone = jqLite(getDomNode(outAnchor).cloneNode(true));
var startingClasses = filterCssClasses(getClassVal(clone));
outAnchor.addClass(NG_ANIMATE_SHIM_CLASS_NAME);
inAnchor.addClass(NG_ANIMATE_SHIM_CLASS_NAME);
clone.addClass(NG_ANIMATE_ANCHOR_CLASS_NAME);
rootBodyElement.append(clone);
var animatorIn, animatorOut = prepareOutAnimation();
// the user may not end up using the `out` animation and
// only making use of the `in` animation or vice-versa.
// In either case we should allow this and not assume the
// animation is over unless both animations are not used.
if (!animatorOut) {
animatorIn = prepareInAnimation();
if (!animatorIn) {
return end();
}
}
var startingAnimator = animatorOut || animatorIn;
return {
start: function() {
var runner;
var currentAnimation = startingAnimator.start();
currentAnimation.done(function() {
currentAnimation = null;
if (!animatorIn) {
animatorIn = prepareInAnimation();
if (animatorIn) {
currentAnimation = animatorIn.start();
currentAnimation.done(function() {
currentAnimation = null;
end();
runner.complete();
});
return currentAnimation;
}
}
// in the event that there is no `in` animation
end();
runner.complete();
});
runner = new $$AnimateRunner({
end: endFn,
cancel: endFn
});
return runner;
function endFn() {
if (currentAnimation) {
currentAnimation.end();
}
}
}
};
function calculateAnchorStyles(anchor) {
var styles = {};
var coords = getDomNode(anchor).getBoundingClientRect();
// we iterate directly since safari messes up and doesn't return
// all the keys for the coords object when iterated
forEach(['width','height','top','left'], function(key) {
var value = coords[key];
switch (key) {
case 'top':
value += bodyNode.scrollTop;
break;
case 'left':
value += bodyNode.scrollLeft;
break;
}
styles[key] = Math.floor(value) + 'px';
});
return styles;
}
function prepareOutAnimation() {
var animator = $animateCss(clone, {
addClass: NG_OUT_ANCHOR_CLASS_NAME,
delay: true,
from: calculateAnchorStyles(outAnchor)
});
// read the comment within `prepareRegularAnimation` to understand
// why this check is necessary
return animator.$$willAnimate ? animator : null;
}
function getClassVal(element) {
return element.attr('class') || '';
}
function prepareInAnimation() {
var endingClasses = filterCssClasses(getClassVal(inAnchor));
var toAdd = getUniqueValues(endingClasses, startingClasses);
var toRemove = getUniqueValues(startingClasses, endingClasses);
var animator = $animateCss(clone, {
to: calculateAnchorStyles(inAnchor),
addClass: NG_IN_ANCHOR_CLASS_NAME + ' ' + toAdd,
removeClass: NG_OUT_ANCHOR_CLASS_NAME + ' ' + toRemove,
delay: true
});
// read the comment within `prepareRegularAnimation` to understand
// why this check is necessary
return animator.$$willAnimate ? animator : null;
}
function end() {
clone.remove();
outAnchor.removeClass(NG_ANIMATE_SHIM_CLASS_NAME);
inAnchor.removeClass(NG_ANIMATE_SHIM_CLASS_NAME);
}
}
function prepareFromToAnchorAnimation(from, to, classes, anchors) {
var fromAnimation = prepareRegularAnimation(from, noop);
var toAnimation = prepareRegularAnimation(to, noop);
var anchorAnimations = [];
forEach(anchors, function(anchor) {
var outElement = anchor['out'];
var inElement = anchor['in'];
var animator = prepareAnchoredAnimation(classes, outElement, inElement);
if (animator) {
anchorAnimations.push(animator);
}
});
// no point in doing anything when there are no elements to animate
if (!fromAnimation && !toAnimation && anchorAnimations.length === 0) return;
return {
start: function() {
var animationRunners = [];
if (fromAnimation) {
animationRunners.push(fromAnimation.start());
}
if (toAnimation) {
animationRunners.push(toAnimation.start());
}
forEach(anchorAnimations, function(animation) {
animationRunners.push(animation.start());
});
var runner = new $$AnimateRunner({
end: endFn,
cancel: endFn // CSS-driven animations cannot be cancelled, only ended
});
$$AnimateRunner.all(animationRunners, function(status) {
runner.complete(status);
});
return runner;
function endFn() {
forEach(animationRunners, function(runner) {
runner.end();
});
}
}
};
}
function prepareRegularAnimation(animationDetails) {
var element = animationDetails.element;
var options = animationDetails.options || {};
if (animationDetails.structural) {
options.event = animationDetails.event;
options.structural = true;
options.applyClassesEarly = true;
// we special case the leave animation since we want to ensure that
// the element is removed as soon as the animation is over. Otherwise
// a flicker might appear or the element may not be removed at all
if (animationDetails.event === 'leave') {
options.onDone = options.domOperation;
}
}
// We assign the preparationClasses as the actual animation event since
// the internals of $animateCss will just suffix the event token values
// with `-active` to trigger the animation.
if (options.preparationClasses) {
options.event = concatWithSpace(options.event, options.preparationClasses);
}
var animator = $animateCss(element, options);
// the driver lookup code inside of $$animation attempts to spawn a
// driver one by one until a driver returns a.$$willAnimate animator object.
// $animateCss will always return an object, however, it will pass in
// a flag as a hint as to whether an animation was detected or not
return animator.$$willAnimate ? animator : null;
}
}];
}];
// TODO(matsko): use caching here to speed things up for detection
// TODO(matsko): add documentation
// by the time...
var $$AnimateJsProvider = ['$animateProvider', /** @this */ function($animateProvider) {
this.$get = ['$injector', '$$AnimateRunner', '$$jqLite',
function($injector, $$AnimateRunner, $$jqLite) {
var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
// $animateJs(element, 'enter');
return function(element, event, classes, options) {
var animationClosed = false;
// the `classes` argument is optional and if it is not used
// then the classes will be resolved from the element's className
// property as well as options.addClass/options.removeClass.
if (arguments.length === 3 && isObject(classes)) {
options = classes;
classes = null;
}
options = prepareAnimationOptions(options);
if (!classes) {
classes = element.attr('class') || '';
if (options.addClass) {
classes += ' ' + options.addClass;
}
if (options.removeClass) {
classes += ' ' + options.removeClass;
}
}
var classesToAdd = options.addClass;
var classesToRemove = options.removeClass;
// the lookupAnimations function returns a series of animation objects that are
// matched up with one or more of the CSS classes. These animation objects are
// defined via the module.animation factory function. If nothing is detected then
// we don't return anything which then makes $animation query the next driver.
var animations = lookupAnimations(classes);
var before, after;
if (animations.length) {
var afterFn, beforeFn;
if (event === 'leave') {
beforeFn = 'leave';
afterFn = 'afterLeave'; // TODO(matsko): get rid of this
} else {
beforeFn = 'before' + event.charAt(0).toUpperCase() + event.substr(1);
afterFn = event;
}
if (event !== 'enter' && event !== 'move') {
before = packageAnimations(element, event, options, animations, beforeFn);
}
after = packageAnimations(element, event, options, animations, afterFn);
}
// no matching animations
if (!before && !after) return;
function applyOptions() {
options.domOperation();
applyAnimationClasses(element, options);
}
function close() {
animationClosed = true;
applyOptions();
applyAnimationStyles(element, options);
}
var runner;
return {
$$willAnimate: true,
end: function() {
if (runner) {
runner.end();
} else {
close();
runner = new $$AnimateRunner();
runner.complete(true);
}
return runner;
},
start: function() {
if (runner) {
return runner;
}
runner = new $$AnimateRunner();
var closeActiveAnimations;
var chain = [];
if (before) {
chain.push(function(fn) {
closeActiveAnimations = before(fn);
});
}
if (chain.length) {
chain.push(function(fn) {
applyOptions();
fn(true);
});
} else {
applyOptions();
}
if (after) {
chain.push(function(fn) {
closeActiveAnimations = after(fn);
});
}
runner.setHost({
end: function() {
endAnimations();
},
cancel: function() {
endAnimations(true);
}
});
$$AnimateRunner.chain(chain, onComplete);
return runner;
function onComplete(success) {
close(success);
runner.complete(success);
}
function endAnimations(cancelled) {
if (!animationClosed) {
(closeActiveAnimations || noop)(cancelled);
onComplete(cancelled);
}
}
}
};
function executeAnimationFn(fn, element, event, options, onDone) {
var args;
switch (event) {
case 'animate':
args = [element, options.from, options.to, onDone];
break;
case 'setClass':
args = [element, classesToAdd, classesToRemove, onDone];
break;
case 'addClass':
args = [element, classesToAdd, onDone];
break;
case 'removeClass':
args = [element, classesToRemove, onDone];
break;
default:
args = [element, onDone];
break;
}
args.push(options);
var value = fn.apply(fn, args);
if (value) {
if (isFunction(value.start)) {
value = value.start();
}
if (value instanceof $$AnimateRunner) {
value.done(onDone);
} else if (isFunction(value)) {
// optional onEnd / onCancel callback
return value;
}
}
return noop;
}
function groupEventedAnimations(element, event, options, animations, fnName) {
var operations = [];
forEach(animations, function(ani) {
var animation = ani[fnName];
if (!animation) return;
// note that all of these animations will run in parallel
operations.push(function() {
var runner;
var endProgressCb;
var resolved = false;
var onAnimationComplete = function(rejected) {
if (!resolved) {
resolved = true;
(endProgressCb || noop)(rejected);
runner.complete(!rejected);
}
};
runner = new $$AnimateRunner({
end: function() {
onAnimationComplete();
},
cancel: function() {
onAnimationComplete(true);
}
});
endProgressCb = executeAnimationFn(animation, element, event, options, function(result) {
var cancelled = result === false;
onAnimationComplete(cancelled);
});
return runner;
});
});
return operations;
}
function packageAnimations(element, event, options, animations, fnName) {
var operations = groupEventedAnimations(element, event, options, animations, fnName);
if (operations.length === 0) {
var a, b;
if (fnName === 'beforeSetClass') {
a = groupEventedAnimations(element, 'removeClass', options, animations, 'beforeRemoveClass');
b = groupEventedAnimations(element, 'addClass', options, animations, 'beforeAddClass');
} else if (fnName === 'setClass') {
a = groupEventedAnimations(element, 'removeClass', options, animations, 'removeClass');
b = groupEventedAnimations(element, 'addClass', options, animations, 'addClass');
}
if (a) {
operations = operations.concat(a);
}
if (b) {
operations = operations.concat(b);
}
}
if (operations.length === 0) return;
// TODO(matsko): add documentation
return function startAnimation(callback) {
var runners = [];
if (operations.length) {
forEach(operations, function(animateFn) {
runners.push(animateFn());
});
}
if (runners.length) {
$$AnimateRunner.all(runners, callback);
} else {
callback();
}
return function endFn(reject) {
forEach(runners, function(runner) {
if (reject) {
runner.cancel();
} else {
runner.end();
}
});
};
};
}
};
function lookupAnimations(classes) {
classes = isArray(classes) ? classes : classes.split(' ');
var matches = [], flagMap = {};
for (var i = 0; i < classes.length; i++) {
var klass = classes[i],
animationFactory = $animateProvider.$$registeredAnimations[klass];
if (animationFactory && !flagMap[klass]) {
matches.push($injector.get(animationFactory));
flagMap[klass] = true;
}
}
return matches;
}
}];
}];
var $$AnimateJsDriverProvider = ['$$animationProvider', /** @this */ function($$animationProvider) {
$$animationProvider.drivers.push('$$animateJsDriver');
this.$get = ['$$animateJs', '$$AnimateRunner', function($$animateJs, $$AnimateRunner) {
return function initDriverFn(animationDetails) {
if (animationDetails.from && animationDetails.to) {
var fromAnimation = prepareAnimation(animationDetails.from);
var toAnimation = prepareAnimation(animationDetails.to);
if (!fromAnimation && !toAnimation) return;
return {
start: function() {
var animationRunners = [];
if (fromAnimation) {
animationRunners.push(fromAnimation.start());
}
if (toAnimation) {
animationRunners.push(toAnimation.start());
}
$$AnimateRunner.all(animationRunners, done);
var runner = new $$AnimateRunner({
end: endFnFactory(),
cancel: endFnFactory()
});
return runner;
function endFnFactory() {
return function() {
forEach(animationRunners, function(runner) {
// at this point we cannot cancel animations for groups just yet. 1.5+
runner.end();
});
};
}
function done(status) {
runner.complete(status);
}
}
};
} else {
return prepareAnimation(animationDetails);
}
};
function prepareAnimation(animationDetails) {
// TODO(matsko): make sure to check for grouped animations and delegate down to normal animations
var element = animationDetails.element;
var event = animationDetails.event;
var options = animationDetails.options;
var classes = animationDetails.classes;
return $$animateJs(element, event, classes, options);
}
}];
}];
var NG_ANIMATE_ATTR_NAME = 'data-ng-animate';
var NG_ANIMATE_PIN_DATA = '$ngAnimatePin';
var $$AnimateQueueProvider = ['$animateProvider', /** @this */ function($animateProvider) {
var PRE_DIGEST_STATE = 1;
var RUNNING_STATE = 2;
var ONE_SPACE = ' ';
var rules = this.rules = {
skip: [],
cancel: [],
join: []
};
function makeTruthyCssClassMap(classString) {
if (!classString) {
return null;
}
var keys = classString.split(ONE_SPACE);
var map = Object.create(null);
forEach(keys, function(key) {
map[key] = true;
});
return map;
}
function hasMatchingClasses(newClassString, currentClassString) {
if (newClassString && currentClassString) {
var currentClassMap = makeTruthyCssClassMap(currentClassString);
return newClassString.split(ONE_SPACE).some(function(className) {
return currentClassMap[className];
});
}
}
function isAllowed(ruleType, currentAnimation, previousAnimation) {
return rules[ruleType].some(function(fn) {
return fn(currentAnimation, previousAnimation);
});
}
function hasAnimationClasses(animation, and) {
var a = (animation.addClass || '').length > 0;
var b = (animation.removeClass || '').length > 0;
return and ? a && b : a || b;
}
rules.join.push(function(newAnimation, currentAnimation) {
// if the new animation is class-based then we can just tack that on
return !newAnimation.structural && hasAnimationClasses(newAnimation);
});
rules.skip.push(function(newAnimation, currentAnimation) {
// there is no need to animate anything if no classes are being added and
// there is no structural animation that will be triggered
return !newAnimation.structural && !hasAnimationClasses(newAnimation);
});
rules.skip.push(function(newAnimation, currentAnimation) {
// why should we trigger a new structural animation if the element will
// be removed from the DOM anyway?
return currentAnimation.event === 'leave' && newAnimation.structural;
});
rules.skip.push(function(newAnimation, currentAnimation) {
// if there is an ongoing current animation then don't even bother running the class-based animation
return currentAnimation.structural && currentAnimation.state === RUNNING_STATE && !newAnimation.structural;
});
rules.cancel.push(function(newAnimation, currentAnimation) {
// there can never be two structural animations running at the same time
return currentAnimation.structural && newAnimation.structural;
});
rules.cancel.push(function(newAnimation, currentAnimation) {
// if the previous animation is already running, but the new animation will
// be triggered, but the new animation is structural
return currentAnimation.state === RUNNING_STATE && newAnimation.structural;
});
rules.cancel.push(function(newAnimation, currentAnimation) {
// cancel the animation if classes added / removed in both animation cancel each other out,
// but only if the current animation isn't structural
if (currentAnimation.structural) return false;
var nA = newAnimation.addClass;
var nR = newAnimation.removeClass;
var cA = currentAnimation.addClass;
var cR = currentAnimation.removeClass;
// early detection to save the global CPU shortage :)
if ((isUndefined(nA) && isUndefined(nR)) || (isUndefined(cA) && isUndefined(cR))) {
return false;
}
return hasMatchingClasses(nA, cR) || hasMatchingClasses(nR, cA);
});
this.$get = ['$$rAF', '$rootScope', '$rootElement', '$document', '$$Map',
'$$animation', '$$AnimateRunner', '$templateRequest', '$$jqLite', '$$forceReflow',
'$$isDocumentHidden',
function($$rAF, $rootScope, $rootElement, $document, $$Map,
$$animation, $$AnimateRunner, $templateRequest, $$jqLite, $$forceReflow,
$$isDocumentHidden) {
var activeAnimationsLookup = new $$Map();
var disabledElementsLookup = new $$Map();
var animationsEnabled = null;
function postDigestTaskFactory() {
var postDigestCalled = false;
return function(fn) {
// we only issue a call to postDigest before
// it has first passed. This prevents any callbacks
// from not firing once the animation has completed
// since it will be out of the digest cycle.
if (postDigestCalled) {
fn();
} else {
$rootScope.$$postDigest(function() {
postDigestCalled = true;
fn();
});
}
};
}
// Wait until all directive and route-related templates are downloaded and
// compiled. The $templateRequest.totalPendingRequests variable keeps track of
// all of the remote templates being currently downloaded. If there are no
// templates currently downloading then the watcher will still fire anyway.
var deregisterWatch = $rootScope.$watch(
function() { return $templateRequest.totalPendingRequests === 0; },
function(isEmpty) {
if (!isEmpty) return;
deregisterWatch();
// Now that all templates have been downloaded, $animate will wait until
// the post digest queue is empty before enabling animations. By having two
// calls to $postDigest calls we can ensure that the flag is enabled at the
// very end of the post digest queue. Since all of the animations in $animate
// use $postDigest, it's important that the code below executes at the end.
// This basically means that the page is fully downloaded and compiled before
// any animations are triggered.
$rootScope.$$postDigest(function() {
$rootScope.$$postDigest(function() {
// we check for null directly in the event that the application already called
// .enabled() with whatever arguments that it provided it with
if (animationsEnabled === null) {
animationsEnabled = true;
}
});
});
}
);
var callbackRegistry = Object.create(null);
// remember that the `customFilter`/`classNameFilter` are set during the
// provider/config stage therefore we can optimize here and setup helper functions
var customFilter = $animateProvider.customFilter();
var classNameFilter = $animateProvider.classNameFilter();
var returnTrue = function() { return true; };
var isAnimatableByFilter = customFilter || returnTrue;
var isAnimatableClassName = !classNameFilter ? returnTrue : function(node, options) {
var className = [node.getAttribute('class'), options.addClass, options.removeClass].join(' ');
return classNameFilter.test(className);
};
var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
function normalizeAnimationDetails(element, animation) {
return mergeAnimationDetails(element, animation, {});
}
// IE9-11 has no method "contains" in SVG element and in Node.prototype. Bug #10259.
var contains = window.Node.prototype.contains || /** @this */ function(arg) {
// eslint-disable-next-line no-bitwise
return this === arg || !!(this.compareDocumentPosition(arg) & 16);
};
function findCallbacks(targetParentNode, targetNode, event) {
var matches = [];
var entries = callbackRegistry[event];
if (entries) {
forEach(entries, function(entry) {
if (contains.call(entry.node, targetNode)) {
matches.push(entry.callback);
} else if (event === 'leave' && contains.call(entry.node, targetParentNode)) {
matches.push(entry.callback);
}
});
}
return matches;
}
function filterFromRegistry(list, matchContainer, matchCallback) {
var containerNode = extractElementNode(matchContainer);
return list.filter(function(entry) {
var isMatch = entry.node === containerNode &&
(!matchCallback || entry.callback === matchCallback);
return !isMatch;
});
}
function cleanupEventListeners(phase, node) {
if (phase === 'close' && !node.parentNode) {
// If the element is not attached to a parentNode, it has been removed by
// the domOperation, and we can safely remove the event callbacks
$animate.off(node);
}
}
var $animate = {
on: function(event, container, callback) {
var node = extractElementNode(container);
callbackRegistry[event] = callbackRegistry[event] || [];
callbackRegistry[event].push({
node: node,
callback: callback
});
// Remove the callback when the element is removed from the DOM
jqLite(container).on('$destroy', function() {
var animationDetails = activeAnimationsLookup.get(node);
if (!animationDetails) {
// If there's an animation ongoing, the callback calling code will remove
// the event listeners. If we'd remove here, the callbacks would be removed
// before the animation ends
$animate.off(event, container, callback);
}
});
},
off: function(event, container, callback) {
if (arguments.length === 1 && !isString(arguments[0])) {
container = arguments[0];
for (var eventType in callbackRegistry) {
callbackRegistry[eventType] = filterFromRegistry(callbackRegistry[eventType], container);
}
return;
}
var entries = callbackRegistry[event];
if (!entries) return;
callbackRegistry[event] = arguments.length === 1
? null
: filterFromRegistry(entries, container, callback);
},
pin: function(element, parentElement) {
assertArg(isElement(element), 'element', 'not an element');
assertArg(isElement(parentElement), 'parentElement', 'not an element');
element.data(NG_ANIMATE_PIN_DATA, parentElement);
},
push: function(element, event, options, domOperation) {
options = options || {};
options.domOperation = domOperation;
return queueAnimation(element, event, options);
},
// this method has four signatures:
// () - global getter
// (bool) - global setter
// (element) - element getter
// (element, bool) - element setter<F37>
enabled: function(element, bool) {
var argCount = arguments.length;
if (argCount === 0) {
// () - Global getter
bool = !!animationsEnabled;
} else {
var hasElement = isElement(element);
if (!hasElement) {
// (bool) - Global setter
bool = animationsEnabled = !!element;
} else {
var node = getDomNode(element);
if (argCount === 1) {
// (element) - Element getter
bool = !disabledElementsLookup.get(node);
} else {
// (element, bool) - Element setter
disabledElementsLookup.set(node, !bool);
}
}
}
return bool;
}
};
return $animate;
function queueAnimation(originalElement, event, initialOptions) {
// we always make a copy of the options since
// there should never be any side effects on
// the input data when running `$animateCss`.
var options = copy(initialOptions);
var element = stripCommentsFromElement(originalElement);
var node = getDomNode(element);
var parentNode = node && node.parentNode;
options = prepareAnimationOptions(options);
// we create a fake runner with a working promise.
// These methods will become available after the digest has passed
var runner = new $$AnimateRunner();
// this is used to trigger callbacks in postDigest mode
var runInNextPostDigestOrNow = postDigestTaskFactory();
if (isArray(options.addClass)) {
options.addClass = options.addClass.join(' ');
}
if (options.addClass && !isString(options.addClass)) {
options.addClass = null;
}
if (isArray(options.removeClass)) {
options.removeClass = options.removeClass.join(' ');
}
if (options.removeClass && !isString(options.removeClass)) {
options.removeClass = null;
}
if (options.from && !isObject(options.from)) {
options.from = null;
}
if (options.to && !isObject(options.to)) {
options.to = null;
}
// If animations are hard-disabled for the whole application there is no need to continue.
// There are also situations where a directive issues an animation for a jqLite wrapper that
// contains only comment nodes. In this case, there is no way we can perform an animation.
if (!animationsEnabled ||
!node ||
!isAnimatableByFilter(node, event, initialOptions) ||
!isAnimatableClassName(node, options)) {
close();
return runner;
}
var isStructural = ['enter', 'move', 'leave'].indexOf(event) >= 0;
var documentHidden = $$isDocumentHidden();
// This is a hard disable of all animations the element itself, therefore there is no need to
// continue further past this point if not enabled
// Animations are also disabled if the document is currently hidden (page is not visible
// to the user), because browsers slow down or do not flush calls to requestAnimationFrame
var skipAnimations = documentHidden || disabledElementsLookup.get(node);
var existingAnimation = (!skipAnimations && activeAnimationsLookup.get(node)) || {};
var hasExistingAnimation = !!existingAnimation.state;
// there is no point in traversing the same collection of parent ancestors if a followup
// animation will be run on the same element that already did all that checking work
if (!skipAnimations && (!hasExistingAnimation || existingAnimation.state !== PRE_DIGEST_STATE)) {
skipAnimations = !areAnimationsAllowed(node, parentNode, event);
}
if (skipAnimations) {
// Callbacks should fire even if the document is hidden (regression fix for issue #14120)
if (documentHidden) notifyProgress(runner, event, 'start');
close();
if (documentHidden) notifyProgress(runner, event, 'close');
return runner;
}
if (isStructural) {
closeChildAnimations(node);
}
var newAnimation = {
structural: isStructural,
element: element,
event: event,
addClass: options.addClass,
removeClass: options.removeClass,
close: close,
options: options,
runner: runner
};
if (hasExistingAnimation) {
var skipAnimationFlag = isAllowed('skip', newAnimation, existingAnimation);
if (skipAnimationFlag) {
if (existingAnimation.state === RUNNING_STATE) {
close();
return runner;
} else {
mergeAnimationDetails(element, existingAnimation, newAnimation);
return existingAnimation.runner;
}
}
var cancelAnimationFlag = isAllowed('cancel', newAnimation, existingAnimation);
if (cancelAnimationFlag) {
if (existingAnimation.state === RUNNING_STATE) {
// this will end the animation right away and it is safe
// to do so since the animation is already running and the
// runner callback code will run in async
existingAnimation.runner.end();
} else if (existingAnimation.structural) {
// this means that the animation is queued into a digest, but
// hasn't started yet. Therefore it is safe to run the close
// method which will call the runner methods in async.
existingAnimation.close();
} else {
// this will merge the new animation options into existing animation options
mergeAnimationDetails(element, existingAnimation, newAnimation);
return existingAnimation.runner;
}
} else {
// a joined animation means that this animation will take over the existing one
// so an example would involve a leave animation taking over an enter. Then when
// the postDigest kicks in the enter will be ignored.
var joinAnimationFlag = isAllowed('join', newAnimation, existingAnimation);
if (joinAnimationFlag) {
if (existingAnimation.state === RUNNING_STATE) {
normalizeAnimationDetails(element, newAnimation);
} else {
applyGeneratedPreparationClasses(element, isStructural ? event : null, options);
event = newAnimation.event = existingAnimation.event;
options = mergeAnimationDetails(element, existingAnimation, newAnimation);
//we return the same runner since only the option values of this animation will
//be fed into the `existingAnimation`.
return existingAnimation.runner;
}
}
}
} else {
// normalization in this case means that it removes redundant CSS classes that
// already exist (addClass) or do not exist (removeClass) on the element
normalizeAnimationDetails(element, newAnimation);
}
// when the options are merged and cleaned up we may end up not having to do
// an animation at all, therefore we should check this before issuing a post
// digest callback. Structural animations will always run no matter what.
var isValidAnimation = newAnimation.structural;
if (!isValidAnimation) {
// animate (from/to) can be quickly checked first, otherwise we check if any classes are present
isValidAnimation = (newAnimation.event === 'animate' && Object.keys(newAnimation.options.to || {}).length > 0)
|| hasAnimationClasses(newAnimation);
}
if (!isValidAnimation) {
close();
clearElementAnimationState(node);
return runner;
}
// the counter keeps track of cancelled animations
var counter = (existingAnimation.counter || 0) + 1;
newAnimation.counter = counter;
markElementAnimationState(node, PRE_DIGEST_STATE, newAnimation);
$rootScope.$$postDigest(function() {
// It is possible that the DOM nodes inside `originalElement` have been replaced. This can
// happen if the animated element is a transcluded clone and also has a `templateUrl`
// directive on it. Therefore, we must recreate `element` in order to interact with the
// actual DOM nodes.
// Note: We still need to use the old `node` for certain things, such as looking up in
// HashMaps where it was used as the key.
element = stripCommentsFromElement(originalElement);
var animationDetails = activeAnimationsLookup.get(node);
var animationCancelled = !animationDetails;
animationDetails = animationDetails || {};
// if addClass/removeClass is called before something like enter then the
// registered parent element may not be present. The code below will ensure
// that a final value for parent element is obtained
var parentElement = element.parent() || [];
// animate/structural/class-based animations all have requirements. Otherwise there
// is no point in performing an animation. The parent node must also be set.
var isValidAnimation = parentElement.length > 0
&& (animationDetails.event === 'animate'
|| animationDetails.structural
|| hasAnimationClasses(animationDetails));
// this means that the previous animation was cancelled
// even if the follow-up animation is the same event
if (animationCancelled || animationDetails.counter !== counter || !isValidAnimation) {
// if another animation did not take over then we need
// to make sure that the domOperation and options are
// handled accordingly
if (animationCancelled) {
applyAnimationClasses(element, options);
applyAnimationStyles(element, options);
}
// if the event changed from something like enter to leave then we do
// it, otherwise if it's the same then the end result will be the same too
if (animationCancelled || (isStructural && animationDetails.event !== event)) {
options.domOperation();
runner.end();
}
// in the event that the element animation was not cancelled or a follow-up animation
// isn't allowed to animate from here then we need to clear the state of the element
// so that any future animations won't read the expired animation data.
if (!isValidAnimation) {
clearElementAnimationState(node);
}
return;
}
// this combined multiple class to addClass / removeClass into a setClass event
// so long as a structural event did not take over the animation
event = !animationDetails.structural && hasAnimationClasses(animationDetails, true)
? 'setClass'
: animationDetails.event;
markElementAnimationState(node, RUNNING_STATE);
var realRunner = $$animation(element, event, animationDetails.options);
// this will update the runner's flow-control events based on
// the `realRunner` object.
runner.setHost(realRunner);
notifyProgress(runner, event, 'start', {});
realRunner.done(function(status) {
close(!status);
var animationDetails = activeAnimationsLookup.get(node);
if (animationDetails && animationDetails.counter === counter) {
clearElementAnimationState(node);
}
notifyProgress(runner, event, 'close', {});
});
});
return runner;
function notifyProgress(runner, event, phase, data) {
runInNextPostDigestOrNow(function() {
var callbacks = findCallbacks(parentNode, node, event);
if (callbacks.length) {
// do not optimize this call here to RAF because
// we don't know how heavy the callback code here will
// be and if this code is buffered then this can
// lead to a performance regression.
$$rAF(function() {
forEach(callbacks, function(callback) {
callback(element, phase, data);
});
cleanupEventListeners(phase, node);
});
} else {
cleanupEventListeners(phase, node);
}
});
runner.progress(event, phase, data);
}
function close(reject) {
clearGeneratedClasses(element, options);
applyAnimationClasses(element, options);
applyAnimationStyles(element, options);
options.domOperation();
runner.complete(!reject);
}
}
function closeChildAnimations(node) {
var children = node.querySelectorAll('[' + NG_ANIMATE_ATTR_NAME + ']');
forEach(children, function(child) {
var state = parseInt(child.getAttribute(NG_ANIMATE_ATTR_NAME), 10);
var animationDetails = activeAnimationsLookup.get(child);
if (animationDetails) {
switch (state) {
case RUNNING_STATE:
animationDetails.runner.end();
/* falls through */
case PRE_DIGEST_STATE:
activeAnimationsLookup.delete(child);
break;
}
}
});
}
function clearElementAnimationState(node) {
node.removeAttribute(NG_ANIMATE_ATTR_NAME);
activeAnimationsLookup.delete(node);
}
/**
* This fn returns false if any of the following is true:
* a) animations on any parent element are disabled, and animations on the element aren't explicitly allowed
* b) a parent element has an ongoing structural animation, and animateChildren is false
* c) the element is not a child of the body
* d) the element is not a child of the $rootElement
*/
function areAnimationsAllowed(node, parentNode, event) {
var bodyNode = $document[0].body;
var rootNode = getDomNode($rootElement);
var bodyNodeDetected = (node === bodyNode) || node.nodeName === 'HTML';
var rootNodeDetected = (node === rootNode);
var parentAnimationDetected = false;
var elementDisabled = disabledElementsLookup.get(node);
var animateChildren;
var parentHost = jqLite.data(node, NG_ANIMATE_PIN_DATA);
if (parentHost) {
parentNode = getDomNode(parentHost);
}
while (parentNode) {
if (!rootNodeDetected) {
// AngularJS doesn't want to attempt to animate elements outside of the application
// therefore we need to ensure that the rootElement is an ancestor of the current element
rootNodeDetected = (parentNode === rootNode);
}
if (parentNode.nodeType !== ELEMENT_NODE) {
// no point in inspecting the #document element
break;
}
var details = activeAnimationsLookup.get(parentNode) || {};
// either an enter, leave or move animation will commence
// therefore we can't allow any animations to take place
// but if a parent animation is class-based then that's ok
if (!parentAnimationDetected) {
var parentNodeDisabled = disabledElementsLookup.get(parentNode);
if (parentNodeDisabled === true && elementDisabled !== false) {
// disable animations if the user hasn't explicitly enabled animations on the
// current element
elementDisabled = true;
// element is disabled via parent element, no need to check anything else
break;
} else if (parentNodeDisabled === false) {
elementDisabled = false;
}
parentAnimationDetected = details.structural;
}
if (isUndefined(animateChildren) || animateChildren === true) {
var value = jqLite.data(parentNode, NG_ANIMATE_CHILDREN_DATA);
if (isDefined(value)) {
animateChildren = value;
}
}
// there is no need to continue traversing at this point
if (parentAnimationDetected && animateChildren === false) break;
if (!bodyNodeDetected) {
// we also need to ensure that the element is or will be a part of the body element
// otherwise it is pointless to even issue an animation to be rendered
bodyNodeDetected = (parentNode === bodyNode);
}
if (bodyNodeDetected && rootNodeDetected) {
// If both body and root have been found, any other checks are pointless,
// as no animation data should live outside the application
break;
}
if (!rootNodeDetected) {
// If `rootNode` is not detected, check if `parentNode` is pinned to another element
parentHost = jqLite.data(parentNode, NG_ANIMATE_PIN_DATA);
if (parentHost) {
// The pin target element becomes the next parent element
parentNode = getDomNode(parentHost);
continue;
}
}
parentNode = parentNode.parentNode;
}
var allowAnimation = (!parentAnimationDetected || animateChildren) && elementDisabled !== true;
return allowAnimation && rootNodeDetected && bodyNodeDetected;
}
function markElementAnimationState(node, state, details) {
details = details || {};
details.state = state;
node.setAttribute(NG_ANIMATE_ATTR_NAME, state);
var oldValue = activeAnimationsLookup.get(node);
var newValue = oldValue
? extend(oldValue, details)
: details;
activeAnimationsLookup.set(node, newValue);
}
}];
}];
/* exported $$AnimationProvider */
var $$AnimationProvider = ['$animateProvider', /** @this */ function($animateProvider) {
var NG_ANIMATE_REF_ATTR = 'ng-animate-ref';
var drivers = this.drivers = [];
var RUNNER_STORAGE_KEY = '$$animationRunner';
function setRunner(element, runner) {
element.data(RUNNER_STORAGE_KEY, runner);
}
function removeRunner(element) {
element.removeData(RUNNER_STORAGE_KEY);
}
function getRunner(element) {
return element.data(RUNNER_STORAGE_KEY);
}
this.$get = ['$$jqLite', '$rootScope', '$injector', '$$AnimateRunner', '$$Map', '$$rAFScheduler',
function($$jqLite, $rootScope, $injector, $$AnimateRunner, $$Map, $$rAFScheduler) {
var animationQueue = [];
var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
function sortAnimations(animations) {
var tree = { children: [] };
var i, lookup = new $$Map();
// this is done first beforehand so that the map
// is filled with a list of the elements that will be animated
for (i = 0; i < animations.length; i++) {
var animation = animations[i];
lookup.set(animation.domNode, animations[i] = {
domNode: animation.domNode,
fn: animation.fn,
children: []
});
}
for (i = 0; i < animations.length; i++) {
processNode(animations[i]);
}
return flatten(tree);
function processNode(entry) {
if (entry.processed) return entry;
entry.processed = true;
var elementNode = entry.domNode;
var parentNode = elementNode.parentNode;
lookup.set(elementNode, entry);
var parentEntry;
while (parentNode) {
parentEntry = lookup.get(parentNode);
if (parentEntry) {
if (!parentEntry.processed) {
parentEntry = processNode(parentEntry);
}
break;
}
parentNode = parentNode.parentNode;
}
(parentEntry || tree).children.push(entry);
return entry;
}
function flatten(tree) {
var result = [];
var queue = [];
var i;
for (i = 0; i < tree.children.length; i++) {
queue.push(tree.children[i]);
}
var remainingLevelEntries = queue.length;
var nextLevelEntries = 0;
var row = [];
for (i = 0; i < queue.length; i++) {
var entry = queue[i];
if (remainingLevelEntries <= 0) {
remainingLevelEntries = nextLevelEntries;
nextLevelEntries = 0;
result.push(row);
row = [];
}
row.push(entry.fn);
entry.children.forEach(function(childEntry) {
nextLevelEntries++;
queue.push(childEntry);
});
remainingLevelEntries--;
}
if (row.length) {
result.push(row);
}
return result;
}
}
// TODO(matsko): document the signature in a better way
return function(element, event, options) {
options = prepareAnimationOptions(options);
var isStructural = ['enter', 'move', 'leave'].indexOf(event) >= 0;
// there is no animation at the current moment, however
// these runner methods will get later updated with the
// methods leading into the driver's end/cancel methods
// for now they just stop the animation from starting
var runner = new $$AnimateRunner({
end: function() { close(); },
cancel: function() { close(true); }
});
if (!drivers.length) {
close();
return runner;
}
setRunner(element, runner);
var classes = mergeClasses(element.attr('class'), mergeClasses(options.addClass, options.removeClass));
var tempClasses = options.tempClasses;
if (tempClasses) {
classes += ' ' + tempClasses;
options.tempClasses = null;
}
var prepareClassName;
if (isStructural) {
prepareClassName = 'ng-' + event + PREPARE_CLASS_SUFFIX;
$$jqLite.addClass(element, prepareClassName);
}
animationQueue.push({
// this data is used by the postDigest code and passed into
// the driver step function
element: element,
classes: classes,
event: event,
structural: isStructural,
options: options,
beforeStart: beforeStart,
close: close
});
element.on('$destroy', handleDestroyedElement);
// we only want there to be one function called within the post digest
// block. This way we can group animations for all the animations that
// were apart of the same postDigest flush call.
if (animationQueue.length > 1) return runner;
$rootScope.$$postDigest(function() {
var animations = [];
forEach(animationQueue, function(entry) {
// the element was destroyed early on which removed the runner
// form its storage. This means we can't animate this element
// at all and it already has been closed due to destruction.
if (getRunner(entry.element)) {
animations.push(entry);
} else {
entry.close();
}
});
// now any future animations will be in another postDigest
animationQueue.length = 0;
var groupedAnimations = groupAnimations(animations);
var toBeSortedAnimations = [];
forEach(groupedAnimations, function(animationEntry) {
toBeSortedAnimations.push({
domNode: getDomNode(animationEntry.from ? animationEntry.from.element : animationEntry.element),
fn: function triggerAnimationStart() {
// it's important that we apply the `ng-animate` CSS class and the
// temporary classes before we do any driver invoking since these
// CSS classes may be required for proper CSS detection.
animationEntry.beforeStart();
var startAnimationFn, closeFn = animationEntry.close;
// in the event that the element was removed before the digest runs or
// during the RAF sequencing then we should not trigger the animation.
var targetElement = animationEntry.anchors
? (animationEntry.from.element || animationEntry.to.element)
: animationEntry.element;
if (getRunner(targetElement)) {
var operation = invokeFirstDriver(animationEntry);
if (operation) {
startAnimationFn = operation.start;
}
}
if (!startAnimationFn) {
closeFn();
} else {
var animationRunner = startAnimationFn();
animationRunner.done(function(status) {
closeFn(!status);
});
updateAnimationRunners(animationEntry, animationRunner);
}
}
});
});
// we need to sort each of the animations in order of parent to child
// relationships. This ensures that the child classes are applied at the
// right time.
$$rAFScheduler(sortAnimations(toBeSortedAnimations));
});
return runner;
// TODO(matsko): change to reference nodes
function getAnchorNodes(node) {
var SELECTOR = '[' + NG_ANIMATE_REF_ATTR + ']';
var items = node.hasAttribute(NG_ANIMATE_REF_ATTR)
? [node]
: node.querySelectorAll(SELECTOR);
var anchors = [];
forEach(items, function(node) {
var attr = node.getAttribute(NG_ANIMATE_REF_ATTR);
if (attr && attr.length) {
anchors.push(node);
}
});
return anchors;
}
function groupAnimations(animations) {
var preparedAnimations = [];
var refLookup = {};
forEach(animations, function(animation, index) {
var element = animation.element;
var node = getDomNode(element);
var event = animation.event;
var enterOrMove = ['enter', 'move'].indexOf(event) >= 0;
var anchorNodes = animation.structural ? getAnchorNodes(node) : [];
if (anchorNodes.length) {
var direction = enterOrMove ? 'to' : 'from';
forEach(anchorNodes, function(anchor) {
var key = anchor.getAttribute(NG_ANIMATE_REF_ATTR);
refLookup[key] = refLookup[key] || {};
refLookup[key][direction] = {
animationID: index,
element: jqLite(anchor)
};
});
} else {
preparedAnimations.push(animation);
}
});
var usedIndicesLookup = {};
var anchorGroups = {};
forEach(refLookup, function(operations, key) {
var from = operations.from;
var to = operations.to;
if (!from || !to) {
// only one of these is set therefore we can't have an
// anchor animation since all three pieces are required
var index = from ? from.animationID : to.animationID;
var indexKey = index.toString();
if (!usedIndicesLookup[indexKey]) {
usedIndicesLookup[indexKey] = true;
preparedAnimations.push(animations[index]);
}
return;
}
var fromAnimation = animations[from.animationID];
var toAnimation = animations[to.animationID];
var lookupKey = from.animationID.toString();
if (!anchorGroups[lookupKey]) {
var group = anchorGroups[lookupKey] = {
structural: true,
beforeStart: function() {
fromAnimation.beforeStart();
toAnimation.beforeStart();
},
close: function() {
fromAnimation.close();
toAnimation.close();
},
classes: cssClassesIntersection(fromAnimation.classes, toAnimation.classes),
from: fromAnimation,
to: toAnimation,
anchors: [] // TODO(matsko): change to reference nodes
};
// the anchor animations require that the from and to elements both have at least
// one shared CSS class which effectively marries the two elements together to use
// the same animation driver and to properly sequence the anchor animation.
if (group.classes.length) {
preparedAnimations.push(group);
} else {
preparedAnimations.push(fromAnimation);
preparedAnimations.push(toAnimation);
}
}
anchorGroups[lookupKey].anchors.push({
'out': from.element, 'in': to.element
});
});
return preparedAnimations;
}
function cssClassesIntersection(a,b) {
a = a.split(' ');
b = b.split(' ');
var matches = [];
for (var i = 0; i < a.length; i++) {
var aa = a[i];
if (aa.substring(0,3) === 'ng-') continue;
for (var j = 0; j < b.length; j++) {
if (aa === b[j]) {
matches.push(aa);
break;
}
}
}
return matches.join(' ');
}
function invokeFirstDriver(animationDetails) {
// we loop in reverse order since the more general drivers (like CSS and JS)
// may attempt more elements, but custom drivers are more particular
for (var i = drivers.length - 1; i >= 0; i--) {
var driverName = drivers[i];
var factory = $injector.get(driverName);
var driver = factory(animationDetails);
if (driver) {
return driver;
}
}
}
function beforeStart() {
element.addClass(NG_ANIMATE_CLASSNAME);
if (tempClasses) {
$$jqLite.addClass(element, tempClasses);
}
if (prepareClassName) {
$$jqLite.removeClass(element, prepareClassName);
prepareClassName = null;
}
}
function updateAnimationRunners(animation, newRunner) {
if (animation.from && animation.to) {
update(animation.from.element);
update(animation.to.element);
} else {
update(animation.element);
}
function update(element) {
var runner = getRunner(element);
if (runner) runner.setHost(newRunner);
}
}
function handleDestroyedElement() {
var runner = getRunner(element);
if (runner && (event !== 'leave' || !options.$$domOperationFired)) {
runner.end();
}
}
function close(rejected) {
element.off('$destroy', handleDestroyedElement);
removeRunner(element);
applyAnimationClasses(element, options);
applyAnimationStyles(element, options);
options.domOperation();
if (tempClasses) {
$$jqLite.removeClass(element, tempClasses);
}
element.removeClass(NG_ANIMATE_CLASSNAME);
runner.complete(!rejected);
}
};
}];
}];
/**
* @ngdoc directive
* @name ngAnimateSwap
* @restrict A
* @scope
*
* @description
*
* ngAnimateSwap is a animation-oriented directive that allows for the container to
* be removed and entered in whenever the associated expression changes. A
* common usecase for this directive is a rotating banner or slider component which
* contains one image being present at a time. When the active image changes
* then the old image will perform a `leave` animation and the new element
* will be inserted via an `enter` animation.
*
* @animations
* | Animation | Occurs |
* |----------------------------------|--------------------------------------|
* | {@link ng.$animate#enter enter} | when the new element is inserted to the DOM |
* | {@link ng.$animate#leave leave} | when the old element is removed from the DOM |
*
* @example
* <example name="ngAnimateSwap-directive" module="ngAnimateSwapExample"
* deps="angular-animate.js"
* animations="true" fixBase="true">
* <file name="index.html">
* <div class="container" ng-controller="AppCtrl">
* <div ng-animate-swap="number" class="cell swap-animation" ng-class="colorClass(number)">
* {{ number }}
* </div>
* </div>
* </file>
* <file name="script.js">
* angular.module('ngAnimateSwapExample', ['ngAnimate'])
* .controller('AppCtrl', ['$scope', '$interval', function($scope, $interval) {
* $scope.number = 0;
* $interval(function() {
* $scope.number++;
* }, 1000);
*
* var colors = ['red','blue','green','yellow','orange'];
* $scope.colorClass = function(number) {
* return colors[number % colors.length];
* };
* }]);
* </file>
* <file name="animations.css">
* .container {
* height:250px;
* width:250px;
* position:relative;
* overflow:hidden;
* border:2px solid black;
* }
* .container .cell {
* font-size:150px;
* text-align:center;
* line-height:250px;
* position:absolute;
* top:0;
* left:0;
* right:0;
* border-bottom:2px solid black;
* }
* .swap-animation.ng-enter, .swap-animation.ng-leave {
* transition:0.5s linear all;
* }
* .swap-animation.ng-enter {
* top:-250px;
* }
* .swap-animation.ng-enter-active {
* top:0px;
* }
* .swap-animation.ng-leave {
* top:0px;
* }
* .swap-animation.ng-leave-active {
* top:250px;
* }
* .red { background:red; }
* .green { background:green; }
* .blue { background:blue; }
* .yellow { background:yellow; }
* .orange { background:orange; }
* </file>
* </example>
*/
var ngAnimateSwapDirective = ['$animate', function($animate) {
return {
restrict: 'A',
transclude: 'element',
terminal: true,
priority: 600, // we use 600 here to ensure that the directive is caught before others
link: function(scope, $element, attrs, ctrl, $transclude) {
var previousElement, previousScope;
scope.$watchCollection(attrs.ngAnimateSwap || attrs['for'], function(value) {
if (previousElement) {
$animate.leave(previousElement);
}
if (previousScope) {
previousScope.$destroy();
previousScope = null;
}
if (value || value === 0) {
$transclude(function(clone, childScope) {
previousElement = clone;
previousScope = childScope;
$animate.enter(clone, null, $element);
});
}
});
}
};
}];
/**
* @ngdoc module
* @name ngAnimate
* @description
*
* The `ngAnimate` module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via
* callback hooks. Animations are not enabled by default, however, by including `ngAnimate` the animation hooks are enabled for an AngularJS app.
*
* ## Usage
* Simply put, there are two ways to make use of animations when ngAnimate is used: by using **CSS** and **JavaScript**. The former works purely based
* using CSS (by using matching CSS selectors/styles) and the latter triggers animations that are registered via `module.animation()`. For
* both CSS and JS animations the sole requirement is to have a matching `CSS class` that exists both in the registered animation and within
* the HTML element that the animation will be triggered on.
*
* ## Directive Support
* The following directives are "animation aware":
*
* | Directive | Supported Animations |
* |-------------------------------------------------------------------------------|---------------------------------------------------------------------------|
* | {@link ng.directive:form#animations form / ngForm} | add and remove ({@link ng.directive:form#css-classes various classes}) |
* | {@link ngAnimate.directive:ngAnimateSwap#animations ngAnimateSwap} | enter and leave |
* | {@link ng.directive:ngClass#animations ngClass / {{class}​}} | add and remove |
* | {@link ng.directive:ngClassEven#animations ngClassEven} | add and remove |
* | {@link ng.directive:ngClassOdd#animations ngClassOdd} | add and remove |
* | {@link ng.directive:ngHide#animations ngHide} | add and remove (the `ng-hide` class) |
* | {@link ng.directive:ngIf#animations ngIf} | enter and leave |
* | {@link ng.directive:ngInclude#animations ngInclude} | enter and leave |
* | {@link module:ngMessages#animations ngMessage / ngMessageExp} | enter and leave |
* | {@link module:ngMessages#animations ngMessages} | add and remove (the `ng-active`/`ng-inactive` classes) |
* | {@link ng.directive:ngModel#animations ngModel} | add and remove ({@link ng.directive:ngModel#css-classes various classes}) |
* | {@link ng.directive:ngRepeat#animations ngRepeat} | enter, leave, and move |
* | {@link ng.directive:ngShow#animations ngShow} | add and remove (the `ng-hide` class) |
* | {@link ng.directive:ngSwitch#animations ngSwitch} | enter and leave |
* | {@link ngRoute.directive:ngView#animations ngView} | enter and leave |
*
* (More information can be found by visiting the documentation associated with each directive.)
*
* For a full breakdown of the steps involved during each animation event, refer to the
* {@link ng.$animate `$animate` API docs}.
*
* ## CSS-based Animations
*
* CSS-based animations with ngAnimate are unique since they require no JavaScript code at all. By using a CSS class that we reference between our HTML
* and CSS code we can create an animation that will be picked up by AngularJS when an underlying directive performs an operation.
*
* The example below shows how an `enter` animation can be made possible on an element using `ng-if`:
*
* ```html
* <div ng-if="bool" class="fade">
* Fade me in out
* </div>
* <button ng-click="bool=true">Fade In!</button>
* <button ng-click="bool=false">Fade Out!</button>
* ```
*
* Notice the CSS class **fade**? We can now create the CSS transition code that references this class:
*
* ```css
* /* The starting CSS styles for the enter animation */
* .fade.ng-enter {
* transition:0.5s linear all;
* opacity:0;
* }
*
* /* The finishing CSS styles for the enter animation */
* .fade.ng-enter.ng-enter-active {
* opacity:1;
* }
* ```
*
* The key thing to remember here is that, depending on the animation event (which each of the directives above trigger depending on what's going on) two
* generated CSS classes will be applied to the element; in the example above we have `.ng-enter` and `.ng-enter-active`. For CSS transitions, the transition
* code **must** be defined within the starting CSS class (in this case `.ng-enter`). The destination class is what the transition will animate towards.
*
* If for example we wanted to create animations for `leave` and `move` (ngRepeat triggers move) then we can do so using the same CSS naming conventions:
*
* ```css
* /* now the element will fade out before it is removed from the DOM */
* .fade.ng-leave {
* transition:0.5s linear all;
* opacity:1;
* }
* .fade.ng-leave.ng-leave-active {
* opacity:0;
* }
* ```
*
* We can also make use of **CSS Keyframes** by referencing the keyframe animation within the starting CSS class:
*
* ```css
* /* there is no need to define anything inside of the destination
* CSS class since the keyframe will take charge of the animation */
* .fade.ng-leave {
* animation: my_fade_animation 0.5s linear;
* -webkit-animation: my_fade_animation 0.5s linear;
* }
*
* @keyframes my_fade_animation {
* from { opacity:1; }
* to { opacity:0; }
* }
*
* @-webkit-keyframes my_fade_animation {
* from { opacity:1; }
* to { opacity:0; }
* }
* ```
*
* Feel free also mix transitions and keyframes together as well as any other CSS classes on the same element.
*
* ### CSS Class-based Animations
*
* Class-based animations (animations that are triggered via `ngClass`, `ngShow`, `ngHide` and some other directives) have a slightly different
* naming convention. Class-based animations are basic enough that a standard transition or keyframe can be referenced on the class being added
* and removed.
*
* For example if we wanted to do a CSS animation for `ngHide` then we place an animation on the `.ng-hide` CSS class:
*
* ```html
* <div ng-show="bool" class="fade">
* Show and hide me
* </div>
* <button ng-click="bool=!bool">Toggle</button>
*
* <style>
* .fade.ng-hide {
* transition:0.5s linear all;
* opacity:0;
* }
* </style>
* ```
*
* All that is going on here with ngShow/ngHide behind the scenes is the `.ng-hide` class is added/removed (when the hidden state is valid). Since
* ngShow and ngHide are animation aware then we can match up a transition and ngAnimate handles the rest.
*
* In addition the addition and removal of the CSS class, ngAnimate also provides two helper methods that we can use to further decorate the animation
* with CSS styles.
*
* ```html
* <div ng-class="{on:onOff}" class="highlight">
* Highlight this box
* </div>
* <button ng-click="onOff=!onOff">Toggle</button>
*
* <style>
* .highlight {
* transition:0.5s linear all;
* }
* .highlight.on-add {
* background:white;
* }
* .highlight.on {
* background:yellow;
* }
* .highlight.on-remove {
* background:black;
* }
* </style>
* ```
*
* We can also make use of CSS keyframes by placing them within the CSS classes.
*
*
* ### CSS Staggering Animations
* A Staggering animation is a collection of animations that are issued with a slight delay in between each successive operation resulting in a
* curtain-like effect. The ngAnimate module (versions >=1.2) supports staggering animations and the stagger effect can be
* performed by creating a **ng-EVENT-stagger** CSS class and attaching that class to the base CSS class used for
* the animation. The style property expected within the stagger class can either be a **transition-delay** or an
* **animation-delay** property (or both if your animation contains both transitions and keyframe animations).
*
* ```css
* .my-animation.ng-enter {
* /* standard transition code */
* transition: 1s linear all;
* opacity:0;
* }
* .my-animation.ng-enter-stagger {
* /* this will have a 100ms delay between each successive leave animation */
* transition-delay: 0.1s;
*
* /* As of 1.4.4, this must always be set: it signals ngAnimate
* to not accidentally inherit a delay property from another CSS class */
* transition-duration: 0s;
*
* /* if you are using animations instead of transitions you should configure as follows:
* animation-delay: 0.1s;
* animation-duration: 0s; */
* }
* .my-animation.ng-enter.ng-enter-active {
* /* standard transition styles */
* opacity:1;
* }
* ```
*
* Staggering animations work by default in ngRepeat (so long as the CSS class is defined). Outside of ngRepeat, to use staggering animations
* on your own, they can be triggered by firing multiple calls to the same event on $animate. However, the restrictions surrounding this
* are that each of the elements must have the same CSS className value as well as the same parent element. A stagger operation
* will also be reset if one or more animation frames have passed since the multiple calls to `$animate` were fired.
*
* The following code will issue the **ng-leave-stagger** event on the element provided:
*
* ```js
* var kids = parent.children();
*
* $animate.leave(kids[0]); //stagger index=0
* $animate.leave(kids[1]); //stagger index=1
* $animate.leave(kids[2]); //stagger index=2
* $animate.leave(kids[3]); //stagger index=3
* $animate.leave(kids[4]); //stagger index=4
*
* window.requestAnimationFrame(function() {
* //stagger has reset itself
* $animate.leave(kids[5]); //stagger index=0
* $animate.leave(kids[6]); //stagger index=1
*
* $scope.$digest();
* });
* ```
*
* Stagger animations are currently only supported within CSS-defined animations.
*
* ### The `ng-animate` CSS class
*
* When ngAnimate is animating an element it will apply the `ng-animate` CSS class to the element for the duration of the animation.
* This is a temporary CSS class and it will be removed once the animation is over (for both JavaScript and CSS-based animations).
*
* Therefore, animations can be applied to an element using this temporary class directly via CSS.
*
* ```css
* .zipper.ng-animate {
* transition:0.5s linear all;
* }
* .zipper.ng-enter {
* opacity:0;
* }
* .zipper.ng-enter.ng-enter-active {
* opacity:1;
* }
* .zipper.ng-leave {
* opacity:1;
* }
* .zipper.ng-leave.ng-leave-active {
* opacity:0;
* }
* ```
*
* (Note that the `ng-animate` CSS class is reserved and it cannot be applied on an element directly since ngAnimate will always remove
* the CSS class once an animation has completed.)
*
*
* ### The `ng-[event]-prepare` class
*
* This is a special class that can be used to prevent unwanted flickering / flash of content before
* the actual animation starts. The class is added as soon as an animation is initialized, but removed
* before the actual animation starts (after waiting for a $digest).
* It is also only added for *structural* animations (`enter`, `move`, and `leave`).
*
* In practice, flickering can appear when nesting elements with structural animations such as `ngIf`
* into elements that have class-based animations such as `ngClass`.
*
* ```html
* <div ng-class="{red: myProp}">
* <div ng-class="{blue: myProp}">
* <div class="message" ng-if="myProp"></div>
* </div>
* </div>
* ```
*
* It is possible that during the `enter` animation, the `.message` div will be briefly visible before it starts animating.
* In that case, you can add styles to the CSS that make sure the element stays hidden before the animation starts:
*
* ```css
* .message.ng-enter-prepare {
* opacity: 0;
* }
* ```
*
* ### Animating between value changes
*
* Sometimes you need to animate between different expression states, whose values
* don't necessary need to be known or referenced in CSS styles.
* Unless possible with another {@link ngAnimate#directive-support "animation aware" directive},
* that specific use case can always be covered with {@link ngAnimate.directive:ngAnimateSwap} as
* can be seen in {@link ngAnimate.directive:ngAnimateSwap#examples this example}.
*
* Note that {@link ngAnimate.directive:ngAnimateSwap} is a *structural directive*, which means it
* creates a new instance of the element (including any other/child directives it may have) and
* links it to a new scope every time *swap* happens. In some cases this might not be desirable
* (e.g. for performance reasons, or when you wish to retain internal state on the original
* element instance).
*
* ## JavaScript-based Animations
*
* ngAnimate also allows for animations to be consumed by JavaScript code. The approach is similar to CSS-based animations (where there is a shared
* CSS class that is referenced in our HTML code) but in addition we need to register the JavaScript animation on the module. By making use of the
* `module.animation()` module function we can register the animation.
*
* Let's see an example of a enter/leave animation using `ngRepeat`:
*
* ```html
* <div ng-repeat="item in items" class="slide">
* {{ item }}
* </div>
* ```
*
* See the **slide** CSS class? Let's use that class to define an animation that we'll structure in our module code by using `module.animation`:
*
* ```js
* myModule.animation('.slide', [function() {
* return {
* // make note that other events (like addClass/removeClass)
* // have different function input parameters
* enter: function(element, doneFn) {
* jQuery(element).fadeIn(1000, doneFn);
*
* // remember to call doneFn so that AngularJS
* // knows that the animation has concluded
* },
*
* move: function(element, doneFn) {
* jQuery(element).fadeIn(1000, doneFn);
* },
*
* leave: function(element, doneFn) {
* jQuery(element).fadeOut(1000, doneFn);
* }
* }
* }]);
* ```
*
* The nice thing about JS-based animations is that we can inject other services and make use of advanced animation libraries such as
* greensock.js and velocity.js.
*
* If our animation code class-based (meaning that something like `ngClass`, `ngHide` and `ngShow` triggers it) then we can still define
* our animations inside of the same registered animation, however, the function input arguments are a bit different:
*
* ```html
* <div ng-class="color" class="colorful">
* this box is moody
* </div>
* <button ng-click="color='red'">Change to red</button>
* <button ng-click="color='blue'">Change to blue</button>
* <button ng-click="color='green'">Change to green</button>
* ```
*
* ```js
* myModule.animation('.colorful', [function() {
* return {
* addClass: function(element, className, doneFn) {
* // do some cool animation and call the doneFn
* },
* removeClass: function(element, className, doneFn) {
* // do some cool animation and call the doneFn
* },
* setClass: function(element, addedClass, removedClass, doneFn) {
* // do some cool animation and call the doneFn
* }
* }
* }]);
* ```
*
* ## CSS + JS Animations Together
*
* AngularJS 1.4 and higher has taken steps to make the amalgamation of CSS and JS animations more flexible. However, unlike earlier versions of AngularJS,
* defining CSS and JS animations to work off of the same CSS class will not work anymore. Therefore the example below will only result in **JS animations taking
* charge of the animation**:
*
* ```html
* <div ng-if="bool" class="slide">
* Slide in and out
* </div>
* ```
*
* ```js
* myModule.animation('.slide', [function() {
* return {
* enter: function(element, doneFn) {
* jQuery(element).slideIn(1000, doneFn);
* }
* }
* }]);
* ```
*
* ```css
* .slide.ng-enter {
* transition:0.5s linear all;
* transform:translateY(-100px);
* }
* .slide.ng-enter.ng-enter-active {
* transform:translateY(0);
* }
* ```
*
* Does this mean that CSS and JS animations cannot be used together? Do JS-based animations always have higher priority? We can make up for the
* lack of CSS animations by using the `$animateCss` service to trigger our own tweaked-out, CSS-based animations directly from
* our own JS-based animation code:
*
* ```js
* myModule.animation('.slide', ['$animateCss', function($animateCss) {
* return {
* enter: function(element) {
* // this will trigger `.slide.ng-enter` and `.slide.ng-enter-active`.
* return $animateCss(element, {
* event: 'enter',
* structural: true
* });
* }
* }
* }]);
* ```
*
* The nice thing here is that we can save bandwidth by sticking to our CSS-based animation code and we don't need to rely on a 3rd-party animation framework.
*
* The `$animateCss` service is very powerful since we can feed in all kinds of extra properties that will be evaluated and fed into a CSS transition or
* keyframe animation. For example if we wanted to animate the height of an element while adding and removing classes then we can do so by providing that
* data into `$animateCss` directly:
*
* ```js
* myModule.animation('.slide', ['$animateCss', function($animateCss) {
* return {
* enter: function(element) {
* return $animateCss(element, {
* event: 'enter',
* structural: true,
* addClass: 'maroon-setting',
* from: { height:0 },
* to: { height: 200 }
* });
* }
* }
* }]);
* ```
*
* Now we can fill in the rest via our transition CSS code:
*
* ```css
* /* the transition tells ngAnimate to make the animation happen */
* .slide.ng-enter { transition:0.5s linear all; }
*
* /* this extra CSS class will be absorbed into the transition
* since the $animateCss code is adding the class */
* .maroon-setting { background:red; }
* ```
*
* And `$animateCss` will figure out the rest. Just make sure to have the `done()` callback fire the `doneFn` function to signal when the animation is over.
*
* To learn more about what's possible be sure to visit the {@link ngAnimate.$animateCss $animateCss service}.
*
* ## Animation Anchoring (via `ng-animate-ref`)
*
* ngAnimate in AngularJS 1.4 comes packed with the ability to cross-animate elements between
* structural areas of an application (like views) by pairing up elements using an attribute
* called `ng-animate-ref`.
*
* Let's say for example we have two views that are managed by `ng-view` and we want to show
* that there is a relationship between two components situated in within these views. By using the
* `ng-animate-ref` attribute we can identify that the two components are paired together and we
* can then attach an animation, which is triggered when the view changes.
*
* Say for example we have the following template code:
*
* ```html
* <!-- index.html -->
* <div ng-view class="view-animation">
* </div>
*
* <!-- home.html -->
* <a href="#/banner-page">
* <img src="./banner.jpg" class="banner" ng-animate-ref="banner">
* </a>
*
* <!-- banner-page.html -->
* <img src="./banner.jpg" class="banner" ng-animate-ref="banner">
* ```
*
* Now, when the view changes (once the link is clicked), ngAnimate will examine the
* HTML contents to see if there is a match reference between any components in the view
* that is leaving and the view that is entering. It will scan both the view which is being
* removed (leave) and inserted (enter) to see if there are any paired DOM elements that
* contain a matching ref value.
*
* The two images match since they share the same ref value. ngAnimate will now create a
* transport element (which is a clone of the first image element) and it will then attempt
* to animate to the position of the second image element in the next view. For the animation to
* work a special CSS class called `ng-anchor` will be added to the transported element.
*
* We can now attach a transition onto the `.banner.ng-anchor` CSS class and then
* ngAnimate will handle the entire transition for us as well as the addition and removal of
* any changes of CSS classes between the elements:
*
* ```css
* .banner.ng-anchor {
* /* this animation will last for 1 second since there are
* two phases to the animation (an `in` and an `out` phase) */
* transition:0.5s linear all;
* }
* ```
*
* We also **must** include animations for the views that are being entered and removed
* (otherwise anchoring wouldn't be possible since the new view would be inserted right away).
*
* ```css
* .view-animation.ng-enter, .view-animation.ng-leave {
* transition:0.5s linear all;
* position:fixed;
* left:0;
* top:0;
* width:100%;
* }
* .view-animation.ng-enter {
* transform:translateX(100%);
* }
* .view-animation.ng-leave,
* .view-animation.ng-enter.ng-enter-active {
* transform:translateX(0%);
* }
* .view-animation.ng-leave.ng-leave-active {
* transform:translateX(-100%);
* }
* ```
*
* Now we can jump back to the anchor animation. When the animation happens, there are two stages that occur:
* an `out` and an `in` stage. The `out` stage happens first and that is when the element is animated away
* from its origin. Once that animation is over then the `in` stage occurs which animates the
* element to its destination. The reason why there are two animations is to give enough time
* for the enter animation on the new element to be ready.
*
* The example above sets up a transition for both the in and out phases, but we can also target the out or
* in phases directly via `ng-anchor-out` and `ng-anchor-in`.
*
* ```css
* .banner.ng-anchor-out {
* transition: 0.5s linear all;
*
* /* the scale will be applied during the out animation,
* but will be animated away when the in animation runs */
* transform: scale(1.2);
* }
*
* .banner.ng-anchor-in {
* transition: 1s linear all;
* }
* ```
*
*
*
*
* ### Anchoring Demo
*
<example module="anchoringExample"
name="anchoringExample"
id="anchoringExample"
deps="angular-animate.js;angular-route.js"
animations="true">
<file name="index.html">
<a href="#!/">Home</a>
<hr />
<div class="view-container">
<div ng-view class="view"></div>
</div>
</file>
<file name="script.js">
angular.module('anchoringExample', ['ngAnimate', 'ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeController as home'
});
$routeProvider.when('/profile/:id', {
templateUrl: 'profile.html',
controller: 'ProfileController as profile'
});
}])
.run(['$rootScope', function($rootScope) {
$rootScope.records = [
{ id: 1, title: 'Miss Beulah Roob' },
{ id: 2, title: 'Trent Morissette' },
{ id: 3, title: 'Miss Ava Pouros' },
{ id: 4, title: 'Rod Pouros' },
{ id: 5, title: 'Abdul Rice' },
{ id: 6, title: 'Laurie Rutherford Sr.' },
{ id: 7, title: 'Nakia McLaughlin' },
{ id: 8, title: 'Jordon Blanda DVM' },
{ id: 9, title: 'Rhoda Hand' },
{ id: 10, title: 'Alexandrea Sauer' }
];
}])
.controller('HomeController', [function() {
//empty
}])
.controller('ProfileController', ['$rootScope', '$routeParams',
function ProfileController($rootScope, $routeParams) {
var index = parseInt($routeParams.id, 10);
var record = $rootScope.records[index - 1];
this.title = record.title;
this.id = record.id;
}]);
</file>
<file name="home.html">
<h2>Welcome to the home page</h1>
<p>Please click on an element</p>
<a class="record"
ng-href="#!/profile/{{ record.id }}"
ng-animate-ref="{{ record.id }}"
ng-repeat="record in records">
{{ record.title }}
</a>
</file>
<file name="profile.html">
<div class="profile record" ng-animate-ref="{{ profile.id }}">
{{ profile.title }}
</div>
</file>
<file name="animations.css">
.record {
display:block;
font-size:20px;
}
.profile {
background:black;
color:white;
font-size:100px;
}
.view-container {
position:relative;
}
.view-container > .view.ng-animate {
position:absolute;
top:0;
left:0;
width:100%;
min-height:500px;
}
.view.ng-enter, .view.ng-leave,
.record.ng-anchor {
transition:0.5s linear all;
}
.view.ng-enter {
transform:translateX(100%);
}
.view.ng-enter.ng-enter-active, .view.ng-leave {
transform:translateX(0%);
}
.view.ng-leave.ng-leave-active {
transform:translateX(-100%);
}
.record.ng-anchor-out {
background:red;
}
</file>
</example>
*
* ### How is the element transported?
*
* When an anchor animation occurs, ngAnimate will clone the starting element and position it exactly where the starting
* element is located on screen via absolute positioning. The cloned element will be placed inside of the root element
* of the application (where ng-app was defined) and all of the CSS classes of the starting element will be applied. The
* element will then animate into the `out` and `in` animations and will eventually reach the coordinates and match
* the dimensions of the destination element. During the entire animation a CSS class of `.ng-animate-shim` will be applied
* to both the starting and destination elements in order to hide them from being visible (the CSS styling for the class
* is: `visibility:hidden`). Once the anchor reaches its destination then it will be removed and the destination element
* will become visible since the shim class will be removed.
*
* ### How is the morphing handled?
*
* CSS Anchoring relies on transitions and keyframes and the internal code is intelligent enough to figure out
* what CSS classes differ between the starting element and the destination element. These different CSS classes
* will be added/removed on the anchor element and a transition will be applied (the transition that is provided
* in the anchor class). Long story short, ngAnimate will figure out what classes to add and remove which will
* make the transition of the element as smooth and automatic as possible. Be sure to use simple CSS classes that
* do not rely on DOM nesting structure so that the anchor element appears the same as the starting element (since
* the cloned element is placed inside of root element which is likely close to the body element).
*
* Note that if the root element is on the `<html>` element then the cloned node will be placed inside of body.
*
*
* ## Using $animate in your directive code
*
* So far we've explored how to feed in animations into an AngularJS application, but how do we trigger animations within our own directives in our application?
* By injecting the `$animate` service into our directive code, we can trigger structural and class-based hooks which can then be consumed by animations. Let's
* imagine we have a greeting box that shows and hides itself when the data changes
*
* ```html
* <greeting-box active="onOrOff">Hi there</greeting-box>
* ```
*
* ```js
* ngModule.directive('greetingBox', ['$animate', function($animate) {
* return function(scope, element, attrs) {
* attrs.$observe('active', function(value) {
* value ? $animate.addClass(element, 'on') : $animate.removeClass(element, 'on');
* });
* });
* }]);
* ```
*
* Now the `on` CSS class is added and removed on the greeting box component. Now if we add a CSS class on top of the greeting box element
* in our HTML code then we can trigger a CSS or JS animation to happen.
*
* ```css
* /* normally we would create a CSS class to reference on the element */
* greeting-box.on { transition:0.5s linear all; background:green; color:white; }
* ```
*
* The `$animate` service contains a variety of other methods like `enter`, `leave`, `animate` and `setClass`. To learn more about what's
* possible be sure to visit the {@link ng.$animate $animate service API page}.
*
*
* ## Callbacks and Promises
*
* When `$animate` is called it returns a promise that can be used to capture when the animation has ended. Therefore if we were to trigger
* an animation (within our directive code) then we can continue performing directive and scope related activities after the animation has
* ended by chaining onto the returned promise that animation method returns.
*
* ```js
* // somewhere within the depths of the directive
* $animate.enter(element, parent).then(function() {
* //the animation has completed
* });
* ```
*
* (Note that earlier versions of AngularJS prior to v1.4 required the promise code to be wrapped using `$scope.$apply(...)`. This is not the case
* anymore.)
*
* In addition to the animation promise, we can also make use of animation-related callbacks within our directives and controller code by registering
* an event listener using the `$animate` service. Let's say for example that an animation was triggered on our view
* routing controller to hook into that:
*
* ```js
* ngModule.controller('HomePageController', ['$animate', function($animate) {
* $animate.on('enter', ngViewElement, function(element) {
* // the animation for this route has completed
* }]);
* }])
* ```
*
* (Note that you will need to trigger a digest within the callback to get AngularJS to notice any scope-related changes.)
*/
var copy;
var extend;
var forEach;
var isArray;
var isDefined;
var isElement;
var isFunction;
var isObject;
var isString;
var isUndefined;
var jqLite;
var noop;
/**
* @ngdoc service
* @name $animate
* @kind object
*
* @description
* The ngAnimate `$animate` service documentation is the same for the core `$animate` service.
*
* Click here {@link ng.$animate to learn more about animations with `$animate`}.
*/
angular.module('ngAnimate', [], function initAngularHelpers() {
// Access helpers from AngularJS core.
// Do it inside a `config` block to ensure `window.angular` is available.
noop = angular.noop;
copy = angular.copy;
extend = angular.extend;
jqLite = angular.element;
forEach = angular.forEach;
isArray = angular.isArray;
isString = angular.isString;
isObject = angular.isObject;
isUndefined = angular.isUndefined;
isDefined = angular.isDefined;
isFunction = angular.isFunction;
isElement = angular.isElement;
})
.info({ angularVersion: '1.7.2' })
.directive('ngAnimateSwap', ngAnimateSwapDirective)
.directive('ngAnimateChildren', $$AnimateChildrenDirective)
.factory('$$rAFScheduler', $$rAFSchedulerFactory)
.provider('$$animateQueue', $$AnimateQueueProvider)
.provider('$$animation', $$AnimationProvider)
.provider('$animateCss', $AnimateCssProvider)
.provider('$$animateCssDriver', $$AnimateCssDriverProvider)
.provider('$$animateJs', $$AnimateJsProvider)
.provider('$$animateJsDriver', $$AnimateJsDriverProvider);
})(window, window.angular);
/**
* @license AngularJS v1.7.2
* (c) 2010-2018 Google, Inc. http://angularjs.org
* License: MIT
*/
(function(window, angular) {'use strict';
var forEach;
var isArray;
var isString;
var jqLite;
/**
* @ngdoc module
* @name ngMessages
* @description
*
* The `ngMessages` module provides enhanced support for displaying messages within templates
* (typically within forms or when rendering message objects that return key/value data).
* Instead of relying on JavaScript code and/or complex ng-if statements within your form template to
* show and hide error messages specific to the state of an input field, the `ngMessages` and
* `ngMessage` directives are designed to handle the complexity, inheritance and priority
* sequencing based on the order of how the messages are defined in the template.
*
* Currently, the ngMessages module only contains the code for the `ngMessages`, `ngMessagesInclude`
* `ngMessage`, `ngMessageExp` and `ngMessageDefault` directives.
*
* ## Usage
* The `ngMessages` directive allows keys in a key/value collection to be associated with a child element
* (or 'message') that will show or hide based on the truthiness of that key's value in the collection. A common use
* case for `ngMessages` is to display error messages for inputs using the `$error` object exposed by the
* {@link ngModel ngModel} directive.
*
* The child elements of the `ngMessages` directive are matched to the collection keys by a `ngMessage` or
* `ngMessageExp` directive. The value of these attributes must match a key in the collection that is provided by
* the `ngMessages` directive.
*
* Consider the following example, which illustrates a typical use case of `ngMessages`. Within the form `myForm` we
* have a text input named `myField` which is bound to the scope variable `field` using the {@link ngModel ngModel}
* directive.
*
* The `myField` field is a required input of type `email` with a maximum length of 15 characters.
*
* ```html
* <form name="myForm">
* <label>
* Enter text:
* <input type="email" ng-model="field" name="myField" required maxlength="15" />
* </label>
* <div ng-messages="myForm.myField.$error" role="alert">
* <div ng-message="required">Please enter a value for this field.</div>
* <div ng-message="email">This field must be a valid email address.</div>
* <div ng-message="maxlength">This field can be at most 15 characters long.</div>
* </div>
* </form>
* ```
*
* In order to show error messages corresponding to `myField` we first create an element with an `ngMessages` attribute
* set to the `$error` object owned by the `myField` input in our `myForm` form.
*
* Within this element we then create separate elements for each of the possible errors that `myField` could have.
* The `ngMessage` attribute is used to declare which element(s) will appear for which error - for example,
* setting `ng-message="required"` specifies that this particular element should be displayed when there
* is no value present for the required field `myField` (because the key `required` will be `true` in the object
* `myForm.myField.$error`).
*
* ### Message order
*
* By default, `ngMessages` will only display one message for a particular key/value collection at any time. If more
* than one message (or error) key is currently true, then which message is shown is determined by the order of messages
* in the HTML template code (messages declared first are prioritised). This mechanism means the developer does not have
* to prioritize messages using custom JavaScript code.
*
* Given the following error object for our example (which informs us that the field `myField` currently has both the
* `required` and `email` errors):
*
* ```javascript
* <!-- keep in mind that ngModel automatically sets these error flags -->
* myField.$error = { required : true, email: true, maxlength: false };
* ```
* The `required` message will be displayed to the user since it appears before the `email` message in the DOM.
* Once the user types a single character, the `required` message will disappear (since the field now has a value)
* but the `email` message will be visible because it is still applicable.
*
* ### Displaying multiple messages at the same time
*
* While `ngMessages` will by default only display one error element at a time, the `ng-messages-multiple` attribute can
* be applied to the `ngMessages` container element to cause it to display all applicable error messages at once:
*
* ```html
* <!-- attribute-style usage -->
* <div ng-messages="myForm.myField.$error" ng-messages-multiple>...</div>
*
* <!-- element-style usage -->
* <ng-messages for="myForm.myField.$error" multiple>...</ng-messages>
* ```
*
* ## Reusing and Overriding Messages
* In addition to prioritization, ngMessages also allows for including messages from a remote or an inline
* template. This allows for generic collection of messages to be reused across multiple parts of an
* application.
*
* ```html
* <script type="text/ng-template" id="error-messages">
* <div ng-message="required">This field is required</div>
* <div ng-message="minlength">This field is too short</div>
* </script>
*
* <div ng-messages="myForm.myField.$error" role="alert">
* <div ng-messages-include="error-messages"></div>
* </div>
* ```
*
* However, including generic messages may not be useful enough to match all input fields, therefore,
* `ngMessages` provides the ability to override messages defined in the remote template by redefining
* them within the directive container.
*
* ```html
* <!-- a generic template of error messages known as "my-custom-messages" -->
* <script type="text/ng-template" id="my-custom-messages">
* <div ng-message="required">This field is required</div>
* <div ng-message="minlength">This field is too short</div>
* </script>
*
* <form name="myForm">
* <label>
* Email address
* <input type="email"
* id="email"
* name="myEmail"
* ng-model="email"
* minlength="5"
* required />
* </label>
* <!-- any ng-message elements that appear BEFORE the ng-messages-include will
* override the messages present in the ng-messages-include template -->
* <div ng-messages="myForm.myEmail.$error" role="alert">
* <!-- this required message has overridden the template message -->
* <div ng-message="required">You did not enter your email address</div>
*
* <!-- this is a brand new message and will appear last in the prioritization -->
* <div ng-message="email">Your email address is invalid</div>
*
* <!-- and here are the generic error messages -->
* <div ng-messages-include="my-custom-messages"></div>
* </div>
* </form>
* ```
*
* In the example HTML code above the message that is set on required will override the corresponding
* required message defined within the remote template. Therefore, with particular input fields (such
* email addresses, date fields, autocomplete inputs, etc...), specialized error messages can be applied
* while more generic messages can be used to handle other, more general input errors.
*
* ## Dynamic Messaging
* ngMessages also supports using expressions to dynamically change key values. Using arrays and
* repeaters to list messages is also supported. This means that the code below will be able to
* fully adapt itself and display the appropriate message when any of the expression data changes:
*
* ```html
* <form name="myForm">
* <label>
* Email address
* <input type="email"
* name="myEmail"
* ng-model="email"
* minlength="5"
* required />
* </label>
* <div ng-messages="myForm.myEmail.$error" role="alert">
* <div ng-message="required">You did not enter your email address</div>
* <div ng-repeat="errorMessage in errorMessages">
* <!-- use ng-message-exp for a message whose key is given by an expression -->
* <div ng-message-exp="errorMessage.type">{{ errorMessage.text }}</div>
* </div>
* </div>
* </form>
* ```
*
* The `errorMessage.type` expression can be a string value or it can be an array so
* that multiple errors can be associated with a single error message:
*
* ```html
* <label>
* Email address
* <input type="email"
* ng-model="data.email"
* name="myEmail"
* ng-minlength="5"
* ng-maxlength="100"
* required />
* </label>
* <div ng-messages="myForm.myEmail.$error" role="alert">
* <div ng-message-exp="'required'">You did not enter your email address</div>
* <div ng-message-exp="['minlength', 'maxlength']">
* Your email must be between 5 and 100 characters long
* </div>
* </div>
* ```
*
* Feel free to use other structural directives such as ng-if and ng-switch to further control
* what messages are active and when. Be careful, if you place ng-message on the same element
* as these structural directives, AngularJS may not be able to determine if a message is active
* or not. Therefore it is best to place the ng-message on a child element of the structural
* directive.
*
* ```html
* <div ng-messages="myForm.myEmail.$error" role="alert">
* <div ng-if="showRequiredError">
* <div ng-message="required">Please enter something</div>
* </div>
* </div>
* ```
*
* ## Animations
* If the `ngAnimate` module is active within the application then the `ngMessages`, `ngMessage` and
* `ngMessageExp` directives will trigger animations whenever any messages are added and removed from
* the DOM by the `ngMessages` directive.
*
* Whenever the `ngMessages` directive contains one or more visible messages then the `.ng-active` CSS
* class will be added to the element. The `.ng-inactive` CSS class will be applied when there are no
* messages present. Therefore, CSS transitions and keyframes as well as JavaScript animations can
* hook into the animations whenever these classes are added/removed.
*
* Let's say that our HTML code for our messages container looks like so:
*
* ```html
* <div ng-messages="myMessages" class="my-messages" role="alert">
* <div ng-message="alert" class="some-message">...</div>
* <div ng-message="fail" class="some-message">...</div>
* </div>
* ```
*
* Then the CSS animation code for the message container looks like so:
*
* ```css
* .my-messages {
* transition:1s linear all;
* }
* .my-messages.ng-active {
* // messages are visible
* }
* .my-messages.ng-inactive {
* // messages are hidden
* }
* ```
*
* Whenever an inner message is attached (becomes visible) or removed (becomes hidden) then the enter
* and leave animation is triggered for each particular element bound to the `ngMessage` directive.
*
* Therefore, the CSS code for the inner messages looks like so:
*
* ```css
* .some-message {
* transition:1s linear all;
* }
*
* .some-message.ng-enter {}
* .some-message.ng-enter.ng-enter-active {}
*
* .some-message.ng-leave {}
* .some-message.ng-leave.ng-leave-active {}
* ```
*
* {@link ngAnimate See the ngAnimate docs} to learn how to use JavaScript animations or to learn
* more about ngAnimate.
*
* ## Displaying a default message
* If the ngMessages renders no inner ngMessage directive (i.e. when none of the truthy
* keys are matched by a defined message), then it will render a default message
* using the {@link ngMessageDefault} directive.
* Note that matched messages will always take precedence over unmatched messages. That means
* the default message will not be displayed when another message is matched. This is also
* true for `ng-messages-multiple`.
*
* ```html
* <div ng-messages="myForm.myField.$error" role="alert">
* <div ng-message="required">This field is required</div>
* <div ng-message="minlength">This field is too short</div>
* <div ng-message-default>This field has an input error</div>
* </div>
* ```
*
*/
angular.module('ngMessages', [], function initAngularHelpers() {
// Access helpers from AngularJS core.
// Do it inside a `config` block to ensure `window.angular` is available.
forEach = angular.forEach;
isArray = angular.isArray;
isString = angular.isString;
jqLite = angular.element;
})
.info({ angularVersion: '1.7.2' })
/**
* @ngdoc directive
* @module ngMessages
* @name ngMessages
* @restrict AE
*
* @description
* `ngMessages` is a directive that is designed to show and hide messages based on the state
* of a key/value object that it listens on. The directive itself complements error message
* reporting with the `ngModel` $error object (which stores a key/value state of validation errors).
*
* `ngMessages` manages the state of internal messages within its container element. The internal
* messages use the `ngMessage` directive and will be inserted/removed from the page depending
* on if they're present within the key/value object. By default, only one message will be displayed
* at a time and this depends on the prioritization of the messages within the template. (This can
* be changed by using the `ng-messages-multiple` or `multiple` attribute on the directive container.)
*
* A remote template can also be used (With {@link ngMessagesInclude}) to promote message
* reusability and messages can also be overridden.
*
* A default message can also be displayed when no `ngMessage` directive is inserted, using the
* {@link ngMessageDefault} directive.
*
* {@link module:ngMessages Click here} to learn more about `ngMessages` and `ngMessage`.
*
* @usage
* ```html
* <!-- using attribute directives -->
* <ANY ng-messages="expression" role="alert">
* <ANY ng-message="stringValue">...</ANY>
* <ANY ng-message="stringValue1, stringValue2, ...">...</ANY>
* <ANY ng-message-exp="expressionValue">...</ANY>
* <ANY ng-message-default>...</ANY>
* </ANY>
*
* <!-- or by using element directives -->
* <ng-messages for="expression" role="alert">
* <ng-message when="stringValue">...</ng-message>
* <ng-message when="stringValue1, stringValue2, ...">...</ng-message>
* <ng-message when-exp="expressionValue">...</ng-message>
* <ng-message-default>...</ng-message-default>
* </ng-messages>
* ```
*
* @param {string} ngMessages an AngularJS expression evaluating to a key/value object
* (this is typically the $error object on an ngModel instance).
* @param {string=} ngMessagesMultiple|multiple when set, all messages will be displayed with true
*
* @example
* <example name="ngMessages-directive" module="ngMessagesExample"
* deps="angular-messages.js"
* animations="true" fixBase="true">
* <file name="index.html">
* <form name="myForm">
* <label>
* Enter your name:
* <input type="text"
* name="myName"
* ng-model="name"
* ng-minlength="5"
* ng-maxlength="20"
* required />
* </label>
* <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
*
* <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
* <div ng-message="required">You did not enter a field</div>
* <div ng-message="minlength">Your field is too short</div>
* <div ng-message="maxlength">Your field is too long</div>
* <div ng-message-default>This field has an input error</div>
* </div>
* </form>
* </file>
* <file name="script.js">
* angular.module('ngMessagesExample', ['ngMessages']);
* </file>
* </example>
*/
.directive('ngMessages', ['$animate', function($animate) {
var ACTIVE_CLASS = 'ng-active';
var INACTIVE_CLASS = 'ng-inactive';
return {
require: 'ngMessages',
restrict: 'AE',
controller: ['$element', '$scope', '$attrs', function NgMessagesCtrl($element, $scope, $attrs) {
var ctrl = this;
var latestKey = 0;
var nextAttachId = 0;
this.getAttachId = function getAttachId() { return nextAttachId++; };
var messages = this.messages = {};
var renderLater, cachedCollection;
this.render = function(collection) {
collection = collection || {};
renderLater = false;
cachedCollection = collection;
// this is true if the attribute is empty or if the attribute value is truthy
var multiple = isAttrTruthy($scope, $attrs.ngMessagesMultiple) ||
isAttrTruthy($scope, $attrs.multiple);
var unmatchedMessages = [];
var matchedKeys = {};
var truthyKeys = 0;
var messageItem = ctrl.head;
var messageFound = false;
var totalMessages = 0;
// we use != instead of !== to allow for both undefined and null values
while (messageItem != null) {
totalMessages++;
var messageCtrl = messageItem.message;
var messageUsed = false;
if (!messageFound) {
forEach(collection, function(value, key) {
if (truthy(value) && !messageUsed) {
truthyKeys++;
if (messageCtrl.test(key)) {
// this is to prevent the same error name from showing up twice
if (matchedKeys[key]) return;
matchedKeys[key] = true;
messageUsed = true;
messageCtrl.attach();
}
}
});
}
if (messageUsed) {
// unless we want to display multiple messages then we should
// set a flag here to avoid displaying the next message in the list
messageFound = !multiple;
} else {
unmatchedMessages.push(messageCtrl);
}
messageItem = messageItem.next;
}
forEach(unmatchedMessages, function(messageCtrl) {
messageCtrl.detach();
});
var messageMatched = unmatchedMessages.length !== totalMessages;
var attachDefault = ctrl.default && !messageMatched && truthyKeys > 0;
if (attachDefault) {
ctrl.default.attach();
} else if (ctrl.default) {
ctrl.default.detach();
}
if (messageMatched || attachDefault) {
$animate.setClass($element, ACTIVE_CLASS, INACTIVE_CLASS);
} else {
$animate.setClass($element, INACTIVE_CLASS, ACTIVE_CLASS);
}
};
$scope.$watchCollection($attrs.ngMessages || $attrs['for'], ctrl.render);
this.reRender = function() {
if (!renderLater) {
renderLater = true;
$scope.$evalAsync(function() {
if (renderLater && cachedCollection) {
ctrl.render(cachedCollection);
}
});
}
};
this.register = function(comment, messageCtrl, isDefault) {
if (isDefault) {
ctrl.default = messageCtrl;
} else {
var nextKey = latestKey.toString();
messages[nextKey] = {
message: messageCtrl
};
insertMessageNode($element[0], comment, nextKey);
comment.$$ngMessageNode = nextKey;
latestKey++;
}
ctrl.reRender();
};
this.deregister = function(comment, isDefault) {
if (isDefault) {
delete ctrl.default;
} else {
var key = comment.$$ngMessageNode;
delete comment.$$ngMessageNode;
removeMessageNode($element[0], comment, key);
delete messages[key];
}
ctrl.reRender();
};
function findPreviousMessage(parent, comment) {
var prevNode = comment;
var parentLookup = [];
while (prevNode && prevNode !== parent) {
var prevKey = prevNode.$$ngMessageNode;
if (prevKey && prevKey.length) {
return messages[prevKey];
}
// dive deeper into the DOM and examine its children for any ngMessage
// comments that may be in an element that appears deeper in the list
if (prevNode.childNodes.length && parentLookup.indexOf(prevNode) === -1) {
parentLookup.push(prevNode);
prevNode = prevNode.childNodes[prevNode.childNodes.length - 1];
} else if (prevNode.previousSibling) {
prevNode = prevNode.previousSibling;
} else {
prevNode = prevNode.parentNode;
parentLookup.push(prevNode);
}
}
}
function insertMessageNode(parent, comment, key) {
var messageNode = messages[key];
if (!ctrl.head) {
ctrl.head = messageNode;
} else {
var match = findPreviousMessage(parent, comment);
if (match) {
messageNode.next = match.next;
match.next = messageNode;
} else {
messageNode.next = ctrl.head;
ctrl.head = messageNode;
}
}
}
function removeMessageNode(parent, comment, key) {
var messageNode = messages[key];
// This message node may have already been removed by a call to deregister()
if (!messageNode) return;
var match = findPreviousMessage(parent, comment);
if (match) {
match.next = messageNode.next;
} else {
ctrl.head = messageNode.next;
}
}
}]
};
function isAttrTruthy(scope, attr) {
return (isString(attr) && attr.length === 0) || //empty attribute
truthy(scope.$eval(attr));
}
function truthy(val) {
return isString(val) ? val.length : !!val;
}
}])
/**
* @ngdoc directive
* @name ngMessagesInclude
* @restrict AE
* @scope
*
* @description
* `ngMessagesInclude` is a directive with the purpose to import existing ngMessage template
* code from a remote template and place the downloaded template code into the exact spot
* that the ngMessagesInclude directive is placed within the ngMessages container. This allows
* for a series of pre-defined messages to be reused and also allows for the developer to
* determine what messages are overridden due to the placement of the ngMessagesInclude directive.
*
* @usage
* ```html
* <!-- using attribute directives -->
* <ANY ng-messages="expression" role="alert">
* <ANY ng-messages-include="remoteTplString">...</ANY>
* </ANY>
*
* <!-- or by using element directives -->
* <ng-messages for="expression" role="alert">
* <ng-messages-include src="expressionValue1">...</ng-messages-include>
* </ng-messages>
* ```
*
* {@link module:ngMessages Click here} to learn more about `ngMessages` and `ngMessage`.
*
* @param {string} ngMessagesInclude|src a string value corresponding to the remote template.
*/
.directive('ngMessagesInclude',
['$templateRequest', '$document', '$compile', function($templateRequest, $document, $compile) {
return {
restrict: 'AE',
require: '^^ngMessages', // we only require this for validation sake
link: function($scope, element, attrs) {
var src = attrs.ngMessagesInclude || attrs.src;
$templateRequest(src).then(function(html) {
if ($scope.$$destroyed) return;
if (isString(html) && !html.trim()) {
// Empty template - nothing to compile
replaceElementWithMarker(element, src);
} else {
// Non-empty template - compile and link
$compile(html)($scope, function(contents) {
element.after(contents);
replaceElementWithMarker(element, src);
});
}
});
}
};
// Helpers
function replaceElementWithMarker(element, src) {
// A comment marker is placed for debugging purposes
var comment = $compile.$$createComment ?
$compile.$$createComment('ngMessagesInclude', src) :
$document[0].createComment(' ngMessagesInclude: ' + src + ' ');
var marker = jqLite(comment);
element.after(marker);
// Don't pollute the DOM anymore by keeping an empty directive element
element.remove();
}
}])
/**
* @ngdoc directive
* @name ngMessage
* @restrict AE
* @scope
* @priority 1
*
* @description
* `ngMessage` is a directive with the purpose to show and hide a particular message.
* For `ngMessage` to operate, a parent `ngMessages` directive on a parent DOM element
* must be situated since it determines which messages are visible based on the state
* of the provided key/value map that `ngMessages` listens on.
*
* More information about using `ngMessage` can be found in the
* {@link module:ngMessages `ngMessages` module documentation}.
*
* @usage
* ```html
* <!-- using attribute directives -->
* <ANY ng-messages="expression" role="alert">
* <ANY ng-message="stringValue">...</ANY>
* <ANY ng-message="stringValue1, stringValue2, ...">...</ANY>
* </ANY>
*
* <!-- or by using element directives -->
* <ng-messages for="expression" role="alert">
* <ng-message when="stringValue">...</ng-message>
* <ng-message when="stringValue1, stringValue2, ...">...</ng-message>
* </ng-messages>
* ```
*
* @param {expression} ngMessage|when a string value corresponding to the message key.
*/
.directive('ngMessage', ngMessageDirectiveFactory())
/**
* @ngdoc directive
* @name ngMessageExp
* @restrict AE
* @priority 1
* @scope
*
* @description
* `ngMessageExp` is the same as {@link directive:ngMessage `ngMessage`}, but instead of a static
* value, it accepts an expression to be evaluated for the message key.
*
* @usage
* ```html
* <!-- using attribute directives -->
* <ANY ng-messages="expression">
* <ANY ng-message-exp="expressionValue">...</ANY>
* </ANY>
*
* <!-- or by using element directives -->
* <ng-messages for="expression">
* <ng-message when-exp="expressionValue">...</ng-message>
* </ng-messages>
* ```
*
* {@link module:ngMessages Click here} to learn more about `ngMessages` and `ngMessage`.
*
* @param {expression} ngMessageExp|whenExp an expression value corresponding to the message key.
*/
.directive('ngMessageExp', ngMessageDirectiveFactory())
/**
* @ngdoc directive
* @name ngMessageDefault
* @restrict AE
* @scope
*
* @description
* `ngMessageDefault` is a directive with the purpose to show and hide a default message for
* {@link directive:ngMessages}, when none of provided messages matches.
*
* More information about using `ngMessageDefault` can be found in the
* {@link module:ngMessages `ngMessages` module documentation}.
*
* @usage
* ```html
* <!-- using attribute directives -->
* <ANY ng-messages="expression" role="alert">
* <ANY ng-message="stringValue">...</ANY>
* <ANY ng-message="stringValue1, stringValue2, ...">...</ANY>
* <ANY ng-message-default>...</ANY>
* </ANY>
*
* <!-- or by using element directives -->
* <ng-messages for="expression" role="alert">
* <ng-message when="stringValue">...</ng-message>
* <ng-message when="stringValue1, stringValue2, ...">...</ng-message>
* <ng-message-default>...</ng-message-default>
* </ng-messages>
*
*/
.directive('ngMessageDefault', ngMessageDirectiveFactory(true));
function ngMessageDirectiveFactory(isDefault) {
return ['$animate', function($animate) {
return {
restrict: 'AE',
transclude: 'element',
priority: 1, // must run before ngBind, otherwise the text is set on the comment
terminal: true,
require: '^^ngMessages',
link: function(scope, element, attrs, ngMessagesCtrl, $transclude) {
var commentNode, records, staticExp, dynamicExp;
if (!isDefault) {
commentNode = element[0];
staticExp = attrs.ngMessage || attrs.when;
dynamicExp = attrs.ngMessageExp || attrs.whenExp;
var assignRecords = function(items) {
records = items
? (isArray(items)
? items
: items.split(/[\s,]+/))
: null;
ngMessagesCtrl.reRender();
};
if (dynamicExp) {
assignRecords(scope.$eval(dynamicExp));
scope.$watchCollection(dynamicExp, assignRecords);
} else {
assignRecords(staticExp);
}
}
var currentElement, messageCtrl;
ngMessagesCtrl.register(commentNode, messageCtrl = {
test: function(name) {
return contains(records, name);
},
attach: function() {
if (!currentElement) {
$transclude(function(elm, newScope) {
$animate.enter(elm, null, element);
currentElement = elm;
// Each time we attach this node to a message we get a new id that we can match
// when we are destroying the node later.
var $$attachId = currentElement.$$attachId = ngMessagesCtrl.getAttachId();
// in the event that the element or a parent element is destroyed
// by another structural directive then it's time
// to deregister the message from the controller
currentElement.on('$destroy', function() {
// If the message element was removed via a call to `detach` then `currentElement` will be null
// So this handler only handles cases where something else removed the message element.
if (currentElement && currentElement.$$attachId === $$attachId) {
ngMessagesCtrl.deregister(commentNode, isDefault);
messageCtrl.detach();
}
newScope.$destroy();
});
});
}
},
detach: function() {
if (currentElement) {
var elm = currentElement;
currentElement = null;
$animate.leave(elm);
}
}
}, isDefault);
// We need to ensure that this directive deregisters itself when it no longer exists
// Normally this is done when the attached element is destroyed; but if this directive
// gets removed before we attach the message to the DOM there is nothing to watch
// in which case we must deregister when the containing scope is destroyed.
scope.$on('$destroy', function() {
ngMessagesCtrl.deregister(commentNode, isDefault);
});
}
};
}];
function contains(collection, key) {
if (collection) {
return isArray(collection)
? collection.indexOf(key) >= 0
: collection.hasOwnProperty(key);
}
}
}
})(window, window.angular);
/**
* State-based routing for AngularJS
* @version v0.4.3
* @link http://angular-ui.github.com/
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
/* commonjs package manager support (eg componentjs) */
if (typeof module !== "undefined" && typeof exports !== "undefined" && module.exports === exports){
module.exports = 'ui.router';
}
(function (window, angular, undefined) {
/*jshint globalstrict:true*/
/*global angular:false*/
'use strict';
var isDefined = angular.isDefined,
isFunction = angular.isFunction,
isString = angular.isString,
isObject = angular.isObject,
isArray = angular.isArray,
forEach = angular.forEach,
extend = angular.extend,
copy = angular.copy,
toJson = angular.toJson;
function inherit(parent, extra) {
return extend(new (extend(function() {}, { prototype: parent }))(), extra);
}
function merge(dst) {
forEach(arguments, function(obj) {
if (obj !== dst) {
forEach(obj, function(value, key) {
if (!dst.hasOwnProperty(key)) dst[key] = value;
});
}
});
return dst;
}
/**
* Finds the common ancestor path between two states.
*
* @param {Object} first The first state.
* @param {Object} second The second state.
* @return {Array} Returns an array of state names in descending order, not including the root.
*/
function ancestors(first, second) {
var path = [];
for (var n in first.path) {
if (first.path[n] !== second.path[n]) break;
path.push(first.path[n]);
}
return path;
}
/**
* IE8-safe wrapper for `Object.keys()`.
*
* @param {Object} object A JavaScript object.
* @return {Array} Returns the keys of the object as an array.
*/
function objectKeys(object) {
if (Object.keys) {
return Object.keys(object);
}
var result = [];
forEach(object, function(val, key) {
result.push(key);
});
return result;
}
/**
* IE8-safe wrapper for `Array.prototype.indexOf()`.
*
* @param {Array} array A JavaScript array.
* @param {*} value A value to search the array for.
* @return {Number} Returns the array index value of `value`, or `-1` if not present.
*/
function indexOf(array, value) {
if (Array.prototype.indexOf) {
return array.indexOf(value, Number(arguments[2]) || 0);
}
var len = array.length >>> 0, from = Number(arguments[2]) || 0;
from = (from < 0) ? Math.ceil(from) : Math.floor(from);
if (from < 0) from += len;
for (; from < len; from++) {
if (from in array && array[from] === value) return from;
}
return -1;
}
/**
* Merges a set of parameters with all parameters inherited between the common parents of the
* current state and a given destination state.
*
* @param {Object} currentParams The value of the current state parameters ($stateParams).
* @param {Object} newParams The set of parameters which will be composited with inherited params.
* @param {Object} $current Internal definition of object representing the current state.
* @param {Object} $to Internal definition of object representing state to transition to.
*/
function inheritParams(currentParams, newParams, $current, $to) {
var parents = ancestors($current, $to), parentParams, inherited = {}, inheritList = [];
for (var i in parents) {
if (!parents[i] || !parents[i].params) continue;
parentParams = objectKeys(parents[i].params);
if (!parentParams.length) continue;
for (var j in parentParams) {
if (indexOf(inheritList, parentParams[j]) >= 0) continue;
inheritList.push(parentParams[j]);
inherited[parentParams[j]] = currentParams[parentParams[j]];
}
}
return extend({}, inherited, newParams);
}
/**
* Performs a non-strict comparison of the subset of two objects, defined by a list of keys.
*
* @param {Object} a The first object.
* @param {Object} b The second object.
* @param {Array} keys The list of keys within each object to compare. If the list is empty or not specified,
* it defaults to the list of keys in `a`.
* @return {Boolean} Returns `true` if the keys match, otherwise `false`.
*/
function equalForKeys(a, b, keys) {
if (!keys) {
keys = [];
for (var n in a) keys.push(n); // Used instead of Object.keys() for IE8 compatibility
}
for (var i=0; i<keys.length; i++) {
var k = keys[i];
if (a[k] != b[k]) return false; // Not '===', values aren't necessarily normalized
}
return true;
}
/**
* Returns the subset of an object, based on a list of keys.
*
* @param {Array} keys
* @param {Object} values
* @return {Boolean} Returns a subset of `values`.
*/
function filterByKeys(keys, values) {
var filtered = {};
forEach(keys, function (name) {
filtered[name] = values[name];
});
return filtered;
}
// like _.indexBy
// when you know that your index values will be unique, or you want last-one-in to win
function indexBy(array, propName) {
var result = {};
forEach(array, function(item) {
result[item[propName]] = item;
});
return result;
}
// extracted from underscore.js
// Return a copy of the object only containing the whitelisted properties.
function pick(obj) {
var copy = {};
var keys = Array.prototype.concat.apply(Array.prototype, Array.prototype.slice.call(arguments, 1));
forEach(keys, function(key) {
if (key in obj) copy[key] = obj[key];
});
return copy;
}
// extracted from underscore.js
// Return a copy of the object omitting the blacklisted properties.
function omit(obj) {
var copy = {};
var keys = Array.prototype.concat.apply(Array.prototype, Array.prototype.slice.call(arguments, 1));
for (var key in obj) {
if (indexOf(keys, key) == -1) copy[key] = obj[key];
}
return copy;
}
function pluck(collection, key) {
var result = isArray(collection) ? [] : {};
forEach(collection, function(val, i) {
result[i] = isFunction(key) ? key(val) : val[key];
});
return result;
}
function filter(collection, callback) {
var array = isArray(collection);
var result = array ? [] : {};
forEach(collection, function(val, i) {
if (callback(val, i)) {
result[array ? result.length : i] = val;
}
});
return result;
}
function map(collection, callback) {
var result = isArray(collection) ? [] : {};
forEach(collection, function(val, i) {
result[i] = callback(val, i);
});
return result;
}
// issue #2676 #2889
function silenceUncaughtInPromise (promise) {
return promise.then(undefined, function() {}) && promise;
}
/**
* @ngdoc overview
* @name ui.router.util
*
* @description
* # ui.router.util sub-module
*
* This module is a dependency of other sub-modules. Do not include this module as a dependency
* in your angular app (use {@link ui.router} module instead).
*
*/
angular.module('ui.router.util', ['ng']);
/**
* @ngdoc overview
* @name ui.router.router
*
* @requires ui.router.util
*
* @description
* # ui.router.router sub-module
*
* This module is a dependency of other sub-modules. Do not include this module as a dependency
* in your angular app (use {@link ui.router} module instead).
*/
angular.module('ui.router.router', ['ui.router.util']);
/**
* @ngdoc overview
* @name ui.router.state
*
* @requires ui.router.router
* @requires ui.router.util
*
* @description
* # ui.router.state sub-module
*
* This module is a dependency of the main ui.router module. Do not include this module as a dependency
* in your angular app (use {@link ui.router} module instead).
*
*/
angular.module('ui.router.state', ['ui.router.router', 'ui.router.util']);
/**
* @ngdoc overview
* @name ui.router
*
* @requires ui.router.state
*
* @description
* # ui.router
*
* ## The main module for ui.router
* There are several sub-modules included with the ui.router module, however only this module is needed
* as a dependency within your angular app. The other modules are for organization purposes.
*
* The modules are:
* * ui.router - the main "umbrella" module
* * ui.router.router -
*
* *You'll need to include **only** this module as the dependency within your angular app.*
*
* <pre>
* <!doctype html>
* <html ng-app="myApp">
* <head>
* <script src="js/angular.js"></script>
* <!-- Include the ui-router script -->
* <script src="js/angular-ui-router.min.js"></script>
* <script>
* // ...and add 'ui.router' as a dependency
* var myApp = angular.module('myApp', ['ui.router']);
* </script>
* </head>
* <body>
* </body>
* </html>
* </pre>
*/
angular.module('ui.router', ['ui.router.state']);
angular.module('ui.router.compat', ['ui.router']);
/**
* @ngdoc object
* @name ui.router.util.$resolve
*
* @requires $q
* @requires $injector
*
* @description
* Manages resolution of (acyclic) graphs of promises.
*/
$Resolve.$inject = ['$q', '$injector'];
function $Resolve( $q, $injector) {
var VISIT_IN_PROGRESS = 1,
VISIT_DONE = 2,
NOTHING = {},
NO_DEPENDENCIES = [],
NO_LOCALS = NOTHING,
NO_PARENT = extend($q.when(NOTHING), { $$promises: NOTHING, $$values: NOTHING });
/**
* @ngdoc function
* @name ui.router.util.$resolve#study
* @methodOf ui.router.util.$resolve
*
* @description
* Studies a set of invocables that are likely to be used multiple times.
* <pre>
* $resolve.study(invocables)(locals, parent, self)
* </pre>
* is equivalent to
* <pre>
* $resolve.resolve(invocables, locals, parent, self)
* </pre>
* but the former is more efficient (in fact `resolve` just calls `study`
* internally).
*
* @param {object} invocables Invocable objects
* @return {function} a function to pass in locals, parent and self
*/
this.study = function (invocables) {
if (!isObject(invocables)) throw new Error("'invocables' must be an object");
var invocableKeys = objectKeys(invocables || {});
// Perform a topological sort of invocables to build an ordered plan
var plan = [], cycle = [], visited = {};
function visit(value, key) {
if (visited[key] === VISIT_DONE) return;
cycle.push(key);
if (visited[key] === VISIT_IN_PROGRESS) {
cycle.splice(0, indexOf(cycle, key));
throw new Error("Cyclic dependency: " + cycle.join(" -> "));
}
visited[key] = VISIT_IN_PROGRESS;
if (isString(value)) {
plan.push(key, [ function() { return $injector.get(value); }], NO_DEPENDENCIES);
} else {
var params = $injector.annotate(value);
forEach(params, function (param) {
if (param !== key && invocables.hasOwnProperty(param)) visit(invocables[param], param);
});
plan.push(key, value, params);
}
cycle.pop();
visited[key] = VISIT_DONE;
}
forEach(invocables, visit);
invocables = cycle = visited = null; // plan is all that's required
function isResolve(value) {
return isObject(value) && value.then && value.$$promises;
}
return function (locals, parent, self) {
if (isResolve(locals) && self === undefined) {
self = parent; parent = locals; locals = null;
}
if (!locals) locals = NO_LOCALS;
else if (!isObject(locals)) {
throw new Error("'locals' must be an object");
}
if (!parent) parent = NO_PARENT;
else if (!isResolve(parent)) {
throw new Error("'parent' must be a promise returned by $resolve.resolve()");
}
// To complete the overall resolution, we have to wait for the parent
// promise and for the promise for each invokable in our plan.
var resolution = $q.defer(),
result = silenceUncaughtInPromise(resolution.promise),
promises = result.$$promises = {},
values = extend({}, locals),
wait = 1 + plan.length/3,
merged = false;
silenceUncaughtInPromise(result);
function done() {
// Merge parent values we haven't got yet and publish our own $$values
if (!--wait) {
if (!merged) merge(values, parent.$$values);
result.$$values = values;
result.$$promises = result.$$promises || true; // keep for isResolve()
delete result.$$inheritedValues;
resolution.resolve(values);
}
}
function fail(reason) {
result.$$failure = reason;
resolution.reject(reason);
}
// Short-circuit if parent has already failed
if (isDefined(parent.$$failure)) {
fail(parent.$$failure);
return result;
}
if (parent.$$inheritedValues) {
merge(values, omit(parent.$$inheritedValues, invocableKeys));
}
// Merge parent values if the parent has already resolved, or merge
// parent promises and wait if the parent resolve is still in progress.
extend(promises, parent.$$promises);
if (parent.$$values) {
merged = merge(values, omit(parent.$$values, invocableKeys));
result.$$inheritedValues = omit(parent.$$values, invocableKeys);
done();
} else {
if (parent.$$inheritedValues) {
result.$$inheritedValues = omit(parent.$$inheritedValues, invocableKeys);
}
parent.then(done, fail);
}
// Process each invocable in the plan, but ignore any where a local of the same name exists.
for (var i=0, ii=plan.length; i<ii; i+=3) {
if (locals.hasOwnProperty(plan[i])) done();
else invoke(plan[i], plan[i+1], plan[i+2]);
}
function invoke(key, invocable, params) {
// Create a deferred for this invocation. Failures will propagate to the resolution as well.
var invocation = $q.defer(), waitParams = 0;
function onfailure(reason) {
invocation.reject(reason);
fail(reason);
}
// Wait for any parameter that we have a promise for (either from parent or from this
// resolve; in that case study() will have made sure it's ordered before us in the plan).
forEach(params, function (dep) {
if (promises.hasOwnProperty(dep) && !locals.hasOwnProperty(dep)) {
waitParams++;
promises[dep].then(function (result) {
values[dep] = result;
if (!(--waitParams)) proceed();
}, onfailure);
}
});
if (!waitParams) proceed();
function proceed() {
if (isDefined(result.$$failure)) return;
try {
invocation.resolve($injector.invoke(invocable, self, values));
invocation.promise.then(function (result) {
values[key] = result;
done();
}, onfailure);
} catch (e) {
onfailure(e);
}
}
// Publish promise synchronously; invocations further down in the plan may depend on it.
promises[key] = silenceUncaughtInPromise(invocation.promise);
}
return result;
};
};
/**
* @ngdoc function
* @name ui.router.util.$resolve#resolve
* @methodOf ui.router.util.$resolve
*
* @description
* Resolves a set of invocables. An invocable is a function to be invoked via
* `$injector.invoke()`, and can have an arbitrary number of dependencies.
* An invocable can either return a value directly,
* or a `$q` promise. If a promise is returned it will be resolved and the
* resulting value will be used instead. Dependencies of invocables are resolved
* (in this order of precedence)
*
* - from the specified `locals`
* - from another invocable that is part of this `$resolve` call
* - from an invocable that is inherited from a `parent` call to `$resolve`
* (or recursively
* - from any ancestor `$resolve` of that parent).
*
* The return value of `$resolve` is a promise for an object that contains
* (in this order of precedence)
*
* - any `locals` (if specified)
* - the resolved return values of all injectables
* - any values inherited from a `parent` call to `$resolve` (if specified)
*
* The promise will resolve after the `parent` promise (if any) and all promises
* returned by injectables have been resolved. If any invocable
* (or `$injector.invoke`) throws an exception, or if a promise returned by an
* invocable is rejected, the `$resolve` promise is immediately rejected with the
* same error. A rejection of a `parent` promise (if specified) will likewise be
* propagated immediately. Once the `$resolve` promise has been rejected, no
* further invocables will be called.
*
* Cyclic dependencies between invocables are not permitted and will cause `$resolve`
* to throw an error. As a special case, an injectable can depend on a parameter
* with the same name as the injectable, which will be fulfilled from the `parent`
* injectable of the same name. This allows inherited values to be decorated.
* Note that in this case any other injectable in the same `$resolve` with the same
* dependency would see the decorated value, not the inherited value.
*
* Note that missing dependencies -- unlike cyclic dependencies -- will cause an
* (asynchronous) rejection of the `$resolve` promise rather than a (synchronous)
* exception.
*
* Invocables are invoked eagerly as soon as all dependencies are available.
* This is true even for dependencies inherited from a `parent` call to `$resolve`.
*
* As a special case, an invocable can be a string, in which case it is taken to
* be a service name to be passed to `$injector.get()`. This is supported primarily
* for backwards-compatibility with the `resolve` property of `$routeProvider`
* routes.
*
* @param {object} invocables functions to invoke or
* `$injector` services to fetch.
* @param {object} locals values to make available to the injectables
* @param {object} parent a promise returned by another call to `$resolve`.
* @param {object} self the `this` for the invoked methods
* @return {object} Promise for an object that contains the resolved return value
* of all invocables, as well as any inherited and local values.
*/
this.resolve = function (invocables, locals, parent, self) {
return this.study(invocables)(locals, parent, self);
};
}
angular.module('ui.router.util').service('$resolve', $Resolve);
/**
* @ngdoc object
* @name ui.router.util.$templateFactoryProvider
*
* @description
* Provider for $templateFactory. Manages which template-loading mechanism to
* use, and will default to the most recent one ($templateRequest on Angular
* versions starting from 1.3, $http otherwise).
*/
function TemplateFactoryProvider() {
var shouldUnsafelyUseHttp = angular.version.minor < 3;
/**
* @ngdoc function
* @name ui.router.util.$templateFactoryProvider#shouldUnsafelyUseHttp
* @methodOf ui.router.util.$templateFactoryProvider
*
* @description
* Forces $templateFactory to use $http instead of $templateRequest. This
* might cause XSS, as $http doesn't enforce the regular security checks for
* templates that have been introduced in Angular 1.3. Note that setting this
* to false on Angular older than 1.3.x will crash, as the $templateRequest
* service (and the security checks) are not implemented on these versions.
*
* See the $sce documentation, section
* <a href="https://docs.angularjs.org/api/ng/service/$sce#impact-on-loading-templates">
* Impact on loading templates</a> for more details about this mechanism.
*
* @param {boolean} value
*/
this.shouldUnsafelyUseHttp = function(value) {
shouldUnsafelyUseHttp = !!value;
};
/**
* @ngdoc object
* @name ui.router.util.$templateFactory
*
* @requires $http
* @requires $templateCache
* @requires $injector
*
* @description
* Service. Manages loading of templates.
*/
this.$get = ['$http', '$templateCache', '$injector', function($http, $templateCache, $injector){
return new TemplateFactory($http, $templateCache, $injector, shouldUnsafelyUseHttp);}];
}
/**
* @ngdoc object
* @name ui.router.util.$templateFactory
*
* @requires $http
* @requires $templateCache
* @requires $injector
*
* @description
* Service. Manages loading of templates.
*/
function TemplateFactory($http, $templateCache, $injector, shouldUnsafelyUseHttp) {
/**
* @ngdoc function
* @name ui.router.util.$templateFactory#fromConfig
* @methodOf ui.router.util.$templateFactory
*
* @description
* Creates a template from a configuration object.
*
* @param {object} config Configuration object for which to load a template.
* The following properties are search in the specified order, and the first one
* that is defined is used to create the template:
*
* @param {string|object} config.template html string template or function to
* load via {@link ui.router.util.$templateFactory#fromString fromString}.
* @param {string|object} config.templateUrl url to load or a function returning
* the url to load via {@link ui.router.util.$templateFactory#fromUrl fromUrl}.
* @param {Function} config.templateProvider function to invoke via
* {@link ui.router.util.$templateFactory#fromProvider fromProvider}.
* @param {object} params Parameters to pass to the template function.
* @param {object} locals Locals to pass to `invoke` if the template is loaded
* via a `templateProvider`. Defaults to `{ params: params }`.
*
* @return {string|object} The template html as a string, or a promise for
* that string,or `null` if no template is configured.
*/
this.fromConfig = function (config, params, locals) {
return (
isDefined(config.template) ? this.fromString(config.template, params) :
isDefined(config.templateUrl) ? this.fromUrl(config.templateUrl, params) :
isDefined(config.templateProvider) ? this.fromProvider(config.templateProvider, params, locals) :
null
);
};
/**
* @ngdoc function
* @name ui.router.util.$templateFactory#fromString
* @methodOf ui.router.util.$templateFactory
*
* @description
* Creates a template from a string or a function returning a string.
*
* @param {string|object} template html template as a string or function that
* returns an html template as a string.
* @param {object} params Parameters to pass to the template function.
*
* @return {string|object} The template html as a string, or a promise for that
* string.
*/
this.fromString = function (template, params) {
return isFunction(template) ? template(params) : template;
};
/**
* @ngdoc function
* @name ui.router.util.$templateFactory#fromUrl
* @methodOf ui.router.util.$templateFactory
*
* @description
* Loads a template from the a URL via `$http` and `$templateCache`.
*
* @param {string|Function} url url of the template to load, or a function
* that returns a url.
* @param {Object} params Parameters to pass to the url function.
* @return {string|Promise.<string>} The template html as a string, or a promise
* for that string.
*/
this.fromUrl = function (url, params) {
if (isFunction(url)) url = url(params);
if (url == null) return null;
else {
if(!shouldUnsafelyUseHttp) {
return $injector.get('$templateRequest')(url);
} else {
return $http
.get(url, { cache: $templateCache, headers: { Accept: 'text/html' }})
.then(function(response) { return response.data; });
}
}
};
/**
* @ngdoc function
* @name ui.router.util.$templateFactory#fromProvider
* @methodOf ui.router.util.$templateFactory
*
* @description
* Creates a template by invoking an injectable provider function.
*
* @param {Function} provider Function to invoke via `$injector.invoke`
* @param {Object} params Parameters for the template.
* @param {Object} locals Locals to pass to `invoke`. Defaults to
* `{ params: params }`.
* @return {string|Promise.<string>} The template html as a string, or a promise
* for that string.
*/
this.fromProvider = function (provider, params, locals) {
return $injector.invoke(provider, null, locals || { params: params });
};
}
angular.module('ui.router.util').provider('$templateFactory', TemplateFactoryProvider);
var $$UMFP; // reference to $UrlMatcherFactoryProvider
/**
* @ngdoc object
* @name ui.router.util.type:UrlMatcher
*
* @description
* Matches URLs against patterns and extracts named parameters from the path or the search
* part of the URL. A URL pattern consists of a path pattern, optionally followed by '?' and a list
* of search parameters. Multiple search parameter names are separated by '&'. Search parameters
* do not influence whether or not a URL is matched, but their values are passed through into
* the matched parameters returned by {@link ui.router.util.type:UrlMatcher#methods_exec exec}.
*
* Path parameter placeholders can be specified using simple colon/catch-all syntax or curly brace
* syntax, which optionally allows a regular expression for the parameter to be specified:
*
* * `':'` name - colon placeholder
* * `'*'` name - catch-all placeholder
* * `'{' name '}'` - curly placeholder
* * `'{' name ':' regexp|type '}'` - curly placeholder with regexp or type name. Should the
* regexp itself contain curly braces, they must be in matched pairs or escaped with a backslash.
*
* Parameter names may contain only word characters (latin letters, digits, and underscore) and
* must be unique within the pattern (across both path and search parameters). For colon
* placeholders or curly placeholders without an explicit regexp, a path parameter matches any
* number of characters other than '/'. For catch-all placeholders the path parameter matches
* any number of characters.
*
* Examples:
*
* * `'/hello/'` - Matches only if the path is exactly '/hello/'. There is no special treatment for
* trailing slashes, and patterns have to match the entire path, not just a prefix.
* * `'/user/:id'` - Matches '/user/bob' or '/user/1234!!!' or even '/user/' but not '/user' or
* '/user/bob/details'. The second path segment will be captured as the parameter 'id'.
* * `'/user/{id}'` - Same as the previous example, but using curly brace syntax.
* * `'/user/{id:[^/]*}'` - Same as the previous example.
* * `'/user/{id:[0-9a-fA-F]{1,8}}'` - Similar to the previous example, but only matches if the id
* parameter consists of 1 to 8 hex digits.
* * `'/files/{path:.*}'` - Matches any URL starting with '/files/' and captures the rest of the
* path into the parameter 'path'.
* * `'/files/*path'` - ditto.
* * `'/calendar/{start:date}'` - Matches "/calendar/2014-11-12" (because the pattern defined
* in the built-in `date` Type matches `2014-11-12`) and provides a Date object in $stateParams.start
*
* @param {string} pattern The pattern to compile into a matcher.
* @param {Object} config A configuration object hash:
* @param {Object=} parentMatcher Used to concatenate the pattern/config onto
* an existing UrlMatcher
*
* * `caseInsensitive` - `true` if URL matching should be case insensitive, otherwise `false`, the default value (for backward compatibility) is `false`.
* * `strict` - `false` if matching against a URL with a trailing slash should be treated as equivalent to a URL without a trailing slash, the default value is `true`.
*
* @property {string} prefix A static prefix of this pattern. The matcher guarantees that any
* URL matching this matcher (i.e. any string for which {@link ui.router.util.type:UrlMatcher#methods_exec exec()} returns
* non-null) will start with this prefix.
*
* @property {string} source The pattern that was passed into the constructor
*
* @property {string} sourcePath The path portion of the source property
*
* @property {string} sourceSearch The search portion of the source property
*
* @property {string} regex The constructed regex that will be used to match against the url when
* it is time to determine which url will match.
*
* @returns {Object} New `UrlMatcher` object
*/
function UrlMatcher(pattern, config, parentMatcher) {
config = extend({ params: {} }, isObject(config) ? config : {});
// Find all placeholders and create a compiled pattern, using either classic or curly syntax:
// '*' name
// ':' name
// '{' name '}'
// '{' name ':' regexp '}'
// The regular expression is somewhat complicated due to the need to allow curly braces
// inside the regular expression. The placeholder regexp breaks down as follows:
// ([:*])([\w\[\]]+) - classic placeholder ($1 / $2) (search version has - for snake-case)
// \{([\w\[\]]+)(?:\:\s*( ... ))?\} - curly brace placeholder ($3) with optional regexp/type ... ($4) (search version has - for snake-case
// (?: ... | ... | ... )+ - the regexp consists of any number of atoms, an atom being either
// [^{}\\]+ - anything other than curly braces or backslash
// \\. - a backslash escape
// \{(?:[^{}\\]+|\\.)*\} - a matched set of curly braces containing other atoms
var placeholder = /([:*])([\w\[\]]+)|\{([\w\[\]]+)(?:\:\s*((?:[^{}\\]+|\\.|\{(?:[^{}\\]+|\\.)*\})+))?\}/g,
searchPlaceholder = /([:]?)([\w\[\].-]+)|\{([\w\[\].-]+)(?:\:\s*((?:[^{}\\]+|\\.|\{(?:[^{}\\]+|\\.)*\})+))?\}/g,
compiled = '^', last = 0, m,
segments = this.segments = [],
parentParams = parentMatcher ? parentMatcher.params : {},
params = this.params = parentMatcher ? parentMatcher.params.$$new() : new $$UMFP.ParamSet(),
paramNames = [];
function addParameter(id, type, config, location) {
paramNames.push(id);
if (parentParams[id]) return parentParams[id];
if (!/^\w+([-.]+\w+)*(?:\[\])?$/.test(id)) throw new Error("Invalid parameter name '" + id + "' in pattern '" + pattern + "'");
if (params[id]) throw new Error("Duplicate parameter name '" + id + "' in pattern '" + pattern + "'");
params[id] = new $$UMFP.Param(id, type, config, location);
return params[id];
}
function quoteRegExp(string, pattern, squash, optional) {
var surroundPattern = ['',''], result = string.replace(/[\\\[\]\^$*+?.()|{}]/g, "\\$&");
if (!pattern) return result;
switch(squash) {
case false: surroundPattern = ['(', ')' + (optional ? "?" : "")]; break;
case true:
result = result.replace(/\/$/, '');
surroundPattern = ['(?:\/(', ')|\/)?'];
break;
default: surroundPattern = ['(' + squash + "|", ')?']; break;
}
return result + surroundPattern[0] + pattern + surroundPattern[1];
}
this.source = pattern;
// Split into static segments separated by path parameter placeholders.
// The number of segments is always 1 more than the number of parameters.
function matchDetails(m, isSearch) {
var id, regexp, segment, type, cfg, arrayMode;
id = m[2] || m[3]; // IE[78] returns '' for unmatched groups instead of null
cfg = config.params[id];
segment = pattern.substring(last, m.index);
regexp = isSearch ? m[4] : m[4] || (m[1] == '*' ? '.*' : null);
if (regexp) {
type = $$UMFP.type(regexp) || inherit($$UMFP.type("string"), { pattern: new RegExp(regexp, config.caseInsensitive ? 'i' : undefined) });
}
return {
id: id, regexp: regexp, segment: segment, type: type, cfg: cfg
};
}
var p, param, segment;
while ((m = placeholder.exec(pattern))) {
p = matchDetails(m, false);
if (p.segment.indexOf('?') >= 0) break; // we're into the search part
param = addParameter(p.id, p.type, p.cfg, "path");
compiled += quoteRegExp(p.segment, param.type.pattern.source, param.squash, param.isOptional);
segments.push(p.segment);
last = placeholder.lastIndex;
}
segment = pattern.substring(last);
// Find any search parameter names and remove them from the last segment
var i = segment.indexOf('?');
if (i >= 0) {
var search = this.sourceSearch = segment.substring(i);
segment = segment.substring(0, i);
this.sourcePath = pattern.substring(0, last + i);
if (search.length > 0) {
last = 0;
while ((m = searchPlaceholder.exec(search))) {
p = matchDetails(m, true);
param = addParameter(p.id, p.type, p.cfg, "search");
last = placeholder.lastIndex;
// check if ?&
}
}
} else {
this.sourcePath = pattern;
this.sourceSearch = '';
}
compiled += quoteRegExp(segment) + (config.strict === false ? '\/?' : '') + '$';
segments.push(segment);
this.regexp = new RegExp(compiled, config.caseInsensitive ? 'i' : undefined);
this.prefix = segments[0];
this.$$paramNames = paramNames;
}
/**
* @ngdoc function
* @name ui.router.util.type:UrlMatcher#concat
* @methodOf ui.router.util.type:UrlMatcher
*
* @description
* Returns a new matcher for a pattern constructed by appending the path part and adding the
* search parameters of the specified pattern to this pattern. The current pattern is not
* modified. This can be understood as creating a pattern for URLs that are relative to (or
* suffixes of) the current pattern.
*
* @example
* The following two matchers are equivalent:
* <pre>
* new UrlMatcher('/user/{id}?q').concat('/details?date');
* new UrlMatcher('/user/{id}/details?q&date');
* </pre>
*
* @param {string} pattern The pattern to append.
* @param {Object} config An object hash of the configuration for the matcher.
* @returns {UrlMatcher} A matcher for the concatenated pattern.
*/
UrlMatcher.prototype.concat = function (pattern, config) {
// Because order of search parameters is irrelevant, we can add our own search
// parameters to the end of the new pattern. Parse the new pattern by itself
// and then join the bits together, but it's much easier to do this on a string level.
var defaultConfig = {
caseInsensitive: $$UMFP.caseInsensitive(),
strict: $$UMFP.strictMode(),
squash: $$UMFP.defaultSquashPolicy()
};
return new UrlMatcher(this.sourcePath + pattern + this.sourceSearch, extend(defaultConfig, config), this);
};
UrlMatcher.prototype.toString = function () {
return this.source;
};
/**
* @ngdoc function
* @name ui.router.util.type:UrlMatcher#exec
* @methodOf ui.router.util.type:UrlMatcher
*
* @description
* Tests the specified path against this matcher, and returns an object containing the captured
* parameter values, or null if the path does not match. The returned object contains the values
* of any search parameters that are mentioned in the pattern, but their value may be null if
* they are not present in `searchParams`. This means that search parameters are always treated
* as optional.
*
* @example
* <pre>
* new UrlMatcher('/user/{id}?q&r').exec('/user/bob', {
* x: '1', q: 'hello'
* });
* // returns { id: 'bob', q: 'hello', r: null }
* </pre>
*
* @param {string} path The URL path to match, e.g. `$location.path()`.
* @param {Object} searchParams URL search parameters, e.g. `$location.search()`.
* @returns {Object} The captured parameter values.
*/
UrlMatcher.prototype.exec = function (path, searchParams) {
var m = this.regexp.exec(path);
if (!m) return null;
searchParams = searchParams || {};
var paramNames = this.parameters(), nTotal = paramNames.length,
nPath = this.segments.length - 1,
values = {}, i, j, cfg, paramName;
if (nPath !== m.length - 1) throw new Error("Unbalanced capture group in route '" + this.source + "'");
function decodePathArray(string) {
function reverseString(str) { return str.split("").reverse().join(""); }
function unquoteDashes(str) { return str.replace(/\\-/g, "-"); }
var split = reverseString(string).split(/-(?!\\)/);
var allReversed = map(split, reverseString);
return map(allReversed, unquoteDashes).reverse();
}
var param, paramVal;
for (i = 0; i < nPath; i++) {
paramName = paramNames[i];
param = this.params[paramName];
paramVal = m[i+1];
// if the param value matches a pre-replace pair, replace the value before decoding.
for (j = 0; j < param.replace.length; j++) {
if (param.replace[j].from === paramVal) paramVal = param.replace[j].to;
}
if (paramVal && param.array === true) paramVal = decodePathArray(paramVal);
if (isDefined(paramVal)) paramVal = param.type.decode(paramVal);
values[paramName] = param.value(paramVal);
}
for (/**/; i < nTotal; i++) {
paramName = paramNames[i];
values[paramName] = this.params[paramName].value(searchParams[paramName]);
param = this.params[paramName];
paramVal = searchParams[paramName];
for (j = 0; j < param.replace.length; j++) {
if (param.replace[j].from === paramVal) paramVal = param.replace[j].to;
}
if (isDefined(paramVal)) paramVal = param.type.decode(paramVal);
values[paramName] = param.value(paramVal);
}
return values;
};
/**
* @ngdoc function
* @name ui.router.util.type:UrlMatcher#parameters
* @methodOf ui.router.util.type:UrlMatcher
*
* @description
* Returns the names of all path and search parameters of this pattern in an unspecified order.
*
* @returns {Array.<string>} An array of parameter names. Must be treated as read-only. If the
* pattern has no parameters, an empty array is returned.
*/
UrlMatcher.prototype.parameters = function (param) {
if (!isDefined(param)) return this.$$paramNames;
return this.params[param] || null;
};
/**
* @ngdoc function
* @name ui.router.util.type:UrlMatcher#validates
* @methodOf ui.router.util.type:UrlMatcher
*
* @description
* Checks an object hash of parameters to validate their correctness according to the parameter
* types of this `UrlMatcher`.
*
* @param {Object} params The object hash of parameters to validate.
* @returns {boolean} Returns `true` if `params` validates, otherwise `false`.
*/
UrlMatcher.prototype.validates = function (params) {
return this.params.$$validates(params);
};
/**
* @ngdoc function
* @name ui.router.util.type:UrlMatcher#format
* @methodOf ui.router.util.type:UrlMatcher
*
* @description
* Creates a URL that matches this pattern by substituting the specified values
* for the path and search parameters. Null values for path parameters are
* treated as empty strings.
*
* @example
* <pre>
* new UrlMatcher('/user/{id}?q').format({ id:'bob', q:'yes' });
* // returns '/user/bob?q=yes'
* </pre>
*
* @param {Object} values the values to substitute for the parameters in this pattern.
* @returns {string} the formatted URL (path and optionally search part).
*/
UrlMatcher.prototype.format = function (values) {
values = values || {};
var segments = this.segments, params = this.parameters(), paramset = this.params;
if (!this.validates(values)) return null;
var i, search = false, nPath = segments.length - 1, nTotal = params.length, result = segments[0];
function encodeDashes(str) { // Replace dashes with encoded "\-"
return encodeURIComponent(str).replace(/-/g, function(c) { return '%5C%' + c.charCodeAt(0).toString(16).toUpperCase(); });
}
for (i = 0; i < nTotal; i++) {
var isPathParam = i < nPath;
var name = params[i], param = paramset[name], value = param.value(values[name]);
var isDefaultValue = param.isOptional && param.type.equals(param.value(), value);
var squash = isDefaultValue ? param.squash : false;
var encoded = param.type.encode(value);
if (isPathParam) {
var nextSegment = segments[i + 1];
var isFinalPathParam = i + 1 === nPath;
if (squash === false) {
if (encoded != null) {
if (isArray(encoded)) {
result += map(encoded, encodeDashes).join("-");
} else {
result += encodeURIComponent(encoded);
}
}
result += nextSegment;
} else if (squash === true) {
var capture = result.match(/\/$/) ? /\/?(.*)/ : /(.*)/;
result += nextSegment.match(capture)[1];
} else if (isString(squash)) {
result += squash + nextSegment;
}
if (isFinalPathParam && param.squash === true && result.slice(-1) === '/') result = result.slice(0, -1);
} else {
if (encoded == null || (isDefaultValue && squash !== false)) continue;
if (!isArray(encoded)) encoded = [ encoded ];
if (encoded.length === 0) continue;
encoded = map(encoded, encodeURIComponent).join('&' + name + '=');
result += (search ? '&' : '?') + (name + '=' + encoded);
search = true;
}
}
return result;
};
/**
* @ngdoc object
* @name ui.router.util.type:Type
*
* @description
* Implements an interface to define custom parameter types that can be decoded from and encoded to
* string parameters matched in a URL. Used by {@link ui.router.util.type:UrlMatcher `UrlMatcher`}
* objects when matching or formatting URLs, or comparing or validating parameter values.
*
* See {@link ui.router.util.$urlMatcherFactory#methods_type `$urlMatcherFactory#type()`} for more
* information on registering custom types.
*
* @param {Object} config A configuration object which contains the custom type definition. The object's
* properties will override the default methods and/or pattern in `Type`'s public interface.
* @example
* <pre>
* {
* decode: function(val) { return parseInt(val, 10); },
* encode: function(val) { return val && val.toString(); },
* equals: function(a, b) { return this.is(a) && a === b; },
* is: function(val) { return angular.isNumber(val) isFinite(val) && val % 1 === 0; },
* pattern: /\d+/
* }
* </pre>
*
* @property {RegExp} pattern The regular expression pattern used to match values of this type when
* coming from a substring of a URL.
*
* @returns {Object} Returns a new `Type` object.
*/
function Type(config) {
extend(this, config);
}
/**
* @ngdoc function
* @name ui.router.util.type:Type#is
* @methodOf ui.router.util.type:Type
*
* @description
* Detects whether a value is of a particular type. Accepts a native (decoded) value
* and determines whether it matches the current `Type` object.
*
* @param {*} val The value to check.
* @param {string} key Optional. If the type check is happening in the context of a specific
* {@link ui.router.util.type:UrlMatcher `UrlMatcher`} object, this is the name of the
* parameter in which `val` is stored. Can be used for meta-programming of `Type` objects.
* @returns {Boolean} Returns `true` if the value matches the type, otherwise `false`.
*/
Type.prototype.is = function(val, key) {
return true;
};
/**
* @ngdoc function
* @name ui.router.util.type:Type#encode
* @methodOf ui.router.util.type:Type
*
* @description
* Encodes a custom/native type value to a string that can be embedded in a URL. Note that the
* return value does *not* need to be URL-safe (i.e. passed through `encodeURIComponent()`), it
* only needs to be a representation of `val` that has been coerced to a string.
*
* @param {*} val The value to encode.
* @param {string} key The name of the parameter in which `val` is stored. Can be used for
* meta-programming of `Type` objects.
* @returns {string} Returns a string representation of `val` that can be encoded in a URL.
*/
Type.prototype.encode = function(val, key) {
return val;
};
/**
* @ngdoc function
* @name ui.router.util.type:Type#decode
* @methodOf ui.router.util.type:Type
*
* @description
* Converts a parameter value (from URL string or transition param) to a custom/native value.
*
* @param {string} val The URL parameter value to decode.
* @param {string} key The name of the parameter in which `val` is stored. Can be used for
* meta-programming of `Type` objects.
* @returns {*} Returns a custom representation of the URL parameter value.
*/
Type.prototype.decode = function(val, key) {
return val;
};
/**
* @ngdoc function
* @name ui.router.util.type:Type#equals
* @methodOf ui.router.util.type:Type
*
* @description
* Determines whether two decoded values are equivalent.
*
* @param {*} a A value to compare against.
* @param {*} b A value to compare against.
* @returns {Boolean} Returns `true` if the values are equivalent/equal, otherwise `false`.
*/
Type.prototype.equals = function(a, b) {
return a == b;
};
Type.prototype.$subPattern = function() {
var sub = this.pattern.toString();
return sub.substr(1, sub.length - 2);
};
Type.prototype.pattern = /.*/;
Type.prototype.toString = function() { return "{Type:" + this.name + "}"; };
/** Given an encoded string, or a decoded object, returns a decoded object */
Type.prototype.$normalize = function(val) {
return this.is(val) ? val : this.decode(val);
};
/*
* Wraps an existing custom Type as an array of Type, depending on 'mode'.
* e.g.:
* - urlmatcher pattern "/path?{queryParam[]:int}"
* - url: "/path?queryParam=1&queryParam=2
* - $stateParams.queryParam will be [1, 2]
* if `mode` is "auto", then
* - url: "/path?queryParam=1 will create $stateParams.queryParam: 1
* - url: "/path?queryParam=1&queryParam=2 will create $stateParams.queryParam: [1, 2]
*/
Type.prototype.$asArray = function(mode, isSearch) {
if (!mode) return this;
if (mode === "auto" && !isSearch) throw new Error("'auto' array mode is for query parameters only");
function ArrayType(type, mode) {
function bindTo(type, callbackName) {
return function() {
return type[callbackName].apply(type, arguments);
};
}
// Wrap non-array value as array
function arrayWrap(val) { return isArray(val) ? val : (isDefined(val) ? [ val ] : []); }
// Unwrap array value for "auto" mode. Return undefined for empty array.
function arrayUnwrap(val) {
switch(val.length) {
case 0: return undefined;
case 1: return mode === "auto" ? val[0] : val;
default: return val;
}
}
function falsey(val) { return !val; }
// Wraps type (.is/.encode/.decode) functions to operate on each value of an array
function arrayHandler(callback, allTruthyMode) {
return function handleArray(val) {
if (isArray(val) && val.length === 0) return val;
val = arrayWrap(val);
var result = map(val, callback);
if (allTruthyMode === true)
return filter(result, falsey).length === 0;
return arrayUnwrap(result);
};
}
// Wraps type (.equals) functions to operate on each value of an array
function arrayEqualsHandler(callback) {
return function handleArray(val1, val2) {
var left = arrayWrap(val1), right = arrayWrap(val2);
if (left.length !== right.length) return false;
for (var i = 0; i < left.length; i++) {
if (!callback(left[i], right[i])) return false;
}
return true;
};
}
this.encode = arrayHandler(bindTo(type, 'encode'));
this.decode = arrayHandler(bindTo(type, 'decode'));
this.is = arrayHandler(bindTo(type, 'is'), true);
this.equals = arrayEqualsHandler(bindTo(type, 'equals'));
this.pattern = type.pattern;
this.$normalize = arrayHandler(bindTo(type, '$normalize'));
this.name = type.name;
this.$arrayMode = mode;
}
return new ArrayType(this, mode);
};
/**
* @ngdoc object
* @name ui.router.util.$urlMatcherFactory
*
* @description
* Factory for {@link ui.router.util.type:UrlMatcher `UrlMatcher`} instances. The factory
* is also available to providers under the name `$urlMatcherFactoryProvider`.
*/
function $UrlMatcherFactory() {
$$UMFP = this;
var isCaseInsensitive = false, isStrictMode = true, defaultSquashPolicy = false;
// Use tildes to pre-encode slashes.
// If the slashes are simply URLEncoded, the browser can choose to pre-decode them,
// and bidirectional encoding/decoding fails.
// Tilde was chosen because it's not a RFC 3986 section 2.2 Reserved Character
function valToString(val) { return val != null ? val.toString().replace(/(~|\/)/g, function (m) { return {'~':'~~', '/':'~2F'}[m]; }) : val; }
function valFromString(val) { return val != null ? val.toString().replace(/(~~|~2F)/g, function (m) { return {'~~':'~', '~2F':'/'}[m]; }) : val; }
var $types = {}, enqueue = true, typeQueue = [], injector, defaultTypes = {
"string": {
encode: valToString,
decode: valFromString,
// TODO: in 1.0, make string .is() return false if value is undefined/null by default.
// In 0.2.x, string params are optional by default for backwards compat
is: function(val) { return val == null || !isDefined(val) || typeof val === "string"; },
pattern: /[^/]*/
},
"int": {
encode: valToString,
decode: function(val) { return parseInt(val, 10); },
is: function(val) { return val !== undefined && val !== null && this.decode(val.toString()) === val; },
pattern: /-?\d+/
},
"bool": {
encode: function(val) { return val ? 1 : 0; },
decode: function(val) { return parseInt(val, 10) !== 0; },
is: function(val) { return val === true || val === false; },
pattern: /0|1/
},
"date": {
encode: function (val) {
if (!this.is(val))
return undefined;
return [ val.getFullYear(),
('0' + (val.getMonth() + 1)).slice(-2),
('0' + val.getDate()).slice(-2)
].join("-");
},
decode: function (val) {
if (this.is(val)) return val;
var match = this.capture.exec(val);
return match ? new Date(match[1], match[2] - 1, match[3]) : undefined;
},
is: function(val) { return val instanceof Date && !isNaN(val.valueOf()); },
equals: function (a, b) { return this.is(a) && this.is(b) && a.toISOString() === b.toISOString(); },
pattern: /[0-9]{4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|[1-2][0-9]|3[0-1])/,
capture: /([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])/
},
"json": {
encode: angular.toJson,
decode: angular.fromJson,
is: angular.isObject,
equals: angular.equals,
pattern: /[^/]*/
},
"any": { // does not encode/decode
encode: angular.identity,
decode: angular.identity,
equals: angular.equals,
pattern: /.*/
}
};
function getDefaultConfig() {
return {
strict: isStrictMode,
caseInsensitive: isCaseInsensitive
};
}
function isInjectable(value) {
return (isFunction(value) || (isArray(value) && isFunction(value[value.length - 1])));
}
/**
* [Internal] Get the default value of a parameter, which may be an injectable function.
*/
$UrlMatcherFactory.$$getDefaultValue = function(config) {
if (!isInjectable(config.value)) return config.value;
if (!injector) throw new Error("Injectable functions cannot be called at configuration time");
return injector.invoke(config.value);
};
/**
* @ngdoc function
* @name ui.router.util.$urlMatcherFactory#caseInsensitive
* @methodOf ui.router.util.$urlMatcherFactory
*
* @description
* Defines whether URL matching should be case sensitive (the default behavior), or not.
*
* @param {boolean} value `false` to match URL in a case sensitive manner; otherwise `true`;
* @returns {boolean} the current value of caseInsensitive
*/
this.caseInsensitive = function(value) {
if (isDefined(value))
isCaseInsensitive = value;
return isCaseInsensitive;
};
/**
* @ngdoc function
* @name ui.router.util.$urlMatcherFactory#strictMode
* @methodOf ui.router.util.$urlMatcherFactory
*
* @description
* Defines whether URLs should match trailing slashes, or not (the default behavior).
*
* @param {boolean=} value `false` to match trailing slashes in URLs, otherwise `true`.
* @returns {boolean} the current value of strictMode
*/
this.strictMode = function(value) {
if (isDefined(value))
isStrictMode = value;
return isStrictMode;
};
/**
* @ngdoc function
* @name ui.router.util.$urlMatcherFactory#defaultSquashPolicy
* @methodOf ui.router.util.$urlMatcherFactory
*
* @description
* Sets the default behavior when generating or matching URLs with default parameter values.
*
* @param {string} value A string that defines the default parameter URL squashing behavior.
* `nosquash`: When generating an href with a default parameter value, do not squash the parameter value from the URL
* `slash`: When generating an href with a default parameter value, squash (remove) the parameter value, and, if the
* parameter is surrounded by slashes, squash (remove) one slash from the URL
* any other string, e.g. "~": When generating an href with a default parameter value, squash (remove)
* the parameter value from the URL and replace it with this string.
*/
this.defaultSquashPolicy = function(value) {
if (!isDefined(value)) return defaultSquashPolicy;
if (value !== true && value !== false && !isString(value))
throw new Error("Invalid squash policy: " + value + ". Valid policies: false, true, arbitrary-string");
defaultSquashPolicy = value;
return value;
};
/**
* @ngdoc function
* @name ui.router.util.$urlMatcherFactory#compile
* @methodOf ui.router.util.$urlMatcherFactory
*
* @description
* Creates a {@link ui.router.util.type:UrlMatcher `UrlMatcher`} for the specified pattern.
*
* @param {string} pattern The URL pattern.
* @param {Object} config The config object hash.
* @returns {UrlMatcher} The UrlMatcher.
*/
this.compile = function (pattern, config) {
return new UrlMatcher(pattern, extend(getDefaultConfig(), config));
};
/**
* @ngdoc function
* @name ui.router.util.$urlMatcherFactory#isMatcher
* @methodOf ui.router.util.$urlMatcherFactory
*
* @description
* Returns true if the specified object is a `UrlMatcher`, or false otherwise.
*
* @param {Object} object The object to perform the type check against.
* @returns {Boolean} Returns `true` if the object matches the `UrlMatcher` interface, by
* implementing all the same methods.
*/
this.isMatcher = function (o) {
if (!isObject(o)) return false;
var result = true;
forEach(UrlMatcher.prototype, function(val, name) {
if (isFunction(val)) {
result = result && (isDefined(o[name]) && isFunction(o[name]));
}
});
return result;
};
/**
* @ngdoc function
* @name ui.router.util.$urlMatcherFactory#type
* @methodOf ui.router.util.$urlMatcherFactory
*
* @description
* Registers a custom {@link ui.router.util.type:Type `Type`} object that can be used to
* generate URLs with typed parameters.
*
* @param {string} name The type name.
* @param {Object|Function} definition The type definition. See
* {@link ui.router.util.type:Type `Type`} for information on the values accepted.
* @param {Object|Function} definitionFn (optional) A function that is injected before the app
* runtime starts. The result of this function is merged into the existing `definition`.
* See {@link ui.router.util.type:Type `Type`} for information on the values accepted.
*
* @returns {Object} Returns `$urlMatcherFactoryProvider`.
*
* @example
* This is a simple example of a custom type that encodes and decodes items from an
* array, using the array index as the URL-encoded value:
*
* <pre>
* var list = ['John', 'Paul', 'George', 'Ringo'];
*
* $urlMatcherFactoryProvider.type('listItem', {
* encode: function(item) {
* // Represent the list item in the URL using its corresponding index
* return list.indexOf(item);
* },
* decode: function(item) {
* // Look up the list item by index
* return list[parseInt(item, 10)];
* },
* is: function(item) {
* // Ensure the item is valid by checking to see that it appears
* // in the list
* return list.indexOf(item) > -1;
* }
* });
*
* $stateProvider.state('list', {
* url: "/list/{item:listItem}",
* controller: function($scope, $stateParams) {
* console.log($stateParams.item);
* }
* });
*
* // ...
*
* // Changes URL to '/list/3', logs "Ringo" to the console
* $state.go('list', { item: "Ringo" });
* </pre>
*
* This is a more complex example of a type that relies on dependency injection to
* interact with services, and uses the parameter name from the URL to infer how to
* handle encoding and decoding parameter values:
*
* <pre>
* // Defines a custom type that gets a value from a service,
* // where each service gets different types of values from
* // a backend API:
* $urlMatcherFactoryProvider.type('dbObject', {}, function(Users, Posts) {
*
* // Matches up services to URL parameter names
* var services = {
* user: Users,
* post: Posts
* };
*
* return {
* encode: function(object) {
* // Represent the object in the URL using its unique ID
* return object.id;
* },
* decode: function(value, key) {
* // Look up the object by ID, using the parameter
* // name (key) to call the correct service
* return services[key].findById(value);
* },
* is: function(object, key) {
* // Check that object is a valid dbObject
* return angular.isObject(object) && object.id && services[key];
* }
* equals: function(a, b) {
* // Check the equality of decoded objects by comparing
* // their unique IDs
* return a.id === b.id;
* }
* };
* });
*
* // In a config() block, you can then attach URLs with
* // type-annotated parameters:
* $stateProvider.state('users', {
* url: "/users",
* // ...
* }).state('users.item', {
* url: "/{user:dbObject}",
* controller: function($scope, $stateParams) {
* // $stateParams.user will now be an object returned from
* // the Users service
* },
* // ...
* });
* </pre>
*/
this.type = function (name, definition, definitionFn) {
if (!isDefined(definition)) return $types[name];
if ($types.hasOwnProperty(name)) throw new Error("A type named '" + name + "' has already been defined.");
$types[name] = new Type(extend({ name: name }, definition));
if (definitionFn) {
typeQueue.push({ name: name, def: definitionFn });
if (!enqueue) flushTypeQueue();
}
return this;
};
// `flushTypeQueue()` waits until `$urlMatcherFactory` is injected before invoking the queued `definitionFn`s
function flushTypeQueue() {
while(typeQueue.length) {
var type = typeQueue.shift();
if (type.pattern) throw new Error("You cannot override a type's .pattern at runtime.");
angular.extend($types[type.name], injector.invoke(type.def));
}
}
// Register default types. Store them in the prototype of $types.
forEach(defaultTypes, function(type, name) { $types[name] = new Type(extend({name: name}, type)); });
$types = inherit($types, {});
/* No need to document $get, since it returns this */
this.$get = ['$injector', function ($injector) {
injector = $injector;
enqueue = false;
flushTypeQueue();
forEach(defaultTypes, function(type, name) {
if (!$types[name]) $types[name] = new Type(type);
});
return this;
}];
this.Param = function Param(id, type, config, location) {
var self = this;
config = unwrapShorthand(config);
type = getType(config, type, location);
var arrayMode = getArrayMode();
type = arrayMode ? type.$asArray(arrayMode, location === "search") : type;
if (type.name === "string" && !arrayMode && location === "path" && config.value === undefined)
config.value = ""; // for 0.2.x; in 0.3.0+ do not automatically default to ""
var isOptional = config.value !== undefined;
var squash = getSquashPolicy(config, isOptional);
var replace = getReplace(config, arrayMode, isOptional, squash);
function unwrapShorthand(config) {
var keys = isObject(config) ? objectKeys(config) : [];
var isShorthand = indexOf(keys, "value") === -1 && indexOf(keys, "type") === -1 &&
indexOf(keys, "squash") === -1 && indexOf(keys, "array") === -1;
if (isShorthand) config = { value: config };
config.$$fn = isInjectable(config.value) ? config.value : function () { return config.value; };
return config;
}
function getType(config, urlType, location) {
if (config.type && urlType) throw new Error("Param '"+id+"' has two type configurations.");
if (urlType) return urlType;
if (!config.type) return (location === "config" ? $types.any : $types.string);
if (angular.isString(config.type))
return $types[config.type];
if (config.type instanceof Type)
return config.type;
return new Type(config.type);
}
// array config: param name (param[]) overrides default settings. explicit config overrides param name.
function getArrayMode() {
var arrayDefaults = { array: (location === "search" ? "auto" : false) };
var arrayParamNomenclature = id.match(/\[\]$/) ? { array: true } : {};
return extend(arrayDefaults, arrayParamNomenclature, config).array;
}
/**
* returns false, true, or the squash value to indicate the "default parameter url squash policy".
*/
function getSquashPolicy(config, isOptional) {
var squash = config.squash;
if (!isOptional || squash === false) return false;
if (!isDefined(squash) || squash == null) return defaultSquashPolicy;
if (squash === true || isString(squash)) return squash;
throw new Error("Invalid squash policy: '" + squash + "'. Valid policies: false, true, or arbitrary string");
}
function getReplace(config, arrayMode, isOptional, squash) {
var replace, configuredKeys, defaultPolicy = [
{ from: "", to: (isOptional || arrayMode ? undefined : "") },
{ from: null, to: (isOptional || arrayMode ? undefined : "") }
];
replace = isArray(config.replace) ? config.replace : [];
if (isString(squash))
replace.push({ from: squash, to: undefined });
configuredKeys = map(replace, function(item) { return item.from; } );
return filter(defaultPolicy, function(item) { return indexOf(configuredKeys, item.from) === -1; }).concat(replace);
}
/**
* [Internal] Get the default value of a parameter, which may be an injectable function.
*/
function $$getDefaultValue() {
if (!injector) throw new Error("Injectable functions cannot be called at configuration time");
var defaultValue = injector.invoke(config.$$fn);
if (defaultValue !== null && defaultValue !== undefined && !self.type.is(defaultValue))
throw new Error("Default value (" + defaultValue + ") for parameter '" + self.id + "' is not an instance of Type (" + self.type.name + ")");
return defaultValue;
}
/**
* [Internal] Gets the decoded representation of a value if the value is defined, otherwise, returns the
* default value, which may be the result of an injectable function.
*/
function $value(value) {
function hasReplaceVal(val) { return function(obj) { return obj.from === val; }; }
function $replace(value) {
var replacement = map(filter(self.replace, hasReplaceVal(value)), function(obj) { return obj.to; });
return replacement.length ? replacement[0] : value;
}
value = $replace(value);
return !isDefined(value) ? $$getDefaultValue() : self.type.$normalize(value);
}
function toString() { return "{Param:" + id + " " + type + " squash: '" + squash + "' optional: " + isOptional + "}"; }
extend(this, {
id: id,
type: type,
location: location,
array: arrayMode,
squash: squash,
replace: replace,
isOptional: isOptional,
value: $value,
dynamic: undefined,
config: config,
toString: toString
});
};
function ParamSet(params) {
extend(this, params || {});
}
ParamSet.prototype = {
$$new: function() {
return inherit(this, extend(new ParamSet(), { $$parent: this}));
},
$$keys: function () {
var keys = [], chain = [], parent = this,
ignore = objectKeys(ParamSet.prototype);
while (parent) { chain.push(parent); parent = parent.$$parent; }
chain.reverse();
forEach(chain, function(paramset) {
forEach(objectKeys(paramset), function(key) {
if (indexOf(keys, key) === -1 && indexOf(ignore, key) === -1) keys.push(key);
});
});
return keys;
},
$$values: function(paramValues) {
var values = {}, self = this;
forEach(self.$$keys(), function(key) {
values[key] = self[key].value(paramValues && paramValues[key]);
});
return values;
},
$$equals: function(paramValues1, paramValues2) {
var equal = true, self = this;
forEach(self.$$keys(), function(key) {
var left = paramValues1 && paramValues1[key], right = paramValues2 && paramValues2[key];
if (!self[key].type.equals(left, right)) equal = false;
});
return equal;
},
$$validates: function $$validate(paramValues) {
var keys = this.$$keys(), i, param, rawVal, normalized, encoded;
for (i = 0; i < keys.length; i++) {
param = this[keys[i]];
rawVal = paramValues[keys[i]];
if ((rawVal === undefined || rawVal === null) && param.isOptional)
break; // There was no parameter value, but the param is optional
normalized = param.type.$normalize(rawVal);
if (!param.type.is(normalized))
return false; // The value was not of the correct Type, and could not be decoded to the correct Type
encoded = param.type.encode(normalized);
if (angular.isString(encoded) && !param.type.pattern.exec(encoded))
return false; // The value was of the correct type, but when encoded, did not match the Type's regexp
}
return true;
},
$$parent: undefined
};
this.ParamSet = ParamSet;
}
// Register as a provider so it's available to other providers
angular.module('ui.router.util').provider('$urlMatcherFactory', $UrlMatcherFactory);
angular.module('ui.router.util').run(['$urlMatcherFactory', function($urlMatcherFactory) { }]);
/**
* @ngdoc object
* @name ui.router.router.$urlRouterProvider
*
* @requires ui.router.util.$urlMatcherFactoryProvider
* @requires $locationProvider
*
* @description
* `$urlRouterProvider` has the responsibility of watching `$location`.
* When `$location` changes it runs through a list of rules one by one until a
* match is found. `$urlRouterProvider` is used behind the scenes anytime you specify
* a url in a state configuration. All urls are compiled into a UrlMatcher object.
*
* There are several methods on `$urlRouterProvider` that make it useful to use directly
* in your module config.
*/
$UrlRouterProvider.$inject = ['$locationProvider', '$urlMatcherFactoryProvider'];
function $UrlRouterProvider( $locationProvider, $urlMatcherFactory) {
var rules = [], otherwise = null, interceptDeferred = false, listener;
// Returns a string that is a prefix of all strings matching the RegExp
function regExpPrefix(re) {
var prefix = /^\^((?:\\[^a-zA-Z0-9]|[^\\\[\]\^$*+?.()|{}]+)*)/.exec(re.source);
return (prefix != null) ? prefix[1].replace(/\\(.)/g, "$1") : '';
}
// Interpolates matched values into a String.replace()-style pattern
function interpolate(pattern, match) {
return pattern.replace(/\$(\$|\d{1,2})/, function (m, what) {
return match[what === '$' ? 0 : Number(what)];
});
}
/**
* @ngdoc function
* @name ui.router.router.$urlRouterProvider#rule
* @methodOf ui.router.router.$urlRouterProvider
*
* @description
* Defines rules that are used by `$urlRouterProvider` to find matches for
* specific URLs.
*
* @example
* <pre>
* var app = angular.module('app', ['ui.router.router']);
*
* app.config(function ($urlRouterProvider) {
* // Here's an example of how you might allow case insensitive urls
* $urlRouterProvider.rule(function ($injector, $location) {
* var path = $location.path(),
* normalized = path.toLowerCase();
*
* if (path !== normalized) {
* return normalized;
* }
* });
* });
* </pre>
*
* @param {function} rule Handler function that takes `$injector` and `$location`
* services as arguments. You can use them to return a valid path as a string.
*
* @return {object} `$urlRouterProvider` - `$urlRouterProvider` instance
*/
this.rule = function (rule) {
if (!isFunction(rule)) throw new Error("'rule' must be a function");
rules.push(rule);
return this;
};
/**
* @ngdoc object
* @name ui.router.router.$urlRouterProvider#otherwise
* @methodOf ui.router.router.$urlRouterProvider
*
* @description
* Defines a path that is used when an invalid route is requested.
*
* @example
* <pre>
* var app = angular.module('app', ['ui.router.router']);
*
* app.config(function ($urlRouterProvider) {
* // if the path doesn't match any of the urls you configured
* // otherwise will take care of routing the user to the
* // specified url
* $urlRouterProvider.otherwise('/index');
*
* // Example of using function rule as param
* $urlRouterProvider.otherwise(function ($injector, $location) {
* return '/a/valid/url';
* });
* });
* </pre>
*
* @param {string|function} rule The url path you want to redirect to or a function
* rule that returns the url path. The function version is passed two params:
* `$injector` and `$location` services, and must return a url string.
*
* @return {object} `$urlRouterProvider` - `$urlRouterProvider` instance
*/
this.otherwise = function (rule) {
if (isString(rule)) {
var redirect = rule;
rule = function () { return redirect; };
}
else if (!isFunction(rule)) throw new Error("'rule' must be a function");
otherwise = rule;
return this;
};
function handleIfMatch($injector, handler, match) {
if (!match) return false;
var result = $injector.invoke(handler, handler, { $match: match });
return isDefined(result) ? result : true;
}
/**
* @ngdoc function
* @name ui.router.router.$urlRouterProvider#when
* @methodOf ui.router.router.$urlRouterProvider
*
* @description
* Registers a handler for a given url matching.
*
* If the handler is a string, it is
* treated as a redirect, and is interpolated according to the syntax of match
* (i.e. like `String.replace()` for `RegExp`, or like a `UrlMatcher` pattern otherwise).
*
* If the handler is a function, it is injectable. It gets invoked if `$location`
* matches. You have the option of inject the match object as `$match`.
*
* The handler can return
*
* - **falsy** to indicate that the rule didn't match after all, then `$urlRouter`
* will continue trying to find another one that matches.
* - **string** which is treated as a redirect and passed to `$location.url()`
* - **void** or any **truthy** value tells `$urlRouter` that the url was handled.
*
* @example
* <pre>
* var app = angular.module('app', ['ui.router.router']);
*
* app.config(function ($urlRouterProvider) {
* $urlRouterProvider.when($state.url, function ($match, $stateParams) {
* if ($state.$current.navigable !== state ||
* !equalForKeys($match, $stateParams) {
* $state.transitionTo(state, $match, false);
* }
* });
* });
* </pre>
*
* @param {string|object} what The incoming path that you want to redirect.
* @param {string|function} handler The path you want to redirect your user to.
*/
this.when = function (what, handler) {
var redirect, handlerIsString = isString(handler);
if (isString(what)) what = $urlMatcherFactory.compile(what);
if (!handlerIsString && !isFunction(handler) && !isArray(handler))
throw new Error("invalid 'handler' in when()");
var strategies = {
matcher: function (what, handler) {
if (handlerIsString) {
redirect = $urlMatcherFactory.compile(handler);
handler = ['$match', function ($match) { return redirect.format($match); }];
}
return extend(function ($injector, $location) {
return handleIfMatch($injector, handler, what.exec($location.path(), $location.search()));
}, {
prefix: isString(what.prefix) ? what.prefix : ''
});
},
regex: function (what, handler) {
if (what.global || what.sticky) throw new Error("when() RegExp must not be global or sticky");
if (handlerIsString) {
redirect = handler;
handler = ['$match', function ($match) { return interpolate(redirect, $match); }];
}
return extend(function ($injector, $location) {
return handleIfMatch($injector, handler, what.exec($location.path()));
}, {
prefix: regExpPrefix(what)
});
}
};
var check = { matcher: $urlMatcherFactory.isMatcher(what), regex: what instanceof RegExp };
for (var n in check) {
if (check[n]) return this.rule(strategies[n](what, handler));
}
throw new Error("invalid 'what' in when()");
};
/**
* @ngdoc function
* @name ui.router.router.$urlRouterProvider#deferIntercept
* @methodOf ui.router.router.$urlRouterProvider
*
* @description
* Disables (or enables) deferring location change interception.
*
* If you wish to customize the behavior of syncing the URL (for example, if you wish to
* defer a transition but maintain the current URL), call this method at configuration time.
* Then, at run time, call `$urlRouter.listen()` after you have configured your own
* `$locationChangeSuccess` event handler.
*
* @example
* <pre>
* var app = angular.module('app', ['ui.router.router']);
*
* app.config(function ($urlRouterProvider) {
*
* // Prevent $urlRouter from automatically intercepting URL changes;
* // this allows you to configure custom behavior in between
* // location changes and route synchronization:
* $urlRouterProvider.deferIntercept();
*
* }).run(function ($rootScope, $urlRouter, UserService) {
*
* $rootScope.$on('$locationChangeSuccess', function(e) {
* // UserService is an example service for managing user state
* if (UserService.isLoggedIn()) return;
*
* // Prevent $urlRouter's default handler from firing
* e.preventDefault();
*
* UserService.handleLogin().then(function() {
* // Once the user has logged in, sync the current URL
* // to the router:
* $urlRouter.sync();
* });
* });
*
* // Configures $urlRouter's listener *after* your custom listener
* $urlRouter.listen();
* });
* </pre>
*
* @param {boolean} defer Indicates whether to defer location change interception. Passing
no parameter is equivalent to `true`.
*/
this.deferIntercept = function (defer) {
if (defer === undefined) defer = true;
interceptDeferred = defer;
};
/**
* @ngdoc object
* @name ui.router.router.$urlRouter
*
* @requires $location
* @requires $rootScope
* @requires $injector
* @requires $browser
*
* @description
*
*/
this.$get = $get;
$get.$inject = ['$location', '$rootScope', '$injector', '$browser', '$sniffer'];
function $get( $location, $rootScope, $injector, $browser, $sniffer) {
var baseHref = $browser.baseHref(), location = $location.url(), lastPushedUrl;
function appendBasePath(url, isHtml5, absolute) {
if (baseHref === '/') return url;
if (isHtml5) return baseHref.slice(0, -1) + url;
if (absolute) return baseHref.slice(1) + url;
return url;
}
// TODO: Optimize groups of rules with non-empty prefix into some sort of decision tree
function update(evt) {
if (evt && evt.defaultPrevented) return;
var ignoreUpdate = lastPushedUrl && $location.url() === lastPushedUrl;
lastPushedUrl = undefined;
// TODO: Re-implement this in 1.0 for https://github.com/angular-ui/ui-router/issues/1573
//if (ignoreUpdate) return true;
function check(rule) {
var handled = rule($injector, $location);
if (!handled) return false;
if (isString(handled)) $location.replace().url(handled);
return true;
}
var n = rules.length, i;
for (i = 0; i < n; i++) {
if (check(rules[i])) return;
}
// always check otherwise last to allow dynamic updates to the set of rules
if (otherwise) check(otherwise);
}
function listen() {
listener = listener || $rootScope.$on('$locationChangeSuccess', update);
return listener;
}
if (!interceptDeferred) listen();
return {
/**
* @ngdoc function
* @name ui.router.router.$urlRouter#sync
* @methodOf ui.router.router.$urlRouter
*
* @description
* Triggers an update; the same update that happens when the address bar url changes, aka `$locationChangeSuccess`.
* This method is useful when you need to use `preventDefault()` on the `$locationChangeSuccess` event,
* perform some custom logic (route protection, auth, config, redirection, etc) and then finally proceed
* with the transition by calling `$urlRouter.sync()`.
*
* @example
* <pre>
* angular.module('app', ['ui.router'])
* .run(function($rootScope, $urlRouter) {
* $rootScope.$on('$locationChangeSuccess', function(evt) {
* // Halt state change from even starting
* evt.preventDefault();
* // Perform custom logic
* var meetsRequirement = ...
* // Continue with the update and state transition if logic allows
* if (meetsRequirement) $urlRouter.sync();
* });
* });
* </pre>
*/
sync: function() {
update();
},
listen: function() {
return listen();
},
update: function(read) {
if (read) {
location = $location.url();
return;
}
if ($location.url() === location) return;
$location.url(location);
$location.replace();
},
push: function(urlMatcher, params, options) {
var url = urlMatcher.format(params || {});
// Handle the special hash param, if needed
if (url !== null && params && params['#']) {
url += '#' + params['#'];
}
$location.url(url);
lastPushedUrl = options && options.$$avoidResync ? $location.url() : undefined;
if (options && options.replace) $location.replace();
},
/**
* @ngdoc function
* @name ui.router.router.$urlRouter#href
* @methodOf ui.router.router.$urlRouter
*
* @description
* A URL generation method that returns the compiled URL for a given
* {@link ui.router.util.type:UrlMatcher `UrlMatcher`}, populated with the provided parameters.
*
* @example
* <pre>
* $bob = $urlRouter.href(new UrlMatcher("/about/:person"), {
* person: "bob"
* });
* // $bob == "/about/bob";
* </pre>
*
* @param {UrlMatcher} urlMatcher The `UrlMatcher` object which is used as the template of the URL to generate.
* @param {object=} params An object of parameter values to fill the matcher's required parameters.
* @param {object=} options Options object. The options are:
*
* - **`absolute`** - {boolean=false}, If true will generate an absolute url, e.g. "http://www.example.com/fullurl".
*
* @returns {string} Returns the fully compiled URL, or `null` if `params` fail validation against `urlMatcher`
*/
href: function(urlMatcher, params, options) {
if (!urlMatcher.validates(params)) return null;
var isHtml5 = $locationProvider.html5Mode();
if (angular.isObject(isHtml5)) {
isHtml5 = isHtml5.enabled;
}
isHtml5 = isHtml5 && $sniffer.history;
var url = urlMatcher.format(params);
options = options || {};
if (!isHtml5 && url !== null) {
url = "#" + $locationProvider.hashPrefix() + url;
}
// Handle special hash param, if needed
if (url !== null && params && params['#']) {
url += '#' + params['#'];
}
url = appendBasePath(url, isHtml5, options.absolute);
if (!options.absolute || !url) {
return url;
}
var slash = (!isHtml5 && url ? '/' : ''), port = $location.port();
port = (port === 80 || port === 443 ? '' : ':' + port);
return [$location.protocol(), '://', $location.host(), port, slash, url].join('');
}
};
}
}
angular.module('ui.router.router').provider('$urlRouter', $UrlRouterProvider);
/**
* @ngdoc object
* @name ui.router.state.$stateProvider
*
* @requires ui.router.router.$urlRouterProvider
* @requires ui.router.util.$urlMatcherFactoryProvider
*
* @description
* The new `$stateProvider` works similar to Angular's v1 router, but it focuses purely
* on state.
*
* A state corresponds to a "place" in the application in terms of the overall UI and
* navigation. A state describes (via the controller / template / view properties) what
* the UI looks like and does at that place.
*
* States often have things in common, and the primary way of factoring out these
* commonalities in this model is via the state hierarchy, i.e. parent/child states aka
* nested states.
*
* The `$stateProvider` provides interfaces to declare these states for your app.
*/
$StateProvider.$inject = ['$urlRouterProvider', '$urlMatcherFactoryProvider'];
function $StateProvider( $urlRouterProvider, $urlMatcherFactory) {
var root, states = {}, $state, queue = {}, abstractKey = 'abstract';
// Builds state properties from definition passed to registerState()
var stateBuilder = {
// Derive parent state from a hierarchical name only if 'parent' is not explicitly defined.
// state.children = [];
// if (parent) parent.children.push(state);
parent: function(state) {
if (isDefined(state.parent) && state.parent) return findState(state.parent);
// regex matches any valid composite state name
// would match "contact.list" but not "contacts"
var compositeName = /^(.+)\.[^.]+$/.exec(state.name);
return compositeName ? findState(compositeName[1]) : root;
},
// inherit 'data' from parent and override by own values (if any)
data: function(state) {
if (state.parent && state.parent.data) {
state.data = state.self.data = inherit(state.parent.data, state.data);
}
return state.data;
},
// Build a URLMatcher if necessary, either via a relative or absolute URL
url: function(state) {
var url = state.url, config = { params: state.params || {} };
if (isString(url)) {
if (url.charAt(0) == '^') return $urlMatcherFactory.compile(url.substring(1), config);
return (state.parent.navigable || root).url.concat(url, config);
}
if (!url || $urlMatcherFactory.isMatcher(url)) return url;
throw new Error("Invalid url '" + url + "' in state '" + state + "'");
},
// Keep track of the closest ancestor state that has a URL (i.e. is navigable)
navigable: function(state) {
return state.url ? state : (state.parent ? state.parent.navigable : null);
},
// Own parameters for this state. state.url.params is already built at this point. Create and add non-url params
ownParams: function(state) {
var params = state.url && state.url.params || new $$UMFP.ParamSet();
forEach(state.params || {}, function(config, id) {
if (!params[id]) params[id] = new $$UMFP.Param(id, null, config, "config");
});
return params;
},
// Derive parameters for this state and ensure they're a super-set of parent's parameters
params: function(state) {
var ownParams = pick(state.ownParams, state.ownParams.$$keys());
return state.parent && state.parent.params ? extend(state.parent.params.$$new(), ownParams) : new $$UMFP.ParamSet();
},
// If there is no explicit multi-view configuration, make one up so we don't have
// to handle both cases in the view directive later. Note that having an explicit
// 'views' property will mean the default unnamed view properties are ignored. This
// is also a good time to resolve view names to absolute names, so everything is a
// straight lookup at link time.
views: function(state) {
var views = {};
forEach(isDefined(state.views) ? state.views : { '': state }, function (view, name) {
if (name.indexOf('@') < 0) name += '@' + state.parent.name;
view.resolveAs = view.resolveAs || state.resolveAs || '$resolve';
views[name] = view;
});
return views;
},
// Keep a full path from the root down to this state as this is needed for state activation.
path: function(state) {
return state.parent ? state.parent.path.concat(state) : []; // exclude root from path
},
// Speed up $state.contains() as it's used a lot
includes: function(state) {
var includes = state.parent ? extend({}, state.parent.includes) : {};
includes[state.name] = true;
return includes;
},
$delegates: {}
};
function isRelative(stateName) {
return stateName.indexOf(".") === 0 || stateName.indexOf("^") === 0;
}
function findState(stateOrName, base) {
if (!stateOrName) return undefined;
var isStr = isString(stateOrName),
name = isStr ? stateOrName : stateOrName.name,
path = isRelative(name);
if (path) {
if (!base) throw new Error("No reference point given for path '" + name + "'");
base = findState(base);
var rel = name.split("."), i = 0, pathLength = rel.length, current = base;
for (; i < pathLength; i++) {
if (rel[i] === "" && i === 0) {
current = base;
continue;
}
if (rel[i] === "^") {
if (!current.parent) throw new Error("Path '" + name + "' not valid for state '" + base.name + "'");
current = current.parent;
continue;
}
break;
}
rel = rel.slice(i).join(".");
name = current.name + (current.name && rel ? "." : "") + rel;
}
var state = states[name];
if (state && (isStr || (!isStr && (state === stateOrName || state.self === stateOrName)))) {
return state;
}
return undefined;
}
function queueState(parentName, state) {
if (!queue[parentName]) {
queue[parentName] = [];
}
queue[parentName].push(state);
}
function flushQueuedChildren(parentName) {
var queued = queue[parentName] || [];
while(queued.length) {
registerState(queued.shift());
}
}
function registerState(state) {
// Wrap a new object around the state so we can store our private details easily.
state = inherit(state, {
self: state,
resolve: state.resolve || {},
toString: function() { return this.name; }
});
var name = state.name;
if (!isString(name) || name.indexOf('@') >= 0) throw new Error("State must have a valid name");
if (states.hasOwnProperty(name)) throw new Error("State '" + name + "' is already defined");
// Get parent name
var parentName = (name.indexOf('.') !== -1) ? name.substring(0, name.lastIndexOf('.'))
: (isString(state.parent)) ? state.parent
: (isObject(state.parent) && isString(state.parent.name)) ? state.parent.name
: '';
// If parent is not registered yet, add state to queue and register later
if (parentName && !states[parentName]) {
return queueState(parentName, state.self);
}
for (var key in stateBuilder) {
if (isFunction(stateBuilder[key])) state[key] = stateBuilder[key](state, stateBuilder.$delegates[key]);
}
states[name] = state;
// Register the state in the global state list and with $urlRouter if necessary.
if (!state[abstractKey] && state.url) {
$urlRouterProvider.when(state.url, ['$match', '$stateParams', function ($match, $stateParams) {
if ($state.$current.navigable != state || !equalForKeys($match, $stateParams)) {
$state.transitionTo(state, $match, { inherit: true, location: false });
}
}]);
}
// Register any queued children
flushQueuedChildren(name);
return state;
}
// Checks text to see if it looks like a glob.
function isGlob (text) {
return text.indexOf('*') > -1;
}
// Returns true if glob matches current $state name.
function doesStateMatchGlob (glob) {
var globSegments = glob.split('.'),
segments = $state.$current.name.split('.');
//match single stars
for (var i = 0, l = globSegments.length; i < l; i++) {
if (globSegments[i] === '*') {
segments[i] = '*';
}
}
//match greedy starts
if (globSegments[0] === '**') {
segments = segments.slice(indexOf(segments, globSegments[1]));
segments.unshift('**');
}
//match greedy ends
if (globSegments[globSegments.length - 1] === '**') {
segments.splice(indexOf(segments, globSegments[globSegments.length - 2]) + 1, Number.MAX_VALUE);
segments.push('**');
}
if (globSegments.length != segments.length) {
return false;
}
return segments.join('') === globSegments.join('');
}
// Implicit root state that is always active
root = registerState({
name: '',
url: '^',
views: null,
'abstract': true
});
root.navigable = null;
/**
* @ngdoc function
* @name ui.router.state.$stateProvider#decorator
* @methodOf ui.router.state.$stateProvider
*
* @description
* Allows you to extend (carefully) or override (at your own peril) the
* `stateBuilder` object used internally by `$stateProvider`. This can be used
* to add custom functionality to ui-router, for example inferring templateUrl
* based on the state name.
*
* When passing only a name, it returns the current (original or decorated) builder
* function that matches `name`.
*
* The builder functions that can be decorated are listed below. Though not all
* necessarily have a good use case for decoration, that is up to you to decide.
*
* In addition, users can attach custom decorators, which will generate new
* properties within the state's internal definition. There is currently no clear
* use-case for this beyond accessing internal states (i.e. $state.$current),
* however, expect this to become increasingly relevant as we introduce additional
* meta-programming features.
*
* **Warning**: Decorators should not be interdependent because the order of
* execution of the builder functions in non-deterministic. Builder functions
* should only be dependent on the state definition object and super function.
*
*
* Existing builder functions and current return values:
*
* - **parent** `{object}` - returns the parent state object.
* - **data** `{object}` - returns state data, including any inherited data that is not
* overridden by own values (if any).
* - **url** `{object}` - returns a {@link ui.router.util.type:UrlMatcher UrlMatcher}
* or `null`.
* - **navigable** `{object}` - returns closest ancestor state that has a URL (aka is
* navigable).
* - **params** `{object}` - returns an array of state params that are ensured to
* be a super-set of parent's params.
* - **views** `{object}` - returns a views object where each key is an absolute view
* name (i.e. "viewName@stateName") and each value is the config object
* (template, controller) for the view. Even when you don't use the views object
* explicitly on a state config, one is still created for you internally.
* So by decorating this builder function you have access to decorating template
* and controller properties.
* - **ownParams** `{object}` - returns an array of params that belong to the state,
* not including any params defined by ancestor states.
* - **path** `{string}` - returns the full path from the root down to this state.
* Needed for state activation.
* - **includes** `{object}` - returns an object that includes every state that
* would pass a `$state.includes()` test.
*
* @example
* <pre>
* // Override the internal 'views' builder with a function that takes the state
* // definition, and a reference to the internal function being overridden:
* $stateProvider.decorator('views', function (state, parent) {
* var result = {},
* views = parent(state);
*
* angular.forEach(views, function (config, name) {
* var autoName = (state.name + '.' + name).replace('.', '/');
* config.templateUrl = config.templateUrl || '/partials/' + autoName + '.html';
* result[name] = config;
* });
* return result;
* });
*
* $stateProvider.state('home', {
* views: {
* 'contact.list': { controller: 'ListController' },
* 'contact.item': { controller: 'ItemController' }
* }
* });
*
* // ...
*
* $state.go('home');
* // Auto-populates list and item views with /partials/home/contact/list.html,
* // and /partials/home/contact/item.html, respectively.
* </pre>
*
* @param {string} name The name of the builder function to decorate.
* @param {object} func A function that is responsible for decorating the original
* builder function. The function receives two parameters:
*
* - `{object}` - state - The state config object.
* - `{object}` - super - The original builder function.
*
* @return {object} $stateProvider - $stateProvider instance
*/
this.decorator = decorator;
function decorator(name, func) {
/*jshint validthis: true */
if (isString(name) && !isDefined(func)) {
return stateBuilder[name];
}
if (!isFunction(func) || !isString(name)) {
return this;
}
if (stateBuilder[name] && !stateBuilder.$delegates[name]) {
stateBuilder.$delegates[name] = stateBuilder[name];
}
stateBuilder[name] = func;
return this;
}
/**
* @ngdoc function
* @name ui.router.state.$stateProvider#state
* @methodOf ui.router.state.$stateProvider
*
* @description
* Registers a state configuration under a given state name. The stateConfig object
* has the following acceptable properties.
*
* @param {string} name A unique state name, e.g. "home", "about", "contacts".
* To create a parent/child state use a dot, e.g. "about.sales", "home.newest".
* @param {object} stateConfig State configuration object.
* @param {string|function=} stateConfig.template
* <a id='template'></a>
* html template as a string or a function that returns
* an html template as a string which should be used by the uiView directives. This property
* takes precedence over templateUrl.
*
* If `template` is a function, it will be called with the following parameters:
*
* - {array.<object>} - state parameters extracted from the current $location.path() by
* applying the current state
*
* <pre>template:
* "<h1>inline template definition</h1>" +
* "<div ui-view></div>"</pre>
* <pre>template: function(params) {
* return "<h1>generated template</h1>"; }</pre>
* </div>
*
* @param {string|function=} stateConfig.templateUrl
* <a id='templateUrl'></a>
*
* path or function that returns a path to an html
* template that should be used by uiView.
*
* If `templateUrl` is a function, it will be called with the following parameters:
*
* - {array.<object>} - state parameters extracted from the current $location.path() by
* applying the current state
*
* <pre>templateUrl: "home.html"</pre>
* <pre>templateUrl: function(params) {
* return myTemplates[params.pageId]; }</pre>
*
* @param {function=} stateConfig.templateProvider
* <a id='templateProvider'></a>
* Provider function that returns HTML content string.
* <pre> templateProvider:
* function(MyTemplateService, params) {
* return MyTemplateService.getTemplate(params.pageId);
* }</pre>
*
* @param {string|function=} stateConfig.controller
* <a id='controller'></a>
*
* Controller fn that should be associated with newly
* related scope or the name of a registered controller if passed as a string.
* Optionally, the ControllerAs may be declared here.
* <pre>controller: "MyRegisteredController"</pre>
* <pre>controller:
* "MyRegisteredController as fooCtrl"}</pre>
* <pre>controller: function($scope, MyService) {
* $scope.data = MyService.getData(); }</pre>
*
* @param {function=} stateConfig.controllerProvider
* <a id='controllerProvider'></a>
*
* Injectable provider function that returns the actual controller or string.
* <pre>controllerProvider:
* function(MyResolveData) {
* if (MyResolveData.foo)
* return "FooCtrl"
* else if (MyResolveData.bar)
* return "BarCtrl";
* else return function($scope) {
* $scope.baz = "Qux";
* }
* }</pre>
*
* @param {string=} stateConfig.controllerAs
* <a id='controllerAs'></a>
*
* A controller alias name. If present the controller will be
* published to scope under the controllerAs name.
* <pre>controllerAs: "myCtrl"</pre>
*
* @param {string|object=} stateConfig.parent
* <a id='parent'></a>
* Optionally specifies the parent state of this state.
*
* <pre>parent: 'parentState'</pre>
* <pre>parent: parentState // JS variable</pre>
*
* @param {object=} stateConfig.resolve
* <a id='resolve'></a>
*
* An optional map<string, function> of dependencies which
* should be injected into the controller. If any of these dependencies are promises,
* the router will wait for them all to be resolved before the controller is instantiated.
* If all the promises are resolved successfully, the $stateChangeSuccess event is fired
* and the values of the resolved promises are injected into any controllers that reference them.
* If any of the promises are rejected the $stateChangeError event is fired.
*
* The map object is:
*
* - key - {string}: name of dependency to be injected into controller
* - factory - {string|function}: If string then it is alias for service. Otherwise if function,
* it is injected and return value it treated as dependency. If result is a promise, it is
* resolved before its value is injected into controller.
*
* <pre>resolve: {
* myResolve1:
* function($http, $stateParams) {
* return $http.get("/api/foos/"+stateParams.fooID);
* }
* }</pre>
*
* @param {string=} stateConfig.url
* <a id='url'></a>
*
* A url fragment with optional parameters. When a state is navigated or
* transitioned to, the `$stateParams` service will be populated with any
* parameters that were passed.
*
* (See {@link ui.router.util.type:UrlMatcher UrlMatcher} `UrlMatcher`} for
* more details on acceptable patterns )
*
* examples:
* <pre>url: "/home"
* url: "/users/:userid"
* url: "/books/{bookid:[a-zA-Z_-]}"
* url: "/books/{categoryid:int}"
* url: "/books/{publishername:string}/{categoryid:int}"
* url: "/messages?before&after"
* url: "/messages?{before:date}&{after:date}"
* url: "/messages/:mailboxid?{before:date}&{after:date}"
* </pre>
*
* @param {object=} stateConfig.views
* <a id='views'></a>
* an optional map<string, object> which defined multiple views, or targets views
* manually/explicitly.
*
* Examples:
*
* Targets three named `ui-view`s in the parent state's template
* <pre>views: {
* header: {
* controller: "headerCtrl",
* templateUrl: "header.html"
* }, body: {
* controller: "bodyCtrl",
* templateUrl: "body.html"
* }, footer: {
* controller: "footCtrl",
* templateUrl: "footer.html"
* }
* }</pre>
*
* Targets named `ui-view="header"` from grandparent state 'top''s template, and named `ui-view="body" from parent state's template.
* <pre>views: {
* 'header@top': {
* controller: "msgHeaderCtrl",
* templateUrl: "msgHeader.html"
* }, 'body': {
* controller: "messagesCtrl",
* templateUrl: "messages.html"
* }
* }</pre>
*
* @param {boolean=} [stateConfig.abstract=false]
* <a id='abstract'></a>
* An abstract state will never be directly activated,
* but can provide inherited properties to its common children states.
* <pre>abstract: true</pre>
*
* @param {function=} stateConfig.onEnter
* <a id='onEnter'></a>
*
* Callback function for when a state is entered. Good way
* to trigger an action or dispatch an event, such as opening a dialog.
* If minifying your scripts, make sure to explicitly annotate this function,
* because it won't be automatically annotated by your build tools.
*
* <pre>onEnter: function(MyService, $stateParams) {
* MyService.foo($stateParams.myParam);
* }</pre>
*
* @param {function=} stateConfig.onExit
* <a id='onExit'></a>
*
* Callback function for when a state is exited. Good way to
* trigger an action or dispatch an event, such as opening a dialog.
* If minifying your scripts, make sure to explicitly annotate this function,
* because it won't be automatically annotated by your build tools.
*
* <pre>onExit: function(MyService, $stateParams) {
* MyService.cleanup($stateParams.myParam);
* }</pre>
*
* @param {boolean=} [stateConfig.reloadOnSearch=true]
* <a id='reloadOnSearch'></a>
*
* If `false`, will not retrigger the same state
* just because a search/query parameter has changed (via $location.search() or $location.hash()).
* Useful for when you'd like to modify $location.search() without triggering a reload.
* <pre>reloadOnSearch: false</pre>
*
* @param {object=} stateConfig.data
* <a id='data'></a>
*
* Arbitrary data object, useful for custom configuration. The parent state's `data` is
* prototypally inherited. In other words, adding a data property to a state adds it to
* the entire subtree via prototypal inheritance.
*
* <pre>data: {
* requiredRole: 'foo'
* } </pre>
*
* @param {object=} stateConfig.params
* <a id='params'></a>
*
* A map which optionally configures parameters declared in the `url`, or
* defines additional non-url parameters. For each parameter being
* configured, add a configuration object keyed to the name of the parameter.
*
* Each parameter configuration object may contain the following properties:
*
* - ** value ** - {object|function=}: specifies the default value for this
* parameter. This implicitly sets this parameter as optional.
*
* When UI-Router routes to a state and no value is
* specified for this parameter in the URL or transition, the
* default value will be used instead. If `value` is a function,
* it will be injected and invoked, and the return value used.
*
* *Note*: `undefined` is treated as "no default value" while `null`
* is treated as "the default value is `null`".
*
* *Shorthand*: If you only need to configure the default value of the
* parameter, you may use a shorthand syntax. In the **`params`**
* map, instead mapping the param name to a full parameter configuration
* object, simply set map it to the default parameter value, e.g.:
*
* <pre>// define a parameter's default value
* params: {
* param1: { value: "defaultValue" }
* }
* // shorthand default values
* params: {
* param1: "defaultValue",
* param2: "param2Default"
* }</pre>
*
* - ** array ** - {boolean=}: *(default: false)* If true, the param value will be
* treated as an array of values. If you specified a Type, the value will be
* treated as an array of the specified Type. Note: query parameter values
* default to a special `"auto"` mode.
*
* For query parameters in `"auto"` mode, if multiple values for a single parameter
* are present in the URL (e.g.: `/foo?bar=1&bar=2&bar=3`) then the values
* are mapped to an array (e.g.: `{ foo: [ '1', '2', '3' ] }`). However, if
* only one value is present (e.g.: `/foo?bar=1`) then the value is treated as single
* value (e.g.: `{ foo: '1' }`).
*
* <pre>params: {
* param1: { array: true }
* }</pre>
*
* - ** squash ** - {bool|string=}: `squash` configures how a default parameter value is represented in the URL when
* the current parameter value is the same as the default value. If `squash` is not set, it uses the
* configured default squash policy.
* (See {@link ui.router.util.$urlMatcherFactory#methods_defaultSquashPolicy `defaultSquashPolicy()`})
*
* There are three squash settings:
*
* - false: The parameter's default value is not squashed. It is encoded and included in the URL
* - true: The parameter's default value is omitted from the URL. If the parameter is preceeded and followed
* by slashes in the state's `url` declaration, then one of those slashes are omitted.
* This can allow for cleaner looking URLs.
* - `"<arbitrary string>"`: The parameter's default value is replaced with an arbitrary placeholder of your choice.
*
* <pre>params: {
* param1: {
* value: "defaultId",
* squash: true
* } }
* // squash "defaultValue" to "~"
* params: {
* param1: {
* value: "defaultValue",
* squash: "~"
* } }
* </pre>
*
*
* @example
* <pre>
* // Some state name examples
*
* // stateName can be a single top-level name (must be unique).
* $stateProvider.state("home", {});
*
* // Or it can be a nested state name. This state is a child of the
* // above "home" state.
* $stateProvider.state("home.newest", {});
*
* // Nest states as deeply as needed.
* $stateProvider.state("home.newest.abc.xyz.inception", {});
*
* // state() returns $stateProvider, so you can chain state declarations.
* $stateProvider
* .state("home", {})
* .state("about", {})
* .state("contacts", {});
* </pre>
*
*/
this.state = state;
function state(name, definition) {
/*jshint validthis: true */
if (isObject(name)) definition = name;
else definition.name = name;
registerState(definition);
return this;
}
/**
* @ngdoc object
* @name ui.router.state.$state
*
* @requires $rootScope
* @requires $q
* @requires ui.router.state.$view
* @requires $injector
* @requires ui.router.util.$resolve
* @requires ui.router.state.$stateParams
* @requires ui.router.router.$urlRouter
*
* @property {object} params A param object, e.g. {sectionId: section.id)}, that
* you'd like to test against the current active state.
* @property {object} current A reference to the state's config object. However
* you passed it in. Useful for accessing custom data.
* @property {object} transition Currently pending transition. A promise that'll
* resolve or reject.
*
* @description
* `$state` service is responsible for representing states as well as transitioning
* between them. It also provides interfaces to ask for current state or even states
* you're coming from.
*/
this.$get = $get;
$get.$inject = ['$rootScope', '$q', '$view', '$injector', '$resolve', '$stateParams', '$urlRouter', '$location', '$urlMatcherFactory'];
function $get( $rootScope, $q, $view, $injector, $resolve, $stateParams, $urlRouter, $location, $urlMatcherFactory) {
var TransitionSupersededError = new Error('transition superseded');
var TransitionSuperseded = silenceUncaughtInPromise($q.reject(TransitionSupersededError));
var TransitionPrevented = silenceUncaughtInPromise($q.reject(new Error('transition prevented')));
var TransitionAborted = silenceUncaughtInPromise($q.reject(new Error('transition aborted')));
var TransitionFailed = silenceUncaughtInPromise($q.reject(new Error('transition failed')));
// Handles the case where a state which is the target of a transition is not found, and the user
// can optionally retry or defer the transition
function handleRedirect(redirect, state, params, options) {
/**
* @ngdoc event
* @name ui.router.state.$state#$stateNotFound
* @eventOf ui.router.state.$state
* @eventType broadcast on root scope
* @description
* Fired when a requested state **cannot be found** using the provided state name during transition.
* The event is broadcast allowing any handlers a single chance to deal with the error (usually by
* lazy-loading the unfound state). A special `unfoundState` object is passed to the listener handler,
* you can see its three properties in the example. You can use `event.preventDefault()` to abort the
* transition and the promise returned from `go` will be rejected with a `'transition aborted'` value.
*
* @param {Object} event Event object.
* @param {Object} unfoundState Unfound State information. Contains: `to, toParams, options` properties.
* @param {State} fromState Current state object.
* @param {Object} fromParams Current state params.
*
* @example
*
* <pre>
* // somewhere, assume lazy.state has not been defined
* $state.go("lazy.state", {a:1, b:2}, {inherit:false});
*
* // somewhere else
* $scope.$on('$stateNotFound',
* function(event, unfoundState, fromState, fromParams){
* console.log(unfoundState.to); // "lazy.state"
* console.log(unfoundState.toParams); // {a:1, b:2}
* console.log(unfoundState.options); // {inherit:false} + default options
* })
* </pre>
*/
var evt = $rootScope.$broadcast('$stateNotFound', redirect, state, params);
if (evt.defaultPrevented) {
$urlRouter.update();
return TransitionAborted;
}
if (!evt.retry) {
return null;
}
// Allow the handler to return a promise to defer state lookup retry
if (options.$retry) {
$urlRouter.update();
return TransitionFailed;
}
var retryTransition = $state.transition = $q.when(evt.retry);
retryTransition.then(function() {
if (retryTransition !== $state.transition) {
$rootScope.$broadcast('$stateChangeCancel', redirect.to, redirect.toParams, state, params);
return TransitionSuperseded;
}
redirect.options.$retry = true;
return $state.transitionTo(redirect.to, redirect.toParams, redirect.options);
}, function() {
return TransitionAborted;
});
$urlRouter.update();
return retryTransition;
}
root.locals = { resolve: null, globals: { $stateParams: {} } };
$state = {
params: {},
current: root.self,
$current: root,
transition: null
};
/**
* @ngdoc function
* @name ui.router.state.$state#reload
* @methodOf ui.router.state.$state
*
* @description
* A method that force reloads the current state. All resolves are re-resolved,
* controllers reinstantiated, and events re-fired.
*
* @example
* <pre>
* var app angular.module('app', ['ui.router']);
*
* app.controller('ctrl', function ($scope, $state) {
* $scope.reload = function(){
* $state.reload();
* }
* });
* </pre>
*
* `reload()` is just an alias for:
* <pre>
* $state.transitionTo($state.current, $stateParams, {
* reload: true, inherit: false, notify: true
* });
* </pre>
*
* @param {string=|object=} state - A state name or a state object, which is the root of the resolves to be re-resolved.
* @example
* <pre>
* //assuming app application consists of 3 states: 'contacts', 'contacts.detail', 'contacts.detail.item'
* //and current state is 'contacts.detail.item'
* var app angular.module('app', ['ui.router']);
*
* app.controller('ctrl', function ($scope, $state) {
* $scope.reload = function(){
* //will reload 'contact.detail' and 'contact.detail.item' states
* $state.reload('contact.detail');
* }
* });
* </pre>
*
* `reload()` is just an alias for:
* <pre>
* $state.transitionTo($state.current, $stateParams, {
* reload: true, inherit: false, notify: true
* });
* </pre>
* @returns {promise} A promise representing the state of the new transition. See
* {@link ui.router.state.$state#methods_go $state.go}.
*/
$state.reload = function reload(state) {
return $state.transitionTo($state.current, $stateParams, { reload: state || true, inherit: false, notify: true});
};
/**
* @ngdoc function
* @name ui.router.state.$state#go
* @methodOf ui.router.state.$state
*
* @description
* Convenience method for transitioning to a new state. `$state.go` calls
* `$state.transitionTo` internally but automatically sets options to
* `{ location: true, inherit: true, relative: $state.$current, notify: true }`.
* This allows you to easily use an absolute or relative to path and specify
* only the parameters you'd like to update (while letting unspecified parameters
* inherit from the currently active ancestor states).
*
* @example
* <pre>
* var app = angular.module('app', ['ui.router']);
*
* app.controller('ctrl', function ($scope, $state) {
* $scope.changeState = function () {
* $state.go('contact.detail');
* };
* });
* </pre>
* <img src='../ngdoc_assets/StateGoExamples.png'/>
*
* @param {string} to Absolute state name or relative state path. Some examples:
*
* - `$state.go('contact.detail')` - will go to the `contact.detail` state
* - `$state.go('^')` - will go to a parent state
* - `$state.go('^.sibling')` - will go to a sibling state
* - `$state.go('.child.grandchild')` - will go to grandchild state
*
* @param {object=} params A map of the parameters that will be sent to the state,
* will populate $stateParams. Any parameters that are not specified will be inherited from currently
* defined parameters. Only parameters specified in the state definition can be overridden, new
* parameters will be ignored. This allows, for example, going to a sibling state that shares parameters
* specified in a parent state. Parameter inheritance only works between common ancestor states, I.e.
* transitioning to a sibling will get you the parameters for all parents, transitioning to a child
* will get you all current parameters, etc.
* @param {object=} options Options object. The options are:
*
* - **`location`** - {boolean=true|string=} - If `true` will update the url in the location bar, if `false`
* will not. If string, must be `"replace"`, which will update url and also replace last history record.
* - **`inherit`** - {boolean=true}, If `true` will inherit url parameters from current url.
* - **`relative`** - {object=$state.$current}, When transitioning with relative path (e.g '^'),
* defines which state to be relative from.
* - **`notify`** - {boolean=true}, If `true` will broadcast $stateChangeStart and $stateChangeSuccess events.
* - **`reload`** (v0.2.5) - {boolean=false|string|object}, If `true` will force transition even if no state or params
* have changed. It will reload the resolves and views of the current state and parent states.
* If `reload` is a string (or state object), the state object is fetched (by name, or object reference); and \
* the transition reloads the resolves and views for that matched state, and all its children states.
*
* @returns {promise} A promise representing the state of the new transition.
*
* Possible success values:
*
* - $state.current
*
* <br/>Possible rejection values:
*
* - 'transition superseded' - when a newer transition has been started after this one
* - 'transition prevented' - when `event.preventDefault()` has been called in a `$stateChangeStart` listener
* - 'transition aborted' - when `event.preventDefault()` has been called in a `$stateNotFound` listener or
* when a `$stateNotFound` `event.retry` promise errors.
* - 'transition failed' - when a state has been unsuccessfully found after 2 tries.
* - *resolve error* - when an error has occurred with a `resolve`
*
*/
$state.go = function go(to, params, options) {
return $state.transitionTo(to, params, extend({ inherit: true, relative: $state.$current }, options));
};
/**
* @ngdoc function
* @name ui.router.state.$state#transitionTo
* @methodOf ui.router.state.$state
*
* @description
* Low-level method for transitioning to a new state. {@link ui.router.state.$state#methods_go $state.go}
* uses `transitionTo` internally. `$state.go` is recommended in most situations.
*
* @example
* <pre>
* var app = angular.module('app', ['ui.router']);
*
* app.controller('ctrl', function ($scope, $state) {
* $scope.changeState = function () {
* $state.transitionTo('contact.detail');
* };
* });
* </pre>
*
* @param {string} to State name.
* @param {object=} toParams A map of the parameters that will be sent to the state,
* will populate $stateParams.
* @param {object=} options Options object. The options are:
*
* - **`location`** - {boolean=true|string=} - If `true` will update the url in the location bar, if `false`
* will not. If string, must be `"replace"`, which will update url and also replace last history record.
* - **`inherit`** - {boolean=false}, If `true` will inherit url parameters from current url.
* - **`relative`** - {object=}, When transitioning with relative path (e.g '^'),
* defines which state to be relative from.
* - **`notify`** - {boolean=true}, If `true` will broadcast $stateChangeStart and $stateChangeSuccess events.
* - **`reload`** (v0.2.5) - {boolean=false|string=|object=}, If `true` will force transition even if the state or params
* have not changed, aka a reload of the same state. It differs from reloadOnSearch because you'd
* use this when you want to force a reload when *everything* is the same, including search params.
* if String, then will reload the state with the name given in reload, and any children.
* if Object, then a stateObj is expected, will reload the state found in stateObj, and any children.
*
* @returns {promise} A promise representing the state of the new transition. See
* {@link ui.router.state.$state#methods_go $state.go}.
*/
$state.transitionTo = function transitionTo(to, toParams, options) {
toParams = toParams || {};
options = extend({
location: true, inherit: false, relative: null, notify: true, reload: false, $retry: false
}, options || {});
var from = $state.$current, fromParams = $state.params, fromPath = from.path;
var evt, toState = findState(to, options.relative);
// Store the hash param for later (since it will be stripped out by various methods)
var hash = toParams['#'];
if (!isDefined(toState)) {
var redirect = { to: to, toParams: toParams, options: options };
var redirectResult = handleRedirect(redirect, from.self, fromParams, options);
if (redirectResult) {
return redirectResult;
}
// Always retry once if the $stateNotFound was not prevented
// (handles either redirect changed or state lazy-definition)
to = redirect.to;
toParams = redirect.toParams;
options = redirect.options;
toState = findState(to, options.relative);
if (!isDefined(toState)) {
if (!options.relative) throw new Error("No such state '" + to + "'");
throw new Error("Could not resolve '" + to + "' from state '" + options.relative + "'");
}
}
if (toState[abstractKey]) throw new Error("Cannot transition to abstract state '" + to + "'");
if (options.inherit) toParams = inheritParams($stateParams, toParams || {}, $state.$current, toState);
if (!toState.params.$$validates(toParams)) return TransitionFailed;
toParams = toState.params.$$values(toParams);
to = toState;
var toPath = to.path;
// Starting from the root of the path, keep all levels that haven't changed
var keep = 0, state = toPath[keep], locals = root.locals, toLocals = [];
if (!options.reload) {
while (state && state === fromPath[keep] && state.ownParams.$$equals(toParams, fromParams)) {
locals = toLocals[keep] = state.locals;
keep++;
state = toPath[keep];
}
} else if (isString(options.reload) || isObject(options.reload)) {
if (isObject(options.reload) && !options.reload.name) {
throw new Error('Invalid reload state object');
}
var reloadState = options.reload === true ? fromPath[0] : findState(options.reload);
if (options.reload && !reloadState) {
throw new Error("No such reload state '" + (isString(options.reload) ? options.reload : options.reload.name) + "'");
}
while (state && state === fromPath[keep] && state !== reloadState) {
locals = toLocals[keep] = state.locals;
keep++;
state = toPath[keep];
}
}
// If we're going to the same state and all locals are kept, we've got nothing to do.
// But clear 'transition', as we still want to cancel any other pending transitions.
// TODO: We may not want to bump 'transition' if we're called from a location change
// that we've initiated ourselves, because we might accidentally abort a legitimate
// transition initiated from code?
if (shouldSkipReload(to, toParams, from, fromParams, locals, options)) {
if (hash) toParams['#'] = hash;
$state.params = toParams;
copy($state.params, $stateParams);
copy(filterByKeys(to.params.$$keys(), $stateParams), to.locals.globals.$stateParams);
if (options.location && to.navigable && to.navigable.url) {
$urlRouter.push(to.navigable.url, toParams, {
$$avoidResync: true, replace: options.location === 'replace'
});
$urlRouter.update(true);
}
$state.transition = null;
return $q.when($state.current);
}
// Filter parameters before we pass them to event handlers etc.
toParams = filterByKeys(to.params.$$keys(), toParams || {});
// Re-add the saved hash before we start returning things or broadcasting $stateChangeStart
if (hash) toParams['#'] = hash;
// Broadcast start event and cancel the transition if requested
if (options.notify) {
/**
* @ngdoc event
* @name ui.router.state.$state#$stateChangeStart
* @eventOf ui.router.state.$state
* @eventType broadcast on root scope
* @description
* Fired when the state transition **begins**. You can use `event.preventDefault()`
* to prevent the transition from happening and then the transition promise will be
* rejected with a `'transition prevented'` value.
*
* @param {Object} event Event object.
* @param {State} toState The state being transitioned to.
* @param {Object} toParams The params supplied to the `toState`.
* @param {State} fromState The current state, pre-transition.
* @param {Object} fromParams The params supplied to the `fromState`.
*
* @example
*
* <pre>
* $rootScope.$on('$stateChangeStart',
* function(event, toState, toParams, fromState, fromParams){
* event.preventDefault();
* // transitionTo() promise will be rejected with
* // a 'transition prevented' error
* })
* </pre>
*/
if ($rootScope.$broadcast('$stateChangeStart', to.self, toParams, from.self, fromParams, options).defaultPrevented) {
$rootScope.$broadcast('$stateChangeCancel', to.self, toParams, from.self, fromParams);
//Don't update and resync url if there's been a new transition started. see issue #2238, #600
if ($state.transition == null) $urlRouter.update();
return TransitionPrevented;
}
}
// Resolve locals for the remaining states, but don't update any global state just
// yet -- if anything fails to resolve the current state needs to remain untouched.
// We also set up an inheritance chain for the locals here. This allows the view directive
// to quickly look up the correct definition for each view in the current state. Even
// though we create the locals object itself outside resolveState(), it is initially
// empty and gets filled asynchronously. We need to keep track of the promise for the
// (fully resolved) current locals, and pass this down the chain.
var resolved = $q.when(locals);
for (var l = keep; l < toPath.length; l++, state = toPath[l]) {
locals = toLocals[l] = inherit(locals);
resolved = resolveState(state, toParams, state === to, resolved, locals, options);
}
// Once everything is resolved, we are ready to perform the actual transition
// and return a promise for the new state. We also keep track of what the
// current promise is, so that we can detect overlapping transitions and
// keep only the outcome of the last transition.
var transition = $state.transition = resolved.then(function () {
var l, entering, exiting;
if ($state.transition !== transition) {
$rootScope.$broadcast('$stateChangeCancel', to.self, toParams, from.self, fromParams);
return TransitionSuperseded;
}
// Exit 'from' states not kept
for (l = fromPath.length - 1; l >= keep; l--) {
exiting = fromPath[l];
if (exiting.self.onExit) {
$injector.invoke(exiting.self.onExit, exiting.self, exiting.locals.globals);
}
exiting.locals = null;
}
// Enter 'to' states not kept
for (l = keep; l < toPath.length; l++) {
entering = toPath[l];
entering.locals = toLocals[l];
if (entering.self.onEnter) {
$injector.invoke(entering.self.onEnter, entering.self, entering.locals.globals);
}
}
// Run it again, to catch any transitions in callbacks
if ($state.transition !== transition) {
$rootScope.$broadcast('$stateChangeCancel', to.self, toParams, from.self, fromParams);
return TransitionSuperseded;
}
// Update globals in $state
$state.$current = to;
$state.current = to.self;
$state.params = toParams;
copy($state.params, $stateParams);
$state.transition = null;
if (options.location && to.navigable) {
$urlRouter.push(to.navigable.url, to.navigable.locals.globals.$stateParams, {
$$avoidResync: true, replace: options.location === 'replace'
});
}
if (options.notify) {
/**
* @ngdoc event
* @name ui.router.state.$state#$stateChangeSuccess
* @eventOf ui.router.state.$state
* @eventType broadcast on root scope
* @description
* Fired once the state transition is **complete**.
*
* @param {Object} event Event object.
* @param {State} toState The state being transitioned to.
* @param {Object} toParams The params supplied to the `toState`.
* @param {State} fromState The current state, pre-transition.
* @param {Object} fromParams The params supplied to the `fromState`.
*/
$rootScope.$broadcast('$stateChangeSuccess', to.self, toParams, from.self, fromParams);
}
$urlRouter.update(true);
return $state.current;
}).then(null, function (error) {
// propagate TransitionSuperseded error without emitting $stateChangeCancel
// as it was already emitted in the success handler above
if (error === TransitionSupersededError) return TransitionSuperseded;
if ($state.transition !== transition) {
$rootScope.$broadcast('$stateChangeCancel', to.self, toParams, from.self, fromParams);
return TransitionSuperseded;
}
$state.transition = null;
/**
* @ngdoc event
* @name ui.router.state.$state#$stateChangeError
* @eventOf ui.router.state.$state
* @eventType broadcast on root scope
* @description
* Fired when an **error occurs** during transition. It's important to note that if you
* have any errors in your resolve functions (javascript errors, non-existent services, etc)
* they will not throw traditionally. You must listen for this $stateChangeError event to
* catch **ALL** errors.
*
* @param {Object} event Event object.
* @param {State} toState The state being transitioned to.
* @param {Object} toParams The params supplied to the `toState`.
* @param {State} fromState The current state, pre-transition.
* @param {Object} fromParams The params supplied to the `fromState`.
* @param {Error} error The resolve error object.
*/
evt = $rootScope.$broadcast('$stateChangeError', to.self, toParams, from.self, fromParams, error);
if (!evt.defaultPrevented) {
$urlRouter.update();
}
return $q.reject(error);
});
silenceUncaughtInPromise(transition);
return transition;
};
/**
* @ngdoc function
* @name ui.router.state.$state#is
* @methodOf ui.router.state.$state
*
* @description
* Similar to {@link ui.router.state.$state#methods_includes $state.includes},
* but only checks for the full state name. If params is supplied then it will be
* tested for strict equality against the current active params object, so all params
* must match with none missing and no extras.
*
* @example
* <pre>
* $state.$current.name = 'contacts.details.item';
*
* // absolute name
* $state.is('contact.details.item'); // returns true
* $state.is(contactDetailItemStateObject); // returns true
*
* // relative name (. and ^), typically from a template
* // E.g. from the 'contacts.details' template
* <div ng-class="{highlighted: $state.is('.item')}">Item</div>
* </pre>
*
* @param {string|object} stateOrName The state name (absolute or relative) or state object you'd like to check.
* @param {object=} params A param object, e.g. `{sectionId: section.id}`, that you'd like
* to test against the current active state.
* @param {object=} options An options object. The options are:
*
* - **`relative`** - {string|object} - If `stateOrName` is a relative state name and `options.relative` is set, .is will
* test relative to `options.relative` state (or name).
*
* @returns {boolean} Returns true if it is the state.
*/
$state.is = function is(stateOrName, params, options) {
options = extend({ relative: $state.$current }, options || {});
var state = findState(stateOrName, options.relative);
if (!isDefined(state)) { return undefined; }
if ($state.$current !== state) { return false; }
return !params || objectKeys(params).reduce(function(acc, key) {
var paramDef = state.params[key];
return acc && (!paramDef || paramDef.type.equals($stateParams[key], params[key]));
}, true);
};
/**
* @ngdoc function
* @name ui.router.state.$state#includes
* @methodOf ui.router.state.$state
*
* @description
* A method to determine if the current active state is equal to or is the child of the
* state stateName. If any params are passed then they will be tested for a match as well.
* Not all the parameters need to be passed, just the ones you'd like to test for equality.
*
* @example
* Partial and relative names
* <pre>
* $state.$current.name = 'contacts.details.item';
*
* // Using partial names
* $state.includes("contacts"); // returns true
* $state.includes("contacts.details"); // returns true
* $state.includes("contacts.details.item"); // returns true
* $state.includes("contacts.list"); // returns false
* $state.includes("about"); // returns false
*
* // Using relative names (. and ^), typically from a template
* // E.g. from the 'contacts.details' template
* <div ng-class="{highlighted: $state.includes('.item')}">Item</div>
* </pre>
*
* Basic globbing patterns
* <pre>
* $state.$current.name = 'contacts.details.item.url';
*
* $state.includes("*.details.*.*"); // returns true
* $state.includes("*.details.**"); // returns true
* $state.includes("**.item.**"); // returns true
* $state.includes("*.details.item.url"); // returns true
* $state.includes("*.details.*.url"); // returns true
* $state.includes("*.details.*"); // returns false
* $state.includes("item.**"); // returns false
* </pre>
*
* @param {string} stateOrName A partial name, relative name, or glob pattern
* to be searched for within the current state name.
* @param {object=} params A param object, e.g. `{sectionId: section.id}`,
* that you'd like to test against the current active state.
* @param {object=} options An options object. The options are:
*
* - **`relative`** - {string|object=} - If `stateOrName` is a relative state reference and `options.relative` is set,
* .includes will test relative to `options.relative` state (or name).
*
* @returns {boolean} Returns true if it does include the state
*/
$state.includes = function includes(stateOrName, params, options) {
options = extend({ relative: $state.$current }, options || {});
if (isString(stateOrName) && isGlob(stateOrName)) {
if (!doesStateMatchGlob(stateOrName)) {
return false;
}
stateOrName = $state.$current.name;
}
var state = findState(stateOrName, options.relative);
if (!isDefined(state)) { return undefined; }
if (!isDefined($state.$current.includes[state.name])) { return false; }
if (!params) { return true; }
var keys = objectKeys(params);
for (var i = 0; i < keys.length; i++) {
var key = keys[i], paramDef = state.params[key];
if (paramDef && !paramDef.type.equals($stateParams[key], params[key])) {
return false;
}
}
return objectKeys(params).reduce(function(acc, key) {
var paramDef = state.params[key];
return acc && !paramDef || paramDef.type.equals($stateParams[key], params[key]);
}, true);
};
/**
* @ngdoc function
* @name ui.router.state.$state#href
* @methodOf ui.router.state.$state
*
* @description
* A url generation method that returns the compiled url for the given state populated with the given params.
*
* @example
* <pre>
* expect($state.href("about.person", { person: "bob" })).toEqual("/about/bob");
* </pre>
*
* @param {string|object} stateOrName The state name or state object you'd like to generate a url from.
* @param {object=} params An object of parameter values to fill the state's required parameters.
* @param {object=} options Options object. The options are:
*
* - **`lossy`** - {boolean=true} - If true, and if there is no url associated with the state provided in the
* first parameter, then the constructed href url will be built from the first navigable ancestor (aka
* ancestor with a valid url).
* - **`inherit`** - {boolean=true}, If `true` will inherit url parameters from current url.
* - **`relative`** - {object=$state.$current}, When transitioning with relative path (e.g '^'),
* defines which state to be relative from.
* - **`absolute`** - {boolean=false}, If true will generate an absolute url, e.g. "http://www.example.com/fullurl".
*
* @returns {string} compiled state url
*/
$state.href = function href(stateOrName, params, options) {
options = extend({
lossy: true,
inherit: true,
absolute: false,
relative: $state.$current
}, options || {});
var state = findState(stateOrName, options.relative);
if (!isDefined(state)) return null;
if (options.inherit) params = inheritParams($stateParams, params || {}, $state.$current, state);
var nav = (state && options.lossy) ? state.navigable : state;
if (!nav || nav.url === undefined || nav.url === null) {
return null;
}
return $urlRouter.href(nav.url, filterByKeys(state.params.$$keys().concat('#'), params || {}), {
absolute: options.absolute
});
};
/**
* @ngdoc function
* @name ui.router.state.$state#get
* @methodOf ui.router.state.$state
*
* @description
* Returns the state configuration object for any specific state or all states.
*
* @param {string|object=} stateOrName (absolute or relative) If provided, will only get the config for
* the requested state. If not provided, returns an array of ALL state configs.
* @param {string|object=} context When stateOrName is a relative state reference, the state will be retrieved relative to context.
* @returns {Object|Array} State configuration object or array of all objects.
*/
$state.get = function (stateOrName, context) {
if (arguments.length === 0) return map(objectKeys(states), function(name) { return states[name].self; });
var state = findState(stateOrName, context || $state.$current);
return (state && state.self) ? state.self : null;
};
function resolveState(state, params, paramsAreFiltered, inherited, dst, options) {
// Make a restricted $stateParams with only the parameters that apply to this state if
// necessary. In addition to being available to the controller and onEnter/onExit callbacks,
// we also need $stateParams to be available for any $injector calls we make during the
// dependency resolution process.
var $stateParams = (paramsAreFiltered) ? params : filterByKeys(state.params.$$keys(), params);
var locals = { $stateParams: $stateParams };
// Resolve 'global' dependencies for the state, i.e. those not specific to a view.
// We're also including $stateParams in this; that way the parameters are restricted
// to the set that should be visible to the state, and are independent of when we update
// the global $state and $stateParams values.
dst.resolve = $resolve.resolve(state.resolve, locals, dst.resolve, state);
var promises = [dst.resolve.then(function (globals) {
dst.globals = globals;
})];
if (inherited) promises.push(inherited);
function resolveViews() {
var viewsPromises = [];
// Resolve template and dependencies for all views.
forEach(state.views, function (view, name) {
var injectables = (view.resolve && view.resolve !== state.resolve ? view.resolve : {});
injectables.$template = [ function () {
return $view.load(name, { view: view, locals: dst.globals, params: $stateParams, notify: options.notify }) || '';
}];
viewsPromises.push($resolve.resolve(injectables, dst.globals, dst.resolve, state).then(function (result) {
// References to the controller (only instantiated at link time)
if (isFunction(view.controllerProvider) || isArray(view.controllerProvider)) {
var injectLocals = angular.extend({}, injectables, dst.globals);
result.$$controller = $injector.invoke(view.controllerProvider, null, injectLocals);
} else {
result.$$controller = view.controller;
}
// Provide access to the state itself for internal use
result.$$state = state;
result.$$controllerAs = view.controllerAs;
result.$$resolveAs = view.resolveAs;
dst[name] = result;
}));
});
return $q.all(viewsPromises).then(function(){
return dst.globals;
});
}
// Wait for all the promises and then return the activation object
return $q.all(promises).then(resolveViews).then(function (values) {
return dst;
});
}
return $state;
}
function shouldSkipReload(to, toParams, from, fromParams, locals, options) {
// Return true if there are no differences in non-search (path/object) params, false if there are differences
function nonSearchParamsEqual(fromAndToState, fromParams, toParams) {
// Identify whether all the parameters that differ between `fromParams` and `toParams` were search params.
function notSearchParam(key) {
return fromAndToState.params[key].location != "search";
}
var nonQueryParamKeys = fromAndToState.params.$$keys().filter(notSearchParam);
var nonQueryParams = pick.apply({}, [fromAndToState.params].concat(nonQueryParamKeys));
var nonQueryParamSet = new $$UMFP.ParamSet(nonQueryParams);
return nonQueryParamSet.$$equals(fromParams, toParams);
}
// If reload was not explicitly requested
// and we're transitioning to the same state we're already in
// and the locals didn't change
// or they changed in a way that doesn't merit reloading
// (reloadOnParams:false, or reloadOnSearch.false and only search params changed)
// Then return true.
if (!options.reload && to === from &&
(locals === from.locals || (to.self.reloadOnSearch === false && nonSearchParamsEqual(from, fromParams, toParams)))) {
return true;
}
}
}
angular.module('ui.router.state')
.factory('$stateParams', function () { return {}; })
.constant("$state.runtime", { autoinject: true })
.provider('$state', $StateProvider)
// Inject $state to initialize when entering runtime. #2574
.run(['$injector', function ($injector) {
// Allow tests (stateSpec.js) to turn this off by defining this constant
if ($injector.get("$state.runtime").autoinject) {
$injector.get('$state');
}
}]);
$ViewProvider.$inject = [];
function $ViewProvider() {
this.$get = $get;
/**
* @ngdoc object
* @name ui.router.state.$view
*
* @requires ui.router.util.$templateFactory
* @requires $rootScope
*
* @description
*
*/
$get.$inject = ['$rootScope', '$templateFactory'];
function $get( $rootScope, $templateFactory) {
return {
// $view.load('full.viewName', { template: ..., controller: ..., resolve: ..., async: false, params: ... })
/**
* @ngdoc function
* @name ui.router.state.$view#load
* @methodOf ui.router.state.$view
*
* @description
*
* @param {string} name name
* @param {object} options option object.
*/
load: function load(name, options) {
var result, defaults = {
template: null, controller: null, view: null, locals: null, notify: true, async: true, params: {}
};
options = extend(defaults, options);
if (options.view) {
result = $templateFactory.fromConfig(options.view, options.params, options.locals);
}
return result;
}
};
}
}
angular.module('ui.router.state').provider('$view', $ViewProvider);
/**
* @ngdoc object
* @name ui.router.state.$uiViewScrollProvider
*
* @description
* Provider that returns the {@link ui.router.state.$uiViewScroll} service function.
*/
function $ViewScrollProvider() {
var useAnchorScroll = false;
/**
* @ngdoc function
* @name ui.router.state.$uiViewScrollProvider#useAnchorScroll
* @methodOf ui.router.state.$uiViewScrollProvider
*
* @description
* Reverts back to using the core [`$anchorScroll`](http://docs.angularjs.org/api/ng.$anchorScroll) service for
* scrolling based on the url anchor.
*/
this.useAnchorScroll = function () {
useAnchorScroll = true;
};
/**
* @ngdoc object
* @name ui.router.state.$uiViewScroll
*
* @requires $anchorScroll
* @requires $timeout
*
* @description
* When called with a jqLite element, it scrolls the element into view (after a
* `$timeout` so the DOM has time to refresh).
*
* If you prefer to rely on `$anchorScroll` to scroll the view to the anchor,
* this can be enabled by calling {@link ui.router.state.$uiViewScrollProvider#methods_useAnchorScroll `$uiViewScrollProvider.useAnchorScroll()`}.
*/
this.$get = ['$anchorScroll', '$timeout', function ($anchorScroll, $timeout) {
if (useAnchorScroll) {
return $anchorScroll;
}
return function ($element) {
return $timeout(function () {
$element[0].scrollIntoView();
}, 0, false);
};
}];
}
angular.module('ui.router.state').provider('$uiViewScroll', $ViewScrollProvider);
/**
* @ngdoc directive
* @name ui.router.state.directive:ui-view
*
* @requires ui.router.state.$state
* @requires $compile
* @requires $controller
* @requires $injector
* @requires ui.router.state.$uiViewScroll
* @requires $document
*
* @restrict ECA
*
* @description
* The ui-view directive tells $state where to place your templates.
*
* @param {string=} name A view name. The name should be unique amongst the other views in the
* same state. You can have views of the same name that live in different states.
*
* @param {string=} autoscroll It allows you to set the scroll behavior of the browser window
* when a view is populated. By default, $anchorScroll is overridden by ui-router's custom scroll
* service, {@link ui.router.state.$uiViewScroll}. This custom service let's you
* scroll ui-view elements into view when they are populated during a state activation.
*
* *Note: To revert back to old [`$anchorScroll`](http://docs.angularjs.org/api/ng.$anchorScroll)
* functionality, call `$uiViewScrollProvider.useAnchorScroll()`.*
*
* @param {string=} onload Expression to evaluate whenever the view updates.
*
* @example
* A view can be unnamed or named.
* <pre>
* <!-- Unnamed -->
* <div ui-view></div>
*
* <!-- Named -->
* <div ui-view="viewName"></div>
* </pre>
*
* You can only have one unnamed view within any template (or root html). If you are only using a
* single view and it is unnamed then you can populate it like so:
* <pre>
* <div ui-view></div>
* $stateProvider.state("home", {
* template: "<h1>HELLO!</h1>"
* })
* </pre>
*
* The above is a convenient shortcut equivalent to specifying your view explicitly with the {@link ui.router.state.$stateProvider#methods_state `views`}
* config property, by name, in this case an empty name:
* <pre>
* $stateProvider.state("home", {
* views: {
* "": {
* template: "<h1>HELLO!</h1>"
* }
* }
* })
* </pre>
*
* But typically you'll only use the views property if you name your view or have more than one view
* in the same template. There's not really a compelling reason to name a view if its the only one,
* but you could if you wanted, like so:
* <pre>
* <div ui-view="main"></div>
* </pre>
* <pre>
* $stateProvider.state("home", {
* views: {
* "main": {
* template: "<h1>HELLO!</h1>"
* }
* }
* })
* </pre>
*
* Really though, you'll use views to set up multiple views:
* <pre>
* <div ui-view></div>
* <div ui-view="chart"></div>
* <div ui-view="data"></div>
* </pre>
*
* <pre>
* $stateProvider.state("home", {
* views: {
* "": {
* template: "<h1>HELLO!</h1>"
* },
* "chart": {
* template: "<chart_thing/>"
* },
* "data": {
* template: "<data_thing/>"
* }
* }
* })
* </pre>
*
* Examples for `autoscroll`:
*
* <pre>
* <!-- If autoscroll present with no expression,
* then scroll ui-view into view -->
* <ui-view autoscroll/>
*
* <!-- If autoscroll present with valid expression,
* then scroll ui-view into view if expression evaluates to true -->
* <ui-view autoscroll='true'/>
* <ui-view autoscroll='false'/>
* <ui-view autoscroll='scopeVariable'/>
* </pre>
*
* Resolve data:
*
* The resolved data from the state's `resolve` block is placed on the scope as `$resolve` (this
* can be customized using [[ViewDeclaration.resolveAs]]). This can be then accessed from the template.
*
* Note that when `controllerAs` is being used, `$resolve` is set on the controller instance *after* the
* controller is instantiated. The `$onInit()` hook can be used to perform initialization code which
* depends on `$resolve` data.
*
* Example usage of $resolve in a view template
* <pre>
* $stateProvider.state('home', {
* template: '<my-component user="$resolve.user"></my-component>',
* resolve: {
* user: function(UserService) { return UserService.fetchUser(); }
* }
* });
* </pre>
*/
$ViewDirective.$inject = ['$state', '$injector', '$uiViewScroll', '$interpolate', '$q'];
function $ViewDirective( $state, $injector, $uiViewScroll, $interpolate, $q) {
function getService() {
return ($injector.has) ? function(service) {
return $injector.has(service) ? $injector.get(service) : null;
} : function(service) {
try {
return $injector.get(service);
} catch (e) {
return null;
}
};
}
var service = getService(),
$animator = service('$animator'),
$animate = service('$animate');
// Returns a set of DOM manipulation functions based on which Angular version
// it should use
function getRenderer(attrs, scope) {
var statics = function() {
return {
enter: function (element, target, cb) { target.after(element); cb(); },
leave: function (element, cb) { element.remove(); cb(); }
};
};
if ($animate) {
return {
enter: function(element, target, cb) {
if (angular.version.minor > 2) {
$animate.enter(element, null, target).then(cb);
} else {
$animate.enter(element, null, target, cb);
}
},
leave: function(element, cb) {
if (angular.version.minor > 2) {
$animate.leave(element).then(cb);
} else {
$animate.leave(element, cb);
}
}
};
}
if ($animator) {
var animate = $animator && $animator(scope, attrs);
return {
enter: function(element, target, cb) {animate.enter(element, null, target); cb(); },
leave: function(element, cb) { animate.leave(element); cb(); }
};
}
return statics();
}
var directive = {
restrict: 'ECA',
terminal: true,
priority: 400,
transclude: 'element',
compile: function (tElement, tAttrs, $transclude) {
return function (scope, $element, attrs) {
var previousEl, currentEl, currentScope, latestLocals,
onloadExp = attrs.onload || '',
autoScrollExp = attrs.autoscroll,
renderer = getRenderer(attrs, scope),
inherited = $element.inheritedData('$uiView');
scope.$on('$stateChangeSuccess', function() {
updateView(false);
});
updateView(true);
function cleanupLastView() {
if (previousEl) {
previousEl.remove();
previousEl = null;
}
if (currentScope) {
currentScope.$destroy();
currentScope = null;
}
if (currentEl) {
var $uiViewData = currentEl.data('$uiViewAnim');
renderer.leave(currentEl, function() {
$uiViewData.$$animLeave.resolve();
previousEl = null;
});
previousEl = currentEl;
currentEl = null;
}
}
function updateView(firstTime) {
var newScope,
name = getUiViewName(scope, attrs, $element, $interpolate),
previousLocals = name && $state.$current && $state.$current.locals[name];
if (!firstTime && previousLocals === latestLocals) return; // nothing to do
newScope = scope.$new();
latestLocals = $state.$current.locals[name];
/**
* @ngdoc event
* @name ui.router.state.directive:ui-view#$viewContentLoading
* @eventOf ui.router.state.directive:ui-view
* @eventType emits on ui-view directive scope
* @description
*
* Fired once the view **begins loading**, *before* the DOM is rendered.
*
* @param {Object} event Event object.
* @param {string} viewName Name of the view.
*/
newScope.$emit('$viewContentLoading', name);
var clone = $transclude(newScope, function(clone) {
var animEnter = $q.defer(), animLeave = $q.defer();
var viewAnimData = {
$animEnter: animEnter.promise,
$animLeave: animLeave.promise,
$$animLeave: animLeave
};
clone.data('$uiViewAnim', viewAnimData);
renderer.enter(clone, $element, function onUiViewEnter() {
animEnter.resolve();
if(currentScope) {
currentScope.$emit('$viewContentAnimationEnded');
}
if (angular.isDefined(autoScrollExp) && !autoScrollExp || scope.$eval(autoScrollExp)) {
$uiViewScroll(clone);
}
});
cleanupLastView();
});
currentEl = clone;
currentScope = newScope;
/**
* @ngdoc event
* @name ui.router.state.directive:ui-view#$viewContentLoaded
* @eventOf ui.router.state.directive:ui-view
* @eventType emits on ui-view directive scope
* @description
* Fired once the view is **loaded**, *after* the DOM is rendered.
*
* @param {Object} event Event object.
* @param {string} viewName Name of the view.
*/
currentScope.$emit('$viewContentLoaded', name);
currentScope.$eval(onloadExp);
}
};
}
};
return directive;
}
$ViewDirectiveFill.$inject = ['$compile', '$controller', '$state', '$interpolate'];
function $ViewDirectiveFill ( $compile, $controller, $state, $interpolate) {
return {
restrict: 'ECA',
priority: -400,
compile: function (tElement) {
var initial = tElement.html();
if (tElement.empty) {
tElement.empty();
} else {
// ng 1.0.0 doesn't have empty(), which cleans up data and handlers
tElement[0].innerHTML = null;
}
return function (scope, $element, attrs) {
var current = $state.$current,
name = getUiViewName(scope, attrs, $element, $interpolate),
locals = current && current.locals[name];
if (! locals) {
$element.html(initial);
$compile($element.contents())(scope);
return;
}
$element.data('$uiView', { name: name, state: locals.$$state });
$element.html(locals.$template ? locals.$template : initial);
var resolveData = angular.extend({}, locals);
scope[locals.$$resolveAs] = resolveData;
var link = $compile($element.contents());
if (locals.$$controller) {
locals.$scope = scope;
locals.$element = $element;
var controller = $controller(locals.$$controller, locals);
if (locals.$$controllerAs) {
scope[locals.$$controllerAs] = controller;
scope[locals.$$controllerAs][locals.$$resolveAs] = resolveData;
}
if (isFunction(controller.$onInit)) controller.$onInit();
$element.data('$ngControllerController', controller);
$element.children().data('$ngControllerController', controller);
}
link(scope);
};
}
};
}
/**
* Shared ui-view code for both directives:
* Given scope, element, and its attributes, return the view's name
*/
function getUiViewName(scope, attrs, element, $interpolate) {
var name = $interpolate(attrs.uiView || attrs.name || '')(scope);
var uiViewCreatedBy = element.inheritedData('$uiView');
return name.indexOf('@') >= 0 ? name : (name + '@' + (uiViewCreatedBy ? uiViewCreatedBy.state.name : ''));
}
angular.module('ui.router.state').directive('uiView', $ViewDirective);
angular.module('ui.router.state').directive('uiView', $ViewDirectiveFill);
function parseStateRef(ref, current) {
var preparsed = ref.match(/^\s*({[^}]*})\s*$/), parsed;
if (preparsed) ref = current + '(' + preparsed[1] + ')';
parsed = ref.replace(/\n/g, " ").match(/^([^(]+?)\s*(\((.*)\))?$/);
if (!parsed || parsed.length !== 4) throw new Error("Invalid state ref '" + ref + "'");
return { state: parsed[1], paramExpr: parsed[3] || null };
}
function stateContext(el) {
var stateData = el.parent().inheritedData('$uiView');
if (stateData && stateData.state && stateData.state.name) {
return stateData.state;
}
}
function getTypeInfo(el) {
// SVGAElement does not use the href attribute, but rather the 'xlinkHref' attribute.
var isSvg = Object.prototype.toString.call(el.prop('href')) === '[object SVGAnimatedString]';
var isForm = el[0].nodeName === "FORM";
return {
attr: isForm ? "action" : (isSvg ? 'xlink:href' : 'href'),
isAnchor: el.prop("tagName").toUpperCase() === "A",
clickable: !isForm
};
}
function clickHook(el, $state, $timeout, type, current) {
return function(e) {
var button = e.which || e.button, target = current();
if (!(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || el.attr('target'))) {
// HACK: This is to allow ng-clicks to be processed before the transition is initiated:
var transition = $timeout(function() {
$state.go(target.state, target.params, target.options);
});
e.preventDefault();
// if the state has no URL, ignore one preventDefault from the <a> directive.
var ignorePreventDefaultCount = type.isAnchor && !target.href ? 1: 0;
e.preventDefault = function() {
if (ignorePreventDefaultCount-- <= 0) $timeout.cancel(transition);
};
}
};
}
function defaultOpts(el, $state) {
return { relative: stateContext(el) || $state.$current, inherit: true };
}
/**
* @ngdoc directive
* @name ui.router.state.directive:ui-sref
*
* @requires ui.router.state.$state
* @requires $timeout
*
* @restrict A
*
* @description
* A directive that binds a link (`<a>` tag) to a state. If the state has an associated
* URL, the directive will automatically generate & update the `href` attribute via
* the {@link ui.router.state.$state#methods_href $state.href()} method. Clicking
* the link will trigger a state transition with optional parameters.
*
* Also middle-clicking, right-clicking, and ctrl-clicking on the link will be
* handled natively by the browser.
*
* You can also use relative state paths within ui-sref, just like the relative
* paths passed to `$state.go()`. You just need to be aware that the path is relative
* to the state that the link lives in, in other words the state that loaded the
* template containing the link.
*
* You can specify options to pass to {@link ui.router.state.$state#methods_go $state.go()}
* using the `ui-sref-opts` attribute. Options are restricted to `location`, `inherit`,
* and `reload`.
*
* @example
* Here's an example of how you'd use ui-sref and how it would compile. If you have the
* following template:
* <pre>
* <a ui-sref="home">Home</a> | <a ui-sref="about">About</a> | <a ui-sref="{page: 2}">Next page</a>
*
* <ul>
* <li ng-repeat="contact in contacts">
* <a ui-sref="contacts.detail({ id: contact.id })">{{ contact.name }}</a>
* </li>
* </ul>
* </pre>
*
* Then the compiled html would be (assuming Html5Mode is off and current state is contacts):
* <pre>
* <a href="#/home" ui-sref="home">Home</a> | <a href="#/about" ui-sref="about">About</a> | <a href="#/contacts?page=2" ui-sref="{page: 2}">Next page</a>
*
* <ul>
* <li ng-repeat="contact in contacts">
* <a href="#/contacts/1" ui-sref="contacts.detail({ id: contact.id })">Joe</a>
* </li>
* <li ng-repeat="contact in contacts">
* <a href="#/contacts/2" ui-sref="contacts.detail({ id: contact.id })">Alice</a>
* </li>
* <li ng-repeat="contact in contacts">
* <a href="#/contacts/3" ui-sref="contacts.detail({ id: contact.id })">Bob</a>
* </li>
* </ul>
*
* <a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>
* </pre>
*
* @param {string} ui-sref 'stateName' can be any valid absolute or relative state
* @param {Object} ui-sref-opts options to pass to {@link ui.router.state.$state#methods_go $state.go()}
*/
$StateRefDirective.$inject = ['$state', '$timeout'];
function $StateRefDirective($state, $timeout) {
return {
restrict: 'A',
require: ['?^uiSrefActive', '?^uiSrefActiveEq'],
link: function(scope, element, attrs, uiSrefActive) {
var ref = parseStateRef(attrs.uiSref, $state.current.name);
var def = { state: ref.state, href: null, params: null };
var type = getTypeInfo(element);
var active = uiSrefActive[1] || uiSrefActive[0];
var unlinkInfoFn = null;
var hookFn;
def.options = extend(defaultOpts(element, $state), attrs.uiSrefOpts ? scope.$eval(attrs.uiSrefOpts) : {});
var update = function(val) {
if (val) def.params = angular.copy(val);
def.href = $state.href(ref.state, def.params, def.options);
if (unlinkInfoFn) unlinkInfoFn();
if (active) unlinkInfoFn = active.$$addStateInfo(ref.state, def.params);
if (def.href !== null) attrs.$set(type.attr, def.href);
};
if (ref.paramExpr) {
scope.$watch(ref.paramExpr, function(val) { if (val !== def.params) update(val); }, true);
def.params = angular.copy(scope.$eval(ref.paramExpr));
}
update();
if (!type.clickable) return;
hookFn = clickHook(element, $state, $timeout, type, function() { return def; });
element[element.on ? 'on' : 'bind']("click", hookFn);
scope.$on('$destroy', function() {
element[element.off ? 'off' : 'unbind']("click", hookFn);
});
}
};
}
/**
* @ngdoc directive
* @name ui.router.state.directive:ui-state
*
* @requires ui.router.state.uiSref
*
* @restrict A
*
* @description
* Much like ui-sref, but will accept named $scope properties to evaluate for a state definition,
* params and override options.
*
* @param {string} ui-state 'stateName' can be any valid absolute or relative state
* @param {Object} ui-state-params params to pass to {@link ui.router.state.$state#methods_href $state.href()}
* @param {Object} ui-state-opts options to pass to {@link ui.router.state.$state#methods_go $state.go()}
*/
$StateRefDynamicDirective.$inject = ['$state', '$timeout'];
function $StateRefDynamicDirective($state, $timeout) {
return {
restrict: 'A',
require: ['?^uiSrefActive', '?^uiSrefActiveEq'],
link: function(scope, element, attrs, uiSrefActive) {
var type = getTypeInfo(element);
var active = uiSrefActive[1] || uiSrefActive[0];
var group = [attrs.uiState, attrs.uiStateParams || null, attrs.uiStateOpts || null];
var watch = '[' + group.map(function(val) { return val || 'null'; }).join(', ') + ']';
var def = { state: null, params: null, options: null, href: null };
var unlinkInfoFn = null;
var hookFn;
function runStateRefLink (group) {
def.state = group[0]; def.params = group[1]; def.options = group[2];
def.href = $state.href(def.state, def.params, def.options);
if (unlinkInfoFn) unlinkInfoFn();
if (active) unlinkInfoFn = active.$$addStateInfo(def.state, def.params);
if (def.href) attrs.$set(type.attr, def.href);
}
scope.$watch(watch, runStateRefLink, true);
runStateRefLink(scope.$eval(watch));
if (!type.clickable) return;
hookFn = clickHook(element, $state, $timeout, type, function() { return def; });
element[element.on ? 'on' : 'bind']("click", hookFn);
scope.$on('$destroy', function() {
element[element.off ? 'off' : 'unbind']("click", hookFn);
});
}
};
}
/**
* @ngdoc directive
* @name ui.router.state.directive:ui-sref-active
*
* @requires ui.router.state.$state
* @requires ui.router.state.$stateParams
* @requires $interpolate
*
* @restrict A
*
* @description
* A directive working alongside ui-sref to add classes to an element when the
* related ui-sref directive's state is active, and removing them when it is inactive.
* The primary use-case is to simplify the special appearance of navigation menus
* relying on `ui-sref`, by having the "active" state's menu button appear different,
* distinguishing it from the inactive menu items.
*
* ui-sref-active can live on the same element as ui-sref or on a parent element. The first
* ui-sref-active found at the same level or above the ui-sref will be used.
*
* Will activate when the ui-sref's target state or any child state is active. If you
* need to activate only when the ui-sref target state is active and *not* any of
* it's children, then you will use
* {@link ui.router.state.directive:ui-sref-active-eq ui-sref-active-eq}
*
* @example
* Given the following template:
* <pre>
* <ul>
* <li ui-sref-active="active" class="item">
* <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
* </li>
* </ul>
* </pre>
*
*
* When the app state is "app.user" (or any children states), and contains the state parameter "user" with value "bilbobaggins",
* the resulting HTML will appear as (note the 'active' class):
* <pre>
* <ul>
* <li ui-sref-active="active" class="item active">
* <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
* </li>
* </ul>
* </pre>
*
* The class name is interpolated **once** during the directives link time (any further changes to the
* interpolated value are ignored).
*
* Multiple classes may be specified in a space-separated format:
* <pre>
* <ul>
* <li ui-sref-active='class1 class2 class3'>
* <a ui-sref="app.user">link</a>
* </li>
* </ul>
* </pre>
*
* It is also possible to pass ui-sref-active an expression that evaluates
* to an object hash, whose keys represent active class names and whose
* values represent the respective state names/globs.
* ui-sref-active will match if the current active state **includes** any of
* the specified state names/globs, even the abstract ones.
*
* @Example
* Given the following template, with "admin" being an abstract state:
* <pre>
* <div ui-sref-active="{'active': 'admin.*'}">
* <a ui-sref-active="active" ui-sref="admin.roles">Roles</a>
* </div>
* </pre>
*
* When the current state is "admin.roles" the "active" class will be applied
* to both the <div> and <a> elements. It is important to note that the state
* names/globs passed to ui-sref-active shadow the state provided by ui-sref.
*/
/**
* @ngdoc directive
* @name ui.router.state.directive:ui-sref-active-eq
*
* @requires ui.router.state.$state
* @requires ui.router.state.$stateParams
* @requires $interpolate
*
* @restrict A
*
* @description
* The same as {@link ui.router.state.directive:ui-sref-active ui-sref-active} but will only activate
* when the exact target state used in the `ui-sref` is active; no child states.
*
*/
$StateRefActiveDirective.$inject = ['$state', '$stateParams', '$interpolate'];
function $StateRefActiveDirective($state, $stateParams, $interpolate) {
return {
restrict: "A",
controller: ['$scope', '$element', '$attrs', '$timeout', function ($scope, $element, $attrs, $timeout) {
var states = [], activeClasses = {}, activeEqClass, uiSrefActive;
// There probably isn't much point in $observing this
// uiSrefActive and uiSrefActiveEq share the same directive object with some
// slight difference in logic routing
activeEqClass = $interpolate($attrs.uiSrefActiveEq || '', false)($scope);
try {
uiSrefActive = $scope.$eval($attrs.uiSrefActive);
} catch (e) {
// Do nothing. uiSrefActive is not a valid expression.
// Fall back to using $interpolate below
}
uiSrefActive = uiSrefActive || $interpolate($attrs.uiSrefActive || '', false)($scope);
if (isObject(uiSrefActive)) {
forEach(uiSrefActive, function(stateOrName, activeClass) {
if (isString(stateOrName)) {
var ref = parseStateRef(stateOrName, $state.current.name);
addState(ref.state, $scope.$eval(ref.paramExpr), activeClass);
}
});
}
// Allow uiSref to communicate with uiSrefActive[Equals]
this.$$addStateInfo = function (newState, newParams) {
// we already got an explicit state provided by ui-sref-active, so we
// shadow the one that comes from ui-sref
if (isObject(uiSrefActive) && states.length > 0) {
return;
}
var deregister = addState(newState, newParams, uiSrefActive);
update();
return deregister;
};
$scope.$on('$stateChangeSuccess', update);
function addState(stateName, stateParams, activeClass) {
var state = $state.get(stateName, stateContext($element));
var stateHash = createStateHash(stateName, stateParams);
var stateInfo = {
state: state || { name: stateName },
params: stateParams,
hash: stateHash
};
states.push(stateInfo);
activeClasses[stateHash] = activeClass;
return function removeState() {
var idx = states.indexOf(stateInfo);
if (idx !== -1) states.splice(idx, 1);
};
}
/**
* @param {string} state
* @param {Object|string} [params]
* @return {string}
*/
function createStateHash(state, params) {
if (!isString(state)) {
throw new Error('state should be a string');
}
if (isObject(params)) {
return state + toJson(params);
}
params = $scope.$eval(params);
if (isObject(params)) {
return state + toJson(params);
}
return state;
}
// Update route state
function update() {
for (var i = 0; i < states.length; i++) {
if (anyMatch(states[i].state, states[i].params)) {
addClass($element, activeClasses[states[i].hash]);
} else {
removeClass($element, activeClasses[states[i].hash]);
}
if (exactMatch(states[i].state, states[i].params)) {
addClass($element, activeEqClass);
} else {
removeClass($element, activeEqClass);
}
}
}
function addClass(el, className) { $timeout(function () { el.addClass(className); }); }
function removeClass(el, className) { el.removeClass(className); }
function anyMatch(state, params) { return $state.includes(state.name, params); }
function exactMatch(state, params) { return $state.is(state.name, params); }
update();
}]
};
}
angular.module('ui.router.state')
.directive('uiSref', $StateRefDirective)
.directive('uiSrefActive', $StateRefActiveDirective)
.directive('uiSrefActiveEq', $StateRefActiveDirective)
.directive('uiState', $StateRefDynamicDirective);
/**
* @ngdoc filter
* @name ui.router.state.filter:isState
*
* @requires ui.router.state.$state
*
* @description
* Translates to {@link ui.router.state.$state#methods_is $state.is("stateName")}.
*/
$IsStateFilter.$inject = ['$state'];
function $IsStateFilter($state) {
var isFilter = function (state, params) {
return $state.is(state, params);
};
isFilter.$stateful = true;
return isFilter;
}
/**
* @ngdoc filter
* @name ui.router.state.filter:includedByState
*
* @requires ui.router.state.$state
*
* @description
* Translates to {@link ui.router.state.$state#methods_includes $state.includes('fullOrPartialStateName')}.
*/
$IncludedByStateFilter.$inject = ['$state'];
function $IncludedByStateFilter($state) {
var includesFilter = function (state, params, options) {
return $state.includes(state, params, options);
};
includesFilter.$stateful = true;
return includesFilter;
}
angular.module('ui.router.state')
.filter('isState', $IsStateFilter)
.filter('includedByState', $IncludedByStateFilter);
})(window, window.angular);
/*!
angular-block-ui v0.2.2
(c) 2016 (null) McNull https://github.com/McNull/angular-block-ui
License: MIT
*/
(function(angular) {
var blkUI = angular.module('blockUI', []);
blkUI.config(["$provide", "$httpProvider", function ($provide, $httpProvider) {
$provide.decorator('$exceptionHandler', ['$delegate', '$injector',
function ($delegate, $injector) {
var blockUI, blockUIConfig;
return function (exception, cause) {
blockUIConfig = blockUIConfig || $injector.get('blockUIConfig');
if (blockUIConfig.resetOnException) {
try {
blockUI = blockUI || $injector.get('blockUI');
blockUI.instances.reset();
} catch (ex) {
console.log('$exceptionHandler', exception);
}
}
$delegate(exception, cause);
};
}
]);
$httpProvider.interceptors.push('blockUIHttpInterceptor');
}]);
blkUI.run(["$document", "blockUIConfig", "$templateCache", function ($document, blockUIConfig, $templateCache) {
if (blockUIConfig.autoInjectBodyBlock) {
$document.find('body').attr('block-ui', 'main');
}
if (blockUIConfig.template) {
// Swap the builtin template with the custom template.
// Create a magic cache key and place the template in the cache.
blockUIConfig.templateUrl = '$$block-ui-template$$';
$templateCache.put(blockUIConfig.templateUrl, blockUIConfig.template);
}
}]);
function moduleLoaded(name) {
try {
angular.module(name);
} catch(ex) {
return false;
}
return true;
}
blkUI.config(["$provide", function ($provide) {
$provide.decorator('$location', decorateLocation);
}]);
var decorateLocation = [
'$delegate', 'blockUI', 'blockUIConfig',
function ($delegate, blockUI, blockUIConfig) {
if (blockUIConfig.blockBrowserNavigation) {
blockUI.$_blockLocationChange = true;
var overrides = ['url', 'path', 'search', 'hash', 'state'];
function hook(f) {
var s = $delegate[f];
$delegate[f] = function () {
// console.log(f, Date.now(), arguments);
var result = s.apply($delegate, arguments);
// The call was a setter if the $location service is returned.
if (result === $delegate) {
// Mark the mainblock ui to allow the location change.
blockUI.$_blockLocationChange = false;
}
return result;
};
}
angular.forEach(overrides, hook);
}
return $delegate;
}];
// Called from block-ui-directive for the 'main' instance.
function blockNavigation($scope, mainBlockUI, blockUIConfig) {
if (blockUIConfig.blockBrowserNavigation) {
function registerLocationChange() {
$scope.$on('$locationChangeStart', function (event) {
// console.log('$locationChangeStart', mainBlockUI.$_blockLocationChange + ' ' + mainBlockUI.state().blockCount);
if (mainBlockUI.$_blockLocationChange && mainBlockUI.state().blockCount > 0) {
event.preventDefault();
}
});
$scope.$on('$locationChangeSuccess', function () {
mainBlockUI.$_blockLocationChange = blockUIConfig.blockBrowserNavigation;
// console.log('$locationChangeSuccess', mainBlockUI.$_blockLocationChange + ' ' + mainBlockUI.state().blockCount);
});
}
if (moduleLoaded('ngRoute')) {
// After the initial content has been loaded we'll spy on any location
// changes and discard them when needed.
var fn = $scope.$on('$viewContentLoaded', function () {
// Unhook the view loaded and hook a function that will prevent
// location changes while the block is active.
fn();
registerLocationChange();
});
} else {
registerLocationChange();
}
}
}
blkUI.directive('blockUiContainer', ["blockUIConfig", "blockUiContainerLinkFn", function (blockUIConfig, blockUiContainerLinkFn) {
return {
scope: true,
restrict: 'A',
templateUrl: blockUIConfig.templateUrl,
compile: function($element) {
return blockUiContainerLinkFn;
}
};
}]).factory('blockUiContainerLinkFn', ["blockUI", "blockUIUtils", function (blockUI, blockUIUtils) {
return function ($scope, $element, $attrs) {
var srvInstance = $element.inheritedData('block-ui');
if (!srvInstance) {
throw new Error('No parent block-ui service instance located.');
}
// Expose the state on the scope
$scope.state = srvInstance.state();
// $scope.$watch('state.blocking', function(value) {
// $element.toggleClass('block-ui-visible', !!value);
// });
//
// $scope.$watch('state.blockCount > 0', function(value) {
// $element.toggleClass('block-ui-active', !!value);
// });
};
}]);
blkUI.directive('blockUi', ["blockUiCompileFn", function (blockUiCompileFn) {
return {
scope: true,
restrict: 'A',
compile: blockUiCompileFn
};
}]).factory('blockUiCompileFn', ["blockUiPreLinkFn", function (blockUiPreLinkFn) {
return function ($element, $attrs) {
// Class should be added here to prevent an animation delay error.
$element.append('<div block-ui-container class="block-ui-container"></div>');
return {
pre: blockUiPreLinkFn
};
};
}]).factory('blockUiPreLinkFn', ["blockUI", "blockUIUtils", "blockUIConfig", function (blockUI, blockUIUtils, blockUIConfig) {
return function ($scope, $element, $attrs) {
// If the element does not have the class "block-ui" set, we set the
// default css classes from the config.
if (!$element.hasClass('block-ui')) {
$element.addClass(blockUIConfig.cssClass);
}
// Expose the blockUiMessageClass attribute value on the scope
$attrs.$observe('blockUiMessageClass', function (value) {
$scope.$_blockUiMessageClass = value;
});
// Create the blockUI instance
// Prefix underscore to prevent integers:
// https://github.com/McNull/angular-block-ui/pull/8
var instanceId = $attrs.blockUi || '_' + $scope.$id;
var srvInstance = blockUI.instances.get(instanceId);
// If this is the main (topmost) block element we'll also need to block any
// location changes while the block is active.
if (instanceId === 'main') {
blockNavigation($scope, srvInstance, blockUIConfig);
} else {
// Locate the parent blockUI instance
var parentInstance = $element.inheritedData('block-ui');
if (parentInstance) {
// TODO: assert if parent is already set to something else
srvInstance._parent = parentInstance;
}
}
// Ensure the instance is released when the scope is destroyed
$scope.$on('$destroy', function () {
srvInstance.release();
});
// Increase the reference count
srvInstance.addRef();
// Expose the state on the scope
$scope.$_blockUiState = srvInstance.state();
$scope.$watch('$_blockUiState.blocking', function (value) {
// Set the aria-busy attribute if needed
$element.attr('aria-busy', !!value);
$element.toggleClass('block-ui-visible', !!value);
});
$scope.$watch('$_blockUiState.blockCount > 0', function (value) {
$element.toggleClass('block-ui-active', !!value);
});
// If a pattern is provided assign it to the state
var pattern = $attrs.blockUiPattern;
if (pattern) {
var regExp = blockUIUtils.buildRegExp(pattern);
srvInstance.pattern(regExp);
}
// Store a reference to the service instance on the element
$element.data('block-ui', srvInstance);
};
}]);
//.factory('blockUiPostLinkFn', function(blockUIUtils) {
//
// return function($scope, $element, $attrs) {
//
// var $message;
//
// $attrs.$observe('blockUiMessageClass', function(value) {
//
// $message = $message || blockUIUtils.findElement($element, function($e) {
// return $e.hasClass('block-ui-message');
// });
//
// $message.addClass(value);
//
// });
// };
//
//});
blkUI.constant('blockUIConfig', {
templateUrl: 'angular-block-ui/angular-block-ui.ng.html',
delay: 250,
message: "Loading ...",
autoBlock: true,
resetOnException: true,
requestFilter: angular.noop,
autoInjectBodyBlock: true,
cssClass: 'block-ui block-ui-anim-fade',
blockBrowserNavigation: false
});
blkUI.factory('blockUIHttpInterceptor', ["$q", "$injector", "blockUIConfig", "$templateCache", function($q, $injector, blockUIConfig, $templateCache) {
var blockUI;
function injectBlockUI() {
blockUI = blockUI || $injector.get('blockUI');
}
function stopBlockUI(config) {
if (blockUIConfig.autoBlock && (config && !config.$_noBlock && config.$_blocks)) {
injectBlockUI();
config.$_blocks.stop();
}
}
function error(rejection) {
try {
stopBlockUI(rejection.config);
} catch(ex) {
console.log('httpRequestError', ex);
}
return $q.reject(rejection);
}
return {
request: function(config) {
// Only block when autoBlock is enabled ...
// ... and the request doesn't match a cached template.
if (blockUIConfig.autoBlock &&
!(config.method == 'GET' && $templateCache.get(config.url))) {
// Don't block excluded requests
var result = blockUIConfig.requestFilter(config);
if (result === false) {
// Tag the config so we don't unblock this request
config.$_noBlock = true;
} else {
injectBlockUI();
config.$_blocks = blockUI.instances.locate(config);
config.$_blocks.start(result);
}
}
return config;
},
requestError: error,
response: function(response) {
// If the connection to the website goes down the response interceptor gets and error with "cannot read property config of null".
// https://github.com/McNull/angular-block-ui/issues/53
if(response) {
stopBlockUI(response.config);
}
return response;
},
responseError: error
};
}]);
blkUI.factory('blockUI', ["blockUIConfig", "$timeout", "blockUIUtils", "$document", function(blockUIConfig, $timeout, blockUIUtils, $document) {
var $body = $document.find('body');
// These properties are not allowed to be specified in the start method.
var reservedStateProperties = ['id', 'blockCount', 'blocking'];
function BlockUI(id) {
var self = this;
var state = {
id: id,
blockCount: 0,
message: blockUIConfig.message,
blocking: false
}, startPromise, doneCallbacks = [];
this._id = id;
this._refs = 0;
this.start = function(messageOrOptions) {
messageOrOptions = messageOrOptions || {};
if(angular.isString(messageOrOptions)) {
messageOrOptions = {
message: messageOrOptions
};
} else {
angular.forEach(reservedStateProperties, function(x) {
if(messageOrOptions[x]) {
throw new Error('The property ' + x + ' is reserved for the block state.');
}
});
}
angular.extend(state, messageOrOptions);
if(state.blockCount > 0) {
state.message = messageOrOptions.message || state.message || blockUIConfig.message;
} else {
state.message = messageOrOptions.message || blockUIConfig.message;
}
// if(state.blockCount > 0) {
// messageOrOptions = messageOrOptions || state.message || blockUIConfig.message;
// } else {
// messageOrOptions = messageOrOptions || blockUIConfig.message;
// }
// state.message = messageOrOptions;
state.blockCount++;
// Check if the focused element is part of the block scope
var $ae = angular.element($document[0].activeElement);
if($ae.length && blockUIUtils.isElementInBlockScope($ae, self)) {
// Let the active element lose focus and store a reference
// to restore focus when we're done (reset)
self._restoreFocus = $ae[0];
// https://github.com/McNull/angular-block-ui/issues/13
// http://stackoverflow.com/questions/22698058/apply-already-in-progress-error-when-using-typeahead-plugin-found-to-be-relate
// Queue the blur after any ng-blur expression.
$timeout(function() {
// Ensure we still need to blur
// Don't restore if active element is body, since this causes IE to switch windows (see http://tjvantoll.com/2013/08/30/bugs-with-document-activeelement-in-internet-explorer/)
if (self._restoreFocus && self._restoreFocus !== $body[0]) {
self._restoreFocus.blur();
}
});
}
if (!startPromise && blockUIConfig.delay !== 0) {
startPromise = $timeout(block, blockUIConfig.delay);
} else if (blockUIConfig.delay === 0) {
block();
}
function block () {
startPromise = null;
state.blocking = true;
}
};
this._cancelStartTimeout = function() {
if (startPromise) {
$timeout.cancel(startPromise);
startPromise = null;
}
};
this.stop = function() {
state.blockCount = Math.max(0, --state.blockCount);
if (state.blockCount === 0) {
self.reset(true);
}
};
this.isBlocking = function () {
return state.blocking;
};
this.message = function(value) {
state.message = value;
};
this.pattern = function(regexp) {
if (regexp !== undefined) {
self._pattern = regexp;
}
return self._pattern;
};
this.reset = function(executeCallbacks) {
self._cancelStartTimeout();
state.blockCount = 0;
state.blocking = false;
// Restore the focus to the element that was active
// before the block start, but not if the user has
// focused something else while the block was active.
if(self._restoreFocus &&
(!$document[0].activeElement || $document[0].activeElement === $body[0])) {
//IE8 will throw if element for setting focus is invisible
try {
self._restoreFocus.focus();
} catch(e1) {
(function () {
var elementToFocus = self._restoreFocus;
$timeout(function() {
if(elementToFocus) {
try {
elementToFocus.focus();
} catch(e2) { }
}
},100);
})();
}
self._restoreFocus = null;
}
try {
if (executeCallbacks) {
angular.forEach(doneCallbacks, function(cb) {
cb();
});
}
} finally {
doneCallbacks.length = 0;
}
};
this.done = function(fn) {
doneCallbacks.push(fn);
};
this.state = function() {
return state;
};
this.addRef = function() {
self._refs += 1;
};
this.release = function() {
if(--self._refs <= 0) {
mainBlock.instances._destroy(self);
}
};
}
var instances = [];
instances.get = function(id) {
if(!isNaN(id)) {
throw new Error('BlockUI id cannot be a number');
}
var instance = instances[id];
if(!instance) {
// TODO: ensure no array instance trashing [xxx] -- current workaround: '_' + $scope.$id
instance = instances[id] = new BlockUI(id);
instances.push(instance);
}
return instance;
};
instances._destroy = function(idOrInstance) {
if (angular.isString(idOrInstance)) {
idOrInstance = instances[idOrInstance];
}
if (idOrInstance) {
idOrInstance.reset();
var i = blockUIUtils.indexOf(instances, idOrInstance);
instances.splice(i, 1);
delete instances[idOrInstance.state().id];
}
};
instances.locate = function(request) {
var result = [];
// Add function wrappers that will be executed on every item
// in the array.
blockUIUtils.forEachFnHook(result, 'start');
blockUIUtils.forEachFnHook(result, 'stop');
var i = instances.length;
while(i--) {
var instance = instances[i];
var pattern = instance._pattern;
if(pattern && pattern.test(request.url)) {
result.push(instance);
}
}
if(result.length === 0) {
result.push(mainBlock);
}
return result;
};
// Propagate the reset to all instances
blockUIUtils.forEachFnHook(instances, 'reset');
var mainBlock = instances.get('main');
mainBlock.addRef();
mainBlock.instances = instances;
return mainBlock;
}]);
blkUI.factory('blockUIUtils', function() {
var $ = angular.element;
var utils = {
buildRegExp: function(pattern) {
var match = pattern.match(/^\/(.*)\/([gim]*)$/), regExp;
if(match) {
regExp = new RegExp(match[1], match[2]);
} else {
throw Error('Incorrect regular expression format: ' + pattern);
}
return regExp;
},
forEachFn: function(arr, fnName, args) {
var i = arr.length;
while(i--) {
var t = arr[i];
t[fnName].apply(t, args);
}
},
forEachFnHook: function(arr, fnName) {
arr[fnName] = function() {
utils.forEachFn(this, fnName, arguments);
}
},
isElementInBlockScope: function($element, blockScope) {
var c = $element.inheritedData('block-ui');
while(c) {
if(c === blockScope) {
return true;
}
c = c._parent;
}
return false;
},
findElement: function ($element, predicateFn, traverse) {
var ret = null;
if (predicateFn($element)) {
ret = $element;
} else {
var $elements;
if (traverse) {
$elements = $element.parent();
} else {
$elements = $element.children();
}
var i = $elements.length;
while (!ret && i--) {
ret = utils.findElement($($elements[i]), predicateFn, traverse);
}
}
return ret;
},
indexOf: function(arr, obj, start) {
// if(Array.prototype.indexOf) {
// return arr.indexOf(obj, start);
// }
for (var i = (start || 0), j = arr.length; i < j; i++) {
if (arr[i] === obj) {
return i;
}
}
return -1;
}
};
return utils;
});
// Automatically generated.
// This file is already embedded in your main javascript output, there's no need to include this file
// manually in the index.html. This file is only here for your debugging pleasures.
angular.module('blockUI').run(['$templateCache', function($templateCache){
$templateCache.put('angular-block-ui/angular-block-ui.ng.html', '<div class=\"block-ui-overlay\"></div><div class=\"block-ui-message-container\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"block-ui-message\" ng-class=\"$_blockUiMessageClass\">{{ state.message }}</div></div>');
}]);
})(angular);
if (typeof module !== "undefined") module.exports = "blockUI";
//# sourceMappingURL=angular-block-ui.js.map
/* global angular */
(function(window, document) {
'use strict';
/*
* AngularJS Toaster
* Version: 2.2.0
*
* Copyright 2013-2016 Jiri Kavulak.
* All Rights Reserved.
* Use, reproduction, distribution, and modification of this code is subject to the terms and
* conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php
*
* Author: Jiri Kavulak
* Related to project of John Papa, Hans Fjällemark and Nguyễn Thiện Hùng (thienhung1989)
*/
angular.module('toaster', []).constant(
'toasterConfig', {
'limit': 0, // limits max number of toasts
'tap-to-dismiss': true,
'close-button': false,
'close-html': '<button class="toast-close-button" type="button">×</button>',
'newest-on-top': true,
'time-out': 5000,
'icon-classes': {
error: 'toast-error',
info: 'toast-info',
wait: 'toast-wait',
success: 'toast-success',
warning: 'toast-warning'
},
'body-output-type': '', // Options: '', 'trustedHtml', 'template', 'templateWithData', 'directive'
'body-template': 'toasterBodyTmpl.html',
'icon-class': 'toast-info',
'position-class': 'toast-top-right', // Options (see CSS):
// 'toast-top-full-width', 'toast-bottom-full-width', 'toast-center',
// 'toast-top-left', 'toast-top-center', 'toast-top-right',
// 'toast-bottom-left', 'toast-bottom-center', 'toast-bottom-right',
'title-class': 'toast-title',
'message-class': 'toast-message',
'prevent-duplicates': false,
'mouseover-timer-stop': true // stop timeout on mouseover and restart timer on mouseout
}
).run(['$templateCache', function($templateCache) {
$templateCache.put('angularjs-toaster/toast.html',
'<div id="toast-container" ng-class="[config.position, config.animation]">' +
'<div ng-repeat="toaster in toasters" class="toast" ng-class="toaster.type" ng-click="click($event, toaster)" ng-mouseover="stopTimer(toaster)" ng-mouseout="restartTimer(toaster)">' +
'<div ng-if="toaster.showCloseButton" ng-click="click($event, toaster, true)" ng-bind-html="toaster.closeHtml"></div>' +
'<div ng-class="config.title">{{toaster.title}}</div>' +
'<div ng-class="config.message" ng-switch on="toaster.bodyOutputType">' +
'<div ng-switch-when="trustedHtml" ng-bind-html="toaster.html"></div>' +
'<div ng-switch-when="template"><div ng-include="toaster.bodyTemplate"></div></div>' +
'<div ng-switch-when="templateWithData"><div ng-include="toaster.bodyTemplate"></div></div>' +
'<div ng-switch-when="directive"><div directive-template directive-name="{{toaster.html}}" directive-data="{{toaster.directiveData}}"></div></div>' +
'<div ng-switch-default >{{toaster.body}}</div>' +
'</div>' +
'</div>' +
'</div>');
}
]).service(
'toaster', [
'$rootScope', 'toasterConfig', function($rootScope, toasterConfig) {
// http://stackoverflow.com/questions/26501688/a-typescript-guid-class
var Guid = (function() {
var Guid = {};
Guid.newGuid = function() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
};
return Guid;
}());
this.pop = function(type, title, body, timeout, bodyOutputType, clickHandler, toasterId, showCloseButton, toastId, onHideCallback) {
if (angular.isObject(type)) {
var params = type; // Enable named parameters as pop argument
this.toast = {
type: params.type,
title: params.title,
body: params.body,
timeout: params.timeout,
bodyOutputType: params.bodyOutputType,
clickHandler: params.clickHandler,
showCloseButton: params.showCloseButton,
closeHtml: params.closeHtml,
toastId: params.toastId,
onShowCallback: params.onShowCallback,
onHideCallback: params.onHideCallback,
directiveData: params.directiveData,
tapToDismiss: params.tapToDismiss
};
toasterId = params.toasterId;
} else {
this.toast = {
type: type,
title: title,
body: body,
timeout: timeout,
bodyOutputType: bodyOutputType,
clickHandler: clickHandler,
showCloseButton: showCloseButton,
toastId: toastId,
onHideCallback: onHideCallback
};
}
if (!this.toast.toastId || !this.toast.toastId.length) {
this.toast.toastId = Guid.newGuid();
}
$rootScope.$emit('toaster-newToast', toasterId, this.toast.toastId);
return {
toasterId: toasterId,
toastId: this.toast.toastId
};
};
this.clear = function(toasterId, toastId) {
if (angular.isObject(toasterId)) {
$rootScope.$emit('toaster-clearToasts', toasterId.toasterId, toasterId.toastId);
} else {
$rootScope.$emit('toaster-clearToasts', toasterId, toastId);
}
};
// Create one method per icon class, to allow to call toaster.info() and similar
for (var type in toasterConfig['icon-classes']) {
this[type] = createTypeMethod(type);
}
function createTypeMethod(toasterType) {
return function(title, body, timeout, bodyOutputType, clickHandler, toasterId, showCloseButton, toastId, onHideCallback) {
if (angular.isString(title)) {
return this.pop(
toasterType,
title,
body,
timeout,
bodyOutputType,
clickHandler,
toasterId,
showCloseButton,
toastId,
onHideCallback);
} else { // 'title' is actually an object with options
return this.pop(angular.extend(title, { type: toasterType }));
}
};
}
}]
).factory(
'toasterEventRegistry', [
'$rootScope', function($rootScope) {
var deregisterNewToast = null, deregisterClearToasts = null, newToastEventSubscribers = [], clearToastsEventSubscribers = [], toasterFactory;
toasterFactory = {
setup: function() {
if (!deregisterNewToast) {
deregisterNewToast = $rootScope.$on(
'toaster-newToast', function(event, toasterId, toastId) {
for (var i = 0, len = newToastEventSubscribers.length; i < len; i++) {
newToastEventSubscribers[i](event, toasterId, toastId);
}
});
}
if (!deregisterClearToasts) {
deregisterClearToasts = $rootScope.$on(
'toaster-clearToasts', function(event, toasterId, toastId) {
for (var i = 0, len = clearToastsEventSubscribers.length; i < len; i++) {
clearToastsEventSubscribers[i](event, toasterId, toastId);
}
});
}
},
subscribeToNewToastEvent: function(onNewToast) {
newToastEventSubscribers.push(onNewToast);
},
subscribeToClearToastsEvent: function(onClearToasts) {
clearToastsEventSubscribers.push(onClearToasts);
},
unsubscribeToNewToastEvent: function(onNewToast) {
var index = newToastEventSubscribers.indexOf(onNewToast);
if (index >= 0) {
newToastEventSubscribers.splice(index, 1);
}
if (newToastEventSubscribers.length === 0) {
deregisterNewToast();
deregisterNewToast = null;
}
},
unsubscribeToClearToastsEvent: function(onClearToasts) {
var index = clearToastsEventSubscribers.indexOf(onClearToasts);
if (index >= 0) {
clearToastsEventSubscribers.splice(index, 1);
}
if (clearToastsEventSubscribers.length === 0) {
deregisterClearToasts();
deregisterClearToasts = null;
}
}
};
return {
setup: toasterFactory.setup,
subscribeToNewToastEvent: toasterFactory.subscribeToNewToastEvent,
subscribeToClearToastsEvent: toasterFactory.subscribeToClearToastsEvent,
unsubscribeToNewToastEvent: toasterFactory.unsubscribeToNewToastEvent,
unsubscribeToClearToastsEvent: toasterFactory.unsubscribeToClearToastsEvent
};
}]
)
.directive('directiveTemplate', ['$compile', '$injector', function($compile, $injector) {
return {
restrict: 'A',
scope: {
directiveName: '@directiveName',
directiveData: '@directiveData'
},
replace: true,
link: function(scope, elm, attrs) {
scope.$watch('directiveName', function(directiveName) {
if (angular.isUndefined(directiveName) || directiveName.length <= 0)
throw new Error('A valid directive name must be provided via the toast body argument when using bodyOutputType: directive');
var directive;
try {
directive = $injector.get(attrs.$normalize(directiveName) + 'Directive');
} catch (e) {
throw new Error(directiveName + ' could not be found. ' +
'The name should appear as it exists in the markup, not camelCased as it would appear in the directive declaration,' +
' e.g. directive-name not directiveName.');
}
var directiveDetails = directive[0];
if (directiveDetails.scope !== true && directiveDetails.scope) {
throw new Error('Cannot use a directive with an isolated scope. ' +
'The scope must be either true or falsy (e.g. false/null/undefined). ' +
'Occurred for directive ' + directiveName + '.');
}
if (directiveDetails.restrict.indexOf('A') < 0) {
throw new Error('Directives must be usable as attributes. ' +
'Add "A" to the restrict option (or remove the option entirely). Occurred for directive ' +
directiveName + '.');
}
if (scope.directiveData)
scope.directiveData = angular.fromJson(scope.directiveData);
var template = $compile('<div ' + directiveName + '></div>')(scope);
elm.append(template);
});
}
};
}])
.directive(
'toasterContainer', [
'$parse', '$rootScope', '$interval', '$sce', 'toasterConfig', 'toaster', 'toasterEventRegistry',
function($parse, $rootScope, $interval, $sce, toasterConfig, toaster, toasterEventRegistry) {
return {
replace: true,
restrict: 'EA',
scope: true, // creates an internal scope for this directive (one per directive instance)
link: function(scope, elm, attrs) {
var mergedConfig;
// Merges configuration set in directive with default one
mergedConfig = angular.extend({}, toasterConfig, scope.$eval(attrs.toasterOptions));
scope.config = {
toasterId: mergedConfig['toaster-id'],
position: mergedConfig['position-class'],
title: mergedConfig['title-class'],
message: mergedConfig['message-class'],
tap: mergedConfig['tap-to-dismiss'],
closeButton: mergedConfig['close-button'],
closeHtml: mergedConfig['close-html'],
animation: mergedConfig['animation-class'],
mouseoverTimer: mergedConfig['mouseover-timer-stop']
};
scope.$on(
"$destroy", function() {
toasterEventRegistry.unsubscribeToNewToastEvent(scope._onNewToast);
toasterEventRegistry.unsubscribeToClearToastsEvent(scope._onClearToasts);
}
);
function setTimeout(toast, time) {
toast.timeoutPromise = $interval(
function() {
scope.removeToast(toast.toastId);
}, time, 1
);
}
scope.configureTimer = function(toast) {
var timeout = angular.isNumber(toast.timeout) ? toast.timeout : mergedConfig['time-out'];
if (typeof timeout === "object") timeout = timeout[toast.type];
if (timeout > 0) {
setTimeout(toast, timeout);
}
};
function addToast(toast, toastId) {
toast.type = mergedConfig['icon-classes'][toast.type];
if (!toast.type) {
toast.type = mergedConfig['icon-class'];
}
if (mergedConfig['prevent-duplicates'] === true && scope.toasters.length) {
if (scope.toasters[scope.toasters.length - 1].body === toast.body) {
return;
} else {
var i, len, dupFound = false;
for (i = 0, len = scope.toasters.length; i < len; i++) {
if (scope.toasters[i].toastId === toastId) {
dupFound = true;
break;
}
}
if (dupFound) return;
}
}
// set the showCloseButton property on the toast so that
// each template can bind directly to the property to show/hide
// the close button
var closeButton = mergedConfig['close-button'];
// if toast.showCloseButton is a boolean value,
// it was specifically overriden in the pop arguments
if (typeof toast.showCloseButton === "boolean") {
} else if (typeof closeButton === "boolean") {
toast.showCloseButton = closeButton;
} else if (typeof closeButton === "object") {
var closeButtonForType = closeButton[toast.type];
if (typeof closeButtonForType !== "undefined" && closeButtonForType !== null) {
toast.showCloseButton = closeButtonForType;
}
} else {
// if an option was not set, default to false.
toast.showCloseButton = false;
}
if (toast.showCloseButton) {
toast.closeHtml = $sce.trustAsHtml(toast.closeHtml || scope.config.closeHtml);
}
// Set the toast.bodyOutputType to the default if it isn't set
toast.bodyOutputType = toast.bodyOutputType || mergedConfig['body-output-type'];
switch (toast.bodyOutputType) {
case 'trustedHtml':
toast.html = $sce.trustAsHtml(toast.body);
break;
case 'template':
toast.bodyTemplate = toast.body || mergedConfig['body-template'];
break;
case 'templateWithData':
var fcGet = $parse(toast.body || mergedConfig['body-template']);
var templateWithData = fcGet(scope);
toast.bodyTemplate = templateWithData.template;
toast.data = templateWithData.data;
break;
case 'directive':
toast.html = toast.body;
break;
}
scope.configureTimer(toast);
if (mergedConfig['newest-on-top'] === true) {
scope.toasters.unshift(toast);
if (mergedConfig['limit'] > 0 && scope.toasters.length > mergedConfig['limit']) {
scope.toasters.pop();
}
} else {
scope.toasters.push(toast);
if (mergedConfig['limit'] > 0 && scope.toasters.length > mergedConfig['limit']) {
scope.toasters.shift();
}
}
if (angular.isFunction(toast.onShowCallback)) {
toast.onShowCallback(toast);
}
}
scope.removeToast = function(toastId) {
var i, len;
for (i = 0, len = scope.toasters.length; i < len; i++) {
if (scope.toasters[i].toastId === toastId) {
removeToast(i);
break;
}
}
};
function removeToast(toastIndex) {
var toast = scope.toasters[toastIndex];
// toast is always defined since the index always has a match
if (toast.timeoutPromise) {
$interval.cancel(toast.timeoutPromise);
}
scope.toasters.splice(toastIndex, 1);
if (angular.isFunction(toast.onHideCallback)) {
toast.onHideCallback(toast);
}
}
function removeAllToasts(toastId) {
for (var i = scope.toasters.length - 1; i >= 0; i--) {
if (isUndefinedOrNull(toastId)) {
removeToast(i);
} else {
if (scope.toasters[i].toastId == toastId) {
removeToast(i);
}
}
}
}
scope.toasters = [];
function isUndefinedOrNull(val) {
return angular.isUndefined(val) || val === null;
}
scope._onNewToast = function(event, toasterId, toastId) {
// Compatibility: if toaster has no toasterId defined, and if call to display
// hasn't either, then the request is for us
if ((isUndefinedOrNull(scope.config.toasterId) && isUndefinedOrNull(toasterId)) || (!isUndefinedOrNull(scope.config.toasterId) && !isUndefinedOrNull(toasterId) && scope.config.toasterId == toasterId)) {
addToast(toaster.toast, toastId);
}
};
scope._onClearToasts = function(event, toasterId, toastId) {
// Compatibility: if toaster has no toasterId defined, and if call to display
// hasn't either, then the request is for us
if (toasterId == '*' || (isUndefinedOrNull(scope.config.toasterId) && isUndefinedOrNull(toasterId)) || (!isUndefinedOrNull(scope.config.toasterId) && !isUndefinedOrNull(toasterId) && scope.config.toasterId == toasterId)) {
removeAllToasts(toastId);
}
};
toasterEventRegistry.setup();
toasterEventRegistry.subscribeToNewToastEvent(scope._onNewToast);
toasterEventRegistry.subscribeToClearToastsEvent(scope._onClearToasts);
},
controller: [
'$scope', '$element', '$attrs', function($scope, $element, $attrs) {
// Called on mouseover
$scope.stopTimer = function(toast) {
if ($scope.config.mouseoverTimer === true) {
if (toast.timeoutPromise) {
$interval.cancel(toast.timeoutPromise);
toast.timeoutPromise = null;
}
}
};
// Called on mouseout
$scope.restartTimer = function(toast) {
if ($scope.config.mouseoverTimer === true) {
if (!toast.timeoutPromise) {
$scope.configureTimer(toast);
}
} else if (toast.timeoutPromise === null) {
$scope.removeToast(toast.toastId);
}
};
$scope.click = function(event, toast, isCloseButton) {
event.stopPropagation();
var tapToDismiss = typeof toast.tapToDismiss === "boolean"
? toast.tapToDismiss
: $scope.config.tap;
if (tapToDismiss === true || (toast.showCloseButton === true && isCloseButton === true)) {
var removeToast = true;
if (toast.clickHandler) {
if (angular.isFunction(toast.clickHandler)) {
removeToast = toast.clickHandler(toast, isCloseButton);
} else if (angular.isFunction($scope.$parent.$eval(toast.clickHandler))) {
removeToast = $scope.$parent.$eval(toast.clickHandler)(toast, isCloseButton);
} else {
console.log("TOAST-NOTE: Your click handler is not inside a parent scope of toaster-container.");
}
}
if (removeToast) {
$scope.removeToast(toast.toastId);
}
}
};
}],
templateUrl: 'angularjs-toaster/toast.html'
};
}]
);
})(window, document);
// THIS FILE IS GENERATED - DO NOT EDIT!
/*!mobile-detect v1.4.2 2018-06-10*/
/*global module:false, define:false*/
/*jshint latedef:false*/
/*!@license Copyright 2013, Heinrich Goebl, License: MIT, see https://github.com/hgoebl/mobile-detect.js*/
(function (define, undefined) {
define(function () {
'use strict';
var impl = {};
impl.mobileDetectRules = {
"phones": {
"iPhone": "\\biPhone\\b|\\biPod\\b",
"BlackBerry": "BlackBerry|\\bBB10\\b|rim[0-9]+",
"HTC": "HTC|HTC.*(Sensation|Evo|Vision|Explorer|6800|8100|8900|A7272|S510e|C110e|Legend|Desire|T8282)|APX515CKT|Qtek9090|APA9292KT|HD_mini|Sensation.*Z710e|PG86100|Z715e|Desire.*(A8181|HD)|ADR6200|ADR6400L|ADR6425|001HT|Inspire 4G|Android.*\\bEVO\\b|T-Mobile G1|Z520m|Android [0-9.]+; Pixel",
"Nexus": "Nexus One|Nexus S|Galaxy.*Nexus|Android.*Nexus.*Mobile|Nexus 4|Nexus 5|Nexus 6",
"Dell": "Dell[;]? (Streak|Aero|Venue|Venue Pro|Flash|Smoke|Mini 3iX)|XCD28|XCD35|\\b001DL\\b|\\b101DL\\b|\\bGS01\\b",
"Motorola": "Motorola|DROIDX|DROID BIONIC|\\bDroid\\b.*Build|Android.*Xoom|HRI39|MOT-|A1260|A1680|A555|A853|A855|A953|A955|A956|Motorola.*ELECTRIFY|Motorola.*i1|i867|i940|MB200|MB300|MB501|MB502|MB508|MB511|MB520|MB525|MB526|MB611|MB612|MB632|MB810|MB855|MB860|MB861|MB865|MB870|ME501|ME502|ME511|ME525|ME600|ME632|ME722|ME811|ME860|ME863|ME865|MT620|MT710|MT716|MT720|MT810|MT870|MT917|Motorola.*TITANIUM|WX435|WX445|XT300|XT301|XT311|XT316|XT317|XT319|XT320|XT390|XT502|XT530|XT531|XT532|XT535|XT603|XT610|XT611|XT615|XT681|XT701|XT702|XT711|XT720|XT800|XT806|XT860|XT862|XT875|XT882|XT883|XT894|XT901|XT907|XT909|XT910|XT912|XT928|XT926|XT915|XT919|XT925|XT1021|\\bMoto E\\b|XT1068|XT1092|XT1052",
"Samsung": "\\bSamsung\\b|SM-G950F|SM-G955F|SM-G9250|GT-19300|SGH-I337|BGT-S5230|GT-B2100|GT-B2700|GT-B2710|GT-B3210|GT-B3310|GT-B3410|GT-B3730|GT-B3740|GT-B5510|GT-B5512|GT-B5722|GT-B6520|GT-B7300|GT-B7320|GT-B7330|GT-B7350|GT-B7510|GT-B7722|GT-B7800|GT-C3010|GT-C3011|GT-C3060|GT-C3200|GT-C3212|GT-C3212I|GT-C3262|GT-C3222|GT-C3300|GT-C3300K|GT-C3303|GT-C3303K|GT-C3310|GT-C3322|GT-C3330|GT-C3350|GT-C3500|GT-C3510|GT-C3530|GT-C3630|GT-C3780|GT-C5010|GT-C5212|GT-C6620|GT-C6625|GT-C6712|GT-E1050|GT-E1070|GT-E1075|GT-E1080|GT-E1081|GT-E1085|GT-E1087|GT-E1100|GT-E1107|GT-E1110|GT-E1120|GT-E1125|GT-E1130|GT-E1160|GT-E1170|GT-E1175|GT-E1180|GT-E1182|GT-E1200|GT-E1210|GT-E1225|GT-E1230|GT-E1390|GT-E2100|GT-E2120|GT-E2121|GT-E2152|GT-E2220|GT-E2222|GT-E2230|GT-E2232|GT-E2250|GT-E2370|GT-E2550|GT-E2652|GT-E3210|GT-E3213|GT-I5500|GT-I5503|GT-I5700|GT-I5800|GT-I5801|GT-I6410|GT-I6420|GT-I7110|GT-I7410|GT-I7500|GT-I8000|GT-I8150|GT-I8160|GT-I8190|GT-I8320|GT-I8330|GT-I8350|GT-I8530|GT-I8700|GT-I8703|GT-I8910|GT-I9000|GT-I9001|GT-I9003|GT-I9010|GT-I9020|GT-I9023|GT-I9070|GT-I9082|GT-I9100|GT-I9103|GT-I9220|GT-I9250|GT-I9300|GT-I9305|GT-I9500|GT-I9505|GT-M3510|GT-M5650|GT-M7500|GT-M7600|GT-M7603|GT-M8800|GT-M8910|GT-N7000|GT-S3110|GT-S3310|GT-S3350|GT-S3353|GT-S3370|GT-S3650|GT-S3653|GT-S3770|GT-S3850|GT-S5210|GT-S5220|GT-S5229|GT-S5230|GT-S5233|GT-S5250|GT-S5253|GT-S5260|GT-S5263|GT-S5270|GT-S5300|GT-S5330|GT-S5350|GT-S5360|GT-S5363|GT-S5369|GT-S5380|GT-S5380D|GT-S5560|GT-S5570|GT-S5600|GT-S5603|GT-S5610|GT-S5620|GT-S5660|GT-S5670|GT-S5690|GT-S5750|GT-S5780|GT-S5830|GT-S5839|GT-S6102|GT-S6500|GT-S7070|GT-S7200|GT-S7220|GT-S7230|GT-S7233|GT-S7250|GT-S7500|GT-S7530|GT-S7550|GT-S7562|GT-S7710|GT-S8000|GT-S8003|GT-S8500|GT-S8530|GT-S8600|SCH-A310|SCH-A530|SCH-A570|SCH-A610|SCH-A630|SCH-A650|SCH-A790|SCH-A795|SCH-A850|SCH-A870|SCH-A890|SCH-A930|SCH-A950|SCH-A970|SCH-A990|SCH-I100|SCH-I110|SCH-I400|SCH-I405|SCH-I500|SCH-I510|SCH-I515|SCH-I600|SCH-I730|SCH-I760|SCH-I770|SCH-I830|SCH-I910|SCH-I920|SCH-I959|SCH-LC11|SCH-N150|SCH-N300|SCH-R100|SCH-R300|SCH-R351|SCH-R400|SCH-R410|SCH-T300|SCH-U310|SCH-U320|SCH-U350|SCH-U360|SCH-U365|SCH-U370|SCH-U380|SCH-U410|SCH-U430|SCH-U450|SCH-U460|SCH-U470|SCH-U490|SCH-U540|SCH-U550|SCH-U620|SCH-U640|SCH-U650|SCH-U660|SCH-U700|SCH-U740|SCH-U750|SCH-U810|SCH-U820|SCH-U900|SCH-U940|SCH-U960|SCS-26UC|SGH-A107|SGH-A117|SGH-A127|SGH-A137|SGH-A157|SGH-A167|SGH-A177|SGH-A187|SGH-A197|SGH-A227|SGH-A237|SGH-A257|SGH-A437|SGH-A517|SGH-A597|SGH-A637|SGH-A657|SGH-A667|SGH-A687|SGH-A697|SGH-A707|SGH-A717|SGH-A727|SGH-A737|SGH-A747|SGH-A767|SGH-A777|SGH-A797|SGH-A817|SGH-A827|SGH-A837|SGH-A847|SGH-A867|SGH-A877|SGH-A887|SGH-A897|SGH-A927|SGH-B100|SGH-B130|SGH-B200|SGH-B220|SGH-C100|SGH-C110|SGH-C120|SGH-C130|SGH-C140|SGH-C160|SGH-C170|SGH-C180|SGH-C200|SGH-C207|SGH-C210|SGH-C225|SGH-C230|SGH-C417|SGH-C450|SGH-D307|SGH-D347|SGH-D357|SGH-D407|SGH-D415|SGH-D780|SGH-D807|SGH-D980|SGH-E105|SGH-E200|SGH-E315|SGH-E316|SGH-E317|SGH-E335|SGH-E590|SGH-E635|SGH-E715|SGH-E890|SGH-F300|SGH-F480|SGH-I200|SGH-I300|SGH-I320|SGH-I550|SGH-I577|SGH-I600|SGH-I607|SGH-I617|SGH-I627|SGH-I637|SGH-I677|SGH-I700|SGH-I717|SGH-I727|SGH-i747M|SGH-I777|SGH-I780|SGH-I827|SGH-I847|SGH-I857|SGH-I896|SGH-I897|SGH-I900|SGH-I907|SGH-I917|SGH-I927|SGH-I937|SGH-I997|SGH-J150|SGH-J200|SGH-L170|SGH-L700|SGH-M110|SGH-M150|SGH-M200|SGH-N105|SGH-N500|SGH-N600|SGH-N620|SGH-N625|SGH-N700|SGH-N710|SGH-P107|SGH-P207|SGH-P300|SGH-P310|SGH-P520|SGH-P735|SGH-P777|SGH-Q105|SGH-R210|SGH-R220|SGH-R225|SGH-S105|SGH-S307|SGH-T109|SGH-T119|SGH-T139|SGH-T209|SGH-T219|SGH-T229|SGH-T239|SGH-T249|SGH-T259|SGH-T309|SGH-T319|SGH-T329|SGH-T339|SGH-T349|SGH-T359|SGH-T369|SGH-T379|SGH-T409|SGH-T429|SGH-T439|SGH-T459|SGH-T469|SGH-T479|SGH-T499|SGH-T509|SGH-T519|SGH-T539|SGH-T559|SGH-T589|SGH-T609|SGH-T619|SGH-T629|SGH-T639|SGH-T659|SGH-T669|SGH-T679|SGH-T709|SGH-T719|SGH-T729|SGH-T739|SGH-T746|SGH-T749|SGH-T759|SGH-T769|SGH-T809|SGH-T819|SGH-T839|SGH-T919|SGH-T929|SGH-T939|SGH-T959|SGH-T989|SGH-U100|SGH-U200|SGH-U800|SGH-V205|SGH-V206|SGH-X100|SGH-X105|SGH-X120|SGH-X140|SGH-X426|SGH-X427|SGH-X475|SGH-X495|SGH-X497|SGH-X507|SGH-X600|SGH-X610|SGH-X620|SGH-X630|SGH-X700|SGH-X820|SGH-X890|SGH-Z130|SGH-Z150|SGH-Z170|SGH-ZX10|SGH-ZX20|SHW-M110|SPH-A120|SPH-A400|SPH-A420|SPH-A460|SPH-A500|SPH-A560|SPH-A600|SPH-A620|SPH-A660|SPH-A700|SPH-A740|SPH-A760|SPH-A790|SPH-A800|SPH-A820|SPH-A840|SPH-A880|SPH-A900|SPH-A940|SPH-A960|SPH-D600|SPH-D700|SPH-D710|SPH-D720|SPH-I300|SPH-I325|SPH-I330|SPH-I350|SPH-I500|SPH-I600|SPH-I700|SPH-L700|SPH-M100|SPH-M220|SPH-M240|SPH-M300|SPH-M305|SPH-M320|SPH-M330|SPH-M350|SPH-M360|SPH-M370|SPH-M380|SPH-M510|SPH-M540|SPH-M550|SPH-M560|SPH-M570|SPH-M580|SPH-M610|SPH-M620|SPH-M630|SPH-M800|SPH-M810|SPH-M850|SPH-M900|SPH-M910|SPH-M920|SPH-M930|SPH-N100|SPH-N200|SPH-N240|SPH-N300|SPH-N400|SPH-Z400|SWC-E100|SCH-i909|GT-N7100|GT-N7105|SCH-I535|SM-N900A|SGH-I317|SGH-T999L|GT-S5360B|GT-I8262|GT-S6802|GT-S6312|GT-S6310|GT-S5312|GT-S5310|GT-I9105|GT-I8510|GT-S6790N|SM-G7105|SM-N9005|GT-S5301|GT-I9295|GT-I9195|SM-C101|GT-S7392|GT-S7560|GT-B7610|GT-I5510|GT-S7582|GT-S7530E|GT-I8750|SM-G9006V|SM-G9008V|SM-G9009D|SM-G900A|SM-G900D|SM-G900F|SM-G900H|SM-G900I|SM-G900J|SM-G900K|SM-G900L|SM-G900M|SM-G900P|SM-G900R4|SM-G900S|SM-G900T|SM-G900V|SM-G900W8|SHV-E160K|SCH-P709|SCH-P729|SM-T2558|GT-I9205|SM-G9350|SM-J120F|SM-G920F|SM-G920V|SM-G930F|SM-N910C|SM-A310F|GT-I9190|SM-J500FN|SM-G903F|SM-J330F",
"LG": "\\bLG\\b;|LG[- ]?(C800|C900|E400|E610|E900|E-900|F160|F180K|F180L|F180S|730|855|L160|LS740|LS840|LS970|LU6200|MS690|MS695|MS770|MS840|MS870|MS910|P500|P700|P705|VM696|AS680|AS695|AX840|C729|E970|GS505|272|C395|E739BK|E960|L55C|L75C|LS696|LS860|P769BK|P350|P500|P509|P870|UN272|US730|VS840|VS950|LN272|LN510|LS670|LS855|LW690|MN270|MN510|P509|P769|P930|UN200|UN270|UN510|UN610|US670|US740|US760|UX265|UX840|VN271|VN530|VS660|VS700|VS740|VS750|VS910|VS920|VS930|VX9200|VX11000|AX840A|LW770|P506|P925|P999|E612|D955|D802|MS323|M257)",
"Sony": "SonyST|SonyLT|SonyEricsson|SonyEricssonLT15iv|LT18i|E10i|LT28h|LT26w|SonyEricssonMT27i|C5303|C6902|C6903|C6906|C6943|D2533",
"Asus": "Asus.*Galaxy|PadFone.*Mobile",
"NokiaLumia": "Lumia [0-9]{3,4}",
"Micromax": "Micromax.*\\b(A210|A92|A88|A72|A111|A110Q|A115|A116|A110|A90S|A26|A51|A35|A54|A25|A27|A89|A68|A65|A57|A90)\\b",
"Palm": "PalmSource|Palm",
"Vertu": "Vertu|Vertu.*Ltd|Vertu.*Ascent|Vertu.*Ayxta|Vertu.*Constellation(F|Quest)?|Vertu.*Monika|Vertu.*Signature",
"Pantech": "PANTECH|IM-A850S|IM-A840S|IM-A830L|IM-A830K|IM-A830S|IM-A820L|IM-A810K|IM-A810S|IM-A800S|IM-T100K|IM-A725L|IM-A780L|IM-A775C|IM-A770K|IM-A760S|IM-A750K|IM-A740S|IM-A730S|IM-A720L|IM-A710K|IM-A690L|IM-A690S|IM-A650S|IM-A630K|IM-A600S|VEGA PTL21|PT003|P8010|ADR910L|P6030|P6020|P9070|P4100|P9060|P5000|CDM8992|TXT8045|ADR8995|IS11PT|P2030|P6010|P8000|PT002|IS06|CDM8999|P9050|PT001|TXT8040|P2020|P9020|P2000|P7040|P7000|C790",
"Fly": "IQ230|IQ444|IQ450|IQ440|IQ442|IQ441|IQ245|IQ256|IQ236|IQ255|IQ235|IQ245|IQ275|IQ240|IQ285|IQ280|IQ270|IQ260|IQ250",
"Wiko": "KITE 4G|HIGHWAY|GETAWAY|STAIRWAY|DARKSIDE|DARKFULL|DARKNIGHT|DARKMOON|SLIDE|WAX 4G|RAINBOW|BLOOM|SUNSET|GOA(?!nna)|LENNY|BARRY|IGGY|OZZY|CINK FIVE|CINK PEAX|CINK PEAX 2|CINK SLIM|CINK SLIM 2|CINK +|CINK KING|CINK PEAX|CINK SLIM|SUBLIM",
"iMobile": "i-mobile (IQ|i-STYLE|idea|ZAA|Hitz)",
"SimValley": "\\b(SP-80|XT-930|SX-340|XT-930|SX-310|SP-360|SP60|SPT-800|SP-120|SPT-800|SP-140|SPX-5|SPX-8|SP-100|SPX-8|SPX-12)\\b",
"Wolfgang": "AT-B24D|AT-AS50HD|AT-AS40W|AT-AS55HD|AT-AS45q2|AT-B26D|AT-AS50Q",
"Alcatel": "Alcatel",
"Nintendo": "Nintendo (3DS|Switch)",
"Amoi": "Amoi",
"INQ": "INQ",
"GenericPhone": "Tapatalk|PDA;|SAGEM|\\bmmp\\b|pocket|\\bpsp\\b|symbian|Smartphone|smartfon|treo|up.browser|up.link|vodafone|\\bwap\\b|nokia|Series40|Series60|S60|SonyEricsson|N900|MAUI.*WAP.*Browser"
},
"tablets": {
"iPad": "iPad|iPad.*Mobile",
"NexusTablet": "Android.*Nexus[\\s]+(7|9|10)",
"GoogleTablet": "Android.*Pixel C",
"SamsungTablet": "SAMSUNG.*Tablet|Galaxy.*Tab|SC-01C|GT-P1000|GT-P1003|GT-P1010|GT-P3105|GT-P6210|GT-P6800|GT-P6810|GT-P7100|GT-P7300|GT-P7310|GT-P7500|GT-P7510|SCH-I800|SCH-I815|SCH-I905|SGH-I957|SGH-I987|SGH-T849|SGH-T859|SGH-T869|SPH-P100|GT-P3100|GT-P3108|GT-P3110|GT-P5100|GT-P5110|GT-P6200|GT-P7320|GT-P7511|GT-N8000|GT-P8510|SGH-I497|SPH-P500|SGH-T779|SCH-I705|SCH-I915|GT-N8013|GT-P3113|GT-P5113|GT-P8110|GT-N8010|GT-N8005|GT-N8020|GT-P1013|GT-P6201|GT-P7501|GT-N5100|GT-N5105|GT-N5110|SHV-E140K|SHV-E140L|SHV-E140S|SHV-E150S|SHV-E230K|SHV-E230L|SHV-E230S|SHW-M180K|SHW-M180L|SHW-M180S|SHW-M180W|SHW-M300W|SHW-M305W|SHW-M380K|SHW-M380S|SHW-M380W|SHW-M430W|SHW-M480K|SHW-M480S|SHW-M480W|SHW-M485W|SHW-M486W|SHW-M500W|GT-I9228|SCH-P739|SCH-I925|GT-I9200|GT-P5200|GT-P5210|GT-P5210X|SM-T311|SM-T310|SM-T310X|SM-T210|SM-T210R|SM-T211|SM-P600|SM-P601|SM-P605|SM-P900|SM-P901|SM-T217|SM-T217A|SM-T217S|SM-P6000|SM-T3100|SGH-I467|XE500|SM-T110|GT-P5220|GT-I9200X|GT-N5110X|GT-N5120|SM-P905|SM-T111|SM-T2105|SM-T315|SM-T320|SM-T320X|SM-T321|SM-T520|SM-T525|SM-T530NU|SM-T230NU|SM-T330NU|SM-T900|XE500T1C|SM-P605V|SM-P905V|SM-T337V|SM-T537V|SM-T707V|SM-T807V|SM-P600X|SM-P900X|SM-T210X|SM-T230|SM-T230X|SM-T325|GT-P7503|SM-T531|SM-T330|SM-T530|SM-T705|SM-T705C|SM-T535|SM-T331|SM-T800|SM-T700|SM-T537|SM-T807|SM-P907A|SM-T337A|SM-T537A|SM-T707A|SM-T807A|SM-T237|SM-T807P|SM-P607T|SM-T217T|SM-T337T|SM-T807T|SM-T116NQ|SM-T116BU|SM-P550|SM-T350|SM-T550|SM-T9000|SM-P9000|SM-T705Y|SM-T805|GT-P3113|SM-T710|SM-T810|SM-T815|SM-T360|SM-T533|SM-T113|SM-T335|SM-T715|SM-T560|SM-T670|SM-T677|SM-T377|SM-T567|SM-T357T|SM-T555|SM-T561|SM-T713|SM-T719|SM-T813|SM-T819|SM-T580|SM-T355Y?|SM-T280|SM-T817A|SM-T820|SM-W700|SM-P580|SM-T587|SM-P350|SM-P555M|SM-P355M|SM-T113NU|SM-T815Y|SM-T585|SM-T285|SM-T825|SM-W708",
"Kindle": "Kindle|Silk.*Accelerated|Android.*\\b(KFOT|KFTT|KFJWI|KFJWA|KFOTE|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|WFJWAE|KFSAWA|KFSAWI|KFASWI|KFARWI|KFFOWI|KFGIWI|KFMEWI)\\b|Android.*Silk\/[0-9.]+ like Chrome\/[0-9.]+ (?!Mobile)",
"SurfaceTablet": "Windows NT [0-9.]+; ARM;.*(Tablet|ARMBJS)",
"HPTablet": "HP Slate (7|8|10)|HP ElitePad 900|hp-tablet|EliteBook.*Touch|HP 8|Slate 21|HP SlateBook 10",
"AsusTablet": "^.*PadFone((?!Mobile).)*$|Transformer|TF101|TF101G|TF300T|TF300TG|TF300TL|TF700T|TF700KL|TF701T|TF810C|ME171|ME301T|ME302C|ME371MG|ME370T|ME372MG|ME172V|ME173X|ME400C|Slider SL101|\\bK00F\\b|\\bK00C\\b|\\bK00E\\b|\\bK00L\\b|TX201LA|ME176C|ME102A|\\bM80TA\\b|ME372CL|ME560CG|ME372CG|ME302KL| K010 | K011 | K017 | K01E |ME572C|ME103K|ME170C|ME171C|\\bME70C\\b|ME581C|ME581CL|ME8510C|ME181C|P01Y|PO1MA|P01Z|\\bP027\\b|\\bP024\\b|\\bP00C\\b",
"BlackBerryTablet": "PlayBook|RIM Tablet",
"HTCtablet": "HTC_Flyer_P512|HTC Flyer|HTC Jetstream|HTC-P715a|HTC EVO View 4G|PG41200|PG09410",
"MotorolaTablet": "xoom|sholest|MZ615|MZ605|MZ505|MZ601|MZ602|MZ603|MZ604|MZ606|MZ607|MZ608|MZ609|MZ615|MZ616|MZ617",
"NookTablet": "Android.*Nook|NookColor|nook browser|BNRV200|BNRV200A|BNTV250|BNTV250A|BNTV400|BNTV600|LogicPD Zoom2",
"AcerTablet": "Android.*; \\b(A100|A101|A110|A200|A210|A211|A500|A501|A510|A511|A700|A701|W500|W500P|W501|W501P|W510|W511|W700|G100|G100W|B1-A71|B1-710|B1-711|A1-810|A1-811|A1-830)\\b|W3-810|\\bA3-A10\\b|\\bA3-A11\\b|\\bA3-A20\\b|\\bA3-A30",
"ToshibaTablet": "Android.*(AT100|AT105|AT200|AT205|AT270|AT275|AT300|AT305|AT1S5|AT500|AT570|AT700|AT830)|TOSHIBA.*FOLIO",
"LGTablet": "\\bL-06C|LG-V909|LG-V900|LG-V700|LG-V510|LG-V500|LG-V410|LG-V400|LG-VK810\\b",
"FujitsuTablet": "Android.*\\b(F-01D|F-02F|F-05E|F-10D|M532|Q572)\\b",
"PrestigioTablet": "PMP3170B|PMP3270B|PMP3470B|PMP7170B|PMP3370B|PMP3570C|PMP5870C|PMP3670B|PMP5570C|PMP5770D|PMP3970B|PMP3870C|PMP5580C|PMP5880D|PMP5780D|PMP5588C|PMP7280C|PMP7280C3G|PMP7280|PMP7880D|PMP5597D|PMP5597|PMP7100D|PER3464|PER3274|PER3574|PER3884|PER5274|PER5474|PMP5097CPRO|PMP5097|PMP7380D|PMP5297C|PMP5297C_QUAD|PMP812E|PMP812E3G|PMP812F|PMP810E|PMP880TD|PMT3017|PMT3037|PMT3047|PMT3057|PMT7008|PMT5887|PMT5001|PMT5002",
"LenovoTablet": "Lenovo TAB|Idea(Tab|Pad)( A1|A10| K1|)|ThinkPad([ ]+)?Tablet|YT3-850M|YT3-X90L|YT3-X90F|YT3-X90X|Lenovo.*(S2109|S2110|S5000|S6000|K3011|A3000|A3500|A1000|A2107|A2109|A1107|A5500|A7600|B6000|B8000|B8080)(-|)(FL|F|HV|H|)|TB-X103F|TB-X304F|TB-X304L|TB-8703F|Tab2A7-10F",
"DellTablet": "Venue 11|Venue 8|Venue 7|Dell Streak 10|Dell Streak 7",
"YarvikTablet": "Android.*\\b(TAB210|TAB211|TAB224|TAB250|TAB260|TAB264|TAB310|TAB360|TAB364|TAB410|TAB411|TAB420|TAB424|TAB450|TAB460|TAB461|TAB464|TAB465|TAB467|TAB468|TAB07-100|TAB07-101|TAB07-150|TAB07-151|TAB07-152|TAB07-200|TAB07-201-3G|TAB07-210|TAB07-211|TAB07-212|TAB07-214|TAB07-220|TAB07-400|TAB07-485|TAB08-150|TAB08-200|TAB08-201-3G|TAB08-201-30|TAB09-100|TAB09-211|TAB09-410|TAB10-150|TAB10-201|TAB10-211|TAB10-400|TAB10-410|TAB13-201|TAB274EUK|TAB275EUK|TAB374EUK|TAB462EUK|TAB474EUK|TAB9-200)\\b",
"MedionTablet": "Android.*\\bOYO\\b|LIFE.*(P9212|P9514|P9516|S9512)|LIFETAB",
"ArnovaTablet": "97G4|AN10G2|AN7bG3|AN7fG3|AN8G3|AN8cG3|AN7G3|AN9G3|AN7dG3|AN7dG3ST|AN7dG3ChildPad|AN10bG3|AN10bG3DT|AN9G2",
"IntensoTablet": "INM8002KP|INM1010FP|INM805ND|Intenso Tab|TAB1004",
"IRUTablet": "M702pro",
"MegafonTablet": "MegaFon V9|\\bZTE V9\\b|Android.*\\bMT7A\\b",
"EbodaTablet": "E-Boda (Supreme|Impresspeed|Izzycomm|Essential)",
"AllViewTablet": "Allview.*(Viva|Alldro|City|Speed|All TV|Frenzy|Quasar|Shine|TX1|AX1|AX2)",
"ArchosTablet": "\\b(101G9|80G9|A101IT)\\b|Qilive 97R|Archos5|\\bARCHOS (70|79|80|90|97|101|FAMILYPAD|)(b|c|)(G10| Cobalt| TITANIUM(HD|)| Xenon| Neon|XSK| 2| XS 2| PLATINUM| CARBON|GAMEPAD)\\b",
"AinolTablet": "NOVO7|NOVO8|NOVO10|Novo7Aurora|Novo7Basic|NOVO7PALADIN|novo9-Spark",
"NokiaLumiaTablet": "Lumia 2520",
"SonyTablet": "Sony.*Tablet|Xperia Tablet|Sony Tablet S|SO-03E|SGPT12|SGPT13|SGPT114|SGPT121|SGPT122|SGPT123|SGPT111|SGPT112|SGPT113|SGPT131|SGPT132|SGPT133|SGPT211|SGPT212|SGPT213|SGP311|SGP312|SGP321|EBRD1101|EBRD1102|EBRD1201|SGP351|SGP341|SGP511|SGP512|SGP521|SGP541|SGP551|SGP621|SGP612|SOT31",
"PhilipsTablet": "\\b(PI2010|PI3000|PI3100|PI3105|PI3110|PI3205|PI3210|PI3900|PI4010|PI7000|PI7100)\\b",
"CubeTablet": "Android.*(K8GT|U9GT|U10GT|U16GT|U17GT|U18GT|U19GT|U20GT|U23GT|U30GT)|CUBE U8GT",
"CobyTablet": "MID1042|MID1045|MID1125|MID1126|MID7012|MID7014|MID7015|MID7034|MID7035|MID7036|MID7042|MID7048|MID7127|MID8042|MID8048|MID8127|MID9042|MID9740|MID9742|MID7022|MID7010",
"MIDTablet": "M9701|M9000|M9100|M806|M1052|M806|T703|MID701|MID713|MID710|MID727|MID760|MID830|MID728|MID933|MID125|MID810|MID732|MID120|MID930|MID800|MID731|MID900|MID100|MID820|MID735|MID980|MID130|MID833|MID737|MID960|MID135|MID860|MID736|MID140|MID930|MID835|MID733|MID4X10",
"MSITablet": "MSI \\b(Primo 73K|Primo 73L|Primo 81L|Primo 77|Primo 93|Primo 75|Primo 76|Primo 73|Primo 81|Primo 91|Primo 90|Enjoy 71|Enjoy 7|Enjoy 10)\\b",
"SMiTTablet": "Android.*(\\bMID\\b|MID-560|MTV-T1200|MTV-PND531|MTV-P1101|MTV-PND530)",
"RockChipTablet": "Android.*(RK2818|RK2808A|RK2918|RK3066)|RK2738|RK2808A",
"FlyTablet": "IQ310|Fly Vision",
"bqTablet": "Android.*(bq)?.*(Elcano|Curie|Edison|Maxwell|Kepler|Pascal|Tesla|Hypatia|Platon|Newton|Livingstone|Cervantes|Avant|Aquaris ([E|M]10|M8))|Maxwell.*Lite|Maxwell.*Plus",
"HuaweiTablet": "MediaPad|MediaPad 7 Youth|IDEOS S7|S7-201c|S7-202u|S7-101|S7-103|S7-104|S7-105|S7-106|S7-201|S7-Slim|M2-A01L|BAH-L09|BAH-W09",
"NecTablet": "\\bN-06D|\\bN-08D",
"PantechTablet": "Pantech.*P4100",
"BronchoTablet": "Broncho.*(N701|N708|N802|a710)",
"VersusTablet": "TOUCHPAD.*[78910]|\\bTOUCHTAB\\b",
"ZyncTablet": "z1000|Z99 2G|z99|z930|z999|z990|z909|Z919|z900",
"PositivoTablet": "TB07STA|TB10STA|TB07FTA|TB10FTA",
"NabiTablet": "Android.*\\bNabi",
"KoboTablet": "Kobo Touch|\\bK080\\b|\\bVox\\b Build|\\bArc\\b Build",
"DanewTablet": "DSlide.*\\b(700|701R|702|703R|704|802|970|971|972|973|974|1010|1012)\\b",
"TexetTablet": "NaviPad|TB-772A|TM-7045|TM-7055|TM-9750|TM-7016|TM-7024|TM-7026|TM-7041|TM-7043|TM-7047|TM-8041|TM-9741|TM-9747|TM-9748|TM-9751|TM-7022|TM-7021|TM-7020|TM-7011|TM-7010|TM-7023|TM-7025|TM-7037W|TM-7038W|TM-7027W|TM-9720|TM-9725|TM-9737W|TM-1020|TM-9738W|TM-9740|TM-9743W|TB-807A|TB-771A|TB-727A|TB-725A|TB-719A|TB-823A|TB-805A|TB-723A|TB-715A|TB-707A|TB-705A|TB-709A|TB-711A|TB-890HD|TB-880HD|TB-790HD|TB-780HD|TB-770HD|TB-721HD|TB-710HD|TB-434HD|TB-860HD|TB-840HD|TB-760HD|TB-750HD|TB-740HD|TB-730HD|TB-722HD|TB-720HD|TB-700HD|TB-500HD|TB-470HD|TB-431HD|TB-430HD|TB-506|TB-504|TB-446|TB-436|TB-416|TB-146SE|TB-126SE",
"PlaystationTablet": "Playstation.*(Portable|Vita)",
"TrekstorTablet": "ST10416-1|VT10416-1|ST70408-1|ST702xx-1|ST702xx-2|ST80208|ST97216|ST70104-2|VT10416-2|ST10216-2A|SurfTab",
"PyleAudioTablet": "\\b(PTBL10CEU|PTBL10C|PTBL72BC|PTBL72BCEU|PTBL7CEU|PTBL7C|PTBL92BC|PTBL92BCEU|PTBL9CEU|PTBL9CUK|PTBL9C)\\b",
"AdvanTablet": "Android.* \\b(E3A|T3X|T5C|T5B|T3E|T3C|T3B|T1J|T1F|T2A|T1H|T1i|E1C|T1-E|T5-A|T4|E1-B|T2Ci|T1-B|T1-D|O1-A|E1-A|T1-A|T3A|T4i)\\b ",
"DanyTechTablet": "Genius Tab G3|Genius Tab S2|Genius Tab Q3|Genius Tab G4|Genius Tab Q4|Genius Tab G-II|Genius TAB GII|Genius TAB GIII|Genius Tab S1",
"GalapadTablet": "Android.*\\bG1\\b",
"MicromaxTablet": "Funbook|Micromax.*\\b(P250|P560|P360|P362|P600|P300|P350|P500|P275)\\b",
"KarbonnTablet": "Android.*\\b(A39|A37|A34|ST8|ST10|ST7|Smart Tab3|Smart Tab2)\\b",
"AllFineTablet": "Fine7 Genius|Fine7 Shine|Fine7 Air|Fine8 Style|Fine9 More|Fine10 Joy|Fine11 Wide",
"PROSCANTablet": "\\b(PEM63|PLT1023G|PLT1041|PLT1044|PLT1044G|PLT1091|PLT4311|PLT4311PL|PLT4315|PLT7030|PLT7033|PLT7033D|PLT7035|PLT7035D|PLT7044K|PLT7045K|PLT7045KB|PLT7071KG|PLT7072|PLT7223G|PLT7225G|PLT7777G|PLT7810K|PLT7849G|PLT7851G|PLT7852G|PLT8015|PLT8031|PLT8034|PLT8036|PLT8080K|PLT8082|PLT8088|PLT8223G|PLT8234G|PLT8235G|PLT8816K|PLT9011|PLT9045K|PLT9233G|PLT9735|PLT9760G|PLT9770G)\\b",
"YONESTablet": "BQ1078|BC1003|BC1077|RK9702|BC9730|BC9001|IT9001|BC7008|BC7010|BC708|BC728|BC7012|BC7030|BC7027|BC7026",
"ChangJiaTablet": "TPC7102|TPC7103|TPC7105|TPC7106|TPC7107|TPC7201|TPC7203|TPC7205|TPC7210|TPC7708|TPC7709|TPC7712|TPC7110|TPC8101|TPC8103|TPC8105|TPC8106|TPC8203|TPC8205|TPC8503|TPC9106|TPC9701|TPC97101|TPC97103|TPC97105|TPC97106|TPC97111|TPC97113|TPC97203|TPC97603|TPC97809|TPC97205|TPC10101|TPC10103|TPC10106|TPC10111|TPC10203|TPC10205|TPC10503",
"GUTablet": "TX-A1301|TX-M9002|Q702|kf026",
"PointOfViewTablet": "TAB-P506|TAB-navi-7-3G-M|TAB-P517|TAB-P-527|TAB-P701|TAB-P703|TAB-P721|TAB-P731N|TAB-P741|TAB-P825|TAB-P905|TAB-P925|TAB-PR945|TAB-PL1015|TAB-P1025|TAB-PI1045|TAB-P1325|TAB-PROTAB[0-9]+|TAB-PROTAB25|TAB-PROTAB26|TAB-PROTAB27|TAB-PROTAB26XL|TAB-PROTAB2-IPS9|TAB-PROTAB30-IPS9|TAB-PROTAB25XXL|TAB-PROTAB26-IPS10|TAB-PROTAB30-IPS10",
"OvermaxTablet": "OV-(SteelCore|NewBase|Basecore|Baseone|Exellen|Quattor|EduTab|Solution|ACTION|BasicTab|TeddyTab|MagicTab|Stream|TB-08|TB-09)|Qualcore 1027",
"HCLTablet": "HCL.*Tablet|Connect-3G-2.0|Connect-2G-2.0|ME Tablet U1|ME Tablet U2|ME Tablet G1|ME Tablet X1|ME Tablet Y2|ME Tablet Sync",
"DPSTablet": "DPS Dream 9|DPS Dual 7",
"VistureTablet": "V97 HD|i75 3G|Visture V4( HD)?|Visture V5( HD)?|Visture V10",
"CrestaTablet": "CTP(-)?810|CTP(-)?818|CTP(-)?828|CTP(-)?838|CTP(-)?888|CTP(-)?978|CTP(-)?980|CTP(-)?987|CTP(-)?988|CTP(-)?989",
"MediatekTablet": "\\bMT8125|MT8389|MT8135|MT8377\\b",
"ConcordeTablet": "Concorde([ ]+)?Tab|ConCorde ReadMan",
"GoCleverTablet": "GOCLEVER TAB|A7GOCLEVER|M1042|M7841|M742|R1042BK|R1041|TAB A975|TAB A7842|TAB A741|TAB A741L|TAB M723G|TAB M721|TAB A1021|TAB I921|TAB R721|TAB I720|TAB T76|TAB R70|TAB R76.2|TAB R106|TAB R83.2|TAB M813G|TAB I721|GCTA722|TAB I70|TAB I71|TAB S73|TAB R73|TAB R74|TAB R93|TAB R75|TAB R76.1|TAB A73|TAB A93|TAB A93.2|TAB T72|TAB R83|TAB R974|TAB R973|TAB A101|TAB A103|TAB A104|TAB A104.2|R105BK|M713G|A972BK|TAB A971|TAB R974.2|TAB R104|TAB R83.3|TAB A1042",
"ModecomTablet": "FreeTAB 9000|FreeTAB 7.4|FreeTAB 7004|FreeTAB 7800|FreeTAB 2096|FreeTAB 7.5|FreeTAB 1014|FreeTAB 1001 |FreeTAB 8001|FreeTAB 9706|FreeTAB 9702|FreeTAB 7003|FreeTAB 7002|FreeTAB 1002|FreeTAB 7801|FreeTAB 1331|FreeTAB 1004|FreeTAB 8002|FreeTAB 8014|FreeTAB 9704|FreeTAB 1003",
"VoninoTablet": "\\b(Argus[ _]?S|Diamond[ _]?79HD|Emerald[ _]?78E|Luna[ _]?70C|Onyx[ _]?S|Onyx[ _]?Z|Orin[ _]?HD|Orin[ _]?S|Otis[ _]?S|SpeedStar[ _]?S|Magnet[ _]?M9|Primus[ _]?94[ _]?3G|Primus[ _]?94HD|Primus[ _]?QS|Android.*\\bQ8\\b|Sirius[ _]?EVO[ _]?QS|Sirius[ _]?QS|Spirit[ _]?S)\\b",
"ECSTablet": "V07OT2|TM105A|S10OT1|TR10CS1",
"StorexTablet": "eZee[_']?(Tab|Go)[0-9]+|TabLC7|Looney Tunes Tab",
"VodafoneTablet": "SmartTab([ ]+)?[0-9]+|SmartTabII10|SmartTabII7|VF-1497",
"EssentielBTablet": "Smart[ ']?TAB[ ]+?[0-9]+|Family[ ']?TAB2",
"RossMoorTablet": "RM-790|RM-997|RMD-878G|RMD-974R|RMT-705A|RMT-701|RME-601|RMT-501|RMT-711",
"iMobileTablet": "i-mobile i-note",
"TolinoTablet": "tolino tab [0-9.]+|tolino shine",
"AudioSonicTablet": "\\bC-22Q|T7-QC|T-17B|T-17P\\b",
"AMPETablet": "Android.* A78 ",
"SkkTablet": "Android.* (SKYPAD|PHOENIX|CYCLOPS)",
"TecnoTablet": "TECNO P9|TECNO DP8D",
"JXDTablet": "Android.* \\b(F3000|A3300|JXD5000|JXD3000|JXD2000|JXD300B|JXD300|S5800|S7800|S602b|S5110b|S7300|S5300|S602|S603|S5100|S5110|S601|S7100a|P3000F|P3000s|P101|P200s|P1000m|P200m|P9100|P1000s|S6600b|S908|P1000|P300|S18|S6600|S9100)\\b",
"iJoyTablet": "Tablet (Spirit 7|Essentia|Galatea|Fusion|Onix 7|Landa|Titan|Scooby|Deox|Stella|Themis|Argon|Unique 7|Sygnus|Hexen|Finity 7|Cream|Cream X2|Jade|Neon 7|Neron 7|Kandy|Scape|Saphyr 7|Rebel|Biox|Rebel|Rebel 8GB|Myst|Draco 7|Myst|Tab7-004|Myst|Tadeo Jones|Tablet Boing|Arrow|Draco Dual Cam|Aurix|Mint|Amity|Revolution|Finity 9|Neon 9|T9w|Amity 4GB Dual Cam|Stone 4GB|Stone 8GB|Andromeda|Silken|X2|Andromeda II|Halley|Flame|Saphyr 9,7|Touch 8|Planet|Triton|Unique 10|Hexen 10|Memphis 4GB|Memphis 8GB|Onix 10)",
"FX2Tablet": "FX2 PAD7|FX2 PAD10",
"XoroTablet": "KidsPAD 701|PAD[ ]?712|PAD[ ]?714|PAD[ ]?716|PAD[ ]?717|PAD[ ]?718|PAD[ ]?720|PAD[ ]?721|PAD[ ]?722|PAD[ ]?790|PAD[ ]?792|PAD[ ]?900|PAD[ ]?9715D|PAD[ ]?9716DR|PAD[ ]?9718DR|PAD[ ]?9719QR|PAD[ ]?9720QR|TelePAD1030|Telepad1032|TelePAD730|TelePAD731|TelePAD732|TelePAD735Q|TelePAD830|TelePAD9730|TelePAD795|MegaPAD 1331|MegaPAD 1851|MegaPAD 2151",
"ViewsonicTablet": "ViewPad 10pi|ViewPad 10e|ViewPad 10s|ViewPad E72|ViewPad7|ViewPad E100|ViewPad 7e|ViewSonic VB733|VB100a",
"VerizonTablet": "QTAQZ3|QTAIR7|QTAQTZ3|QTASUN1|QTASUN2|QTAXIA1",
"OdysTablet": "LOOX|XENO10|ODYS[ -](Space|EVO|Xpress|NOON)|\\bXELIO\\b|Xelio10Pro|XELIO7PHONETAB|XELIO10EXTREME|XELIOPT2|NEO_QUAD10",
"CaptivaTablet": "CAPTIVA PAD",
"IconbitTablet": "NetTAB|NT-3702|NT-3702S|NT-3702S|NT-3603P|NT-3603P|NT-0704S|NT-0704S|NT-3805C|NT-3805C|NT-0806C|NT-0806C|NT-0909T|NT-0909T|NT-0907S|NT-0907S|NT-0902S|NT-0902S",
"TeclastTablet": "T98 4G|\\bP80\\b|\\bX90HD\\b|X98 Air|X98 Air 3G|\\bX89\\b|P80 3G|\\bX80h\\b|P98 Air|\\bX89HD\\b|P98 3G|\\bP90HD\\b|P89 3G|X98 3G|\\bP70h\\b|P79HD 3G|G18d 3G|\\bP79HD\\b|\\bP89s\\b|\\bA88\\b|\\bP10HD\\b|\\bP19HD\\b|G18 3G|\\bP78HD\\b|\\bA78\\b|\\bP75\\b|G17s 3G|G17h 3G|\\bP85t\\b|\\bP90\\b|\\bP11\\b|\\bP98t\\b|\\bP98HD\\b|\\bG18d\\b|\\bP85s\\b|\\bP11HD\\b|\\bP88s\\b|\\bA80HD\\b|\\bA80se\\b|\\bA10h\\b|\\bP89\\b|\\bP78s\\b|\\bG18\\b|\\bP85\\b|\\bA70h\\b|\\bA70\\b|\\bG17\\b|\\bP18\\b|\\bA80s\\b|\\bA11s\\b|\\bP88HD\\b|\\bA80h\\b|\\bP76s\\b|\\bP76h\\b|\\bP98\\b|\\bA10HD\\b|\\bP78\\b|\\bP88\\b|\\bA11\\b|\\bA10t\\b|\\bP76a\\b|\\bP76t\\b|\\bP76e\\b|\\bP85HD\\b|\\bP85a\\b|\\bP86\\b|\\bP75HD\\b|\\bP76v\\b|\\bA12\\b|\\bP75a\\b|\\bA15\\b|\\bP76Ti\\b|\\bP81HD\\b|\\bA10\\b|\\bT760VE\\b|\\bT720HD\\b|\\bP76\\b|\\bP73\\b|\\bP71\\b|\\bP72\\b|\\bT720SE\\b|\\bC520Ti\\b|\\bT760\\b|\\bT720VE\\b|T720-3GE|T720-WiFi",
"OndaTablet": "\\b(V975i|Vi30|VX530|V701|Vi60|V701s|Vi50|V801s|V719|Vx610w|VX610W|V819i|Vi10|VX580W|Vi10|V711s|V813|V811|V820w|V820|Vi20|V711|VI30W|V712|V891w|V972|V819w|V820w|Vi60|V820w|V711|V813s|V801|V819|V975s|V801|V819|V819|V818|V811|V712|V975m|V101w|V961w|V812|V818|V971|V971s|V919|V989|V116w|V102w|V973|Vi40)\\b[\\s]+",
"JaytechTablet": "TPC-PA762",
"BlaupunktTablet": "Endeavour 800NG|Endeavour 1010",
"DigmaTablet": "\\b(iDx10|iDx9|iDx8|iDx7|iDxD7|iDxD8|iDsQ8|iDsQ7|iDsQ8|iDsD10|iDnD7|3TS804H|iDsQ11|iDj7|iDs10)\\b",
"EvolioTablet": "ARIA_Mini_wifi|Aria[ _]Mini|Evolio X10|Evolio X7|Evolio X8|\\bEvotab\\b|\\bNeura\\b",
"LavaTablet": "QPAD E704|\\bIvoryS\\b|E-TAB IVORY|\\bE-TAB\\b",
"AocTablet": "MW0811|MW0812|MW0922|MTK8382|MW1031|MW0831|MW0821|MW0931|MW0712",
"MpmanTablet": "MP11 OCTA|MP10 OCTA|MPQC1114|MPQC1004|MPQC994|MPQC974|MPQC973|MPQC804|MPQC784|MPQC780|\\bMPG7\\b|MPDCG75|MPDCG71|MPDC1006|MP101DC|MPDC9000|MPDC905|MPDC706HD|MPDC706|MPDC705|MPDC110|MPDC100|MPDC99|MPDC97|MPDC88|MPDC8|MPDC77|MP709|MID701|MID711|MID170|MPDC703|MPQC1010",
"CelkonTablet": "CT695|CT888|CT[\\s]?910|CT7 Tab|CT9 Tab|CT3 Tab|CT2 Tab|CT1 Tab|C820|C720|\\bCT-1\\b",
"WolderTablet": "miTab \\b(DIAMOND|SPACE|BROOKLYN|NEO|FLY|MANHATTAN|FUNK|EVOLUTION|SKY|GOCAR|IRON|GENIUS|POP|MINT|EPSILON|BROADWAY|JUMP|HOP|LEGEND|NEW AGE|LINE|ADVANCE|FEEL|FOLLOW|LIKE|LINK|LIVE|THINK|FREEDOM|CHICAGO|CLEVELAND|BALTIMORE-GH|IOWA|BOSTON|SEATTLE|PHOENIX|DALLAS|IN 101|MasterChef)\\b",
"MediacomTablet": "M-MPI10C3G|M-SP10EG|M-SP10EGP|M-SP10HXAH|M-SP7HXAH|M-SP10HXBH|M-SP8HXAH|M-SP8MXA",
"MiTablet": "\\bMI PAD\\b|\\bHM NOTE 1W\\b",
"NibiruTablet": "Nibiru M1|Nibiru Jupiter One",
"NexoTablet": "NEXO NOVA|NEXO 10|NEXO AVIO|NEXO FREE|NEXO GO|NEXO EVO|NEXO 3G|NEXO SMART|NEXO KIDDO|NEXO MOBI",
"LeaderTablet": "TBLT10Q|TBLT10I|TBL-10WDKB|TBL-10WDKBO2013|TBL-W230V2|TBL-W450|TBL-W500|SV572|TBLT7I|TBA-AC7-8G|TBLT79|TBL-8W16|TBL-10W32|TBL-10WKB|TBL-W100",
"UbislateTablet": "UbiSlate[\\s]?7C",
"PocketBookTablet": "Pocketbook",
"KocasoTablet": "\\b(TB-1207)\\b",
"HisenseTablet": "\\b(F5281|E2371)\\b",
"Hudl": "Hudl HT7S3|Hudl 2",
"TelstraTablet": "T-Hub2",
"GenericTablet": "Android.*\\b97D\\b|Tablet(?!.*PC)|BNTV250A|MID-WCDMA|LogicPD Zoom2|\\bA7EB\\b|CatNova8|A1_07|CT704|CT1002|\\bM721\\b|rk30sdk|\\bEVOTAB\\b|M758A|ET904|ALUMIUM10|Smartfren Tab|Endeavour 1010|Tablet-PC-4|Tagi Tab|\\bM6pro\\b|CT1020W|arc 10HD|\\bTP750\\b|\\bQTAQZ3\\b|WVT101|TM1088|KT107"
},
"oss": {
"AndroidOS": "Android",
"BlackBerryOS": "blackberry|\\bBB10\\b|rim tablet os",
"PalmOS": "PalmOS|avantgo|blazer|elaine|hiptop|palm|plucker|xiino",
"SymbianOS": "Symbian|SymbOS|Series60|Series40|SYB-[0-9]+|\\bS60\\b",
"WindowsMobileOS": "Windows CE.*(PPC|Smartphone|Mobile|[0-9]{3}x[0-9]{3})|Window Mobile|Windows Phone [0-9.]+|WCE;",
"WindowsPhoneOS": "Windows Phone 10.0|Windows Phone 8.1|Windows Phone 8.0|Windows Phone OS|XBLWP7|ZuneWP7|Windows NT 6.[23]; ARM;",
"iOS": "\\biPhone.*Mobile|\\biPod|\\biPad|AppleCoreMedia",
"MeeGoOS": "MeeGo",
"MaemoOS": "Maemo",
"JavaOS": "J2ME\/|\\bMIDP\\b|\\bCLDC\\b",
"webOS": "webOS|hpwOS",
"badaOS": "\\bBada\\b",
"BREWOS": "BREW"
},
"uas": {
"Chrome": "\\bCrMo\\b|CriOS|Android.*Chrome\/[.0-9]* (Mobile)?",
"Dolfin": "\\bDolfin\\b",
"Opera": "Opera.*Mini|Opera.*Mobi|Android.*Opera|Mobile.*OPR\/[0-9.]+|Coast\/[0-9.]+",
"Skyfire": "Skyfire",
"Edge": "Mobile Safari\/[.0-9]* Edge",
"IE": "IEMobile|MSIEMobile",
"Firefox": "fennec|firefox.*maemo|(Mobile|Tablet).*Firefox|Firefox.*Mobile|FxiOS",
"Bolt": "bolt",
"TeaShark": "teashark",
"Blazer": "Blazer",
"Safari": "Version.*Mobile.*Safari|Safari.*Mobile|MobileSafari",
"UCBrowser": "UC.*Browser|UCWEB",
"baiduboxapp": "baiduboxapp",
"baidubrowser": "baidubrowser",
"DiigoBrowser": "DiigoBrowser",
"Puffin": "Puffin",
"Mercury": "\\bMercury\\b",
"ObigoBrowser": "Obigo",
"NetFront": "NF-Browser",
"GenericBrowser": "NokiaBrowser|OviBrowser|OneBrowser|TwonkyBeamBrowser|SEMC.*Browser|FlyFlow|Minimo|NetFront|Novarra-Vision|MQQBrowser|MicroMessenger",
"PaleMoon": "Android.*PaleMoon|Mobile.*PaleMoon"
},
"props": {
"Mobile": "Mobile\/[VER]",
"Build": "Build\/[VER]",
"Version": "Version\/[VER]",
"VendorID": "VendorID\/[VER]",
"iPad": "iPad.*CPU[a-z ]+[VER]",
"iPhone": "iPhone.*CPU[a-z ]+[VER]",
"iPod": "iPod.*CPU[a-z ]+[VER]",
"Kindle": "Kindle\/[VER]",
"Chrome": [
"Chrome\/[VER]",
"CriOS\/[VER]",
"CrMo\/[VER]"
],
"Coast": [
"Coast\/[VER]"
],
"Dolfin": "Dolfin\/[VER]",
"Firefox": [
"Firefox\/[VER]",
"FxiOS\/[VER]"
],
"Fennec": "Fennec\/[VER]",
"Edge": "Edge\/[VER]",
"IE": [
"IEMobile\/[VER];",
"IEMobile [VER]",
"MSIE [VER];",
"Trident\/[0-9.]+;.*rv:[VER]"
],
"NetFront": "NetFront\/[VER]",
"NokiaBrowser": "NokiaBrowser\/[VER]",
"Opera": [
" OPR\/[VER]",
"Opera Mini\/[VER]",
"Version\/[VER]"
],
"Opera Mini": "Opera Mini\/[VER]",
"Opera Mobi": "Version\/[VER]",
"UCBrowser": [
"UCWEB[VER]",
"UC.*Browser\/[VER]"
],
"MQQBrowser": "MQQBrowser\/[VER]",
"MicroMessenger": "MicroMessenger\/[VER]",
"baiduboxapp": "baiduboxapp\/[VER]",
"baidubrowser": "baidubrowser\/[VER]",
"SamsungBrowser": "SamsungBrowser\/[VER]",
"Iron": "Iron\/[VER]",
"Safari": [
"Version\/[VER]",
"Safari\/[VER]"
],
"Skyfire": "Skyfire\/[VER]",
"Tizen": "Tizen\/[VER]",
"Webkit": "webkit[ \/][VER]",
"PaleMoon": "PaleMoon\/[VER]",
"Gecko": "Gecko\/[VER]",
"Trident": "Trident\/[VER]",
"Presto": "Presto\/[VER]",
"Goanna": "Goanna\/[VER]",
"iOS": " \\bi?OS\\b [VER][ ;]{1}",
"Android": "Android [VER]",
"BlackBerry": [
"BlackBerry[\\w]+\/[VER]",
"BlackBerry.*Version\/[VER]",
"Version\/[VER]"
],
"BREW": "BREW [VER]",
"Java": "Java\/[VER]",
"Windows Phone OS": [
"Windows Phone OS [VER]",
"Windows Phone [VER]"
],
"Windows Phone": "Windows Phone [VER]",
"Windows CE": "Windows CE\/[VER]",
"Windows NT": "Windows NT [VER]",
"Symbian": [
"SymbianOS\/[VER]",
"Symbian\/[VER]"
],
"webOS": [
"webOS\/[VER]",
"hpwOS\/[VER];"
]
},
"utils": {
"Bot": "Googlebot|facebookexternalhit|AdsBot-Google|Google Keyword Suggestion|Facebot|YandexBot|YandexMobileBot|bingbot|ia_archiver|AhrefsBot|Ezooms|GSLFbot|WBSearchBot|Twitterbot|TweetmemeBot|Twikle|PaperLiBot|Wotbox|UnwindFetchor|Exabot|MJ12bot|YandexImages|TurnitinBot|Pingdom",
"MobileBot": "Googlebot-Mobile|AdsBot-Google-Mobile|YahooSeeker\/M1A1-R2D2",
"DesktopMode": "WPDesktop",
"TV": "SonyDTV|HbbTV",
"WebKit": "(webkit)[ \/]([\\w.]+)",
"Console": "\\b(Nintendo|Nintendo WiiU|Nintendo 3DS|Nintendo Switch|PLAYSTATION|Xbox)\\b",
"Watch": "SM-V700"
}
};
// following patterns come from http://detectmobilebrowsers.com/
impl.detectMobileBrowsers = {
fullPattern: /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i,
shortPattern: /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i,
tabletPattern: /android|ipad|playbook|silk/i
};
var hasOwnProp = Object.prototype.hasOwnProperty,
isArray;
impl.FALLBACK_PHONE = 'UnknownPhone';
impl.FALLBACK_TABLET = 'UnknownTablet';
impl.FALLBACK_MOBILE = 'UnknownMobile';
isArray = ('isArray' in Array) ?
Array.isArray : function (value) { return Object.prototype.toString.call(value) === '[object Array]'; };
function equalIC(a, b) {
return a != null && b != null && a.toLowerCase() === b.toLowerCase();
}
function containsIC(array, value) {
var valueLC, i, len = array.length;
if (!len || !value) {
return false;
}
valueLC = value.toLowerCase();
for (i = 0; i < len; ++i) {
if (valueLC === array[i].toLowerCase()) {
return true;
}
}
return false;
}
function convertPropsToRegExp(object) {
for (var key in object) {
if (hasOwnProp.call(object, key)) {
object[key] = new RegExp(object[key], 'i');
}
}
}
function prepareUserAgent(userAgent) {
return (userAgent || '').substr(0, 500); // mitigate vulnerable to ReDoS
}
(function init() {
var key, values, value, i, len, verPos, mobileDetectRules = impl.mobileDetectRules;
for (key in mobileDetectRules.props) {
if (hasOwnProp.call(mobileDetectRules.props, key)) {
values = mobileDetectRules.props[key];
if (!isArray(values)) {
values = [values];
}
len = values.length;
for (i = 0; i < len; ++i) {
value = values[i];
verPos = value.indexOf('[VER]');
if (verPos >= 0) {
value = value.substring(0, verPos) + '([\\w._\\+]+)' + value.substring(verPos + 5);
}
values[i] = new RegExp(value, 'i');
}
mobileDetectRules.props[key] = values;
}
}
convertPropsToRegExp(mobileDetectRules.oss);
convertPropsToRegExp(mobileDetectRules.phones);
convertPropsToRegExp(mobileDetectRules.tablets);
convertPropsToRegExp(mobileDetectRules.uas);
convertPropsToRegExp(mobileDetectRules.utils);
// copy some patterns to oss0 which are tested first (see issue#15)
mobileDetectRules.oss0 = {
WindowsPhoneOS: mobileDetectRules.oss.WindowsPhoneOS,
WindowsMobileOS: mobileDetectRules.oss.WindowsMobileOS
};
}());
/**
* Test userAgent string against a set of rules and find the first matched key.
* @param {Object} rules (key is String, value is RegExp)
* @param {String} userAgent the navigator.userAgent (or HTTP-Header 'User-Agent').
* @returns {String|null} the matched key if found, otherwise <tt>null</tt>
* @private
*/
impl.findMatch = function(rules, userAgent) {
for (var key in rules) {
if (hasOwnProp.call(rules, key)) {
if (rules[key].test(userAgent)) {
return key;
}
}
}
return null;
};
/**
* Test userAgent string against a set of rules and return an array of matched keys.
* @param {Object} rules (key is String, value is RegExp)
* @param {String} userAgent the navigator.userAgent (or HTTP-Header 'User-Agent').
* @returns {Array} an array of matched keys, may be empty when there is no match, but not <tt>null</tt>
* @private
*/
impl.findMatches = function(rules, userAgent) {
var result = [];
for (var key in rules) {
if (hasOwnProp.call(rules, key)) {
if (rules[key].test(userAgent)) {
result.push(key);
}
}
}
return result;
};
/**
* Check the version of the given property in the User-Agent.
*
* @param {String} propertyName
* @param {String} userAgent
* @return {String} version or <tt>null</tt> if version not found
* @private
*/
impl.getVersionStr = function (propertyName, userAgent) {
var props = impl.mobileDetectRules.props, patterns, i, len, match;
if (hasOwnProp.call(props, propertyName)) {
patterns = props[propertyName];
len = patterns.length;
for (i = 0; i < len; ++i) {
match = patterns[i].exec(userAgent);
if (match !== null) {
return match[1];
}
}
}
return null;
};
/**
* Check the version of the given property in the User-Agent.
* Will return a float number. (eg. 2_0 will return 2.0, 4.3.1 will return 4.31)
*
* @param {String} propertyName
* @param {String} userAgent
* @return {Number} version or <tt>NaN</tt> if version not found
* @private
*/
impl.getVersion = function (propertyName, userAgent) {
var version = impl.getVersionStr(propertyName, userAgent);
return version ? impl.prepareVersionNo(version) : NaN;
};
/**
* Prepare the version number.
*
* @param {String} version
* @return {Number} the version number as a floating number
* @private
*/
impl.prepareVersionNo = function (version) {
var numbers;
numbers = version.split(/[a-z._ \/\-]/i);
if (numbers.length === 1) {
version = numbers[0];
}
if (numbers.length > 1) {
version = numbers[0] + '.';
numbers.shift();
version += numbers.join('');
}
return Number(version);
};
impl.isMobileFallback = function (userAgent) {
return impl.detectMobileBrowsers.fullPattern.test(userAgent) ||
impl.detectMobileBrowsers.shortPattern.test(userAgent.substr(0,4));
};
impl.isTabletFallback = function (userAgent) {
return impl.detectMobileBrowsers.tabletPattern.test(userAgent);
};
impl.prepareDetectionCache = function (cache, userAgent, maxPhoneWidth) {
if (cache.mobile !== undefined) {
return;
}
var phone, tablet, phoneSized;
// first check for stronger tablet rules, then phone (see issue#5)
tablet = impl.findMatch(impl.mobileDetectRules.tablets, userAgent);
if (tablet) {
cache.mobile = cache.tablet = tablet;
cache.phone = null;
return; // unambiguously identified as tablet
}
phone = impl.findMatch(impl.mobileDetectRules.phones, userAgent);
if (phone) {
cache.mobile = cache.phone = phone;
cache.tablet = null;
return; // unambiguously identified as phone
}
// our rules haven't found a match -> try more general fallback rules
if (impl.isMobileFallback(userAgent)) {
phoneSized = MobileDetect.isPhoneSized(maxPhoneWidth);
if (phoneSized === undefined) {
cache.mobile = impl.FALLBACK_MOBILE;
cache.tablet = cache.phone = null;
} else if (phoneSized) {
cache.mobile = cache.phone = impl.FALLBACK_PHONE;
cache.tablet = null;
} else {
cache.mobile = cache.tablet = impl.FALLBACK_TABLET;
cache.phone = null;
}
} else if (impl.isTabletFallback(userAgent)) {
cache.mobile = cache.tablet = impl.FALLBACK_TABLET;
cache.phone = null;
} else {
// not mobile at all!
cache.mobile = cache.tablet = cache.phone = null;
}
};
// t is a reference to a MobileDetect instance
impl.mobileGrade = function (t) {
// impl note:
// To keep in sync w/ Mobile_Detect.php easily, the following code is tightly aligned to the PHP version.
// When changes are made in Mobile_Detect.php, copy this method and replace:
// $this-> / t.
// self::MOBILE_GRADE_(.) / '$1'
// , self::VERSION_TYPE_FLOAT / (nothing)
// isIOS() / os('iOS')
// [reg] / (nothing) <-- jsdelivr complaining about unescaped unicode character U+00AE
var $isMobile = t.mobile() !== null;
if (
// Apple iOS 3.2-5.1 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.1)
t.os('iOS') && t.version('iPad')>=4.3 ||
t.os('iOS') && t.version('iPhone')>=3.1 ||
t.os('iOS') && t.version('iPod')>=3.1 ||
// Android 2.1-2.3 - Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
// Android 3.1 (Honeycomb) - Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
// Android 4.0 (ICS) - Tested on a Galaxy Nexus. Note: transition performance can be poor on upgraded devices
// Android 4.1 (Jelly Bean) - Tested on a Galaxy Nexus and Galaxy 7
( t.version('Android')>2.1 && t.is('Webkit') ) ||
// Windows Phone 7-7.5 - Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
t.version('Windows Phone OS')>=7.0 ||
// Blackberry 7 - Tested on BlackBerry Torch 9810
// Blackberry 6.0 - Tested on the Torch 9800 and Style 9670
t.is('BlackBerry') && t.version('BlackBerry')>=6.0 ||
// Blackberry Playbook (1.0-2.0) - Tested on PlayBook
t.match('Playbook.*Tablet') ||
// Palm WebOS (1.4-2.0) - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
( t.version('webOS')>=1.4 && t.match('Palm|Pre|Pixi') ) ||
// Palm WebOS 3.0 - Tested on HP TouchPad
t.match('hp.*TouchPad') ||
// Firefox Mobile (12 Beta) - Tested on Android 2.3 device
( t.is('Firefox') && t.version('Firefox')>=12 ) ||
// Chrome for Android - Tested on Android 4.0, 4.1 device
( t.is('Chrome') && t.is('AndroidOS') && t.version('Android')>=4.0 ) ||
// Skyfire 4.1 - Tested on Android 2.3 device
( t.is('Skyfire') && t.version('Skyfire')>=4.1 && t.is('AndroidOS') && t.version('Android')>=2.3 ) ||
// Opera Mobile 11.5-12: Tested on Android 2.3
( t.is('Opera') && t.version('Opera Mobi')>11 && t.is('AndroidOS') ) ||
// Meego 1.2 - Tested on Nokia 950 and N9
t.is('MeeGoOS') ||
// Tizen (pre-release) - Tested on early hardware
t.is('Tizen') ||
// Samsung Bada 2.0 - Tested on a Samsung Wave 3, Dolphin browser
// @todo: more tests here!
t.is('Dolfin') && t.version('Bada')>=2.0 ||
// UC Browser - Tested on Android 2.3 device
( (t.is('UC Browser') || t.is('Dolfin')) && t.version('Android')>=2.3 ) ||
// Kindle 3 and Fire - Tested on the built-in WebKit browser for each
( t.match('Kindle Fire') ||
t.is('Kindle') && t.version('Kindle')>=3.0 ) ||
// Nook Color 1.4.1 - Tested on original Nook Color, not Nook Tablet
t.is('AndroidOS') && t.is('NookTablet') ||
// Chrome Desktop 11-21 - Tested on OS X 10.7 and Windows 7
t.version('Chrome')>=11 && !$isMobile ||
// Safari Desktop 4-5 - Tested on OS X 10.7 and Windows 7
t.version('Safari')>=5.0 && !$isMobile ||
// Firefox Desktop 4-13 - Tested on OS X 10.7 and Windows 7
t.version('Firefox')>=4.0 && !$isMobile ||
// Internet Explorer 7-9 - Tested on Windows XP, Vista and 7
t.version('MSIE')>=7.0 && !$isMobile ||
// Opera Desktop 10-12 - Tested on OS X 10.7 and Windows 7
// @reference: http://my.opera.com/community/openweb/idopera/
t.version('Opera')>=10 && !$isMobile
){
return 'A';
}
if (
t.os('iOS') && t.version('iPad')<4.3 ||
t.os('iOS') && t.version('iPhone')<3.1 ||
t.os('iOS') && t.version('iPod')<3.1 ||
// Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
t.is('Blackberry') && t.version('BlackBerry')>=5 && t.version('BlackBerry')<6 ||
//Opera Mini (5.0-6.5) - Tested on iOS 3.2/4.3 and Android 2.3
( t.version('Opera Mini')>=5.0 && t.version('Opera Mini')<=6.5 &&
(t.version('Android')>=2.3 || t.is('iOS')) ) ||
// Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)
t.match('NokiaN8|NokiaC7|N97.*Series60|Symbian/3') ||
// @todo: report this (tested on Nokia N71)
t.version('Opera Mobi')>=11 && t.is('SymbianOS')
){
return 'B';
}
if (
// Blackberry 4.x - Tested on the Curve 8330
t.version('BlackBerry')<5.0 ||
// Windows Mobile - Tested on the HTC Leo (WinMo 5.2)
t.match('MSIEMobile|Windows CE.*Mobile') || t.version('Windows Mobile')<=5.2
){
return 'C';
}
//All older smartphone platforms and featurephones - Any device that doesn't support media queries
//will receive the basic, C grade experience.
return 'C';
};
impl.detectOS = function (ua) {
return impl.findMatch(impl.mobileDetectRules.oss0, ua) ||
impl.findMatch(impl.mobileDetectRules.oss, ua);
};
impl.getDeviceSmallerSide = function () {
return window.screen.width < window.screen.height ?
window.screen.width :
window.screen.height;
};
/**
* Constructor for MobileDetect object.
* <br>
* Such an object will keep a reference to the given user-agent string and cache most of the detect queries.<br>
* <div style="background-color: #d9edf7; border: 1px solid #bce8f1; color: #3a87ad; padding: 14px; border-radius: 2px; margin-top: 20px">
* <strong>Find information how to download and install:</strong>
* <a href="https://github.com/hgoebl/mobile-detect.js/">github.com/hgoebl/mobile-detect.js/</a>
* </div>
*
* @example <pre>
* var md = new MobileDetect(window.navigator.userAgent);
* if (md.mobile()) {
* location.href = (md.mobileGrade() === 'A') ? '/mobile/' : '/lynx/';
* }
* </pre>
*
* @param {string} userAgent typically taken from window.navigator.userAgent or http_header['User-Agent']
* @param {number} [maxPhoneWidth=600] <strong>only for browsers</strong> specify a value for the maximum
* width of smallest device side (in logical "CSS" pixels) until a device detected as mobile will be handled
* as phone.
* This is only used in cases where the device cannot be classified as phone or tablet.<br>
* See <a href="http://developer.android.com/guide/practices/screens_support.html">Declaring Tablet Layouts
* for Android</a>.<br>
* If you provide a value < 0, then this "fuzzy" check is disabled.
* @constructor
* @global
*/
function MobileDetect(userAgent, maxPhoneWidth) {
this.ua = prepareUserAgent(userAgent);
this._cache = {};
//600dp is typical 7" tablet minimum width
this.maxPhoneWidth = maxPhoneWidth || 600;
}
MobileDetect.prototype = {
constructor: MobileDetect,
/**
* Returns the detected phone or tablet type or <tt>null</tt> if it is not a mobile device.
* <br>
* For a list of possible return values see {@link MobileDetect#phone} and {@link MobileDetect#tablet}.<br>
* <br>
* If the device is not detected by the regular expressions from Mobile-Detect, a test is made against
* the patterns of <a href="http://detectmobilebrowsers.com/">detectmobilebrowsers.com</a>. If this test
* is positive, a value of <code>UnknownPhone</code>, <code>UnknownTablet</code> or
* <code>UnknownMobile</code> is returned.<br>
* When used in browser, the decision whether phone or tablet is made based on <code>screen.width/height</code>.<br>
* <br>
* When used server-side (node.js), there is no way to tell the difference between <code>UnknownTablet</code>
* and <code>UnknownMobile</code>, so you will get <code>UnknownMobile</code> here.<br>
* Be aware that since v1.0.0 in this special case you will get <code>UnknownMobile</code> only for:
* {@link MobileDetect#mobile}, not for {@link MobileDetect#phone} and {@link MobileDetect#tablet}.
* In versions before v1.0.0 all 3 methods returned <code>UnknownMobile</code> which was tedious to use.
* <br>
* In most cases you will use the return value just as a boolean.
*
* @returns {String} the key for the phone family or tablet family, e.g. "Nexus".
* @function MobileDetect#mobile
*/
mobile: function () {
impl.prepareDetectionCache(this._cache, this.ua, this.maxPhoneWidth);
return this._cache.mobile;
},
/**
* Returns the detected phone type/family string or <tt>null</tt>.
* <br>
* The returned tablet (family or producer) is one of following keys:<br>
* <br><tt>iPhone, BlackBerry, HTC, Nexus, Dell, Motorola, Samsung, LG, Sony, Asus,
* NokiaLumia, Micromax, Palm, Vertu, Pantech, Fly, Wiko, iMobile, SimValley,
* Wolfgang, Alcatel, Nintendo, Amoi, INQ, GenericPhone</tt><br>
* <br>
* If the device is not detected by the regular expressions from Mobile-Detect, a test is made against
* the patterns of <a href="http://detectmobilebrowsers.com/">detectmobilebrowsers.com</a>. If this test
* is positive, a value of <code>UnknownPhone</code> or <code>UnknownMobile</code> is returned.<br>
* When used in browser, the decision whether phone or tablet is made based on <code>screen.width/height</code>.<br>
* <br>
* When used server-side (node.js), there is no way to tell the difference between <code>UnknownTablet</code>
* and <code>UnknownMobile</code>, so you will get <code>null</code> here, while {@link MobileDetect#mobile}
* will return <code>UnknownMobile</code>.<br>
* Be aware that since v1.0.0 in this special case you will get <code>UnknownMobile</code> only for:
* {@link MobileDetect#mobile}, not for {@link MobileDetect#phone} and {@link MobileDetect#tablet}.
* In versions before v1.0.0 all 3 methods returned <code>UnknownMobile</code> which was tedious to use.
* <br>
* In most cases you will use the return value just as a boolean.
*
* @returns {String} the key of the phone family or producer, e.g. "iPhone"
* @function MobileDetect#phone
*/
phone: function () {
impl.prepareDetectionCache(this._cache, this.ua, this.maxPhoneWidth);
return this._cache.phone;
},
/**
* Returns the detected tablet type/family string or <tt>null</tt>.
* <br>
* The returned tablet (family or producer) is one of following keys:<br>
* <br><tt>iPad, NexusTablet, GoogleTablet, SamsungTablet, Kindle, SurfaceTablet,
* HPTablet, AsusTablet, BlackBerryTablet, HTCtablet, MotorolaTablet, NookTablet,
* AcerTablet, ToshibaTablet, LGTablet, FujitsuTablet, PrestigioTablet,
* LenovoTablet, DellTablet, YarvikTablet, MedionTablet, ArnovaTablet,
* IntensoTablet, IRUTablet, MegafonTablet, EbodaTablet, AllViewTablet,
* ArchosTablet, AinolTablet, NokiaLumiaTablet, SonyTablet, PhilipsTablet,
* CubeTablet, CobyTablet, MIDTablet, MSITablet, SMiTTablet, RockChipTablet,
* FlyTablet, bqTablet, HuaweiTablet, NecTablet, PantechTablet, BronchoTablet,
* VersusTablet, ZyncTablet, PositivoTablet, NabiTablet, KoboTablet, DanewTablet,
* TexetTablet, PlaystationTablet, TrekstorTablet, PyleAudioTablet, AdvanTablet,
* DanyTechTablet, GalapadTablet, MicromaxTablet, KarbonnTablet, AllFineTablet,
* PROSCANTablet, YONESTablet, ChangJiaTablet, GUTablet, PointOfViewTablet,
* OvermaxTablet, HCLTablet, DPSTablet, VistureTablet, CrestaTablet,
* MediatekTablet, ConcordeTablet, GoCleverTablet, ModecomTablet, VoninoTablet,
* ECSTablet, StorexTablet, VodafoneTablet, EssentielBTablet, RossMoorTablet,
* iMobileTablet, TolinoTablet, AudioSonicTablet, AMPETablet, SkkTablet,
* TecnoTablet, JXDTablet, iJoyTablet, FX2Tablet, XoroTablet, ViewsonicTablet,
* VerizonTablet, OdysTablet, CaptivaTablet, IconbitTablet, TeclastTablet,
* OndaTablet, JaytechTablet, BlaupunktTablet, DigmaTablet, EvolioTablet,
* LavaTablet, AocTablet, MpmanTablet, CelkonTablet, WolderTablet, MediacomTablet,
* MiTablet, NibiruTablet, NexoTablet, LeaderTablet, UbislateTablet,
* PocketBookTablet, KocasoTablet, HisenseTablet, Hudl, TelstraTablet,
* GenericTablet</tt><br>
* <br>
* If the device is not detected by the regular expressions from Mobile-Detect, a test is made against
* the patterns of <a href="http://detectmobilebrowsers.com/">detectmobilebrowsers.com</a>. If this test
* is positive, a value of <code>UnknownTablet</code> or <code>UnknownMobile</code> is returned.<br>
* When used in browser, the decision whether phone or tablet is made based on <code>screen.width/height</code>.<br>
* <br>
* When used server-side (node.js), there is no way to tell the difference between <code>UnknownTablet</code>
* and <code>UnknownMobile</code>, so you will get <code>null</code> here, while {@link MobileDetect#mobile}
* will return <code>UnknownMobile</code>.<br>
* Be aware that since v1.0.0 in this special case you will get <code>UnknownMobile</code> only for:
* {@link MobileDetect#mobile}, not for {@link MobileDetect#phone} and {@link MobileDetect#tablet}.
* In versions before v1.0.0 all 3 methods returned <code>UnknownMobile</code> which was tedious to use.
* <br>
* In most cases you will use the return value just as a boolean.
*
* @returns {String} the key of the tablet family or producer, e.g. "SamsungTablet"
* @function MobileDetect#tablet
*/
tablet: function () {
impl.prepareDetectionCache(this._cache, this.ua, this.maxPhoneWidth);
return this._cache.tablet;
},
/**
* Returns the (first) detected user-agent string or <tt>null</tt>.
* <br>
* The returned user-agent is one of following keys:<br>
* <br><tt>Chrome, Dolfin, Opera, Skyfire, Edge, IE, Firefox, Bolt, TeaShark, Blazer,
* Safari, UCBrowser, baiduboxapp, baidubrowser, DiigoBrowser, Puffin, Mercury,
* ObigoBrowser, NetFront, GenericBrowser, PaleMoon</tt><br>
* <br>
* In most cases calling {@link MobileDetect#userAgent} will be sufficient. But there are rare
* cases where a mobile device pretends to be more than one particular browser. You can get the
* list of all matches with {@link MobileDetect#userAgents} or check for a particular value by
* providing one of the defined keys as first argument to {@link MobileDetect#is}.
*
* @returns {String} the key for the detected user-agent or <tt>null</tt>
* @function MobileDetect#userAgent
*/
userAgent: function () {
if (this._cache.userAgent === undefined) {
this._cache.userAgent = impl.findMatch(impl.mobileDetectRules.uas, this.ua);
}
return this._cache.userAgent;
},
/**
* Returns all detected user-agent strings.
* <br>
* The array is empty or contains one or more of following keys:<br>
* <br><tt>Chrome, Dolfin, Opera, Skyfire, Edge, IE, Firefox, Bolt, TeaShark, Blazer,
* Safari, UCBrowser, baiduboxapp, baidubrowser, DiigoBrowser, Puffin, Mercury,
* ObigoBrowser, NetFront, GenericBrowser, PaleMoon</tt><br>
* <br>
* In most cases calling {@link MobileDetect#userAgent} will be sufficient. But there are rare
* cases where a mobile device pretends to be more than one particular browser. You can get the
* list of all matches with {@link MobileDetect#userAgents} or check for a particular value by
* providing one of the defined keys as first argument to {@link MobileDetect#is}.
*
* @returns {Array} the array of detected user-agent keys or <tt>[]</tt>
* @function MobileDetect#userAgents
*/
userAgents: function () {
if (this._cache.userAgents === undefined) {
this._cache.userAgents = impl.findMatches(impl.mobileDetectRules.uas, this.ua);
}
return this._cache.userAgents;
},
/**
* Returns the detected operating system string or <tt>null</tt>.
* <br>
* The operating system is one of following keys:<br>
* <br><tt>AndroidOS, BlackBerryOS, PalmOS, SymbianOS, WindowsMobileOS, WindowsPhoneOS,
* iOS, MeeGoOS, MaemoOS, JavaOS, webOS, badaOS, BREWOS</tt><br>
*
* @returns {String} the key for the detected operating system.
* @function MobileDetect#os
*/
os: function () {
if (this._cache.os === undefined) {
this._cache.os = impl.detectOS(this.ua);
}
return this._cache.os;
},
/**
* Get the version (as Number) of the given property in the User-Agent.
* <br>
* Will return a float number. (eg. 2_0 will return 2.0, 4.3.1 will return 4.31)
*
* @param {String} key a key defining a thing which has a version.<br>
* You can use one of following keys:<br>
* <br><tt>Mobile, Build, Version, VendorID, iPad, iPhone, iPod, Kindle, Chrome, Coast,
* Dolfin, Firefox, Fennec, Edge, IE, NetFront, NokiaBrowser, Opera, Opera Mini,
* Opera Mobi, UCBrowser, MQQBrowser, MicroMessenger, baiduboxapp, baidubrowser,
* SamsungBrowser, Iron, Safari, Skyfire, Tizen, Webkit, PaleMoon, Gecko, Trident,
* Presto, Goanna, iOS, Android, BlackBerry, BREW, Java, Windows Phone OS, Windows
* Phone, Windows CE, Windows NT, Symbian, webOS</tt><br>
*
* @returns {Number} the version as float or <tt>NaN</tt> if User-Agent doesn't contain this version.
* Be careful when comparing this value with '==' operator!
* @function MobileDetect#version
*/
version: function (key) {
return impl.getVersion(key, this.ua);
},
/**
* Get the version (as String) of the given property in the User-Agent.
* <br>
*
* @param {String} key a key defining a thing which has a version.<br>
* You can use one of following keys:<br>
* <br><tt>Mobile, Build, Version, VendorID, iPad, iPhone, iPod, Kindle, Chrome, Coast,
* Dolfin, Firefox, Fennec, Edge, IE, NetFront, NokiaBrowser, Opera, Opera Mini,
* Opera Mobi, UCBrowser, MQQBrowser, MicroMessenger, baiduboxapp, baidubrowser,
* SamsungBrowser, Iron, Safari, Skyfire, Tizen, Webkit, PaleMoon, Gecko, Trident,
* Presto, Goanna, iOS, Android, BlackBerry, BREW, Java, Windows Phone OS, Windows
* Phone, Windows CE, Windows NT, Symbian, webOS</tt><br>
*
* @returns {String} the "raw" version as String or <tt>null</tt> if User-Agent doesn't contain this version.
*
* @function MobileDetect#versionStr
*/
versionStr: function (key) {
return impl.getVersionStr(key, this.ua);
},
/**
* Global test key against userAgent, os, phone, tablet and some other properties of userAgent string.
*
* @param {String} key the key (case-insensitive) of a userAgent, an operating system, phone or
* tablet family.<br>
* For a complete list of possible values, see {@link MobileDetect#userAgent},
* {@link MobileDetect#os}, {@link MobileDetect#phone}, {@link MobileDetect#tablet}.<br>
* Additionally you have following keys:<br>
* <br><tt>Bot, MobileBot, DesktopMode, TV, WebKit, Console, Watch</tt><br>
*
* @returns {boolean} <tt>true</tt> when the given key is one of the defined keys of userAgent, os, phone,
* tablet or one of the listed additional keys, otherwise <tt>false</tt>
* @function MobileDetect#is
*/
is: function (key) {
return containsIC(this.userAgents(), key) ||
equalIC(key, this.os()) ||
equalIC(key, this.phone()) ||
equalIC(key, this.tablet()) ||
containsIC(impl.findMatches(impl.mobileDetectRules.utils, this.ua), key);
},
/**
* Do a quick test against navigator::userAgent.
*
* @param {String|RegExp} pattern the pattern, either as String or RegExp
* (a string will be converted to a case-insensitive RegExp).
* @returns {boolean} <tt>true</tt> when the pattern matches, otherwise <tt>false</tt>
* @function MobileDetect#match
*/
match: function (pattern) {
if (!(pattern instanceof RegExp)) {
pattern = new RegExp(pattern, 'i');
}
return pattern.test(this.ua);
},
/**
* Checks whether the mobile device can be considered as phone regarding <code>screen.width</code>.
* <br>
* Obviously this method makes sense in browser environments only (not for Node.js)!
* @param {number} [maxPhoneWidth] the maximum logical pixels (aka. CSS-pixels) to be considered as phone.<br>
* The argument is optional and if not present or falsy, the value of the constructor is taken.
* @returns {boolean|undefined} <code>undefined</code> if screen size wasn't detectable, else <code>true</code>
* when screen.width is less or equal to maxPhoneWidth, otherwise <code>false</code>.<br>
* Will always return <code>undefined</code> server-side.
*/
isPhoneSized: function (maxPhoneWidth) {
return MobileDetect.isPhoneSized(maxPhoneWidth || this.maxPhoneWidth);
},
/**
* Returns the mobile grade ('A', 'B', 'C').
*
* @returns {String} one of the mobile grades ('A', 'B', 'C').
* @function MobileDetect#mobileGrade
*/
mobileGrade: function () {
if (this._cache.grade === undefined) {
this._cache.grade = impl.mobileGrade(this);
}
return this._cache.grade;
}
};
// environment-dependent
if (typeof window !== 'undefined' && window.screen) {
MobileDetect.isPhoneSized = function (maxPhoneWidth) {
return maxPhoneWidth < 0 ? undefined : impl.getDeviceSmallerSide() <= maxPhoneWidth;
};
} else {
MobileDetect.isPhoneSized = function () {};
}
// should not be replaced by a completely new object - just overwrite existing methods
MobileDetect._impl = impl;
MobileDetect.version = '1.4.2 2018-06-10';
return MobileDetect;
}); // end of call of define()
})((function (undefined) {
if (typeof module !== 'undefined' && module.exports) {
return function (factory) { module.exports = factory(); };
} else if (typeof define === 'function' && define.amd) {
return define;
} else if (typeof window !== 'undefined') {
return function (factory) { window.MobileDetect = factory(); };
} else {
// please file a bug if you get this error!
throw new Error('unknown environment');
}
})());