");
-}]);
+angular.module('templates-common', ['../unityeditor-components/src/components/alert/alert.tpl.html', '../unityeditor-components/src/components/checkbox/checkbox.tpl.html', '../unityeditor-components/src/components/progress/progress.tpl.html', '../unityeditor-components/src/components/switch/switch.tpl.html', '../unityeditor-components/src/components/wizard-progress/wizard-progress.tpl.html']);
angular.module("../unityeditor-components/src/components/alert/alert.tpl.html", []).run(["$templateCache", function ($templateCache) {
$templateCache.put("../unityeditor-components/src/components/alert/alert.tpl.html",
diff --git a/.Toolbar/vendor/airbrake-js-client/dist/client.js b/.Toolbar/vendor/airbrake-js-client/dist/client.js
deleted file mode 100644
index d75e5d9..0000000
--- a/.Toolbar/vendor/airbrake-js-client/dist/client.js
+++ /dev/null
@@ -1,693 +0,0 @@
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}(g.airbrakeJs || (g.airbrakeJs = {})).Client = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o ref1; i = ref <= ref1 ? ++j : --j) {
- if (this[i] === obj) {
- return i;
- }
- }
- return -1;
- };
-}
-
-
-
-},{}],3:[function(require,module,exports){
-var jsonifyNotice, truncate, truncateObj;
-
-truncate = require('./truncate');
-
-truncateObj = function(obj, n) {
- var dst, key;
- if (n == null) {
- n = 1000;
- }
- dst = {};
- for (key in obj) {
- dst[key] = truncate(obj[key], n = n);
- }
- return dst;
-};
-
-jsonifyNotice = function(notice, n, maxLength) {
- var err, s;
- if (n == null) {
- n = 1000;
- }
- if (maxLength == null) {
- maxLength = 64000;
- }
- while (true) {
- notice.params = truncateObj(notice.params, n = n);
- notice.environment = truncateObj(notice.environment, n = n);
- notice.session = truncateObj(notice.session, n = n);
- s = JSON.stringify(notice);
- if (s.length < maxLength) {
- return s;
- }
- if (n === 0) {
- break;
- }
- n = Math.floor(n / 2);
- }
- err = new Error("airbrake-js: cannot jsonify notice (length=" + s.length + " maxLength=" + maxLength + ")");
- err.params = {
- json: s.slice(0, +Math.floor(n / 2) + 1 || 9e9) + '...'
- };
- throw err;
-};
-
-module.exports = jsonifyNotice;
-
-
-
-},{"./truncate":6}],4:[function(require,module,exports){
-var merge;
-
-merge = function() {
- var dst, i, key, len, obj, objs;
- objs = Array.prototype.slice.call(arguments);
- dst = objs.shift() || {};
- for (i = 0, len = objs.length; i < len; i++) {
- obj = objs[i];
- for (key in obj) {
- if (Object.prototype.hasOwnProperty.call(obj, key)) {
- dst[key] = obj[key];
- }
- }
- }
- return dst;
-};
-
-module.exports = merge;
-
-
-
-},{}],5:[function(require,module,exports){
-var Promise;
-
-Promise = (function() {
- function Promise(executor) {
- var reject, resolve;
- this._onResolved = [];
- this._onRejected = [];
- resolve = (function(_this) {
- return function() {
- return _this.resolve.apply(_this, arguments);
- };
- })(this);
- reject = (function(_this) {
- return function() {
- return _this.reject.apply(_this, arguments);
- };
- })(this);
- if (executor != null) {
- executor(resolve, reject);
- }
- }
-
- Promise.prototype.then = function(onResolved, onRejected) {
- if (onResolved) {
- if (this._resolvedWith != null) {
- onResolved(this._resolvedWith);
- }
- this._onResolved.push(onResolved);
- }
- if (onRejected) {
- if (this._rejectedWith != null) {
- onRejected(this._resolvedWith);
- }
- this._onRejected.push(onRejected);
- }
- return this;
- };
-
- Promise.prototype["catch"] = function(onRejected) {
- if (this._rejectedWith != null) {
- onRejected(this._rejectedWith);
- }
- this._onRejected.push(onRejected);
- return this;
- };
-
- Promise.prototype.resolve = function() {
- var fn, i, len, ref;
- this._resolvedWith = arguments;
- ref = this._onResolved;
- for (i = 0, len = ref.length; i < len; i++) {
- fn = ref[i];
- fn.apply(this, this._resolvedWith);
- }
- return this;
- };
-
- Promise.prototype.reject = function() {
- var fn, i, len, ref;
- this._rejectedWith = arguments;
- ref = this._onRejected;
- for (i = 0, len = ref.length; i < len; i++) {
- fn = ref[i];
- fn.apply(this, this._rejectedWith);
- }
- return this;
- };
-
- return Promise;
-
-})();
-
-module.exports = Promise;
-
-
-
-},{}],6:[function(require,module,exports){
-var getAttr, truncate;
-
-getAttr = function(obj, attr) {
- var exc;
- try {
- return obj[attr];
- } catch (_error) {
- exc = _error;
- return void 0;
- }
-};
-
-truncate = function(value, n, depth) {
- var fn, getPath, keys, nn, seen;
- if (n == null) {
- n = 1000;
- }
- if (depth == null) {
- depth = 5;
- }
- nn = 0;
- keys = [];
- seen = [];
- getPath = function(value) {
- var i, index, j, path, ref;
- index = seen.indexOf(value);
- path = [keys[index]];
- for (i = j = ref = index; ref <= 0 ? j <= 0 : j >= 0; i = ref <= 0 ? ++j : --j) {
- if (seen[i] && getAttr(seen[i], path[0]) === value) {
- value = seen[i];
- path.unshift(keys[i]);
- }
- }
- return '~' + path.join('.');
- };
- fn = function(value, key, dd) {
- var dst, el, i, j, len, val;
- if (key == null) {
- key = '';
- }
- if (dd == null) {
- dd = 0;
- }
- nn++;
- if (nn > n) {
- return '[Truncated]';
- }
- if (value === null || value === void 0) {
- return value;
- }
- switch (typeof value) {
- case 'boolean':
- case 'number':
- case 'string':
- case 'function':
- return value;
- case 'object':
- break;
- default:
- return String(value);
- }
- if (value instanceof Boolean || value instanceof Number || value instanceof String || value instanceof Date || value instanceof RegExp) {
- return value;
- }
- if (seen.indexOf(value) >= 0) {
- return "[Circular " + (getPath(value)) + "]";
- }
- dd++;
- if (dd > depth) {
- return '[Truncated]';
- }
- keys.push(key);
- seen.push(value);
- nn--;
- if (Object.prototype.toString.apply(value) === '[object Array]') {
- dst = [];
- for (i = j = 0, len = value.length; j < len; i = ++j) {
- el = value[i];
- nn++;
- if (nn >= n) {
- break;
- }
- dst.push(fn(el, key = i, dd));
- }
- return dst;
- }
- dst = {};
- for (key in value) {
- if (!Object.prototype.hasOwnProperty.call(value, key)) {
- continue;
- }
- nn++;
- if (nn >= n) {
- break;
- }
- val = getAttr(value, key);
- if (val !== void 0) {
- dst[key] = fn(val, key = key, dd);
- }
- }
- return dst;
- };
- return fn(value);
-};
-
-module.exports = truncate;
-
-
-
-},{}],7:[function(require,module,exports){
-var processor, rules, typeMessageRe;
-
-rules = [
- {
- name: 'v8',
- re: /^\s*at\s(.+?)\s\((?:(?:(.+):(\d+):(\d+))|(.+))\)$/,
- fn: function(m) {
- return {
- "function": m[1],
- file: m[2] || m[5],
- line: m[3] && parseInt(m[3], 10) || 0,
- column: m[4] && parseInt(m[4], 10) || 0
- };
- }
- }, {
- name: 'firefox30',
- re: /^(.*)@(.+):(\d+):(\d+)$/,
- fn: function(m) {
- var evaledRe, file, func, mm;
- func = m[1];
- file = m[2];
- evaledRe = /^(\S+)\s(line\s\d+\s>\seval.*)$/;
- if (mm = file.match(evaledRe)) {
- if (func.length > 0) {
- func = func + ' ' + mm[2];
- } else {
- func = mm[2];
- }
- file = mm[1];
- }
- return {
- "function": func,
- file: file,
- line: parseInt(m[3], 10),
- column: parseInt(m[4], 10)
- };
- }
- }, {
- name: 'firefox14',
- re: /^(.*)@(.+):(\d+)$/,
- fn: function(m, i, e) {
- var column;
- if (i === 0) {
- column = e.columnNumber || 0;
- } else {
- column = 0;
- }
- return {
- "function": m[1],
- file: m[2],
- line: parseInt(m[3], 10),
- column: column
- };
- }
- }, {
- name: 'v8-short',
- re: /^\s*at\s(.+):(\d+):(\d+)$/,
- fn: function(m) {
- return {
- "function": '',
- file: m[1],
- line: parseInt(m[2], 10),
- column: parseInt(m[3], 10)
- };
- }
- }, {
- name: 'phantomjs',
- re: /^\s*at\s(.+):(\d+)$/,
- fn: function(m) {
- return {
- "function": '',
- file: m[1],
- line: parseInt(m[2], 10),
- column: 0
- };
- }
- }, {
- name: 'default',
- re: /.+/,
- fn: function(m) {
- return {
- "function": m[0],
- file: '',
- line: 0,
- column: 0
- };
- }
- }
-];
-
-typeMessageRe = /^\S+:\s.+$/;
-
-processor = function(e, cb) {
- var backtrace, i, j, k, len, len1, line, lines, m, msg, processorName, rule, stack, type, uncaughtExcRe;
- processorName = 'nostack';
- stack = e.stack || '';
- lines = stack.split('\n');
- backtrace = [];
- for (i = j = 0, len = lines.length; j < len; i = ++j) {
- line = lines[i];
- if (line === '') {
- continue;
- }
- for (k = 0, len1 = rules.length; k < len1; k++) {
- rule = rules[k];
- m = line.match(rule.re);
- if (!m) {
- continue;
- }
- processorName = rule.name;
- backtrace.push(rule.fn(m, i, e));
- break;
- }
- }
- if ((processorName === 'v8' || processorName === 'v8-short') && backtrace.length > 0 && backtrace[0]["function"].match(typeMessageRe)) {
- backtrace = backtrace.slice(1);
- }
- if (backtrace.length === 0 && ((e.fileName != null) || (e.lineNumber != null) || (e.columnNumber != null))) {
- backtrace.push({
- "function": '',
- file: e.fileName || '',
- line: parseInt(e.lineNumber, 10) || 0,
- column: parseInt(e.columnNumber, 10) || 0
- });
- }
- if (backtrace.length === 0 && ((e.filename != null) || (e.lineno != null) || (e.column != null) || (e.colno != null))) {
- backtrace.push({
- "function": '',
- file: e.filename || '',
- line: parseInt(e.lineno, 10) || 0,
- column: parseInt(e.column || e.colno, 10) || 0
- });
- }
- if (e.message != null) {
- msg = e.message;
- } else {
- msg = String(e);
- }
- if ((e.name != null) && e.name !== '') {
- type = e.name;
- msg = type + ': ' + msg;
- } else {
- uncaughtExcRe = /^Uncaught\s(.+?):\s.+$/;
- m = msg.match(uncaughtExcRe);
- if (m) {
- type = m[1];
- } else {
- type = '';
- }
- }
- return cb(processorName, {
- 'type': type,
- 'message': msg,
- 'backtrace': backtrace
- });
-};
-
-module.exports = processor;
-
-
-
-},{}],8:[function(require,module,exports){
-(function (global){
-var cbCount, jsonifyNotice, report;
-
-jsonifyNotice = require('../internal/jsonify_notice');
-
-cbCount = 0;
-
-report = function(notice, opts, promise) {
- var cbName, document, head, payload, removeScript, script, url;
- cbCount++;
- cbName = "airbrakeCb" + String(cbCount);
- global[cbName] = function(resp) {
- var _;
- notice.id = resp.id;
- promise.resolve(notice);
- try {
- return delete global[cbName];
- } catch (_error) {
- _ = _error;
- return global[cbName] = void 0;
- }
- };
- payload = encodeURIComponent(jsonifyNotice(notice));
- url = opts.host + "/api/v3/projects/" + opts.projectId + "/create-notice?key=" + opts.projectKey + "&callback=" + cbName + "&body=" + payload;
- document = global.document;
- head = document.getElementsByTagName('head')[0];
- script = document.createElement('script');
- script.src = url;
- removeScript = function() {
- return head.removeChild(script);
- };
- script.onload = removeScript;
- script.onerror = removeScript;
- return head.appendChild(script);
-};
-
-module.exports = report;
-
-
-
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"../internal/jsonify_notice":3}],9:[function(require,module,exports){
-(function (global){
-var jsonifyNotice, report;
-
-jsonifyNotice = require('../internal/jsonify_notice');
-
-report = function(notice, opts, promise) {
- var payload, req, url;
- url = opts.host + "/api/v3/projects/" + opts.projectId + "/create-notice?key=" + opts.projectKey;
- payload = jsonifyNotice(notice);
- req = new global.XMLHttpRequest();
- req.open('POST', url, true);
- req.send(payload);
- return req.onreadystatechange = function() {
- var resp;
- if (req.readyState === 4 && req.status === 200) {
- resp = JSON.parse(req.responseText);
- notice.id = resp.id;
- return promise.resolve(notice);
- }
- };
-};
-
-module.exports = report;
-
-
-
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"../internal/jsonify_notice":3}]},{},[1])(1)
-});
\ No newline at end of file
diff --git a/.Toolbar/vendor/angular-animate/angular-animate.js b/.Toolbar/vendor/angular-animate/angular-animate.js
deleted file mode 100644
index 42b03e0..0000000
--- a/.Toolbar/vendor/angular-animate/angular-animate.js
+++ /dev/null
@@ -1,3708 +0,0 @@
-/**
- * @license AngularJS v1.4.0
- * (c) 2010-2015 Google, Inc. http://angularjs.org
- * License: MIT
- */
-(function(window, angular, undefined) {'use strict';
-
-/* jshint ignore:start */
-var noop = angular.noop;
-var extend = angular.extend;
-var jqLite = angular.element;
-var forEach = angular.forEach;
-var isArray = angular.isArray;
-var isString = angular.isString;
-var isObject = angular.isObject;
-var isUndefined = angular.isUndefined;
-var isDefined = angular.isDefined;
-var isFunction = angular.isFunction;
-var isElement = angular.isElement;
-
-var ELEMENT_NODE = 1;
-var COMMENT_NODE = 8;
-
-var NG_ANIMATE_CLASSNAME = 'ng-animate';
-var NG_ANIMATE_CHILDREN_DATA = '$$ngAnimateChildren';
-
-var isPromiseLike = function(p) {
- return p && p.then ? true : false;
-}
-
-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 [];
- break;
-
- 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));
- break;
- }
- }
-
- 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 mergeAnimationOptions(element, target, newOptions) {
- var toAdd = (target.addClass || '') + ' ' + (newOptions.addClass || '');
- var toRemove = (target.removeClass || '') + ' ' + (newOptions.removeClass || '');
- var classes = resolveElementClasses(element.attr('class'), toAdd, toRemove);
-
- extend(target, newOptions);
-
- if (classes.addClass) {
- target.addClass = classes.addClass;
- } else {
- target.addClass = null;
- }
-
- if (classes.removeClass) {
- target.removeClass = classes.removeClass;
- } else {
- target.removeClass = null;
- }
-
- 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];
- } else if (val === REMOVE_CLASS) {
- prop = 'removeClass';
- allow = existing[klass];
- }
- 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 angular.element) ? element[0] : element;
-}
-
-var $$rAFSchedulerFactory = ['$$rAF', function($$rAF) {
- var tickQueue = [];
- var 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
- tickQueue.push([].concat(tasks));
- nextTick();
- }
-
- /* waitUntilQuiet does two things:
- * 1. It will run the FINAL `fn` value only when an uncancelled 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 (!tickQueue.length) return;
-
- var updatedQueue = [];
- for (var i = 0; i < tickQueue.length; i++) {
- var innerQueue = tickQueue[i];
- runNextTask(innerQueue);
- if (innerQueue.length) {
- updatedQueue.push(innerQueue);
- }
- }
- tickQueue = updatedQueue;
-
- if (!cancelFn) {
- $$rAF(function() {
- if (!cancelFn) nextTick();
- });
- }
- }
-
- function runNextTask(tasks) {
- var nextTask = tasks.shift();
- nextTask();
- }
-}];
-
-var $$AnimateChildrenDirective = [function() {
- return function(scope, element, attrs) {
- var val = attrs.ngAnimateChildren;
- if (angular.isString(val) && val.length === 0) { //empty attribute
- element.data(NG_ANIMATE_CHILDREN_DATA, true);
- } else {
- attrs.$observe('ngAnimateChildren', function(value) {
- value = value === 'on' || value === 'true';
- element.data(NG_ANIMATE_CHILDREN_DATA, value);
- });
- }
- };
-}];
-
-/**
- * @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).
- *
- * ## Usage
- * 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 Angular. 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
- *
- *
- * This element will go BOOM
- *
- *
- * ```
- *
- * 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 stlyes 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 [animation code above](#usage) 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.)
- * * `easing` - The CSS easing value that will be applied to the transition or keyframe animation (or both).
- * * `transition` - The raw CSS transition style that will be used (e.g. `1s linear all`).
- * * `keyframe` - 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 occuring on the classes being added and removed.)
- *
- * @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.
- */
-
-// 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 ELAPSED_TIME_MAX_DECIMAL_PLACES = 3;
-var CLOSING_TIME_BUFFER = 1.5;
-var ONE_SECOND = 1000;
-var BASE_TEN = 10;
-
-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 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 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 zegative 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 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 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 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++;
- }
- }
- };
-}
-
-var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
- var gcsLookup = createLocalCacheLookup();
- var gcsStaggerLookup = createLocalCacheLookup();
-
- this.$get = ['$window', '$$jqLite', '$$AnimateRunner', '$timeout',
- '$document', '$sniffer', '$$rAFScheduler',
- function($window, $$jqLite, $$AnimateRunner, $timeout,
- $document, $sniffer, $$rAFScheduler) {
-
- 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 interal 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 bod = getDomNode($document).body;
- var rafWaitQueue = [];
- function waitUntilQuiet(callback) {
- rafWaitQueue.push(callback);
- $$rAFScheduler.waitUntilQuiet(function() {
- gcsLookup.flush();
- gcsStaggerLookup.flush();
-
- //the line below will force the browser to perform a repaint so
- //that all the animated elements within the animation frame will
- //be properly updated and drawn on screen. This is required to
- //ensure that the preparation animation is properly flushed so that
- //the active state picks up from there. DO NOT REMOVE THIS LINE.
- //DO NOT OPTIMIZE THIS LINE. THE MINIFIER WILL REMOVE IT OTHERWISE WHICH
- //WILL RESULT IN AN UNPREDICTABLE BUG THAT IS VERY HARD TO TRACK DOWN AND
- //WILL TAKE YEARS AWAY FROM YOUR LIFE.
- var width = bod.offsetWidth + 1;
-
- // 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](width);
- }
- rafWaitQueue.length = 0;
- });
- }
-
- return init;
-
- 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;
- }
-
- function init(element, options) {
- var node = getDomNode(element);
- options = prepareAnimationOptions(options);
-
- 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;
-
- 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, 'ng-', true);
- } else if (method) {
- structuralClassName = method;
- }
-
- if (options.addClass) {
- addRemoveClassName += pendClasses(options.addClass, '-add');
- }
-
- if (options.removeClass) {
- if (addRemoveClassName.length) {
- addRemoveClassName += ' ';
- }
- addRemoveClassName += pendClasses(options.removeClass, '-remove');
- }
-
- // 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);
- addRemoveClassName = '';
- }
-
- var setupClasses = [structuralClassName, addRemoveClassName].join(' ').trim();
- var fullClassName = classes + ' ' + setupClasses;
- var activeClasses = pendClasses(setupClasses, '-active');
- var hasToStyles = styles.to && Object.keys(styles.to).length > 0;
-
- // there is no way we can trigger an animation since no styles and
- // no classes are being applied which would then trigger a transition
- if (!hasToStyles && !setupClasses) {
- 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, setupClasses, cacheKey, DETECT_STAGGER_CSS_PROPERTIES);
- }
-
- $$jqLite.addClass(element, setupClasses);
-
- 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) {
- 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();
- }
-
- // 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;
- }
-
- applyAnimationFromStyles(element, options);
- if (!flags.blockTransition) {
- blockTransitions(node, false);
- }
-
- applyBlocking(maxDuration);
-
- // 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) { // jshint ignore:line
- // if the promise has been called already then we shouldn't close
- // the animation again
- if (animationClosed || (animationCompleted && animationPaused)) return;
- animationClosed = true;
- animationPaused = false;
-
- $$jqLite.removeClass(element, setupClasses);
- $$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);
-
- // 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 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
- });
-
- close();
-
- return {
- $$willAnimate: false,
- start: function() {
- return runner;
- },
- end: endFn
- };
- }
-
- function start() {
- if (animationClosed) return;
-
- var startTime, events = [];
-
- // 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);
- animationPaused
- ? temporaryStyles.push(value)
- : removeFromArray(temporaryStyles, value);
- }
- } else if (animationPaused && playAnimation) {
- animationPaused = false;
- close();
- }
- };
-
- // checking the stagger duration prevents an accidently 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 intential 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.className + ' ' + setupClasses;
- 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.applyTransitionDelay || flags.applyAnimationDelay) {
- relativeDelay = typeof options.delay !== "boolean" && truthyTimingValue(options.delay)
- ? parseFloat(options.delay)
- : relativeDelay;
-
- maxDelay = Math.max(relativeDelay, 0);
-
- var delayStyle;
- if (flags.applyTransitionDelay) {
- timings.transitionDelay = relativeDelay;
- delayStyle = getCssDelayStyle(relativeDelay);
- temporaryStyles.push(delayStyle);
- node.style[delayStyle[0]] = delayStyle[1];
- }
-
- if (flags.applyAnimationDelay) {
- 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();
- element.on(events.join(' '), onAnimationProgress);
- $timeout(onAnimationExpired, maxDelayTime + CLOSING_TIME_BUFFER * maxDurationTime);
-
- applyAnimationToStyles(element, options);
- }
-
- function onAnimationExpired() {
- // although an expired animation is a failed animation, getting to
- // this outcome is very easy if the CSS code screws up. Therefore we
- // should still continue normally as if the animation completed correctly.
- close();
- }
-
- function onAnimationProgress(event) {
- event.stopPropagation();
- var ev = event.originalEvent || event;
- var timeStamp = ev.$manualTimeStamp || ev.timeStamp || 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 animations 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();
- }
- }
- }
- }
- }];
-}];
-
-var $$AnimateCssDriverProvider = ['$$animationProvider', 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';
-
- this.$get = ['$animateCss', '$rootScope', '$$AnimateRunner', '$rootElement', '$document', '$sniffer',
- function($animateCss, $rootScope, $$AnimateRunner, $rootElement, $document, $sniffer) {
-
- // only browsers that support these properties can render animations
- if (!$sniffer.animations && !$sniffer.transitions) return noop;
-
- var bodyNode = getDomNode($document).body;
- var rootNode = getDomNode($rootElement);
-
- var rootBodyElement = jqLite(bodyNode.parentNode === rootNode ? bodyNode : rootNode);
-
- 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 coods 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);
- var toAnimation = prepareRegularAnimation(to);
-
- 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) {
- // structural animations ensure that the CSS classes are always applied
- // before the detection starts.
- options.structural = 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
- options.event = animationDetails.event;
- if (options.event === 'leave') {
- options.onDone = options.domOperation;
- }
- } else {
- options.event = null;
- }
-
- 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', function($animateProvider) {
- this.$get = ['$injector', '$$AnimateRunner', '$$rAFMutex', '$$jqLite',
- function($injector, $$AnimateRunner, $$rAFMutex, $$jqLite) {
-
- var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
- // $animateJs(element, 'enter');
- return function(element, event, classes, options) {
- // 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);
- }
-
- return {
- start: function() {
- 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);
- });
- }
-
- var animationClosed = false;
- var runner = new $$AnimateRunner({
- end: function() {
- endAnimations();
- },
- cancel: function() {
- endAnimations(true);
- }
- });
-
- $$AnimateRunner.chain(chain, onComplete);
- return runner;
-
- function onComplete(success) {
- animationClosed = true;
- applyOptions();
- applyAnimationStyles(element, options);
- 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());
- });
- }
-
- runners.length ? $$AnimateRunner.all(runners, callback) : callback();
-
- return function endFn(reject) {
- forEach(runners, function(runner) {
- reject ? runner.cancel() : 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', 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', function($animateProvider) {
- var PRE_DIGEST_STATE = 1;
- var RUNNING_STATE = 2;
-
- var rules = this.rules = {
- skip: [],
- cancel: [],
- join: []
- };
-
- function isAllowed(ruleType, element, currentAnimation, previousAnimation) {
- return rules[ruleType].some(function(fn) {
- return fn(element, currentAnimation, previousAnimation);
- });
- }
-
- function hasAnimationClasses(options, and) {
- options = options || {};
- var a = (options.addClass || '').length > 0;
- var b = (options.removeClass || '').length > 0;
- return and ? a && b : a || b;
- }
-
- rules.join.push(function(element, newAnimation, currentAnimation) {
- // if the new animation is class-based then we can just tack that on
- return !newAnimation.structural && hasAnimationClasses(newAnimation.options);
- });
-
- rules.skip.push(function(element, 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.options);
- });
-
- rules.skip.push(function(element, 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(element, newAnimation, currentAnimation) {
- // if there is a current animation then skip the class-based animation
- return currentAnimation.structural && !newAnimation.structural;
- });
-
- rules.cancel.push(function(element, newAnimation, currentAnimation) {
- // there can never be two structural animations running at the same time
- return currentAnimation.structural && newAnimation.structural;
- });
-
- rules.cancel.push(function(element, 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(element, newAnimation, currentAnimation) {
- var nO = newAnimation.options;
- var cO = currentAnimation.options;
-
- // if the exact same CSS class is added/removed then it's safe to cancel it
- return (nO.addClass && nO.addClass === cO.removeClass) || (nO.removeClass && nO.removeClass === cO.addClass);
- });
-
- this.$get = ['$$rAF', '$rootScope', '$rootElement', '$document', '$$HashMap',
- '$$animation', '$$AnimateRunner', '$templateRequest', '$$jqLite',
- function($$rAF, $rootScope, $rootElement, $document, $$HashMap,
- $$animation, $$AnimateRunner, $templateRequest, $$jqLite) {
-
- var activeAnimationsLookup = new $$HashMap();
- var disabledElementsLookup = new $$HashMap();
-
- var animationsEnabled = null;
-
- // 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 bodyElement = jqLite($document[0].body);
-
- var callbackRegistry = {};
-
- // remember that the classNameFilter is set during the provider/config
- // stage therefore we can optimize here and setup a helper function
- var classNameFilter = $animateProvider.classNameFilter();
- var isAnimatableClassName = !classNameFilter
- ? function() { return true; }
- : function(className) {
- return classNameFilter.test(className);
- };
-
- var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
-
- function normalizeAnimationOptions(element, options) {
- return mergeAnimationOptions(element, options, {});
- }
-
- function findCallbacks(element, event) {
- var targetNode = getDomNode(element);
-
- var matches = [];
- var entries = callbackRegistry[event];
- if (entries) {
- forEach(entries, function(entry) {
- if (entry.node.contains(targetNode)) {
- matches.push(entry.callback);
- }
- });
- }
-
- return matches;
- }
-
- function triggerCallback(event, element, phase, data) {
- $$rAF(function() {
- forEach(findCallbacks(element, event), function(callback) {
- callback(element, phase, data);
- });
- });
- }
-
- return {
- on: function(event, container, callback) {
- var node = extractElementNode(container);
- callbackRegistry[event] = callbackRegistry[event] || [];
- callbackRegistry[event].push({
- node: node,
- callback: callback
- });
- },
-
- off: function(event, container, callback) {
- var entries = callbackRegistry[event];
- if (!entries) return;
-
- callbackRegistry[event] = arguments.length === 1
- ? null
- : filterFromRegistry(entries, container, callback);
-
- 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;
- });
- }
- },
-
- 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
- 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);
- var recordExists = disabledElementsLookup.get(node);
-
- if (argCount === 1) {
- // (element) - Element getter
- bool = !recordExists;
- } else {
- // (element, bool) - Element setter
- bool = !!bool;
- if (!bool) {
- disabledElementsLookup.put(node, true);
- } else if (recordExists) {
- disabledElementsLookup.remove(node);
- }
- }
- }
- }
-
- return bool;
- }
- };
-
- function queueAnimation(element, event, options) {
- var node, parent;
- element = stripCommentsFromElement(element);
- if (element) {
- node = getDomNode(element);
- parent = element.parent();
- }
-
- 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();
-
- // there are situations where a directive issues an animation for
- // a jqLite wrapper that contains only comment nodes... If this
- // happens then there is no way we can perform an animation
- if (!node) {
- close();
- return runner;
- }
-
- if (isArray(options.addClass)) {
- options.addClass = options.addClass.join(' ');
- }
-
- if (isArray(options.removeClass)) {
- options.removeClass = options.removeClass.join(' ');
- }
-
- if (options.from && !isObject(options.from)) {
- options.from = null;
- }
-
- if (options.to && !isObject(options.to)) {
- options.to = null;
- }
-
- var className = [node.className, options.addClass, options.removeClass].join(' ');
- if (!isAnimatableClassName(className)) {
- close();
- return runner;
- }
-
- var isStructural = ['enter', 'move', 'leave'].indexOf(event) >= 0;
-
- // this is a hard disable of all animations for the application or on
- // the element itself, therefore there is no need to continue further
- // past this point if not enabled
- var skipAnimations = !animationsEnabled || 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(element, parent, event);
- }
-
- if (skipAnimations) {
- close();
- return runner;
- }
-
- if (isStructural) {
- closeChildAnimations(element);
- }
-
- var newAnimation = {
- structural: isStructural,
- element: element,
- event: event,
- close: close,
- options: options,
- runner: runner
- };
-
- if (hasExistingAnimation) {
- var skipAnimationFlag = isAllowed('skip', element, newAnimation, existingAnimation);
- if (skipAnimationFlag) {
- if (existingAnimation.state === RUNNING_STATE) {
- close();
- return runner;
- } else {
- mergeAnimationOptions(element, existingAnimation.options, options);
- return existingAnimation.runner;
- }
- }
-
- var cancelAnimationFlag = isAllowed('cancel', element, 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 existing animation options into this new follow-up animation
- mergeAnimationOptions(element, newAnimation.options, existingAnimation.options);
- }
- } 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', element, newAnimation, existingAnimation);
- if (joinAnimationFlag) {
- if (existingAnimation.state === RUNNING_STATE) {
- normalizeAnimationOptions(element, options);
- } else {
- event = newAnimation.event = existingAnimation.event;
- options = mergeAnimationOptions(element, existingAnimation.options, newAnimation.options);
- return 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
- normalizeAnimationOptions(element, options);
- }
-
- // 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.options);
- }
-
- if (!isValidAnimation) {
- close();
- clearElementAnimationState(element);
- return runner;
- }
-
- if (isStructural) {
- closeParentClassBasedAnimations(parent);
- }
-
- // the counter keeps track of cancelled animations
- var counter = (existingAnimation.counter || 0) + 1;
- newAnimation.counter = counter;
-
- markElementAnimationState(element, PRE_DIGEST_STATE, newAnimation);
-
- $rootScope.$$postDigest(function() {
- 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.options));
-
- // 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(element);
- }
-
- 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.options, true)
- ? 'setClass'
- : animationDetails.event;
-
- if (animationDetails.structural) {
- closeParentClassBasedAnimations(parentElement);
- }
-
- markElementAnimationState(element, RUNNING_STATE);
- var realRunner = $$animation(element, event, animationDetails.options);
- realRunner.done(function(status) {
- close(!status);
- var animationDetails = activeAnimationsLookup.get(node);
- if (animationDetails && animationDetails.counter === counter) {
- clearElementAnimationState(getDomNode(element));
- }
- notifyProgress(runner, event, 'close', {});
- });
-
- // this will update the runner's flow-control events based on
- // the `realRunner` object.
- runner.setHost(realRunner);
- notifyProgress(runner, event, 'start', {});
- });
-
- return runner;
-
- function notifyProgress(runner, event, phase, data) {
- triggerCallback(event, element, phase, data);
- runner.progress(event, phase, data);
- }
-
- function close(reject) { // jshint ignore:line
- applyAnimationClasses(element, options);
- applyAnimationStyles(element, options);
- options.domOperation();
- runner.complete(!reject);
- }
- }
-
- function closeChildAnimations(element) {
- var node = getDomNode(element);
- var children = node.querySelectorAll('[' + NG_ANIMATE_ATTR_NAME + ']');
- forEach(children, function(child) {
- var state = parseInt(child.getAttribute(NG_ANIMATE_ATTR_NAME));
- var animationDetails = activeAnimationsLookup.get(child);
- switch (state) {
- case RUNNING_STATE:
- animationDetails.runner.end();
- /* falls through */
- case PRE_DIGEST_STATE:
- if (animationDetails) {
- activeAnimationsLookup.remove(child);
- }
- break;
- }
- });
- }
-
- function clearElementAnimationState(element) {
- var node = getDomNode(element);
- node.removeAttribute(NG_ANIMATE_ATTR_NAME);
- activeAnimationsLookup.remove(node);
- }
-
- function isMatchingElement(nodeOrElmA, nodeOrElmB) {
- return getDomNode(nodeOrElmA) === getDomNode(nodeOrElmB);
- }
-
- function closeParentClassBasedAnimations(startingElement) {
- var parentNode = getDomNode(startingElement);
- do {
- if (!parentNode || parentNode.nodeType !== ELEMENT_NODE) break;
-
- var animationDetails = activeAnimationsLookup.get(parentNode);
- if (animationDetails) {
- examineParentAnimation(parentNode, animationDetails);
- }
-
- parentNode = parentNode.parentNode;
- } while (true);
-
- // since animations are detected from CSS classes, we need to flush all parent
- // class-based animations so that the parent classes are all present for child
- // animations to properly function (otherwise any CSS selectors may not work)
- function examineParentAnimation(node, animationDetails) {
- // enter/leave/move always have priority
- if (animationDetails.structural || !hasAnimationClasses(animationDetails.options)) return;
-
- if (animationDetails.state === RUNNING_STATE) {
- animationDetails.runner.end();
- }
- clearElementAnimationState(node);
- }
- }
-
- function areAnimationsAllowed(element, parentElement, event) {
- var bodyElementDetected = false;
- var rootElementDetected = false;
- var parentAnimationDetected = false;
- var animateChildren;
-
- var parentHost = element.data(NG_ANIMATE_PIN_DATA);
- if (parentHost) {
- parentElement = parentHost;
- }
-
- while (parentElement && parentElement.length) {
- if (!rootElementDetected) {
- // angular 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
- rootElementDetected = isMatchingElement(parentElement, $rootElement);
- }
-
- var parentNode = parentElement[0];
- 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) {
- parentAnimationDetected = details.structural || disabledElementsLookup.get(parentNode);
- }
-
- if (isUndefined(animateChildren) || animateChildren === true) {
- var value = parentElement.data(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 (!rootElementDetected) {
- // angular 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
- rootElementDetected = isMatchingElement(parentElement, $rootElement);
- if (!rootElementDetected) {
- parentHost = parentElement.data(NG_ANIMATE_PIN_DATA);
- if (parentHost) {
- parentElement = parentHost;
- }
- }
- }
-
- if (!bodyElementDetected) {
- // we also need to ensure that the element is or will be apart of the body element
- // otherwise it is pointless to even issue an animation to be rendered
- bodyElementDetected = isMatchingElement(parentElement, bodyElement);
- }
-
- parentElement = parentElement.parent();
- }
-
- var allowAnimation = !parentAnimationDetected || animateChildren;
- return allowAnimation && rootElementDetected && bodyElementDetected;
- }
-
- function markElementAnimationState(element, state, details) {
- details = details || {};
- details.state = state;
-
- var node = getDomNode(element);
- node.setAttribute(NG_ANIMATE_ATTR_NAME, state);
-
- var oldValue = activeAnimationsLookup.get(node);
- var newValue = oldValue
- ? extend(oldValue, details)
- : details;
- activeAnimationsLookup.put(node, newValue);
- }
- }];
-}];
-
-var $$rAFMutexFactory = ['$$rAF', function($$rAF) {
- return function() {
- var passed = false;
- $$rAF(function() {
- passed = true;
- });
- return function(fn) {
- passed ? fn() : $$rAF(fn);
- };
- };
-}];
-
-var $$AnimateRunnerFactory = ['$q', '$$rAFMutex', function($q, $$rAFMutex) {
- var INITIAL_STATE = 0;
- var DONE_PENDING_STATE = 1;
- var DONE_COMPLETE_STATE = 2;
-
- AnimateRunner.chain = function(chain, callback) {
- var index = 0;
-
- next();
- function next() {
- if (index === chain.length) {
- callback(true);
- return;
- }
-
- chain[index](function(response) {
- if (response === false) {
- callback(false);
- return;
- }
- index++;
- next();
- });
- }
- };
-
- AnimateRunner.all = function(runners, callback) {
- var count = 0;
- var status = true;
- forEach(runners, function(runner) {
- runner.done(onProgress);
- });
-
- function onProgress(response) {
- status = status && response;
- if (++count === runners.length) {
- callback(status);
- }
- }
- };
-
- function AnimateRunner(host) {
- this.setHost(host);
-
- this._doneCallbacks = [];
- this._runInAnimationFrame = $$rAFMutex();
- this._state = 0;
- }
-
- AnimateRunner.prototype = {
- setHost: function(host) {
- this.host = host || {};
- },
-
- done: function(fn) {
- if (this._state === DONE_COMPLETE_STATE) {
- fn();
- } else {
- this._doneCallbacks.push(fn);
- }
- },
-
- progress: noop,
-
- getPromise: function() {
- if (!this.promise) {
- var self = this;
- this.promise = $q(function(resolve, reject) {
- self.done(function(status) {
- status === false ? reject() : resolve();
- });
- });
- }
- return this.promise;
- },
-
- then: function(resolveHandler, rejectHandler) {
- return this.getPromise().then(resolveHandler, rejectHandler);
- },
-
- 'catch': function(handler) {
- return this.getPromise()['catch'](handler);
- },
-
- 'finally': function(handler) {
- return this.getPromise()['finally'](handler);
- },
-
- pause: function() {
- if (this.host.pause) {
- this.host.pause();
- }
- },
-
- resume: function() {
- if (this.host.resume) {
- this.host.resume();
- }
- },
-
- end: function() {
- if (this.host.end) {
- this.host.end();
- }
- this._resolve(true);
- },
-
- cancel: function() {
- if (this.host.cancel) {
- this.host.cancel();
- }
- this._resolve(false);
- },
-
- complete: function(response) {
- var self = this;
- if (self._state === INITIAL_STATE) {
- self._state = DONE_PENDING_STATE;
- self._runInAnimationFrame(function() {
- self._resolve(response);
- });
- }
- },
-
- _resolve: function(response) {
- if (this._state !== DONE_COMPLETE_STATE) {
- forEach(this._doneCallbacks, function(fn) {
- fn(response);
- });
- this._doneCallbacks.length = 0;
- this._state = DONE_COMPLETE_STATE;
- }
- }
- };
-
- return AnimateRunner;
-}];
-
-var $$AnimationProvider = ['$animateProvider', 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', '$$rAFScheduler',
- function($$jqLite, $rootScope, $injector, $$AnimateRunner, $$rAFScheduler) {
-
- var animationQueue = [];
- var applyAnimationClasses = applyAnimationClassesFactory($$jqLite);
-
- var totalPendingClassBasedAnimations = 0;
- var totalActiveClassBasedAnimations = 0;
- var classBasedAnimationsQueue = [];
-
- // 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 classBasedIndex;
- if (!isStructural) {
- classBasedIndex = totalPendingClassBasedAnimations;
- totalPendingClassBasedAnimations += 1;
- }
-
- animationQueue.push({
- // this data is used by the postDigest code and passed into
- // the driver step function
- element: element,
- classes: classes,
- event: event,
- classBasedIndex: classBasedIndex,
- 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() {
- totalActiveClassBasedAnimations = totalPendingClassBasedAnimations;
- totalPendingClassBasedAnimations = 0;
- classBasedAnimationsQueue.length = 0;
-
- 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);
- }
- });
-
- // now any future animations will be in another postDigest
- animationQueue.length = 0;
-
- forEach(groupAnimations(animations), function(animationEntry) {
- if (animationEntry.structural) {
- triggerAnimationStart();
- } else {
- classBasedAnimationsQueue.push({
- node: getDomNode(animationEntry.element),
- fn: triggerAnimationStart
- });
-
- if (animationEntry.classBasedIndex === totalActiveClassBasedAnimations - 1) {
- // 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.
- classBasedAnimationsQueue = classBasedAnimationsQueue.sort(function(a,b) {
- return b.node.contains(a.node);
- }).map(function(entry) {
- return entry.fn;
- });
-
- $$rAFScheduler(classBasedAnimationsQueue);
- }
- }
-
- 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);
- }
- }
- });
- });
-
- 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 effictively 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];
- if (!$injector.has(driverName)) continue; // TODO(matsko): remove this check
-
- 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);
- }
- }
-
- function updateAnimationRunners(animation, newRunner) {
- if (animation.from && animation.to) {
- update(animation.from.element);
- update(animation.to.element);
- } else {
- update(animation.element);
- }
-
- function update(element) {
- getRunner(element).setHost(newRunner);
- }
- }
-
- function handleDestroyedElement() {
- var runner = getRunner(element);
- if (runner && (event !== 'leave' || !options.$$domOperationFired)) {
- runner.end();
- }
- }
-
- function close(rejected) { // jshint ignore:line
- 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);
- }
- };
- }];
-}];
-
-/* global angularAnimateModule: true,
-
- $$rAFMutexFactory,
- $$rAFSchedulerFactory,
- $$AnimateChildrenDirective,
- $$AnimateRunnerFactory,
- $$AnimateQueueProvider,
- $$AnimationProvider,
- $AnimateCssProvider,
- $$AnimateCssDriverProvider,
- $$AnimateJsProvider,
- $$AnimateJsDriverProvider,
-*/
-
-/**
- * @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` then the animation hooks are enabled for an Angular 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:ngRepeat#animations ngRepeat} | enter, leave and move |
- * | {@link ngRoute.directive:ngView#animations ngView} | enter and leave |
- * | {@link ng.directive:ngInclude#animations ngInclude} | enter and leave |
- * | {@link ng.directive:ngSwitch#animations ngSwitch} | enter and leave |
- * | {@link ng.directive:ngIf#animations ngIf} | enter and leave |
- * | {@link ng.directive:ngClass#animations ngClass} | add and remove (the CSS class(es) present) |
- * | {@link ng.directive:ngShow#animations ngShow} & {@link ng.directive:ngHide#animations ngHide} | add and remove (the ng-hide class value) |
- * | {@link ng.directive:form#animation-hooks form} & {@link ng.directive:ngModel#animation-hooks ngModel} | add and remove (dirty, pristine, valid, invalid & all other validations) |
- * | {@link module:ngMessages#animations ngMessages} | add and remove (ng-active & ng-inactive) |
- * | {@link module:ngMessages#animations ngMessage} | enter and leave |
- *
- * (More information can be found by visiting each the documentation associated with each directive.)
- *
- * ## 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 Angular when an the underlying directive performs an operation.
- *
- * The example below shows how an `enter` animation can be made possible on a element using `ng-if`:
- *
- * ```html
- *
- * Fade me in out
- *
- *
- *
- * ```
- *
- * 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 starting 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
- *
- * Show and hide me
- *
- *
- *
- *
- * ```
- *
- * 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
- *
- * Highlight this box
- *
- *
- *
- *
- * ```
- *
- * 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;
- *
- * /* in case the stagger doesn't work then the duration value
- * must be set to 0 to avoid an accidental CSS inheritance */
- * transition-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.)
- *
- *
- * ## 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 ainmation.
- *
- * Let's see an example of a enter/leave animation using `ngRepeat`:
- *
- * ```html
- *
- * {{ item }}
- *
- * ```
- *
- * 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 angular
- * // 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
- *
- * this box is moody
- *
- *
- *
- *
- * ```
- *
- * ```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 Angular,
- * defining CSS and JS animations to work off of the same CSS class will not work anymore. Therefore example below will only result in **JS animations taking
- * charge of the animation**:
- *
- * ```html
- *
- * Slide in and out
- *
- * ```
- *
- * ```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 suppliment for the
- * lack of CSS animations by making use of 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, doneFn) {
-* // this will trigger `.slide.ng-enter` and `.slide.ng-enter-active`.
- * var runner = $animateCss(element, {
- * event: 'enter',
- * structural: true
- * }).start();
-* runner.done(doneFn);
- * }
- * }
- * }]
- * ```
- *
- * 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, doneFn) {
- * var runner = $animateCss(element, {
- * event: 'enter',
- * addClass: 'maroon-setting',
- * from: { height:0 },
- * to: { height: 200 }
- * }).start();
- *
- * runner.done(doneFn);
- * }
- * }
- * }]
- * ```
- *
- * 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
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- * ```
- *
- * 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
- *
-
-
- Home
-
-
-
-
- .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;
- }
-
-
- *
- * ### 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 `` 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 Angular 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
- * Hi there
- * ```
- *
- * ```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}.
- *
- *
- * ### Preventing Collisions With Third Party Libraries
- *
- * Some third-party frameworks place animation duration defaults across many element or className
- * selectors in order to make their code small and reuseable. This can lead to issues with ngAnimate, which
- * is expecting actual animations on these elements and has to wait for their completion.
- *
- * You can prevent this unwanted behavior by using a prefix on all your animation classes:
- *
- * ```css
- * /* prefixed with animate- */
- * .animate-fade-add.animate-fade-add-active {
- * transition:1s linear all;
- * opacity:0;
- * }
- * ```
- *
- * You then configure `$animate` to enforce this prefix:
- *
- * ```js
- * $animateProvider.classNameFilter(/animate-/);
- * ```
- *
- * This also may provide your application with a speed boost since only specific elements containing CSS class prefix
- * will be evaluated for animation when any DOM changes occur in the application.
- *
- * ## 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 Angular 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 angular to notice any scope-related changes.)
- */
-
-/**
- * @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 $animate to learn more about animations with `$animate`}.
- */
-angular.module('ngAnimate', [])
- .directive('ngAnimateChildren', $$AnimateChildrenDirective)
-
- .factory('$$rAFMutex', $$rAFMutexFactory)
- .factory('$$rAFScheduler', $$rAFSchedulerFactory)
-
- .factory('$$AnimateRunner', $$AnimateRunnerFactory)
-
- .provider('$$animateQueue', $$AnimateQueueProvider)
- .provider('$$animation', $$AnimationProvider)
-
- .provider('$animateCss', $AnimateCssProvider)
- .provider('$$animateCssDriver', $$AnimateCssDriverProvider)
-
- .provider('$$animateJs', $$AnimateJsProvider)
- .provider('$$animateJsDriver', $$AnimateJsDriverProvider);
-
-
-})(window, window.angular);
diff --git a/.Toolbar/vendor/angular-aria/angular-aria.min.js b/.Toolbar/vendor/angular-aria/angular-aria.min.js
deleted file mode 100644
index 69a40e2..0000000
--- a/.Toolbar/vendor/angular-aria/angular-aria.min.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
- AngularJS v1.4.0
- (c) 2010-2015 Google, Inc. http://angularjs.org
- License: MIT
-*/
-(function(q,p,r){'use strict';p.module("ngAria",["ng"]).provider("$aria",function(){function a(a,f,k){return function(l,d,e){var b=e.$normalize(f);c[b]&&!e[b]&&l.$watch(e[a],function(b){k&&(b=!b);d.attr(f,b)})}}var c={ariaHidden:!0,ariaChecked:!0,ariaDisabled:!0,ariaRequired:!0,ariaInvalid:!0,ariaMultiline:!0,ariaValue:!0,tabindex:!0,bindKeypress:!0};this.config=function(a){c=p.extend(c,a)};this.$get=function(){return{config:function(a){return c[a]},$$watchExpr:a}}}).directive("ngShow",["$aria",function(a){return a.$$watchExpr("ngShow",
-"aria-hidden",!0)}]).directive("ngHide",["$aria",function(a){return a.$$watchExpr("ngHide","aria-hidden",!1)}]).directive("ngModel",["$aria",function(a){function c(c,l,d){return a.config(l)&&!d.attr(c)}function h(a,c){return!c.attr("role")&&c.attr("type")===a&&"INPUT"!==c[0].nodeName}function f(a,c){var d=a.type,e=a.role;return"checkbox"===(d||e)||"menuitemcheckbox"===e?"checkbox":"radio"===(d||e)||"menuitemradio"===e?"radio":"range"===d||"progressbar"===e||"slider"===e?"range":"textbox"===(d||e)||
-"TEXTAREA"===c[0].nodeName?"multiline":""}return{restrict:"A",require:"?ngModel",priority:200,compile:function(k,l){var d=f(l,k);return{pre:function(a,b,c,g){"checkbox"===d&&"checkbox"!==c.type&&(g.$isEmpty=function(b){return!1===b})},post:function(e,b,m,g){function f(){return g.$modelValue}function l(){return n?(n=!1,function(a){a=m.value==g.$viewValue;b.attr("aria-checked",a);b.attr("tabindex",0-!a)}):function(a){b.attr("aria-checked",m.value==g.$viewValue)}}function k(){b.attr("aria-checked",!g.$isEmpty(g.$viewValue))}
-var n=c("tabindex","tabindex",b);switch(d){case "radio":case "checkbox":h(d,b)&&b.attr("role",d);c("aria-checked","ariaChecked",b)&&e.$watch(f,"radio"===d?l():k);break;case "range":h(d,b)&&b.attr("role","slider");a.config("ariaValue")&&(m.min&&!b.attr("aria-valuemin")&&b.attr("aria-valuemin",m.min),m.max&&!b.attr("aria-valuemax")&&b.attr("aria-valuemax",m.max),b.attr("aria-valuenow")||e.$watch(f,function(a){b.attr("aria-valuenow",a)}));break;case "multiline":c("aria-multiline","ariaMultiline",b)&&
-b.attr("aria-multiline",!0)}n&&b.attr("tabindex",0);g.$validators.required&&c("aria-required","ariaRequired",b)&&e.$watch(function(){return g.$error.required},function(a){b.attr("aria-required",!!a)});c("aria-invalid","ariaInvalid",b)&&e.$watch(function(){return g.$invalid},function(a){b.attr("aria-invalid",!!a)})}}}}}]).directive("ngDisabled",["$aria",function(a){return a.$$watchExpr("ngDisabled","aria-disabled")}]).directive("ngMessages",function(){return{restrict:"A",require:"?ngMessages",link:function(a,
-c,h,f){c.attr("aria-live")||c.attr("aria-live","assertive")}}}).directive("ngClick",["$aria","$parse",function(a,c){return{restrict:"A",compile:function(h,f){var k=c(f.ngClick,null,!0);return function(c,d,e){function b(a,b){if(-1!==b.indexOf(a[0].nodeName))return!0}var f=["BUTTON","A","INPUT","TEXTAREA"];d.attr("role")||b(d,f)||d.attr("role","button");a.config("tabindex")&&!d.attr("tabindex")&&d.attr("tabindex",0);if(a.config("bindKeypress")&&!e.ngKeypress&&!b(d,f))d.on("keypress",function(a){function b(){k(c,
-{$event:a})}var d=a.which||a.keyCode;32!==d&&13!==d||c.$apply(b)})}}}}]).directive("ngDblclick",["$aria",function(a){return function(c,h,f){a.config("tabindex")&&!h.attr("tabindex")&&h.attr("tabindex",0)}}])})(window,window.angular);
-//# sourceMappingURL=angular-aria.min.js.map
diff --git a/.Toolbar/vendor/angular-bootstrap/ui-bootstrap-tpls.js b/.Toolbar/vendor/angular-bootstrap/ui-bootstrap-tpls.js
deleted file mode 100644
index eda964c..0000000
--- a/.Toolbar/vendor/angular-bootstrap/ui-bootstrap-tpls.js
+++ /dev/null
@@ -1,4211 +0,0 @@
-/*
- * angular-ui-bootstrap
- * http://angular-ui.github.io/bootstrap/
-
- * Version: 0.12.1 - 2015-02-20
- * License: MIT
- */
-angular.module("ui.bootstrap", ["ui.bootstrap.tpls", "ui.bootstrap.transition","ui.bootstrap.collapse","ui.bootstrap.accordion","ui.bootstrap.alert","ui.bootstrap.bindHtml","ui.bootstrap.buttons","ui.bootstrap.carousel","ui.bootstrap.dateparser","ui.bootstrap.position","ui.bootstrap.datepicker","ui.bootstrap.dropdown","ui.bootstrap.modal","ui.bootstrap.pagination","ui.bootstrap.tooltip","ui.bootstrap.popover","ui.bootstrap.progressbar","ui.bootstrap.rating","ui.bootstrap.tabs","ui.bootstrap.timepicker","ui.bootstrap.typeahead"]);
-angular.module("ui.bootstrap.tpls", ["template/accordion/accordion-group.html","template/accordion/accordion.html","template/alert/alert.html","template/carousel/carousel.html","template/carousel/slide.html","template/datepicker/datepicker.html","template/datepicker/day.html","template/datepicker/month.html","template/datepicker/popup.html","template/datepicker/year.html","template/modal/backdrop.html","template/modal/window.html","template/pagination/pager.html","template/pagination/pagination.html","template/tooltip/tooltip-html-unsafe-popup.html","template/tooltip/tooltip-popup.html","template/popover/popover.html","template/progressbar/bar.html","template/progressbar/progress.html","template/progressbar/progressbar.html","template/rating/rating.html","template/tabs/tab.html","template/tabs/tabset.html","template/timepicker/timepicker.html","template/typeahead/typeahead-match.html","template/typeahead/typeahead-popup.html"]);
-angular.module('ui.bootstrap.transition', [])
-
-/**
- * $transition service provides a consistent interface to trigger CSS 3 transitions and to be informed when they complete.
- * @param {DOMElement} element The DOMElement that will be animated.
- * @param {string|object|function} trigger The thing that will cause the transition to start:
- * - As a string, it represents the css class to be added to the element.
- * - As an object, it represents a hash of style attributes to be applied to the element.
- * - As a function, it represents a function to be called that will cause the transition to occur.
- * @return {Promise} A promise that is resolved when the transition finishes.
- */
-.factory('$transition', ['$q', '$timeout', '$rootScope', function($q, $timeout, $rootScope) {
-
- var $transition = function(element, trigger, options) {
- options = options || {};
- var deferred = $q.defer();
- var endEventName = $transition[options.animation ? 'animationEndEventName' : 'transitionEndEventName'];
-
- var transitionEndHandler = function(event) {
- $rootScope.$apply(function() {
- element.unbind(endEventName, transitionEndHandler);
- deferred.resolve(element);
- });
- };
-
- if (endEventName) {
- element.bind(endEventName, transitionEndHandler);
- }
-
- // Wrap in a timeout to allow the browser time to update the DOM before the transition is to occur
- $timeout(function() {
- if ( angular.isString(trigger) ) {
- element.addClass(trigger);
- } else if ( angular.isFunction(trigger) ) {
- trigger(element);
- } else if ( angular.isObject(trigger) ) {
- element.css(trigger);
- }
- //If browser does not support transitions, instantly resolve
- if ( !endEventName ) {
- deferred.resolve(element);
- }
- });
-
- // Add our custom cancel function to the promise that is returned
- // We can call this if we are about to run a new transition, which we know will prevent this transition from ending,
- // i.e. it will therefore never raise a transitionEnd event for that transition
- deferred.promise.cancel = function() {
- if ( endEventName ) {
- element.unbind(endEventName, transitionEndHandler);
- }
- deferred.reject('Transition cancelled');
- };
-
- return deferred.promise;
- };
-
- // Work out the name of the transitionEnd event
- var transElement = document.createElement('trans');
- var transitionEndEventNames = {
- 'WebkitTransition': 'webkitTransitionEnd',
- 'MozTransition': 'transitionend',
- 'OTransition': 'oTransitionEnd',
- 'transition': 'transitionend'
- };
- var animationEndEventNames = {
- 'WebkitTransition': 'webkitAnimationEnd',
- 'MozTransition': 'animationend',
- 'OTransition': 'oAnimationEnd',
- 'transition': 'animationend'
- };
- function findEndEventName(endEventNames) {
- for (var name in endEventNames){
- if (transElement.style[name] !== undefined) {
- return endEventNames[name];
- }
- }
- }
- $transition.transitionEndEventName = findEndEventName(transitionEndEventNames);
- $transition.animationEndEventName = findEndEventName(animationEndEventNames);
- return $transition;
-}]);
-
-angular.module('ui.bootstrap.collapse', ['ui.bootstrap.transition'])
-
- .directive('collapse', ['$transition', function ($transition) {
-
- return {
- link: function (scope, element, attrs) {
-
- var initialAnimSkip = true;
- var currentTransition;
-
- function doTransition(change) {
- var newTransition = $transition(element, change);
- if (currentTransition) {
- currentTransition.cancel();
- }
- currentTransition = newTransition;
- newTransition.then(newTransitionDone, newTransitionDone);
- return newTransition;
-
- function newTransitionDone() {
- // Make sure it's this transition, otherwise, leave it alone.
- if (currentTransition === newTransition) {
- currentTransition = undefined;
- }
- }
- }
-
- function expand() {
- if (initialAnimSkip) {
- initialAnimSkip = false;
- expandDone();
- } else {
- element.removeClass('collapse').addClass('collapsing');
- doTransition({ height: element[0].scrollHeight + 'px' }).then(expandDone);
- }
- }
-
- function expandDone() {
- element.removeClass('collapsing');
- element.addClass('collapse in');
- element.css({height: 'auto'});
- }
-
- function collapse() {
- if (initialAnimSkip) {
- initialAnimSkip = false;
- collapseDone();
- element.css({height: 0});
- } else {
- // CSS transitions don't work with height: auto, so we have to manually change the height to a specific value
- element.css({ height: element[0].scrollHeight + 'px' });
- //trigger reflow so a browser realizes that height was updated from auto to a specific value
- var x = element[0].offsetWidth;
-
- element.removeClass('collapse in').addClass('collapsing');
-
- doTransition({ height: 0 }).then(collapseDone);
- }
- }
-
- function collapseDone() {
- element.removeClass('collapsing');
- element.addClass('collapse');
- }
-
- scope.$watch(attrs.collapse, function (shouldCollapse) {
- if (shouldCollapse) {
- collapse();
- } else {
- expand();
- }
- });
- }
- };
- }]);
-
-angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
-
-.constant('accordionConfig', {
- closeOthers: true
-})
-
-.controller('AccordionController', ['$scope', '$attrs', 'accordionConfig', function ($scope, $attrs, accordionConfig) {
-
- // This array keeps track of the accordion groups
- this.groups = [];
-
- // Ensure that all the groups in this accordion are closed, unless close-others explicitly says not to
- this.closeOthers = function(openGroup) {
- var closeOthers = angular.isDefined($attrs.closeOthers) ? $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers;
- if ( closeOthers ) {
- angular.forEach(this.groups, function (group) {
- if ( group !== openGroup ) {
- group.isOpen = false;
- }
- });
- }
- };
-
- // This is called from the accordion-group directive to add itself to the accordion
- this.addGroup = function(groupScope) {
- var that = this;
- this.groups.push(groupScope);
-
- groupScope.$on('$destroy', function (event) {
- that.removeGroup(groupScope);
- });
- };
-
- // This is called from the accordion-group directive when to remove itself
- this.removeGroup = function(group) {
- var index = this.groups.indexOf(group);
- if ( index !== -1 ) {
- this.groups.splice(index, 1);
- }
- };
-
-}])
-
-// The accordion directive simply sets up the directive controller
-// and adds an accordion CSS class to itself element.
-.directive('accordion', function () {
- return {
- restrict:'EA',
- controller:'AccordionController',
- transclude: true,
- replace: false,
- templateUrl: 'template/accordion/accordion.html'
- };
-})
-
-// The accordion-group directive indicates a block of html that will expand and collapse in an accordion
-.directive('accordionGroup', function() {
- return {
- require:'^accordion', // We need this directive to be inside an accordion
- restrict:'EA',
- transclude:true, // It transcludes the contents of the directive into the template
- replace: true, // The element containing the directive will be replaced with the template
- templateUrl:'template/accordion/accordion-group.html',
- scope: {
- heading: '@', // Interpolate the heading attribute onto this scope
- isOpen: '=?',
- isDisabled: '=?'
- },
- controller: function() {
- this.setHeading = function(element) {
- this.heading = element;
- };
- },
- link: function(scope, element, attrs, accordionCtrl) {
- accordionCtrl.addGroup(scope);
-
- scope.$watch('isOpen', function(value) {
- if ( value ) {
- accordionCtrl.closeOthers(scope);
- }
- });
-
- scope.toggleOpen = function() {
- if ( !scope.isDisabled ) {
- scope.isOpen = !scope.isOpen;
- }
- };
- }
- };
-})
-
-// Use accordion-heading below an accordion-group to provide a heading containing HTML
-//
-// Heading containing HTML -
-//
-.directive('accordionHeading', function() {
- return {
- restrict: 'EA',
- transclude: true, // Grab the contents to be used as the heading
- template: '', // In effect remove this element!
- replace: true,
- require: '^accordionGroup',
- link: function(scope, element, attr, accordionGroupCtrl, transclude) {
- // Pass the heading to the accordion-group controller
- // so that it can be transcluded into the right place in the template
- // [The second parameter to transclude causes the elements to be cloned so that they work in ng-repeat]
- accordionGroupCtrl.setHeading(transclude(scope, function() {}));
- }
- };
-})
-
-// Use in the accordion-group template to indicate where you want the heading to be transcluded
-// You must provide the property on the accordion-group controller that will hold the transcluded element
-//
\n" +
- "");
-}]);
diff --git a/.Toolbar/vendor/angular-cookies/angular-cookies.js b/.Toolbar/vendor/angular-cookies/angular-cookies.js
deleted file mode 100644
index aae5bb3..0000000
--- a/.Toolbar/vendor/angular-cookies/angular-cookies.js
+++ /dev/null
@@ -1,320 +0,0 @@
-/**
- * @license AngularJS v1.4.0
- * (c) 2010-2015 Google, Inc. http://angularjs.org
- * License: MIT
- */
-(function(window, angular, undefined) {'use strict';
-
-/**
- * @ngdoc module
- * @name ngCookies
- * @description
- *
- * # ngCookies
- *
- * The `ngCookies` module provides a convenient wrapper for reading and writing browser cookies.
- *
- *
- *
- *
- * See {@link ngCookies.$cookies `$cookies`} and
- * {@link ngCookies.$cookieStore `$cookieStore`} for usage.
- */
-
-
-angular.module('ngCookies', ['ng']).
- /**
- * @ngdoc provider
- * @name $cookiesProvider
- * @description
- * Use `$cookiesProvider` to change the default behavior of the {@link ngCookies.$cookies $cookies} service.
- * */
- provider('$cookies', [function $CookiesProvider() {
- /**
- * @ngdoc property
- * @name $cookiesProvider#defaults
- * @description
- *
- * Object containing default options to pass when setting cookies.
- *
- * The object may have following properties:
- *
- * - **path** - `{string}` - The cookie will be available only for this path and its
- * sub-paths. By default, this would be the URL that appears in your base tag.
- * - **domain** - `{string}` - The cookie will be available only for this domain and
- * its sub-domains. For obvious security reasons the user agent will not accept the
- * cookie if the current domain is not a sub domain or equals to the requested domain.
- * - **expires** - `{string|Date}` - String of the form "Wdy, DD Mon YYYY HH:MM:SS GMT"
- * or a Date object indicating the exact date/time this cookie will expire.
- * - **secure** - `{boolean}` - The cookie will be available only in secured connection.
- *
- * Note: by default the address that appears in your tag will be used as path.
- * This is import so that cookies will be visible for all routes in case html5mode is enabled
- *
- **/
- var defaults = this.defaults = {};
-
- function calcOptions(options) {
- return options ? angular.extend({}, defaults, options) : defaults;
- }
-
- /**
- * @ngdoc service
- * @name $cookies
- *
- * @description
- * Provides read/write access to browser's cookies.
- *
- * BREAKING CHANGE: `$cookies` no longer exposes properties that represent the
- * current browser cookie values. Now you must use the get/put/remove/etc. methods
- * as described below.
- *
- * Requires the {@link ngCookies `ngCookies`} module to be installed.
- *
- * @example
- *
- * ```js
- * angular.module('cookiesExample', ['ngCookies'])
- * .controller('ExampleController', ['$cookies', function($cookies) {
- * // Retrieving a cookie
- * var favoriteCookie = $cookies.get('myFavorite');
- * // Setting a cookie
- * $cookies.put('myFavorite', 'oatmeal');
- * }]);
- * ```
- */
- this.$get = ['$$cookieReader', '$$cookieWriter', function($$cookieReader, $$cookieWriter) {
- return {
- /**
- * @ngdoc method
- * @name $cookies#get
- *
- * @description
- * Returns the value of given cookie key
- *
- * @param {string} key Id to use for lookup.
- * @returns {string} Raw cookie value.
- */
- get: function(key) {
- return $$cookieReader()[key];
- },
-
- /**
- * @ngdoc method
- * @name $cookies#getObject
- *
- * @description
- * Returns the deserialized value of given cookie key
- *
- * @param {string} key Id to use for lookup.
- * @returns {Object} Deserialized cookie value.
- */
- getObject: function(key) {
- var value = this.get(key);
- return value ? angular.fromJson(value) : value;
- },
-
- /**
- * @ngdoc method
- * @name $cookies#getAll
- *
- * @description
- * Returns a key value object with all the cookies
- *
- * @returns {Object} All cookies
- */
- getAll: function() {
- return $$cookieReader();
- },
-
- /**
- * @ngdoc method
- * @name $cookies#put
- *
- * @description
- * Sets a value for given cookie key
- *
- * @param {string} key Id for the `value`.
- * @param {string} value Raw value to be stored.
- * @param {Object=} options Options object.
- * See {@link ngCookies.$cookiesProvider#defaults $cookiesProvider.defaults}
- */
- put: function(key, value, options) {
- $$cookieWriter(key, value, calcOptions(options));
- },
-
- /**
- * @ngdoc method
- * @name $cookies#putObject
- *
- * @description
- * Serializes and sets a value for given cookie key
- *
- * @param {string} key Id for the `value`.
- * @param {Object} value Value to be stored.
- * @param {Object=} options Options object.
- * See {@link ngCookies.$cookiesProvider#defaults $cookiesProvider.defaults}
- */
- putObject: function(key, value, options) {
- this.put(key, angular.toJson(value), options);
- },
-
- /**
- * @ngdoc method
- * @name $cookies#remove
- *
- * @description
- * Remove given cookie
- *
- * @param {string} key Id of the key-value pair to delete.
- * @param {Object=} options Options object.
- * See {@link ngCookies.$cookiesProvider#defaults $cookiesProvider.defaults}
- */
- remove: function(key, options) {
- $$cookieWriter(key, undefined, calcOptions(options));
- }
- };
- }];
- }]);
-
-angular.module('ngCookies').
-/**
- * @ngdoc service
- * @name $cookieStore
- * @deprecated
- * @requires $cookies
- *
- * @description
- * Provides a key-value (string-object) storage, that is backed by session cookies.
- * Objects put or retrieved from this storage are automatically serialized or
- * deserialized by angular's toJson/fromJson.
- *
- * Requires the {@link ngCookies `ngCookies`} module to be installed.
- *
- *
- * **Note:** The $cookieStore service is deprecated.
- * Please use the {@link ngCookies.$cookies `$cookies`} service instead.
- *
- *
- * @example
- *
- * ```js
- * angular.module('cookieStoreExample', ['ngCookies'])
- * .controller('ExampleController', ['$cookieStore', function($cookieStore) {
- * // Put cookie
- * $cookieStore.put('myFavorite','oatmeal');
- * // Get cookie
- * var favoriteCookie = $cookieStore.get('myFavorite');
- * // Removing a cookie
- * $cookieStore.remove('myFavorite');
- * }]);
- * ```
- */
- factory('$cookieStore', ['$cookies', function($cookies) {
-
- return {
- /**
- * @ngdoc method
- * @name $cookieStore#get
- *
- * @description
- * Returns the value of given cookie key
- *
- * @param {string} key Id to use for lookup.
- * @returns {Object} Deserialized cookie value, undefined if the cookie does not exist.
- */
- get: function(key) {
- return $cookies.getObject(key);
- },
-
- /**
- * @ngdoc method
- * @name $cookieStore#put
- *
- * @description
- * Sets a value for given cookie key
- *
- * @param {string} key Id for the `value`.
- * @param {Object} value Value to be stored.
- */
- put: function(key, value) {
- $cookies.putObject(key, value);
- },
-
- /**
- * @ngdoc method
- * @name $cookieStore#remove
- *
- * @description
- * Remove given cookie
- *
- * @param {string} key Id of the key-value pair to delete.
- */
- remove: function(key) {
- $cookies.remove(key);
- }
- };
-
- }]);
-
-/**
- * @name $$cookieWriter
- * @requires $document
- *
- * @description
- * This is a private service for writing cookies
- *
- * @param {string} name Cookie name
- * @param {string=} value Cookie value (if undefined, cookie will be deleted)
- * @param {Object=} options Object with options that need to be stored for the cookie.
- */
-function $$CookieWriter($document, $log, $browser) {
- var cookiePath = $browser.baseHref();
- var rawDocument = $document[0];
-
- function buildCookieString(name, value, options) {
- var path, expires;
- options = options || {};
- expires = options.expires;
- path = angular.isDefined(options.path) ? options.path : cookiePath;
- if (value === undefined) {
- expires = 'Thu, 01 Jan 1970 00:00:00 GMT';
- value = '';
- }
- if (angular.isString(expires)) {
- expires = new Date(expires);
- }
-
- var str = encodeURIComponent(name) + '=' + encodeURIComponent(value);
- str += path ? ';path=' + path : '';
- str += options.domain ? ';domain=' + options.domain : '';
- str += expires ? ';expires=' + expires.toUTCString() : '';
- str += options.secure ? ';secure' : '';
-
- // per http://www.ietf.org/rfc/rfc2109.txt browser must allow at minimum:
- // - 300 cookies
- // - 20 cookies per unique domain
- // - 4096 bytes per cookie
- var cookieLength = str.length + 1;
- if (cookieLength > 4096) {
- $log.warn("Cookie '" + name +
- "' possibly not set or overflowed because it was too large (" +
- cookieLength + " > 4096 bytes)!");
- }
-
- return str;
- }
-
- return function(name, value, options) {
- rawDocument.cookie = buildCookieString(name, value, options);
- };
-}
-
-$$CookieWriter.$inject = ['$document', '$log', '$browser'];
-
-angular.module('ngCookies').provider('$$cookieWriter', function $$CookieWriterProvider() {
- this.$get = $$CookieWriter;
-});
-
-
-})(window, window.angular);
diff --git a/.Toolbar/vendor/angular-loading-bar/build/loading-bar.css b/.Toolbar/vendor/angular-loading-bar/build/loading-bar.css
deleted file mode 100644
index 640fb8b..0000000
--- a/.Toolbar/vendor/angular-loading-bar/build/loading-bar.css
+++ /dev/null
@@ -1,110 +0,0 @@
-/*!
- * angular-loading-bar v0.7.1
- * https://chieffancypants.github.io/angular-loading-bar
- * Copyright (c) 2015 Wes Cruver
- * License: MIT
- */
-
-/* Make clicks pass-through */
-#loading-bar,
-#loading-bar-spinner {
- pointer-events: none;
- -webkit-pointer-events: none;
- -webkit-transition: 350ms linear all;
- -moz-transition: 350ms linear all;
- -o-transition: 350ms linear all;
- transition: 350ms linear all;
-}
-
-#loading-bar.ng-enter,
-#loading-bar.ng-leave.ng-leave-active,
-#loading-bar-spinner.ng-enter,
-#loading-bar-spinner.ng-leave.ng-leave-active {
- opacity: 0;
-}
-
-#loading-bar.ng-enter.ng-enter-active,
-#loading-bar.ng-leave,
-#loading-bar-spinner.ng-enter.ng-enter-active,
-#loading-bar-spinner.ng-leave {
- opacity: 1;
-}
-
-#loading-bar .bar {
- -webkit-transition: width 350ms;
- -moz-transition: width 350ms;
- -o-transition: width 350ms;
- transition: width 350ms;
-
- background: #29d;
- position: fixed;
- z-index: 10002;
- top: 0;
- left: 0;
- width: 100%;
- height: 2px;
- border-bottom-right-radius: 1px;
- border-top-right-radius: 1px;
-}
-
-/* Fancy blur effect */
-#loading-bar .peg {
- position: absolute;
- width: 70px;
- right: 0;
- top: 0;
- height: 2px;
- opacity: .45;
- -moz-box-shadow: #29d 1px 0 6px 1px;
- -ms-box-shadow: #29d 1px 0 6px 1px;
- -webkit-box-shadow: #29d 1px 0 6px 1px;
- box-shadow: #29d 1px 0 6px 1px;
- -moz-border-radius: 100%;
- -webkit-border-radius: 100%;
- border-radius: 100%;
-}
-
-#loading-bar-spinner {
- display: block;
- position: fixed;
- z-index: 10002;
- top: 10px;
- left: 10px;
-}
-
-#loading-bar-spinner .spinner-icon {
- width: 14px;
- height: 14px;
-
- border: solid 2px transparent;
- border-top-color: #29d;
- border-left-color: #29d;
- border-radius: 10px;
-
- -webkit-animation: loading-bar-spinner 400ms linear infinite;
- -moz-animation: loading-bar-spinner 400ms linear infinite;
- -ms-animation: loading-bar-spinner 400ms linear infinite;
- -o-animation: loading-bar-spinner 400ms linear infinite;
- animation: loading-bar-spinner 400ms linear infinite;
-}
-
-@-webkit-keyframes loading-bar-spinner {
- 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
- 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
-}
-@-moz-keyframes loading-bar-spinner {
- 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
- 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
-}
-@-o-keyframes loading-bar-spinner {
- 0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
- 100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
-}
-@-ms-keyframes loading-bar-spinner {
- 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
- 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
-}
-@keyframes loading-bar-spinner {
- 0% { transform: rotate(0deg); transform: rotate(0deg); }
- 100% { transform: rotate(360deg); transform: rotate(360deg); }
-}
diff --git a/.Toolbar/vendor/angular-loading-bar/build/loading-bar.js b/.Toolbar/vendor/angular-loading-bar/build/loading-bar.js
deleted file mode 100644
index 7dca593..0000000
--- a/.Toolbar/vendor/angular-loading-bar/build/loading-bar.js
+++ /dev/null
@@ -1,324 +0,0 @@
-/*!
- * angular-loading-bar v0.7.1
- * https://chieffancypants.github.io/angular-loading-bar
- * Copyright (c) 2015 Wes Cruver
- * License: MIT
- */
-/*
- * angular-loading-bar
- *
- * intercepts XHR requests and creates a loading bar.
- * Based on the excellent nprogress work by rstacruz (more info in readme)
- *
- * (c) 2013 Wes Cruver
- * License: MIT
- */
-
-
-(function() {
-
-'use strict';
-
-// Alias the loading bar for various backwards compatibilities since the project has matured:
-angular.module('angular-loading-bar', ['cfp.loadingBarInterceptor']);
-angular.module('chieffancypants.loadingBar', ['cfp.loadingBarInterceptor']);
-
-
-/**
- * loadingBarInterceptor service
- *
- * Registers itself as an Angular interceptor and listens for XHR requests.
- */
-angular.module('cfp.loadingBarInterceptor', ['cfp.loadingBar'])
- .config(['$httpProvider', function ($httpProvider) {
-
- var interceptor = ['$q', '$cacheFactory', '$timeout', '$rootScope', '$log', 'cfpLoadingBar', function ($q, $cacheFactory, $timeout, $rootScope, $log, cfpLoadingBar) {
-
- /**
- * The total number of requests made
- */
- var reqsTotal = 0;
-
- /**
- * The number of requests completed (either successfully or not)
- */
- var reqsCompleted = 0;
-
- /**
- * The amount of time spent fetching before showing the loading bar
- */
- var latencyThreshold = cfpLoadingBar.latencyThreshold;
-
- /**
- * $timeout handle for latencyThreshold
- */
- var startTimeout;
-
-
- /**
- * calls cfpLoadingBar.complete() which removes the
- * loading bar from the DOM.
- */
- function setComplete() {
- $timeout.cancel(startTimeout);
- cfpLoadingBar.complete();
- reqsCompleted = 0;
- reqsTotal = 0;
- }
-
- /**
- * Determine if the response has already been cached
- * @param {Object} config the config option from the request
- * @return {Boolean} retrns true if cached, otherwise false
- */
- function isCached(config) {
- var cache;
- var defaultCache = $cacheFactory.get('$http');
- var defaults = $httpProvider.defaults;
-
- // Choose the proper cache source. Borrowed from angular: $http service
- if ((config.cache || defaults.cache) && config.cache !== false &&
- (config.method === 'GET' || config.method === 'JSONP')) {
- cache = angular.isObject(config.cache) ? config.cache
- : angular.isObject(defaults.cache) ? defaults.cache
- : defaultCache;
- }
-
- var cached = cache !== undefined ?
- cache.get(config.url) !== undefined : false;
-
- if (config.cached !== undefined && cached !== config.cached) {
- return config.cached;
- }
- config.cached = cached;
- return cached;
- }
-
-
- return {
- 'request': function(config) {
- // Check to make sure this request hasn't already been cached and that
- // the requester didn't explicitly ask us to ignore this request:
- if (!config.ignoreLoadingBar && !isCached(config)) {
- $rootScope.$broadcast('cfpLoadingBar:loading', {url: config.url});
- if (reqsTotal === 0) {
- startTimeout = $timeout(function() {
- cfpLoadingBar.start();
- }, latencyThreshold);
- }
- reqsTotal++;
- cfpLoadingBar.set(reqsCompleted / reqsTotal);
- }
- return config;
- },
-
- 'response': function(response) {
- if (!response || !response.config) {
- $log.error('Broken interceptor detected: Config object not supplied in response:\n https://github.com/chieffancypants/angular-loading-bar/pull/50');
- return response;
- }
-
- if (!response.config.ignoreLoadingBar && !isCached(response.config)) {
- reqsCompleted++;
- $rootScope.$broadcast('cfpLoadingBar:loaded', {url: response.config.url, result: response});
- if (reqsCompleted >= reqsTotal) {
- setComplete();
- } else {
- cfpLoadingBar.set(reqsCompleted / reqsTotal);
- }
- }
- return response;
- },
-
- 'responseError': function(rejection) {
- if (!rejection || !rejection.config) {
- $log.error('Broken interceptor detected: Config object not supplied in rejection:\n https://github.com/chieffancypants/angular-loading-bar/pull/50');
- return $q.reject(rejection);
- }
-
- if (!rejection.config.ignoreLoadingBar && !isCached(rejection.config)) {
- reqsCompleted++;
- $rootScope.$broadcast('cfpLoadingBar:loaded', {url: rejection.config.url, result: rejection});
- if (reqsCompleted >= reqsTotal) {
- setComplete();
- } else {
- cfpLoadingBar.set(reqsCompleted / reqsTotal);
- }
- }
- return $q.reject(rejection);
- }
- };
- }];
-
- $httpProvider.interceptors.push(interceptor);
- }]);
-
-
-/**
- * Loading Bar
- *
- * This service handles adding and removing the actual element in the DOM.
- * Generally, best practices for DOM manipulation is to take place in a
- * directive, but because the element itself is injected in the DOM only upon
- * XHR requests, and it's likely needed on every view, the best option is to
- * use a service.
- */
-angular.module('cfp.loadingBar', [])
- .provider('cfpLoadingBar', function() {
-
- this.includeSpinner = true;
- this.includeBar = true;
- this.latencyThreshold = 100;
- this.startSize = 0.02;
- this.parentSelector = 'body';
- this.spinnerTemplate = '
';
- this.loadingBarTemplate = '
';
-
- this.$get = ['$injector', '$document', '$timeout', '$rootScope', function ($injector, $document, $timeout, $rootScope) {
- var $animate;
- var $parentSelector = this.parentSelector,
- loadingBarContainer = angular.element(this.loadingBarTemplate),
- loadingBar = loadingBarContainer.find('div').eq(0),
- spinner = angular.element(this.spinnerTemplate);
-
- var incTimeout,
- completeTimeout,
- started = false,
- status = 0;
-
- var includeSpinner = this.includeSpinner;
- var includeBar = this.includeBar;
- var startSize = this.startSize;
-
- /**
- * Inserts the loading bar element into the dom, and sets it to 2%
- */
- function _start() {
- if (!$animate) {
- $animate = $injector.get('$animate');
- }
-
- var $parent = $document.find($parentSelector).eq(0);
- $timeout.cancel(completeTimeout);
-
- // do not continually broadcast the started event:
- if (started) {
- return;
- }
-
- $rootScope.$broadcast('cfpLoadingBar:started');
- started = true;
-
- if (includeBar) {
- $animate.enter(loadingBarContainer, $parent, angular.element($parent[0].lastChild));
- }
-
- if (includeSpinner) {
- $animate.enter(spinner, $parent, angular.element($parent[0].lastChild));
- }
-
- _set(startSize);
- }
-
- /**
- * Set the loading bar's width to a certain percent.
- *
- * @param n any value between 0 and 1
- */
- function _set(n) {
- if (!started) {
- return;
- }
- var pct = (n * 100) + '%';
- loadingBar.css('width', pct);
- status = n;
-
- // increment loadingbar to give the illusion that there is always
- // progress but make sure to cancel the previous timeouts so we don't
- // have multiple incs running at the same time.
- $timeout.cancel(incTimeout);
- incTimeout = $timeout(function() {
- _inc();
- }, 250);
- }
-
- /**
- * Increments the loading bar by a random amount
- * but slows down as it progresses
- */
- function _inc() {
- if (_status() >= 1) {
- return;
- }
-
- var rnd = 0;
-
- // TODO: do this mathmatically instead of through conditions
-
- var stat = _status();
- if (stat >= 0 && stat < 0.25) {
- // Start out between 3 - 6% increments
- rnd = (Math.random() * (5 - 3 + 1) + 3) / 100;
- } else if (stat >= 0.25 && stat < 0.65) {
- // increment between 0 - 3%
- rnd = (Math.random() * 3) / 100;
- } else if (stat >= 0.65 && stat < 0.9) {
- // increment between 0 - 2%
- rnd = (Math.random() * 2) / 100;
- } else if (stat >= 0.9 && stat < 0.99) {
- // finally, increment it .5 %
- rnd = 0.005;
- } else {
- // after 99%, don't increment:
- rnd = 0;
- }
-
- var pct = _status() + rnd;
- _set(pct);
- }
-
- function _status() {
- return status;
- }
-
- function _completeAnimation() {
- status = 0;
- started = false;
- }
-
- function _complete() {
- if (!$animate) {
- $animate = $injector.get('$animate');
- }
-
- $rootScope.$broadcast('cfpLoadingBar:completed');
- _set(1);
-
- $timeout.cancel(completeTimeout);
-
- // Attempt to aggregate any start/complete calls within 500ms:
- completeTimeout = $timeout(function() {
- var promise = $animate.leave(loadingBarContainer, _completeAnimation);
- if (promise && promise.then) {
- promise.then(_completeAnimation);
- }
- $animate.leave(spinner);
- }, 500);
- }
-
- return {
- start : _start,
- set : _set,
- status : _status,
- inc : _inc,
- complete : _complete,
- includeSpinner : this.includeSpinner,
- latencyThreshold : this.latencyThreshold,
- parentSelector : this.parentSelector,
- startSize : this.startSize
- };
-
-
- }]; //
- }); // wtf javascript. srsly
-})(); //
diff --git a/.Toolbar/vendor/angular-material/angular-material.js b/.Toolbar/vendor/angular-material/angular-material.js
deleted file mode 100644
index 2697052..0000000
--- a/.Toolbar/vendor/angular-material/angular-material.js
+++ /dev/null
@@ -1,32275 +0,0 @@
-/*!
- * Angular Material Design
- * https://github.com/angular/material
- * @license MIT
- * v1.1.0
- */
-(function( window, angular, undefined ){
-"use strict";
-
-(function(){
-"use strict";
-
-angular.module('ngMaterial', ["ng","ngAnimate","ngAria","material.core","material.core.gestures","material.core.layout","material.core.theming.palette","material.core.theming","material.core.animate","material.components.autocomplete","material.components.backdrop","material.components.bottomSheet","material.components.button","material.components.card","material.components.checkbox","material.components.chips","material.components.colors","material.components.content","material.components.datepicker","material.components.dialog","material.components.divider","material.components.fabActions","material.components.fabShared","material.components.fabSpeedDial","material.components.fabToolbar","material.components.gridList","material.components.icon","material.components.input","material.components.list","material.components.menu","material.components.menuBar","material.components.navBar","material.components.panel","material.components.progressCircular","material.components.progressLinear","material.components.radioButton","material.components.select","material.components.showHide","material.components.sidenav","material.components.slider","material.components.sticky","material.components.subheader","material.components.swipe","material.components.switch","material.components.tabs","material.components.toast","material.components.toolbar","material.components.tooltip","material.components.virtualRepeat","material.components.whiteframe"]);
-})();
-(function(){
-"use strict";
-
-/**
- * Initialization function that validates environment
- * requirements.
- */
-angular
- .module('material.core', [
- 'ngAnimate',
- 'material.core.animate',
- 'material.core.layout',
- 'material.core.gestures',
- 'material.core.theming'
- ])
- .config(MdCoreConfigure)
- .run(DetectNgTouch);
-
-
-/**
- * Detect if the ng-Touch module is also being used.
- * Warn if detected.
- * @ngInject
- */
-function DetectNgTouch($log, $injector) {
- if ( $injector.has('$swipe') ) {
- var msg = "" +
- "You are using the ngTouch module. \n" +
- "Angular Material already has mobile click, tap, and swipe support... \n" +
- "ngTouch is not supported with Angular Material!";
- $log.warn(msg);
- }
-}
-DetectNgTouch.$inject = ["$log", "$injector"];
-
-/**
- * @ngInject
- */
-function MdCoreConfigure($provide, $mdThemingProvider) {
-
- $provide.decorator('$$rAF', ["$delegate", rAFDecorator]);
-
- $mdThemingProvider.theme('default')
- .primaryPalette('indigo')
- .accentPalette('pink')
- .warnPalette('deep-orange')
- .backgroundPalette('grey');
-}
-MdCoreConfigure.$inject = ["$provide", "$mdThemingProvider"];
-
-/**
- * @ngInject
- */
-function rAFDecorator($delegate) {
- /**
- * Use this to throttle events that come in often.
- * The throttled function will always use the *last* invocation before the
- * coming frame.
- *
- * For example, window resize events that fire many times a second:
- * If we set to use an raf-throttled callback on window resize, then
- * our callback will only be fired once per frame, with the last resize
- * event that happened before that frame.
- *
- * @param {function} callback function to debounce
- */
- $delegate.throttle = function(cb) {
- var queuedArgs, alreadyQueued, queueCb, context;
- return function debounced() {
- queuedArgs = arguments;
- context = this;
- queueCb = cb;
- if (!alreadyQueued) {
- alreadyQueued = true;
- $delegate(function() {
- queueCb.apply(context, Array.prototype.slice.call(queuedArgs));
- alreadyQueued = false;
- });
- }
- };
- };
- return $delegate;
-}
-rAFDecorator.$inject = ["$delegate"];
-
-})();
-(function(){
-"use strict";
-
-angular.module('material.core')
- .directive('mdAutofocus', MdAutofocusDirective)
-
- // Support the deprecated md-auto-focus and md-sidenav-focus as well
- .directive('mdAutoFocus', MdAutofocusDirective)
- .directive('mdSidenavFocus', MdAutofocusDirective);
-
-/**
- * @ngdoc directive
- * @name mdAutofocus
- * @module material.core.util
- *
- * @description
- *
- * `[md-autofocus]` provides an optional way to identify the focused element when a `$mdDialog`,
- * `$mdBottomSheet`, `$mdMenu` or `$mdSidenav` opens or upon page load for input-like elements.
- *
- * When one of these opens, it will find the first nested element with the `[md-autofocus]`
- * attribute directive and optional expression. An expression may be specified as the directive
- * value to enable conditional activation of the autofocus.
- *
- * @usage
- *
- * ### Dialog
- *
- *
- *
- *
- *
- *
- * ### Bottomsheet
- *
- *
- * Comment Actions
- *
- *
- *
- *
- *
- * {{ item.name }}
- *
- *
- *
- *
- *
- *
- *
- * ### Autocomplete
- *
- *
- * {{item.display}}
- *
- *
- *
- * ### Sidenav
- *
- *
- *
- * Left Nav!
- *
- *
- *
- * Center Content
- *
- * Open Left Menu
- *
- *
- *
- *
- *
- *
- *
- *
- **/
-function MdAutofocusDirective() {
- return {
- restrict: 'A',
-
- link: postLink
- }
-}
-
-function postLink(scope, element, attrs) {
- var attr = attrs.mdAutoFocus || attrs.mdAutofocus || attrs.mdSidenavFocus;
-
- // Setup a watcher on the proper attribute to update a class we can check for in $mdUtil
- scope.$watch(attr, function(canAutofocus) {
- element.toggleClass('md-autofocus', canAutofocus);
- });
-}
-
-})();
-(function(){
-"use strict";
-
-/**
- * @ngdoc module
- * @name material.core.colorUtil
- * @description
- * Color Util
- */
-angular
- .module('material.core')
- .factory('$mdColorUtil', ColorUtilFactory);
-
-function ColorUtilFactory() {
- /**
- * Converts hex value to RGBA string
- * @param color {string}
- * @returns {string}
- */
- function hexToRgba (color) {
- var hex = color[ 0 ] === '#' ? color.substr(1) : color,
- dig = hex.length / 3,
- red = hex.substr(0, dig),
- green = hex.substr(dig, dig),
- blue = hex.substr(dig * 2);
- if (dig === 1) {
- red += red;
- green += green;
- blue += blue;
- }
- return 'rgba(' + parseInt(red, 16) + ',' + parseInt(green, 16) + ',' + parseInt(blue, 16) + ',0.1)';
- }
-
- /**
- * Converts rgba value to hex string
- * @param color {string}
- * @returns {string}
- */
- function rgbaToHex(color) {
- color = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
-
- var hex = (color && color.length === 4) ? "#" +
- ("0" + parseInt(color[1],10).toString(16)).slice(-2) +
- ("0" + parseInt(color[2],10).toString(16)).slice(-2) +
- ("0" + parseInt(color[3],10).toString(16)).slice(-2) : '';
-
- return hex.toUpperCase();
- }
-
- /**
- * Converts an RGB color to RGBA
- * @param color {string}
- * @returns {string}
- */
- function rgbToRgba (color) {
- return color.replace(')', ', 0.1)').replace('(', 'a(');
- }
-
- /**
- * Converts an RGBA color to RGB
- * @param color {string}
- * @returns {string}
- */
- function rgbaToRgb (color) {
- return color
- ? color.replace('rgba', 'rgb').replace(/,[^\),]+\)/, ')')
- : 'rgb(0,0,0)';
- }
-
- return {
- rgbaToHex: rgbaToHex,
- hexToRgba: hexToRgba,
- rgbToRgba: rgbToRgba,
- rgbaToRgb: rgbaToRgb
- }
-}
-})();
-(function(){
-"use strict";
-
-angular.module('material.core')
-.factory('$mdConstant', MdConstantFactory);
-
-/**
- * Factory function that creates the grab-bag $mdConstant service.
- * @ngInject
- */
-function MdConstantFactory($sniffer, $window, $document) {
-
- var vendorPrefix = $sniffer.vendorPrefix;
- var isWebkit = /webkit/i.test(vendorPrefix);
- var SPECIAL_CHARS_REGEXP = /([:\-_]+(.))/g;
- var prefixTestEl = document.createElement('div');
-
- function vendorProperty(name) {
- // Add a dash between the prefix and name, to be able to transform the string into camelcase.
- var prefixedName = vendorPrefix + '-' + name;
- var ucPrefix = camelCase(prefixedName);
- var lcPrefix = ucPrefix.charAt(0).toLowerCase() + ucPrefix.substring(1);
-
- return hasStyleProperty(name) ? name : // The current browser supports the un-prefixed property
- hasStyleProperty(ucPrefix) ? ucPrefix : // The current browser only supports the prefixed property.
- hasStyleProperty(lcPrefix) ? lcPrefix : name; // Some browsers are only supporting the prefix in lowercase.
- }
-
- function hasStyleProperty(property) {
- return angular.isDefined(prefixTestEl.style[property]);
- }
-
- function camelCase(input) {
- return input.replace(SPECIAL_CHARS_REGEXP, function(matches, separator, letter, offset) {
- return offset ? letter.toUpperCase() : letter;
- });
- }
-
- var self = {
- isInputKey : function(e) { return (e.keyCode >= 31 && e.keyCode <= 90); },
- isNumPadKey : function (e){ return (3 === e.location && e.keyCode >= 97 && e.keyCode <= 105); },
- isNavigationKey : function(e) {
- var kc = self.KEY_CODE, NAVIGATION_KEYS = [kc.SPACE, kc.ENTER, kc.UP_ARROW, kc.DOWN_ARROW];
- return (NAVIGATION_KEYS.indexOf(e.keyCode) != -1);
- },
-
- KEY_CODE: {
- COMMA: 188,
- SEMICOLON : 186,
- ENTER: 13,
- ESCAPE: 27,
- SPACE: 32,
- PAGE_UP: 33,
- PAGE_DOWN: 34,
- END: 35,
- HOME: 36,
- LEFT_ARROW : 37,
- UP_ARROW : 38,
- RIGHT_ARROW : 39,
- DOWN_ARROW : 40,
- TAB : 9,
- BACKSPACE: 8,
- DELETE: 46
- },
- CSS: {
- /* Constants */
- TRANSITIONEND: 'transitionend' + (isWebkit ? ' webkitTransitionEnd' : ''),
- ANIMATIONEND: 'animationend' + (isWebkit ? ' webkitAnimationEnd' : ''),
-
- TRANSFORM: vendorProperty('transform'),
- TRANSFORM_ORIGIN: vendorProperty('transformOrigin'),
- TRANSITION: vendorProperty('transition'),
- TRANSITION_DURATION: vendorProperty('transitionDuration'),
- ANIMATION_PLAY_STATE: vendorProperty('animationPlayState'),
- ANIMATION_DURATION: vendorProperty('animationDuration'),
- ANIMATION_NAME: vendorProperty('animationName'),
- ANIMATION_TIMING: vendorProperty('animationTimingFunction'),
- ANIMATION_DIRECTION: vendorProperty('animationDirection')
- },
- /**
- * As defined in core/style/variables.scss
- *
- * $layout-breakpoint-xs: 600px !default;
- * $layout-breakpoint-sm: 960px !default;
- * $layout-breakpoint-md: 1280px !default;
- * $layout-breakpoint-lg: 1920px !default;
- *
- */
- MEDIA: {
- 'xs' : '(max-width: 599px)' ,
- 'gt-xs' : '(min-width: 600px)' ,
- 'sm' : '(min-width: 600px) and (max-width: 959px)' ,
- 'gt-sm' : '(min-width: 960px)' ,
- 'md' : '(min-width: 960px) and (max-width: 1279px)' ,
- 'gt-md' : '(min-width: 1280px)' ,
- 'lg' : '(min-width: 1280px) and (max-width: 1919px)',
- 'gt-lg' : '(min-width: 1920px)' ,
- 'xl' : '(min-width: 1920px)' ,
- 'landscape' : '(orientation: landscape)' ,
- 'portrait' : '(orientation: portrait)' ,
- 'print' : 'print'
- },
- MEDIA_PRIORITY: [
- 'xl',
- 'gt-lg',
- 'lg',
- 'gt-md',
- 'md',
- 'gt-sm',
- 'sm',
- 'gt-xs',
- 'xs',
- 'landscape',
- 'portrait',
- 'print'
- ]
- };
-
- return self;
-}
-MdConstantFactory.$inject = ["$sniffer", "$window", "$document"];
-
-})();
-(function(){
-"use strict";
-
- angular
- .module('material.core')
- .config( ["$provide", function($provide){
- $provide.decorator('$mdUtil', ['$delegate', function ($delegate){
- /**
- * Inject the iterator facade to easily support iteration and accessors
- * @see iterator below
- */
- $delegate.iterator = MdIterator;
-
- return $delegate;
- }
- ]);
- }]);
-
- /**
- * iterator is a list facade to easily support iteration and accessors
- *
- * @param items Array list which this iterator will enumerate
- * @param reloop Boolean enables iterator to consider the list as an endless reloop
- */
- function MdIterator(items, reloop) {
- var trueFn = function() { return true; };
-
- if (items && !angular.isArray(items)) {
- items = Array.prototype.slice.call(items);
- }
-
- reloop = !!reloop;
- var _items = items || [ ];
-
- // Published API
- return {
- items: getItems,
- count: count,
-
- inRange: inRange,
- contains: contains,
- indexOf: indexOf,
- itemAt: itemAt,
-
- findBy: findBy,
-
- add: add,
- remove: remove,
-
- first: first,
- last: last,
- next: angular.bind(null, findSubsequentItem, false),
- previous: angular.bind(null, findSubsequentItem, true),
-
- hasPrevious: hasPrevious,
- hasNext: hasNext
-
- };
-
- /**
- * Publish copy of the enumerable set
- * @returns {Array|*}
- */
- function getItems() {
- return [].concat(_items);
- }
-
- /**
- * Determine length of the list
- * @returns {Array.length|*|number}
- */
- function count() {
- return _items.length;
- }
-
- /**
- * Is the index specified valid
- * @param index
- * @returns {Array.length|*|number|boolean}
- */
- function inRange(index) {
- return _items.length && ( index > -1 ) && (index < _items.length );
- }
-
- /**
- * Can the iterator proceed to the next item in the list; relative to
- * the specified item.
- *
- * @param item
- * @returns {Array.length|*|number|boolean}
- */
- function hasNext(item) {
- return item ? inRange(indexOf(item) + 1) : false;
- }
-
- /**
- * Can the iterator proceed to the previous item in the list; relative to
- * the specified item.
- *
- * @param item
- * @returns {Array.length|*|number|boolean}
- */
- function hasPrevious(item) {
- return item ? inRange(indexOf(item) - 1) : false;
- }
-
- /**
- * Get item at specified index/position
- * @param index
- * @returns {*}
- */
- function itemAt(index) {
- return inRange(index) ? _items[index] : null;
- }
-
- /**
- * Find all elements matching the key/value pair
- * otherwise return null
- *
- * @param val
- * @param key
- *
- * @return array
- */
- function findBy(key, val) {
- return _items.filter(function(item) {
- return item[key] === val;
- });
- }
-
- /**
- * Add item to list
- * @param item
- * @param index
- * @returns {*}
- */
- function add(item, index) {
- if ( !item ) return -1;
-
- if (!angular.isNumber(index)) {
- index = _items.length;
- }
-
- _items.splice(index, 0, item);
-
- return indexOf(item);
- }
-
- /**
- * Remove item from list...
- * @param item
- */
- function remove(item) {
- if ( contains(item) ){
- _items.splice(indexOf(item), 1);
- }
- }
-
- /**
- * Get the zero-based index of the target item
- * @param item
- * @returns {*}
- */
- function indexOf(item) {
- return _items.indexOf(item);
- }
-
- /**
- * Boolean existence check
- * @param item
- * @returns {boolean}
- */
- function contains(item) {
- return item && (indexOf(item) > -1);
- }
-
- /**
- * Return first item in the list
- * @returns {*}
- */
- function first() {
- return _items.length ? _items[0] : null;
- }
-
- /**
- * Return last item in the list...
- * @returns {*}
- */
- function last() {
- return _items.length ? _items[_items.length - 1] : null;
- }
-
- /**
- * Find the next item. If reloop is true and at the end of the list, it will go back to the
- * first item. If given, the `validate` callback will be used to determine whether the next item
- * is valid. If not valid, it will try to find the next item again.
- *
- * @param {boolean} backwards Specifies the direction of searching (forwards/backwards)
- * @param {*} item The item whose subsequent item we are looking for
- * @param {Function=} validate The `validate` function
- * @param {integer=} limit The recursion limit
- *
- * @returns {*} The subsequent item or null
- */
- function findSubsequentItem(backwards, item, validate, limit) {
- validate = validate || trueFn;
-
- var curIndex = indexOf(item);
- while (true) {
- if (!inRange(curIndex)) return null;
-
- var nextIndex = curIndex + (backwards ? -1 : 1);
- var foundItem = null;
- if (inRange(nextIndex)) {
- foundItem = _items[nextIndex];
- } else if (reloop) {
- foundItem = backwards ? last() : first();
- nextIndex = indexOf(foundItem);
- }
-
- if ((foundItem === null) || (nextIndex === limit)) return null;
- if (validate(foundItem)) return foundItem;
-
- if (angular.isUndefined(limit)) limit = nextIndex;
-
- curIndex = nextIndex;
- }
- }
- }
-
-
-})();
-(function(){
-"use strict";
-
-angular.module('material.core')
-.factory('$mdMedia', mdMediaFactory);
-
-/**
- * @ngdoc service
- * @name $mdMedia
- * @module material.core
- *
- * @description
- * `$mdMedia` is used to evaluate whether a given media query is true or false given the
- * current device's screen / window size. The media query will be re-evaluated on resize, allowing
- * you to register a watch.
- *
- * `$mdMedia` also has pre-programmed support for media queries that match the layout breakpoints:
- *
- *
- *
- *
- *
Breakpoint
- *
mediaQuery
- *
- *
- *
- *
- *
xs
- *
(max-width: 599px)
- *
- *
- *
gt-xs
- *
(min-width: 600px)
- *
- *
- *
sm
- *
(min-width: 600px) and (max-width: 959px)
- *
- *
- *
gt-sm
- *
(min-width: 960px)
- *
- *
- *
md
- *
(min-width: 960px) and (max-width: 1279px)
- *
- *
- *
gt-md
- *
(min-width: 1280px)
- *
- *
- *
lg
- *
(min-width: 1280px) and (max-width: 1919px)
- *
- *
- *
gt-lg
- *
(min-width: 1920px)
- *
- *
- *
xl
- *
(min-width: 1920px)
- *
- *
- *
landscape
- *
landscape
- *
- *
- *
portrait
- *
portrait
- *
- *
- *
print
- *
print
- *
- *
- *
- *
- * See Material Design's Layout - Adaptive UI for more details.
- *
- *
- *
- *
- *
- * @returns {boolean} a boolean representing whether or not the given media query is true or false.
- *
- * @usage
- *
- * app.controller('MyController', function($mdMedia, $scope) {
- * $scope.$watch(function() { return $mdMedia('lg'); }, function(big) {
- * $scope.bigScreen = big;
- * });
- *
- * $scope.screenIsSmall = $mdMedia('sm');
- * $scope.customQuery = $mdMedia('(min-width: 1234px)');
- * $scope.anotherCustom = $mdMedia('max-width: 300px');
- * });
- *
- */
-
-/* @ngInject */
-function mdMediaFactory($mdConstant, $rootScope, $window) {
- var queries = {};
- var mqls = {};
- var results = {};
- var normalizeCache = {};
-
- $mdMedia.getResponsiveAttribute = getResponsiveAttribute;
- $mdMedia.getQuery = getQuery;
- $mdMedia.watchResponsiveAttributes = watchResponsiveAttributes;
-
- return $mdMedia;
-
- function $mdMedia(query) {
- var validated = queries[query];
- if (angular.isUndefined(validated)) {
- validated = queries[query] = validate(query);
- }
-
- var result = results[validated];
- if (angular.isUndefined(result)) {
- result = add(validated);
- }
-
- return result;
- }
-
- function validate(query) {
- return $mdConstant.MEDIA[query] ||
- ((query.charAt(0) !== '(') ? ('(' + query + ')') : query);
- }
-
- function add(query) {
- var result = mqls[query];
- if ( !result ) {
- result = mqls[query] = $window.matchMedia(query);
- }
-
- result.addListener(onQueryChange);
- return (results[result.media] = !!result.matches);
- }
-
- function onQueryChange(query) {
- $rootScope.$evalAsync(function() {
- results[query.media] = !!query.matches;
- });
- }
-
- function getQuery(name) {
- return mqls[name];
- }
-
- function getResponsiveAttribute(attrs, attrName) {
- for (var i = 0; i < $mdConstant.MEDIA_PRIORITY.length; i++) {
- var mediaName = $mdConstant.MEDIA_PRIORITY[i];
- if (!mqls[queries[mediaName]].matches) {
- continue;
- }
-
- var normalizedName = getNormalizedName(attrs, attrName + '-' + mediaName);
- if (attrs[normalizedName]) {
- return attrs[normalizedName];
- }
- }
-
- // fallback on unprefixed
- return attrs[getNormalizedName(attrs, attrName)];
- }
-
- function watchResponsiveAttributes(attrNames, attrs, watchFn) {
- var unwatchFns = [];
- attrNames.forEach(function(attrName) {
- var normalizedName = getNormalizedName(attrs, attrName);
- if (angular.isDefined(attrs[normalizedName])) {
- unwatchFns.push(
- attrs.$observe(normalizedName, angular.bind(void 0, watchFn, null)));
- }
-
- for (var mediaName in $mdConstant.MEDIA) {
- normalizedName = getNormalizedName(attrs, attrName + '-' + mediaName);
- if (angular.isDefined(attrs[normalizedName])) {
- unwatchFns.push(
- attrs.$observe(normalizedName, angular.bind(void 0, watchFn, mediaName)));
- }
- }
- });
-
- return function unwatch() {
- unwatchFns.forEach(function(fn) { fn(); })
- };
- }
-
- // Improves performance dramatically
- function getNormalizedName(attrs, attrName) {
- return normalizeCache[attrName] ||
- (normalizeCache[attrName] = attrs.$normalize(attrName));
- }
-}
-mdMediaFactory.$inject = ["$mdConstant", "$rootScope", "$window"];
-
-})();
-(function(){
-"use strict";
-
-angular
- .module('material.core')
- .config( ["$provide", function($provide) {
- $provide.decorator('$mdUtil', ['$delegate', function ($delegate) {
-
- // Inject the prefixer into our original $mdUtil service.
- $delegate.prefixer = MdPrefixer;
-
- return $delegate;
- }]);
- }]);
-
-function MdPrefixer(initialAttributes, buildSelector) {
- var PREFIXES = ['data', 'x'];
-
- if (initialAttributes) {
- // The prefixer also accepts attributes as a parameter, and immediately builds a list or selector for
- // the specified attributes.
- return buildSelector ? _buildSelector(initialAttributes) : _buildList(initialAttributes);
- }
-
- return {
- buildList: _buildList,
- buildSelector: _buildSelector,
- hasAttribute: _hasAttribute,
- removeAttribute: _removeAttribute
- };
-
- function _buildList(attributes) {
- attributes = angular.isArray(attributes) ? attributes : [attributes];
-
- attributes.forEach(function(item) {
- PREFIXES.forEach(function(prefix) {
- attributes.push(prefix + '-' + item);
- });
- });
-
- return attributes;
- }
-
- function _buildSelector(attributes) {
- attributes = angular.isArray(attributes) ? attributes : [attributes];
-
- return _buildList(attributes)
- .map(function(item) {
- return '[' + item + ']'
- })
- .join(',');
- }
-
- function _hasAttribute(element, attribute) {
- element = element[0] || element;
-
- var prefixedAttrs = _buildList(attribute);
-
- for (var i = 0; i < prefixedAttrs.length; i++) {
- if (element.hasAttribute(prefixedAttrs[i])) {
- return true;
- }
- }
-
- return false;
- }
-
- function _removeAttribute(element, attribute) {
- element = element[0] || element;
-
- _buildList(attribute).forEach(function(prefixedAttribute) {
- element.removeAttribute(prefixedAttribute);
- });
- }
-}
-})();
-(function(){
-"use strict";
-
-/*
- * This var has to be outside the angular factory, otherwise when
- * there are multiple material apps on the same page, each app
- * will create its own instance of this array and the app's IDs
- * will not be unique.
- */
-var nextUniqueId = 0;
-
-/**
- * @ngdoc module
- * @name material.core.util
- * @description
- * Util
- */
-angular
- .module('material.core')
- .factory('$mdUtil', UtilFactory);
-
-/**
- * @ngInject
- */
-function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $interpolate, $log, $rootElement, $window, $$rAF) {
- // Setup some core variables for the processTemplate method
- var startSymbol = $interpolate.startSymbol(),
- endSymbol = $interpolate.endSymbol(),
- usesStandardSymbols = ((startSymbol === '{{') && (endSymbol === '}}'));
-
- /**
- * Checks if the target element has the requested style by key
- * @param {DOMElement|JQLite} target Target element
- * @param {string} key Style key
- * @param {string=} expectedVal Optional expected value
- * @returns {boolean} Whether the target element has the style or not
- */
- var hasComputedStyle = function (target, key, expectedVal) {
- var hasValue = false;
-
- if ( target && target.length ) {
- var computedStyles = $window.getComputedStyle(target[0]);
- hasValue = angular.isDefined(computedStyles[key]) && (expectedVal ? computedStyles[key] == expectedVal : true);
- }
-
- return hasValue;
- };
-
- function validateCssValue(value) {
- return !value ? '0' :
- hasPx(value) || hasPercent(value) ? value : value + 'px';
- }
-
- function hasPx(value) {
- return String(value).indexOf('px') > -1;
- }
-
- function hasPercent(value) {
- return String(value).indexOf('%') > -1;
-
- }
-
- var $mdUtil = {
- dom: {},
- now: window.performance ?
- angular.bind(window.performance, window.performance.now) : Date.now || function() {
- return new Date().getTime();
- },
-
- /**
- * Bi-directional accessor/mutator used to easily update an element's
- * property based on the current 'dir'ectional value.
- */
- bidi : function(element, property, lValue, rValue) {
- var ltr = !($document[0].dir == 'rtl' || $document[0].body.dir == 'rtl');
-
- // If accessor
- if ( arguments.length == 0 ) return ltr ? 'ltr' : 'rtl';
-
- // If mutator
- var elem = angular.element(element);
-
- if ( ltr && angular.isDefined(lValue)) {
- elem.css(property, validateCssValue(lValue));
- }
- else if ( !ltr && angular.isDefined(rValue)) {
- elem.css(property, validateCssValue(rValue) );
- }
- },
-
- bidiProperty: function (element, lProperty, rProperty, value) {
- var ltr = !($document[0].dir == 'rtl' || $document[0].body.dir == 'rtl');
-
- var elem = angular.element(element);
-
- if ( ltr && angular.isDefined(lProperty)) {
- elem.css(lProperty, validateCssValue(value));
- elem.css(rProperty, '');
- }
- else if ( !ltr && angular.isDefined(rProperty)) {
- elem.css(rProperty, validateCssValue(value) );
- elem.css(lProperty, '');
- }
- },
-
- clientRect: function(element, offsetParent, isOffsetRect) {
- var node = getNode(element);
- offsetParent = getNode(offsetParent || node.offsetParent || document.body);
- var nodeRect = node.getBoundingClientRect();
-
- // The user can ask for an offsetRect: a rect relative to the offsetParent,
- // or a clientRect: a rect relative to the page
- var offsetRect = isOffsetRect ?
- offsetParent.getBoundingClientRect() :
- {left: 0, top: 0, width: 0, height: 0};
- return {
- left: nodeRect.left - offsetRect.left,
- top: nodeRect.top - offsetRect.top,
- width: nodeRect.width,
- height: nodeRect.height
- };
- },
- offsetRect: function(element, offsetParent) {
- return $mdUtil.clientRect(element, offsetParent, true);
- },
-
- // Annoying method to copy nodes to an array, thanks to IE
- nodesToArray: function(nodes) {
- nodes = nodes || [];
-
- var results = [];
- for (var i = 0; i < nodes.length; ++i) {
- results.push(nodes.item(i));
- }
- return results;
- },
-
- /**
- * Calculate the positive scroll offset
- * TODO: Check with pinch-zoom in IE/Chrome;
- * https://code.google.com/p/chromium/issues/detail?id=496285
- */
- scrollTop: function(element) {
- element = angular.element(element || $document[0].body);
-
- var body = (element[0] == $document[0].body) ? $document[0].body : undefined;
- var scrollTop = body ? body.scrollTop + body.parentElement.scrollTop : 0;
-
- // Calculate the positive scroll offset
- return scrollTop || Math.abs(element[0].getBoundingClientRect().top);
- },
-
- /**
- * Finds the proper focus target by searching the DOM.
- *
- * @param containerEl
- * @param attributeVal
- * @returns {*}
- */
- findFocusTarget: function(containerEl, attributeVal) {
- var AUTO_FOCUS = this.prefixer('md-autofocus', true);
- var elToFocus;
-
- elToFocus = scanForFocusable(containerEl, attributeVal || AUTO_FOCUS);
-
- if ( !elToFocus && attributeVal != AUTO_FOCUS) {
- // Scan for deprecated attribute
- elToFocus = scanForFocusable(containerEl, this.prefixer('md-auto-focus', true));
-
- if ( !elToFocus ) {
- // Scan for fallback to 'universal' API
- elToFocus = scanForFocusable(containerEl, AUTO_FOCUS);
- }
- }
-
- return elToFocus;
-
- /**
- * Can target and nested children for specified Selector (attribute)
- * whose value may be an expression that evaluates to True/False.
- */
- function scanForFocusable(target, selector) {
- var elFound, items = target[0].querySelectorAll(selector);
-
- // Find the last child element with the focus attribute
- if ( items && items.length ){
- items.length && angular.forEach(items, function(it) {
- it = angular.element(it);
-
- // Check the element for the md-autofocus class to ensure any associated expression
- // evaluated to true.
- var isFocusable = it.hasClass('md-autofocus');
- if (isFocusable) elFound = it;
- });
- }
- return elFound;
- }
- },
-
- /**
- * Disables scroll around the passed parent element.
- * @param element Unused
- * @param {!Element|!angular.JQLite} parent Element to disable scrolling within.
- * Defaults to body if none supplied.
- * @param options Object of options to modify functionality
- * - disableScrollMask Boolean of whether or not to create a scroll mask element or
- * use the passed parent element.
- */
- disableScrollAround: function(element, parent, options) {
- $mdUtil.disableScrollAround._count = $mdUtil.disableScrollAround._count || 0;
- ++$mdUtil.disableScrollAround._count;
- if ($mdUtil.disableScrollAround._enableScrolling) return $mdUtil.disableScrollAround._enableScrolling;
- var body = $document[0].body,
- restoreBody = disableBodyScroll(),
- restoreElement = disableElementScroll(parent);
-
- return $mdUtil.disableScrollAround._enableScrolling = function() {
- if (!--$mdUtil.disableScrollAround._count) {
- restoreBody();
- restoreElement();
- delete $mdUtil.disableScrollAround._enableScrolling;
- }
- };
-
- // Creates a virtual scrolling mask to absorb touchmove, keyboard, scrollbar clicking, and wheel events
- function disableElementScroll(element) {
- element = angular.element(element || body);
- var scrollMask;
- if (options && options.disableScrollMask) {
- scrollMask = element;
- } else {
- element = element[0];
- scrollMask = angular.element(
- '
' +
- ' ' +
- '
');
- element.appendChild(scrollMask[0]);
- }
-
- scrollMask.on('wheel', preventDefault);
- scrollMask.on('touchmove', preventDefault);
-
- return function restoreScroll() {
- scrollMask.off('wheel');
- scrollMask.off('touchmove');
- scrollMask[0].parentNode.removeChild(scrollMask[0]);
- delete $mdUtil.disableScrollAround._enableScrolling;
- };
-
- function preventDefault(e) {
- e.preventDefault();
- }
- }
-
- // Converts the body to a position fixed block and translate it to the proper scroll position
- function disableBodyScroll() {
- var htmlNode = body.parentNode;
- var restoreHtmlStyle = htmlNode.style.cssText || '';
- var restoreBodyStyle = body.style.cssText || '';
- var scrollOffset = $mdUtil.scrollTop(body);
- var clientWidth = body.clientWidth;
-
- if (body.scrollHeight > body.clientHeight + 1) {
- applyStyles(body, {
- position: 'fixed',
- width: '100%',
- top: -scrollOffset + 'px'
- });
-
- htmlNode.style.overflowY = 'scroll';
- }
-
- if (body.clientWidth < clientWidth) applyStyles(body, {overflow: 'hidden'});
-
- return function restoreScroll() {
- body.style.cssText = restoreBodyStyle;
- htmlNode.style.cssText = restoreHtmlStyle;
- body.scrollTop = scrollOffset;
- htmlNode.scrollTop = scrollOffset;
- };
- }
-
- function applyStyles(el, styles) {
- for (var key in styles) {
- el.style[key] = styles[key];
- }
- }
- },
- enableScrolling: function() {
- var method = this.disableScrollAround._enableScrolling;
- method && method();
- },
- floatingScrollbars: function() {
- if (this.floatingScrollbars.cached === undefined) {
- var tempNode = angular.element('
').css({
- width: '100%',
- 'z-index': -1,
- position: 'absolute',
- height: '35px',
- 'overflow-y': 'scroll'
- });
- tempNode.children().css('height', '60px');
-
- $document[0].body.appendChild(tempNode[0]);
- this.floatingScrollbars.cached = (tempNode[0].offsetWidth == tempNode[0].childNodes[0].offsetWidth);
- tempNode.remove();
- }
- return this.floatingScrollbars.cached;
- },
-
- // Mobile safari only allows you to set focus in click event listeners...
- forceFocus: function(element) {
- var node = element[0] || element;
-
- document.addEventListener('click', function focusOnClick(ev) {
- if (ev.target === node && ev.$focus) {
- node.focus();
- ev.stopImmediatePropagation();
- ev.preventDefault();
- node.removeEventListener('click', focusOnClick);
- }
- }, true);
-
- var newEvent = document.createEvent('MouseEvents');
- newEvent.initMouseEvent('click', false, true, window, {}, 0, 0, 0, 0,
- false, false, false, false, 0, null);
- newEvent.$material = true;
- newEvent.$focus = true;
- node.dispatchEvent(newEvent);
- },
-
- /**
- * facade to build md-backdrop element with desired styles
- * NOTE: Use $compile to trigger backdrop postLink function
- */
- createBackdrop: function(scope, addClass) {
- return $compile($mdUtil.supplant('', [addClass]))(scope);
- },
-
- /**
- * supplant() method from Crockford's `Remedial Javascript`
- * Equivalent to use of $interpolate; without dependency on
- * interpolation symbols and scope. Note: the '{}' can
- * be property names, property chains, or array indices.
- */
- supplant: function(template, values, pattern) {
- pattern = pattern || /\{([^\{\}]*)\}/g;
- return template.replace(pattern, function(a, b) {
- var p = b.split('.'),
- r = values;
- try {
- for (var s in p) {
- if (p.hasOwnProperty(s) ) {
- r = r[p[s]];
- }
- }
- } catch (e) {
- r = a;
- }
- return (typeof r === 'string' || typeof r === 'number') ? r : a;
- });
- },
-
- fakeNgModel: function() {
- return {
- $fake: true,
- $setTouched: angular.noop,
- $setViewValue: function(value) {
- this.$viewValue = value;
- this.$render(value);
- this.$viewChangeListeners.forEach(function(cb) {
- cb();
- });
- },
- $isEmpty: function(value) {
- return ('' + value).length === 0;
- },
- $parsers: [],
- $formatters: [],
- $viewChangeListeners: [],
- $render: angular.noop
- };
- },
-
- // Returns a function, that, as long as it continues to be invoked, will not
- // be triggered. The function will be called after it stops being called for
- // N milliseconds.
- // @param wait Integer value of msecs to delay (since last debounce reset); default value 10 msecs
- // @param invokeApply should the $timeout trigger $digest() dirty checking
- debounce: function(func, wait, scope, invokeApply) {
- var timer;
-
- return function debounced() {
- var context = scope,
- args = Array.prototype.slice.call(arguments);
-
- $timeout.cancel(timer);
- timer = $timeout(function() {
-
- timer = undefined;
- func.apply(context, args);
-
- }, wait || 10, invokeApply);
- };
- },
-
- // Returns a function that can only be triggered every `delay` milliseconds.
- // In other words, the function will not be called unless it has been more
- // than `delay` milliseconds since the last call.
- throttle: function throttle(func, delay) {
- var recent;
- return function throttled() {
- var context = this;
- var args = arguments;
- var now = $mdUtil.now();
-
- if (!recent || (now - recent > delay)) {
- func.apply(context, args);
- recent = now;
- }
- };
- },
-
- /**
- * Measures the number of milliseconds taken to run the provided callback
- * function. Uses a high-precision timer if available.
- */
- time: function time(cb) {
- var start = $mdUtil.now();
- cb();
- return $mdUtil.now() - start;
- },
-
- /**
- * Create an implicit getter that caches its `getter()`
- * lookup value
- */
- valueOnUse : function (scope, key, getter) {
- var value = null, args = Array.prototype.slice.call(arguments);
- var params = (args.length > 3) ? args.slice(3) : [ ];
-
- Object.defineProperty(scope, key, {
- get: function () {
- if (value === null) value = getter.apply(scope, params);
- return value;
- }
- });
- },
-
- /**
- * Get a unique ID.
- *
- * @returns {string} an unique numeric string
- */
- nextUid: function() {
- return '' + nextUniqueId++;
- },
-
- // Stop watchers and events from firing on a scope without destroying it,
- // by disconnecting it from its parent and its siblings' linked lists.
- disconnectScope: function disconnectScope(scope) {
- if (!scope) return;
-
- // we can't destroy the root scope or a scope that has been already destroyed
- if (scope.$root === scope) return;
- if (scope.$$destroyed) return;
-
- var parent = scope.$parent;
- scope.$$disconnected = true;
-
- // See Scope.$destroy
- if (parent.$$childHead === scope) parent.$$childHead = scope.$$nextSibling;
- if (parent.$$childTail === scope) parent.$$childTail = scope.$$prevSibling;
- if (scope.$$prevSibling) scope.$$prevSibling.$$nextSibling = scope.$$nextSibling;
- if (scope.$$nextSibling) scope.$$nextSibling.$$prevSibling = scope.$$prevSibling;
-
- scope.$$nextSibling = scope.$$prevSibling = null;
-
- },
-
- // Undo the effects of disconnectScope above.
- reconnectScope: function reconnectScope(scope) {
- if (!scope) return;
-
- // we can't disconnect the root node or scope already disconnected
- if (scope.$root === scope) return;
- if (!scope.$$disconnected) return;
-
- var child = scope;
-
- var parent = child.$parent;
- child.$$disconnected = false;
- // See Scope.$new for this logic...
- child.$$prevSibling = parent.$$childTail;
- if (parent.$$childHead) {
- parent.$$childTail.$$nextSibling = child;
- parent.$$childTail = child;
- } else {
- parent.$$childHead = parent.$$childTail = child;
- }
- },
-
- /*
- * getClosest replicates jQuery.closest() to walk up the DOM tree until it finds a matching nodeName
- *
- * @param el Element to start walking the DOM from
- * @param check Either a string or a function. If a string is passed, it will be evaluated against
- * each of the parent nodes' tag name. If a function is passed, the loop will call it with each of
- * the parents and will use the return value to determine whether the node is a match.
- * @param onlyParent Only start checking from the parent element, not `el`.
- */
- getClosest: function getClosest(el, validateWith, onlyParent) {
- if ( angular.isString(validateWith) ) {
- var tagName = validateWith.toUpperCase();
- validateWith = function(el) {
- return el.nodeName === tagName;
- };
- }
-
- if (el instanceof angular.element) el = el[0];
- if (onlyParent) el = el.parentNode;
- if (!el) return null;
-
- do {
- if (validateWith(el)) {
- return el;
- }
- } while (el = el.parentNode);
-
- return null;
- },
-
- /**
- * Build polyfill for the Node.contains feature (if needed)
- */
- elementContains: function(node, child) {
- var hasContains = (window.Node && window.Node.prototype && Node.prototype.contains);
- var findFn = hasContains ? angular.bind(node, node.contains) : angular.bind(node, function(arg) {
- // compares the positions of two nodes and returns a bitmask
- return (node === child) || !!(this.compareDocumentPosition(arg) & 16)
- });
-
- return findFn(child);
- },
-
- /**
- * Functional equivalent for $element.filter(‘md-bottom-sheet’)
- * useful with interimElements where the element and its container are important...
- *
- * @param {[]} elements to scan
- * @param {string} name of node to find (e.g. 'md-dialog')
- * @param {boolean=} optional flag to allow deep scans; defaults to 'false'.
- * @param {boolean=} optional flag to enable log warnings; defaults to false
- */
- extractElementByName: function(element, nodeName, scanDeep, warnNotFound) {
- var found = scanTree(element);
- if (!found && !!warnNotFound) {
- $log.warn( $mdUtil.supplant("Unable to find node '{0}' in element '{1}'.",[nodeName, element[0].outerHTML]) );
- }
-
- return angular.element(found || element);
-
- /**
- * Breadth-First tree scan for element with matching `nodeName`
- */
- function scanTree(element) {
- return scanLevel(element) || (!!scanDeep ? scanChildren(element) : null);
- }
-
- /**
- * Case-insensitive scan of current elements only (do not descend).
- */
- function scanLevel(element) {
- if ( element ) {
- for (var i = 0, len = element.length; i < len; i++) {
- if (element[i].nodeName.toLowerCase() === nodeName) {
- return element[i];
- }
- }
- }
- return null;
- }
-
- /**
- * Scan children of specified node
- */
- function scanChildren(element) {
- var found;
- if ( element ) {
- for (var i = 0, len = element.length; i < len; i++) {
- var target = element[i];
- if ( !found ) {
- for (var j = 0, numChild = target.childNodes.length; j < numChild; j++) {
- found = found || scanTree([target.childNodes[j]]);
- }
- }
- }
- }
- return found;
- }
-
- },
-
- /**
- * Give optional properties with no value a boolean true if attr provided or false otherwise
- */
- initOptionalProperties: function(scope, attr, defaults) {
- defaults = defaults || {};
- angular.forEach(scope.$$isolateBindings, function(binding, key) {
- if (binding.optional && angular.isUndefined(scope[key])) {
- var attrIsDefined = angular.isDefined(attr[binding.attrName]);
- scope[key] = angular.isDefined(defaults[key]) ? defaults[key] : attrIsDefined;
- }
- });
- },
-
- /**
- * Alternative to $timeout calls with 0 delay.
- * nextTick() coalesces all calls within a single frame
- * to minimize $digest thrashing
- *
- * @param callback
- * @param digest
- * @returns {*}
- */
- nextTick: function(callback, digest, scope) {
- //-- grab function reference for storing state details
- var nextTick = $mdUtil.nextTick;
- var timeout = nextTick.timeout;
- var queue = nextTick.queue || [];
-
- //-- add callback to the queue
- queue.push({scope: scope, callback: callback});
-
- //-- set default value for digest
- if (digest == null) digest = true;
-
- //-- store updated digest/queue values
- nextTick.digest = nextTick.digest || digest;
- nextTick.queue = queue;
-
- //-- either return existing timeout or create a new one
- return timeout || (nextTick.timeout = $timeout(processQueue, 0, false));
-
- /**
- * Grab a copy of the current queue
- * Clear the queue for future use
- * Process the existing queue
- * Trigger digest if necessary
- */
- function processQueue() {
- var queue = nextTick.queue;
- var digest = nextTick.digest;
-
- nextTick.queue = [];
- nextTick.timeout = null;
- nextTick.digest = false;
-
- queue.forEach(function(queueItem) {
- var skip = queueItem.scope && queueItem.scope.$$destroyed;
- if (!skip) {
- queueItem.callback();
- }
- });
-
- if (digest) $rootScope.$digest();
- }
- },
-
- /**
- * Processes a template and replaces the start/end symbols if the application has
- * overriden them.
- *
- * @param template The template to process whose start/end tags may be replaced.
- * @returns {*}
- */
- processTemplate: function(template) {
- if (usesStandardSymbols) {
- return template;
- } else {
- if (!template || !angular.isString(template)) return template;
- return template.replace(/\{\{/g, startSymbol).replace(/}}/g, endSymbol);
- }
- },
-
- /**
- * Scan up dom hierarchy for enabled parent;
- */
- getParentWithPointerEvents: function (element) {
- var parent = element.parent();
-
- // jqLite might return a non-null, but still empty, parent; so check for parent and length
- while (hasComputedStyle(parent, 'pointer-events', 'none')) {
- parent = parent.parent();
- }
-
- return parent;
- },
-
- getNearestContentElement: function (element) {
- var current = element.parent()[0];
- // Look for the nearest parent md-content, stopping at the rootElement.
- while (current && current !== $rootElement[0] && current !== document.body && current.nodeName.toUpperCase() !== 'MD-CONTENT') {
- current = current.parentNode;
- }
- return current;
- },
-
- /**
- * Checks if the current browser is natively supporting the `sticky` position.
- * @returns {string} supported sticky property name
- */
- checkStickySupport: function() {
- var stickyProp;
- var testEl = angular.element('
');
- $document[0].body.appendChild(testEl[0]);
-
- var stickyProps = ['sticky', '-webkit-sticky'];
- for (var i = 0; i < stickyProps.length; ++i) {
- testEl.css({
- position: stickyProps[i],
- top: 0,
- 'z-index': 2
- });
-
- if (testEl.css('position') == stickyProps[i]) {
- stickyProp = stickyProps[i];
- break;
- }
- }
-
- testEl.remove();
-
- return stickyProp;
- },
-
- /**
- * Parses an attribute value, mostly a string.
- * By default checks for negated values and returns `false´ if present.
- * Negated values are: (native falsy) and negative strings like:
- * `false` or `0`.
- * @param value Attribute value which should be parsed.
- * @param negatedCheck When set to false, won't check for negated values.
- * @returns {boolean}
- */
- parseAttributeBoolean: function(value, negatedCheck) {
- return value === '' || !!value && (negatedCheck === false || value !== 'false' && value !== '0');
- },
-
- hasComputedStyle: hasComputedStyle,
-
- /**
- * Returns true if the parent form of the element has been submitted.
- *
- * @param element An Angular or HTML5 element.
- *
- * @returns {boolean}
- */
- isParentFormSubmitted: function(element) {
- var parent = $mdUtil.getClosest(element, 'form');
- var form = parent ? angular.element(parent).controller('form') : null;
-
- return form ? form.$submitted : false;
- },
-
- /**
- * Animate the requested element's scrollTop to the requested scrollPosition with basic easing.
- *
- * @param element The element to scroll.
- * @param scrollEnd The new/final scroll position.
- */
- animateScrollTo: function(element, scrollEnd) {
- var scrollStart = element.scrollTop;
- var scrollChange = scrollEnd - scrollStart;
- var scrollingDown = scrollStart < scrollEnd;
- var startTime = $mdUtil.now();
-
- $$rAF(scrollChunk);
-
- function scrollChunk() {
- var newPosition = calculateNewPosition();
-
- element.scrollTop = newPosition;
-
- if (scrollingDown ? newPosition < scrollEnd : newPosition > scrollEnd) {
- $$rAF(scrollChunk);
- }
- }
-
- function calculateNewPosition() {
- var duration = 1000;
- var currentTime = $mdUtil.now() - startTime;
-
- return ease(currentTime, scrollStart, scrollChange, duration);
- }
-
- function ease(currentTime, start, change, duration) {
- // If the duration has passed (which can occur if our app loses focus due to $$rAF), jump
- // straight to the proper position
- if (currentTime > duration) {
- return start + change;
- }
-
- var ts = (currentTime /= duration) * currentTime;
- var tc = ts * currentTime;
-
- return start + change * (-2 * tc + 3 * ts);
- }
- }
- };
-
-
-// Instantiate other namespace utility methods
-
- $mdUtil.dom.animator = $$mdAnimate($mdUtil);
-
- return $mdUtil;
-
- function getNode(el) {
- return el[0] || el;
- }
-
-}
-UtilFactory.$inject = ["$document", "$timeout", "$compile", "$rootScope", "$$mdAnimate", "$interpolate", "$log", "$rootElement", "$window", "$$rAF"];
-
-/*
- * Since removing jQuery from the demos, some code that uses `element.focus()` is broken.
- * We need to add `element.focus()`, because it's testable unlike `element[0].focus`.
- */
-
-angular.element.prototype.focus = angular.element.prototype.focus || function() {
- if (this.length) {
- this[0].focus();
- }
- return this;
- };
-angular.element.prototype.blur = angular.element.prototype.blur || function() {
- if (this.length) {
- this[0].blur();
- }
- return this;
- };
-
-})();
-(function(){
-"use strict";
-
-/**
- * @ngdoc module
- * @name material.core.aria
- * @description
- * Aria Expectations for ngMaterial components.
- */
-angular
- .module('material.core')
- .provider('$mdAria', MdAriaProvider);
-
-/**
- * @ngdoc service
- * @name $mdAriaProvider
- * @module material.core.aria
- *
- * @description
- *
- * Modify options of the `$mdAria` service, which will be used by most of the Angular Material components.
- **
- *
- * You are able to disable `$mdAria` warnings, by using the following markup.
- *
- * app.config(function($mdAriaProvider) {
- * // Globally disables all ARIA warnings.
- * $mdAriaProvider.disableWarnings();
- * });
- *
- *
- */
-function MdAriaProvider() {
-
- var self = this;
-
- /**
- * Whether we should show ARIA warnings in the console, if labels are missing on the element
- * By default the warnings are enabled
- */
- self.showWarnings = true;
-
- return {
- disableWarnings: disableWarnings,
- $get: ["$$rAF", "$log", "$window", "$interpolate", function($$rAF, $log, $window, $interpolate) {
- return MdAriaService.apply(self, arguments);
- }]
- };
-
- /**
- * @ngdoc method
- * @name $mdAriaProvider#disableWarnings
- */
- function disableWarnings() {
- self.showWarnings = false;
- }
-}
-
-/*
- * @ngInject
- */
-function MdAriaService($$rAF, $log, $window, $interpolate) {
-
- // Load the showWarnings option from the current context and store it inside of a scope variable,
- // because the context will be probably lost in some function calls.
- var showWarnings = this.showWarnings;
-
- return {
- expect: expect,
- expectAsync: expectAsync,
- expectWithText: expectWithText,
- expectWithoutText: expectWithoutText
- };
-
- /**
- * Check if expected attribute has been specified on the target element or child
- * @param element
- * @param attrName
- * @param {optional} defaultValue What to set the attr to if no value is found
- */
- function expect(element, attrName, defaultValue) {
-
- var node = angular.element(element)[0] || element;
-
- // if node exists and neither it nor its children have the attribute
- if (node &&
- ((!node.hasAttribute(attrName) ||
- node.getAttribute(attrName).length === 0) &&
- !childHasAttribute(node, attrName))) {
-
- defaultValue = angular.isString(defaultValue) ? defaultValue.trim() : '';
- if (defaultValue.length) {
- element.attr(attrName, defaultValue);
- } else if (showWarnings) {
- $log.warn('ARIA: Attribute "', attrName, '", required for accessibility, is missing on node:', node);
- }
-
- }
- }
-
- function expectAsync(element, attrName, defaultValueGetter) {
- // Problem: when retrieving the element's contents synchronously to find the label,
- // the text may not be defined yet in the case of a binding.
- // There is a higher chance that a binding will be defined if we wait one frame.
- $$rAF(function() {
- expect(element, attrName, defaultValueGetter());
- });
- }
-
- function expectWithText(element, attrName) {
- var content = getText(element) || "";
- var hasBinding = content.indexOf($interpolate.startSymbol()) > -1;
-
- if ( hasBinding ) {
- expectAsync(element, attrName, function() {
- return getText(element);
- });
- } else {
- expect(element, attrName, content);
- }
- }
-
- function expectWithoutText(element, attrName) {
- var content = getText(element);
- var hasBinding = content.indexOf($interpolate.startSymbol()) > -1;
-
- if ( !hasBinding && !content) {
- expect(element, attrName, content);
- }
- }
-
- function getText(element) {
- element = element[0] || element;
- var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
- var text = '';
-
- var node;
- while (node = walker.nextNode()) {
- if (!isAriaHiddenNode(node)) {
- text += node.textContent;
- }
- }
-
- return text.trim() || '';
-
- function isAriaHiddenNode(node) {
- while (node.parentNode && (node = node.parentNode) !== element) {
- if (node.getAttribute && node.getAttribute('aria-hidden') === 'true') {
- return true;
- }
- }
- }
- }
-
- function childHasAttribute(node, attrName) {
- var hasChildren = node.hasChildNodes(),
- hasAttr = false;
-
- function isHidden(el) {
- var style = el.currentStyle ? el.currentStyle : $window.getComputedStyle(el);
- return (style.display === 'none');
- }
-
- if (hasChildren) {
- var children = node.childNodes;
- for (var i=0; i < children.length; i++) {
- var child = children[i];
- if (child.nodeType === 1 && child.hasAttribute(attrName)) {
- if (!isHidden(child)) {
- hasAttr = true;
- }
- }
- }
- }
-
- return hasAttr;
- }
-}
-MdAriaService.$inject = ["$$rAF", "$log", "$window", "$interpolate"];
-
-})();
-(function(){
-"use strict";
-
-angular
- .module('material.core')
- .service('$mdCompiler', mdCompilerService);
-
-function mdCompilerService($q, $templateRequest, $injector, $compile, $controller) {
- /* jshint validthis: true */
-
- /*
- * @ngdoc service
- * @name $mdCompiler
- * @module material.core
- * @description
- * The $mdCompiler service is an abstraction of angular's compiler, that allows the developer
- * to easily compile an element with a templateUrl, controller, and locals.
- *
- * @usage
- *
- * $mdCompiler.compile({
- * templateUrl: 'modal.html',
- * controller: 'ModalCtrl',
- * locals: {
- * modal: myModalInstance;
- * }
- * }).then(function(compileData) {
- * compileData.element; // modal.html's template in an element
- * compileData.link(myScope); //attach controller & scope to element
- * });
- *
- */
-
- /*
- * @ngdoc method
- * @name $mdCompiler#compile
- * @description A helper to compile an HTML template/templateUrl with a given controller,
- * locals, and scope.
- * @param {object} options An options object, with the following properties:
- *
- * - `controller` - `{(string=|function()=}` Controller fn that should be associated with
- * newly created scope or the name of a registered controller if passed as a string.
- * - `controllerAs` - `{string=}` A controller alias name. If present the controller will be
- * published to scope under the `controllerAs` name.
- * - `template` - `{string=}` An html template as a string.
- * - `templateUrl` - `{string=}` A path to an html template.
- * - `transformTemplate` - `{function(template)=}` A function which transforms the template after
- * it is loaded. It will be given the template string as a parameter, and should
- * return a a new string representing the transformed template.
- * - `resolve` - `{Object.=}` - An optional map of dependencies which should
- * be injected into the controller. If any of these dependencies are promises, the compiler
- * will wait for them all to be resolved, or if one is rejected before the controller is
- * instantiated `compile()` will fail..
- * * `key` - `{string}`: a name of a dependency to be injected into the controller.
- * * `factory` - `{string|function}`: If `string` then it is an alias for a service.
- * Otherwise if function, then it is injected and the return value is treated as the
- * dependency. If the result is a promise, it is resolved before its value is
- * injected into the controller.
- *
- * @returns {object=} promise A promise, which will be resolved with a `compileData` object.
- * `compileData` has the following properties:
- *
- * - `element` - `{element}`: an uncompiled element matching the provided template.
- * - `link` - `{function(scope)}`: A link function, which, when called, will compile
- * the element and instantiate the provided controller (if given).
- * - `locals` - `{object}`: The locals which will be passed into the controller once `link` is
- * called. If `bindToController` is true, they will be coppied to the ctrl instead
- * - `bindToController` - `bool`: bind the locals to the controller, instead of passing them in.
- */
- this.compile = function(options) {
- var templateUrl = options.templateUrl;
- var template = options.template || '';
- var controller = options.controller;
- var controllerAs = options.controllerAs;
- var resolve = angular.extend({}, options.resolve || {});
- var locals = angular.extend({}, options.locals || {});
- var transformTemplate = options.transformTemplate || angular.identity;
- var bindToController = options.bindToController;
-
- // Take resolve values and invoke them.
- // Resolves can either be a string (value: 'MyRegisteredAngularConst'),
- // or an invokable 'factory' of sorts: (value: function ValueGetter($dependency) {})
- angular.forEach(resolve, function(value, key) {
- if (angular.isString(value)) {
- resolve[key] = $injector.get(value);
- } else {
- resolve[key] = $injector.invoke(value);
- }
- });
- //Add the locals, which are just straight values to inject
- //eg locals: { three: 3 }, will inject three into the controller
- angular.extend(resolve, locals);
-
- if (templateUrl) {
- resolve.$template = $templateRequest(templateUrl)
- .then(function(response) {
- return response;
- });
- } else {
- resolve.$template = $q.when(template);
- }
-
- // Wait for all the resolves to finish if they are promises
- return $q.all(resolve).then(function(locals) {
-
- var compiledData;
- var template = transformTemplate(locals.$template, options);
- var element = options.element || angular.element('
').html(template.trim()).contents();
- var linkFn = $compile(element);
-
- // Return a linking function that can be used later when the element is ready
- return compiledData = {
- locals: locals,
- element: element,
- link: function link(scope) {
- locals.$scope = scope;
-
- //Instantiate controller if it exists, because we have scope
- if (controller) {
- var invokeCtrl = $controller(controller, locals, true);
- if (bindToController) {
- angular.extend(invokeCtrl.instance, locals);
- }
- var ctrl = invokeCtrl();
- //See angular-route source for this logic
- element.data('$ngControllerController', ctrl);
- element.children().data('$ngControllerController', ctrl);
-
- if (controllerAs) {
- scope[controllerAs] = ctrl;
- }
-
- // Publish reference to this controller
- compiledData.controller = ctrl;
- }
- return linkFn(scope);
- }
- };
- });
-
- };
-}
-mdCompilerService.$inject = ["$q", "$templateRequest", "$injector", "$compile", "$controller"];
-
-})();
-(function(){
-"use strict";
-
-var HANDLERS = {};
-
-/* The state of the current 'pointer'
- * The pointer represents the state of the current touch.
- * It contains normalized x and y coordinates from DOM events,
- * as well as other information abstracted from the DOM.
- */
-
-var pointer, lastPointer, forceSkipClickHijack = false;
-
-/**
- * The position of the most recent click if that click was on a label element.
- * @type {{x: number, y: number}?}
- */
-var lastLabelClickPos = null;
-
-// Used to attach event listeners once when multiple ng-apps are running.
-var isInitialized = false;
-
-angular
- .module('material.core.gestures', [ ])
- .provider('$mdGesture', MdGestureProvider)
- .factory('$$MdGestureHandler', MdGestureHandler)
- .run( attachToDocument );
-
-/**
- * @ngdoc service
- * @name $mdGestureProvider
- * @module material.core.gestures
- *
- * @description
- * In some scenarios on Mobile devices (without jQuery), the click events should NOT be hijacked.
- * `$mdGestureProvider` is used to configure the Gesture module to ignore or skip click hijacking on mobile
- * devices.
- *
- *
- * app.config(function($mdGestureProvider) {
- *
- * // For mobile devices without jQuery loaded, do not
- * // intercept click events during the capture phase.
- * $mdGestureProvider.skipClickHijack();
- *
- * });
- *
- *
- */
-function MdGestureProvider() { }
-
-MdGestureProvider.prototype = {
-
- // Publish access to setter to configure a variable BEFORE the
- // $mdGesture service is instantiated...
- skipClickHijack: function() {
- return forceSkipClickHijack = true;
- },
-
- /**
- * $get is used to build an instance of $mdGesture
- * @ngInject
- */
- $get : ["$$MdGestureHandler", "$$rAF", "$timeout", function($$MdGestureHandler, $$rAF, $timeout) {
- return new MdGesture($$MdGestureHandler, $$rAF, $timeout);
- }]
-};
-
-
-
-/**
- * MdGesture factory construction function
- * @ngInject
- */
-function MdGesture($$MdGestureHandler, $$rAF, $timeout) {
- var userAgent = navigator.userAgent || navigator.vendor || window.opera;
- var isIos = userAgent.match(/ipad|iphone|ipod/i);
- var isAndroid = userAgent.match(/android/i);
- var touchActionProperty = getTouchAction();
- var hasJQuery = (typeof window.jQuery !== 'undefined') && (angular.element === window.jQuery);
-
- var self = {
- handler: addHandler,
- register: register,
- isIos: isIos,
- isAndroid: isAndroid,
- // On mobile w/out jQuery, we normally intercept clicks. Should we skip that?
- isHijackingClicks: (isIos || isAndroid) && !hasJQuery && !forceSkipClickHijack
- };
-
- if (self.isHijackingClicks) {
- var maxClickDistance = 6;
- self.handler('click', {
- options: {
- maxDistance: maxClickDistance
- },
- onEnd: checkDistanceAndEmit('click')
- });
-
- self.handler('focus', {
- options: {
- maxDistance: maxClickDistance
- },
- onEnd: function(ev, pointer) {
- if (pointer.distance < this.state.options.maxDistance) {
- if (canFocus(ev.target)) {
- this.dispatchEvent(ev, 'focus', pointer);
- ev.target.focus();
- }
- }
-
- function canFocus(element) {
- var focusableElements = ['INPUT', 'SELECT', 'BUTTON', 'TEXTAREA', 'VIDEO', 'AUDIO'];
-
- return (element.getAttribute('tabindex') != '-1') &&
- !element.hasAttribute('DISABLED') &&
- (element.hasAttribute('tabindex') || element.hasAttribute('href') || element.isContentEditable ||
- (focusableElements.indexOf(element.nodeName) != -1));
- }
- }
- });
-
- self.handler('mouseup', {
- options: {
- maxDistance: maxClickDistance
- },
- onEnd: checkDistanceAndEmit('mouseup')
- });
-
- self.handler('mousedown', {
- onStart: function(ev) {
- this.dispatchEvent(ev, 'mousedown');
- }
- });
- }
-
- function checkDistanceAndEmit(eventName) {
- return function(ev, pointer) {
- if (pointer.distance < this.state.options.maxDistance) {
- this.dispatchEvent(ev, eventName, pointer);
- }
- };
- }
-
- /*
- * Register an element to listen for a handler.
- * This allows an element to override the default options for a handler.
- * Additionally, some handlers like drag and hold only dispatch events if
- * the domEvent happens inside an element that's registered to listen for these events.
- *
- * @see GestureHandler for how overriding of default options works.
- * @example $mdGesture.register(myElement, 'drag', { minDistance: 20, horziontal: false })
- */
- function register(element, handlerName, options) {
- var handler = HANDLERS[handlerName.replace(/^\$md./, '')];
- if (!handler) {
- throw new Error('Failed to register element with handler ' + handlerName + '. ' +
- 'Available handlers: ' + Object.keys(HANDLERS).join(', '));
- }
- return handler.registerElement(element, options);
- }
-
- /*
- * add a handler to $mdGesture. see below.
- */
- function addHandler(name, definition) {
- var handler = new $$MdGestureHandler(name);
- angular.extend(handler, definition);
- HANDLERS[name] = handler;
-
- return self;
- }
-
- /*
- * Register handlers. These listen to touch/start/move events, interpret them,
- * and dispatch gesture events depending on options & conditions. These are all
- * instances of GestureHandler.
- * @see GestureHandler
- */
- return self
- /*
- * The press handler dispatches an event on touchdown/touchend.
- * It's a simple abstraction of touch/mouse/pointer start and end.
- */
- .handler('press', {
- onStart: function (ev, pointer) {
- this.dispatchEvent(ev, '$md.pressdown');
- },
- onEnd: function (ev, pointer) {
- this.dispatchEvent(ev, '$md.pressup');
- }
- })
-
- /*
- * The hold handler dispatches an event if the user keeps their finger within
- * the same area for ms.
- * The hold handler will only run if a parent of the touch target is registered
- * to listen for hold events through $mdGesture.register()
- */
- .handler('hold', {
- options: {
- maxDistance: 6,
- delay: 500
- },
- onCancel: function () {
- $timeout.cancel(this.state.timeout);
- },
- onStart: function (ev, pointer) {
- // For hold, require a parent to be registered with $mdGesture.register()
- // Because we prevent scroll events, this is necessary.
- if (!this.state.registeredParent) return this.cancel();
-
- this.state.pos = {x: pointer.x, y: pointer.y};
- this.state.timeout = $timeout(angular.bind(this, function holdDelayFn() {
- this.dispatchEvent(ev, '$md.hold');
- this.cancel(); //we're done!
- }), this.state.options.delay, false);
- },
- onMove: function (ev, pointer) {
- // Don't scroll while waiting for hold.
- // If we don't preventDefault touchmove events here, Android will assume we don't
- // want to listen to anymore touch events. It will start scrolling and stop sending
- // touchmove events.
- if (!touchActionProperty && ev.type === 'touchmove') ev.preventDefault();
-
- // If the user moves greater than pixels, stop the hold timer
- // set in onStart
- var dx = this.state.pos.x - pointer.x;
- var dy = this.state.pos.y - pointer.y;
- if (Math.sqrt(dx * dx + dy * dy) > this.options.maxDistance) {
- this.cancel();
- }
- },
- onEnd: function () {
- this.onCancel();
- }
- })
-
- /*
- * The drag handler dispatches a drag event if the user holds and moves his finger greater than
- * px in the x or y direction, depending on options.horizontal.
- * The drag will be cancelled if the user moves his finger greater than * in
- * the perpendicular direction. Eg if the drag is horizontal and the user moves his finger *
- * pixels vertically, this handler won't consider the move part of a drag.
- */
- .handler('drag', {
- options: {
- minDistance: 6,
- horizontal: true,
- cancelMultiplier: 1.5
- },
- onSetup: function(element, options) {
- if (touchActionProperty) {
- // We check for horizontal to be false, because otherwise we would overwrite the default opts.
- this.oldTouchAction = element[0].style[touchActionProperty];
- element[0].style[touchActionProperty] = options.horizontal === false ? 'pan-y' : 'pan-x';
- }
- },
- onCleanup: function(element) {
- if (this.oldTouchAction) {
- element[0].style[touchActionProperty] = this.oldTouchAction;
- }
- },
- onStart: function (ev) {
- // For drag, require a parent to be registered with $mdGesture.register()
- if (!this.state.registeredParent) this.cancel();
- },
- onMove: function (ev, pointer) {
- var shouldStartDrag, shouldCancel;
- // Don't scroll while deciding if this touchmove qualifies as a drag event.
- // If we don't preventDefault touchmove events here, Android will assume we don't
- // want to listen to anymore touch events. It will start scrolling and stop sending
- // touchmove events.
- if (!touchActionProperty && ev.type === 'touchmove') ev.preventDefault();
-
- if (!this.state.dragPointer) {
- if (this.state.options.horizontal) {
- shouldStartDrag = Math.abs(pointer.distanceX) > this.state.options.minDistance;
- shouldCancel = Math.abs(pointer.distanceY) > this.state.options.minDistance * this.state.options.cancelMultiplier;
- } else {
- shouldStartDrag = Math.abs(pointer.distanceY) > this.state.options.minDistance;
- shouldCancel = Math.abs(pointer.distanceX) > this.state.options.minDistance * this.state.options.cancelMultiplier;
- }
-
- if (shouldStartDrag) {
- // Create a new pointer representing this drag, starting at this point where the drag started.
- this.state.dragPointer = makeStartPointer(ev);
- updatePointerState(ev, this.state.dragPointer);
- this.dispatchEvent(ev, '$md.dragstart', this.state.dragPointer);
-
- } else if (shouldCancel) {
- this.cancel();
- }
- } else {
- this.dispatchDragMove(ev);
- }
- },
- // Only dispatch dragmove events every frame; any more is unnecessary
- dispatchDragMove: $$rAF.throttle(function (ev) {
- // Make sure the drag didn't stop while waiting for the next frame
- if (this.state.isRunning) {
- updatePointerState(ev, this.state.dragPointer);
- this.dispatchEvent(ev, '$md.drag', this.state.dragPointer);
- }
- }),
- onEnd: function (ev, pointer) {
- if (this.state.dragPointer) {
- updatePointerState(ev, this.state.dragPointer);
- this.dispatchEvent(ev, '$md.dragend', this.state.dragPointer);
- }
- }
- })
-
- /*
- * The swipe handler will dispatch a swipe event if, on the end of a touch,
- * the velocity and distance were high enough.
- */
- .handler('swipe', {
- options: {
- minVelocity: 0.65,
- minDistance: 10
- },
- onEnd: function (ev, pointer) {
- var eventType;
-
- if (Math.abs(pointer.velocityX) > this.state.options.minVelocity &&
- Math.abs(pointer.distanceX) > this.state.options.minDistance) {
- eventType = pointer.directionX == 'left' ? '$md.swipeleft' : '$md.swiperight';
- this.dispatchEvent(ev, eventType);
- }
- else if (Math.abs(pointer.velocityY) > this.state.options.minVelocity &&
- Math.abs(pointer.distanceY) > this.state.options.minDistance) {
- eventType = pointer.directionY == 'up' ? '$md.swipeup' : '$md.swipedown';
- this.dispatchEvent(ev, eventType);
- }
- }
- });
-
- function getTouchAction() {
- var testEl = document.createElement('div');
- var vendorPrefixes = ['', 'webkit', 'Moz', 'MS', 'ms', 'o'];
-
- for (var i = 0; i < vendorPrefixes.length; i++) {
- var prefix = vendorPrefixes[i];
- var property = prefix ? prefix + 'TouchAction' : 'touchAction';
- if (angular.isDefined(testEl.style[property])) {
- return property;
- }
- }
- }
-
-}
-MdGesture.$inject = ["$$MdGestureHandler", "$$rAF", "$timeout"];
-
-/**
- * MdGestureHandler
- * A GestureHandler is an object which is able to dispatch custom dom events
- * based on native dom {touch,pointer,mouse}{start,move,end} events.
- *
- * A gesture will manage its lifecycle through the start,move,end, and cancel
- * functions, which are called by native dom events.
- *
- * A gesture has the concept of 'options' (eg a swipe's required velocity), which can be
- * overridden by elements registering through $mdGesture.register()
- */
-function GestureHandler (name) {
- this.name = name;
- this.state = {};
-}
-
-function MdGestureHandler() {
- var hasJQuery = (typeof window.jQuery !== 'undefined') && (angular.element === window.jQuery);
-
- GestureHandler.prototype = {
- options: {},
- // jQuery listeners don't work with custom DOMEvents, so we have to dispatch events
- // differently when jQuery is loaded
- dispatchEvent: hasJQuery ? jQueryDispatchEvent : nativeDispatchEvent,
-
- // These are overridden by the registered handler
- onSetup: angular.noop,
- onCleanup: angular.noop,
- onStart: angular.noop,
- onMove: angular.noop,
- onEnd: angular.noop,
- onCancel: angular.noop,
-
- // onStart sets up a new state for the handler, which includes options from the
- // nearest registered parent element of ev.target.
- start: function (ev, pointer) {
- if (this.state.isRunning) return;
- var parentTarget = this.getNearestParent(ev.target);
- // Get the options from the nearest registered parent
- var parentTargetOptions = parentTarget && parentTarget.$mdGesture[this.name] || {};
-
- this.state = {
- isRunning: true,
- // Override the default options with the nearest registered parent's options
- options: angular.extend({}, this.options, parentTargetOptions),
- // Pass in the registered parent node to the state so the onStart listener can use
- registeredParent: parentTarget
- };
- this.onStart(ev, pointer);
- },
- move: function (ev, pointer) {
- if (!this.state.isRunning) return;
- this.onMove(ev, pointer);
- },
- end: function (ev, pointer) {
- if (!this.state.isRunning) return;
- this.onEnd(ev, pointer);
- this.state.isRunning = false;
- },
- cancel: function (ev, pointer) {
- this.onCancel(ev, pointer);
- this.state = {};
- },
-
- // Find and return the nearest parent element that has been registered to
- // listen for this handler via $mdGesture.register(element, 'handlerName').
- getNearestParent: function (node) {
- var current = node;
- while (current) {
- if ((current.$mdGesture || {})[this.name]) {
- return current;
- }
- current = current.parentNode;
- }
- return null;
- },
-
- // Called from $mdGesture.register when an element registers itself with a handler.
- // Store the options the user gave on the DOMElement itself. These options will
- // be retrieved with getNearestParent when the handler starts.
- registerElement: function (element, options) {
- var self = this;
- element[0].$mdGesture = element[0].$mdGesture || {};
- element[0].$mdGesture[this.name] = options || {};
- element.on('$destroy', onDestroy);
-
- self.onSetup(element, options || {});
-
- return onDestroy;
-
- function onDestroy() {
- delete element[0].$mdGesture[self.name];
- element.off('$destroy', onDestroy);
-
- self.onCleanup(element, options || {});
- }
- }
- };
-
- return GestureHandler;
-
- /*
- * Dispatch an event with jQuery
- * TODO: Make sure this sends bubbling events
- *
- * @param srcEvent the original DOM touch event that started this.
- * @param eventType the name of the custom event to send (eg 'click' or '$md.drag')
- * @param eventPointer the pointer object that matches this event.
- */
- function jQueryDispatchEvent(srcEvent, eventType, eventPointer) {
- eventPointer = eventPointer || pointer;
- var eventObj = new angular.element.Event(eventType);
-
- eventObj.$material = true;
- eventObj.pointer = eventPointer;
- eventObj.srcEvent = srcEvent;
-
- angular.extend(eventObj, {
- clientX: eventPointer.x,
- clientY: eventPointer.y,
- screenX: eventPointer.x,
- screenY: eventPointer.y,
- pageX: eventPointer.x,
- pageY: eventPointer.y,
- ctrlKey: srcEvent.ctrlKey,
- altKey: srcEvent.altKey,
- shiftKey: srcEvent.shiftKey,
- metaKey: srcEvent.metaKey
- });
- angular.element(eventPointer.target).trigger(eventObj);
- }
-
- /*
- * NOTE: nativeDispatchEvent is very performance sensitive.
- * @param srcEvent the original DOM touch event that started this.
- * @param eventType the name of the custom event to send (eg 'click' or '$md.drag')
- * @param eventPointer the pointer object that matches this event.
- */
- function nativeDispatchEvent(srcEvent, eventType, eventPointer) {
- eventPointer = eventPointer || pointer;
- var eventObj;
-
- if (eventType === 'click' || eventType == 'mouseup' || eventType == 'mousedown' ) {
- eventObj = document.createEvent('MouseEvents');
- eventObj.initMouseEvent(
- eventType, true, true, window, srcEvent.detail,
- eventPointer.x, eventPointer.y, eventPointer.x, eventPointer.y,
- srcEvent.ctrlKey, srcEvent.altKey, srcEvent.shiftKey, srcEvent.metaKey,
- srcEvent.button, srcEvent.relatedTarget || null
- );
-
- } else {
- eventObj = document.createEvent('CustomEvent');
- eventObj.initCustomEvent(eventType, true, true, {});
- }
- eventObj.$material = true;
- eventObj.pointer = eventPointer;
- eventObj.srcEvent = srcEvent;
- eventPointer.target.dispatchEvent(eventObj);
- }
-
-}
-
-/**
- * Attach Gestures: hook document and check shouldHijack clicks
- * @ngInject
- */
-function attachToDocument( $mdGesture, $$MdGestureHandler ) {
-
- // Polyfill document.contains for IE11.
- // TODO: move to util
- document.contains || (document.contains = function (node) {
- return document.body.contains(node);
- });
-
- if (!isInitialized && $mdGesture.isHijackingClicks ) {
- /*
- * If hijack clicks is true, we preventDefault any click that wasn't
- * sent by ngMaterial. This is because on older Android & iOS, a false, or 'ghost',
- * click event will be sent ~400ms after a touchend event happens.
- * The only way to know if this click is real is to prevent any normal
- * click events, and add a flag to events sent by material so we know not to prevent those.
- *
- * Two exceptions to click events that should be prevented are:
- * - click events sent by the keyboard (eg form submit)
- * - events that originate from an Ionic app
- */
- document.addEventListener('click' , clickHijacker , true);
- document.addEventListener('mouseup' , mouseInputHijacker, true);
- document.addEventListener('mousedown', mouseInputHijacker, true);
- document.addEventListener('focus' , mouseInputHijacker, true);
-
- isInitialized = true;
- }
-
- function mouseInputHijacker(ev) {
- var isKeyClick = !ev.clientX && !ev.clientY;
- if (!isKeyClick && !ev.$material && !ev.isIonicTap
- && !isInputEventFromLabelClick(ev)) {
- ev.preventDefault();
- ev.stopPropagation();
- }
- }
-
- function clickHijacker(ev) {
- var isKeyClick = ev.clientX === 0 && ev.clientY === 0;
- if (!isKeyClick && !ev.$material && !ev.isIonicTap
- && !isInputEventFromLabelClick(ev)) {
- ev.preventDefault();
- ev.stopPropagation();
- lastLabelClickPos = null;
- } else {
- lastLabelClickPos = null;
- if (ev.target.tagName.toLowerCase() == 'label') {
- lastLabelClickPos = {x: ev.x, y: ev.y};
- }
- }
- }
-
-
- // Listen to all events to cover all platforms.
- var START_EVENTS = 'mousedown touchstart pointerdown';
- var MOVE_EVENTS = 'mousemove touchmove pointermove';
- var END_EVENTS = 'mouseup mouseleave touchend touchcancel pointerup pointercancel';
-
- angular.element(document)
- .on(START_EVENTS, gestureStart)
- .on(MOVE_EVENTS, gestureMove)
- .on(END_EVENTS, gestureEnd)
- // For testing
- .on('$$mdGestureReset', function gestureClearCache () {
- lastPointer = pointer = null;
- });
-
- /*
- * When a DOM event happens, run all registered gesture handlers' lifecycle
- * methods which match the DOM event.
- * Eg when a 'touchstart' event happens, runHandlers('start') will call and
- * run `handler.cancel()` and `handler.start()` on all registered handlers.
- */
- function runHandlers(handlerEvent, event) {
- var handler;
- for (var name in HANDLERS) {
- handler = HANDLERS[name];
- if( handler instanceof $$MdGestureHandler ) {
-
- if (handlerEvent === 'start') {
- // Run cancel to reset any handlers' state
- handler.cancel();
- }
- handler[handlerEvent](event, pointer);
-
- }
- }
- }
-
- /*
- * gestureStart vets if a start event is legitimate (and not part of a 'ghost click' from iOS/Android)
- * If it is legitimate, we initiate the pointer state and mark the current pointer's type
- * For example, for a touchstart event, mark the current pointer as a 'touch' pointer, so mouse events
- * won't effect it.
- */
- function gestureStart(ev) {
- // If we're already touched down, abort
- if (pointer) return;
-
- var now = +Date.now();
-
- // iOS & old android bug: after a touch event, a click event is sent 350 ms later.
- // If <400ms have passed, don't allow an event of a different type than the previous event
- if (lastPointer && !typesMatch(ev, lastPointer) && (now - lastPointer.endTime < 1500)) {
- return;
- }
-
- pointer = makeStartPointer(ev);
-
- runHandlers('start', ev);
- }
- /*
- * If a move event happens of the right type, update the pointer and run all the move handlers.
- * "of the right type": if a mousemove happens but our pointer started with a touch event, do nothing.
- */
- function gestureMove(ev) {
- if (!pointer || !typesMatch(ev, pointer)) return;
-
- updatePointerState(ev, pointer);
- runHandlers('move', ev);
- }
- /*
- * If an end event happens of the right type, update the pointer, run endHandlers, and save the pointer as 'lastPointer'
- */
- function gestureEnd(ev) {
- if (!pointer || !typesMatch(ev, pointer)) return;
-
- updatePointerState(ev, pointer);
- pointer.endTime = +Date.now();
-
- runHandlers('end', ev);
-
- lastPointer = pointer;
- pointer = null;
- }
-
-}
-attachToDocument.$inject = ["$mdGesture", "$$MdGestureHandler"];
-
-// ********************
-// Module Functions
-// ********************
-
-/*
- * Initiate the pointer. x, y, and the pointer's type.
- */
-function makeStartPointer(ev) {
- var point = getEventPoint(ev);
- var startPointer = {
- startTime: +Date.now(),
- target: ev.target,
- // 'p' for pointer events, 'm' for mouse, 't' for touch
- type: ev.type.charAt(0)
- };
- startPointer.startX = startPointer.x = point.pageX;
- startPointer.startY = startPointer.y = point.pageY;
- return startPointer;
-}
-
-/*
- * return whether the pointer's type matches the event's type.
- * Eg if a touch event happens but the pointer has a mouse type, return false.
- */
-function typesMatch(ev, pointer) {
- return ev && pointer && ev.type.charAt(0) === pointer.type;
-}
-
-/**
- * Gets whether the given event is an input event that was caused by clicking on an
- * associated label element.
- *
- * This is necessary because the browser will, upon clicking on a label element, fire an
- * *extra* click event on its associated input (if any). mdGesture is able to flag the label
- * click as with `$material` correctly, but not the second input click.
- *
- * In order to determine whether an input event is from a label click, we compare the (x, y) for
- * the event to the (x, y) for the most recent label click (which is cleared whenever a non-label
- * click occurs). Unfortunately, there are no event properties that tie the input and the label
- * together (such as relatedTarget).
- *
- * @param {MouseEvent} event
- * @returns {boolean}
- */
-function isInputEventFromLabelClick(event) {
- return lastLabelClickPos
- && lastLabelClickPos.x == event.x
- && lastLabelClickPos.y == event.y;
-}
-
-/*
- * Update the given pointer based upon the given DOMEvent.
- * Distance, velocity, direction, duration, etc
- */
-function updatePointerState(ev, pointer) {
- var point = getEventPoint(ev);
- var x = pointer.x = point.pageX;
- var y = pointer.y = point.pageY;
-
- pointer.distanceX = x - pointer.startX;
- pointer.distanceY = y - pointer.startY;
- pointer.distance = Math.sqrt(
- pointer.distanceX * pointer.distanceX + pointer.distanceY * pointer.distanceY
- );
-
- pointer.directionX = pointer.distanceX > 0 ? 'right' : pointer.distanceX < 0 ? 'left' : '';
- pointer.directionY = pointer.distanceY > 0 ? 'down' : pointer.distanceY < 0 ? 'up' : '';
-
- pointer.duration = +Date.now() - pointer.startTime;
- pointer.velocityX = pointer.distanceX / pointer.duration;
- pointer.velocityY = pointer.distanceY / pointer.duration;
-}
-
-/*
- * Normalize the point where the DOM event happened whether it's touch or mouse.
- * @returns point event obj with pageX and pageY on it.
- */
-function getEventPoint(ev) {
- ev = ev.originalEvent || ev; // support jQuery events
- return (ev.touches && ev.touches[0]) ||
- (ev.changedTouches && ev.changedTouches[0]) ||
- ev;
-}
-
-})();
-(function(){
-"use strict";
-
-angular.module('material.core')
- .provider('$$interimElement', InterimElementProvider);
-
-/*
- * @ngdoc service
- * @name $$interimElement
- * @module material.core
- *
- * @description
- *
- * Factory that contructs `$$interimElement.$service` services.
- * Used internally in material design for elements that appear on screen temporarily.
- * The service provides a promise-like API for interacting with the temporary
- * elements.
- *
- * ```js
- * app.service('$mdToast', function($$interimElement) {
- * var $mdToast = $$interimElement(toastDefaultOptions);
- * return $mdToast;
- * });
- * ```
- * @param {object=} defaultOptions Options used by default for the `show` method on the service.
- *
- * @returns {$$interimElement.$service}
- *
- */
-
-function InterimElementProvider() {
- createInterimElementProvider.$get = InterimElementFactory;
- InterimElementFactory.$inject = ["$document", "$q", "$$q", "$rootScope", "$timeout", "$rootElement", "$animate", "$mdUtil", "$mdCompiler", "$mdTheming", "$injector"];
- return createInterimElementProvider;
-
- /**
- * Returns a new provider which allows configuration of a new interimElement
- * service. Allows configuration of default options & methods for options,
- * as well as configuration of 'preset' methods (eg dialog.basic(): basic is a preset method)
- */
- function createInterimElementProvider(interimFactoryName) {
- var EXPOSED_METHODS = ['onHide', 'onShow', 'onRemove'];
-
- var customMethods = {};
- var providerConfig = {
- presets: {}
- };
-
- var provider = {
- setDefaults: setDefaults,
- addPreset: addPreset,
- addMethod: addMethod,
- $get: factory
- };
-
- /**
- * all interim elements will come with the 'build' preset
- */
- provider.addPreset('build', {
- methods: ['controller', 'controllerAs', 'resolve',
- 'template', 'templateUrl', 'themable', 'transformTemplate', 'parent']
- });
-
- factory.$inject = ["$$interimElement", "$injector"];
- return provider;
-
- /**
- * Save the configured defaults to be used when the factory is instantiated
- */
- function setDefaults(definition) {
- providerConfig.optionsFactory = definition.options;
- providerConfig.methods = (definition.methods || []).concat(EXPOSED_METHODS);
- return provider;
- }
-
- /**
- * Add a method to the factory that isn't specific to any interim element operations
- */
-
- function addMethod(name, fn) {
- customMethods[name] = fn;
- return provider;
- }
-
- /**
- * Save the configured preset to be used when the factory is instantiated
- */
- function addPreset(name, definition) {
- definition = definition || {};
- definition.methods = definition.methods || [];
- definition.options = definition.options || function() { return {}; };
-
- if (/^cancel|hide|show$/.test(name)) {
- throw new Error("Preset '" + name + "' in " + interimFactoryName + " is reserved!");
- }
- if (definition.methods.indexOf('_options') > -1) {
- throw new Error("Method '_options' in " + interimFactoryName + " is reserved!");
- }
- providerConfig.presets[name] = {
- methods: definition.methods.concat(EXPOSED_METHODS),
- optionsFactory: definition.options,
- argOption: definition.argOption
- };
- return provider;
- }
-
- function addPresetMethod(presetName, methodName, method) {
- providerConfig.presets[presetName][methodName] = method;
- }
-
- /**
- * Create a factory that has the given methods & defaults implementing interimElement
- */
- /* @ngInject */
- function factory($$interimElement, $injector) {
- var defaultMethods;
- var defaultOptions;
- var interimElementService = $$interimElement();
-
- /*
- * publicService is what the developer will be using.
- * It has methods hide(), cancel(), show(), build(), and any other
- * presets which were set during the config phase.
- */
- var publicService = {
- hide: interimElementService.hide,
- cancel: interimElementService.cancel,
- show: showInterimElement,
-
- // Special internal method to destroy an interim element without animations
- // used when navigation changes causes a $scope.$destroy() action
- destroy : destroyInterimElement
- };
-
-
- defaultMethods = providerConfig.methods || [];
- // This must be invoked after the publicService is initialized
- defaultOptions = invokeFactory(providerConfig.optionsFactory, {});
-
- // Copy over the simple custom methods
- angular.forEach(customMethods, function(fn, name) {
- publicService[name] = fn;
- });
-
- angular.forEach(providerConfig.presets, function(definition, name) {
- var presetDefaults = invokeFactory(definition.optionsFactory, {});
- var presetMethods = (definition.methods || []).concat(defaultMethods);
-
- // Every interimElement built with a preset has a field called `$type`,
- // which matches the name of the preset.
- // Eg in preset 'confirm', options.$type === 'confirm'
- angular.extend(presetDefaults, { $type: name });
-
- // This creates a preset class which has setter methods for every
- // method given in the `.addPreset()` function, as well as every
- // method given in the `.setDefaults()` function.
- //
- // @example
- // .setDefaults({
- // methods: ['hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent'],
- // options: dialogDefaultOptions
- // })
- // .addPreset('alert', {
- // methods: ['title', 'ok'],
- // options: alertDialogOptions
- // })
- //
- // Set values will be passed to the options when interimElement.show() is called.
- function Preset(opts) {
- this._options = angular.extend({}, presetDefaults, opts);
- }
- angular.forEach(presetMethods, function(name) {
- Preset.prototype[name] = function(value) {
- this._options[name] = value;
- return this;
- };
- });
-
- // Create shortcut method for one-linear methods
- if (definition.argOption) {
- var methodName = 'show' + name.charAt(0).toUpperCase() + name.slice(1);
- publicService[methodName] = function(arg) {
- var config = publicService[name](arg);
- return publicService.show(config);
- };
- }
-
- // eg $mdDialog.alert() will return a new alert preset
- publicService[name] = function(arg) {
- // If argOption is supplied, eg `argOption: 'content'`, then we assume
- // if the argument is not an options object then it is the `argOption` option.
- //
- // @example `$mdToast.simple('hello')` // sets options.content to hello
- // // because argOption === 'content'
- if (arguments.length && definition.argOption &&
- !angular.isObject(arg) && !angular.isArray(arg)) {
-
- return (new Preset())[definition.argOption](arg);
-
- } else {
- return new Preset(arg);
- }
-
- };
- });
-
- return publicService;
-
- /**
- *
- */
- function showInterimElement(opts) {
- // opts is either a preset which stores its options on an _options field,
- // or just an object made up of options
- opts = opts || { };
- if (opts._options) opts = opts._options;
-
- return interimElementService.show(
- angular.extend({}, defaultOptions, opts)
- );
- }
-
- /**
- * Special method to hide and destroy an interimElement WITHOUT
- * any 'leave` or hide animations ( an immediate force hide/remove )
- *
- * NOTE: This calls the onRemove() subclass method for each component...
- * which must have code to respond to `options.$destroy == true`
- */
- function destroyInterimElement(opts) {
- return interimElementService.destroy(opts);
- }
-
- /**
- * Helper to call $injector.invoke with a local of the factory name for
- * this provider.
- * If an $mdDialog is providing options for a dialog and tries to inject
- * $mdDialog, a circular dependency error will happen.
- * We get around that by manually injecting $mdDialog as a local.
- */
- function invokeFactory(factory, defaultVal) {
- var locals = {};
- locals[interimFactoryName] = publicService;
- return $injector.invoke(factory || function() { return defaultVal; }, {}, locals);
- }
-
- }
-
- }
-
- /* @ngInject */
- function InterimElementFactory($document, $q, $$q, $rootScope, $timeout, $rootElement, $animate,
- $mdUtil, $mdCompiler, $mdTheming, $injector ) {
- return function createInterimElementService() {
- var SHOW_CANCELLED = false;
-
- /*
- * @ngdoc service
- * @name $$interimElement.$service
- *
- * @description
- * A service used to control inserting and removing an element into the DOM.
- *
- */
- var service, stack = [];
-
- // Publish instance $$interimElement service;
- // ... used as $mdDialog, $mdToast, $mdMenu, and $mdSelect
-
- return service = {
- show: show,
- hide: hide,
- cancel: cancel,
- destroy : destroy,
- $injector_: $injector
- };
-
- /*
- * @ngdoc method
- * @name $$interimElement.$service#show
- * @kind function
- *
- * @description
- * Adds the `$interimElement` to the DOM and returns a special promise that will be resolved or rejected
- * with hide or cancel, respectively. To external cancel/hide, developers should use the
- *
- * @param {*} options is hashMap of settings
- * @returns a Promise
- *
- */
- function show(options) {
- options = options || {};
- var interimElement = new InterimElement(options || {});
- // When an interim element is currently showing, we have to cancel it.
- // Just hiding it, will resolve the InterimElement's promise, the promise should be
- // rejected instead.
- var hideExisting = !options.skipHide && stack.length ? service.cancel() : $q.when(true);
-
- // This hide()s only the current interim element before showing the next, new one
- // NOTE: this is not reversible (e.g. interim elements are not stackable)
-
- hideExisting.finally(function() {
-
- stack.push(interimElement);
- interimElement
- .show()
- .catch(function( reason ) {
- //$log.error("InterimElement.show() error: " + reason );
- return reason;
- });
-
- });
-
- // Return a promise that will be resolved when the interim
- // element is hidden or cancelled...
-
- return interimElement.deferred.promise;
- }
-
- /*
- * @ngdoc method
- * @name $$interimElement.$service#hide
- * @kind function
- *
- * @description
- * Removes the `$interimElement` from the DOM and resolves the promise returned from `show`
- *
- * @param {*} resolveParam Data to resolve the promise with
- * @returns a Promise that will be resolved after the element has been removed.
- *
- */
- function hide(reason, options) {
- if ( !stack.length ) return $q.when(reason);
- options = options || {};
-
- if (options.closeAll) {
- var promise = $q.all(stack.reverse().map(closeElement));
- stack = [];
- return promise;
- } else if (options.closeTo !== undefined) {
- return $q.all(stack.splice(options.closeTo).map(closeElement));
- } else {
- var interim = stack.pop();
- return closeElement(interim);
- }
-
- function closeElement(interim) {
- interim
- .remove(reason, false, options || { })
- .catch(function( reason ) {
- //$log.error("InterimElement.hide() error: " + reason );
- return reason;
- });
- return interim.deferred.promise;
- }
- }
-
- /*
- * @ngdoc method
- * @name $$interimElement.$service#cancel
- * @kind function
- *
- * @description
- * Removes the `$interimElement` from the DOM and rejects the promise returned from `show`
- *
- * @param {*} reason Data to reject the promise with
- * @returns Promise that will be resolved after the element has been removed.
- *
- */
- function cancel(reason, options) {
- var interim = stack.pop();
- if ( !interim ) return $q.when(reason);
-
- interim
- .remove(reason, true, options || { })
- .catch(function( reason ) {
- //$log.error("InterimElement.cancel() error: " + reason );
- return reason;
- });
-
- // Since Angular 1.6.7, promises will be logged to $exceptionHandler when the promise
- // is not handling the rejection. We create a pseudo catch handler, which will prevent the
- // promise from being logged to the $exceptionHandler.
- return interim.deferred.promise.catch(angular.noop);
- }
-
- /*
- * Special method to quick-remove the interim element without animations
- * Note: interim elements are in "interim containers"
- */
- function destroy(target) {
- var interim = !target ? stack.shift() : null;
- var cntr = angular.element(target).length ? angular.element(target)[0].parentNode : null;
-
- if (cntr) {
- // Try to find the interim element in the stack which corresponds to the supplied DOM element.
- var filtered = stack.filter(function(entry) {
- var currNode = entry.options.element[0];
- return (currNode === cntr);
- });
-
- // Note: this function might be called when the element already has been removed, in which
- // case we won't find any matches. That's ok.
- if (filtered.length > 0) {
- interim = filtered[0];
- stack.splice(stack.indexOf(interim), 1);
- }
- }
-
- return interim ? interim.remove(SHOW_CANCELLED, false, {'$destroy':true}) : $q.when(SHOW_CANCELLED);
- }
-
- /*
- * Internal Interim Element Object
- * Used internally to manage the DOM element and related data
- */
- function InterimElement(options) {
- var self, element, showAction = $q.when(true);
-
- options = configureScopeAndTransitions(options);
-
- return self = {
- options : options,
- deferred: $q.defer(),
- show : createAndTransitionIn,
- remove : transitionOutAndRemove
- };
-
- /**
- * Compile, link, and show this interim element
- * Use optional autoHided and transition-in effects
- */
- function createAndTransitionIn() {
- return $q(function(resolve, reject) {
-
- // Trigger onCompiling callback before the compilation starts.
- // This is useful, when modifying options, which can be influenced by developers.
- options.onCompiling && options.onCompiling(options);
-
- compileElement(options)
- .then(function( compiledData ) {
- element = linkElement( compiledData, options );
-
- showAction = showElement(element, options, compiledData.controller)
- .then(resolve, rejectAll);
-
- }, rejectAll);
-
- function rejectAll(fault) {
- // Force the '$md.show()' promise to reject
- self.deferred.reject(fault);
-
- // Continue rejection propagation
- reject(fault);
- }
- });
- }
-
- /**
- * After the show process has finished/rejected:
- * - announce 'removing',
- * - perform the transition-out, and
- * - perform optional clean up scope.
- */
- function transitionOutAndRemove(response, isCancelled, opts) {
-
- // abort if the show() and compile failed
- if ( !element ) return $q.when(false);
-
- options = angular.extend(options || {}, opts || {});
- options.cancelAutoHide && options.cancelAutoHide();
- options.element.triggerHandler('$mdInterimElementRemove');
-
- if ( options.$destroy === true ) {
-
- return hideElement(options.element, options).then(function(){
- (isCancelled && rejectAll(response)) || resolveAll(response);
- });
-
- } else {
-
- $q.when(showAction)
- .finally(function() {
- hideElement(options.element, options).then(function() {
-
- (isCancelled && rejectAll(response)) || resolveAll(response);
-
- }, rejectAll);
- });
-
- return self.deferred.promise;
- }
-
-
- /**
- * The `show()` returns a promise that will be resolved when the interim
- * element is hidden or cancelled...
- */
- function resolveAll(response) {
- self.deferred.resolve(response);
- }
-
- /**
- * Force the '$md.show()' promise to reject
- */
- function rejectAll(fault) {
- self.deferred.reject(fault);
- }
- }
-
- /**
- * Prepare optional isolated scope and prepare $animate with default enter and leave
- * transitions for the new element instance.
- */
- function configureScopeAndTransitions(options) {
- options = options || { };
- if ( options.template ) {
- options.template = $mdUtil.processTemplate(options.template);
- }
-
- return angular.extend({
- preserveScope: false,
- cancelAutoHide : angular.noop,
- scope: options.scope || $rootScope.$new(options.isolateScope),
-
- /**
- * Default usage to enable $animate to transition-in; can be easily overridden via 'options'
- */
- onShow: function transitionIn(scope, element, options) {
- return $animate.enter(element, options.parent);
- },
-
- /**
- * Default usage to enable $animate to transition-out; can be easily overridden via 'options'
- */
- onRemove: function transitionOut(scope, element) {
- // Element could be undefined if a new element is shown before
- // the old one finishes compiling.
- return element && $animate.leave(element) || $q.when();
- }
- }, options );
-
- }
-
- /**
- * Compile an element with a templateUrl, controller, and locals
- */
- function compileElement(options) {
-
- var compiled = !options.skipCompile ? $mdCompiler.compile(options) : null;
-
- return compiled || $q(function (resolve) {
- resolve({
- locals: {},
- link: function () {
- return options.element;
- }
- });
- });
- }
-
- /**
- * Link an element with compiled configuration
- */
- function linkElement(compileData, options){
- angular.extend(compileData.locals, options);
-
- var element = compileData.link(options.scope);
-
- // Search for parent at insertion time, if not specified
- options.element = element;
- options.parent = findParent(element, options);
- if (options.themable) $mdTheming(element);
-
- return element;
- }
-
- /**
- * Search for parent at insertion time, if not specified
- */
- function findParent(element, options) {
- var parent = options.parent;
-
- // Search for parent at insertion time, if not specified
- if (angular.isFunction(parent)) {
- parent = parent(options.scope, element, options);
- } else if (angular.isString(parent)) {
- parent = angular.element($document[0].querySelector(parent));
- } else {
- parent = angular.element(parent);
- }
-
- // If parent querySelector/getter function fails, or it's just null,
- // find a default.
- if (!(parent || {}).length) {
- var el;
- if ($rootElement[0] && $rootElement[0].querySelector) {
- el = $rootElement[0].querySelector(':not(svg) > body');
- }
- if (!el) el = $rootElement[0];
- if (el.nodeName == '#comment') {
- el = $document[0].body;
- }
- return angular.element(el);
- }
-
- return parent;
- }
-
- /**
- * If auto-hide is enabled, start timer and prepare cancel function
- */
- function startAutoHide() {
- var autoHideTimer, cancelAutoHide = angular.noop;
-
- if (options.hideDelay) {
- autoHideTimer = $timeout(service.hide, options.hideDelay) ;
- cancelAutoHide = function() {
- $timeout.cancel(autoHideTimer);
- }
- }
-
- // Cache for subsequent use
- options.cancelAutoHide = function() {
- cancelAutoHide();
- options.cancelAutoHide = undefined;
- }
- }
-
- /**
- * Show the element ( with transitions), notify complete and start
- * optional auto-Hide
- */
- function showElement(element, options, controller) {
- // Trigger onShowing callback before the `show()` starts
- var notifyShowing = options.onShowing || angular.noop;
- // Trigger onComplete callback when the `show()` finishes
- var notifyComplete = options.onComplete || angular.noop;
-
- notifyShowing(options.scope, element, options, controller);
-
- return $q(function (resolve, reject) {
- try {
- // Start transitionIn
- $q.when(options.onShow(options.scope, element, options, controller))
- .then(function () {
- notifyComplete(options.scope, element, options);
- startAutoHide();
-
- resolve(element);
-
- }, reject );
-
- } catch(e) {
- reject(e.message);
- }
- });
- }
-
- function hideElement(element, options) {
- var announceRemoving = options.onRemoving || angular.noop;
-
- return $$q(function (resolve, reject) {
- try {
- // Start transitionIn
- var action = $$q.when( options.onRemove(options.scope, element, options) || true );
-
- // Trigger callback *before* the remove operation starts
- announceRemoving(element, action);
-
- if ( options.$destroy == true ) {
-
- // For $destroy, onRemove should be synchronous
- resolve(element);
-
- } else {
-
- // Wait until transition-out is done
- action.then(function () {
-
- if (!options.preserveScope && options.scope ) {
- options.scope.$destroy();
- }
-
- resolve(element);
-
- }, reject );
- }
-
- } catch(e) {
- reject(e);
- }
- });
- }
-
- }
- };
-
- }
-
-}
-
-})();
-(function(){
-"use strict";
-
-(function() {
- 'use strict';
-
- var $mdUtil, $interpolate, $log;
-
- var SUFFIXES = /(-gt)?-(sm|md|lg|print)/g;
- var WHITESPACE = /\s+/g;
-
- var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none', 'noshrink', 'nogrow' ];
- var LAYOUT_OPTIONS = ['row', 'column'];
- var ALIGNMENT_MAIN_AXIS= [ "", "start", "center", "end", "stretch", "space-around", "space-between" ];
- var ALIGNMENT_CROSS_AXIS= [ "", "start", "center", "end", "stretch" ];
-
- var config = {
- /**
- * Enable directive attribute-to-class conversions
- * Developers can use `` to quickly
- * disable the Layout directives and prohibit the injection of Layout classNames
- */
- enabled: true,
-
- /**
- * List of mediaQuery breakpoints and associated suffixes
- *
- * [
- * { suffix: "sm", mediaQuery: "screen and (max-width: 599px)" },
- * { suffix: "md", mediaQuery: "screen and (min-width: 600px) and (max-width: 959px)" }
- * ]
- */
- breakpoints: []
- };
-
- registerLayoutAPI( angular.module('material.core.layout', ['ng']) );
-
- /**
- * registerLayoutAPI()
- *
- * The original ngMaterial Layout solution used attribute selectors and CSS.
- *
- * ```html
- *
My Content
- * ```
- *
- * ```css
- * [layout] {
- * box-sizing: border-box;
- * display:flex;
- * }
- * [layout=column] {
- * flex-direction : column
- * }
- * ```
- *
- * Use of attribute selectors creates significant performance impacts in some
- * browsers... mainly IE.
- *
- * This module registers directives that allow the same layout attributes to be
- * interpreted and converted to class selectors. The directive will add equivalent classes to each element that
- * contains a Layout directive.
- *
- * ```html
- *
My Content
- *```
- *
- * ```css
- * .layout {
- * box-sizing: border-box;
- * display:flex;
- * }
- * .layout-column {
- * flex-direction : column
- * }
- * ```
- */
- function registerLayoutAPI(module){
- var PREFIX_REGEXP = /^((?:x|data)[\:\-_])/i;
- var SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
-
- // NOTE: these are also defined in constants::MEDIA_PRIORITY and constants::MEDIA
- var BREAKPOINTS = [ "", "xs", "gt-xs", "sm", "gt-sm", "md", "gt-md", "lg", "gt-lg", "xl", "print" ];
- var API_WITH_VALUES = [ "layout", "flex", "flex-order", "flex-offset", "layout-align" ];
- var API_NO_VALUES = [ "show", "hide", "layout-padding", "layout-margin" ];
-
-
- // Build directive registration functions for the standard Layout API... for all breakpoints.
- angular.forEach(BREAKPOINTS, function(mqb) {
-
- // Attribute directives with expected, observable value(s)
- angular.forEach( API_WITH_VALUES, function(name){
- var fullName = mqb ? name + "-" + mqb : name;
- module.directive( directiveNormalize(fullName), attributeWithObserve(fullName));
- });
-
- // Attribute directives with no expected value(s)
- angular.forEach( API_NO_VALUES, function(name){
- var fullName = mqb ? name + "-" + mqb : name;
- module.directive( directiveNormalize(fullName), attributeWithoutValue(fullName));
- });
-
- });
-
- // Register other, special directive functions for the Layout features:
- module
-
- .provider('$$mdLayout' , function() {
- // Publish internal service for Layouts
- return {
- $get : angular.noop,
- validateAttributeValue : validateAttributeValue,
- validateAttributeUsage : validateAttributeUsage,
- /**
- * Easy way to disable/enable the Layout API.
- * When disabled, this stops all attribute-to-classname generations
- */
- disableLayouts : function(isDisabled) {
- config.enabled = (isDisabled !== true);
- }
- };
- })
-
- .directive('mdLayoutCss' , disableLayoutDirective )
- .directive('ngCloak' , buildCloakInterceptor('ng-cloak'))
-
- .directive('layoutWrap' , attributeWithoutValue('layout-wrap'))
- .directive('layoutNowrap' , attributeWithoutValue('layout-nowrap'))
- .directive('layoutNoWrap' , attributeWithoutValue('layout-no-wrap'))
- .directive('layoutFill' , attributeWithoutValue('layout-fill'))
-
- // !! Deprecated attributes: use the `-lt` (aka less-than) notations
-
- .directive('layoutLtMd' , warnAttrNotSupported('layout-lt-md', true))
- .directive('layoutLtLg' , warnAttrNotSupported('layout-lt-lg', true))
- .directive('flexLtMd' , warnAttrNotSupported('flex-lt-md', true))
- .directive('flexLtLg' , warnAttrNotSupported('flex-lt-lg', true))
-
- .directive('layoutAlignLtMd', warnAttrNotSupported('layout-align-lt-md'))
- .directive('layoutAlignLtLg', warnAttrNotSupported('layout-align-lt-lg'))
- .directive('flexOrderLtMd' , warnAttrNotSupported('flex-order-lt-md'))
- .directive('flexOrderLtLg' , warnAttrNotSupported('flex-order-lt-lg'))
- .directive('offsetLtMd' , warnAttrNotSupported('flex-offset-lt-md'))
- .directive('offsetLtLg' , warnAttrNotSupported('flex-offset-lt-lg'))
-
- .directive('hideLtMd' , warnAttrNotSupported('hide-lt-md'))
- .directive('hideLtLg' , warnAttrNotSupported('hide-lt-lg'))
- .directive('showLtMd' , warnAttrNotSupported('show-lt-md'))
- .directive('showLtLg' , warnAttrNotSupported('show-lt-lg'))
-
- // Determine if
- .config( detectDisabledLayouts );
-
- /**
- * Converts snake_case to camelCase.
- * Also there is special case for Moz prefix starting with upper case letter.
- * @param name Name to normalize
- */
- function directiveNormalize(name) {
- return name
- .replace(PREFIX_REGEXP, '')
- .replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
- return offset ? letter.toUpperCase() : letter;
- });
- }
-
- }
-
-
- /**
- * Detect if any of the HTML tags has a [md-layouts-disabled] attribute;
- * If yes, then immediately disable all layout API features
- *
- * Note: this attribute should be specified on either the HTML or BODY tags
- */
- /**
- * @ngInject
- */
- function detectDisabledLayouts() {
- var isDisabled = !!document.querySelector('[md-layouts-disabled]');
- config.enabled = !isDisabled;
- }
-
- /**
- * Special directive that will disable ALL Layout conversions of layout
- * attribute(s) to classname(s).
- *
- *
- *
- *
- *
- * ...
- *
- *
- * Note: Using md-layout-css directive requires the developer to load the Material
- * Layout Attribute stylesheet (which only uses attribute selectors):
- *
- * `angular-material.layout.css`
- *
- * Another option is to use the LayoutProvider to configure and disable the attribute
- * conversions; this would obviate the use of the `md-layout-css` directive
- *
- */
- function disableLayoutDirective() {
- // Return a 1x-only, first-match attribute directive
- config.enabled = false;
-
- return {
- restrict : 'A',
- priority : '900'
- };
- }
-
- /**
- * Tail-hook ngCloak to delay the uncloaking while Layout transformers
- * finish processing. Eliminates flicker with Material.Layoouts
- */
- function buildCloakInterceptor(className) {
- return [ '$timeout', function($timeout){
- return {
- restrict : 'A',
- priority : -10, // run after normal ng-cloak
- compile : function( element ) {
- if (!config.enabled) return angular.noop;
-
- // Re-add the cloak
- element.addClass(className);
-
- return function( scope, element ) {
- // Wait while layout injectors configure, then uncloak
- // NOTE: $rAF does not delay enough... and this is a 1x-only event,
- // $timeout is acceptable.
- $timeout( function(){
- element.removeClass(className);
- }, 10, false);
- };
- }
- };
- }];
- }
-
-
- // *********************************************************************************
- //
- // These functions create registration functions for ngMaterial Layout attribute directives
- // This provides easy translation to switch ngMaterial attribute selectors to
- // CLASS selectors and directives; which has huge performance implications
- // for IE Browsers
- //
- // *********************************************************************************
-
- /**
- * Creates a directive registration function where a possible dynamic attribute
- * value will be observed/watched.
- * @param {string} className attribute name; eg `layout-gt-md` with value ="row"
- */
- function attributeWithObserve(className) {
-
- return ['$mdUtil', '$interpolate', "$log", function(_$mdUtil_, _$interpolate_, _$log_) {
- $mdUtil = _$mdUtil_;
- $interpolate = _$interpolate_;
- $log = _$log_;
-
- return {
- restrict: 'A',
- compile: function(element, attr) {
- var linkFn;
- if (config.enabled) {
- // immediately replace static (non-interpolated) invalid values...
-
- validateAttributeUsage(className, attr, element, $log);
-
- validateAttributeValue( className,
- getNormalizedAttrValue(className, attr, ""),
- buildUpdateFn(element, className, attr)
- );
-
- linkFn = translateWithValueToCssClass;
- }
-
- // Use for postLink to account for transforms after ng-transclude.
- return linkFn || angular.noop;
- }
- };
- }];
-
- /**
- * Add as transformed class selector(s), then
- * remove the deprecated attribute selector
- */
- function translateWithValueToCssClass(scope, element, attrs) {
- var updateFn = updateClassWithValue(element, className, attrs);
- var unwatch = attrs.$observe(attrs.$normalize(className), updateFn);
-
- updateFn(getNormalizedAttrValue(className, attrs, ""));
- scope.$on("$destroy", function() { unwatch() });
- }
- }
-
- /**
- * Creates a registration function for ngMaterial Layout attribute directive.
- * This is a `simple` transpose of attribute usage to class usage; where we ignore
- * any attribute value
- */
- function attributeWithoutValue(className) {
- return ['$mdUtil', '$interpolate', "$log", function(_$mdUtil_, _$interpolate_, _$log_) {
- $mdUtil = _$mdUtil_;
- $interpolate = _$interpolate_;
- $log = _$log_;
-
- return {
- restrict: 'A',
- compile: function(element, attr) {
- var linkFn;
- if (config.enabled) {
- // immediately replace static (non-interpolated) invalid values...
-
- validateAttributeValue( className,
- getNormalizedAttrValue(className, attr, ""),
- buildUpdateFn(element, className, attr)
- );
-
- translateToCssClass(null, element);
-
- // Use for postLink to account for transforms after ng-transclude.
- linkFn = translateToCssClass;
- }
-
- return linkFn || angular.noop;
- }
- };
- }];
-
- /**
- * Add as transformed class selector, then
- * remove the deprecated attribute selector
- */
- function translateToCssClass(scope, element) {
- element.addClass(className);
- }
- }
-
-
-
- /**
- * After link-phase, do NOT remove deprecated layout attribute selector.
- * Instead watch the attribute so interpolated data-bindings to layout
- * selectors will continue to be supported.
- *
- * $observe() the className and update with new class (after removing the last one)
- *
- * e.g. `layout="{{layoutDemo.direction}}"` will update...
- *
- * NOTE: The value must match one of the specified styles in the CSS.
- * For example `flex-gt-md="{{size}}` where `scope.size == 47` will NOT work since
- * only breakpoints for 0, 5, 10, 15... 100, 33, 34, 66, 67 are defined.
- *
- */
- function updateClassWithValue(element, className) {
- var lastClass;
-
- return function updateClassFn(newValue) {
- var value = validateAttributeValue(className, newValue || "");
- if ( angular.isDefined(value) ) {
- if (lastClass) element.removeClass(lastClass);
- lastClass = !value ? className : className + "-" + value.replace(WHITESPACE, "-");
- element.addClass(lastClass);
- }
- };
- }
-
- /**
- * Provide console warning that this layout attribute has been deprecated
- *
- */
- function warnAttrNotSupported(className) {
- var parts = className.split("-");
- return ["$log", function($log) {
- $log.warn(className + "has been deprecated. Please use a `" + parts[0] + "-gt-` variant.");
- return angular.noop;
- }];
- }
-
- /**
- * Centralize warnings for known flexbox issues (especially IE-related issues)
- */
- function validateAttributeUsage(className, attr, element, $log){
- var message, usage, url;
- var nodeName = element[0].nodeName.toLowerCase();
-
- switch(className.replace(SUFFIXES,"")) {
- case "flex":
- if ((nodeName == "md-button") || (nodeName == "fieldset")){
- // @see https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
- // Use
wrapper inside (preferred) or outside
-
- usage = "<" + nodeName + " " + className + ">";
- url = "https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers";
- message = "Markup '{0}' may not work as expected in IE Browsers. Consult '{1}' for details.";
-
- $log.warn( $mdUtil.supplant(message, [usage, url]) );
- }
- }
-
- }
-
-
- /**
- * For the Layout attribute value, validate or replace with default
- * fallback value
- */
- function validateAttributeValue(className, value, updateFn) {
- var origValue = value;
-
- if (!needsInterpolation(value)) {
- switch (className.replace(SUFFIXES,"")) {
- case 'layout' :
- if ( !findIn(value, LAYOUT_OPTIONS) ) {
- value = LAYOUT_OPTIONS[0]; // 'row';
- }
- break;
-
- case 'flex' :
- if (!findIn(value, FLEX_OPTIONS)) {
- if (isNaN(value)) {
- value = '';
- }
- }
- break;
-
- case 'flex-offset' :
- case 'flex-order' :
- if (!value || isNaN(+value)) {
- value = '0';
- }
- break;
-
- case 'layout-align' :
- var axis = extractAlignAxis(value);
- value = $mdUtil.supplant("{main}-{cross}",axis);
- break;
-
- case 'layout-padding' :
- case 'layout-margin' :
- case 'layout-fill' :
- case 'layout-wrap' :
- case 'layout-nowrap' :
- case 'layout-nowrap' :
- value = '';
- break;
- }
-
- if (value != origValue) {
- (updateFn || angular.noop)(value);
- }
- }
-
- return value;
- }
-
- /**
- * Replace current attribute value with fallback value
- */
- function buildUpdateFn(element, className, attrs) {
- return function updateAttrValue(fallback) {
- if (!needsInterpolation(fallback)) {
- // Do not modify the element's attribute value; so
- // uses '' will not
- // be affected. Just update the attrs value.
- attrs[attrs.$normalize(className)] = fallback;
- }
- };
- }
-
- /**
- * See if the original value has interpolation symbols:
- * e.g. flex-gt-md="{{triggerPoint}}"
- */
- function needsInterpolation(value) {
- return (value || "").indexOf($interpolate.startSymbol()) > -1;
- }
-
- function getNormalizedAttrValue(className, attrs, defaultVal) {
- var normalizedAttr = attrs.$normalize(className);
- return attrs[normalizedAttr] ? attrs[normalizedAttr].replace(WHITESPACE, "-") : defaultVal || null;
- }
-
- function findIn(item, list, replaceWith) {
- item = replaceWith && item ? item.replace(WHITESPACE, replaceWith) : item;
-
- var found = false;
- if (item) {
- list.forEach(function(it) {
- it = replaceWith ? it.replace(WHITESPACE, replaceWith) : it;
- found = found || (it === item);
- });
- }
- return found;
- }
-
- function extractAlignAxis(attrValue) {
- var axis = {
- main : "start",
- cross: "stretch"
- }, values;
-
- attrValue = (attrValue || "");
-
- if ( attrValue.indexOf("-") == 0 || attrValue.indexOf(" ") == 0) {
- // For missing main-axis values
- attrValue = "none" + attrValue;
- }
-
- values = attrValue.toLowerCase().trim().replace(WHITESPACE, "-").split("-");
- if ( values.length && (values[0] === "space") ) {
- // for main-axis values of "space-around" or "space-between"
- values = [ values[0]+"-"+values[1],values[2] ];
- }
-
- if ( values.length > 0 ) axis.main = values[0] || axis.main;
- if ( values.length > 1 ) axis.cross = values[1] || axis.cross;
-
- if ( ALIGNMENT_MAIN_AXIS.indexOf(axis.main) < 0 ) axis.main = "start";
- if ( ALIGNMENT_CROSS_AXIS.indexOf(axis.cross) < 0 ) axis.cross = "stretch";
-
- return axis;
- }
-
-
-})();
-
-})();
-(function(){
-"use strict";
-
- /**
- * @ngdoc module
- * @name material.core.componentRegistry
- *
- * @description
- * A component instance registration service.
- * Note: currently this as a private service in the SideNav component.
- */
- angular.module('material.core')
- .factory('$mdComponentRegistry', ComponentRegistry);
-
- /*
- * @private
- * @ngdoc factory
- * @name ComponentRegistry
- * @module material.core.componentRegistry
- *
- */
- function ComponentRegistry($log, $q) {
-
- var self;
- var instances = [ ];
- var pendings = { };
-
- return self = {
- /**
- * Used to print an error when an instance for a handle isn't found.
- */
- notFoundError: function(handle, msgContext) {
- $log.error( (msgContext || "") + 'No instance found for handle', handle);
- },
- /**
- * Return all registered instances as an array.
- */
- getInstances: function() {
- return instances;
- },
-
- /**
- * Get a registered instance.
- * @param handle the String handle to look up for a registered instance.
- */
- get: function(handle) {
- if ( !isValidID(handle) ) return null;
-
- var i, j, instance;
- for(i = 0, j = instances.length; i < j; i++) {
- instance = instances[i];
- if(instance.$$mdHandle === handle) {
- return instance;
- }
- }
- return null;
- },
-
- /**
- * Register an instance.
- * @param instance the instance to register
- * @param handle the handle to identify the instance under.
- */
- register: function(instance, handle) {
- if ( !handle ) return angular.noop;
-
- instance.$$mdHandle = handle;
- instances.push(instance);
- resolveWhen();
-
- return deregister;
-
- /**
- * Remove registration for an instance
- */
- function deregister() {
- var index = instances.indexOf(instance);
- if (index !== -1) {
- instances.splice(index, 1);
- }
- }
-
- /**
- * Resolve any pending promises for this instance
- */
- function resolveWhen() {
- var dfd = pendings[handle];
- if ( dfd ) {
- dfd.forEach(function (promise) {
- promise.resolve(instance);
- });
- delete pendings[handle];
- }
- }
- },
-
- /**
- * Async accessor to registered component instance
- * If not available then a promise is created to notify
- * all listeners when the instance is registered.
- */
- when : function(handle) {
- if ( isValidID(handle) ) {
- var deferred = $q.defer();
- var instance = self.get(handle);
-
- if ( instance ) {
- deferred.resolve( instance );
- } else {
- if (pendings[handle] === undefined) {
- pendings[handle] = [];
- }
- pendings[handle].push(deferred);
- }
-
- return deferred.promise;
- }
- return $q.reject("Invalid `md-component-id` value.");
- }
-
- };
-
- function isValidID(handle){
- return handle && (handle !== "");
- }
-
- }
- ComponentRegistry.$inject = ["$log", "$q"];
-
-})();
-(function(){
-"use strict";
-
-(function() {
- 'use strict';
-
- /**
- * @ngdoc service
- * @name $mdButtonInkRipple
- * @module material.core
- *
- * @description
- * Provides ripple effects for md-button. See $mdInkRipple service for all possible configuration options.
- *
- * @param {object=} scope Scope within the current context
- * @param {object=} element The element the ripple effect should be applied to
- * @param {object=} options (Optional) Configuration options to override the default ripple configuration
- */
-
- angular.module('material.core')
- .factory('$mdButtonInkRipple', MdButtonInkRipple);
-
- function MdButtonInkRipple($mdInkRipple) {
- return {
- attach: function attachRipple(scope, element, options) {
- options = angular.extend(optionsForElement(element), options);
-
- return $mdInkRipple.attach(scope, element, options);
- }
- };
-
- function optionsForElement(element) {
- if (element.hasClass('md-icon-button')) {
- return {
- isMenuItem: element.hasClass('md-menu-item'),
- fitRipple: true,
- center: true
- };
- } else {
- return {
- isMenuItem: element.hasClass('md-menu-item'),
- dimBackground: true
- }
- }
- };
- }
- MdButtonInkRipple.$inject = ["$mdInkRipple"];;
-})();
-
-})();
-(function(){
-"use strict";
-
-(function() {
- 'use strict';
-
- /**
- * @ngdoc service
- * @name $mdCheckboxInkRipple
- * @module material.core
- *
- * @description
- * Provides ripple effects for md-checkbox. See $mdInkRipple service for all possible configuration options.
- *
- * @param {object=} scope Scope within the current context
- * @param {object=} element The element the ripple effect should be applied to
- * @param {object=} options (Optional) Configuration options to override the defaultripple configuration
- */
-
- angular.module('material.core')
- .factory('$mdCheckboxInkRipple', MdCheckboxInkRipple);
-
- function MdCheckboxInkRipple($mdInkRipple) {
- return {
- attach: attach
- };
-
- function attach(scope, element, options) {
- return $mdInkRipple.attach(scope, element, angular.extend({
- center: true,
- dimBackground: false,
- fitRipple: true
- }, options));
- };
- }
- MdCheckboxInkRipple.$inject = ["$mdInkRipple"];;
-})();
-
-})();
-(function(){
-"use strict";
-
-(function() {
- 'use strict';
-
- /**
- * @ngdoc service
- * @name $mdListInkRipple
- * @module material.core
- *
- * @description
- * Provides ripple effects for md-list. See $mdInkRipple service for all possible configuration options.
- *
- * @param {object=} scope Scope within the current context
- * @param {object=} element The element the ripple effect should be applied to
- * @param {object=} options (Optional) Configuration options to override the defaultripple configuration
- */
-
- angular.module('material.core')
- .factory('$mdListInkRipple', MdListInkRipple);
-
- function MdListInkRipple($mdInkRipple) {
- return {
- attach: attach
- };
-
- function attach(scope, element, options) {
- return $mdInkRipple.attach(scope, element, angular.extend({
- center: false,
- dimBackground: true,
- outline: false,
- rippleSize: 'full'
- }, options));
- };
- }
- MdListInkRipple.$inject = ["$mdInkRipple"];;
-})();
-
-})();
-(function(){
-"use strict";
-
-/**
- * @ngdoc module
- * @name material.core.ripple
- * @description
- * Ripple
- */
-angular.module('material.core')
- .provider('$mdInkRipple', InkRippleProvider)
- .directive('mdInkRipple', InkRippleDirective)
- .directive('mdNoInk', attrNoDirective)
- .directive('mdNoBar', attrNoDirective)
- .directive('mdNoStretch', attrNoDirective);
-
-var DURATION = 450;
-
-/**
- * @ngdoc directive
- * @name mdInkRipple
- * @module material.core.ripple
- *
- * @description
- * The `md-ink-ripple` directive allows you to specify the ripple color or id a ripple is allowed.
- *
- * @param {string|boolean} md-ink-ripple A color string `#FF0000` or boolean (`false` or `0`) for preventing ripple
- *
- * @usage
- * ### String values
- *
- *
- * Ripples in red
- *
- *
- *
- * Not rippling
- *
- *
- *
- * ### Interpolated values
- *
- *
- * Ripples with the return value of 'randomColor' function
- *
- *
- *
- * Ripples if 'canRipple' function return value is not 'false' or '0'
- *
- *
- */
-function InkRippleDirective ($mdButtonInkRipple, $mdCheckboxInkRipple) {
- return {
- controller: angular.noop,
- link: function (scope, element, attr) {
- attr.hasOwnProperty('mdInkRippleCheckbox')
- ? $mdCheckboxInkRipple.attach(scope, element)
- : $mdButtonInkRipple.attach(scope, element);
- }
- };
-}
-InkRippleDirective.$inject = ["$mdButtonInkRipple", "$mdCheckboxInkRipple"];
-
-/**
- * @ngdoc service
- * @name $mdInkRipple
- * @module material.core.ripple
- *
- * @description
- * `$mdInkRipple` is a service for adding ripples to any element
- *
- * @usage
- *
- * app.factory('$myElementInkRipple', function($mdInkRipple) {
- * return {
- * attach: function (scope, element, options) {
- * return $mdInkRipple.attach(scope, element, angular.extend({
- * center: false,
- * dimBackground: true
- * }, options));
- * }
- * };
- * });
- *
- * app.controller('myController', function ($scope, $element, $myElementInkRipple) {
- * $scope.onClick = function (ev) {
- * $myElementInkRipple.attach($scope, angular.element(ev.target), { center: true });
- * }
- * });
- *
- *
- * ### Disabling ripples globally
- * If you want to disable ink ripples globally, for all components, you can call the
- * `disableInkRipple` method in your app's config.
- *
- *
- * app.config(function ($mdInkRippleProvider) {
- * $mdInkRippleProvider.disableInkRipple();
- * });
- */
-
-function InkRippleProvider () {
- var isDisabledGlobally = false;
-
- return {
- disableInkRipple: disableInkRipple,
- $get: ["$injector", function($injector) {
- return { attach: attach };
-
- /**
- * @ngdoc method
- * @name $mdInkRipple#attach
- *
- * @description
- * Attaching given scope, element and options to inkRipple controller
- *
- * @param {object=} scope Scope within the current context
- * @param {object=} element The element the ripple effect should be applied to
- * @param {object=} options (Optional) Configuration options to override the defaultRipple configuration
- * * `center` - Whether the ripple should start from the center of the container element
- * * `dimBackground` - Whether the background should be dimmed with the ripple color
- * * `colorElement` - The element the ripple should take its color from, defined by css property `color`
- * * `fitRipple` - Whether the ripple should fill the element
- */
- function attach (scope, element, options) {
- if (isDisabledGlobally || element.controller('mdNoInk')) return angular.noop;
- return $injector.instantiate(InkRippleCtrl, {
- $scope: scope,
- $element: element,
- rippleOptions: options
- });
- }
- }]
- };
-
- /**
- * @ngdoc method
- * @name $mdInkRipple#disableInkRipple
- *
- * @description
- * A config-time method that, when called, disables ripples globally.
- */
- function disableInkRipple () {
- isDisabledGlobally = true;
- }
-}
-
-/**
- * Controller used by the ripple service in order to apply ripples
- * @ngInject
- */
-function InkRippleCtrl ($scope, $element, rippleOptions, $window, $timeout, $mdUtil, $mdColorUtil) {
- this.$window = $window;
- this.$timeout = $timeout;
- this.$mdUtil = $mdUtil;
- this.$mdColorUtil = $mdColorUtil;
- this.$scope = $scope;
- this.$element = $element;
- this.options = rippleOptions;
- this.mousedown = false;
- this.ripples = [];
- this.timeout = null; // Stores a reference to the most-recent ripple timeout
- this.lastRipple = null;
-
- $mdUtil.valueOnUse(this, 'container', this.createContainer);
-
- this.$element.addClass('md-ink-ripple');
-
- // attach method for unit tests
- ($element.controller('mdInkRipple') || {}).createRipple = angular.bind(this, this.createRipple);
- ($element.controller('mdInkRipple') || {}).setColor = angular.bind(this, this.color);
-
- this.bindEvents();
-}
-InkRippleCtrl.$inject = ["$scope", "$element", "rippleOptions", "$window", "$timeout", "$mdUtil", "$mdColorUtil"];
-
-
-/**
- * Either remove or unlock any remaining ripples when the user mouses off of the element (either by
- * mouseup or mouseleave event)
- */
-function autoCleanup (self, cleanupFn) {
-
- if ( self.mousedown || self.lastRipple ) {
- self.mousedown = false;
- self.$mdUtil.nextTick( angular.bind(self, cleanupFn), false);
- }
-
-}
-
-
-/**
- * Returns the color that the ripple should be (either based on CSS or hard-coded)
- * @returns {string}
- */
-InkRippleCtrl.prototype.color = function (value) {
- var self = this;
-
- // If assigning a color value, apply it to background and the ripple color
- if (angular.isDefined(value)) {
- self._color = self._parseColor(value);
- }
-
- // If color lookup, use assigned, defined, or inherited
- return self._color || self._parseColor( self.inkRipple() ) || self._parseColor( getElementColor() );
-
- /**
- * Finds the color element and returns its text color for use as default ripple color
- * @returns {string}
- */
- function getElementColor () {
- var items = self.options && self.options.colorElement ? self.options.colorElement : [];
- var elem = items.length ? items[ 0 ] : self.$element[ 0 ];
-
- return elem ? self.$window.getComputedStyle(elem).color : 'rgb(0,0,0)';
- }
-};
-
-/**
- * Updating the ripple colors based on the current inkRipple value
- * or the element's computed style color
- */
-InkRippleCtrl.prototype.calculateColor = function () {
- return this.color();
-};
-
-
-/**
- * Takes a string color and converts it to RGBA format
- * @param color {string}
- * @param [multiplier] {int}
- * @returns {string}
- */
-
-InkRippleCtrl.prototype._parseColor = function parseColor (color, multiplier) {
- multiplier = multiplier || 1;
- var colorUtil = this.$mdColorUtil;
-
- if (!color) return;
- if (color.indexOf('rgba') === 0) return color.replace(/\d?\.?\d*\s*\)\s*$/, (0.1 * multiplier).toString() + ')');
- if (color.indexOf('rgb') === 0) return colorUtil.rgbToRgba(color);
- if (color.indexOf('#') === 0) return colorUtil.hexToRgba(color);
-
-};
-
-/**
- * Binds events to the root element for
- */
-InkRippleCtrl.prototype.bindEvents = function () {
- this.$element.on('mousedown', angular.bind(this, this.handleMousedown));
- this.$element.on('mouseup touchend', angular.bind(this, this.handleMouseup));
- this.$element.on('mouseleave', angular.bind(this, this.handleMouseup));
- this.$element.on('touchmove', angular.bind(this, this.handleTouchmove));
-};
-
-/**
- * Create a new ripple on every mousedown event from the root element
- * @param event {MouseEvent}
- */
-InkRippleCtrl.prototype.handleMousedown = function (event) {
- if ( this.mousedown ) return;
-
- // When jQuery is loaded, we have to get the original event
- if (event.hasOwnProperty('originalEvent')) event = event.originalEvent;
- this.mousedown = true;
- if (this.options.center) {
- this.createRipple(this.container.prop('clientWidth') / 2, this.container.prop('clientWidth') / 2);
- } else {
-
- // We need to calculate the relative coordinates if the target is a sublayer of the ripple element
- if (event.srcElement !== this.$element[0]) {
- var layerRect = this.$element[0].getBoundingClientRect();
- var layerX = event.clientX - layerRect.left;
- var layerY = event.clientY - layerRect.top;
-
- this.createRipple(layerX, layerY);
- } else {
- this.createRipple(event.offsetX, event.offsetY);
- }
- }
-};
-
-/**
- * Either remove or unlock any remaining ripples when the user mouses off of the element (either by
- * mouseup, touchend or mouseleave event)
- */
-InkRippleCtrl.prototype.handleMouseup = function () {
- autoCleanup(this, this.clearRipples);
-};
-
-/**
- * Either remove or unlock any remaining ripples when the user mouses off of the element (by
- * touchmove)
- */
-InkRippleCtrl.prototype.handleTouchmove = function () {
- autoCleanup(this, this.deleteRipples);
-};
-
-/**
- * Cycles through all ripples and attempts to remove them.
- */
-InkRippleCtrl.prototype.deleteRipples = function () {
- for (var i = 0; i < this.ripples.length; i++) {
- this.ripples[ i ].remove();
- }
-};
-
-/**
- * Cycles through all ripples and attempts to remove them with fade.
- * Depending on logic within `fadeInComplete`, some removals will be postponed.
- */
-InkRippleCtrl.prototype.clearRipples = function () {
- for (var i = 0; i < this.ripples.length; i++) {
- this.fadeInComplete(this.ripples[ i ]);
- }
-};
-
-/**
- * Creates the ripple container element
- * @returns {*}
- */
-InkRippleCtrl.prototype.createContainer = function () {
- var container = angular.element('');
- this.$element.append(container);
- return container;
-};
-
-InkRippleCtrl.prototype.clearTimeout = function () {
- if (this.timeout) {
- this.$timeout.cancel(this.timeout);
- this.timeout = null;
- }
-};
-
-InkRippleCtrl.prototype.isRippleAllowed = function () {
- var element = this.$element[0];
- do {
- if (!element.tagName || element.tagName === 'BODY') break;
-
- if (element && angular.isFunction(element.hasAttribute)) {
- if (element.hasAttribute('disabled')) return false;
- if (this.inkRipple() === 'false' || this.inkRipple() === '0') return false;
- }
-
- } while (element = element.parentNode);
- return true;
-};
-
-/**
- * The attribute `md-ink-ripple` may be a static or interpolated
- * color value OR a boolean indicator (used to disable ripples)
- */
-InkRippleCtrl.prototype.inkRipple = function () {
- return this.$element.attr('md-ink-ripple');
-};
-
-/**
- * Creates a new ripple and adds it to the container. Also tracks ripple in `this.ripples`.
- * @param left
- * @param top
- */
-InkRippleCtrl.prototype.createRipple = function (left, top) {
- if (!this.isRippleAllowed()) return;
-
- var ctrl = this;
- var colorUtil = ctrl.$mdColorUtil;
- var ripple = angular.element('');
- var width = this.$element.prop('clientWidth');
- var height = this.$element.prop('clientHeight');
- var x = Math.max(Math.abs(width - left), left) * 2;
- var y = Math.max(Math.abs(height - top), top) * 2;
- var size = getSize(this.options.fitRipple, x, y);
- var color = this.calculateColor();
-
- ripple.css({
- left: left + 'px',
- top: top + 'px',
- background: 'black',
- width: size + 'px',
- height: size + 'px',
- backgroundColor: colorUtil.rgbaToRgb(color),
- borderColor: colorUtil.rgbaToRgb(color)
- });
- this.lastRipple = ripple;
-
- // we only want one timeout to be running at a time
- this.clearTimeout();
- this.timeout = this.$timeout(function () {
- ctrl.clearTimeout();
- if (!ctrl.mousedown) ctrl.fadeInComplete(ripple);
- }, DURATION * 0.35, false);
-
- if (this.options.dimBackground) this.container.css({ backgroundColor: color });
- this.container.append(ripple);
- this.ripples.push(ripple);
- ripple.addClass('md-ripple-placed');
-
- this.$mdUtil.nextTick(function () {
-
- ripple.addClass('md-ripple-scaled md-ripple-active');
- ctrl.$timeout(function () {
- ctrl.clearRipples();
- }, DURATION, false);
-
- }, false);
-
- function getSize (fit, x, y) {
- return fit
- ? Math.max(x, y)
- : Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
- }
-};
-
-
-
-/**
- * After fadeIn finishes, either kicks off the fade-out animation or queues the element for removal on mouseup
- * @param ripple
- */
-InkRippleCtrl.prototype.fadeInComplete = function (ripple) {
- if (this.lastRipple === ripple) {
- if (!this.timeout && !this.mousedown) {
- this.removeRipple(ripple);
- }
- } else {
- this.removeRipple(ripple);
- }
-};
-
-/**
- * Kicks off the animation for removing a ripple
- * @param ripple {Element}
- */
-InkRippleCtrl.prototype.removeRipple = function (ripple) {
- var ctrl = this;
- var index = this.ripples.indexOf(ripple);
- if (index < 0) return;
- this.ripples.splice(this.ripples.indexOf(ripple), 1);
- ripple.removeClass('md-ripple-active');
- ripple.addClass('md-ripple-remove');
- if (this.ripples.length === 0) this.container.css({ backgroundColor: '' });
- // use a 2-second timeout in order to allow for the animation to finish
- // we don't actually care how long the animation takes
- this.$timeout(function () {
- ctrl.fadeOutComplete(ripple);
- }, DURATION, false);
-};
-
-/**
- * Removes the provided ripple from the DOM
- * @param ripple
- */
-InkRippleCtrl.prototype.fadeOutComplete = function (ripple) {
- ripple.remove();
- this.lastRipple = null;
-};
-
-/**
- * Used to create an empty directive. This is used to track flag-directives whose children may have
- * functionality based on them.
- *
- * Example: `md-no-ink` will potentially be used by all child directives.
- */
-function attrNoDirective () {
- return { controller: angular.noop };
-}
-
-})();
-(function(){
-"use strict";
-
-(function() {
- 'use strict';
-
- /**
- * @ngdoc service
- * @name $mdTabInkRipple
- * @module material.core
- *
- * @description
- * Provides ripple effects for md-tabs. See $mdInkRipple service for all possible configuration options.
- *
- * @param {object=} scope Scope within the current context
- * @param {object=} element The element the ripple effect should be applied to
- * @param {object=} options (Optional) Configuration options to override the defaultripple configuration
- */
-
- angular.module('material.core')
- .factory('$mdTabInkRipple', MdTabInkRipple);
-
- function MdTabInkRipple($mdInkRipple) {
- return {
- attach: attach
- };
-
- function attach(scope, element, options) {
- return $mdInkRipple.attach(scope, element, angular.extend({
- center: false,
- dimBackground: true,
- outline: false,
- rippleSize: 'full'
- }, options));
- };
- }
- MdTabInkRipple.$inject = ["$mdInkRipple"];;
-})();
-
-})();
-(function(){
-"use strict";
-
-angular.module('material.core.theming.palette', [])
-.constant('$mdColorPalette', {
- 'red': {
- '50': '#ffebee',
- '100': '#ffcdd2',
- '200': '#ef9a9a',
- '300': '#e57373',
- '400': '#ef5350',
- '500': '#f44336',
- '600': '#e53935',
- '700': '#d32f2f',
- '800': '#c62828',
- '900': '#b71c1c',
- 'A100': '#ff8a80',
- 'A200': '#ff5252',
- 'A400': '#ff1744',
- 'A700': '#d50000',
- 'contrastDefaultColor': 'light',
- 'contrastDarkColors': '50 100 200 300 A100',
- 'contrastStrongLightColors': '400 500 600 700 A200 A400 A700'
- },
- 'pink': {
- '50': '#fce4ec',
- '100': '#f8bbd0',
- '200': '#f48fb1',
- '300': '#f06292',
- '400': '#ec407a',
- '500': '#e91e63',
- '600': '#d81b60',
- '700': '#c2185b',
- '800': '#ad1457',
- '900': '#880e4f',
- 'A100': '#ff80ab',
- 'A200': '#ff4081',
- 'A400': '#f50057',
- 'A700': '#c51162',
- 'contrastDefaultColor': 'light',
- 'contrastDarkColors': '50 100 200 A100',
- 'contrastStrongLightColors': '500 600 A200 A400 A700'
- },
- 'purple': {
- '50': '#f3e5f5',
- '100': '#e1bee7',
- '200': '#ce93d8',
- '300': '#ba68c8',
- '400': '#ab47bc',
- '500': '#9c27b0',
- '600': '#8e24aa',
- '700': '#7b1fa2',
- '800': '#6a1b9a',
- '900': '#4a148c',
- 'A100': '#ea80fc',
- 'A200': '#e040fb',
- 'A400': '#d500f9',
- 'A700': '#aa00ff',
- 'contrastDefaultColor': 'light',
- 'contrastDarkColors': '50 100 200 A100',
- 'contrastStrongLightColors': '300 400 A200 A400 A700'
- },
- 'deep-purple': {
- '50': '#ede7f6',
- '100': '#d1c4e9',
- '200': '#b39ddb',
- '300': '#9575cd',
- '400': '#7e57c2',
- '500': '#673ab7',
- '600': '#5e35b1',
- '700': '#512da8',
- '800': '#4527a0',
- '900': '#311b92',
- 'A100': '#b388ff',
- 'A200': '#7c4dff',
- 'A400': '#651fff',
- 'A700': '#6200ea',
- 'contrastDefaultColor': 'light',
- 'contrastDarkColors': '50 100 200 A100',
- 'contrastStrongLightColors': '300 400 A200'
- },
- 'indigo': {
- '50': '#e8eaf6',
- '100': '#c5cae9',
- '200': '#9fa8da',
- '300': '#7986cb',
- '400': '#5c6bc0',
- '500': '#3f51b5',
- '600': '#3949ab',
- '700': '#303f9f',
- '800': '#283593',
- '900': '#1a237e',
- 'A100': '#8c9eff',
- 'A200': '#536dfe',
- 'A400': '#3d5afe',
- 'A700': '#304ffe',
- 'contrastDefaultColor': 'light',
- 'contrastDarkColors': '50 100 200 A100',
- 'contrastStrongLightColors': '300 400 A200 A400'
- },
- 'blue': {
- '50': '#e3f2fd',
- '100': '#bbdefb',
- '200': '#90caf9',
- '300': '#64b5f6',
- '400': '#42a5f5',
- '500': '#2196f3',
- '600': '#1e88e5',
- '700': '#1976d2',
- '800': '#1565c0',
- '900': '#0d47a1',
- 'A100': '#82b1ff',
- 'A200': '#448aff',
- 'A400': '#2979ff',
- 'A700': '#2962ff',
- 'contrastDefaultColor': 'light',
- 'contrastDarkColors': '50 100 200 300 400 A100',
- 'contrastStrongLightColors': '500 600 700 A200 A400 A700'
- },
- 'light-blue': {
- '50': '#e1f5fe',
- '100': '#b3e5fc',
- '200': '#81d4fa',
- '300': '#4fc3f7',
- '400': '#29b6f6',
- '500': '#03a9f4',
- '600': '#039be5',
- '700': '#0288d1',
- '800': '#0277bd',
- '900': '#01579b',
- 'A100': '#80d8ff',
- 'A200': '#40c4ff',
- 'A400': '#00b0ff',
- 'A700': '#0091ea',
- 'contrastDefaultColor': 'dark',
- 'contrastLightColors': '600 700 800 900 A700',
- 'contrastStrongLightColors': '600 700 800 A700'
- },
- 'cyan': {
- '50': '#e0f7fa',
- '100': '#b2ebf2',
- '200': '#80deea',
- '300': '#4dd0e1',
- '400': '#26c6da',
- '500': '#00bcd4',
- '600': '#00acc1',
- '700': '#0097a7',
- '800': '#00838f',
- '900': '#006064',
- 'A100': '#84ffff',
- 'A200': '#18ffff',
- 'A400': '#00e5ff',
- 'A700': '#00b8d4',
- 'contrastDefaultColor': 'dark',
- 'contrastLightColors': '700 800 900',
- 'contrastStrongLightColors': '700 800 900'
- },
- 'teal': {
- '50': '#e0f2f1',
- '100': '#b2dfdb',
- '200': '#80cbc4',
- '300': '#4db6ac',
- '400': '#26a69a',
- '500': '#009688',
- '600': '#00897b',
- '700': '#00796b',
- '800': '#00695c',
- '900': '#004d40',
- 'A100': '#a7ffeb',
- 'A200': '#64ffda',
- 'A400': '#1de9b6',
- 'A700': '#00bfa5',
- 'contrastDefaultColor': 'dark',
- 'contrastLightColors': '500 600 700 800 900',
- 'contrastStrongLightColors': '500 600 700'
- },
- 'green': {
- '50': '#e8f5e9',
- '100': '#c8e6c9',
- '200': '#a5d6a7',
- '300': '#81c784',
- '400': '#66bb6a',
- '500': '#4caf50',
- '600': '#43a047',
- '700': '#388e3c',
- '800': '#2e7d32',
- '900': '#1b5e20',
- 'A100': '#b9f6ca',
- 'A200': '#69f0ae',
- 'A400': '#00e676',
- 'A700': '#00c853',
- 'contrastDefaultColor': 'dark',
- 'contrastLightColors': '500 600 700 800 900',
- 'contrastStrongLightColors': '500 600 700'
- },
- 'light-green': {
- '50': '#f1f8e9',
- '100': '#dcedc8',
- '200': '#c5e1a5',
- '300': '#aed581',
- '400': '#9ccc65',
- '500': '#8bc34a',
- '600': '#7cb342',
- '700': '#689f38',
- '800': '#558b2f',
- '900': '#33691e',
- 'A100': '#ccff90',
- 'A200': '#b2ff59',
- 'A400': '#76ff03',
- 'A700': '#64dd17',
- 'contrastDefaultColor': 'dark',
- 'contrastLightColors': '700 800 900',
- 'contrastStrongLightColors': '700 800 900'
- },
- 'lime': {
- '50': '#f9fbe7',
- '100': '#f0f4c3',
- '200': '#e6ee9c',
- '300': '#dce775',
- '400': '#d4e157',
- '500': '#cddc39',
- '600': '#c0ca33',
- '700': '#afb42b',
- '800': '#9e9d24',
- '900': '#827717',
- 'A100': '#f4ff81',
- 'A200': '#eeff41',
- 'A400': '#c6ff00',
- 'A700': '#aeea00',
- 'contrastDefaultColor': 'dark',
- 'contrastLightColors': '900',
- 'contrastStrongLightColors': '900'
- },
- 'yellow': {
- '50': '#fffde7',
- '100': '#fff9c4',
- '200': '#fff59d',
- '300': '#fff176',
- '400': '#ffee58',
- '500': '#ffeb3b',
- '600': '#fdd835',
- '700': '#fbc02d',
- '800': '#f9a825',
- '900': '#f57f17',
- 'A100': '#ffff8d',
- 'A200': '#ffff00',
- 'A400': '#ffea00',
- 'A700': '#ffd600',
- 'contrastDefaultColor': 'dark'
- },
- 'amber': {
- '50': '#fff8e1',
- '100': '#ffecb3',
- '200': '#ffe082',
- '300': '#ffd54f',
- '400': '#ffca28',
- '500': '#ffc107',
- '600': '#ffb300',
- '700': '#ffa000',
- '800': '#ff8f00',
- '900': '#ff6f00',
- 'A100': '#ffe57f',
- 'A200': '#ffd740',
- 'A400': '#ffc400',
- 'A700': '#ffab00',
- 'contrastDefaultColor': 'dark'
- },
- 'orange': {
- '50': '#fff3e0',
- '100': '#ffe0b2',
- '200': '#ffcc80',
- '300': '#ffb74d',
- '400': '#ffa726',
- '500': '#ff9800',
- '600': '#fb8c00',
- '700': '#f57c00',
- '800': '#ef6c00',
- '900': '#e65100',
- 'A100': '#ffd180',
- 'A200': '#ffab40',
- 'A400': '#ff9100',
- 'A700': '#ff6d00',
- 'contrastDefaultColor': 'dark',
- 'contrastLightColors': '800 900',
- 'contrastStrongLightColors': '800 900'
- },
- 'deep-orange': {
- '50': '#fbe9e7',
- '100': '#ffccbc',
- '200': '#ffab91',
- '300': '#ff8a65',
- '400': '#ff7043',
- '500': '#ff5722',
- '600': '#f4511e',
- '700': '#e64a19',
- '800': '#d84315',
- '900': '#bf360c',
- 'A100': '#ff9e80',
- 'A200': '#ff6e40',
- 'A400': '#ff3d00',
- 'A700': '#dd2c00',
- 'contrastDefaultColor': 'light',
- 'contrastDarkColors': '50 100 200 300 400 A100 A200',
- 'contrastStrongLightColors': '500 600 700 800 900 A400 A700'
- },
- 'brown': {
- '50': '#efebe9',
- '100': '#d7ccc8',
- '200': '#bcaaa4',
- '300': '#a1887f',
- '400': '#8d6e63',
- '500': '#795548',
- '600': '#6d4c41',
- '700': '#5d4037',
- '800': '#4e342e',
- '900': '#3e2723',
- 'A100': '#d7ccc8',
- 'A200': '#bcaaa4',
- 'A400': '#8d6e63',
- 'A700': '#5d4037',
- 'contrastDefaultColor': 'light',
- 'contrastDarkColors': '50 100 200 A100 A200',
- 'contrastStrongLightColors': '300 400'
- },
- 'grey': {
- '50': '#fafafa',
- '100': '#f5f5f5',
- '200': '#eeeeee',
- '300': '#e0e0e0',
- '400': '#bdbdbd',
- '500': '#9e9e9e',
- '600': '#757575',
- '700': '#616161',
- '800': '#424242',
- '900': '#212121',
- 'A100': '#ffffff',
- 'A200': '#000000',
- 'A400': '#303030',
- 'A700': '#616161',
- 'contrastDefaultColor': 'dark',
- 'contrastLightColors': '600 700 800 900 A200 A400 A700'
- },
- 'blue-grey': {
- '50': '#eceff1',
- '100': '#cfd8dc',
- '200': '#b0bec5',
- '300': '#90a4ae',
- '400': '#78909c',
- '500': '#607d8b',
- '600': '#546e7a',
- '700': '#455a64',
- '800': '#37474f',
- '900': '#263238',
- 'A100': '#cfd8dc',
- 'A200': '#b0bec5',
- 'A400': '#78909c',
- 'A700': '#455a64',
- 'contrastDefaultColor': 'light',
- 'contrastDarkColors': '50 100 200 300 A100 A200',
- 'contrastStrongLightColors': '400 500 700'
- }
-});
-
-})();
-(function(){
-"use strict";
-
-(function(angular) {
- 'use strict';
-/**
- * @ngdoc module
- * @name material.core.theming
- * @description
- * Theming
- */
-angular.module('material.core.theming', ['material.core.theming.palette'])
- .directive('mdTheme', ThemingDirective)
- .directive('mdThemable', ThemableDirective)
- .directive('mdThemesDisabled', disableThemesDirective )
- .provider('$mdTheming', ThemingProvider)
- .config( detectDisabledThemes )
- .run(generateAllThemes);
-
-/**
- * Detect if the HTML or the BODY tags has a [md-themes-disabled] attribute
- * If yes, then immediately disable all theme stylesheet generation and DOM injection
- */
-/**
- * @ngInject
- */
-function detectDisabledThemes($mdThemingProvider) {
- var isDisabled = !!document.querySelector('[md-themes-disabled]');
- $mdThemingProvider.disableTheming(isDisabled);
-}
-detectDisabledThemes.$inject = ["$mdThemingProvider"];
-
-/**
- * @ngdoc service
- * @name $mdThemingProvider
- * @module material.core.theming
- *
- * @description Provider to configure the `$mdTheming` service.
- *
- * ### Default Theme
- * The `$mdThemingProvider` uses by default the following theme configuration:
- *
- * - Primary Palette: `Primary`
- * - Accent Palette: `Pink`
- * - Warn Palette: `Deep-Orange`
- * - Background Palette: `Grey`
- *
- * If you don't want to use the `md-theme` directive on the elements itself, you may want to overwrite
- * the default theme.
- * This can be done by using the following markup.
- *
- *
- * myAppModule.config(function($mdThemingProvider) {
- * $mdThemingProvider
- * .theme('default')
- * .primaryPalette('blue')
- * .accentPalette('teal')
- * .warnPalette('red')
- * .backgroundPalette('grey');
- * });
- *
- *
-
- * ### Dynamic Themes
- *
- * By default, if you change a theme at runtime, the `$mdTheming` service will not detect those changes.
- * If you have an application, which changes its theme on runtime, you have to enable theme watching.
- *
- *
- * myAppModule.config(function($mdThemingProvider) {
- * // Enable theme watching.
- * $mdThemingProvider.alwaysWatchTheme(true);
- * });
- *
- *
- * ### Custom Theme Styles
- *
- * Sometimes you may want to use your own theme styles for some custom components.
- * You are able to register your own styles by using the following markup.
- *
- *
- * myAppModule.config(function($mdThemingProvider) {
- * // Register our custom stylesheet into the theming provider.
- * $mdThemingProvider.registerStyles(STYLESHEET);
- * });
- *
- *
- * The `registerStyles` method only accepts strings as value, so you're actually not able to load an external
- * stylesheet file into the `$mdThemingProvider`.
- *
- * If it's necessary to load an external stylesheet, we suggest using a bundler, which supports including raw content,
- * like [raw-loader](https://github.com/webpack/raw-loader) for `webpack`.
- *
- *
- * myAppModule.config(function($mdThemingProvider) {
- * // Register your custom stylesheet into the theming provider.
- * $mdThemingProvider.registerStyles(require('../styles/my-component.theme.css'));
- * });
- *
- */
-
-/**
- * @ngdoc method
- * @name $mdThemingProvider#registerStyles
- * @param {string} styles The styles to be appended to Angular Material's built in theme css.
- */
-/**
- * @ngdoc method
- * @name $mdThemingProvider#setNonce
- * @param {string} nonceValue The nonce to be added as an attribute to the theme style tags.
- * Setting a value allows the use of CSP policy without using the unsafe-inline directive.
- */
-
-/**
- * @ngdoc method
- * @name $mdThemingProvider#setDefaultTheme
- * @param {string} themeName Default theme name to be applied to elements. Default value is `default`.
- */
-
-/**
- * @ngdoc method
- * @name $mdThemingProvider#alwaysWatchTheme
- * @param {boolean} watch Whether or not to always watch themes for changes and re-apply
- * classes when they change. Default is `false`. Enabling can reduce performance.
- */
-
-/* Some Example Valid Theming Expressions
- * =======================================
- *
- * Intention group expansion: (valid for primary, accent, warn, background)
- *
- * {{primary-100}} - grab shade 100 from the primary palette
- * {{primary-100-0.7}} - grab shade 100, apply opacity of 0.7
- * {{primary-100-contrast}} - grab shade 100's contrast color
- * {{primary-hue-1}} - grab the shade assigned to hue-1 from the primary palette
- * {{primary-hue-1-0.7}} - apply 0.7 opacity to primary-hue-1
- * {{primary-color}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured shades set for each hue
- * {{primary-color-0.7}} - Apply 0.7 opacity to each of the above rules
- * {{primary-contrast}} - Generates .md-hue-1, .md-hue-2, .md-hue-3 with configured contrast (ie. text) color shades set for each hue
- * {{primary-contrast-0.7}} - Apply 0.7 opacity to each of the above rules
- *
- * Foreground expansion: Applies rgba to black/white foreground text
- *
- * {{foreground-1}} - used for primary text
- * {{foreground-2}} - used for secondary text/divider
- * {{foreground-3}} - used for disabled text
- * {{foreground-4}} - used for dividers
- *
- */
-
-// In memory generated CSS rules; registered by theme.name
-var GENERATED = { };
-
-// In memory storage of defined themes and color palettes (both loaded by CSS, and user specified)
-var PALETTES;
-
-// Text Colors on light and dark backgrounds
-// @see https://www.google.com/design/spec/style/color.html#color-text-background-colors
-var DARK_FOREGROUND = {
- name: 'dark',
- '1': 'rgba(0,0,0,0.87)',
- '2': 'rgba(0,0,0,0.54)',
- '3': 'rgba(0,0,0,0.38)',
- '4': 'rgba(0,0,0,0.12)'
-};
-var LIGHT_FOREGROUND = {
- name: 'light',
- '1': 'rgba(255,255,255,1.0)',
- '2': 'rgba(255,255,255,0.7)',
- '3': 'rgba(255,255,255,0.5)',
- '4': 'rgba(255,255,255,0.12)'
-};
-
-var DARK_SHADOW = '1px 1px 0px rgba(0,0,0,0.4), -1px -1px 0px rgba(0,0,0,0.4)';
-var LIGHT_SHADOW = '';
-
-var DARK_CONTRAST_COLOR = colorToRgbaArray('rgba(0,0,0,0.87)');
-var LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgba(255,255,255,0.87)');
-var STRONG_LIGHT_CONTRAST_COLOR = colorToRgbaArray('rgb(255,255,255)');
-
-var THEME_COLOR_TYPES = ['primary', 'accent', 'warn', 'background'];
-var DEFAULT_COLOR_TYPE = 'primary';
-
-// A color in a theme will use these hues by default, if not specified by user.
-var LIGHT_DEFAULT_HUES = {
- 'accent': {
- 'default': 'A200',
- 'hue-1': 'A100',
- 'hue-2': 'A400',
- 'hue-3': 'A700'
- },
- 'background': {
- 'default': '50',
- 'hue-1': 'A100',
- 'hue-2': '100',
- 'hue-3': '300'
- }
-};
-
-var DARK_DEFAULT_HUES = {
- 'background': {
- 'default': 'A400',
- 'hue-1': '800',
- 'hue-2': '900',
- 'hue-3': 'A200'
- }
-};
-THEME_COLOR_TYPES.forEach(function(colorType) {
- // Color types with unspecified default hues will use these default hue values
- var defaultDefaultHues = {
- 'default': '500',
- 'hue-1': '300',
- 'hue-2': '800',
- 'hue-3': 'A100'
- };
- if (!LIGHT_DEFAULT_HUES[colorType]) LIGHT_DEFAULT_HUES[colorType] = defaultDefaultHues;
- if (!DARK_DEFAULT_HUES[colorType]) DARK_DEFAULT_HUES[colorType] = defaultDefaultHues;
-});
-
-var VALID_HUE_VALUES = [
- '50', '100', '200', '300', '400', '500', '600',
- '700', '800', '900', 'A100', 'A200', 'A400', 'A700'
-];
-
-var themeConfig = {
- disableTheming : false, // Generate our themes at run time; also disable stylesheet DOM injection
- generateOnDemand : false, // Whether or not themes are to be generated on-demand (vs. eagerly).
- registeredStyles : [], // Custom styles registered to be used in the theming of custom components.
- nonce : null // Nonce to be added as an attribute to the generated themes style tags.
-};
-
-/**
- *
- */
-function ThemingProvider($mdColorPalette) {
- PALETTES = { };
- var THEMES = { };
-
- var themingProvider;
-
- var alwaysWatchTheme = false;
- var defaultTheme = 'default';
-
- // Load JS Defined Palettes
- angular.extend(PALETTES, $mdColorPalette);
-
- // Default theme defined in core.js
-
- ThemingService.$inject = ["$rootScope", "$log"];
- return themingProvider = {
- definePalette: definePalette,
- extendPalette: extendPalette,
- theme: registerTheme,
-
- configuration : function() {
- // return a read-only clone of the current configuration
- var locals = { defaultTheme : defaultTheme, alwaysWatchTheme : alwaysWatchTheme };
- return angular.extend( { }, config, locals );
- },
-
- /**
- * Easy way to disable theming without having to use
- * `.constant("$MD_THEME_CSS","");` This disables
- * all dynamic theme style sheet generations and injections...
- */
- disableTheming: function(isDisabled) {
- themeConfig.disableTheming = angular.isUndefined(isDisabled) || !!isDisabled;
- },
-
- registerStyles: function(styles) {
- themeConfig.registeredStyles.push(styles);
- },
-
- setNonce: function(nonceValue) {
- themeConfig.nonce = nonceValue;
- },
-
- generateThemesOnDemand: function(onDemand) {
- themeConfig.generateOnDemand = onDemand;
- },
-
- setDefaultTheme: function(theme) {
- defaultTheme = theme;
- },
-
- alwaysWatchTheme: function(alwaysWatch) {
- alwaysWatchTheme = alwaysWatch;
- },
-
- $get: ThemingService,
- _LIGHT_DEFAULT_HUES: LIGHT_DEFAULT_HUES,
- _DARK_DEFAULT_HUES: DARK_DEFAULT_HUES,
- _PALETTES: PALETTES,
- _THEMES: THEMES,
- _parseRules: parseRules,
- _rgba: rgba
- };
-
- // Example: $mdThemingProvider.definePalette('neonRed', { 50: '#f5fafa', ... });
- function definePalette(name, map) {
- map = map || {};
- PALETTES[name] = checkPaletteValid(name, map);
- return themingProvider;
- }
-
- // Returns an new object which is a copy of a given palette `name` with variables from
- // `map` overwritten
- // Example: var neonRedMap = $mdThemingProvider.extendPalette('red', { 50: '#f5fafafa' });
- function extendPalette(name, map) {
- return checkPaletteValid(name, angular.extend({}, PALETTES[name] || {}, map) );
- }
-
- // Make sure that palette has all required hues
- function checkPaletteValid(name, map) {
- var missingColors = VALID_HUE_VALUES.filter(function(field) {
- return !map[field];
- });
- if (missingColors.length) {
- throw new Error("Missing colors %1 in palette %2!"
- .replace('%1', missingColors.join(', '))
- .replace('%2', name));
- }
-
- return map;
- }
-
- // Register a theme (which is a collection of color palettes to use with various states
- // ie. warn, accent, primary )
- // Optionally inherit from an existing theme
- // $mdThemingProvider.theme('custom-theme').primaryPalette('red');
- function registerTheme(name, inheritFrom) {
- if (THEMES[name]) return THEMES[name];
-
- inheritFrom = inheritFrom || 'default';
-
- var parentTheme = typeof inheritFrom === 'string' ? THEMES[inheritFrom] : inheritFrom;
- var theme = new Theme(name);
-
- if (parentTheme) {
- angular.forEach(parentTheme.colors, function(color, colorType) {
- theme.colors[colorType] = {
- name: color.name,
- // Make sure a COPY of the hues is given to the child color,
- // not the same reference.
- hues: angular.extend({}, color.hues)
- };
- });
- }
- THEMES[name] = theme;
-
- return theme;
- }
-
- function Theme(name) {
- var self = this;
- self.name = name;
- self.colors = {};
-
- self.dark = setDark;
- setDark(false);
-
- function setDark(isDark) {
- isDark = arguments.length === 0 ? true : !!isDark;
-
- // If no change, abort
- if (isDark === self.isDark) return;
-
- self.isDark = isDark;
-
- self.foregroundPalette = self.isDark ? LIGHT_FOREGROUND : DARK_FOREGROUND;
- self.foregroundShadow = self.isDark ? DARK_SHADOW : LIGHT_SHADOW;
-
- // Light and dark themes have different default hues.
- // Go through each existing color type for this theme, and for every
- // hue value that is still the default hue value from the previous light/dark setting,
- // set it to the default hue value from the new light/dark setting.
- var newDefaultHues = self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES;
- var oldDefaultHues = self.isDark ? LIGHT_DEFAULT_HUES : DARK_DEFAULT_HUES;
- angular.forEach(newDefaultHues, function(newDefaults, colorType) {
- var color = self.colors[colorType];
- var oldDefaults = oldDefaultHues[colorType];
- if (color) {
- for (var hueName in color.hues) {
- if (color.hues[hueName] === oldDefaults[hueName]) {
- color.hues[hueName] = newDefaults[hueName];
- }
- }
- }
- });
-
- return self;
- }
-
- THEME_COLOR_TYPES.forEach(function(colorType) {
- var defaultHues = (self.isDark ? DARK_DEFAULT_HUES : LIGHT_DEFAULT_HUES)[colorType];
- self[colorType + 'Palette'] = function setPaletteType(paletteName, hues) {
- var color = self.colors[colorType] = {
- name: paletteName,
- hues: angular.extend({}, defaultHues, hues)
- };
-
- Object.keys(color.hues).forEach(function(name) {
- if (!defaultHues[name]) {
- throw new Error("Invalid hue name '%1' in theme %2's %3 color %4. Available hue names: %4"
- .replace('%1', name)
- .replace('%2', self.name)
- .replace('%3', paletteName)
- .replace('%4', Object.keys(defaultHues).join(', '))
- );
- }
- });
- Object.keys(color.hues).map(function(key) {
- return color.hues[key];
- }).forEach(function(hueValue) {
- if (VALID_HUE_VALUES.indexOf(hueValue) == -1) {
- throw new Error("Invalid hue value '%1' in theme %2's %3 color %4. Available hue values: %5"
- .replace('%1', hueValue)
- .replace('%2', self.name)
- .replace('%3', colorType)
- .replace('%4', paletteName)
- .replace('%5', VALID_HUE_VALUES.join(', '))
- );
- }
- });
- return self;
- };
-
- self[colorType + 'Color'] = function() {
- var args = Array.prototype.slice.call(arguments);
- console.warn('$mdThemingProviderTheme.' + colorType + 'Color() has been deprecated. ' +
- 'Use $mdThemingProviderTheme.' + colorType + 'Palette() instead.');
- return self[colorType + 'Palette'].apply(self, args);
- };
- });
- }
-
- /**
- * @ngdoc service
- * @name $mdTheming
- *
- * @description
- *
- * Service that makes an element apply theming related classes to itself.
- *
- * ```js
- * app.directive('myFancyDirective', function($mdTheming) {
- * return {
- * restrict: 'e',
- * link: function(scope, el, attrs) {
- * $mdTheming(el);
- * }
- * };
- * });
- * ```
- * @param {el=} element to apply theming to
- */
- /* @ngInject */
- function ThemingService($rootScope, $log) {
- // Allow us to be invoked via a linking function signature.
- var applyTheme = function (scope, el) {
- if (el === undefined) { el = scope; scope = undefined; }
- if (scope === undefined) { scope = $rootScope; }
- applyTheme.inherit(el, el);
- };
-
- applyTheme.THEMES = angular.extend({}, THEMES);
- applyTheme.PALETTES = angular.extend({}, PALETTES);
- applyTheme.inherit = inheritTheme;
- applyTheme.registered = registered;
- applyTheme.defaultTheme = function() { return defaultTheme; };
- applyTheme.generateTheme = function(name) { generateTheme(THEMES[name], name, themeConfig.nonce); };
-
- return applyTheme;
-
- /**
- * Determine is specified theme name is a valid, registered theme
- */
- function registered(themeName) {
- if (themeName === undefined || themeName === '') return true;
- return applyTheme.THEMES[themeName] !== undefined;
- }
-
- /**
- * Get theme name for the element, then update with Theme CSS class
- */
- function inheritTheme (el, parent) {
- var ctrl = parent.controller('mdTheme');
- var attrThemeValue = el.attr('md-theme-watch');
- var watchTheme = (alwaysWatchTheme || angular.isDefined(attrThemeValue)) && attrThemeValue != 'false';
-
- updateThemeClass(lookupThemeName());
-
- if ((alwaysWatchTheme && !registerChangeCallback()) || (!alwaysWatchTheme && watchTheme)) {
- el.on('$destroy', $rootScope.$watch(lookupThemeName, updateThemeClass) );
- }
-
- /**
- * Find the theme name from the parent controller or element data
- */
- function lookupThemeName() {
- // As a few components (dialog) add their controllers later, we should also watch for a controller init.
- ctrl = parent.controller('mdTheme') || el.data('$mdThemeController');
- return ctrl && ctrl.$mdTheme || (defaultTheme == 'default' ? '' : defaultTheme);
- }
-
- /**
- * Remove old theme class and apply a new one
- * NOTE: if not a valid theme name, then the current name is not changed
- */
- function updateThemeClass(theme) {
- if (!theme) return;
- if (!registered(theme)) {
- $log.warn('Attempted to use unregistered theme \'' + theme + '\'. ' +
- 'Register it with $mdThemingProvider.theme().');
- }
-
- var oldTheme = el.data('$mdThemeName');
- if (oldTheme) el.removeClass('md-' + oldTheme +'-theme');
- el.addClass('md-' + theme + '-theme');
- el.data('$mdThemeName', theme);
- if (ctrl) {
- el.data('$mdThemeController', ctrl);
- }
- }
-
- /**
- * Register change callback with parent mdTheme controller
- */
- function registerChangeCallback() {
- var parentController = parent.controller('mdTheme');
- if (!parentController) return false;
- el.on('$destroy', parentController.registerChanges( function() {
- updateThemeClass(lookupThemeName());
- }));
- return true;
- }
- }
-
- }
-}
-ThemingProvider.$inject = ["$mdColorPalette"];
-
-function ThemingDirective($mdTheming, $interpolate, $log) {
- return {
- priority: 100,
- link: {
- pre: function(scope, el, attrs) {
- var registeredCallbacks = [];
- var ctrl = {
- registerChanges: function (cb, context) {
- if (context) {
- cb = angular.bind(context, cb);
- }
-
- registeredCallbacks.push(cb);
-
- return function () {
- var index = registeredCallbacks.indexOf(cb);
-
- if (index > -1) {
- registeredCallbacks.splice(index, 1);
- }
- }
- },
- $setTheme: function (theme) {
- if (!$mdTheming.registered(theme)) {
- $log.warn('attempted to use unregistered theme \'' + theme + '\'');
- }
- ctrl.$mdTheme = theme;
-
- registeredCallbacks.forEach(function (cb) {
- cb();
- })
- }
- };
- el.data('$mdThemeController', ctrl);
- ctrl.$setTheme($interpolate(attrs.mdTheme)(scope));
- attrs.$observe('mdTheme', ctrl.$setTheme);
- }
- }
- };
-}
-ThemingDirective.$inject = ["$mdTheming", "$interpolate", "$log"];
-
-/**
- * Special directive that will disable ALL runtime Theme style generation and DOM injection
- *
- *
- *
- *
- *
- * ...
- *
- *
- * Note: Using md-themes-css directive requires the developer to load external
- * theme stylesheets; e.g. custom themes from Material-Tools:
- *
- * `angular-material.themes.css`
- *
- * Another option is to use the ThemingProvider to configure and disable the attribute
- * conversions; this would obviate the use of the `md-themes-css` directive
- *
- */
-function disableThemesDirective() {
- themeConfig.disableTheming = true;
-
- // Return a 1x-only, first-match attribute directive
- return {
- restrict : 'A',
- priority : '900'
- };
-}
-
-function ThemableDirective($mdTheming) {
- return $mdTheming;
-}
-ThemableDirective.$inject = ["$mdTheming"];
-
-function parseRules(theme, colorType, rules) {
- checkValidPalette(theme, colorType);
-
- rules = rules.replace(/THEME_NAME/g, theme.name);
- var generatedRules = [];
- var color = theme.colors[colorType];
-
- var themeNameRegex = new RegExp('\\.md-' + theme.name + '-theme', 'g');
- // Matches '{{ primary-color }}', etc
- var hueRegex = new RegExp('(\'|")?{{\\s*(' + colorType + ')-(color|contrast)-?(\\d\\.?\\d*)?\\s*}}(\"|\')?','g');
- var simpleVariableRegex = /'?"?\{\{\s*([a-zA-Z]+)-(A?\d+|hue\-[0-3]|shadow|default)-?(\d\.?\d*)?(contrast)?\s*\}\}'?"?/g;
- var palette = PALETTES[color.name];
-
- // find and replace simple variables where we use a specific hue, not an entire palette
- // eg. "{{primary-100}}"
- //\(' + THEME_COLOR_TYPES.join('\|') + '\)'
- rules = rules.replace(simpleVariableRegex, function(match, colorType, hue, opacity, contrast) {
- if (colorType === 'foreground') {
- if (hue == 'shadow') {
- return theme.foregroundShadow;
- } else {
- return theme.foregroundPalette[hue] || theme.foregroundPalette['1'];
- }
- }
-
- // `default` is also accepted as a hue-value, because the background palettes are
- // using it as a name for the default hue.
- if (hue.indexOf('hue') === 0 || hue === 'default') {
- hue = theme.colors[colorType].hues[hue];
- }
-
- return rgba( (PALETTES[ theme.colors[colorType].name ][hue] || '')[contrast ? 'contrast' : 'value'], opacity );
- });
-
- // For each type, generate rules for each hue (ie. default, md-hue-1, md-hue-2, md-hue-3)
- angular.forEach(color.hues, function(hueValue, hueName) {
- var newRule = rules
- .replace(hueRegex, function(match, _, colorType, hueType, opacity) {
- return rgba(palette[hueValue][hueType === 'color' ? 'value' : 'contrast'], opacity);
- });
- if (hueName !== 'default') {
- newRule = newRule.replace(themeNameRegex, '.md-' + theme.name + '-theme.md-' + hueName);
- }
-
- // Don't apply a selector rule to the default theme, making it easier to override
- // styles of the base-component
- if (theme.name == 'default') {
- var themeRuleRegex = /((?:(?:(?: |>|\.|\w|-|:|\(|\)|\[|\]|"|'|=)+) )?)((?:(?:\w|\.|-)+)?)\.md-default-theme((?: |>|\.|\w|-|:|\(|\)|\[|\]|"|'|=)*)/g;
- newRule = newRule.replace(themeRuleRegex, function(match, prefix, target, suffix) {
- return match + ', ' + prefix + target + suffix;
- });
- }
- generatedRules.push(newRule);
- });
-
- return generatedRules;
-}
-
-var rulesByType = {};
-
-// Generate our themes at run time given the state of THEMES and PALETTES
-function generateAllThemes($injector, $mdTheming) {
- var head = document.head;
- var firstChild = head ? head.firstElementChild : null;
- var themeCss = !themeConfig.disableTheming && $injector.has('$MD_THEME_CSS') ? $injector.get('$MD_THEME_CSS') : '';
-
- // Append our custom registered styles to the theme stylesheet.
- themeCss += themeConfig.registeredStyles.join('');
-
- if ( !firstChild ) return;
- if (themeCss.length === 0) return; // no rules, so no point in running this expensive task
-
- // Expose contrast colors for palettes to ensure that text is always readable
- angular.forEach(PALETTES, sanitizePalette);
-
- // MD_THEME_CSS is a string generated by the build process that includes all the themable
- // components as templates
-
- // Break the CSS into individual rules
- var rules = themeCss
- .split(/\}(?!(\}|'|"|;))/)
- .filter(function(rule) { return rule && rule.trim().length; })
- .map(function(rule) { return rule.trim() + '}'; });
-
-
- var ruleMatchRegex = new RegExp('md-(' + THEME_COLOR_TYPES.join('|') + ')', 'g');
-
- THEME_COLOR_TYPES.forEach(function(type) {
- rulesByType[type] = '';
- });
-
-
- // Sort the rules based on type, allowing us to do color substitution on a per-type basis
- rules.forEach(function(rule) {
- var match = rule.match(ruleMatchRegex);
- // First: test that if the rule has '.md-accent', it goes into the accent set of rules
- for (var i = 0, type; type = THEME_COLOR_TYPES[i]; i++) {
- if (rule.indexOf('.md-' + type) > -1) {
- return rulesByType[type] += rule;
- }
- }
-
- // If no eg 'md-accent' class is found, try to just find 'accent' in the rule and guess from
- // there
- for (i = 0; type = THEME_COLOR_TYPES[i]; i++) {
- if (rule.indexOf(type) > -1) {
- return rulesByType[type] += rule;
- }
- }
-
- // Default to the primary array
- return rulesByType[DEFAULT_COLOR_TYPE] += rule;
- });
-
- // If themes are being generated on-demand, quit here. The user will later manually
- // call generateTheme to do this on a theme-by-theme basis.
- if (themeConfig.generateOnDemand) return;
-
- angular.forEach($mdTheming.THEMES, function(theme) {
- if (!GENERATED[theme.name] && !($mdTheming.defaultTheme() !== 'default' && theme.name === 'default')) {
- generateTheme(theme, theme.name, themeConfig.nonce);
- }
- });
-
-
- // *************************
- // Internal functions
- // *************************
-
- // The user specifies a 'default' contrast color as either light or dark,
- // then explicitly lists which hues are the opposite contrast (eg. A100 has dark, A200 has light)
- function sanitizePalette(palette, name) {
- var defaultContrast = palette.contrastDefaultColor;
- var lightColors = palette.contrastLightColors || [];
- var strongLightColors = palette.contrastStrongLightColors || [];
- var darkColors = palette.contrastDarkColors || [];
-
- // These colors are provided as space-separated lists
- if (typeof lightColors === 'string') lightColors = lightColors.split(' ');
- if (typeof strongLightColors === 'string') strongLightColors = strongLightColors.split(' ');
- if (typeof darkColors === 'string') darkColors = darkColors.split(' ');
-
- // Cleanup after ourselves
- delete palette.contrastDefaultColor;
- delete palette.contrastLightColors;
- delete palette.contrastStrongLightColors;
- delete palette.contrastDarkColors;
-
- // Change { 'A100': '#fffeee' } to { 'A100': { value: '#fffeee', contrast:DARK_CONTRAST_COLOR }
- angular.forEach(palette, function(hueValue, hueName) {
- if (angular.isObject(hueValue)) return; // Already converted
- // Map everything to rgb colors
- var rgbValue = colorToRgbaArray(hueValue);
- if (!rgbValue) {
- throw new Error("Color %1, in palette %2's hue %3, is invalid. Hex or rgb(a) color expected."
- .replace('%1', hueValue)
- .replace('%2', palette.name)
- .replace('%3', hueName));
- }
-
- palette[hueName] = {
- value: rgbValue,
- contrast: getContrastColor()
- };
- function getContrastColor() {
- if (defaultContrast === 'light') {
- if (darkColors.indexOf(hueName) > -1) {
- return DARK_CONTRAST_COLOR;
- } else {
- return strongLightColors.indexOf(hueName) > -1 ? STRONG_LIGHT_CONTRAST_COLOR
- : LIGHT_CONTRAST_COLOR;
- }
- } else {
- if (lightColors.indexOf(hueName) > -1) {
- return strongLightColors.indexOf(hueName) > -1 ? STRONG_LIGHT_CONTRAST_COLOR
- : LIGHT_CONTRAST_COLOR;
- } else {
- return DARK_CONTRAST_COLOR;
- }
- }
- }
- });
- }
-}
-generateAllThemes.$inject = ["$injector", "$mdTheming"];
-
-function generateTheme(theme, name, nonce) {
- var head = document.head;
- var firstChild = head ? head.firstElementChild : null;
-
- if (!GENERATED[name]) {
- // For each theme, use the color palettes specified for
- // `primary`, `warn` and `accent` to generate CSS rules.
- THEME_COLOR_TYPES.forEach(function(colorType) {
- var styleStrings = parseRules(theme, colorType, rulesByType[colorType]);
- while (styleStrings.length) {
- var styleContent = styleStrings.shift();
- if (styleContent) {
- var style = document.createElement('style');
- style.setAttribute('md-theme-style', '');
- if (nonce) {
- style.setAttribute('nonce', nonce);
- }
- style.appendChild(document.createTextNode(styleContent));
- head.insertBefore(style, firstChild);
- }
- }
- });
-
- GENERATED[theme.name] = true;
- }
-
-}
-
-
-function checkValidPalette(theme, colorType) {
- // If theme attempts to use a palette that doesnt exist, throw error
- if (!PALETTES[ (theme.colors[colorType] || {}).name ]) {
- throw new Error(
- "You supplied an invalid color palette for theme %1's %2 palette. Available palettes: %3"
- .replace('%1', theme.name)
- .replace('%2', colorType)
- .replace('%3', Object.keys(PALETTES).join(', '))
- );
- }
-}
-
-function colorToRgbaArray(clr) {
- if (angular.isArray(clr) && clr.length == 3) return clr;
- if (/^rgb/.test(clr)) {
- return clr.replace(/(^\s*rgba?\(|\)\s*$)/g, '').split(',').map(function(value, i) {
- return i == 3 ? parseFloat(value, 10) : parseInt(value, 10);
- });
- }
- if (clr.charAt(0) == '#') clr = clr.substring(1);
- if (!/^([a-fA-F0-9]{3}){1,2}$/g.test(clr)) return;
-
- var dig = clr.length / 3;
- var red = clr.substr(0, dig);
- var grn = clr.substr(dig, dig);
- var blu = clr.substr(dig * 2);
- if (dig === 1) {
- red += red;
- grn += grn;
- blu += blu;
- }
- return [parseInt(red, 16), parseInt(grn, 16), parseInt(blu, 16)];
-}
-
-function rgba(rgbArray, opacity) {
- if ( !rgbArray ) return "rgb('0,0,0')";
-
- if (rgbArray.length == 4) {
- rgbArray = angular.copy(rgbArray);
- opacity ? rgbArray.pop() : opacity = rgbArray.pop();
- }
- return opacity && (typeof opacity == 'number' || (typeof opacity == 'string' && opacity.length)) ?
- 'rgba(' + rgbArray.join(',') + ',' + opacity + ')' :
- 'rgb(' + rgbArray.join(',') + ')';
-}
-
-
-})(window.angular);
-
-})();
-(function(){
-"use strict";
-
-// Polyfill angular < 1.4 (provide $animateCss)
-angular
- .module('material.core')
- .factory('$$mdAnimate', ["$q", "$timeout", "$mdConstant", "$animateCss", function($q, $timeout, $mdConstant, $animateCss){
-
- // Since $$mdAnimate is injected into $mdUtil... use a wrapper function
- // to subsequently inject $mdUtil as an argument to the AnimateDomUtils
-
- return function($mdUtil) {
- return AnimateDomUtils( $mdUtil, $q, $timeout, $mdConstant, $animateCss);
- };
- }]);
-
-/**
- * Factory function that requires special injections
- */
-function AnimateDomUtils($mdUtil, $q, $timeout, $mdConstant, $animateCss) {
- var self;
- return self = {
- /**
- *
- */
- translate3d : function( target, from, to, options ) {
- return $animateCss(target,{
- from:from,
- to:to,
- addClass:options.transitionInClass,
- removeClass:options.transitionOutClass
- })
- .start()
- .then(function(){
- // Resolve with reverser function...
- return reverseTranslate;
- });
-
- /**
- * Specific reversal of the request translate animation above...
- */
- function reverseTranslate (newFrom) {
- return $animateCss(target, {
- to: newFrom || from,
- addClass: options.transitionOutClass,
- removeClass: options.transitionInClass
- }).start();
-
- }
- },
-
- /**
- * Listen for transitionEnd event (with optional timeout)
- * Announce completion or failure via promise handlers
- */
- waitTransitionEnd: function (element, opts) {
- var TIMEOUT = 3000; // fallback is 3 secs
-
- return $q(function(resolve, reject){
- opts = opts || { };
-
- // If there is no transition is found, resolve immediately
- //
- // NOTE: using $mdUtil.nextTick() causes delays/issues
- if (noTransitionFound(opts.cachedTransitionStyles)) {
- TIMEOUT = 0;
- }
-
- var timer = $timeout(finished, opts.timeout || TIMEOUT);
- element.on($mdConstant.CSS.TRANSITIONEND, finished);
-
- /**
- * Upon timeout or transitionEnd, reject or resolve (respectively) this promise.
- * NOTE: Make sure this transitionEnd didn't bubble up from a child
- */
- function finished(ev) {
- if ( ev && ev.target !== element[0]) return;
-
- if ( ev ) $timeout.cancel(timer);
- element.off($mdConstant.CSS.TRANSITIONEND, finished);
-
- // Never reject since ngAnimate may cause timeouts due missed transitionEnd events
- resolve();
-
- }
-
- /**
- * Checks whether or not there is a transition.
- *
- * @param styles The cached styles to use for the calculation. If null, getComputedStyle()
- * will be used.
- *
- * @returns {boolean} True if there is no transition/duration; false otherwise.
- */
- function noTransitionFound(styles) {
- styles = styles || window.getComputedStyle(element[0]);
-
- return styles.transitionDuration == '0s' || (!styles.transition && !styles.transitionProperty);
- }
-
- });
- },
-
- calculateTransformValues: function (element, originator) {
- var origin = originator.element;
- var bounds = originator.bounds;
-
- if (origin || bounds) {
- var originBnds = origin ? self.clientRect(origin) || currentBounds() : self.copyRect(bounds);
- var dialogRect = self.copyRect(element[0].getBoundingClientRect());
- var dialogCenterPt = self.centerPointFor(dialogRect);
- var originCenterPt = self.centerPointFor(originBnds);
-
- return {
- centerX: originCenterPt.x - dialogCenterPt.x,
- centerY: originCenterPt.y - dialogCenterPt.y,
- scaleX: Math.round(100 * Math.min(0.5, originBnds.width / dialogRect.width)) / 100,
- scaleY: Math.round(100 * Math.min(0.5, originBnds.height / dialogRect.height)) / 100
- };
- }
- return {centerX: 0, centerY: 0, scaleX: 0.5, scaleY: 0.5};
-
- /**
- * This is a fallback if the origin information is no longer valid, then the
- * origin bounds simply becomes the current bounds for the dialogContainer's parent
- */
- function currentBounds() {
- var cntr = element ? element.parent() : null;
- var parent = cntr ? cntr.parent() : null;
-
- return parent ? self.clientRect(parent) : null;
- }
- },
-
- /**
- * Calculate the zoom transform from dialog to origin.
- *
- * We use this to set the dialog position immediately;
- * then the md-transition-in actually translates back to
- * `translate3d(0,0,0) scale(1.0)`...
- *
- * NOTE: all values are rounded to the nearest integer
- */
- calculateZoomToOrigin: function (element, originator) {
- var zoomTemplate = "translate3d( {centerX}px, {centerY}px, 0 ) scale( {scaleX}, {scaleY} )";
- var buildZoom = angular.bind(null, $mdUtil.supplant, zoomTemplate);
-
- return buildZoom(self.calculateTransformValues(element, originator));
- },
-
- /**
- * Calculate the slide transform from panel to origin.
- * NOTE: all values are rounded to the nearest integer
- */
- calculateSlideToOrigin: function (element, originator) {
- var slideTemplate = "translate3d( {centerX}px, {centerY}px, 0 )";
- var buildSlide = angular.bind(null, $mdUtil.supplant, slideTemplate);
-
- return buildSlide(self.calculateTransformValues(element, originator));
- },
-
- /**
- * Enhance raw values to represent valid css stylings...
- */
- toCss : function( raw ) {
- var css = { };
- var lookups = 'left top right bottom width height x y min-width min-height max-width max-height';
-
- angular.forEach(raw, function(value,key) {
- if ( angular.isUndefined(value) ) return;
-
- if ( lookups.indexOf(key) >= 0 ) {
- css[key] = value + 'px';
- } else {
- switch (key) {
- case 'transition':
- convertToVendor(key, $mdConstant.CSS.TRANSITION, value);
- break;
- case 'transform':
- convertToVendor(key, $mdConstant.CSS.TRANSFORM, value);
- break;
- case 'transformOrigin':
- convertToVendor(key, $mdConstant.CSS.TRANSFORM_ORIGIN, value);
- break;
- case 'font-size':
- css['font-size'] = value; // font sizes aren't always in px
- break;
- }
- }
- });
-
- return css;
-
- function convertToVendor(key, vendor, value) {
- angular.forEach(vendor.split(' '), function (key) {
- css[key] = value;
- });
- }
- },
-
- /**
- * Convert the translate CSS value to key/value pair(s).
- */
- toTransformCss: function (transform, addTransition, transition) {
- var css = {};
- angular.forEach($mdConstant.CSS.TRANSFORM.split(' '), function (key) {
- css[key] = transform;
- });
-
- if (addTransition) {
- transition = transition || "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important";
- css['transition'] = transition;
- }
-
- return css;
- },
-
- /**
- * Clone the Rect and calculate the height/width if needed
- */
- copyRect: function (source, destination) {
- if (!source) return null;
-
- destination = destination || {};
-
- angular.forEach('left top right bottom width height'.split(' '), function (key) {
- destination[key] = Math.round(source[key])
- });
-
- destination.width = destination.width || (destination.right - destination.left);
- destination.height = destination.height || (destination.bottom - destination.top);
-
- return destination;
- },
-
- /**
- * Calculate ClientRect of element; return null if hidden or zero size
- */
- clientRect: function (element) {
- var bounds = angular.element(element)[0].getBoundingClientRect();
- var isPositiveSizeClientRect = function (rect) {
- return rect && (rect.width > 0) && (rect.height > 0);
- };
-
- // If the event origin element has zero size, it has probably been hidden.
- return isPositiveSizeClientRect(bounds) ? self.copyRect(bounds) : null;
- },
-
- /**
- * Calculate 'rounded' center point of Rect
- */
- centerPointFor: function (targetRect) {
- return targetRect ? {
- x: Math.round(targetRect.left + (targetRect.width / 2)),
- y: Math.round(targetRect.top + (targetRect.height / 2))
- } : { x : 0, y : 0 };
- }
-
- };
-};
-
-
-})();
-(function(){
-"use strict";
-
-"use strict";
-
-if (angular.version.minor >= 4) {
- angular.module('material.core.animate', []);
-} else {
-(function() {
-
- var forEach = angular.forEach;
-
- var WEBKIT = angular.isDefined(document.documentElement.style.WebkitAppearance);
- var TRANSITION_PROP = WEBKIT ? 'WebkitTransition' : 'transition';
- var ANIMATION_PROP = WEBKIT ? 'WebkitAnimation' : 'animation';
- var PREFIX = WEBKIT ? '-webkit-' : '';
-
- var TRANSITION_EVENTS = (WEBKIT ? 'webkitTransitionEnd ' : '') + 'transitionend';
- var ANIMATION_EVENTS = (WEBKIT ? 'webkitAnimationEnd ' : '') + 'animationend';
-
- var $$ForceReflowFactory = ['$document', function($document) {
- return function() {
- return $document[0].body.clientWidth + 1;
- }
- }];
-
- var $$rAFMutexFactory = ['$$rAF', function($$rAF) {
- return function() {
- var passed = false;
- $$rAF(function() {
- passed = true;
- });
- return function(fn) {
- passed ? fn() : $$rAF(fn);
- };
- };
- }];
-
- var $$AnimateRunnerFactory = ['$q', '$$rAFMutex', function($q, $$rAFMutex) {
- var INITIAL_STATE = 0;
- var DONE_PENDING_STATE = 1;
- var DONE_COMPLETE_STATE = 2;
-
- function AnimateRunner(host) {
- this.setHost(host);
-
- this._doneCallbacks = [];
- this._runInAnimationFrame = $$rAFMutex();
- this._state = 0;
- }
-
- AnimateRunner.prototype = {
- setHost: function(host) {
- this.host = host || {};
- },
-
- done: function(fn) {
- if (this._state === DONE_COMPLETE_STATE) {
- fn();
- } else {
- this._doneCallbacks.push(fn);
- }
- },
-
- progress: angular.noop,
-
- getPromise: function() {
- if (!this.promise) {
- var self = this;
- this.promise = $q(function(resolve, reject) {
- self.done(function(status) {
- status === false ? reject() : resolve();
- });
- });
- }
- return this.promise;
- },
-
- then: function(resolveHandler, rejectHandler) {
- return this.getPromise().then(resolveHandler, rejectHandler);
- },
-
- 'catch': function(handler) {
- return this.getPromise()['catch'](handler);
- },
-
- 'finally': function(handler) {
- return this.getPromise()['finally'](handler);
- },
-
- pause: function() {
- if (this.host.pause) {
- this.host.pause();
- }
- },
-
- resume: function() {
- if (this.host.resume) {
- this.host.resume();
- }
- },
-
- end: function() {
- if (this.host.end) {
- this.host.end();
- }
- this._resolve(true);
- },
-
- cancel: function() {
- if (this.host.cancel) {
- this.host.cancel();
- }
- this._resolve(false);
- },
-
- complete: function(response) {
- var self = this;
- if (self._state === INITIAL_STATE) {
- self._state = DONE_PENDING_STATE;
- self._runInAnimationFrame(function() {
- self._resolve(response);
- });
- }
- },
-
- _resolve: function(response) {
- if (this._state !== DONE_COMPLETE_STATE) {
- forEach(this._doneCallbacks, function(fn) {
- fn(response);
- });
- this._doneCallbacks.length = 0;
- this._state = DONE_COMPLETE_STATE;
- }
- }
- };
-
- // Polyfill AnimateRunner.all which is used by input animations
- AnimateRunner.all = function(runners, callback) {
- var count = 0;
- var status = true;
- forEach(runners, function(runner) {
- runner.done(onProgress);
- });
-
- function onProgress(response) {
- status = status && response;
- if (++count === runners.length) {
- callback(status);
- }
- }
- };
-
- return AnimateRunner;
- }];
-
- angular
- .module('material.core.animate', [])
- .factory('$$forceReflow', $$ForceReflowFactory)
- .factory('$$AnimateRunner', $$AnimateRunnerFactory)
- .factory('$$rAFMutex', $$rAFMutexFactory)
- .factory('$animateCss', ['$window', '$$rAF', '$$AnimateRunner', '$$forceReflow', '$$jqLite', '$timeout', '$animate',
- function($window, $$rAF, $$AnimateRunner, $$forceReflow, $$jqLite, $timeout, $animate) {
-
- function init(element, options) {
-
- var temporaryStyles = [];
- var node = getDomNode(element);
- var areAnimationsAllowed = node && $animate.enabled();
-
- var hasCompleteStyles = false;
- var hasCompleteClasses = false;
-
- if (areAnimationsAllowed) {
- if (options.transitionStyle) {
- temporaryStyles.push([PREFIX + 'transition', options.transitionStyle]);
- }
-
- if (options.keyframeStyle) {
- temporaryStyles.push([PREFIX + 'animation', options.keyframeStyle]);
- }
-
- if (options.delay) {
- temporaryStyles.push([PREFIX + 'transition-delay', options.delay + 's']);
- }
-
- if (options.duration) {
- temporaryStyles.push([PREFIX + 'transition-duration', options.duration + 's']);
- }
-
- hasCompleteStyles = options.keyframeStyle ||
- (options.to && (options.duration > 0 || options.transitionStyle));
- hasCompleteClasses = !!options.addClass || !!options.removeClass;
-
- blockTransition(element, true);
- }
-
- var hasCompleteAnimation = areAnimationsAllowed && (hasCompleteStyles || hasCompleteClasses);
-
- applyAnimationFromStyles(element, options);
-
- var animationClosed = false;
- var events, eventFn;
-
- return {
- close: $window.close,
- start: function() {
- var runner = new $$AnimateRunner();
- waitUntilQuiet(function() {
- blockTransition(element, false);
- if (!hasCompleteAnimation) {
- return close();
- }
-
- forEach(temporaryStyles, function(entry) {
- var key = entry[0];
- var value = entry[1];
- node.style[camelCase(key)] = value;
- });
-
- applyClasses(element, options);
-
- var timings = computeTimings(element);
- if (timings.duration === 0) {
- return close();
- }
-
- var moreStyles = [];
-
- if (options.easing) {
- if (timings.transitionDuration) {
- moreStyles.push([PREFIX + 'transition-timing-function', options.easing]);
- }
- if (timings.animationDuration) {
- moreStyles.push([PREFIX + 'animation-timing-function', options.easing]);
- }
- }
-
- if (options.delay && timings.animationDelay) {
- moreStyles.push([PREFIX + 'animation-delay', options.delay + 's']);
- }
-
- if (options.duration && timings.animationDuration) {
- moreStyles.push([PREFIX + 'animation-duration', options.duration + 's']);
- }
-
- forEach(moreStyles, function(entry) {
- var key = entry[0];
- var value = entry[1];
- node.style[camelCase(key)] = value;
- temporaryStyles.push(entry);
- });
-
- var maxDelay = timings.delay;
- var maxDelayTime = maxDelay * 1000;
- var maxDuration = timings.duration;
- var maxDurationTime = maxDuration * 1000;
- var startTime = Date.now();
-
- events = [];
- if (timings.transitionDuration) {
- events.push(TRANSITION_EVENTS);
- }
- if (timings.animationDuration) {
- events.push(ANIMATION_EVENTS);
- }
- events = events.join(' ');
- eventFn = function(event) {
- event.stopPropagation();
- var ev = event.originalEvent || event;
- var timeStamp = ev.timeStamp || Date.now();
- var elapsedTime = parseFloat(ev.elapsedTime.toFixed(3));
- if (Math.max(timeStamp - startTime, 0) >= maxDelayTime && elapsedTime >= maxDuration) {
- close();
- }
- };
- element.on(events, eventFn);
-
- applyAnimationToStyles(element, options);
-
- $timeout(close, maxDelayTime + maxDurationTime * 1.5, false);
- });
-
- return runner;
-
- function close() {
- if (animationClosed) return;
- animationClosed = true;
-
- if (events && eventFn) {
- element.off(events, eventFn);
- }
- applyClasses(element, options);
- applyAnimationStyles(element, options);
- forEach(temporaryStyles, function(entry) {
- node.style[camelCase(entry[0])] = '';
- });
- runner.complete(true);
- return runner;
- }
- }
- }
- }
-
- function applyClasses(element, options) {
- if (options.addClass) {
- $$jqLite.addClass(element, options.addClass);
- options.addClass = null;
- }
- if (options.removeClass) {
- $$jqLite.removeClass(element, options.removeClass);
- options.removeClass = null;
- }
- }
-
- function computeTimings(element) {
- var node = getDomNode(element);
- var cs = $window.getComputedStyle(node)
- var tdr = parseMaxTime(cs[prop('transitionDuration')]);
- var adr = parseMaxTime(cs[prop('animationDuration')]);
- var tdy = parseMaxTime(cs[prop('transitionDelay')]);
- var ady = parseMaxTime(cs[prop('animationDelay')]);
-
- adr *= (parseInt(cs[prop('animationIterationCount')], 10) || 1);
- var duration = Math.max(adr, tdr);
- var delay = Math.max(ady, tdy);
-
- return {
- duration: duration,
- delay: delay,
- animationDuration: adr,
- transitionDuration: tdr,
- animationDelay: ady,
- transitionDelay: tdy
- };
-
- function prop(key) {
- return WEBKIT ? 'Webkit' + key.charAt(0).toUpperCase() + key.substr(1)
- : key;
- }
- }
-
- 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;
- }
-
- var cancelLastRAFRequest;
- var rafWaitQueue = [];
- function waitUntilQuiet(callback) {
- if (cancelLastRAFRequest) {
- cancelLastRAFRequest(); //cancels the request
- }
- rafWaitQueue.push(callback);
- cancelLastRAFRequest = $$rAF(function() {
- cancelLastRAFRequest = null;
-
- // 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 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 getDomNode(element) {
- for (var i = 0; i < element.length; i++) {
- if (element[i].nodeType === 1) return element[i];
- }
- }
-
- function blockTransition(element, bool) {
- var node = getDomNode(element);
- var key = camelCase(PREFIX + 'transition-delay');
- node.style[key] = bool ? '-9999s' : '';
- }
-
- return init;
- }]);
-
- /**
- * Older browsers [FF31] expect camelCase
- * property keys.
- * e.g.
- * animation-duration --> animationDuration
- */
- function camelCase(str) {
- return str.replace(/-[a-z]/g, function(str) {
- return str.charAt(1).toUpperCase();
- });
- }
-
-})();
-
-}
-
-})();
-(function(){
-"use strict";
-
-/**
- * @ngdoc module
- * @name material.components.autocomplete
- */
-/*
- * @see js folder for autocomplete implementation
- */
-angular.module('material.components.autocomplete', [
- 'material.core',
- 'material.components.icon',
- 'material.components.virtualRepeat'
-]);
-
-})();
-(function(){
-"use strict";
-
-/*
- * @ngdoc module
- * @name material.components.backdrop
- * @description Backdrop
- */
-
-/**
- * @ngdoc directive
- * @name mdBackdrop
- * @module material.components.backdrop
- *
- * @restrict E
- *
- * @description
- * `` is a backdrop element used by other components, such as dialog and bottom sheet.
- * Apply class `opaque` to make the backdrop use the theme backdrop color.
- *
- */
-
-angular
- .module('material.components.backdrop', ['material.core'])
- .directive('mdBackdrop', ["$mdTheming", "$mdUtil", "$animate", "$rootElement", "$window", "$log", "$$rAF", "$document", function BackdropDirective($mdTheming, $mdUtil, $animate, $rootElement, $window, $log, $$rAF, $document) {
- var ERROR_CSS_POSITION = ' may not work properly in a scrolled, static-positioned parent container.';
-
- return {
- restrict: 'E',
- link: postLink
- };
-
- function postLink(scope, element, attrs) {
- // backdrop may be outside the $rootElement, tell ngAnimate to animate regardless
- if ($animate.pin) $animate.pin(element, $rootElement);
-
- var bodyStyles;
-
- $$rAF(function() {
- // If body scrolling has been disabled using mdUtil.disableBodyScroll(),
- // adjust the 'backdrop' height to account for the fixed 'body' top offset.
- // Note that this can be pretty expensive and is better done inside the $$rAF.
- bodyStyles = $window.getComputedStyle($document[0].body);
-
- if (bodyStyles.position === 'fixed') {
- var resizeHandler = $mdUtil.debounce(function(){
- bodyStyles = $window.getComputedStyle($document[0].body);
- resize();
- }, 60, null, false);
-
- resize();
- angular.element($window).on('resize', resizeHandler);
-
- scope.$on('$destroy', function() {
- angular.element($window).off('resize', resizeHandler);
- });
- }
-
- // Often $animate.enter() is used to append the backDrop element
- // so let's wait until $animate is done...
- var parent = element.parent();
-
- if (parent.length) {
- if (parent[0].nodeName === 'BODY') {
- element.css('position', 'fixed');
- }
-
- var styles = $window.getComputedStyle(parent[0]);
-
- if (styles.position === 'static') {
- // backdrop uses position:absolute and will not work properly with parent position:static (default)
- $log.warn(ERROR_CSS_POSITION);
- }
-
- // Only inherit the parent if the backdrop has a parent.
- $mdTheming.inherit(element, parent);
- }
- });
-
- function resize() {
- var viewportHeight = parseInt(bodyStyles.height, 10) + Math.abs(parseInt(bodyStyles.top, 10));
- element.css('height', viewportHeight + 'px');
- }
- }
-
- }]);
-
-})();
-(function(){
-"use strict";
-
-/**
- * @ngdoc module
- * @name material.components.bottomSheet
- * @description
- * BottomSheet
- */
-angular
- .module('material.components.bottomSheet', [
- 'material.core',
- 'material.components.backdrop'
- ])
- .directive('mdBottomSheet', MdBottomSheetDirective)
- .provider('$mdBottomSheet', MdBottomSheetProvider);
-
-/* @ngInject */
-function MdBottomSheetDirective($mdBottomSheet) {
- return {
- restrict: 'E',
- link : function postLink(scope, element) {
- element.addClass('_md'); // private md component indicator for styling
-
- // When navigation force destroys an interimElement, then
- // listen and $destroy() that interim instance...
- scope.$on('$destroy', function() {
- $mdBottomSheet.destroy();
- });
- }
- };
-}
-MdBottomSheetDirective.$inject = ["$mdBottomSheet"];
-
-
-/**
- * @ngdoc service
- * @name $mdBottomSheet
- * @module material.components.bottomSheet
- *
- * @description
- * `$mdBottomSheet` opens a bottom sheet over the app and provides a simple promise API.
- *
- * ## Restrictions
- *
- * - The bottom sheet's template must have an outer `` element.
- * - Add the `md-grid` class to the bottom sheet for a grid layout.
- * - Add the `md-list` class to the bottom sheet for a list layout.
- *
- * @usage
- *
- *
- *
- * Open a Bottom Sheet!
- *
- *
- *
- *
- * var app = angular.module('app', ['ngMaterial']);
- * app.controller('MyController', function($scope, $mdBottomSheet) {
- * $scope.openBottomSheet = function() {
- * $mdBottomSheet.show({
- * template: 'Hello!'
- * });
- * };
- * });
- *
- */
-
- /**
- * @ngdoc method
- * @name $mdBottomSheet#show
- *
- * @description
- * Show a bottom sheet with the specified options.
- *
- * @param {object} options An options object, with the following properties:
- *
- * - `templateUrl` - `{string=}`: The url of an html template file that will
- * be used as the content of the bottom sheet. Restrictions: the template must
- * have an outer `md-bottom-sheet` element.
- * - `template` - `{string=}`: Same as templateUrl, except this is an actual
- * template string.
- * - `scope` - `{object=}`: the scope to link the template / controller to. If none is specified, it will create a new child scope.
- * This scope will be destroyed when the bottom sheet is removed unless `preserveScope` is set to true.
- * - `preserveScope` - `{boolean=}`: whether to preserve the scope when the element is removed. Default is false
- * - `controller` - `{string=}`: The controller to associate with this bottom sheet.
- * - `locals` - `{string=}`: An object containing key/value pairs. The keys will
- * be used as names of values to inject into the controller. For example,
- * `locals: {three: 3}` would inject `three` into the controller with the value
- * of 3.
- * - `clickOutsideToClose` - `{boolean=}`: Whether the user can click outside the bottom sheet to
- * close it. Default true.
- * - `disableBackdrop` - `{boolean=}`: When set to true, the bottomsheet will not show a backdrop.
- * - `escapeToClose` - `{boolean=}`: Whether the user can press escape to close the bottom sheet.
- * Default true.
- * - `resolve` - `{object=}`: Similar to locals, except it takes promises as values
- * and the bottom sheet will not open until the promises resolve.
- * - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.
- * - `parent` - `{element=}`: The element to append the bottom sheet to. The `parent` may be a `function`, `string`,
- * `object`, or null. Defaults to appending to the body of the root element (or the root element) of the application.
- * e.g. angular.element(document.getElementById('content')) or "#content"
- * - `disableParentScroll` - `{boolean=}`: Whether to disable scrolling while the bottom sheet is open.
- * Default true.
- *
- * @returns {promise} A promise that can be resolved with `$mdBottomSheet.hide()` or
- * rejected with `$mdBottomSheet.cancel()`.
- */
-
-/**
- * @ngdoc method
- * @name $mdBottomSheet#hide
- *
- * @description
- * Hide the existing bottom sheet and resolve the promise returned from
- * `$mdBottomSheet.show()`. This call will close the most recently opened/current bottomsheet (if any).
- *
- * @param {*=} response An argument for the resolved promise.
- *
- */
-
-/**
- * @ngdoc method
- * @name $mdBottomSheet#cancel
- *
- * @description
- * Hide the existing bottom sheet and reject the promise returned from
- * `$mdBottomSheet.show()`.
- *
- * @param {*=} response An argument for the rejected promise.
- *
- */
-
-function MdBottomSheetProvider($$interimElementProvider) {
- // how fast we need to flick down to close the sheet, pixels/ms
- var CLOSING_VELOCITY = 0.5;
- var PADDING = 80; // same as css
-
- bottomSheetDefaults.$inject = ["$animate", "$mdConstant", "$mdUtil", "$mdTheming", "$mdBottomSheet", "$rootElement", "$mdGesture", "$log"];
- return $$interimElementProvider('$mdBottomSheet')
- .setDefaults({
- methods: ['disableParentScroll', 'escapeToClose', 'clickOutsideToClose'],
- options: bottomSheetDefaults
- });
-
- /* @ngInject */
- function bottomSheetDefaults($animate, $mdConstant, $mdUtil, $mdTheming, $mdBottomSheet, $rootElement,
- $mdGesture, $log) {
- var backdrop;
-
- return {
- themable: true,
- onShow: onShow,
- onRemove: onRemove,
- disableBackdrop: false,
- escapeToClose: true,
- clickOutsideToClose: true,
- disableParentScroll: true
- };
-
-
- function onShow(scope, element, options, controller) {
-
- element = $mdUtil.extractElementByName(element, 'md-bottom-sheet');
-
- // prevent tab focus or click focus on the bottom-sheet container
- element.attr('tabindex',"-1");
-
- // Once the md-bottom-sheet has `ng-cloak` applied on his template the opening animation will not work properly.
- // This is a very common problem, so we have to notify the developer about this.
- if (element.hasClass('ng-cloak')) {
- var message = '$mdBottomSheet: using `` will affect the bottom-sheet opening animations.';
- $log.warn( message, element[0] );
- }
-
- if (!options.disableBackdrop) {
- // Add a backdrop that will close on click
- backdrop = $mdUtil.createBackdrop(scope, "md-bottom-sheet-backdrop md-opaque");
-
- // Prevent mouse focus on backdrop; ONLY programatic focus allowed.
- // This allows clicks on backdrop to propogate to the $rootElement and
- // ESC key events to be detected properly.
-
- backdrop[0].tabIndex = -1;
-
- if (options.clickOutsideToClose) {
- backdrop.on('click', function() {
- $mdUtil.nextTick($mdBottomSheet.cancel,true);
- });
- }
-
- $mdTheming.inherit(backdrop, options.parent);
-
- $animate.enter(backdrop, options.parent, null);
- }
-
- var bottomSheet = new BottomSheet(element, options.parent);
- options.bottomSheet = bottomSheet;
-
- $mdTheming.inherit(bottomSheet.element, options.parent);
-
- if (options.disableParentScroll) {
- options.restoreScroll = $mdUtil.disableScrollAround(bottomSheet.element, options.parent);
- }
-
- return $animate.enter(bottomSheet.element, options.parent, backdrop)
- .then(function() {
- var focusable = $mdUtil.findFocusTarget(element) || angular.element(
- element[0].querySelector('button') ||
- element[0].querySelector('a') ||
- element[0].querySelector($mdUtil.prefixer('ng-click', true))
- ) || backdrop;
-
- if (options.escapeToClose) {
- options.rootElementKeyupCallback = function(e) {
- if (e.keyCode === $mdConstant.KEY_CODE.ESCAPE) {
- $mdUtil.nextTick($mdBottomSheet.cancel,true);
- }
- };
-
- $rootElement.on('keyup', options.rootElementKeyupCallback);
- focusable && focusable.focus();
- }
- });
-
- }
-
- function onRemove(scope, element, options) {
-
- var bottomSheet = options.bottomSheet;
-
- if (!options.disableBackdrop) $animate.leave(backdrop);
- return $animate.leave(bottomSheet.element).then(function() {
- if (options.disableParentScroll) {
- options.restoreScroll();
- delete options.restoreScroll;
- }
-
- bottomSheet.cleanup();
- });
- }
-
- /**
- * BottomSheet class to apply bottom-sheet behavior to an element
- */
- function BottomSheet(element, parent) {
- var deregister = $mdGesture.register(parent, 'drag', { horizontal: false });
- parent.on('$md.dragstart', onDragStart)
- .on('$md.drag', onDrag)
- .on('$md.dragend', onDragEnd);
-
- return {
- element: element,
- cleanup: function cleanup() {
- deregister();
- parent.off('$md.dragstart', onDragStart);
- parent.off('$md.drag', onDrag);
- parent.off('$md.dragend', onDragEnd);
- }
- };
-
- function onDragStart(ev) {
- // Disable transitions on transform so that it feels fast
- element.css($mdConstant.CSS.TRANSITION_DURATION, '0ms');
- }
-
- function onDrag(ev) {
- var transform = ev.pointer.distanceY;
- if (transform < 5) {
- // Slow down drag when trying to drag up, and stop after PADDING
- transform = Math.max(-PADDING, transform / 2);
- }
- element.css($mdConstant.CSS.TRANSFORM, 'translate3d(0,' + (PADDING + transform) + 'px,0)');
- }
-
- function onDragEnd(ev) {
- if (ev.pointer.distanceY > 0 &&
- (ev.pointer.distanceY > 20 || Math.abs(ev.pointer.velocityY) > CLOSING_VELOCITY)) {
- var distanceRemaining = element.prop('offsetHeight') - ev.pointer.distanceY;
- var transitionDuration = Math.min(distanceRemaining / ev.pointer.velocityY * 0.75, 500);
- element.css($mdConstant.CSS.TRANSITION_DURATION, transitionDuration + 'ms');
- $mdUtil.nextTick($mdBottomSheet.cancel,true);
- } else {
- element.css($mdConstant.CSS.TRANSITION_DURATION, '');
- element.css($mdConstant.CSS.TRANSFORM, '');
- }
- }
- }
-
- }
-
-}
-MdBottomSheetProvider.$inject = ["$$interimElementProvider"];
-
-})();
-(function(){
-"use strict";
-
-/**
- * @ngdoc module
- * @name material.components.button
- * @description
- *
- * Button
- */
-angular
- .module('material.components.button', [ 'material.core' ])
- .directive('mdButton', MdButtonDirective)
- .directive('a', MdAnchorDirective);
-
-
-/**
- * @private
- * @restrict E
- *
- * @description
- * `a` is an anchor directive used to inherit theme colors for md-primary, md-accent, etc.
- *
- * @usage
- *
- *
- *
- *
- *
- *
- */
-function MdAnchorDirective($mdTheming) {
- return {
- restrict : 'E',
- link : function postLink(scope, element) {
- // Make sure to inherit theme so stand-alone anchors
- // support theme colors for md-primary, md-accent, etc.
- $mdTheming(element);
- }
- };
-}
-MdAnchorDirective.$inject = ["$mdTheming"];
-
-
-/**
- * @ngdoc directive
- * @name mdButton
- * @module material.components.button
- *
- * @restrict E
- *
- * @description
- * `` is a button directive with optional ink ripples (default enabled).
- *
- * If you supply a `href` or `ng-href` attribute, it will become an `` element. Otherwise, it will
- * become a `
- *
- *
- *
- * 
- *
- *
- * @returns {boolean} a boolean representing whether or not the given media query is true or false.
- *
- * @usage
- *