mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-23 21:47:59 +01:00
1037 lines
38 KiB
JavaScript
1037 lines
38 KiB
JavaScript
|
/**
|
||
|
* State-based routing for AngularJS
|
||
|
* @version v0.0.1
|
||
|
* @link http://angular-ui.github.com/
|
||
|
* @license MIT License, http://www.opensource.org/licenses/MIT
|
||
|
*/
|
||
|
(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;
|
||
|
|
||
|
function inherit(parent, extra) {
|
||
|
return extend(new (extend(function() {}, { prototype: parent }))(), extra);
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Extends the destination object `dst` by copying all of the properties from the `src` object(s)
|
||
|
* to `dst` if the `dst` object has no own property of the same name. You can specify multiple
|
||
|
* `src` objects.
|
||
|
*
|
||
|
* @param {Object} dst Destination object.
|
||
|
* @param {...Object} src Source object(s).
|
||
|
* @see angular.extend
|
||
|
*/
|
||
|
function merge(dst) {
|
||
|
forEach(arguments, function(obj) {
|
||
|
if (obj !== dst) {
|
||
|
forEach(obj, function(value, key) {
|
||
|
if (!dst.hasOwnProperty(key)) dst[key] = value;
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
return dst;
|
||
|
}
|
||
|
|
||
|
angular.module('ui.util', ['ng']);
|
||
|
angular.module('ui.router', ['ui.util']);
|
||
|
angular.module('ui.state', ['ui.router', 'ui.util']);
|
||
|
angular.module('ui.compat', ['ui.state']);
|
||
|
|
||
|
/**
|
||
|
* Service. Manages loading of templates.
|
||
|
* @constructor
|
||
|
* @name $templateFactory
|
||
|
* @requires $http
|
||
|
* @requires $templateCache
|
||
|
* @requires $injector
|
||
|
*/
|
||
|
$TemplateFactory.$inject = ['$http', '$templateCache', '$injector'];
|
||
|
function $TemplateFactory( $http, $templateCache, $injector) {
|
||
|
|
||
|
/**
|
||
|
* Creates a template from a configuration object.
|
||
|
* @function
|
||
|
* @name $templateFactory#fromConfig
|
||
|
* @methodOf $templateFactory
|
||
|
* @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|Function} config.template html string template or function to load via
|
||
|
* {@link $templateFactory#fromString fromString}.
|
||
|
* @param {string|Function} config.templateUrl url to load or a function returning the url
|
||
|
* to load via {@link $templateFactory#fromUrl fromUrl}.
|
||
|
* @param {Function} config.templateProvider function to invoke via
|
||
|
* {@link $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|Promise.<string>} 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
|
||
|
);
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Creates a template from a string or a function returning a string.
|
||
|
* @function
|
||
|
* @name $templateFactory#fromString
|
||
|
* @methodOf $templateFactory
|
||
|
* @param {string|Function} 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|Promise.<string>} The template html as a string, or a promise for that string.
|
||
|
*/
|
||
|
this.fromString = function (template, params) {
|
||
|
return isFunction(template) ? template(params) : template;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Loads a template from the a URL via `$http` and `$templateCache`.
|
||
|
* @function
|
||
|
* @name $templateFactory#fromUrl
|
||
|
* @methodOf $templateFactory
|
||
|
* @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 return $http
|
||
|
.get(url, { cache: $templateCache })
|
||
|
.then(function(response) { return response.data; });
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Creates a template by invoking an injectable provider function.
|
||
|
* @function
|
||
|
* @name $templateFactory#fromUrl
|
||
|
* @methodOf $templateFactory
|
||
|
* @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.util').service('$templateFactory', $TemplateFactory);
|
||
|
|
||
|
/**
|
||
|
* 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 UrlMatcher#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 '}' - curly placeholder with regexp. 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.
|
||
|
*
|
||
|
* @constructor
|
||
|
* @param {string} pattern the pattern to compile into a matcher.
|
||
|
*
|
||
|
* @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 UrlMatcher#exec exec()} returns
|
||
|
* non-null) will start with this prefix.
|
||
|
*/
|
||
|
function UrlMatcher(pattern) {
|
||
|
|
||
|
// 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)
|
||
|
// \{(\w+)(?:\:( ... ))?\} curly brace placeholder ($3) with optional regexp ... ($4)
|
||
|
// (?: ... | ... | ... )+ 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+)(?:\:((?:[^{}\\]+|\\.|\{(?:[^{}\\]+|\\.)*\})+))?\}/g,
|
||
|
names = {}, compiled = '^', last = 0, m,
|
||
|
segments = this.segments = [],
|
||
|
params = this.params = [];
|
||
|
|
||
|
function addParameter(id) {
|
||
|
if (!/^\w+$/.test(id)) throw new Error("Invalid parameter name '" + id + "' in pattern '" + pattern + "'");
|
||
|
if (names[id]) throw new Error("Duplicate parameter name '" + id + "' in pattern '" + pattern + "'");
|
||
|
names[id] = true;
|
||
|
params.push(id);
|
||
|
}
|
||
|
|
||
|
function quoteRegExp(string) {
|
||
|
return string.replace(/[\\\[\]\^$*+?.()|{}]/g, "\\$&");
|
||
|
}
|
||
|
|
||
|
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.
|
||
|
var id, regexp, segment;
|
||
|
while ((m = placeholder.exec(pattern))) {
|
||
|
id = m[2] || m[3]; // IE[78] returns '' for unmatched groups instead of null
|
||
|
regexp = m[4] || (m[1] == '*' ? '.*' : '[^/]*');
|
||
|
segment = pattern.substring(last, m.index);
|
||
|
if (segment.indexOf('?') >= 0) break; // we're into the search part
|
||
|
compiled += quoteRegExp(segment) + '(' + regexp + ')';
|
||
|
addParameter(id);
|
||
|
segments.push(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);
|
||
|
|
||
|
// Allow parameters to be separated by '?' as well as '&' to make concat() easier
|
||
|
forEach(search.substring(1).split(/[&?]/), addParameter);
|
||
|
} else {
|
||
|
this.sourcePath = pattern;
|
||
|
this.sourceSearch = '';
|
||
|
}
|
||
|
|
||
|
compiled += quoteRegExp(segment) + '$';
|
||
|
segments.push(segment);
|
||
|
this.regexp = new RegExp(compiled);
|
||
|
this.prefix = segments[0];
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* 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:
|
||
|
* ```
|
||
|
* new UrlMatcher('/user/{id}?q').concat('/details?date');
|
||
|
* new UrlMatcher('/user/{id}/details?q&date');
|
||
|
* ```
|
||
|
*
|
||
|
* @param {string} pattern The pattern to append.
|
||
|
* @return {UrlMatcher} A matcher for the concatenated pattern.
|
||
|
*/
|
||
|
UrlMatcher.prototype.concat = function (pattern) {
|
||
|
// 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.
|
||
|
return new UrlMatcher(this.sourcePath + pattern + this.sourceSearch);
|
||
|
};
|
||
|
|
||
|
UrlMatcher.prototype.toString = function () {
|
||
|
return this.source;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* 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
|
||
|
* ```
|
||
|
* new UrlMatcher('/user/{id}?q&r').exec('/user/bob', { x:'1', q:'hello' });
|
||
|
* // returns { id:'bob', q:'hello', r:null }
|
||
|
* ```
|
||
|
*
|
||
|
* @param {string} path The URL path to match, e.g. `$location.path()`.
|
||
|
* @param {Object} searchParams URL search parameters, e.g. `$location.search()`.
|
||
|
* @return {Object} The captured parameter values.
|
||
|
*/
|
||
|
UrlMatcher.prototype.exec = function (path, searchParams) {
|
||
|
var m = this.regexp.exec(path);
|
||
|
if (!m) return null;
|
||
|
|
||
|
var params = this.params, nTotal = params.length,
|
||
|
nPath = this.segments.length-1,
|
||
|
values = {}, i;
|
||
|
|
||
|
for (i=0; i<nPath; i++) values[params[i]] = decodeURIComponent(m[i+1]);
|
||
|
for (/**/; i<nTotal; i++) values[params[i]] = searchParams[params[i]];
|
||
|
|
||
|
return values;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Returns the names of all path and search parameters of this pattern in an unspecified order.
|
||
|
* @return {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 () {
|
||
|
return this.params;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* 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
|
||
|
* ```
|
||
|
* new UrlMatcher('/user/{id}?q').format({ id:'bob', q:'yes' });
|
||
|
* // returns '/user/bob?q=yes'
|
||
|
* ```
|
||
|
*
|
||
|
* @param {Object} values the values to substitute for the parameters in this pattern.
|
||
|
* @return {string} the formatted URL (path and optionally search part).
|
||
|
*/
|
||
|
UrlMatcher.prototype.format = function (values) {
|
||
|
var segments = this.segments, params = this.params;
|
||
|
if (!values) return segments.join('');
|
||
|
|
||
|
var nPath = segments.length-1, nTotal = params.length,
|
||
|
result = segments[0], i, search, value;
|
||
|
|
||
|
for (i=0; i<nPath; i++) {
|
||
|
value = values[params[i]];
|
||
|
// TODO: Maybe we should throw on null here? It's not really good style to use '' and null interchangeabley
|
||
|
if (value != null) result += value;
|
||
|
result += segments[i+1];
|
||
|
}
|
||
|
for (/**/; i<nTotal; i++) {
|
||
|
value = values[params[i]];
|
||
|
if (value != null) {
|
||
|
result += (search ? '&' : '?') + params[i] + '=' + encodeURIComponent(value);
|
||
|
search = true;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return result;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Service. Factory for {@link UrlMatcher} instances. The factory is also available to providers
|
||
|
* under the name `$urlMatcherFactoryProvider`.
|
||
|
* @constructor
|
||
|
* @name $urlMatcherFactory
|
||
|
*/
|
||
|
function $UrlMatcherFactory() {
|
||
|
/**
|
||
|
* Creates a {@link UrlMatcher} for the specified pattern.
|
||
|
* @function
|
||
|
* @name $urlMatcherFactory#compile
|
||
|
* @methodOf $urlMatcherFactory
|
||
|
* @param {string} pattern The URL pattern.
|
||
|
* @return {UrlMatcher} The UrlMatcher.
|
||
|
*/
|
||
|
this.compile = function (pattern) {
|
||
|
return new UrlMatcher(pattern);
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Returns true if the specified object is a UrlMatcher, or false otherwise.
|
||
|
* @function
|
||
|
* @name $urlMatcherFactory#isMatcher
|
||
|
* @methodOf $urlMatcherFactory
|
||
|
* @param {Object} o
|
||
|
* @return {boolean}
|
||
|
*/
|
||
|
this.isMatcher = function (o) {
|
||
|
return o instanceof UrlMatcher;
|
||
|
};
|
||
|
|
||
|
this.$get = function () {
|
||
|
return this;
|
||
|
};
|
||
|
}
|
||
|
|
||
|
// Register as a provider so it's available to other providers
|
||
|
angular.module('ui.util').provider('$urlMatcherFactory', $UrlMatcherFactory);
|
||
|
|
||
|
|
||
|
$UrlRouterProvider.$inject = ['$urlMatcherFactoryProvider'];
|
||
|
function $UrlRouterProvider( $urlMatcherFactory) {
|
||
|
var rules = [],
|
||
|
otherwise = null;
|
||
|
|
||
|
// 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)];
|
||
|
});
|
||
|
}
|
||
|
|
||
|
this.rule =
|
||
|
function (rule) {
|
||
|
if (!isFunction(rule)) throw new Error("'rule' must be a function");
|
||
|
rules.push(rule);
|
||
|
return this;
|
||
|
};
|
||
|
|
||
|
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;
|
||
|
}
|
||
|
|
||
|
this.when =
|
||
|
function (what, handler) {
|
||
|
var rule, redirect;
|
||
|
if (isString(what))
|
||
|
what = $urlMatcherFactory.compile(what);
|
||
|
|
||
|
if ($urlMatcherFactory.isMatcher(what)) {
|
||
|
if (isString(handler)) {
|
||
|
redirect = $urlMatcherFactory.compile(handler);
|
||
|
handler = ['$match', function ($match) { return redirect.format($match); }];
|
||
|
}
|
||
|
else if (!isFunction(handler) && !isArray(handler))
|
||
|
throw new Error("invalid 'handler' in when()");
|
||
|
|
||
|
rule = function ($injector, $location) {
|
||
|
return handleIfMatch($injector, handler, what.exec($location.path(), $location.search()));
|
||
|
};
|
||
|
rule.prefix = isString(what.prefix) ? what.prefix : '';
|
||
|
}
|
||
|
else if (what instanceof RegExp) {
|
||
|
if (isString(handler)) {
|
||
|
redirect = handler;
|
||
|
handler = ['$match', function ($match) { return interpolate(redirect, $match); }];
|
||
|
}
|
||
|
else if (!isFunction(handler) && !isArray(handler))
|
||
|
throw new Error("invalid 'handler' in when()");
|
||
|
|
||
|
if (what.global || what.sticky)
|
||
|
throw new Error("when() RegExp must not be global or sticky");
|
||
|
|
||
|
rule = function ($injector, $location) {
|
||
|
return handleIfMatch($injector, handler, what.exec($location.path()));
|
||
|
};
|
||
|
rule.prefix = regExpPrefix(what);
|
||
|
}
|
||
|
else
|
||
|
throw new Error("invalid 'what' in when()");
|
||
|
|
||
|
return this.rule(rule);
|
||
|
};
|
||
|
|
||
|
this.$get =
|
||
|
[ '$location', '$rootScope', '$injector',
|
||
|
function ($location, $rootScope, $injector) {
|
||
|
if (otherwise) rules.push(otherwise);
|
||
|
|
||
|
// TODO: Optimize groups of rules with non-empty prefix into some sort of decision tree
|
||
|
function update() {
|
||
|
var n=rules.length, i, handled;
|
||
|
for (i=0; i<n; i++) {
|
||
|
handled = rules[i]($injector, $location);
|
||
|
if (handled) {
|
||
|
if (isString(handled)) $location.replace().url(handled);
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
$rootScope.$on('$locationChangeSuccess', update);
|
||
|
return {};
|
||
|
}];
|
||
|
}
|
||
|
|
||
|
angular.module('ui.router').provider('$urlRouter', $UrlRouterProvider);
|
||
|
|
||
|
$StateProvider.$inject = ['$urlRouterProvider', '$urlMatcherFactoryProvider'];
|
||
|
function $StateProvider( $urlRouterProvider, $urlMatcherFactory) {
|
||
|
|
||
|
var root, states = {}, $state;
|
||
|
|
||
|
function findState(stateOrName) {
|
||
|
var state;
|
||
|
if (isString(stateOrName)) {
|
||
|
state = states[stateOrName];
|
||
|
if (!state) throw new Error("No such state '" + stateOrName + "'");
|
||
|
} else {
|
||
|
state = states[stateOrName.name];
|
||
|
if (!state || state !== stateOrName && state.self !== stateOrName)
|
||
|
throw new Error("Invalid or unregistered state");
|
||
|
}
|
||
|
return state;
|
||
|
}
|
||
|
|
||
|
function registerState(state) {
|
||
|
// Wrap a new object around the state so we can store our private details easily.
|
||
|
state = inherit(state, {
|
||
|
self: state,
|
||
|
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[name]) throw new Error("State '" + name + "'' is already defined");
|
||
|
|
||
|
// Derive parent state from a hierarchical name only if 'parent' is not explicitly defined.
|
||
|
var parent = root;
|
||
|
if (!isDefined(state.parent)) {
|
||
|
// regex matches any valid composite state name
|
||
|
// would match "contact.list" but not "contacts"
|
||
|
var compositeName = /^(.+)\.[^.]+$/.exec(name);
|
||
|
if (compositeName != null) {
|
||
|
parent = findState(compositeName[1]);
|
||
|
}
|
||
|
} else if (state.parent != null) {
|
||
|
parent = findState(state.parent);
|
||
|
}
|
||
|
state.parent = parent;
|
||
|
// state.children = [];
|
||
|
// if (parent) parent.children.push(state);
|
||
|
|
||
|
// Build a URLMatcher if necessary, either via a relative or absolute URL
|
||
|
var url = state.url;
|
||
|
if (isString(url)) {
|
||
|
if (url.charAt(0) == '^') {
|
||
|
url = state.url = $urlMatcherFactory.compile(url.substring(1));
|
||
|
} else {
|
||
|
url = state.url = (parent.navigable || root).url.concat(url);
|
||
|
}
|
||
|
} else if (isObject(url) &&
|
||
|
isFunction(url.exec) && isFunction(url.format) && isFunction(url.concat)) {
|
||
|
/* use UrlMatcher (or compatible object) as is */
|
||
|
} else if (url != null) {
|
||
|
throw new Error("Invalid url '" + url + "' in state '" + state + "'");
|
||
|
}
|
||
|
|
||
|
// Keep track of the closest ancestor state that has a URL (i.e. is navigable)
|
||
|
state.navigable = url ? state : parent ? parent.navigable : null;
|
||
|
|
||
|
// Derive parameters for this state and ensure they're a super-set of parent's parameters
|
||
|
var params = state.params;
|
||
|
if (params) {
|
||
|
if (!isArray(params)) throw new Error("Invalid params in state '" + state + "'");
|
||
|
if (url) throw new Error("Both params and url specicified in state '" + state + "'");
|
||
|
} else {
|
||
|
params = state.params = url ? url.parameters() : state.parent.params;
|
||
|
}
|
||
|
|
||
|
var paramNames = {}; forEach(params, function (p) { paramNames[p] = true; });
|
||
|
if (parent) {
|
||
|
forEach(parent.params, function (p) {
|
||
|
if (!paramNames[p]) {
|
||
|
throw new Error("Missing required parameter '" + p + "' in state '" + name + "'");
|
||
|
}
|
||
|
paramNames[p] = false;
|
||
|
});
|
||
|
|
||
|
var ownParams = state.ownParams = [];
|
||
|
forEach(paramNames, function (own, p) {
|
||
|
if (own) ownParams.push(p);
|
||
|
});
|
||
|
} else {
|
||
|
state.ownParams = params;
|
||
|
}
|
||
|
|
||
|
// 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.
|
||
|
var views = {};
|
||
|
forEach(isDefined(state.views) ? state.views : { '': state }, function (view, name) {
|
||
|
if (name.indexOf('@') < 0) name = name + '@' + state.parent.name;
|
||
|
views[name] = view;
|
||
|
});
|
||
|
state.views = views;
|
||
|
|
||
|
// Keep a full path from the root down to this state as this is needed for state activation.
|
||
|
state.path = parent ? parent.path.concat(state) : []; // exclude root from path
|
||
|
|
||
|
// Speed up $state.contains() as it's used a lot
|
||
|
var includes = state.includes = parent ? extend({}, parent.includes) : {};
|
||
|
includes[name] = true;
|
||
|
|
||
|
if (!state.resolve) state.resolve = {}; // prevent null checks later
|
||
|
|
||
|
// Register the state in the global state list and with $urlRouter if necessary.
|
||
|
if (!state['abstract'] && url) {
|
||
|
$urlRouterProvider.when(url, ['$match', function ($match) {
|
||
|
$state.transitionTo(state, $match, false);
|
||
|
}]);
|
||
|
}
|
||
|
states[name] = state;
|
||
|
return state;
|
||
|
}
|
||
|
|
||
|
// Implicit root state that is always active
|
||
|
root = registerState({
|
||
|
name: '',
|
||
|
url: '^',
|
||
|
views: null,
|
||
|
'abstract': true
|
||
|
});
|
||
|
root.locals = { globals: { $stateParams: {} } };
|
||
|
root.navigable = null;
|
||
|
|
||
|
|
||
|
// .state(state)
|
||
|
// .state(name, state)
|
||
|
this.state = state;
|
||
|
function state(name, definition) {
|
||
|
/*jshint validthis: true */
|
||
|
if (isObject(name)) definition = name;
|
||
|
else definition.name = name;
|
||
|
registerState(definition);
|
||
|
return this;
|
||
|
}
|
||
|
|
||
|
// $urlRouter is injected just to ensure it gets instantiated
|
||
|
this.$get = $get;
|
||
|
$get.$inject = ['$rootScope', '$q', '$templateFactory', '$injector', '$stateParams', '$location', '$urlRouter'];
|
||
|
function $get( $rootScope, $q, $templateFactory, $injector, $stateParams, $location, $urlRouter) {
|
||
|
|
||
|
var TransitionSuperseded = $q.reject(new Error('transition superseded'));
|
||
|
var TransitionPrevented = $q.reject(new Error('transition prevented'));
|
||
|
|
||
|
$state = {
|
||
|
params: {},
|
||
|
current: root.self,
|
||
|
$current: root,
|
||
|
transition: null
|
||
|
};
|
||
|
|
||
|
// $state.go = function go(to, params) {
|
||
|
// };
|
||
|
|
||
|
$state.transitionTo = function transitionTo(to, toParams, updateLocation) {
|
||
|
if (!isDefined(updateLocation)) updateLocation = true;
|
||
|
|
||
|
to = findState(to);
|
||
|
if (to['abstract']) throw new Error("Cannot transition to abstract state '" + to + "'");
|
||
|
var toPath = to.path,
|
||
|
from = $state.$current, fromParams = $state.params, fromPath = from.path;
|
||
|
|
||
|
// Starting from the root of the path, keep all levels that haven't changed
|
||
|
var keep, state, locals = root.locals, toLocals = [];
|
||
|
for (keep = 0, state = toPath[keep];
|
||
|
state && state === fromPath[keep] && equalForKeys(toParams, fromParams, state.ownParams);
|
||
|
keep++, state = toPath[keep]) {
|
||
|
locals = toLocals[keep] = state.locals;
|
||
|
}
|
||
|
|
||
|
// 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 (to === from && locals === from.locals) {
|
||
|
$state.transition = null;
|
||
|
return $q.when($state.current);
|
||
|
}
|
||
|
|
||
|
// Normalize/filter parameters before we pass them to event handlers etc.
|
||
|
toParams = normalize(to.params, toParams || {});
|
||
|
|
||
|
// Broadcast start event and cancel the transition if requested
|
||
|
if ($rootScope.$broadcast('$stateChangeStart', to.self, toParams, from.self, fromParams)
|
||
|
.defaultPrevented) 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);
|
||
|
}
|
||
|
|
||
|
// 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) 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);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Update globals in $state
|
||
|
$state.$current = to;
|
||
|
$state.current = to.self;
|
||
|
$state.params = toParams;
|
||
|
copy($state.params, $stateParams);
|
||
|
$state.transition = null;
|
||
|
|
||
|
// Update $location
|
||
|
var toNav = to.navigable;
|
||
|
if (updateLocation && toNav) {
|
||
|
$location.url(toNav.url.format(toNav.locals.globals.$stateParams));
|
||
|
}
|
||
|
|
||
|
$rootScope.$broadcast('$stateChangeSuccess', to.self, toParams, from.self, fromParams);
|
||
|
|
||
|
return $state.current;
|
||
|
}, function (error) {
|
||
|
if ($state.transition !== transition) return TransitionSuperseded;
|
||
|
|
||
|
$state.transition = null;
|
||
|
$rootScope.$broadcast('$stateChangeError', to.self, toParams, from.self, fromParams, error);
|
||
|
|
||
|
return $q.reject(error);
|
||
|
});
|
||
|
|
||
|
return transition;
|
||
|
};
|
||
|
|
||
|
$state.is = function (stateOrName) {
|
||
|
return $state.$current === findState(stateOrName);
|
||
|
};
|
||
|
|
||
|
$state.includes = function (stateOrName) {
|
||
|
return $state.$current.includes[findState(stateOrName).name];
|
||
|
};
|
||
|
|
||
|
$state.href = function (stateOrName, params) {
|
||
|
var state = findState(stateOrName), nav = state.navigable;
|
||
|
if (!nav) throw new Error("State '" + state + "' is not navigable");
|
||
|
return nav.url.format(normalize(state.params, params || {}));
|
||
|
};
|
||
|
|
||
|
function resolveState(state, params, paramsAreFiltered, inherited, dst) {
|
||
|
// We need to track all the promises generated during the resolution process.
|
||
|
// The first of these is for the fully resolved parent locals.
|
||
|
var promises = [inherited];
|
||
|
|
||
|
// 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;
|
||
|
if (paramsAreFiltered) $stateParams = params;
|
||
|
else {
|
||
|
$stateParams = {};
|
||
|
forEach(state.params, function (name) {
|
||
|
$stateParams[name] = params[name];
|
||
|
});
|
||
|
}
|
||
|
var locals = { $stateParams: $stateParams };
|
||
|
|
||
|
// Resolves the values from an individual 'resolve' dependency spec
|
||
|
function resolve(deps, dst) {
|
||
|
forEach(deps, function (value, key) {
|
||
|
promises.push($q
|
||
|
.when(isString(value) ?
|
||
|
$injector.get(value) :
|
||
|
$injector.invoke(value, state.self, locals))
|
||
|
.then(function (result) {
|
||
|
dst[key] = result;
|
||
|
}));
|
||
|
});
|
||
|
}
|
||
|
|
||
|
// Resolve 'global' dependencies for the state, i.e. those not specific to a view.
|
||
|
// We're also including $stateParams in this; that we're 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.
|
||
|
var globals = dst.globals = { $stateParams: $stateParams };
|
||
|
resolve(state.resolve, globals);
|
||
|
globals.$$state = state; // Provide access to the state itself for internal use
|
||
|
|
||
|
// Resolve template and dependencies for all views.
|
||
|
forEach(state.views, function (view, name) {
|
||
|
// References to the controller (only instantiated at link time)
|
||
|
var $view = dst[name] = {
|
||
|
$$controller: view.controller
|
||
|
};
|
||
|
|
||
|
// Template
|
||
|
promises.push($q
|
||
|
.when($templateFactory.fromConfig(view, $stateParams, locals) || '')
|
||
|
.then(function (result) {
|
||
|
$view.$template = result;
|
||
|
}));
|
||
|
|
||
|
// View-local dependencies. If we've reused the state definition as the default
|
||
|
// view definition in .state(), we can end up with state.resolve === view.resolve.
|
||
|
// Avoid resolving everything twice in that case.
|
||
|
if (view.resolve !== state.resolve) resolve(view.resolve, $view);
|
||
|
});
|
||
|
|
||
|
// Once we've resolved all the dependencies for this state, merge
|
||
|
// in any inherited dependencies, and merge common state dependencies
|
||
|
// into the dependency set for each view. Finally return a promise
|
||
|
// for the fully popuplated state dependencies.
|
||
|
return $q.all(promises).then(function (values) {
|
||
|
merge(dst.globals, values[0].globals); // promises[0] === inherited
|
||
|
forEach(state.views, function (view, name) {
|
||
|
merge(dst[name], dst.globals);
|
||
|
});
|
||
|
return dst;
|
||
|
});
|
||
|
}
|
||
|
|
||
|
function normalize(keys, values) {
|
||
|
var normalized = {};
|
||
|
|
||
|
forEach(keys, function (name) {
|
||
|
var value = values[name];
|
||
|
normalized[name] = (value != null) ? String(value) : null;
|
||
|
});
|
||
|
return normalized;
|
||
|
}
|
||
|
|
||
|
function equalForKeys(a, b, keys) {
|
||
|
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;
|
||
|
}
|
||
|
|
||
|
return $state;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
angular.module('ui.state')
|
||
|
.value('$stateParams', {})
|
||
|
.provider('$state', $StateProvider);
|
||
|
|
||
|
|
||
|
$ViewDirective.$inject = ['$state', '$compile', '$controller', '$injector', '$anchorScroll'];
|
||
|
function $ViewDirective( $state, $compile, $controller, $injector, $anchorScroll) {
|
||
|
// Unfortunately there is no neat way to ask $injector if a service exists
|
||
|
var $animator; try { $animator = $injector.get('$animator'); } catch (e) { /* do nothing */ }
|
||
|
|
||
|
var directive = {
|
||
|
restrict: 'ECA',
|
||
|
terminal: true,
|
||
|
link: function(scope, element, attr) {
|
||
|
var viewScope, viewLocals,
|
||
|
name = attr[directive.name] || attr.name || '',
|
||
|
onloadExp = attr.onload || '',
|
||
|
animate = isDefined($animator) && $animator(scope, attr);
|
||
|
|
||
|
// Find the details of the parent view directive (if any) and use it
|
||
|
// to derive our own qualified view name, then hang our own details
|
||
|
// off the DOM so child directives can find it.
|
||
|
var parent = element.parent().inheritedData('$uiView');
|
||
|
if (name.indexOf('@') < 0) name = name + '@' + (parent ? parent.state.name : '');
|
||
|
var view = { name: name, state: null };
|
||
|
element.data('$uiView', view);
|
||
|
|
||
|
scope.$on('$stateChangeSuccess', function() { updateView(true); });
|
||
|
updateView(false);
|
||
|
|
||
|
function updateView(doAnimate) {
|
||
|
var locals = $state.$current && $state.$current.locals[name];
|
||
|
if (locals === viewLocals) return; // nothing to do
|
||
|
|
||
|
// Destroy previous view scope and remove content (if any)
|
||
|
if (viewScope) {
|
||
|
if (animate && doAnimate) animate.leave(element.contents(), element);
|
||
|
else element.html('');
|
||
|
|
||
|
viewScope.$destroy();
|
||
|
viewScope = null;
|
||
|
}
|
||
|
|
||
|
if (locals) {
|
||
|
viewLocals = locals;
|
||
|
view.state = locals.$$state;
|
||
|
|
||
|
var contents;
|
||
|
if (animate && doAnimate) {
|
||
|
contents = angular.element('<div></div>').html(locals.$template).contents();
|
||
|
animate.enter(contents, element);
|
||
|
} else {
|
||
|
element.html(locals.$template);
|
||
|
contents = element.contents();
|
||
|
}
|
||
|
|
||
|
var link = $compile(contents);
|
||
|
viewScope = scope.$new();
|
||
|
if (locals.$$controller) {
|
||
|
locals.$scope = viewScope;
|
||
|
var controller = $controller(locals.$$controller, locals);
|
||
|
element.children().data('$ngControllerController', controller);
|
||
|
}
|
||
|
link(viewScope);
|
||
|
viewScope.$emit('$viewContentLoaded');
|
||
|
viewScope.$eval(onloadExp);
|
||
|
|
||
|
// TODO: This seems strange, shouldn't $anchorScroll listen for $viewContentLoaded if necessary?
|
||
|
// $anchorScroll might listen on event...
|
||
|
$anchorScroll();
|
||
|
} else {
|
||
|
viewLocals = null;
|
||
|
view.state = null;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
return directive;
|
||
|
}
|
||
|
|
||
|
angular.module('ui.state').directive('uiView', $ViewDirective);
|
||
|
|
||
|
$RouteProvider.$inject = ['$stateProvider', '$urlRouterProvider'];
|
||
|
function $RouteProvider( $stateProvider, $urlRouterProvider) {
|
||
|
|
||
|
var routes = [];
|
||
|
|
||
|
onEnterRoute.$inject = ['$$state'];
|
||
|
function onEnterRoute( $$state) {
|
||
|
/*jshint validthis: true */
|
||
|
this.locals = $$state.locals.globals;
|
||
|
this.params = this.locals.$stateParams;
|
||
|
}
|
||
|
|
||
|
function onExitRoute() {
|
||
|
/*jshint validthis: true */
|
||
|
this.locals = null;
|
||
|
this.params = null;
|
||
|
}
|
||
|
|
||
|
this.when = when;
|
||
|
function when(url, route) {
|
||
|
/*jshint validthis: true */
|
||
|
if (route.redirectTo != null) {
|
||
|
// Redirect, configure directly on $urlRouterProvider
|
||
|
var redirect = route.redirectTo, handler;
|
||
|
if (isString(redirect)) {
|
||
|
handler = redirect; // leave $urlRouterProvider to handle
|
||
|
} else if (isFunction(redirect)) {
|
||
|
// Adapt to $urlRouterProvider API
|
||
|
handler = function (params, $location) {
|
||
|
return redirect(params, $location.path(), $location.search());
|
||
|
};
|
||
|
} else {
|
||
|
throw new Error("Invalid 'redirectTo' in when()");
|
||
|
}
|
||
|
$urlRouterProvider.when(url, handler);
|
||
|
} else {
|
||
|
// Regular route, configure as state
|
||
|
$stateProvider.state(inherit(route, {
|
||
|
parent: null,
|
||
|
name: 'route:' + encodeURIComponent(url),
|
||
|
url: url,
|
||
|
onEnter: onEnterRoute,
|
||
|
onExit: onExitRoute
|
||
|
}));
|
||
|
}
|
||
|
routes.push(route);
|
||
|
return this;
|
||
|
}
|
||
|
|
||
|
this.$get = $get;
|
||
|
$get.$inject = ['$state', '$rootScope', '$routeParams'];
|
||
|
function $get( $state, $rootScope, $routeParams) {
|
||
|
|
||
|
var $route = {
|
||
|
routes: routes,
|
||
|
params: $routeParams,
|
||
|
current: undefined
|
||
|
};
|
||
|
|
||
|
function stateAsRoute(state) {
|
||
|
return (state.name !== '') ? state : undefined;
|
||
|
}
|
||
|
|
||
|
$rootScope.$on('$stateChangeStart', function (ev, to, toParams, from, fromParams) {
|
||
|
$rootScope.$broadcast('$routeChangeStart', stateAsRoute(to), stateAsRoute(from));
|
||
|
});
|
||
|
|
||
|
$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
|
||
|
$route.current = stateAsRoute(to);
|
||
|
$rootScope.$broadcast('$routeChangeSuccess', stateAsRoute(to), stateAsRoute(from));
|
||
|
copy(toParams, $route.params);
|
||
|
});
|
||
|
|
||
|
$rootScope.$on('$stateChangeError', function (ev, to, toParams, from, fromParams, error) {
|
||
|
$rootScope.$broadcast('$routeChangeError', stateAsRoute(to), stateAsRoute(from), error);
|
||
|
});
|
||
|
|
||
|
return $route;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
angular.module('ui.compat')
|
||
|
.provider('$route', $RouteProvider)
|
||
|
.directive('ngView', $ViewDirective);
|
||
|
})(window, window.angular);
|