var app = angular.module('plunker', ['ngSanitize', 'schemaForm']);
app.controller('MainCtrl', function($scope, $timeout, $q) {
$scope.schema = {
"type": "object",
"title": "Comment",
"properties": {
"name": {
"title": "Name",
"type": "string"
},
"email": {
"title": "Email",
"type": "string",
"pattern": "^\\S+@\\S+$",
"description": "Email will be used for evil."
},
"comment": {
"title": "Comment",
"type": "string",
"maxLength": 20,
"validationMessage": "Don't be greedy!"
},
"startDate": {
"type": "string",
"format": "date",
"title":"Start Date"
},
"endDate": {
"type": "string",
"format": "date",
"title":"End Date"
},
"userTime":{
"type": "string",
"format": "date",
"title":"User Time"
},
"userStartDate": {
"type": "string",
"format": "date",
"title":"Product Start Date"
},
"userEndDate": {
"type": "string",
"format": "date",
"title":"Product End Date"
},
},
"required": [
"name",
"email",
"comment"
]
};
$scope.form = [
"name",
"email", {
"key": "comment",
"type": "textarea",
"placeholder": "Make a comment"
}, {
"key": "startDate",
"type": "datepicker",
"format": "yyyy-mm-dd",
"minDate": "2015-07-01",
"maxDate": "2015-11-30",
"rangeStartDateField": "startDate",
"rangeEndDateField": "endDate",
"rangeSelector": "true"
}, {
"key": "endDate",
"type": "datepicker",
"format": "yyyy-mm-dd",
"minDate": "2015-07-01",
"maxDate": "2015-11-30",
"rangeStartDateField": "startDate",
"rangeEndDateField": "endDate",
"rangeSelector": "true"
}, {
"key":"userTime",
"type":"datepicker"
}, {
"key": "userStartDate",
"type": "datepicker",
"format": "yyyy-mm-dd",
"minDate": "2015-07-01",
"maxDate": "2015-11-30",
"rangeStartDateField": "userStartDate",
"rangeEndDateField": "userEndDate",
"rangeSelector": "true"
}, {
"key": "userEndDate",
"type": "datepicker",
"format": "yyyy-mm-dd",
"minDate": "2015-07-01",
"maxDate": "2015-11-30",
"rangeStartDateField": "userStartDate",
"rangeEndDateField": "userEndDate",
"rangeSelector": "true"
}, {
"type": "submit",
"style": "btn-info",
"title": "OK"
}
];
$scope.model = { "startDate": "2015-07-01", "endDate": "2015-07-30"};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="bower_components/pickadate/lib/themes/default.css" />
<link rel="stylesheet" href="bower_components/pickadate/lib/themes/default.date.css" />
<link rel="stylesheet" href="bower_components/pickadate/lib/themes/default.time.css" />
</head>
<body ng-controller="MainCtrl" class="container">
<form sf-schema="schema" sf-form="form" sf-model="model"></form>
<div>
<span ng-bind="model | json"></span>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.js"></script>
<script src="tv4.js"></script>
<script src="ObjectPath.js"></script>
<script src="schema-form.js"></script>
<script src="bootstrap-decorator.js"></script>
<script src="bootstrap-datepicker.js"></script>
<script src="picker.js"></script>
<script src="picker.date.js"></script>
<script src="picker.time.js"></script>
</body>
</html>
/* Put your css in here */
/*
Author: Geraint Luff and others
Year: 2013
This code is released into the "public domain" by its author(s). Anybody may use, alter and distribute the code without restriction. The author makes no guarantees, and takes no liability of any kind for use of this code.
If you find a bug or make an improvement, it would be courteous to let the author know, but it is not compulsory.
*/
(function (global, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof module !== 'undefined' && module.exports){
// CommonJS. Define export.
module.exports = factory();
} else {
// Browser globals
global.tv4 = factory();
}
}(this, function () {
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FObject%2Fkeys
if (!Object.keys) {
Object.keys = (function () {
var hasOwnProperty = Object.prototype.hasOwnProperty,
hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
dontEnums = [
'toString',
'toLocaleString',
'valueOf',
'hasOwnProperty',
'isPrototypeOf',
'propertyIsEnumerable',
'constructor'
],
dontEnumsLength = dontEnums.length;
return function (obj) {
if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) {
throw new TypeError('Object.keys called on non-object');
}
var result = [];
for (var prop in obj) {
if (hasOwnProperty.call(obj, prop)) {
result.push(prop);
}
}
if (hasDontEnumBug) {
for (var i=0; i < dontEnumsLength; i++) {
if (hasOwnProperty.call(obj, dontEnums[i])) {
result.push(dontEnums[i]);
}
}
}
return result;
};
})();
}
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create
if (!Object.create) {
Object.create = (function(){
function F(){}
return function(o){
if (arguments.length !== 1) {
throw new Error('Object.create implementation only accepts one parameter.');
}
F.prototype = o;
return new F();
};
})();
}
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FArray%2FisArray
if(!Array.isArray) {
Array.isArray = function (vArg) {
return Object.prototype.toString.call(vArg) === "[object Array]";
};
}
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FArray%2FindexOf
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
if (this === null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (len === 0) {
return -1;
}
var n = 0;
if (arguments.length > 1) {
n = Number(arguments[1]);
if (n !== n) { // shortcut for verifying if it's NaN
n = 0;
} else if (n !== 0 && n !== Infinity && n !== -Infinity) {
n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
}
if (n >= len) {
return -1;
}
var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
for (; k < len; k++) {
if (k in t && t[k] === searchElement) {
return k;
}
}
return -1;
};
}
// Grungey Object.isFrozen hack
if (!Object.isFrozen) {
Object.isFrozen = function (obj) {
var key = "tv4_test_frozen_key";
while (obj.hasOwnProperty(key)) {
key += Math.random();
}
try {
obj[key] = true;
delete obj[key];
return false;
} catch (e) {
return true;
}
};
}
// Based on: https://github.com/geraintluff/uri-templates, but with all the de-substitution stuff removed
var uriTemplateGlobalModifiers = {
"+": true,
"#": true,
".": true,
"/": true,
";": true,
"?": true,
"&": true
};
var uriTemplateSuffices = {
"*": true
};
function notReallyPercentEncode(string) {
return encodeURI(string).replace(/%25[0-9][0-9]/g, function (doubleEncoded) {
return "%" + doubleEncoded.substring(3);
});
}
function uriTemplateSubstitution(spec) {
var modifier = "";
if (uriTemplateGlobalModifiers[spec.charAt(0)]) {
modifier = spec.charAt(0);
spec = spec.substring(1);
}
var separator = "";
var prefix = "";
var shouldEscape = true;
var showVariables = false;
var trimEmptyString = false;
if (modifier === '+') {
shouldEscape = false;
} else if (modifier === ".") {
prefix = ".";
separator = ".";
} else if (modifier === "/") {
prefix = "/";
separator = "/";
} else if (modifier === '#') {
prefix = "#";
shouldEscape = false;
} else if (modifier === ';') {
prefix = ";";
separator = ";";
showVariables = true;
trimEmptyString = true;
} else if (modifier === '?') {
prefix = "?";
separator = "&";
showVariables = true;
} else if (modifier === '&') {
prefix = "&";
separator = "&";
showVariables = true;
}
var varNames = [];
var varList = spec.split(",");
var varSpecs = [];
var varSpecMap = {};
for (var i = 0; i < varList.length; i++) {
var varName = varList[i];
var truncate = null;
if (varName.indexOf(":") !== -1) {
var parts = varName.split(":");
varName = parts[0];
truncate = parseInt(parts[1], 10);
}
var suffices = {};
while (uriTemplateSuffices[varName.charAt(varName.length - 1)]) {
suffices[varName.charAt(varName.length - 1)] = true;
varName = varName.substring(0, varName.length - 1);
}
var varSpec = {
truncate: truncate,
name: varName,
suffices: suffices
};
varSpecs.push(varSpec);
varSpecMap[varName] = varSpec;
varNames.push(varName);
}
var subFunction = function (valueFunction) {
var result = "";
var startIndex = 0;
for (var i = 0; i < varSpecs.length; i++) {
var varSpec = varSpecs[i];
var value = valueFunction(varSpec.name);
if (value === null || value === undefined || (Array.isArray(value) && value.length === 0) || (typeof value === 'object' && Object.keys(value).length === 0)) {
startIndex++;
continue;
}
if (i === startIndex) {
result += prefix;
} else {
result += (separator || ",");
}
if (Array.isArray(value)) {
if (showVariables) {
result += varSpec.name + "=";
}
for (var j = 0; j < value.length; j++) {
if (j > 0) {
result += varSpec.suffices['*'] ? (separator || ",") : ",";
if (varSpec.suffices['*'] && showVariables) {
result += varSpec.name + "=";
}
}
result += shouldEscape ? encodeURIComponent(value[j]).replace(/!/g, "%21") : notReallyPercentEncode(value[j]);
}
} else if (typeof value === "object") {
if (showVariables && !varSpec.suffices['*']) {
result += varSpec.name + "=";
}
var first = true;
for (var key in value) {
if (!first) {
result += varSpec.suffices['*'] ? (separator || ",") : ",";
}
first = false;
result += shouldEscape ? encodeURIComponent(key).replace(/!/g, "%21") : notReallyPercentEncode(key);
result += varSpec.suffices['*'] ? '=' : ",";
result += shouldEscape ? encodeURIComponent(value[key]).replace(/!/g, "%21") : notReallyPercentEncode(value[key]);
}
} else {
if (showVariables) {
result += varSpec.name;
if (!trimEmptyString || value !== "") {
result += "=";
}
}
if (varSpec.truncate != null) {
value = value.substring(0, varSpec.truncate);
}
result += shouldEscape ? encodeURIComponent(value).replace(/!/g, "%21"): notReallyPercentEncode(value);
}
}
return result;
};
subFunction.varNames = varNames;
return {
prefix: prefix,
substitution: subFunction
};
}
function UriTemplate(template) {
if (!(this instanceof UriTemplate)) {
return new UriTemplate(template);
}
var parts = template.split("{");
var textParts = [parts.shift()];
var prefixes = [];
var substitutions = [];
var varNames = [];
while (parts.length > 0) {
var part = parts.shift();
var spec = part.split("}")[0];
var remainder = part.substring(spec.length + 1);
var funcs = uriTemplateSubstitution(spec);
substitutions.push(funcs.substitution);
prefixes.push(funcs.prefix);
textParts.push(remainder);
varNames = varNames.concat(funcs.substitution.varNames);
}
this.fill = function (valueFunction) {
var result = textParts[0];
for (var i = 0; i < substitutions.length; i++) {
var substitution = substitutions[i];
result += substitution(valueFunction);
result += textParts[i + 1];
}
return result;
};
this.varNames = varNames;
this.template = template;
}
UriTemplate.prototype = {
toString: function () {
return this.template;
},
fillFromObject: function (obj) {
return this.fill(function (varName) {
return obj[varName];
});
}
};
var ValidatorContext = function ValidatorContext(parent, collectMultiple, errorMessages, checkRecursive, trackUnknownProperties) {
this.missing = [];
this.missingMap = {};
this.formatValidators = parent ? Object.create(parent.formatValidators) : {};
this.schemas = parent ? Object.create(parent.schemas) : {};
this.collectMultiple = collectMultiple;
this.errors = [];
this.handleError = collectMultiple ? this.collectError : this.returnError;
if (checkRecursive) {
this.checkRecursive = true;
this.scanned = [];
this.scannedFrozen = [];
this.scannedFrozenSchemas = [];
this.scannedFrozenValidationErrors = [];
this.validatedSchemasKey = 'tv4_validation_id';
this.validationErrorsKey = 'tv4_validation_errors_id';
}
if (trackUnknownProperties) {
this.trackUnknownProperties = true;
this.knownPropertyPaths = {};
this.unknownPropertyPaths = {};
}
this.errorMessages = errorMessages;
this.definedKeywords = {};
if (parent) {
for (var key in parent.definedKeywords) {
this.definedKeywords[key] = parent.definedKeywords[key].slice(0);
}
}
};
ValidatorContext.prototype.defineKeyword = function (keyword, keywordFunction) {
this.definedKeywords[keyword] = this.definedKeywords[keyword] || [];
this.definedKeywords[keyword].push(keywordFunction);
};
ValidatorContext.prototype.createError = function (code, messageParams, dataPath, schemaPath, subErrors) {
var messageTemplate = this.errorMessages[code] || ErrorMessagesDefault[code];
if (typeof messageTemplate !== 'string') {
return new ValidationError(code, "Unknown error code " + code + ": " + JSON.stringify(messageParams), messageParams, dataPath, schemaPath, subErrors);
}
// Adapted from Crockford's supplant()
var message = messageTemplate.replace(/\{([^{}]*)\}/g, function (whole, varName) {
var subValue = messageParams[varName];
return typeof subValue === 'string' || typeof subValue === 'number' ? subValue : whole;
});
return new ValidationError(code, message, messageParams, dataPath, schemaPath, subErrors);
};
ValidatorContext.prototype.returnError = function (error) {
return error;
};
ValidatorContext.prototype.collectError = function (error) {
if (error) {
this.errors.push(error);
}
return null;
};
ValidatorContext.prototype.prefixErrors = function (startIndex, dataPath, schemaPath) {
for (var i = startIndex; i < this.errors.length; i++) {
this.errors[i] = this.errors[i].prefixWith(dataPath, schemaPath);
}
return this;
};
ValidatorContext.prototype.banUnknownProperties = function () {
for (var unknownPath in this.unknownPropertyPaths) {
var error = this.createError(ErrorCodes.UNKNOWN_PROPERTY, {path: unknownPath}, unknownPath, "");
var result = this.handleError(error);
if (result) {
return result;
}
}
return null;
};
ValidatorContext.prototype.addFormat = function (format, validator) {
if (typeof format === 'object') {
for (var key in format) {
this.addFormat(key, format[key]);
}
return this;
}
this.formatValidators[format] = validator;
};
ValidatorContext.prototype.resolveRefs = function (schema, urlHistory) {
if (schema['$ref'] !== undefined) {
urlHistory = urlHistory || {};
if (urlHistory[schema['$ref']]) {
return this.createError(ErrorCodes.CIRCULAR_REFERENCE, {urls: Object.keys(urlHistory).join(', ')}, '', '');
}
urlHistory[schema['$ref']] = true;
schema = this.getSchema(schema['$ref'], urlHistory);
}
return schema;
};
ValidatorContext.prototype.getSchema = function (url, urlHistory) {
var schema;
if (this.schemas[url] !== undefined) {
schema = this.schemas[url];
return this.resolveRefs(schema, urlHistory);
}
var baseUrl = url;
var fragment = "";
if (url.indexOf('#') !== -1) {
fragment = url.substring(url.indexOf("#") + 1);
baseUrl = url.substring(0, url.indexOf("#"));
}
if (typeof this.schemas[baseUrl] === 'object') {
schema = this.schemas[baseUrl];
var pointerPath = decodeURIComponent(fragment);
if (pointerPath === "") {
return this.resolveRefs(schema, urlHistory);
} else if (pointerPath.charAt(0) !== "/") {
return undefined;
}
var parts = pointerPath.split("/").slice(1);
for (var i = 0; i < parts.length; i++) {
var component = parts[i].replace(/~1/g, "/").replace(/~0/g, "~");
if (schema[component] === undefined) {
schema = undefined;
break;
}
schema = schema[component];
}
if (schema !== undefined) {
return this.resolveRefs(schema, urlHistory);
}
}
if (this.missing[baseUrl] === undefined) {
this.missing.push(baseUrl);
this.missing[baseUrl] = baseUrl;
this.missingMap[baseUrl] = baseUrl;
}
};
ValidatorContext.prototype.searchSchemas = function (schema, url) {
if (Array.isArray(schema)) {
for (var i = 0; i < schema.length; i++) {
this.searchSchemas(schema[i], url);
}
} else if (schema && typeof schema === "object") {
if (typeof schema.id === "string") {
if (isTrustedUrl(url, schema.id)) {
if (this.schemas[schema.id] === undefined) {
this.schemas[schema.id] = schema;
}
}
}
for (var key in schema) {
if (key !== "enum") {
if (typeof schema[key] === "object") {
this.searchSchemas(schema[key], url);
} else if (key === "$ref") {
var uri = getDocumentUri(schema[key]);
if (uri && this.schemas[uri] === undefined && this.missingMap[uri] === undefined) {
this.missingMap[uri] = uri;
}
}
}
}
}
};
ValidatorContext.prototype.addSchema = function (url, schema) {
//overload
if (typeof url !== 'string' || typeof schema === 'undefined') {
if (typeof url === 'object' && typeof url.id === 'string') {
schema = url;
url = schema.id;
}
else {
return;
}
}
if (url === getDocumentUri(url) + "#") {
// Remove empty fragment
url = getDocumentUri(url);
}
this.schemas[url] = schema;
delete this.missingMap[url];
normSchema(schema, url);
this.searchSchemas(schema, url);
};
ValidatorContext.prototype.getSchemaMap = function () {
var map = {};
for (var key in this.schemas) {
map[key] = this.schemas[key];
}
return map;
};
ValidatorContext.prototype.getSchemaUris = function (filterRegExp) {
var list = [];
for (var key in this.schemas) {
if (!filterRegExp || filterRegExp.test(key)) {
list.push(key);
}
}
return list;
};
ValidatorContext.prototype.getMissingUris = function (filterRegExp) {
var list = [];
for (var key in this.missingMap) {
if (!filterRegExp || filterRegExp.test(key)) {
list.push(key);
}
}
return list;
};
ValidatorContext.prototype.dropSchemas = function () {
this.schemas = {};
this.reset();
};
ValidatorContext.prototype.reset = function () {
this.missing = [];
this.missingMap = {};
this.errors = [];
};
ValidatorContext.prototype.validateAll = function (data, schema, dataPathParts, schemaPathParts, dataPointerPath) {
var topLevel;
schema = this.resolveRefs(schema);
if (!schema) {
return null;
} else if (schema instanceof ValidationError) {
this.errors.push(schema);
return schema;
}
var startErrorCount = this.errors.length;
var frozenIndex, scannedFrozenSchemaIndex = null, scannedSchemasIndex = null;
if (this.checkRecursive && data && typeof data === 'object') {
topLevel = !this.scanned.length;
if (data[this.validatedSchemasKey]) {
var schemaIndex = data[this.validatedSchemasKey].indexOf(schema);
if (schemaIndex !== -1) {
this.errors = this.errors.concat(data[this.validationErrorsKey][schemaIndex]);
return null;
}
}
if (Object.isFrozen(data)) {
frozenIndex = this.scannedFrozen.indexOf(data);
if (frozenIndex !== -1) {
var frozenSchemaIndex = this.scannedFrozenSchemas[frozenIndex].indexOf(schema);
if (frozenSchemaIndex !== -1) {
this.errors = this.errors.concat(this.scannedFrozenValidationErrors[frozenIndex][frozenSchemaIndex]);
return null;
}
}
}
this.scanned.push(data);
if (Object.isFrozen(data)) {
if (frozenIndex === -1) {
frozenIndex = this.scannedFrozen.length;
this.scannedFrozen.push(data);
this.scannedFrozenSchemas.push([]);
}
scannedFrozenSchemaIndex = this.scannedFrozenSchemas[frozenIndex].length;
this.scannedFrozenSchemas[frozenIndex][scannedFrozenSchemaIndex] = schema;
this.scannedFrozenValidationErrors[frozenIndex][scannedFrozenSchemaIndex] = [];
} else {
if (!data[this.validatedSchemasKey]) {
try {
Object.defineProperty(data, this.validatedSchemasKey, {
value: [],
configurable: true
});
Object.defineProperty(data, this.validationErrorsKey, {
value: [],
configurable: true
});
} catch (e) {
//IE 7/8 workaround
data[this.validatedSchemasKey] = [];
data[this.validationErrorsKey] = [];
}
}
scannedSchemasIndex = data[this.validatedSchemasKey].length;
data[this.validatedSchemasKey][scannedSchemasIndex] = schema;
data[this.validationErrorsKey][scannedSchemasIndex] = [];
}
}
var errorCount = this.errors.length;
var error = this.validateBasic(data, schema, dataPointerPath)
|| this.validateNumeric(data, schema, dataPointerPath)
|| this.validateString(data, schema, dataPointerPath)
|| this.validateArray(data, schema, dataPointerPath)
|| this.validateObject(data, schema, dataPointerPath)
|| this.validateCombinations(data, schema, dataPointerPath)
|| this.validateHypermedia(data, schema, dataPointerPath)
|| this.validateFormat(data, schema, dataPointerPath)
|| this.validateDefinedKeywords(data, schema, dataPointerPath)
|| null;
if (topLevel) {
while (this.scanned.length) {
var item = this.scanned.pop();
delete item[this.validatedSchemasKey];
}
this.scannedFrozen = [];
this.scannedFrozenSchemas = [];
}
if (error || errorCount !== this.errors.length) {
while ((dataPathParts && dataPathParts.length) || (schemaPathParts && schemaPathParts.length)) {
var dataPart = (dataPathParts && dataPathParts.length) ? "" + dataPathParts.pop() : null;
var schemaPart = (schemaPathParts && schemaPathParts.length) ? "" + schemaPathParts.pop() : null;
if (error) {
error = error.prefixWith(dataPart, schemaPart);
}
this.prefixErrors(errorCount, dataPart, schemaPart);
}
}
if (scannedFrozenSchemaIndex !== null) {
this.scannedFrozenValidationErrors[frozenIndex][scannedFrozenSchemaIndex] = this.errors.slice(startErrorCount);
} else if (scannedSchemasIndex !== null) {
data[this.validationErrorsKey][scannedSchemasIndex] = this.errors.slice(startErrorCount);
}
return this.handleError(error);
};
ValidatorContext.prototype.validateFormat = function (data, schema) {
if (typeof schema.format !== 'string' || !this.formatValidators[schema.format]) {
return null;
}
var errorMessage = this.formatValidators[schema.format].call(null, data, schema);
if (typeof errorMessage === 'string' || typeof errorMessage === 'number') {
return this.createError(ErrorCodes.FORMAT_CUSTOM, {message: errorMessage}).prefixWith(null, "format");
} else if (errorMessage && typeof errorMessage === 'object') {
return this.createError(ErrorCodes.FORMAT_CUSTOM, {message: errorMessage.message || "?"}, errorMessage.dataPath || null, errorMessage.schemaPath || "/format");
}
return null;
};
ValidatorContext.prototype.validateDefinedKeywords = function (data, schema, dataPointerPath) {
for (var key in this.definedKeywords) {
if (typeof schema[key] === 'undefined') {
continue;
}
var validationFunctions = this.definedKeywords[key];
for (var i = 0; i < validationFunctions.length; i++) {
var func = validationFunctions[i];
var result = func(data, schema[key], schema, dataPointerPath);
if (typeof result === 'string' || typeof result === 'number') {
return this.createError(ErrorCodes.KEYWORD_CUSTOM, {key: key, message: result}).prefixWith(null, "format");
} else if (result && typeof result === 'object') {
var code = result.code;
if (typeof code === 'string') {
if (!ErrorCodes[code]) {
throw new Error('Undefined error code (use defineError): ' + code);
}
code = ErrorCodes[code];
} else if (typeof code !== 'number') {
code = ErrorCodes.KEYWORD_CUSTOM;
}
var messageParams = (typeof result.message === 'object') ? result.message : {key: key, message: result.message || "?"};
var schemaPath = result.schemaPath ||( "/" + key.replace(/~/g, '~0').replace(/\//g, '~1'));
return this.createError(code, messageParams, result.dataPath || null, schemaPath);
}
}
}
return null;
};
function recursiveCompare(A, B) {
if (A === B) {
return true;
}
if (typeof A === "object" && typeof B === "object") {
if (Array.isArray(A) !== Array.isArray(B)) {
return false;
} else if (Array.isArray(A)) {
if (A.length !== B.length) {
return false;
}
for (var i = 0; i < A.length; i++) {
if (!recursiveCompare(A[i], B[i])) {
return false;
}
}
} else {
var key;
for (key in A) {
if (B[key] === undefined && A[key] !== undefined) {
return false;
}
}
for (key in B) {
if (A[key] === undefined && B[key] !== undefined) {
return false;
}
}
for (key in A) {
if (!recursiveCompare(A[key], B[key])) {
return false;
}
}
}
return true;
}
return false;
}
ValidatorContext.prototype.validateBasic = function validateBasic(data, schema, dataPointerPath) {
var error;
if (error = this.validateType(data, schema, dataPointerPath)) {
return error.prefixWith(null, "type");
}
if (error = this.validateEnum(data, schema, dataPointerPath)) {
return error.prefixWith(null, "type");
}
return null;
};
ValidatorContext.prototype.validateType = function validateType(data, schema) {
if (schema.type === undefined) {
return null;
}
var dataType = typeof data;
if (data === null) {
dataType = "null";
} else if (Array.isArray(data)) {
dataType = "array";
}
var allowedTypes = schema.type;
if (typeof allowedTypes !== "object") {
allowedTypes = [allowedTypes];
}
for (var i = 0; i < allowedTypes.length; i++) {
var type = allowedTypes[i];
if (type === dataType || (type === "integer" && dataType === "number" && (data % 1 === 0))) {
return null;
}
}
return this.createError(ErrorCodes.INVALID_TYPE, {type: dataType, expected: allowedTypes.join("/")});
};
ValidatorContext.prototype.validateEnum = function validateEnum(data, schema) {
if (schema["enum"] === undefined) {
return null;
}
for (var i = 0; i < schema["enum"].length; i++) {
var enumVal = schema["enum"][i];
if (recursiveCompare(data, enumVal)) {
return null;
}
}
return this.createError(ErrorCodes.ENUM_MISMATCH, {value: (typeof JSON !== 'undefined') ? JSON.stringify(data) : data});
};
ValidatorContext.prototype.validateNumeric = function validateNumeric(data, schema, dataPointerPath) {
return this.validateMultipleOf(data, schema, dataPointerPath)
|| this.validateMinMax(data, schema, dataPointerPath)
|| this.validateNaN(data, schema, dataPointerPath)
|| null;
};
var CLOSE_ENOUGH_LOW = Math.pow(2, -51);
var CLOSE_ENOUGH_HIGH = 1 - CLOSE_ENOUGH_LOW;
ValidatorContext.prototype.validateMultipleOf = function validateMultipleOf(data, schema) {
var multipleOf = schema.multipleOf || schema.divisibleBy;
if (multipleOf === undefined) {
return null;
}
if (typeof data === "number") {
var remainder = (data/multipleOf)%1;
if (remainder >= CLOSE_ENOUGH_LOW && remainder < CLOSE_ENOUGH_HIGH) {
return this.createError(ErrorCodes.NUMBER_MULTIPLE_OF, {value: data, multipleOf: multipleOf});
}
}
return null;
};
ValidatorContext.prototype.validateMinMax = function validateMinMax(data, schema) {
if (typeof data !== "number") {
return null;
}
if (schema.minimum !== undefined) {
if (data < schema.minimum) {
return this.createError(ErrorCodes.NUMBER_MINIMUM, {value: data, minimum: schema.minimum}).prefixWith(null, "minimum");
}
if (schema.exclusiveMinimum && data === schema.minimum) {
return this.createError(ErrorCodes.NUMBER_MINIMUM_EXCLUSIVE, {value: data, minimum: schema.minimum}).prefixWith(null, "exclusiveMinimum");
}
}
if (schema.maximum !== undefined) {
if (data > schema.maximum) {
return this.createError(ErrorCodes.NUMBER_MAXIMUM, {value: data, maximum: schema.maximum}).prefixWith(null, "maximum");
}
if (schema.exclusiveMaximum && data === schema.maximum) {
return this.createError(ErrorCodes.NUMBER_MAXIMUM_EXCLUSIVE, {value: data, maximum: schema.maximum}).prefixWith(null, "exclusiveMaximum");
}
}
return null;
};
ValidatorContext.prototype.validateNaN = function validateNaN(data) {
if (typeof data !== "number") {
return null;
}
if (isNaN(data) === true || data === Infinity || data === -Infinity) {
return this.createError(ErrorCodes.NUMBER_NOT_A_NUMBER, {value: data}).prefixWith(null, "type");
}
return null;
};
ValidatorContext.prototype.validateString = function validateString(data, schema, dataPointerPath) {
return this.validateStringLength(data, schema, dataPointerPath)
|| this.validateStringPattern(data, schema, dataPointerPath)
|| null;
};
ValidatorContext.prototype.validateStringLength = function validateStringLength(data, schema) {
if (typeof data !== "string") {
return null;
}
if (schema.minLength !== undefined) {
if (data.length < schema.minLength) {
return this.createError(ErrorCodes.STRING_LENGTH_SHORT, {length: data.length, minimum: schema.minLength}).prefixWith(null, "minLength");
}
}
if (schema.maxLength !== undefined) {
if (data.length > schema.maxLength) {
return this.createError(ErrorCodes.STRING_LENGTH_LONG, {length: data.length, maximum: schema.maxLength}).prefixWith(null, "maxLength");
}
}
return null;
};
ValidatorContext.prototype.validateStringPattern = function validateStringPattern(data, schema) {
if (typeof data !== "string" || schema.pattern === undefined) {
return null;
}
var regexp = new RegExp(schema.pattern);
if (!regexp.test(data)) {
return this.createError(ErrorCodes.STRING_PATTERN, {pattern: schema.pattern}).prefixWith(null, "pattern");
}
return null;
};
ValidatorContext.prototype.validateArray = function validateArray(data, schema, dataPointerPath) {
if (!Array.isArray(data)) {
return null;
}
return this.validateArrayLength(data, schema, dataPointerPath)
|| this.validateArrayUniqueItems(data, schema, dataPointerPath)
|| this.validateArrayItems(data, schema, dataPointerPath)
|| null;
};
ValidatorContext.prototype.validateArrayLength = function validateArrayLength(data, schema) {
var error;
if (schema.minItems !== undefined) {
if (data.length < schema.minItems) {
error = (this.createError(ErrorCodes.ARRAY_LENGTH_SHORT, {length: data.length, minimum: schema.minItems})).prefixWith(null, "minItems");
if (this.handleError(error)) {
return error;
}
}
}
if (schema.maxItems !== undefined) {
if (data.length > schema.maxItems) {
error = (this.createError(ErrorCodes.ARRAY_LENGTH_LONG, {length: data.length, maximum: schema.maxItems})).prefixWith(null, "maxItems");
if (this.handleError(error)) {
return error;
}
}
}
return null;
};
ValidatorContext.prototype.validateArrayUniqueItems = function validateArrayUniqueItems(data, schema) {
if (schema.uniqueItems) {
for (var i = 0; i < data.length; i++) {
for (var j = i + 1; j < data.length; j++) {
if (recursiveCompare(data[i], data[j])) {
var error = (this.createError(ErrorCodes.ARRAY_UNIQUE, {match1: i, match2: j})).prefixWith(null, "uniqueItems");
if (this.handleError(error)) {
return error;
}
}
}
}
}
return null;
};
ValidatorContext.prototype.validateArrayItems = function validateArrayItems(data, schema, dataPointerPath) {
if (schema.items === undefined) {
return null;
}
var error, i;
if (Array.isArray(schema.items)) {
for (i = 0; i < data.length; i++) {
if (i < schema.items.length) {
if (error = this.validateAll(data[i], schema.items[i], [i], ["items", i], dataPointerPath + "/" + i)) {
return error;
}
} else if (schema.additionalItems !== undefined) {
if (typeof schema.additionalItems === "boolean") {
if (!schema.additionalItems) {
error = (this.createError(ErrorCodes.ARRAY_ADDITIONAL_ITEMS, {})).prefixWith("" + i, "additionalItems");
if (this.handleError(error)) {
return error;
}
}
} else if (error = this.validateAll(data[i], schema.additionalItems, [i], ["additionalItems"], dataPointerPath + "/" + i)) {
return error;
}
}
}
} else {
for (i = 0; i < data.length; i++) {
if (error = this.validateAll(data[i], schema.items, [i], ["items"], dataPointerPath + "/" + i)) {
return error;
}
}
}
return null;
};
ValidatorContext.prototype.validateObject = function validateObject(data, schema, dataPointerPath) {
if (typeof data !== "object" || data === null || Array.isArray(data)) {
return null;
}
return this.validateObjectMinMaxProperties(data, schema, dataPointerPath)
|| this.validateObjectRequiredProperties(data, schema, dataPointerPath)
|| this.validateObjectProperties(data, schema, dataPointerPath)
|| this.validateObjectDependencies(data, schema, dataPointerPath)
|| null;
};
ValidatorContext.prototype.validateObjectMinMaxProperties = function validateObjectMinMaxProperties(data, schema) {
var keys = Object.keys(data);
var error;
if (schema.minProperties !== undefined) {
if (keys.length < schema.minProperties) {
error = this.createError(ErrorCodes.OBJECT_PROPERTIES_MINIMUM, {propertyCount: keys.length, minimum: schema.minProperties}).prefixWith(null, "minProperties");
if (this.handleError(error)) {
return error;
}
}
}
if (schema.maxProperties !== undefined) {
if (keys.length > schema.maxProperties) {
error = this.createError(ErrorCodes.OBJECT_PROPERTIES_MAXIMUM, {propertyCount: keys.length, maximum: schema.maxProperties}).prefixWith(null, "maxProperties");
if (this.handleError(error)) {
return error;
}
}
}
return null;
};
ValidatorContext.prototype.validateObjectRequiredProperties = function validateObjectRequiredProperties(data, schema) {
if (schema.required !== undefined) {
for (var i = 0; i < schema.required.length; i++) {
var key = schema.required[i];
if (data[key] === undefined) {
var error = this.createError(ErrorCodes.OBJECT_REQUIRED, {key: key}).prefixWith(null, "" + i).prefixWith(null, "required");
if (this.handleError(error)) {
return error;
}
}
}
}
return null;
};
ValidatorContext.prototype.validateObjectProperties = function validateObjectProperties(data, schema, dataPointerPath) {
var error;
for (var key in data) {
var keyPointerPath = dataPointerPath + "/" + key.replace(/~/g, '~0').replace(/\//g, '~1');
var foundMatch = false;
if (schema.properties !== undefined && schema.properties[key] !== undefined) {
foundMatch = true;
if (error = this.validateAll(data[key], schema.properties[key], [key], ["properties", key], keyPointerPath)) {
return error;
}
}
if (schema.patternProperties !== undefined) {
for (var patternKey in schema.patternProperties) {
var regexp = new RegExp(patternKey);
if (regexp.test(key)) {
foundMatch = true;
if (error = this.validateAll(data[key], schema.patternProperties[patternKey], [key], ["patternProperties", patternKey], keyPointerPath)) {
return error;
}
}
}
}
if (!foundMatch) {
if (schema.additionalProperties !== undefined) {
if (this.trackUnknownProperties) {
this.knownPropertyPaths[keyPointerPath] = true;
delete this.unknownPropertyPaths[keyPointerPath];
}
if (typeof schema.additionalProperties === "boolean") {
if (!schema.additionalProperties) {
error = this.createError(ErrorCodes.OBJECT_ADDITIONAL_PROPERTIES, {}).prefixWith(key, "additionalProperties");
if (this.handleError(error)) {
return error;
}
}
} else {
if (error = this.validateAll(data[key], schema.additionalProperties, [key], ["additionalProperties"], keyPointerPath)) {
return error;
}
}
} else if (this.trackUnknownProperties && !this.knownPropertyPaths[keyPointerPath]) {
this.unknownPropertyPaths[keyPointerPath] = true;
}
} else if (this.trackUnknownProperties) {
this.knownPropertyPaths[keyPointerPath] = true;
delete this.unknownPropertyPaths[keyPointerPath];
}
}
return null;
};
ValidatorContext.prototype.validateObjectDependencies = function validateObjectDependencies(data, schema, dataPointerPath) {
var error;
if (schema.dependencies !== undefined) {
for (var depKey in schema.dependencies) {
if (data[depKey] !== undefined) {
var dep = schema.dependencies[depKey];
if (typeof dep === "string") {
if (data[dep] === undefined) {
error = this.createError(ErrorCodes.OBJECT_DEPENDENCY_KEY, {key: depKey, missing: dep}).prefixWith(null, depKey).prefixWith(null, "dependencies");
if (this.handleError(error)) {
return error;
}
}
} else if (Array.isArray(dep)) {
for (var i = 0; i < dep.length; i++) {
var requiredKey = dep[i];
if (data[requiredKey] === undefined) {
error = this.createError(ErrorCodes.OBJECT_DEPENDENCY_KEY, {key: depKey, missing: requiredKey}).prefixWith(null, "" + i).prefixWith(null, depKey).prefixWith(null, "dependencies");
if (this.handleError(error)) {
return error;
}
}
}
} else {
if (error = this.validateAll(data, dep, [], ["dependencies", depKey], dataPointerPath)) {
return error;
}
}
}
}
}
return null;
};
ValidatorContext.prototype.validateCombinations = function validateCombinations(data, schema, dataPointerPath) {
return this.validateAllOf(data, schema, dataPointerPath)
|| this.validateAnyOf(data, schema, dataPointerPath)
|| this.validateOneOf(data, schema, dataPointerPath)
|| this.validateNot(data, schema, dataPointerPath)
|| null;
};
ValidatorContext.prototype.validateAllOf = function validateAllOf(data, schema, dataPointerPath) {
if (schema.allOf === undefined) {
return null;
}
var error;
for (var i = 0; i < schema.allOf.length; i++) {
var subSchema = schema.allOf[i];
if (error = this.validateAll(data, subSchema, [], ["allOf", i], dataPointerPath)) {
return error;
}
}
return null;
};
ValidatorContext.prototype.validateAnyOf = function validateAnyOf(data, schema, dataPointerPath) {
if (schema.anyOf === undefined) {
return null;
}
var errors = [];
var startErrorCount = this.errors.length;
var oldUnknownPropertyPaths, oldKnownPropertyPaths;
if (this.trackUnknownProperties) {
oldUnknownPropertyPaths = this.unknownPropertyPaths;
oldKnownPropertyPaths = this.knownPropertyPaths;
}
var errorAtEnd = true;
for (var i = 0; i < schema.anyOf.length; i++) {
if (this.trackUnknownProperties) {
this.unknownPropertyPaths = {};
this.knownPropertyPaths = {};
}
var subSchema = schema.anyOf[i];
var errorCount = this.errors.length;
var error = this.validateAll(data, subSchema, [], ["anyOf", i], dataPointerPath);
if (error === null && errorCount === this.errors.length) {
this.errors = this.errors.slice(0, startErrorCount);
if (this.trackUnknownProperties) {
for (var knownKey in this.knownPropertyPaths) {
oldKnownPropertyPaths[knownKey] = true;
delete oldUnknownPropertyPaths[knownKey];
}
for (var unknownKey in this.unknownPropertyPaths) {
if (!oldKnownPropertyPaths[unknownKey]) {
oldUnknownPropertyPaths[unknownKey] = true;
}
}
// We need to continue looping so we catch all the property definitions, but we don't want to return an error
errorAtEnd = false;
continue;
}
return null;
}
if (error) {
errors.push(error.prefixWith(null, "" + i).prefixWith(null, "anyOf"));
}
}
if (this.trackUnknownProperties) {
this.unknownPropertyPaths = oldUnknownPropertyPaths;
this.knownPropertyPaths = oldKnownPropertyPaths;
}
if (errorAtEnd) {
errors = errors.concat(this.errors.slice(startErrorCount));
this.errors = this.errors.slice(0, startErrorCount);
return this.createError(ErrorCodes.ANY_OF_MISSING, {}, "", "/anyOf", errors);
}
};
ValidatorContext.prototype.validateOneOf = function validateOneOf(data, schema, dataPointerPath) {
if (schema.oneOf === undefined) {
return null;
}
var validIndex = null;
var errors = [];
var startErrorCount = this.errors.length;
var oldUnknownPropertyPaths, oldKnownPropertyPaths;
if (this.trackUnknownProperties) {
oldUnknownPropertyPaths = this.unknownPropertyPaths;
oldKnownPropertyPaths = this.knownPropertyPaths;
}
for (var i = 0; i < schema.oneOf.length; i++) {
if (this.trackUnknownProperties) {
this.unknownPropertyPaths = {};
this.knownPropertyPaths = {};
}
var subSchema = schema.oneOf[i];
var errorCount = this.errors.length;
var error = this.validateAll(data, subSchema, [], ["oneOf", i], dataPointerPath);
if (error === null && errorCount === this.errors.length) {
if (validIndex === null) {
validIndex = i;
} else {
this.errors = this.errors.slice(0, startErrorCount);
return this.createError(ErrorCodes.ONE_OF_MULTIPLE, {index1: validIndex, index2: i}, "", "/oneOf");
}
if (this.trackUnknownProperties) {
for (var knownKey in this.knownPropertyPaths) {
oldKnownPropertyPaths[knownKey] = true;
delete oldUnknownPropertyPaths[knownKey];
}
for (var unknownKey in this.unknownPropertyPaths) {
if (!oldKnownPropertyPaths[unknownKey]) {
oldUnknownPropertyPaths[unknownKey] = true;
}
}
}
} else if (error) {
errors.push(error);
}
}
if (this.trackUnknownProperties) {
this.unknownPropertyPaths = oldUnknownPropertyPaths;
this.knownPropertyPaths = oldKnownPropertyPaths;
}
if (validIndex === null) {
errors = errors.concat(this.errors.slice(startErrorCount));
this.errors = this.errors.slice(0, startErrorCount);
return this.createError(ErrorCodes.ONE_OF_MISSING, {}, "", "/oneOf", errors);
} else {
this.errors = this.errors.slice(0, startErrorCount);
}
return null;
};
ValidatorContext.prototype.validateNot = function validateNot(data, schema, dataPointerPath) {
if (schema.not === undefined) {
return null;
}
var oldErrorCount = this.errors.length;
var oldUnknownPropertyPaths, oldKnownPropertyPaths;
if (this.trackUnknownProperties) {
oldUnknownPropertyPaths = this.unknownPropertyPaths;
oldKnownPropertyPaths = this.knownPropertyPaths;
this.unknownPropertyPaths = {};
this.knownPropertyPaths = {};
}
var error = this.validateAll(data, schema.not, null, null, dataPointerPath);
var notErrors = this.errors.slice(oldErrorCount);
this.errors = this.errors.slice(0, oldErrorCount);
if (this.trackUnknownProperties) {
this.unknownPropertyPaths = oldUnknownPropertyPaths;
this.knownPropertyPaths = oldKnownPropertyPaths;
}
if (error === null && notErrors.length === 0) {
return this.createError(ErrorCodes.NOT_PASSED, {}, "", "/not");
}
return null;
};
ValidatorContext.prototype.validateHypermedia = function validateCombinations(data, schema, dataPointerPath) {
if (!schema.links) {
return null;
}
var error;
for (var i = 0; i < schema.links.length; i++) {
var ldo = schema.links[i];
if (ldo.rel === "describedby") {
var template = new UriTemplate(ldo.href);
var allPresent = true;
for (var j = 0; j < template.varNames.length; j++) {
if (!(template.varNames[j] in data)) {
allPresent = false;
break;
}
}
if (allPresent) {
var schemaUrl = template.fillFromObject(data);
var subSchema = {"$ref": schemaUrl};
if (error = this.validateAll(data, subSchema, [], ["links", i], dataPointerPath)) {
return error;
}
}
}
}
};
// parseURI() and resolveUrl() are from https://gist.github.com/1088850
// - released as public domain by author ("Yaffle") - see comments on gist
function parseURI(url) {
var m = String(url).replace(/^\s+|\s+$/g, '').match(/^([^:\/?#]+:)?(\/\/(?:[^:@]*(?::[^:@]*)?@)?(([^:\/?#]*)(?::(\d*))?))?([^?#]*)(\?[^#]*)?(#[\s\S]*)?/);
// authority = '//' + user + ':' + pass '@' + hostname + ':' port
return (m ? {
href : m[0] || '',
protocol : m[1] || '',
authority: m[2] || '',
host : m[3] || '',
hostname : m[4] || '',
port : m[5] || '',
pathname : m[6] || '',
search : m[7] || '',
hash : m[8] || ''
} : null);
}
function resolveUrl(base, href) {// RFC 3986
function removeDotSegments(input) {
var output = [];
input.replace(/^(\.\.?(\/|$))+/, '')
.replace(/\/(\.(\/|$))+/g, '/')
.replace(/\/\.\.$/, '/../')
.replace(/\/?[^\/]*/g, function (p) {
if (p === '/..') {
output.pop();
} else {
output.push(p);
}
});
return output.join('').replace(/^\//, input.charAt(0) === '/' ? '/' : '');
}
href = parseURI(href || '');
base = parseURI(base || '');
return !href || !base ? null : (href.protocol || base.protocol) +
(href.protocol || href.authority ? href.authority : base.authority) +
removeDotSegments(href.protocol || href.authority || href.pathname.charAt(0) === '/' ? href.pathname : (href.pathname ? ((base.authority && !base.pathname ? '/' : '') + base.pathname.slice(0, base.pathname.lastIndexOf('/') + 1) + href.pathname) : base.pathname)) +
(href.protocol || href.authority || href.pathname ? href.search : (href.search || base.search)) +
href.hash;
}
function getDocumentUri(uri) {
return uri.split('#')[0];
}
function normSchema(schema, baseUri) {
if (schema && typeof schema === "object") {
if (baseUri === undefined) {
baseUri = schema.id;
} else if (typeof schema.id === "string") {
baseUri = resolveUrl(baseUri, schema.id);
schema.id = baseUri;
}
if (Array.isArray(schema)) {
for (var i = 0; i < schema.length; i++) {
normSchema(schema[i], baseUri);
}
} else {
if (typeof schema['$ref'] === "string") {
schema['$ref'] = resolveUrl(baseUri, schema['$ref']);
}
for (var key in schema) {
if (key !== "enum") {
normSchema(schema[key], baseUri);
}
}
}
}
}
var ErrorCodes = {
INVALID_TYPE: 0,
ENUM_MISMATCH: 1,
ANY_OF_MISSING: 10,
ONE_OF_MISSING: 11,
ONE_OF_MULTIPLE: 12,
NOT_PASSED: 13,
// Numeric errors
NUMBER_MULTIPLE_OF: 100,
NUMBER_MINIMUM: 101,
NUMBER_MINIMUM_EXCLUSIVE: 102,
NUMBER_MAXIMUM: 103,
NUMBER_MAXIMUM_EXCLUSIVE: 104,
NUMBER_NOT_A_NUMBER: 105,
// String errors
STRING_LENGTH_SHORT: 200,
STRING_LENGTH_LONG: 201,
STRING_PATTERN: 202,
// Object errors
OBJECT_PROPERTIES_MINIMUM: 300,
OBJECT_PROPERTIES_MAXIMUM: 301,
OBJECT_REQUIRED: 302,
OBJECT_ADDITIONAL_PROPERTIES: 303,
OBJECT_DEPENDENCY_KEY: 304,
// Array errors
ARRAY_LENGTH_SHORT: 400,
ARRAY_LENGTH_LONG: 401,
ARRAY_UNIQUE: 402,
ARRAY_ADDITIONAL_ITEMS: 403,
// Custom/user-defined errors
FORMAT_CUSTOM: 500,
KEYWORD_CUSTOM: 501,
// Schema structure
CIRCULAR_REFERENCE: 600,
// Non-standard validation options
UNKNOWN_PROPERTY: 1000
};
var ErrorCodeLookup = {};
for (var key in ErrorCodes) {
ErrorCodeLookup[ErrorCodes[key]] = key;
}
var ErrorMessagesDefault = {
INVALID_TYPE: "Invalid type: {type} (expected {expected})",
ENUM_MISMATCH: "No enum match for: {value}",
ANY_OF_MISSING: "Data does not match any schemas from \"anyOf\"",
ONE_OF_MISSING: "Data does not match any schemas from \"oneOf\"",
ONE_OF_MULTIPLE: "Data is valid against more than one schema from \"oneOf\": indices {index1} and {index2}",
NOT_PASSED: "Data matches schema from \"not\"",
// Numeric errors
NUMBER_MULTIPLE_OF: "Value {value} is not a multiple of {multipleOf}",
NUMBER_MINIMUM: "Value {value} is less than minimum {minimum}",
NUMBER_MINIMUM_EXCLUSIVE: "Value {value} is equal to exclusive minimum {minimum}",
NUMBER_MAXIMUM: "Value {value} is greater than maximum {maximum}",
NUMBER_MAXIMUM_EXCLUSIVE: "Value {value} is equal to exclusive maximum {maximum}",
NUMBER_NOT_A_NUMBER: "Value {value} is not a valid number",
// String errors
STRING_LENGTH_SHORT: "String is too short ({length} chars), minimum {minimum}",
STRING_LENGTH_LONG: "String is too long ({length} chars), maximum {maximum}",
STRING_PATTERN: "String does not match pattern: {pattern}",
// Object errors
OBJECT_PROPERTIES_MINIMUM: "Too few properties defined ({propertyCount}), minimum {minimum}",
OBJECT_PROPERTIES_MAXIMUM: "Too many properties defined ({propertyCount}), maximum {maximum}",
OBJECT_REQUIRED: "Missing required property: {key}",
OBJECT_ADDITIONAL_PROPERTIES: "Additional properties not allowed",
OBJECT_DEPENDENCY_KEY: "Dependency failed - key must exist: {missing} (due to key: {key})",
// Array errors
ARRAY_LENGTH_SHORT: "Array is too short ({length}), minimum {minimum}",
ARRAY_LENGTH_LONG: "Array is too long ({length}), maximum {maximum}",
ARRAY_UNIQUE: "Array items are not unique (indices {match1} and {match2})",
ARRAY_ADDITIONAL_ITEMS: "Additional items not allowed",
// Format errors
FORMAT_CUSTOM: "Format validation failed ({message})",
KEYWORD_CUSTOM: "Keyword failed: {key} ({message})",
// Schema structure
CIRCULAR_REFERENCE: "Circular $refs: {urls}",
// Non-standard validation options
UNKNOWN_PROPERTY: "Unknown property (not in schema)"
};
function ValidationError(code, message, params, dataPath, schemaPath, subErrors) {
Error.call(this);
if (code === undefined) {
throw new Error ("No code supplied for error: "+ message);
}
this.message = message;
this.params = params;
this.code = code;
this.dataPath = dataPath || "";
this.schemaPath = schemaPath || "";
this.subErrors = subErrors || null;
var err = new Error(this.message);
this.stack = err.stack || err.stacktrace;
if (!this.stack) {
try {
throw err;
}
catch(err) {
this.stack = err.stack || err.stacktrace;
}
}
}
ValidationError.prototype = Object.create(Error.prototype);
ValidationError.prototype.constructor = ValidationError;
ValidationError.prototype.name = 'ValidationError';
ValidationError.prototype.prefixWith = function (dataPrefix, schemaPrefix) {
if (dataPrefix !== null) {
dataPrefix = dataPrefix.replace(/~/g, "~0").replace(/\//g, "~1");
this.dataPath = "/" + dataPrefix + this.dataPath;
}
if (schemaPrefix !== null) {
schemaPrefix = schemaPrefix.replace(/~/g, "~0").replace(/\//g, "~1");
this.schemaPath = "/" + schemaPrefix + this.schemaPath;
}
if (this.subErrors !== null) {
for (var i = 0; i < this.subErrors.length; i++) {
this.subErrors[i].prefixWith(dataPrefix, schemaPrefix);
}
}
return this;
};
function isTrustedUrl(baseUrl, testUrl) {
if(testUrl.substring(0, baseUrl.length) === baseUrl){
var remainder = testUrl.substring(baseUrl.length);
if ((testUrl.length > 0 && testUrl.charAt(baseUrl.length - 1) === "/")
|| remainder.charAt(0) === "#"
|| remainder.charAt(0) === "?") {
return true;
}
}
return false;
}
var languages = {};
function createApi(language) {
var globalContext = new ValidatorContext();
var currentLanguage = language || 'en';
var api = {
addFormat: function () {
globalContext.addFormat.apply(globalContext, arguments);
},
language: function (code) {
if (!code) {
return currentLanguage;
}
if (!languages[code]) {
code = code.split('-')[0]; // fall back to base language
}
if (languages[code]) {
currentLanguage = code;
return code; // so you can tell if fall-back has happened
}
return false;
},
addLanguage: function (code, messageMap) {
var key;
for (key in ErrorCodes) {
if (messageMap[key] && !messageMap[ErrorCodes[key]]) {
messageMap[ErrorCodes[key]] = messageMap[key];
}
}
var rootCode = code.split('-')[0];
if (!languages[rootCode]) { // use for base language if not yet defined
languages[code] = messageMap;
languages[rootCode] = messageMap;
} else {
languages[code] = Object.create(languages[rootCode]);
for (key in messageMap) {
if (typeof languages[rootCode][key] === 'undefined') {
languages[rootCode][key] = messageMap[key];
}
languages[code][key] = messageMap[key];
}
}
return this;
},
freshApi: function (language) {
var result = createApi();
if (language) {
result.language(language);
}
return result;
},
validate: function (data, schema, checkRecursive, banUnknownProperties) {
var context = new ValidatorContext(globalContext, false, languages[currentLanguage], checkRecursive, banUnknownProperties);
if (typeof schema === "string") {
schema = {"$ref": schema};
}
context.addSchema("", schema);
var error = context.validateAll(data, schema, null, null, "");
if (!error && banUnknownProperties) {
error = context.banUnknownProperties();
}
this.error = error;
this.missing = context.missing;
this.valid = (error === null);
return this.valid;
},
validateResult: function () {
var result = {};
this.validate.apply(result, arguments);
return result;
},
validateMultiple: function (data, schema, checkRecursive, banUnknownProperties) {
var context = new ValidatorContext(globalContext, true, languages[currentLanguage], checkRecursive, banUnknownProperties);
if (typeof schema === "string") {
schema = {"$ref": schema};
}
context.addSchema("", schema);
context.validateAll(data, schema, null, null, "");
if (banUnknownProperties) {
context.banUnknownProperties();
}
var result = {};
result.errors = context.errors;
result.missing = context.missing;
result.valid = (result.errors.length === 0);
return result;
},
addSchema: function () {
return globalContext.addSchema.apply(globalContext, arguments);
},
getSchema: function () {
return globalContext.getSchema.apply(globalContext, arguments);
},
getSchemaMap: function () {
return globalContext.getSchemaMap.apply(globalContext, arguments);
},
getSchemaUris: function () {
return globalContext.getSchemaUris.apply(globalContext, arguments);
},
getMissingUris: function () {
return globalContext.getMissingUris.apply(globalContext, arguments);
},
dropSchemas: function () {
globalContext.dropSchemas.apply(globalContext, arguments);
},
defineKeyword: function () {
globalContext.defineKeyword.apply(globalContext, arguments);
},
defineError: function (codeName, codeNumber, defaultMessage) {
if (typeof codeName !== 'string' || !/^[A-Z]+(_[A-Z]+)*$/.test(codeName)) {
throw new Error('Code name must be a string in UPPER_CASE_WITH_UNDERSCORES');
}
if (typeof codeNumber !== 'number' || codeNumber%1 !== 0 || codeNumber < 10000) {
throw new Error('Code number must be an integer > 10000');
}
if (typeof ErrorCodes[codeName] !== 'undefined') {
throw new Error('Error already defined: ' + codeName + ' as ' + ErrorCodes[codeName]);
}
if (typeof ErrorCodeLookup[codeNumber] !== 'undefined') {
throw new Error('Error code already used: ' + ErrorCodeLookup[codeNumber] + ' as ' + codeNumber);
}
ErrorCodes[codeName] = codeNumber;
ErrorCodeLookup[codeNumber] = codeName;
ErrorMessagesDefault[codeName] = ErrorMessagesDefault[codeNumber] = defaultMessage;
for (var langCode in languages) {
var language = languages[langCode];
if (language[codeName]) {
language[codeNumber] = language[codeNumber] || language[codeName];
}
}
},
reset: function () {
globalContext.reset();
this.error = null;
this.missing = [];
this.valid = true;
},
missing: [],
error: null,
valid: true,
normSchema: normSchema,
resolveUrl: resolveUrl,
getDocumentUri: getDocumentUri,
errorCodes: ErrorCodes
};
return api;
}
var tv4 = createApi();
tv4.addLanguage('en-gb', ErrorMessagesDefault);
//legacy property
tv4.tv4 = tv4;
return tv4; // used by _header.js to globalise.
}));
'use strict';
;!function(undefined) {
var ObjectPath = {
parse: function(str){
if(typeof str !== 'string'){
throw new TypeError('ObjectPath.parse must be passed a string');
}
var i = 0;
var parts = [];
var d, b, q, c;
while (i < str.length){
d = str.indexOf('.', i);
b = str.indexOf('[', i);
// we've reached the end
if (d === -1 && b === -1){
parts.push(str.slice(i, str.length));
i = str.length;
}
// dots
else if (b === -1 || (d !== -1 && d < b)) {
parts.push(str.slice(i, d));
i = d + 1;
}
// brackets
else {
if (b > i){
parts.push(str.slice(i, b));
i = b;
}
q = str.slice(b+1, b+2);
if (q !== '"' && q !=='\'') {
c = str.indexOf(']', b);
if (c === -1) c = str.length;
parts.push(str.slice(i + 1, c));
i = (str.slice(c + 1, c + 2) === '.') ? c + 2 : c + 1;
} else {
c = str.indexOf(q+']', b);
if (c === -1) c = str.length;
while (str.slice(c - 1, c) === '\\' && b < str.length){
b++;
c = str.indexOf(q+']', b);
}
parts.push(str.slice(i + 2, c).replace(new RegExp('\\'+q,'g'), q));
i = (str.slice(c + 2, c + 3) === '.') ? c + 3 : c + 2;
}
}
}
return parts;
},
// root === true : auto calculate root; must be dot-notation friendly
// root String : the string to use as root
stringify: function(arr, quote){
if(!Array.isArray(arr))
arr = [arr.toString()];
quote = quote === '"' ? '"' : '\'';
return arr.map(function(n){ return '[' + quote + (n.toString()).replace(new RegExp(quote, 'g'), '\\' + quote) + quote + ']'; }).join('');
},
normalize: function(data, quote){
return ObjectPath.stringify(Array.isArray(data) ? data : ObjectPath.parse(data), quote);
},
// Angular
registerModule: function(angular) {
angular.module('ObjectPath', []).provider('ObjectPath', function(){
this.parse = ObjectPath.parse;
this.stringify = ObjectPath.stringify;
this.normalize = ObjectPath.normalize;
this.$get = function(){
return ObjectPath;
};
});
}
};
// AMD
if (typeof define === 'function' && define.amd) {
define(function() {
return ObjectPath;
});
}
// CommonJS
else if (typeof exports === 'object') {
exports.ObjectPath = ObjectPath;
}
// Browser global
else {
window.ObjectPath = ObjectPath;
}
}();
angular.module("schemaForm").run(["$templateCache", function($templateCache) {$templateCache.put("directives/decorators/bootstrap/actions-trcl.html","<div class=\"btn-group schema-form-actions {{form.htmlClass}}\" ng-transclude=\"\"></div>");
$templateCache.put("directives/decorators/bootstrap/actions.html","<div class=\"btn-group schema-form-actions {{form.htmlClass}}\"><input ng-repeat-start=\"item in form.items\" type=\"submit\" class=\"btn {{ item.style || \'btn-default\' }} {{form.fieldHtmlClass}}\" value=\"{{item.title}}\" ng-if=\"item.type === \'submit\'\"> <button ng-repeat-end=\"\" class=\"btn {{ item.style || \'btn-default\' }} {{form.fieldHtmlClass}}\" type=\"button\" ng-disabled=\"form.readonly\" ng-if=\"item.type !== \'submit\'\" ng-click=\"buttonClick($event,item)\"><span ng-if=\"item.icon\" class=\"{{item.icon}}\"></span>{{item.title}}</button></div>");
$templateCache.put("directives/decorators/bootstrap/array.html","<div sf-array=\"form\" class=\"schema-form-array {{form.htmlClass}}\" ng-model=\"$$value$$\" ng-model-options=\"form.ngModelOptions\"><h3 ng-show=\"form.title && form.notitle !== true\">{{ form.title }}</h3><ol class=\"list-group\" ng-model=\"modelArray\" ui-sortable=\"\"><li class=\"list-group-item {{form.fieldHtmlClass}}\" ng-repeat=\"item in modelArray track by $index\"><button ng-hide=\"form.readonly || form.remove === null\" ng-click=\"deleteFromArray($index)\" style=\"position: relative; z-index: 20;\" type=\"button\" class=\"close pull-right\"><span aria-hidden=\"true\">×</span><span class=\"sr-only\">Close</span></button><sf-decorator ng-init=\"arrayIndex = $index\" form=\"copyWithIndex($index)\"></sf-decorator></li></ol><div class=\"clearfix\" style=\"padding: 15px;\"><button ng-hide=\"form.readonly || form.add === null\" ng-click=\"appendToArray()\" type=\"button\" class=\"btn {{ form.style.add || \'btn-default\' }} pull-right\"><i class=\"glyphicon glyphicon-plus\"></i> {{ form.add || \'Add\'}}</button></div><div class=\"help-block\" ng-show=\"(hasError() && errorMessage(schemaError())) || form.description\" ng-bind-html=\"(hasError() && errorMessage(schemaError())) || form.description\"></div></div>");
$templateCache.put("directives/decorators/bootstrap/checkbox.html","<div class=\"checkbox schema-form-checkbox {{form.htmlClass}}\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess()}\"><label class=\"{{form.labelHtmlClass}}\"><input type=\"checkbox\" sf-changed=\"form\" ng-disabled=\"form.readonly\" ng-model=\"$$value$$\" ng-model-options=\"form.ngModelOptions\" schema-validate=\"form\" class=\"{{form.fieldHtmlClass}}\" name=\"{{form.key.slice(-1)[0]}}\"> <span ng-bind-html=\"form.title\"></span></label><div class=\"help-block\" sf-message=\"form.description\"></div></div>");
$templateCache.put("directives/decorators/bootstrap/checkboxes.html","<div sf-array=\"form\" ng-model=\"$$value$$\" class=\"form-group schema-form-checkboxes {{form.htmlClass}}\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess()}\"><label class=\"control-label {{form.labelHtmlClass}}\" ng-show=\"showTitle()\">{{form.title}}</label><div class=\"checkbox\" ng-repeat=\"val in titleMapValues track by $index\"><label><input type=\"checkbox\" ng-disabled=\"form.readonly\" sf-changed=\"form\" class=\"{{form.fieldHtmlClass}}\" ng-model=\"titleMapValues[$index]\" schema-vaidate=\"form\" name=\"{{form.key.slice(-1)[0]}}\"> <span ng-bind-html=\"form.titleMap[$index].name\"></span></label></div><div class=\"help-block\" sf-message=\"form.description\"></div></div>");
$templateCache.put("directives/decorators/bootstrap/default.html","<div class=\"form-group schema-form-{{form.type}} {{form.htmlClass}}\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess(), \'has-feedback\': form.feedback !== false }\"><label class=\"control-label {{form.labelHtmlClass}}\" ng-class=\"{\'sr-only\': !showTitle()}\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label> <span ng-if=\"form.required == true\" class=\"glyphicon glyphicon-asterisk text-danger\"></span><input ng-if=\"!form.fieldAddonLeft && !form.fieldAddonRight\" ng-show=\"form.key\" type=\"{{form.type}}\" step=\"any\" sf-changed=\"form\" placeholder=\"{{form.placeholder}}\" class=\"form-control {{form.fieldHtmlClass}}\" id=\"{{form.key.slice(-1)[0]}}\" ng-model-options=\"form.ngModelOptions\" ng-model=\"$$value$$\" ng-disabled=\"form.readonly\" schema-validate=\"form\" name=\"{{form.key.slice(-1)[0]}}\" aria-describedby=\"{{form.key.slice(-1)[0] + \'Status\'}}\"><div ng-if=\"form.fieldAddonLeft || form.fieldAddonRight\" ng-class=\"{\'input-group\': (form.fieldAddonLeft || form.fieldAddonRight)}\"><span ng-if=\"form.fieldAddonLeft\" class=\"input-group-addon\" ng-bind-html=\"form.fieldAddonLeft\"></span> <input ng-show=\"form.key\" type=\"{{form.type}}\" step=\"any\" sf-changed=\"form\" placeholder=\"{{form.placeholder}}\" class=\"form-control {{form.fieldHtmlClass}}\" id=\"{{form.key.slice(-1)[0]}}\" ng-model-options=\"form.ngModelOptions\" ng-model=\"$$value$$\" ng-disabled=\"form.readonly\" schema-validate=\"form\" name=\"{{form.key.slice(-1)[0]}}\" aria-describedby=\"{{form.key.slice(-1)[0] + \'Status\'}}\"> <span ng-if=\"form.fieldAddonRight\" class=\"input-group-addon\" ng-bind-html=\"form.fieldAddonRight\"></span></div><span ng-if=\"form.feedback !== false\" class=\"form-control-feedback\" ng-class=\"evalInScope(form.feedback) || {\'glyphicon\': true, \'glyphicon-ok\': hasSuccess(), \'glyphicon-remove\': hasError() }\" aria-hidden=\"true\"></span> <span ng-if=\"hasError() || hasSuccess()\" id=\"{{form.key.slice(-1)[0] + \'Status\'}}\" class=\"sr-only\">{{ hasSuccess() ? \'(success)\' : \'(error)\' }}</span><div class=\"help-block\" sf-message=\"form.description\"></div></div>");
$templateCache.put("directives/decorators/bootstrap/fieldset-trcl.html","<fieldset ng-disabled=\"form.readonly\" class=\"schema-form-fieldset {{form.htmlClass}}\"><legend ng-show=\"form.title\">{{ form.title }}</legend><div class=\"help-block\" ng-show=\"form.description\" ng-bind-html=\"form.description\"></div><div ng-transclude=\"\"></div></fieldset>");
$templateCache.put("directives/decorators/bootstrap/fieldset.html","<fieldset ng-disabled=\"form.readonly\" class=\"schema-form-fieldset {{form.htmlClass}}\"><legend ng-show=\"form.title\">{{ form.title }}</legend><div class=\"help-block\" ng-show=\"form.description\" ng-bind-html=\"form.description\"></div><sf-decorator ng-repeat=\"item in form.items\" form=\"item\"></sf-decorator></fieldset>");
$templateCache.put("directives/decorators/bootstrap/help.html","<div class=\"helpvalue schema-form-helpvalue {{form.htmlClass}}\" ng-bind-html=\"form.helpvalue\"></div>");
$templateCache.put("directives/decorators/bootstrap/radio-buttons.html","<div class=\"form-group schema-form-radiobuttons {{form.htmlClass}}\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess()}\"><div><label class=\"control-label {{form.labelHtmlClass}}\" ng-show=\"showTitle()\">{{form.title}}</label></div><div class=\"btn-group\"><label class=\"btn {{ (item.value === $$value$$) ? form.style.selected || \'btn-default\' : form.style.unselected || \'btn-default\'; }}\" ng-class=\"{ active: item.value === $$value$$ }\" ng-repeat=\"item in form.titleMap\"><input type=\"radio\" class=\"{{form.fieldHtmlClass}}\" sf-changed=\"form\" style=\"display: none;\" ng-disabled=\"form.readonly\" ng-model=\"$$value$$\" ng-model-options=\"form.ngModelOptions\" schema-validate=\"form\" ng-value=\"item.value\" name=\"{{form.key.join(\'.\')}}\"> <span ng-bind-html=\"item.name\"></span></label></div><div class=\"help-block\" sf-message=\"form.description\"></div></div>");
$templateCache.put("directives/decorators/bootstrap/radios-inline.html","<div class=\"form-group schema-form-radios-inline {{form.htmlClass}}\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess()}\"><label class=\"control-label {{form.labelHtmlClass}}\" ng-show=\"showTitle()\">{{form.title}}</label><div><label class=\"radio-inline\" ng-repeat=\"item in form.titleMap\"><input type=\"radio\" class=\"{{form.fieldHtmlClass}}\" sf-changed=\"form\" ng-disabled=\"form.readonly\" ng-model=\"$$value$$\" schema-validate=\"form\" ng-value=\"item.value\" name=\"{{form.key.join(\'.\')}}\"> <span ng-bind-html=\"item.name\"></span></label></div><div class=\"help-block\" sf-message=\"form.description\"></div></div>");
$templateCache.put("directives/decorators/bootstrap/radios.html","<div class=\"form-group schema-form-radios {{form.htmlClass}}\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess()}\"><label class=\"control-label {{form.labelHtmlClass}}\" ng-show=\"showTitle()\">{{form.title}}</label><div class=\"radio\" ng-repeat=\"item in form.titleMap\"><label><input type=\"radio\" class=\"{{form.fieldHtmlClass}}\" sf-changed=\"form\" ng-disabled=\"form.readonly\" ng-model=\"$$value$$\" ng-model-options=\"form.ngModelOptions\" schema-validate=\"form\" ng-value=\"item.value\" name=\"{{form.key.join(\'.\')}}\"> <span ng-bind-html=\"item.name\"></span></label></div><div class=\"help-block\" sf-message=\"form.description\"></div></div>");
$templateCache.put("directives/decorators/bootstrap/section.html","<div class=\"schema-form-section {{form.htmlClass}}\"><sf-decorator ng-repeat=\"item in form.items\" form=\"item\"></sf-decorator></div>");
$templateCache.put("directives/decorators/bootstrap/select.html","<div class=\"form-group {{form.htmlClass}} schema-form-select\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess(), \'has-feedback\': form.feedback !== false}\"><label class=\"control-label {{form.labelHtmlClass}}\" ng-show=\"showTitle()\">{{form.title}}</label><select ng-model=\"$$value$$\" ng-model-options=\"form.ngModelOptions\" ng-disabled=\"form.readonly\" sf-changed=\"form\" class=\"form-control {{form.fieldHtmlClass}}\" schema-validate=\"form\" ng-options=\"item.value as item.name group by item.group for item in form.titleMap\" name=\"{{form.key.slice(-1)[0]}}\"></select><div class=\"help-block\" sf-message=\"form.description\"></div></div>");
$templateCache.put("directives/decorators/bootstrap/submit.html","<div class=\"form-group schema-form-submit {{form.htmlClass}}\"><input type=\"submit\" class=\"btn {{ form.style || \'btn-primary\' }} {{form.fieldHtmlClass}}\" value=\"{{form.title}}\" ng-disabled=\"form.readonly\" ng-if=\"form.type === \'submit\'\"> <button class=\"btn {{ form.style || \'btn-default\' }}\" type=\"button\" ng-click=\"buttonClick($event,form)\" ng-disabled=\"form.readonly\" ng-if=\"form.type !== \'submit\'\"><span ng-if=\"form.icon\" class=\"{{form.icon}}\"></span> {{form.title}}</button></div>");
$templateCache.put("directives/decorators/bootstrap/tabarray.html","<div sf-array=\"form\" ng-init=\"selected = { tab: 0 }\" class=\"clearfix schema-form-tabarray schema-form-tabarray-{{form.tabType || \'left\'}} {{form.htmlClass}}\"><div ng-if=\"!form.tabType || form.tabType !== \'right\'\" ng-class=\"{\'col-xs-3\': !form.tabType || form.tabType === \'left\'}\"><ul class=\"nav nav-tabs\" ng-class=\"{ \'tabs-left\': !form.tabType || form.tabType === \'left\'}\"><li ng-repeat=\"item in modelArray track by $index\" ng-click=\"$event.preventDefault() || (selected.tab = $index)\" ng-class=\"{active: selected.tab === $index}\"><a href=\"#\">{{interp(form.title,{\'$index\':$index, value: item}) || $index}}</a></li><li ng-hide=\"form.readonly\" ng-click=\"$event.preventDefault() || (selected.tab = appendToArray().length - 1)\"><a href=\"#\"><i class=\"glyphicon glyphicon-plus\"></i> {{ form.add || \'Add\'}}</a></li></ul></div><div ng-class=\"{\'col-xs-9\': !form.tabType || form.tabType === \'left\' || form.tabType === \'right\'}\"><div class=\"tab-content {{form.fieldHtmlClass}}\"><div class=\"tab-pane clearfix\" ng-repeat=\"item in modelArray track by $index\" ng-show=\"selected.tab === $index\" ng-class=\"{active: selected.tab === $index}\"><sf-decorator ng-init=\"arrayIndex = $index\" form=\"copyWithIndex($index)\"></sf-decorator><button ng-hide=\"form.readonly\" ng-click=\"selected.tab = deleteFromArray($index).length - 1\" type=\"button\" class=\"btn {{ form.style.remove || \'btn-default\' }} pull-right\"><i class=\"glyphicon glyphicon-trash\"></i> {{ form.remove || \'Remove\'}}</button></div></div></div><div ng-if=\"form.tabType === \'right\'\" class=\"col-xs-3\"><ul class=\"nav nav-tabs tabs-right\"><li ng-repeat=\"item in modelArray track by $index\" ng-click=\"$event.preventDefault() || (selected.tab = $index)\" ng-class=\"{active: selected.tab === $index}\"><a href=\"#\">{{interp(form.title,{\'$index\':$index, value: item}) || $index}}</a></li><li ng-hide=\"form.readonly\" ng-click=\"$event.preventDefault() || appendToArray()\"><a href=\"#\"><i class=\"glyphicon glyphicon-plus\"></i> {{ form.add || \'Add\'}}</a></li></ul></div></div>");
$templateCache.put("directives/decorators/bootstrap/tabs.html","<div ng-init=\"selected = { tab: 0 }\" class=\"schema-form-tabs {{form.htmlClass}}\"><ul class=\"nav nav-tabs\"><li ng-repeat=\"tab in form.tabs\" ng-disabled=\"form.readonly\" ng-click=\"$event.preventDefault() || (selected.tab = $index)\" ng-class=\"{active: selected.tab === $index}\"><a href=\"#\">{{ tab.title }}</a></li></ul><div class=\"tab-content {{form.fieldHtmlClass}}\"><div class=\"tab-pane\" ng-disabled=\"form.readonly\" ng-repeat=\"tab in form.tabs\" ng-show=\"selected.tab === $index\" ng-class=\"{active: selected.tab === $index}\"><bootstrap-decorator ng-repeat=\"item in tab.items\" form=\"item\"></bootstrap-decorator></div></div></div>");
$templateCache.put("directives/decorators/bootstrap/textarea.html","<div class=\"form-group has-feedback {{form.htmlClass}} schema-form-textarea\" ng-class=\"{\'has-error\': form.disableErrorState !== true && hasError(), \'has-success\': form.disableSuccessState !== true && hasSuccess()}\"><label class=\"{{form.labelHtmlClass}}\" ng-class=\"{\'sr-only\': !showTitle()}\" for=\"{{form.key.slice(-1)[0]}}\">{{form.title}}</label> <textarea ng-if=\"!form.fieldAddonLeft && !form.fieldAddonRight\" class=\"form-control {{form.fieldHtmlClass}}\" id=\"{{form.key.slice(-1)[0]}}\" sf-changed=\"form\" placeholder=\"{{form.placeholder}}\" ng-disabled=\"form.readonly\" ng-model=\"$$value$$\" ng-model-options=\"form.ngModelOptions\" schema-validate=\"form\" name=\"{{form.key.slice(-1)[0]}}\"></textarea><div ng-if=\"form.fieldAddonLeft || form.fieldAddonRight\" ng-class=\"{\'input-group\': (form.fieldAddonLeft || form.fieldAddonRight)}\"><span ng-if=\"form.fieldAddonLeft\" class=\"input-group-addon\" ng-bind-html=\"form.fieldAddonLeft\"></span> <textarea class=\"form-control {{form.fieldHtmlClass}}\" id=\"{{form.key.slice(-1)[0]}}\" sf-changed=\"form\" placeholder=\"{{form.placeholder}}\" ng-disabled=\"form.readonly\" ng-model=\"$$value$$\" ng-model-options=\"form.ngModelOptions\" schema-validate=\"form\" name=\"{{form.key.slice(-1)[0]}}\"></textarea> <span ng-if=\"form.fieldAddonRight\" class=\"input-group-addon\" ng-bind-html=\"form.fieldAddonRight\"></span></div><span class=\"help-block\" sf-message=\"form.description\"></span></div>");}]);
angular.module('schemaForm').config(['schemaFormDecoratorsProvider', function(decoratorsProvider) {
var base = 'directives/decorators/bootstrap/';
decoratorsProvider.createDecorator('bootstrapDecorator', {
textarea: base + 'textarea.html',
fieldset: base + 'fieldset.html',
array: base + 'array.html',
tabarray: base + 'tabarray.html',
tabs: base + 'tabs.html',
section: base + 'section.html',
conditional: base + 'section.html',
actions: base + 'actions.html',
select: base + 'select.html',
checkbox: base + 'checkbox.html',
checkboxes: base + 'checkboxes.html',
number: base + 'default.html',
password: base + 'default.html',
submit: base + 'submit.html',
button: base + 'submit.html',
radios: base + 'radios.html',
'radios-inline': base + 'radios-inline.html',
radiobuttons: base + 'radio-buttons.html',
help: base + 'help.html',
'default': base + 'default.html'
}, []);
//manual use directives
decoratorsProvider.createDirectives({
textarea: base + 'textarea.html',
select: base + 'select.html',
checkbox: base + 'checkbox.html',
checkboxes: base + 'checkboxes.html',
number: base + 'default.html',
submit: base + 'submit.html',
button: base + 'submit.html',
text: base + 'default.html',
date: base + 'default.html',
password: base + 'default.html',
datepicker: base + 'datepicker.html',
input: base + 'default.html',
radios: base + 'radios.html',
'radios-inline': base + 'radios-inline.html',
radiobuttons: base + 'radio-buttons.html',
});
}]).directive('sfFieldset', function() {
return {
transclude: true,
scope: true,
templateUrl: 'directives/decorators/bootstrap/fieldset-trcl.html',
link: function(scope, element, attrs) {
scope.title = scope.$eval(attrs.title);
}
};
});
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define(['angular', 'ObjectPath', 'tv4'], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('angular'), require('ObjectPath'), require('tv4'));
} else {
root.schemaForm = factory(root.angular, root.ObjectPath, root.tv4);
}
}(this, function(angular, ObjectPath, tv4) {
// Deps is sort of a problem for us, maybe in the future we will ask the user to depend
// on modules for add-ons
var deps = [];
try {
//This throws an expection if module does not exist.
angular.module('ngSanitize');
deps.push('ngSanitize');
} catch (e) {}
try {
//This throws an expection if module does not exist.
angular.module('ui.sortable');
deps.push('ui.sortable');
} catch (e) {}
try {
//This throws an expection if module does not exist.
angular.module('angularSpectrumColorpicker');
deps.push('angularSpectrumColorpicker');
} catch (e) {}
var schemaForm = angular.module('schemaForm', deps);
angular.module('schemaForm').provider('sfPath',
[function() {
var sfPath = {parse: ObjectPath.parse};
// if we're on Angular 1.2.x, we need to continue using dot notation
if (angular.version.major === 1 && angular.version.minor < 3) {
sfPath.stringify = function(arr) {
return Array.isArray(arr) ? arr.join('.') : arr.toString();
};
} else {
sfPath.stringify = ObjectPath.stringify;
}
// We want this to use whichever stringify method is defined above,
// so we have to copy the code here.
sfPath.normalize = function(data, quote) {
return sfPath.stringify(Array.isArray(data) ? data : sfPath.parse(data), quote);
};
// expose the methods in sfPathProvider
this.parse = sfPath.parse;
this.stringify = sfPath.stringify;
this.normalize = sfPath.normalize;
this.$get = function() {
return sfPath;
};
}]);
/**
* @ngdoc service
* @name sfSelect
* @kind function
*
*/
angular.module('schemaForm').factory('sfSelect', ['sfPath', function(sfPath) {
var numRe = /^\d+$/;
/**
* @description
* Utility method to access deep properties without
* throwing errors when things are not defined.
* Can also set a value in a deep structure, creating objects when missing
* ex.
* var foo = Select('address.contact.name',obj)
* Select('address.contact.name',obj,'Leeroy')
*
* @param {string} projection A dot path to the property you want to get/set
* @param {object} obj (optional) The object to project on, defaults to 'this'
* @param {Any} valueToSet (opional) The value to set, if parts of the path of
* the projection is missing empty objects will be created.
* @returns {Any|undefined} returns the value at the end of the projection path
* or undefined if there is none.
*/
return function(projection, obj, valueToSet) {
if (!obj) {
obj = this;
}
//Support [] array syntax
var parts = typeof projection === 'string' ? sfPath.parse(projection) : projection;
if (typeof valueToSet !== 'undefined' && parts.length === 1) {
//special case, just setting one variable
obj[parts[0]] = valueToSet;
return obj;
}
if (typeof valueToSet !== 'undefined' &&
typeof obj[parts[0]] === 'undefined') {
// We need to look ahead to check if array is appropriate
obj[parts[0]] = parts.length > 2 && numRe.test(parts[1]) ? [] : {};
}
var value = obj[parts[0]];
for (var i = 1; i < parts.length; i++) {
// Special case: We allow JSON Form syntax for arrays using empty brackets
// These will of course not work here so we exit if they are found.
if (parts[i] === '') {
return undefined;
}
if (typeof valueToSet !== 'undefined') {
if (i === parts.length - 1) {
//last step. Let's set the value
value[parts[i]] = valueToSet;
return valueToSet;
} else {
// Make sure to create new objects on the way if they are not there.
// We need to look ahead to check if array is appropriate
var tmp = value[parts[i]];
if (typeof tmp === 'undefined' || tmp === null) {
tmp = numRe.test(parts[i + 1]) ? [] : {};
value[parts[i]] = tmp;
}
value = tmp;
}
} else if (value) {
//Just get nex value.
value = value[parts[i]];
}
}
return value;
};
}]);
angular.module('schemaForm').provider('schemaFormDecorators',
['$compileProvider', 'sfPathProvider', function($compileProvider, sfPathProvider) {
var defaultDecorator = '';
var directives = {};
var templateUrl = function(name, form) {
//schemaDecorator is alias for whatever is set as default
if (name === 'sfDecorator') {
name = defaultDecorator;
}
var directive = directives[name];
//rules first
var rules = directive.rules;
for (var i = 0; i < rules.length; i++) {
var res = rules[i](form);
if (res) {
return res;
}
}
//then check mapping
if (directive.mappings[form.type]) {
return directive.mappings[form.type];
}
//try default
return directive.mappings['default'];
};
var createDirective = function(name) {
$compileProvider.directive(name,
['$parse', '$compile', '$http', '$templateCache', '$interpolate', '$q', 'sfErrorMessage', 'sfPath',
function($parse, $compile, $http, $templateCache, $interpolate, $q, sfErrorMessage, sfPath) {
return {
restrict: 'AE',
replace: false,
transclude: false,
scope: true,
require: '?^sfSchema',
link: function(scope, element, attrs, sfSchema) {
//The ngModelController is used in some templates and
//is needed for error messages,
scope.$on('schemaFormPropagateNgModelController', function(event, ngModel) {
event.stopPropagation();
event.preventDefault();
scope.ngModel = ngModel;
});
//Keep error prone logic from the template
scope.showTitle = function() {
return scope.form && scope.form.notitle !== true && scope.form.title;
};
scope.listToCheckboxValues = function(list) {
var values = {};
angular.forEach(list, function(v) {
values[v] = true;
});
return values;
};
scope.checkboxValuesToList = function(values) {
var lst = [];
angular.forEach(values, function(v, k) {
if (v) {
lst.push(k);
}
});
return lst;
};
scope.buttonClick = function($event, form) {
if (angular.isFunction(form.onClick)) {
form.onClick($event, form);
} else if (angular.isString(form.onClick)) {
if (sfSchema) {
//evaluating in scope outside of sfSchemas isolated scope
sfSchema.evalInParentScope(form.onClick, {'$event': $event, form: form});
} else {
scope.$eval(form.onClick, {'$event': $event, form: form});
}
}
};
/**
* Evaluate an expression, i.e. scope.$eval
* but do it in sfSchemas parent scope sf-schema directive is used
* @param {string} expression
* @param {Object} locals (optional)
* @return {Any} the result of the expression
*/
scope.evalExpr = function(expression, locals) {
if (sfSchema) {
//evaluating in scope outside of sfSchemas isolated scope
return sfSchema.evalInParentScope(expression, locals);
}
return scope.$eval(expression, locals);
};
/**
* Evaluate an expression, i.e. scope.$eval
* in this decorators scope
* @param {string} expression
* @param {Object} locals (optional)
* @return {Any} the result of the expression
*/
scope.evalInScope = function(expression, locals) {
if (expression) {
return scope.$eval(expression, locals);
}
};
/**
* Interpolate the expression.
* Similar to `evalExpr()` and `evalInScope()`
* but will not fail if the expression is
* text that contains spaces.
*
* Use the Angular `{{ interpolation }}`
* braces to access properties on `locals`.
*
* @param {string} content The string to interpolate.
* @param {Object} locals (optional) Properties that may be accessed in the
* `expression` string.
* @return {Any} The result of the expression or `undefined`.
*/
scope.interp = function(expression, locals) {
return (expression && $interpolate(expression)(locals));
};
//This works since we ot the ngModel from the array or the schema-validate directive.
scope.hasSuccess = function() {
if (!scope.ngModel) {
return false;
}
return scope.ngModel.$valid &&
(!scope.ngModel.$pristine || !scope.ngModel.$isEmpty(scope.ngModel.$modelValue));
};
scope.hasError = function() {
if (!scope.ngModel) {
return false;
}
return scope.ngModel.$invalid && !scope.ngModel.$pristine;
};
/**
* DEPRECATED: use sf-messages instead.
* Error message handler
* An error can either be a schema validation message or a angular js validtion
* error (i.e. required)
*/
scope.errorMessage = function(schemaError) {
return sfErrorMessage.interpolate(
(schemaError && schemaError.code + '') || 'default',
(scope.ngModel && scope.ngModel.$modelValue) || '',
(scope.ngModel && scope.ngModel.$viewValue) || '',
scope.form,
scope.options && scope.options.validationMessage
);
};
// Rebind our part of the form to the scope.
var once = scope.$watch(attrs.form, function(form) {
if (form) {
// Workaround for 'updateOn' error from ngModelOptions
// see https://github.com/Textalk/angular-schema-form/issues/255
// and https://github.com/Textalk/angular-schema-form/issues/206
form.ngModelOptions = form.ngModelOptions || {};
scope.form = form;
//ok let's replace that template!
//We do this manually since we need to bind ng-model properly and also
//for fieldsets to recurse properly.
var templatePromise;
// type: "template" is a special case. It can contain a template inline or an url.
// otherwise we find out the url to the template and load them.
if (form.type === 'template' && form.template) {
templatePromise = $q.when(form.template);
} else {
var url = form.type === 'template' ? form.templateUrl : templateUrl(name, form);
templatePromise = $http.get(url, {cache: $templateCache}).then(function(res) {
return res.data;
});
}
templatePromise.then(function(template) {
if (form.key) {
var key = form.key ?
sfPathProvider.stringify(form.key).replace(/"/g, '"') : '';
template = template.replace(
/\$\$value\$\$/g,
'model' + (key[0] !== '[' ? '.' : '') + key
);
}
element.html(template);
// Do we have a condition? Then we slap on an ng-if on all children,
// but be nice to existing ng-if.
if (form.condition) {
var evalExpr = 'evalExpr(form.condition,{ model: model, "arrayIndex": arrayIndex})';
if (form.key) {
evalExpr = 'evalExpr(form.condition,{ model: model, "arrayIndex": arrayIndex, "modelValue": model' + sfPath.stringify(form.key) + '})';
}
angular.forEach(element.children(), function(child) {
var ngIf = child.getAttribute('ng-if');
child.setAttribute(
'ng-if',
ngIf ?
'(' + ngIf +
') || (' + evalExpr +')'
: evalExpr
);
});
}
$compile(element.contents())(scope);
});
// Where there is a key there is probably a ngModel
if (form.key) {
// It looks better with dot notation.
scope.$on(
'schemaForm.error.' + form.key.join('.'),
function(event, error, validationMessage, validity) {
if (validationMessage === true || validationMessage === false) {
validity = validationMessage;
validationMessage = undefined;
}
if (scope.ngModel && error) {
if (scope.ngModel.$setDirty()) {
scope.ngModel.$setDirty();
} else {
// FIXME: Check that this actually works on 1.2
scope.ngModel.$dirty = true;
scope.ngModel.$pristine = false;
}
// Set the new validation message if one is supplied
// Does not work when validationMessage is just a string.
if (validationMessage) {
if (!form.validationMessage) {
form.validationMessage = {};
}
form.validationMessage[error] = validationMessage;
}
scope.ngModel.$setValidity(error, validity === true);
if (validity === true) {
// Setting or removing a validity can change the field to believe its valid
// but its not. So lets trigger its validation as well.
scope.$broadcast('schemaFormValidate');
}
}
})
}
once();
}
});
}
};
}
]);
};
var createManualDirective = function(type, templateUrl, transclude) {
transclude = angular.isDefined(transclude) ? transclude : false;
$compileProvider.directive('sf' + angular.uppercase(type[0]) + type.substr(1), function() {
return {
restrict: 'EAC',
scope: true,
replace: true,
transclude: transclude,
template: '<sf-decorator form="form"></sf-decorator>',
link: function(scope, element, attrs) {
var watchThis = {
'items': 'c',
'titleMap': 'c',
'schema': 'c'
};
var form = {type: type};
var once = true;
angular.forEach(attrs, function(value, name) {
if (name[0] !== '$' && name.indexOf('ng') !== 0 && name !== 'sfField') {
var updateForm = function(val) {
if (angular.isDefined(val) && val !== form[name]) {
form[name] = val;
//when we have type, and if specified key we apply it on scope.
if (once && form.type && (form.key || angular.isUndefined(attrs.key))) {
scope.form = form;
once = false;
}
}
};
if (name === 'model') {
//"model" is bound to scope under the name "model" since this is what the decorators
//know and love.
scope.$watch(value, function(val) {
if (val && scope.model !== val) {
scope.model = val;
}
});
} else if (watchThis[name] === 'c') {
//watch collection
scope.$watchCollection(value, updateForm);
} else {
//$observe
attrs.$observe(name, updateForm);
}
}
});
}
};
});
};
/**
* Create a decorator directive and its sibling "manual" use directives.
* The directive can be used to create form fields or other form entities.
* It can be used in conjunction with <schema-form> directive in which case the decorator is
* given it's configuration via a the "form" attribute.
*
* ex. Basic usage
* <sf-decorator form="myform"></sf-decorator>
**
* @param {string} name directive name (CamelCased)
* @param {Object} mappings, an object that maps "type" => "templateUrl"
* @param {Array} rules (optional) a list of functions, function(form) {}, that are each tried in
* turn,
* if they return a string then that is used as the templateUrl. Rules come before
* mappings.
*/
this.createDecorator = function(name, mappings, rules) {
directives[name] = {
mappings: mappings || {},
rules: rules || []
};
if (!directives[defaultDecorator]) {
defaultDecorator = name;
}
createDirective(name);
};
/**
* Creates a directive of a decorator
* Usable when you want to use the decorators without using <schema-form> directive.
* Specifically when you need to reuse styling.
*
* ex. createDirective('text','...')
* <sf-text title="foobar" model="person" key="name" schema="schema"></sf-text>
*
* @param {string} type The type of the directive, resulting directive will have sf- prefixed
* @param {string} templateUrl
* @param {boolean} transclude (optional) sets transclude option of directive, defaults to false.
*/
this.createDirective = createManualDirective;
/**
* Same as createDirective, but takes an object where key is 'type' and value is 'templateUrl'
* Useful for batching.
* @param {Object} mappings
*/
this.createDirectives = function(mappings) {
angular.forEach(mappings, function(url, type) {
createManualDirective(type, url);
});
};
/**
* Getter for directive mappings
* Can be used to override a mapping or add a rule
* @param {string} name (optional) defaults to defaultDecorator
* @return {Object} rules and mappings { rules: [],mappings: {}}
*/
this.directive = function(name) {
name = name || defaultDecorator;
return directives[name];
};
/**
* Adds a mapping to an existing decorator.
* @param {String} name Decorator name
* @param {String} type Form type for the mapping
* @param {String} url The template url
*/
this.addMapping = function(name, type, url) {
if (directives[name]) {
directives[name].mappings[type] = url;
}
};
//Service is just a getter for directive mappings and rules
this.$get = function() {
return {
directive: function(name) {
return directives[name];
},
defaultDecorator: defaultDecorator
};
};
//Create a default directive
createDirective('sfDecorator');
}]);
angular.module('schemaForm').provider('sfErrorMessage', function() {
// The codes are tv4 error codes.
// Not all of these can actually happen in a field, but for
// we never know when one might pop up so it's best to cover them all.
// TODO: Humanize these.
var defaultMessages = {
'default': 'Field does not validate',
0: 'Invalid type, expected {{schema.type}}',
1: 'No enum match for: {{value}}',
10: 'Data does not match any schemas from "anyOf"',
11: 'Data does not match any schemas from "oneOf"',
12: 'Data is valid against more than one schema from "oneOf"',
13: 'Data matches schema from "not"',
// Numeric errors
100: 'Value is not a multiple of {{schema.divisibleBy}}',
101: '{{viewValue}} is less than the allowed minimum of {{schema.minimum}}',
102: '{{viewValue}} is equal to the exclusive minimum {{schema.minimum}}',
103: '{{viewValue}} is greater than the allowed maximum of {{schema.maximum}}',
104: '{{viewValue}} is equal to the exclusive maximum {{schema.maximum}}',
105: 'Value is not a valid number',
// String errors
200: 'String is too short ({{viewValue.length}} chars), minimum {{schema.minLength}}',
201: 'String is too long ({{viewValue.length}} chars), maximum {{schema.maxLength}}',
202: 'String does not match pattern: {{schema.pattern}}',
// Object errors
300: 'Too few properties defined, minimum {{schema.minProperties}}',
301: 'Too many properties defined, maximum {{schema.maxProperties}}',
302: 'Required',
303: 'Additional properties not allowed',
304: 'Dependency failed - key must exist',
// Array errors
400: 'Array is too short ({{value.length}}), minimum {{schema.maxItems}}',
401: 'Array is too long ({{value.length}}), maximum {{schema.minItems}}',
402: 'Array items are not unique',
403: 'Additional items not allowed',
// Format errors
500: 'Format validation failed',
501: 'Keyword failed: "{{title}}"',
// Schema structure
600: 'Circular $refs',
// Non-standard validation options
1000: 'Unknown property (not in schema)'
};
// In some cases we get hit with an angular validation error
defaultMessages.number = defaultMessages[105];
defaultMessages.required = defaultMessages[302];
defaultMessages.min = defaultMessages[101];
defaultMessages.max = defaultMessages[103];
defaultMessages.maxlength = defaultMessages[201];
defaultMessages.minlength = defaultMessages[200];
defaultMessages.pattern = defaultMessages[202];
this.setDefaultMessages = function(messages) {
defaultMessages = messages;
};
this.getDefaultMessages = function() {
return defaultMessages;
};
this.setDefaultMessage = function(error, msg) {
defaultMessages[error] = msg;
};
this.$get = ['$interpolate', function($interpolate) {
var service = {};
service.defaultMessages = defaultMessages;
/**
* Interpolate and return proper error for an eror code.
* Validation message on form trumps global error messages.
* and if the message is a function instead of a string that function will be called instead.
* @param {string} error the error code, i.e. tv4-xxx for tv4 errors, otherwise it's whats on
* ngModel.$error for custom errors.
* @param {Any} value the actual model value.
* @param {Any} viewValue the viewValue
* @param {Object} form a form definition object for this field
* @param {Object} global the global validation messages object (even though its called global
* its actually just shared in one instance of sf-schema)
* @return {string} The error message.
*/
service.interpolate = function(error, value, viewValue, form, global) {
global = global || {};
var validationMessage = form.validationMessage || {};
// Drop tv4 prefix so only the code is left.
if (error.indexOf('tv4-') === 0) {
error = error.substring(4);
}
// First find apropriate message or function
var message = validationMessage['default'] || global['default'] || '';
[validationMessage, global, defaultMessages].some(function(val) {
if (angular.isString(val) || angular.isFunction(val)) {
message = val;
return true;
}
if (val && val[error]) {
message = val[error];
return true;
}
});
var context = {
error: error,
value: value,
viewValue: viewValue,
form: form,
schema: form.schema,
title: form.title || (form.schema && form.schema.title)
};
if (angular.isFunction(message)) {
return message(context);
} else {
return $interpolate(message)(context);
}
};
return service;
}];
});
/**
* Schema form service.
* This service is not that useful outside of schema form directive
* but makes the code more testable.
*/
angular.module('schemaForm').provider('schemaForm',
['sfPathProvider', function(sfPathProvider) {
var stripNullType = function(type) {
if (Array.isArray(type) && type.length == 2) {
if (type[0] === 'null')
return type[1];
if (type[1] === 'null')
return type[0];
}
return type;
}
//Creates an default titleMap list from an enum, i.e. a list of strings.
var enumToTitleMap = function(enm) {
var titleMap = []; //canonical titleMap format is a list.
enm.forEach(function(name) {
titleMap.push({name: name, value: name});
});
return titleMap;
};
// Takes a titleMap in either object or list format and returns one in
// in the list format.
var canonicalTitleMap = function(titleMap, originalEnum) {
if (!angular.isArray(titleMap)) {
var canonical = [];
if (originalEnum) {
angular.forEach(originalEnum, function(value, index) {
canonical.push({name: titleMap[value], value: value});
});
} else {
angular.forEach(titleMap, function(name, value) {
canonical.push({name: name, value: value});
});
}
return canonical;
}
return titleMap;
};
var defaultFormDefinition = function(name, schema, options) {
var rules = defaults[stripNullType(schema.type)];
if (rules) {
var def;
for (var i = 0; i < rules.length; i++) {
def = rules[i](name, schema, options);
//first handler in list that actually returns something is our handler!
if (def) {
// Do we have form defaults in the schema under the x-schema-form-attribute?
if (def.schema['x-schema-form'] && angular.isObject(def.schema['x-schema-form'])) {
def = angular.extend(def, def.schema['x-schema-form']);
}
return def;
}
}
}
};
//Creates a form object with all common properties
var stdFormObj = function(name, schema, options) {
options = options || {};
var f = options.global && options.global.formDefaults ?
angular.copy(options.global.formDefaults) : {};
if (options.global && options.global.supressPropertyTitles === true) {
f.title = schema.title;
} else {
f.title = schema.title || name;
}
if (schema.description) { f.description = schema.description; }
if (options.required === true || schema.required === true) { f.required = true; }
if (schema.maxLength) { f.maxlength = schema.maxLength; }
if (schema.minLength) { f.minlength = schema.maxLength; }
if (schema.readOnly || schema.readonly) { f.readonly = true; }
if (schema.minimum) { f.minimum = schema.minimum + (schema.exclusiveMinimum ? 1 : 0); }
if (schema.maximum) { f.maximum = schema.maximum - (schema.exclusiveMaximum ? 1 : 0); }
// Non standard attributes (DONT USE DEPRECATED)
// If you must set stuff like this in the schema use the x-schema-form attribute
if (schema.validationMessage) { f.validationMessage = schema.validationMessage; }
if (schema.enumNames) { f.titleMap = canonicalTitleMap(schema.enumNames, schema['enum']); }
f.schema = schema;
// Ng model options doesn't play nice with undefined, might be defined
// globally though
f.ngModelOptions = f.ngModelOptions || {};
return f;
};
var text = function(name, schema, options) {
if (stripNullType(schema.type) === 'string' && !schema['enum']) {
var f = stdFormObj(name, schema, options);
f.key = options.path;
f.type = 'text';
options.lookup[sfPathProvider.stringify(options.path)] = f;
return f;
}
};
//default in json form for number and integer is a text field
//input type="number" would be more suitable don't ya think?
var number = function(name, schema, options) {
if (stripNullType(schema.type) === 'number') {
var f = stdFormObj(name, schema, options);
f.key = options.path;
f.type = 'number';
options.lookup[sfPathProvider.stringify(options.path)] = f;
return f;
}
};
var integer = function(name, schema, options) {
if (stripNullType(schema.type) === 'integer') {
var f = stdFormObj(name, schema, options);
f.key = options.path;
f.type = 'number';
options.lookup[sfPathProvider.stringify(options.path)] = f;
return f;
}
};
var checkbox = function(name, schema, options) {
if (stripNullType(schema.type) === 'boolean') {
var f = stdFormObj(name, schema, options);
f.key = options.path;
f.type = 'checkbox';
options.lookup[sfPathProvider.stringify(options.path)] = f;
return f;
}
};
var select = function(name, schema, options) {
if (stripNullType(schema.type) === 'string' && schema['enum']) {
var f = stdFormObj(name, schema, options);
f.key = options.path;
f.type = 'select';
if (!f.titleMap) {
f.titleMap = enumToTitleMap(schema['enum']);
}
options.lookup[sfPathProvider.stringify(options.path)] = f;
return f;
}
};
var checkboxes = function(name, schema, options) {
if (stripNullType(schema.type) === 'array' && schema.items && schema.items['enum']) {
var f = stdFormObj(name, schema, options);
f.key = options.path;
f.type = 'checkboxes';
if (!f.titleMap) {
f.titleMap = enumToTitleMap(schema.items['enum']);
}
options.lookup[sfPathProvider.stringify(options.path)] = f;
return f;
}
};
var fieldset = function(name, schema, options) {
if (stripNullType(schema.type) === 'object') {
var f = stdFormObj(name, schema, options);
f.type = 'fieldset';
f.items = [];
options.lookup[sfPathProvider.stringify(options.path)] = f;
//recurse down into properties
angular.forEach(schema.properties, function(v, k) {
var path = options.path.slice();
path.push(k);
if (options.ignore[sfPathProvider.stringify(path)] !== true) {
var required = schema.required && schema.required.indexOf(k) !== -1;
var def = defaultFormDefinition(k, v, {
path: path,
required: required || false,
lookup: options.lookup,
ignore: options.ignore
});
if (def) {
f.items.push(def);
}
}
});
return f;
}
};
var array = function(name, schema, options) {
if (stripNullType(schema.type) === 'array') {
var f = stdFormObj(name, schema, options);
f.type = 'array';
f.key = options.path;
options.lookup[sfPathProvider.stringify(options.path)] = f;
var required = schema.required &&
schema.required.indexOf(options.path[options.path.length - 1]) !== -1;
// The default is to always just create one child. This works since if the
// schemas items declaration is of type: "object" then we get a fieldset.
// We also follow json form notatation, adding empty brackets "[]" to
// signify arrays.
var arrPath = options.path.slice();
arrPath.push('');
f.items = [defaultFormDefinition(name, schema.items, {
path: arrPath,
required: required || false,
lookup: options.lookup,
ignore: options.ignore,
global: options.global
})];
return f;
}
};
//First sorted by schema type then a list.
//Order has importance. First handler returning an form snippet will be used.
var defaults = {
string: [select, text],
object: [fieldset],
number: [number],
integer: [integer],
boolean: [checkbox],
array: [checkboxes, array]
};
var postProcessFn = function(form) { return form; };
/**
* Provider API
*/
this.defaults = defaults;
this.stdFormObj = stdFormObj;
this.defaultFormDefinition = defaultFormDefinition;
/**
* Register a post process function.
* This function is called with the fully merged
* form definition (i.e. after merging with schema)
* and whatever it returns is used as form.
*/
this.postProcess = function(fn) {
postProcessFn = fn;
};
/**
* Append default form rule
* @param {string} type json schema type
* @param {Function} rule a function(propertyName,propertySchema,options) that returns a form
* definition or undefined
*/
this.appendRule = function(type, rule) {
if (!defaults[type]) {
defaults[type] = [];
}
defaults[type].push(rule);
};
/**
* Prepend default form rule
* @param {string} type json schema type
* @param {Function} rule a function(propertyName,propertySchema,options) that returns a form
* definition or undefined
*/
this.prependRule = function(type, rule) {
if (!defaults[type]) {
defaults[type] = [];
}
defaults[type].unshift(rule);
};
/**
* Utility function to create a standard form object.
* This does *not* set the type of the form but rather all shared attributes.
* You probably want to start your rule with creating the form with this method
* then setting type and any other values you need.
* @param {Object} schema
* @param {Object} options
* @return {Object} a form field defintion
*/
this.createStandardForm = stdFormObj;
/* End Provider API */
this.$get = function() {
var service = {};
service.merge = function(schema, form, ignore, options, readonly) {
form = form || ['*'];
options = options || {};
// Get readonly from root object
readonly = readonly || schema.readonly || schema.readOnly;
var stdForm = service.defaults(schema, ignore, options);
//simple case, we have a "*", just put the stdForm there
var idx = form.indexOf('*');
if (idx !== -1) {
form = form.slice(0, idx)
.concat(stdForm.form)
.concat(form.slice(idx + 1));
}
//ok let's merge!
//We look at the supplied form and extend it with schema standards
var lookup = stdForm.lookup;
return postProcessFn(form.map(function(obj) {
//handle the shortcut with just a name
if (typeof obj === 'string') {
obj = {key: obj};
}
if (obj.key) {
if (typeof obj.key === 'string') {
obj.key = sfPathProvider.parse(obj.key);
}
}
//If it has a titleMap make sure it's a list
if (obj.titleMap) {
obj.titleMap = canonicalTitleMap(obj.titleMap);
}
//
if (obj.itemForm) {
obj.items = [];
var str = sfPathProvider.stringify(obj.key);
var stdForm = lookup[str];
angular.forEach(stdForm.items, function(item) {
var o = angular.copy(obj.itemForm);
o.key = item.key;
obj.items.push(o);
});
}
//extend with std form from schema.
if (obj.key) {
var strid = sfPathProvider.stringify(obj.key);
if (lookup[strid]) {
var schemaDefaults = lookup[strid];
angular.forEach(schemaDefaults, function(value, attr) {
if (obj[attr] === undefined) {
obj[attr] = schemaDefaults[attr];
}
});
}
}
// Are we inheriting readonly?
if (readonly === true) { // Inheriting false is not cool.
obj.readonly = true;
}
//if it's a type with items, merge 'em!
if (obj.items) {
obj.items = service.merge(schema, obj.items, ignore, options, obj.readonly);
}
//if its has tabs, merge them also!
if (obj.tabs) {
angular.forEach(obj.tabs, function(tab) {
tab.items = service.merge(schema, tab.items, ignore, options, obj.readonly);
});
}
// Special case: checkbox
// Since have to ternary state we need a default
if (obj.type === 'checkbox' && angular.isUndefined(obj.schema['default'])) {
obj.schema['default'] = false;
}
return obj;
}));
};
/**
* Create form defaults from schema
*/
service.defaults = function(schema, ignore, globalOptions) {
var form = [];
var lookup = {}; //Map path => form obj for fast lookup in merging
ignore = ignore || {};
globalOptions = globalOptions || {};
if (stripNullType(schema.type) === 'object') {
angular.forEach(schema.properties, function(v, k) {
if (ignore[k] !== true) {
var required = schema.required && schema.required.indexOf(k) !== -1;
var def = defaultFormDefinition(k, v, {
path: [k], // Path to this property in bracket notation.
lookup: lookup, // Extra map to register with. Optimization for merger.
ignore: ignore, // The ignore list of paths (sans root level name)
required: required, // Is it required? (v4 json schema style)
global: globalOptions // Global options, including form defaults
});
if (def) {
form.push(def);
}
}
});
} else {
throw new Error('Not implemented. Only type "object" allowed at root level of schema.');
}
return {form: form, lookup: lookup};
};
//Utility functions
/**
* Traverse a schema, applying a function(schema,path) on every sub schema
* i.e. every property of an object.
*/
service.traverseSchema = function(schema, fn, path, ignoreArrays) {
ignoreArrays = angular.isDefined(ignoreArrays) ? ignoreArrays : true;
path = path || [];
var traverse = function(schema, fn, path) {
fn(schema, path);
angular.forEach(schema.properties, function(prop, name) {
var currentPath = path.slice();
currentPath.push(name);
traverse(prop, fn, currentPath);
});
//Only support type "array" which have a schema as "items".
if (!ignoreArrays && schema.items) {
var arrPath = path.slice(); arrPath.push('');
traverse(schema.items, fn, arrPath);
}
};
traverse(schema, fn, path || []);
};
service.traverseForm = function(form, fn) {
fn(form);
angular.forEach(form.items, function(f) {
service.traverseForm(f, fn);
});
if (form.tabs) {
angular.forEach(form.tabs, function(tab) {
angular.forEach(tab.items, function(f) {
service.traverseForm(f, fn);
});
});
}
};
return service;
};
}]);
/* Common code for validating a value against its form and schema definition */
/* global tv4 */
angular.module('schemaForm').factory('sfValidator', [function() {
var validator = {};
/**
* Validate a value against its form definition and schema.
* The value should either be of proper type or a string, some type
* coercion is applied.
*
* @param {Object} form A merged form definition, i.e. one with a schema.
* @param {Any} value the value to validate.
* @return a tv4js result object.
*/
validator.validate = function(form, value) {
if (!form) {
return {valid: true};
}
var schema = form.schema;
if (!schema) {
return {valid: true};
}
// Input of type text and textareas will give us a viewValue of ''
// when empty, this is a valid value in a schema and does not count as something
// that breaks validation of 'required'. But for our own sanity an empty field should
// not validate if it's required.
if (value === '') {
value = undefined;
}
// Numbers fields will give a null value, which also means empty field
if (form.type === 'number' && value === null) {
value = undefined;
}
// Version 4 of JSON Schema has the required property not on the
// property itself but on the wrapping object. Since we like to test
// only this property we wrap it in a fake object.
var wrap = {type: 'object', 'properties': {}};
var propName = form.key[form.key.length - 1];
wrap.properties[propName] = schema;
if (form.required) {
wrap.required = [propName];
}
var valueWrap = {};
if (angular.isDefined(value)) {
valueWrap[propName] = value;
}
return tv4.validateResult(valueWrap, wrap);
};
return validator;
}]);
/**
* Directive that handles the model arrays
*/
angular.module('schemaForm').directive('sfArray', ['sfSelect', 'schemaForm', 'sfValidator', 'sfPath',
function(sfSelect, schemaForm, sfValidator, sfPath) {
var setIndex = function(index) {
return function(form) {
if (form.key) {
form.key[form.key.indexOf('')] = index;
}
};
};
return {
restrict: 'A',
scope: true,
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
var formDefCache = {};
if (ngModel) {
// We need the ngModelController on several places,
// most notably for errors.
// So we emit it up to the decorator directive so it can put it on scope.
scope.$emit('schemaFormPropagateNgModelController', ngModel);
}
// Watch for the form definition and then rewrite it.
// It's the (first) array part of the key, '[]' that needs a number
// corresponding to an index of the form.
var once = scope.$watch(attrs.sfArray, function(form) {
// An array model always needs a key so we know what part of the model
// to look at. This makes us a bit incompatible with JSON Form, on the
// other hand it enables two way binding.
var list = sfSelect(form.key, scope.model);
// We only modify the same array instance but someone might change the array from
// the outside so let's watch for that. We use an ordinary watch since the only case
// we're really interested in is if its a new instance.
scope.$watch('model' + sfPath.normalize(form.key), function() {
list = sfSelect(form.key, scope.model);
scope.modelArray = list;
});
// Since ng-model happily creates objects in a deep path when setting a
// a value but not arrays we need to create the array.
if (angular.isUndefined(list)) {
list = [];
sfSelect(form.key, scope.model, list);
}
scope.modelArray = list;
// Arrays with titleMaps, i.e. checkboxes doesn't have items.
if (form.items) {
// To be more compatible with JSON Form we support an array of items
// in the form definition of "array" (the schema just a value).
// for the subforms code to work this means we wrap everything in a
// section. Unless there is just one.
var subForm = form.items[0];
if (form.items.length > 1) {
subForm = {
type: 'section',
items: form.items.map(function(item) {
item.ngModelOptions = form.ngModelOptions;
if (angular.isUndefined(item.readonly)) {
item.readonly = form.readonly;
}
return item;
})
};
}
}
// We ceate copies of the form on demand, caching them for
// later requests
scope.copyWithIndex = function(index) {
if (!formDefCache[index]) {
if (subForm) {
var copy = angular.copy(subForm);
copy.arrayIndex = index;
schemaForm.traverseForm(copy, setIndex(index));
formDefCache[index] = copy;
}
}
return formDefCache[index];
};
scope.appendToArray = function() {
var len = list.length;
var copy = scope.copyWithIndex(len);
schemaForm.traverseForm(copy, function(part) {
if (part.key) {
var def;
if (angular.isDefined(part['default'])) {
def = part['default'];
}
if (angular.isDefined(part.schema) &&
angular.isDefined(part.schema['default'])) {
def = part.schema['default'];
}
if (angular.isDefined(def)) {
sfSelect(part.key, scope.model, def);
}
}
});
// If there are no defaults nothing is added so we need to initialize
// the array. undefined for basic values, {} or [] for the others.
if (len === list.length) {
var type = sfSelect('schema.items.type', form);
var dflt;
if (type === 'object') {
dflt = {};
} else if (type === 'array') {
dflt = [];
}
list.push(dflt);
}
// Trigger validation.
if (scope.validateArray) {
scope.validateArray();
}
return list;
};
scope.deleteFromArray = function(index) {
list.splice(index, 1);
// Trigger validation.
if (scope.validateArray) {
scope.validateArray();
}
// Angular 1.2 lacks setDirty
if (ngModel && ngModel.$setDirty) {
ngModel.$setDirty();
}
return list;
};
// Always start with one empty form unless configured otherwise.
// Special case: don't do it if form has a titleMap
if (!form.titleMap && form.startEmpty !== true && list.length === 0) {
scope.appendToArray();
}
// Title Map handling
// If form has a titleMap configured we'd like to enable looping over
// titleMap instead of modelArray, this is used for intance in
// checkboxes. So instead of variable number of things we like to create
// a array value from a subset of values in the titleMap.
// The problem here is that ng-model on a checkbox doesn't really map to
// a list of values. This is here to fix that.
if (form.titleMap && form.titleMap.length > 0) {
scope.titleMapValues = [];
// We watch the model for changes and the titleMapValues to reflect
// the modelArray
var updateTitleMapValues = function(arr) {
scope.titleMapValues = [];
arr = arr || [];
form.titleMap.forEach(function(item) {
scope.titleMapValues.push(arr.indexOf(item.value) !== -1);
});
};
//Catch default values
updateTitleMapValues(scope.modelArray);
scope.$watchCollection('modelArray', updateTitleMapValues);
//To get two way binding we also watch our titleMapValues
scope.$watchCollection('titleMapValues', function(vals) {
if (vals) {
var arr = scope.modelArray;
// Apparently the fastest way to clear an array, readable too.
// http://jsperf.com/array-destroy/32
while (arr.length > 0) {
arr.pop();
}
form.titleMap.forEach(function(item, index) {
if (vals[index]) {
arr.push(item.value);
}
});
}
});
}
// If there is a ngModel present we need to validate when asked.
if (ngModel) {
var error;
scope.validateArray = function() {
// The actual content of the array is validated by each field
// so we settle for checking validations specific to arrays
// Since we prefill with empty arrays we can get the funny situation
// where the array is required but empty in the gui but still validates.
// Thats why we check the length.
var result = sfValidator.validate(
form,
scope.modelArray.length > 0 ? scope.modelArray : undefined
);
// TODO: DRY this up, it has a lot of similarities with schema-validate
// Since we might have different tv4 errors we must clear all
// errors that start with tv4-
Object.keys(ngModel.$error)
.filter(function(k) { return k.indexOf('tv4-') === 0; })
.forEach(function(k) { ngModel.$setValidity(k, true); });
if (result.valid === false &&
result.error &&
(result.error.dataPath === '' ||
result.error.dataPath === '/' + form.key[form.key.length - 1])) {
// Set viewValue to trigger $dirty on field. If someone knows a
// a better way to do it please tell.
ngModel.$setViewValue(scope.modelArray);
error = result.error;
ngModel.$setValidity('tv4-' + result.error.code, false);
}
};
scope.$on('schemaFormValidate', scope.validateArray);
scope.hasSuccess = function() {
return ngModel.$valid && !ngModel.$pristine;
};
scope.hasError = function() {
return ngModel.$invalid;
};
scope.schemaError = function() {
return error;
};
}
once();
});
}
};
}
]);
/**
* A version of ng-changed that only listens if
* there is actually a onChange defined on the form
*
* Takes the form definition as argument.
* If the form definition has a "onChange" defined as either a function or
*/
angular.module('schemaForm').directive('sfChanged', function() {
return {
require: 'ngModel',
restrict: 'AC',
scope: false,
link: function(scope, element, attrs, ctrl) {
var form = scope.$eval(attrs.sfChanged);
//"form" is really guaranteed to be here since the decorator directive
//waits for it. But best be sure.
if (form && form.onChange) {
ctrl.$viewChangeListeners.push(function() {
if (angular.isFunction(form.onChange)) {
form.onChange(ctrl.$modelValue, form);
} else {
scope.evalExpr(form.onChange, {'modelValue': ctrl.$modelValue, form: form});
}
});
}
}
};
});
angular.module('schemaForm').directive('sfMessage',
['$injector', 'sfErrorMessage', function($injector, sfErrorMessage) {
return {
scope: false,
restrict: 'EA',
link: function(scope, element, attrs) {
//Inject sanitizer if it exists
var $sanitize = $injector.has('$sanitize') ?
$injector.get('$sanitize') : function(html) { return html; };
//Prepare and sanitize message, i.e. description in most cases.
var msg = '';
if (attrs.sfMessage) {
msg = scope.$eval(attrs.sfMessage) || '';
msg = $sanitize(msg);
}
var update = function(valid) {
if (valid && !scope.hasError()) {
element.html(msg);
} else {
var errors = Object.keys(
(scope.ngModel && scope.ngModel.$error) || {}
);
// We only show one error.
// TODO: Make that optional
var error = errors[0];
if (error) {
element.html(sfErrorMessage.interpolate(
error,
scope.ngModel.$modelValue,
scope.ngModel.$viewValue,
scope.form,
scope.options && scope.options.validationMessage
));
} else {
element.html(msg);
}
}
};
update();
scope.$watchCollection('ngModel.$error', function() {
if (scope.ngModel) {
update(scope.ngModel.$valid);
}
});
}
};
}]);
/*
FIXME: real documentation
<form sf-form="form" sf-schema="schema" sf-decorator="foobar"></form>
*/
angular.module('schemaForm')
.directive('sfSchema',
['$compile', 'schemaForm', 'schemaFormDecorators', 'sfSelect', 'sfPath',
function($compile, schemaForm, schemaFormDecorators, sfSelect, sfPath) {
var SNAKE_CASE_REGEXP = /[A-Z]/g;
var snakeCase = function(name, separator) {
separator = separator || '_';
return name.replace(SNAKE_CASE_REGEXP, function(letter, pos) {
return (pos ? separator : '') + letter.toLowerCase();
});
};
return {
scope: {
schema: '=sfSchema',
initialForm: '=sfForm',
model: '=sfModel',
options: '=sfOptions'
},
controller: ['$scope', function($scope) {
this.evalInParentScope = function(expr, locals) {
return $scope.$parent.$eval(expr, locals);
};
}],
replace: false,
restrict: 'A',
transclude: true,
require: '?form',
link: function(scope, element, attrs, formCtrl, transclude) {
//expose form controller on scope so that we don't force authors to use name on form
scope.formCtrl = formCtrl;
//We'd like to handle existing markup,
//besides using it in our template we also
//check for ng-model and add that to an ignore list
//i.e. even if form has a definition for it or form is ["*"]
//we don't generate it.
var ignore = {};
transclude(scope, function(clone) {
clone.addClass('schema-form-ignore');
element.prepend(clone);
if (element[0].querySelectorAll) {
var models = element[0].querySelectorAll('[ng-model]');
if (models) {
for (var i = 0; i < models.length; i++) {
var key = models[i].getAttribute('ng-model');
//skip first part before .
ignore[key.substring(key.indexOf('.') + 1)] = true;
}
}
}
});
var lastDigest = {};
var childScope;
// Common renderer function, can either be triggered by a watch or by an event.
var render = function(schema, form) {
var merged = schemaForm.merge(schema, form, ignore, scope.options);
var frag = document.createDocumentFragment();
// Create a new form and destroy the old one.
// Not doing keeps old form elements hanging around after
// they have been removed from the DOM
// https://github.com/Textalk/angular-schema-form/issues/200
if (childScope) {
childScope.$destroy();
}
childScope = scope.$new();
//make the form available to decorators
childScope.schemaForm = {form: merged, schema: schema};
//clean all but pre existing html.
element.children(':not(.schema-form-ignore)').remove();
// Find all slots.
var slots = {};
var slotsFound = element[0].querySelectorAll('*[sf-insert-field]');
for (var i = 0; i < slotsFound.length; i++) {
slots[slotsFound[i].getAttribute('sf-insert-field')] = slotsFound[i];
}
//Create directives from the form definition
angular.forEach(merged, function(obj, i) {
var n = document.createElement(attrs.sfUseDecorator ||
snakeCase(schemaFormDecorators.defaultDecorator, '-'));
n.setAttribute('form', 'schemaForm.form[' + i + ']');
// Check if there is a slot to put this in...
if (obj.key) {
var slot = slots[sfPath.stringify(obj.key)];
if (slot) {
while (slot.firstChild) {
slot.removeChild(slot.firstChild);
}
slot.appendChild(n);
return;
}
}
// ...otherwise add it to the frag
frag.appendChild(n);
});
element[0].appendChild(frag);
//compile only children
$compile(element.children())(childScope);
//ok, now that that is done let's set any defaults
schemaForm.traverseSchema(schema, function(prop, path) {
if (angular.isDefined(prop['default'])) {
var val = sfSelect(path, scope.model);
if (angular.isUndefined(val)) {
sfSelect(path, scope.model, prop['default']);
}
}
});
scope.$emit('sf-render-finished', element);
};
//Since we are dependant on up to three
//attributes we'll do a common watch
scope.$watch(function() {
var schema = scope.schema;
var form = scope.initialForm || ['*'];
//The check for schema.type is to ensure that schema is not {}
if (form && schema && schema.type &&
(lastDigest.form !== form || lastDigest.schema !== schema) &&
Object.keys(schema.properties).length > 0) {
lastDigest.schema = schema;
lastDigest.form = form;
render(schema, form);
}
});
// We also listen to the event schemaFormRedraw so you can manually trigger a change if
// part of the form or schema is chnaged without it being a new instance.
scope.$on('schemaFormRedraw', function() {
var schema = scope.schema;
var form = scope.initialForm || ['*'];
if (schema) {
render(schema, form);
}
});
}
};
}
]);
angular.module('schemaForm').directive('schemaValidate', ['sfValidator', 'sfSelect', function(sfValidator, sfSelect) {
return {
restrict: 'A',
scope: false,
// We want the link function to be *after* the input directives link function so we get access
// the parsed value, ex. a number instead of a string
priority: 500,
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
// We need the ngModelController on several places,
// most notably for errors.
// So we emit it up to the decorator directive so it can put it on scope.
scope.$emit('schemaFormPropagateNgModelController', ngModel);
var error = null;
var getForm = function() {
if (!form) {
form = scope.$eval(attrs.schemaValidate);
}
return form;
};
var form = getForm();
if (form.copyValueTo) {
ngModel.$viewChangeListeners.push(function() {
var paths = form.copyValueTo;
angular.forEach(paths, function(path) {
sfSelect(path, scope.model, ngModel.$modelValue);
});
});
}
// Validate against the schema.
var validate = function(viewValue) {
form = getForm();
//Still might be undefined
if (!form) {
return viewValue;
}
// Omit TV4 validation
if (scope.options && scope.options.tv4Validation === false) {
return viewValue;
}
var result = sfValidator.validate(form, viewValue);
// Since we might have different tv4 errors we must clear all
// errors that start with tv4-
Object.keys(ngModel.$error)
.filter(function(k) { return k.indexOf('tv4-') === 0; })
.forEach(function(k) { ngModel.$setValidity(k, true); });
if (!result.valid) {
// it is invalid, return undefined (no model update)
ngModel.$setValidity('tv4-' + result.error.code, false);
error = result.error;
return undefined;
}
return viewValue;
};
// Custom validators, parsers, formatters etc
if (typeof form.ngModel === 'function') {
form.ngModel(ngModel);
}
['$parsers', '$viewChangeListeners', '$formatters'].forEach(function(attr) {
if (form[attr] && ngModel[attr]) {
form[attr].forEach(function(fn) {
ngModel[attr].push(fn);
});
}
});
['$validators', '$asyncValidators'].forEach(function(attr) {
// Check if our version of angular has i, i.e. 1.3+
if (form[attr] && ngModel[attr]) {
angular.forEach(form[attr], function(fn, name) {
ngModel[attr][name] = fn;
});
}
});
// Get in last of the parses so the parsed value has the correct type.
// We don't use $validators since we like to set different errors depeding tv4 error codes
ngModel.$parsers.push(validate);
// Listen to an event so we can validate the input on request
scope.$on('schemaFormValidate', function() {
if (ngModel.$setDirty) {
// Angular 1.3+
ngModel.$setDirty();
validate(ngModel.$modelValue);
} else {
// Angular 1.2
ngModel.$setViewValue(ngModel.$viewValue);
}
});
scope.schemaError = function() {
return error;
};
}
};
}]);
return schemaForm;
}));
/*
angular.module("schemaForm").run(["$templateCache",
function($templateCache) {
$templateCache.put("directives/decorators/bootstrap/datepicker/datepicker.html", "<div class=\"form-group {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError()}\">\n <label class=\"control-label\" ng-show=\"showTitle()\">{{form.title}}</label>\n <div ng-class=\"{\'input-group\': (form.fieldAddonLeft || form.fieldAddonRight)}\">\n <span ng-if=\"form.fieldAddonLeft\"\n class=\"input-group-addon\"\n ng-bind-html=\"form.fieldAddonLeft\"></span>\n <input ng-show=\"form.key\"\n style=\"background-color: white\"\n type=\"text\"\n class=\"form-control {{form.fieldHtmlClass}}\"\n schema-validate=\"form\"\n ng-model=\"$$value$$\"\n ng-disabled=\"form.readonly\"\n pick-a-date=\"form.pickadate\"\n min-date=\"form.minDate\"\n max-date=\"form.maxDate\"\n name=\"{{form.key.slice(-1)[0]}}\"\n format=\"form.format\" />\n <span ng-if=\"form.fieldAddonRight\"\n class=\"input-group-addon\"\n ng-bind-html=\"form.fieldAddonRight\"></span>\n </div>\n <span class=\"help-block\">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>\n</div>\n");
}]);*/
angular.module('schemaForm').directive('pickADate', function() {
//String dates for min and max is not supported
//https://github.com/amsul/pickadate.js/issues/439
//So strings we create dates from
var formatDate = function(value) {
//Strings or timestamps we make a date of
if (angular.isString(value) || angular.isNumber(value)) {
return new Date(value);
}
return value;
//We hope it's a date object
};
return {
restrict : 'A',
require : 'ngModel',
scope : {
ngModel : '=',
pickADate : '=',
minDate : '=',
maxDate : '=',
format : '=',
rangeStartDateField : '=',
rangeEndDateField : '=',
rangeSelector : '='
},
link : function(scope, element, attrs, ngModel) {
//Bail out gracefully if pickadate is not loaded.
if (!element.pickadate) {
return;
}
//By setting formatSubmit to null we inhibit the
//hidden field that pickadate likes to create.
//We use ngModel formatters instead to format the value.
var opts = {
onClose : function() {
element.blur();
},
formatSubmit : null
};
if (scope.pickADate) {
angular.extend(opts, scope.pickADate);
}
element.pickadate(opts);
//Defaultformat is for json schema date-time is ISO8601
//i.e. "yyyy-mm-dd"
var defaultFormat = 'yyyy-mm-dd';
//View format on the other hand we get from the pickadate translation file
var viewFormat = $.fn.pickadate.defaults.format;
var picker = element.pickadate('picker');
//The view value
ngModel.$formatters.push(function(value) {
if (angular.isUndefined(value) || value === null) {
return value;
}
//We set 'view' and 'highlight' instead of 'select'
//since the latter also changes the input, which we do not want.
picker.set('view', value, {
format : scope.format || defaultFormat
});
picker.set('highlight', value, {
format : scope.format || defaultFormat
});
/*
range selector
*/
if (angular.isDefined(scope.$parent.form.rangeSelector) && scope.$parent.form.rangeSelector === "true") {
/*
selected start date should be set as min date for end date field
$emit the event
*/
var key = scope.$parent.form.key[0];
if (angular.isDefined(key) && angular.isDefined(scope.$parent.form.rangeStartDateField) && key === scope.$parent.form.rangeStartDateField) {
var rangeEndDateField = {};
rangeEndDateField.minDate = value;
rangeEndDateField.key = scope.$parent.form.rangeEndDateField;
scope.$root.$emit("rangeEndDateField", rangeEndDateField);
}
/*
selected end date should be set as max date for start date field
$emit the event
*/
else if (angular.isDefined(key) && angular.isDefined(scope.$parent.form.rangeEndDateField) && key === scope.$parent.form.rangeEndDateField) {
var rangeStartDateField = {};
rangeStartDateField.maxDate = value;
rangeStartDateField.key = scope.$parent.form.rangeStartDateField;
scope.$root.$emit("rangeStartDateField", rangeStartDateField);
}
}
//piggy back on highlight to and let pickadate do the transformation.
return picker.get('highlight', viewFormat);
});
ngModel.$parsers.push(function() {
/*
range selector
*/
if (angular.isDefined(scope.$parent.form.rangeSelector) && scope.$parent.form.rangeSelector === "true") {
/*
selected start date should be set as min date for end date field
$emit the event
*/
var key = scope.$parent.form.key[0];
if (angular.isDefined(key) && angular.isDefined(scope.$parent.form.rangeStartDateField) && key === scope.$parent.form.rangeStartDateField) {
var rangeEndDateField = {};
rangeEndDateField.minDate = picker.get('select', scope.format || defaultFormat);
rangeEndDateField.key = scope.$parent.form.rangeEndDateField;
scope.$root.$emit("rangeEndDateField", rangeEndDateField);
}
/*
selected end date should be set as max date for start date field
$emit the event
*/
else if (angular.isDefined(key) && angular.isDefined(scope.$parent.form.rangeEndDateField) && key === scope.$parent.form.rangeEndDateField) {
var rangeStartDateField = {};
rangeStartDateField.maxDate = picker.get('select', scope.format || defaultFormat);
rangeStartDateField.key = scope.$parent.form.rangeStartDateField;
scope.$root.$emit("rangeStartDateField", rangeStartDateField);
}
}
return picker.get('select', scope.format || defaultFormat);
});
/*
listener for the event rangeEndDateField
*/
if (angular.isDefined(scope.$root) && scope.$root !== null) {
scope.$root.$on("rangeEndDateField", function(event, data) {
var key = scope.$parent.form.key[0];
if (angular.isDefined(key) && key === data.key) {
picker.set('min', formatDate(data.minDate));
}
});
}
/*
listener for the event rangeStartDateField
*/
if (angular.isDefined(scope.$root) && scope.$root !== null) {
scope.$root.$on("rangeStartDateField", function(event, data) {
var key = scope.$parent.form.key[0];
if (angular.isDefined(key) && key === data.key) {
picker.set('max', formatDate(data.maxDate));
}
});
}
//bind once.
if (angular.isDefined(attrs.minDate)) {
var onceMin = scope.$watch('minDate', function(value) {
if (value) {
picker.set('min', formatDate(value));
onceMin();
}
}, true);
}
if (angular.isDefined(attrs.maxDate)) {
var onceMax = scope.$watch('maxDate', function(value) {
if (value) {
picker.set('max', formatDate(value));
onceMax();
}
}, true);
}
}
};
});
angular.module('schemaForm').config(['schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfPathProvider',
function(schemaFormProvider, schemaFormDecoratorsProvider, sfPathProvider) {
var datepicker = function(name, schema, options) {
if (schema.type === 'string' && (schema.format === 'date' || schema.format === 'date-time')) {
var f = schemaFormProvider.stdFormObj(name, schema, options);
f.key = options.path;
f.type = 'datepicker';
f.rangeStartDateField = options.rangeStartDateField;
f.rangeEndDateField = options.rangeEndDateField;
f.rangeSelector = options.rangeSelector;
console.log("angular schema form > addon > datepicker > form definition > ", f);
options.lookup[sfPathProvider.stringify(options.path)] = f;
return f;
}
};
schemaFormProvider.defaults.string.unshift(datepicker);
//Add to the bootstrap directive
schemaFormDecoratorsProvider.addMapping('bootstrapDecorator', 'datepicker', 'datepicker.html');
schemaFormDecoratorsProvider.createDirective('datepicker', 'datepicker.html');
}]);
<div class="form-group {{form.htmlClass}}" ng-class="{'has-error': hasError()}">
<label class="control-label" ng-show="showTitle()">{{form.title}}</label>
<div ng-class="{'input-group': (form.fieldAddonLeft || form.fieldAddonRight)}">
<span ng-if="form.fieldAddonLeft"
class="input-group-addon"
ng-bind-html="form.fieldAddonLeft"></span>
<input ng-show="form.key"
style="background-color: white"
type="text"
class="form-control {{form.fieldHtmlClass}}"
schema-validate="form"
ng-model="$$value$$"
ng-disabled="form.readonly"
pick-a-date="form.pickadate"
min-date="form.minDate"
emit="form.minDate"
max-date="form.maxDate"
rangeStartDateField ="form.rangeStartDateField"
rangeEndDateField="form.rangeEndDateField"
rangeSelector="form.rangeSelector"
name="{{form.key.slice(-1)[0]}}"
format="form.format" />
<span ng-if="form.fieldAddonRight"
class="input-group-addon"
ng-bind-html="form.fieldAddonRight"></span>
</div>
<span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>
</div>
/*!
* Date picker for pickadate.js v3.5.6
* http://amsul.github.io/pickadate.js/date.htm
*/
(function ( factory ) {
// AMD.
if ( typeof define == 'function' && define.amd )
define( ['picker', 'jquery'], factory )
// Node.js/browserify.
else if ( typeof exports == 'object' )
module.exports = factory( require('./picker.js'), require('jquery') )
// Browser globals.
else factory( Picker, jQuery )
}(function( Picker, $ ) {
/**
* Globals and constants
*/
var DAYS_IN_WEEK = 7,
WEEKS_IN_CALENDAR = 6,
_ = Picker._
/**
* The date picker constructor
*/
function DatePicker( picker, settings ) {
var calendar = this,
element = picker.$node[ 0 ],
elementValue = element.value,
elementDataValue = picker.$node.data( 'value' ),
valueString = elementDataValue || elementValue,
formatString = elementDataValue ? settings.formatSubmit : settings.format,
isRTL = function() {
return element.currentStyle ?
// For IE.
element.currentStyle.direction == 'rtl' :
// For normal browsers.
getComputedStyle( picker.$root[0] ).direction == 'rtl'
}
calendar.settings = settings
calendar.$node = picker.$node
// The queue of methods that will be used to build item objects.
calendar.queue = {
min: 'measure create',
max: 'measure create',
now: 'now create',
select: 'parse create validate',
highlight: 'parse navigate create validate',
view: 'parse create validate viewset',
disable: 'deactivate',
enable: 'activate'
}
// The component's item object.
calendar.item = {}
calendar.item.clear = null
calendar.item.disable = ( settings.disable || [] ).slice( 0 )
calendar.item.enable = -(function( collectionDisabled ) {
return collectionDisabled[ 0 ] === true ? collectionDisabled.shift() : -1
})( calendar.item.disable )
calendar.
set( 'min', settings.min ).
set( 'max', settings.max ).
set( 'now' )
// When there’s a value, set the `select`, which in turn
// also sets the `highlight` and `view`.
if ( valueString ) {
calendar.set( 'select', valueString, {
format: formatString,
defaultValue: true
})
}
// If there’s no value, default to highlighting “today”.
else {
calendar.
set( 'select', null ).
set( 'highlight', calendar.item.now )
}
// The keycode to movement mapping.
calendar.key = {
40: 7, // Down
38: -7, // Up
39: function() { return isRTL() ? -1 : 1 }, // Right
37: function() { return isRTL() ? 1 : -1 }, // Left
go: function( timeChange ) {
var highlightedObject = calendar.item.highlight,
targetDate = new Date( highlightedObject.year, highlightedObject.month, highlightedObject.date + timeChange )
calendar.set(
'highlight',
targetDate,
{ interval: timeChange }
)
this.render()
}
}
// Bind some picker events.
picker.
on( 'render', function() {
picker.$root.find( '.' + settings.klass.selectMonth ).on( 'change', function() {
var value = this.value
if ( value ) {
picker.set( 'highlight', [ picker.get( 'view' ).year, value, picker.get( 'highlight' ).date ] )
picker.$root.find( '.' + settings.klass.selectMonth ).trigger( 'focus' )
}
})
picker.$root.find( '.' + settings.klass.selectYear ).on( 'change', function() {
var value = this.value
if ( value ) {
picker.set( 'highlight', [ value, picker.get( 'view' ).month, picker.get( 'highlight' ).date ] )
picker.$root.find( '.' + settings.klass.selectYear ).trigger( 'focus' )
}
})
}, 1 ).
on( 'open', function() {
var includeToday = ''
if ( calendar.disabled( calendar.get('now') ) ) {
includeToday = ':not(.' + settings.klass.buttonToday + ')'
}
picker.$root.find( 'button' + includeToday + ', select' ).attr( 'disabled', false )
}, 1 ).
on( 'close', function() {
picker.$root.find( 'button, select' ).attr( 'disabled', true )
}, 1 )
} //DatePicker
/**
* Set a datepicker item object.
*/
DatePicker.prototype.set = function( type, value, options ) {
var calendar = this,
calendarItem = calendar.item
// If the value is `null` just set it immediately.
if ( value === null ) {
if ( type == 'clear' ) type = 'select'
calendarItem[ type ] = value
return calendar
}
// Otherwise go through the queue of methods, and invoke the functions.
// Update this as the time unit, and set the final value as this item.
// * In the case of `enable`, keep the queue but set `disable` instead.
// And in the case of `flip`, keep the queue but set `enable` instead.
calendarItem[ ( type == 'enable' ? 'disable' : type == 'flip' ? 'enable' : type ) ] = calendar.queue[ type ].split( ' ' ).map( function( method ) {
value = calendar[ method ]( type, value, options )
return value
}).pop()
// Check if we need to cascade through more updates.
if ( type == 'select' ) {
calendar.set( 'highlight', calendarItem.select, options )
}
else if ( type == 'highlight' ) {
calendar.set( 'view', calendarItem.highlight, options )
}
else if ( type.match( /^(flip|min|max|disable|enable)$/ ) ) {
if ( calendarItem.select && calendar.disabled( calendarItem.select ) ) {
calendar.set( 'select', calendarItem.select, options )
}
if ( calendarItem.highlight && calendar.disabled( calendarItem.highlight ) ) {
calendar.set( 'highlight', calendarItem.highlight, options )
}
}
return calendar
} //DatePicker.prototype.set
/**
* Get a datepicker item object.
*/
DatePicker.prototype.get = function( type ) {
return this.item[ type ]
} //DatePicker.prototype.get
/**
* Create a picker date object.
*/
DatePicker.prototype.create = function( type, value, options ) {
var isInfiniteValue,
calendar = this
// If there’s no value, use the type as the value.
value = value === undefined ? type : value
// If it’s infinity, update the value.
if ( value == -Infinity || value == Infinity ) {
isInfiniteValue = value
}
// If it’s an object, use the native date object.
else if ( $.isPlainObject( value ) && _.isInteger( value.pick ) ) {
value = value.obj
}
// If it’s an array, convert it into a date and make sure
// that it’s a valid date – otherwise default to today.
else if ( $.isArray( value ) ) {
value = new Date( value[ 0 ], value[ 1 ], value[ 2 ] )
value = _.isDate( value ) ? value : calendar.create().obj
}
// If it’s a number or date object, make a normalized date.
else if ( _.isInteger( value ) || _.isDate( value ) ) {
value = calendar.normalize( new Date( value ), options )
}
// If it’s a literal true or any other case, set it to now.
else /*if ( value === true )*/ {
value = calendar.now( type, value, options )
}
// Return the compiled object.
return {
year: isInfiniteValue || value.getFullYear(),
month: isInfiniteValue || value.getMonth(),
date: isInfiniteValue || value.getDate(),
day: isInfiniteValue || value.getDay(),
obj: isInfiniteValue || value,
pick: isInfiniteValue || value.getTime()
}
} //DatePicker.prototype.create
/**
* Create a range limit object using an array, date object,
* literal “true”, or integer relative to another time.
*/
DatePicker.prototype.createRange = function( from, to ) {
var calendar = this,
createDate = function( date ) {
if ( date === true || $.isArray( date ) || _.isDate( date ) ) {
return calendar.create( date )
}
return date
}
// Create objects if possible.
if ( !_.isInteger( from ) ) {
from = createDate( from )
}
if ( !_.isInteger( to ) ) {
to = createDate( to )
}
// Create relative dates.
if ( _.isInteger( from ) && $.isPlainObject( to ) ) {
from = [ to.year, to.month, to.date + from ];
}
else if ( _.isInteger( to ) && $.isPlainObject( from ) ) {
to = [ from.year, from.month, from.date + to ];
}
return {
from: createDate( from ),
to: createDate( to )
}
} //DatePicker.prototype.createRange
/**
* Check if a date unit falls within a date range object.
*/
DatePicker.prototype.withinRange = function( range, dateUnit ) {
range = this.createRange(range.from, range.to)
return dateUnit.pick >= range.from.pick && dateUnit.pick <= range.to.pick
}
/**
* Check if two date range objects overlap.
*/
DatePicker.prototype.overlapRanges = function( one, two ) {
var calendar = this
// Convert the ranges into comparable dates.
one = calendar.createRange( one.from, one.to )
two = calendar.createRange( two.from, two.to )
return calendar.withinRange( one, two.from ) || calendar.withinRange( one, two.to ) ||
calendar.withinRange( two, one.from ) || calendar.withinRange( two, one.to )
}
/**
* Get the date today.
*/
DatePicker.prototype.now = function( type, value, options ) {
value = new Date()
if ( options && options.rel ) {
value.setDate( value.getDate() + options.rel )
}
return this.normalize( value, options )
}
/**
* Navigate to next/prev month.
*/
DatePicker.prototype.navigate = function( type, value, options ) {
var targetDateObject,
targetYear,
targetMonth,
targetDate,
isTargetArray = $.isArray( value ),
isTargetObject = $.isPlainObject( value ),
viewsetObject = this.item.view/*,
safety = 100*/
if ( isTargetArray || isTargetObject ) {
if ( isTargetObject ) {
targetYear = value.year
targetMonth = value.month
targetDate = value.date
}
else {
targetYear = +value[0]
targetMonth = +value[1]
targetDate = +value[2]
}
// If we’re navigating months but the view is in a different
// month, navigate to the view’s year and month.
if ( options && options.nav && viewsetObject && viewsetObject.month !== targetMonth ) {
targetYear = viewsetObject.year
targetMonth = viewsetObject.month
}
// Figure out the expected target year and month.
targetDateObject = new Date( targetYear, targetMonth + ( options && options.nav ? options.nav : 0 ), 1 )
targetYear = targetDateObject.getFullYear()
targetMonth = targetDateObject.getMonth()
// If the month we’re going to doesn’t have enough days,
// keep decreasing the date until we reach the month’s last date.
while ( /*safety &&*/ new Date( targetYear, targetMonth, targetDate ).getMonth() !== targetMonth ) {
targetDate -= 1
/*safety -= 1
if ( !safety ) {
throw 'Fell into an infinite loop while navigating to ' + new Date( targetYear, targetMonth, targetDate ) + '.'
}*/
}
value = [ targetYear, targetMonth, targetDate ]
}
return value
} //DatePicker.prototype.navigate
/**
* Normalize a date by setting the hours to midnight.
*/
DatePicker.prototype.normalize = function( value/*, options*/ ) {
value.setHours( 0, 0, 0, 0 )
return value
}
/**
* Measure the range of dates.
*/
DatePicker.prototype.measure = function( type, value/*, options*/ ) {
var calendar = this
// If it’s anything false-y, remove the limits.
if ( !value ) {
value = type == 'min' ? -Infinity : Infinity
}
// If it’s a string, parse it.
else if ( typeof value == 'string' ) {
value = calendar.parse( type, value )
}
// If it's an integer, get a date relative to today.
else if ( _.isInteger( value ) ) {
value = calendar.now( type, value, { rel: value } )
}
return value
} ///DatePicker.prototype.measure
/**
* Create a viewset object based on navigation.
*/
DatePicker.prototype.viewset = function( type, dateObject/*, options*/ ) {
return this.create([ dateObject.year, dateObject.month, 1 ])
}
/**
* Validate a date as enabled and shift if needed.
*/
DatePicker.prototype.validate = function( type, dateObject, options ) {
var calendar = this,
// Keep a reference to the original date.
originalDateObject = dateObject,
// Make sure we have an interval.
interval = options && options.interval ? options.interval : 1,
// Check if the calendar enabled dates are inverted.
isFlippedBase = calendar.item.enable === -1,
// Check if we have any enabled dates after/before now.
hasEnabledBeforeTarget, hasEnabledAfterTarget,
// The min & max limits.
minLimitObject = calendar.item.min,
maxLimitObject = calendar.item.max,
// Check if we’ve reached the limit during shifting.
reachedMin, reachedMax,
// Check if the calendar is inverted and at least one weekday is enabled.
hasEnabledWeekdays = isFlippedBase && calendar.item.disable.filter( function( value ) {
// If there’s a date, check where it is relative to the target.
if ( $.isArray( value ) ) {
var dateTime = calendar.create( value ).pick
if ( dateTime < dateObject.pick ) hasEnabledBeforeTarget = true
else if ( dateTime > dateObject.pick ) hasEnabledAfterTarget = true
}
// Return only integers for enabled weekdays.
return _.isInteger( value )
}).length/*,
safety = 100*/
// Cases to validate for:
// [1] Not inverted and date disabled.
// [2] Inverted and some dates enabled.
// [3] Not inverted and out of range.
//
// Cases to **not** validate for:
// • Navigating months.
// • Not inverted and date enabled.
// • Inverted and all dates disabled.
// • ..and anything else.
if ( !options || (!options.nav && !options.defaultValue) ) if (
/* 1 */ ( !isFlippedBase && calendar.disabled( dateObject ) ) ||
/* 2 */ ( isFlippedBase && calendar.disabled( dateObject ) && ( hasEnabledWeekdays || hasEnabledBeforeTarget || hasEnabledAfterTarget ) ) ||
/* 3 */ ( !isFlippedBase && (dateObject.pick <= minLimitObject.pick || dateObject.pick >= maxLimitObject.pick) )
) {
// When inverted, flip the direction if there aren’t any enabled weekdays
// and there are no enabled dates in the direction of the interval.
if ( isFlippedBase && !hasEnabledWeekdays && ( ( !hasEnabledAfterTarget && interval > 0 ) || ( !hasEnabledBeforeTarget && interval < 0 ) ) ) {
interval *= -1
}
// Keep looping until we reach an enabled date.
while ( /*safety &&*/ calendar.disabled( dateObject ) ) {
/*safety -= 1
if ( !safety ) {
throw 'Fell into an infinite loop while validating ' + dateObject.obj + '.'
}*/
// If we’ve looped into the next/prev month with a large interval, return to the original date and flatten the interval.
if ( Math.abs( interval ) > 1 && ( dateObject.month < originalDateObject.month || dateObject.month > originalDateObject.month ) ) {
dateObject = originalDateObject
interval = interval > 0 ? 1 : -1
}
// If we’ve reached the min/max limit, reverse the direction, flatten the interval and set it to the limit.
if ( dateObject.pick <= minLimitObject.pick ) {
reachedMin = true
interval = 1
dateObject = calendar.create([
minLimitObject.year,
minLimitObject.month,
minLimitObject.date + (dateObject.pick === minLimitObject.pick ? 0 : -1)
])
}
else if ( dateObject.pick >= maxLimitObject.pick ) {
reachedMax = true
interval = -1
dateObject = calendar.create([
maxLimitObject.year,
maxLimitObject.month,
maxLimitObject.date + (dateObject.pick === maxLimitObject.pick ? 0 : 1)
])
}
// If we’ve reached both limits, just break out of the loop.
if ( reachedMin && reachedMax ) {
break
}
// Finally, create the shifted date using the interval and keep looping.
dateObject = calendar.create([ dateObject.year, dateObject.month, dateObject.date + interval ])
}
} //endif
// Return the date object settled on.
return dateObject
} //DatePicker.prototype.validate
/**
* Check if a date is disabled.
*/
DatePicker.prototype.disabled = function( dateToVerify ) {
var
calendar = this,
// Filter through the disabled dates to check if this is one.
isDisabledMatch = calendar.item.disable.filter( function( dateToDisable ) {
// If the date is a number, match the weekday with 0index and `firstDay` check.
if ( _.isInteger( dateToDisable ) ) {
return dateToVerify.day === ( calendar.settings.firstDay ? dateToDisable : dateToDisable - 1 ) % 7
}
// If it’s an array or a native JS date, create and match the exact date.
if ( $.isArray( dateToDisable ) || _.isDate( dateToDisable ) ) {
return dateToVerify.pick === calendar.create( dateToDisable ).pick
}
// If it’s an object, match a date within the “from” and “to” range.
if ( $.isPlainObject( dateToDisable ) ) {
return calendar.withinRange( dateToDisable, dateToVerify )
}
})
// If this date matches a disabled date, confirm it’s not inverted.
isDisabledMatch = isDisabledMatch.length && !isDisabledMatch.filter(function( dateToDisable ) {
return $.isArray( dateToDisable ) && dateToDisable[3] == 'inverted' ||
$.isPlainObject( dateToDisable ) && dateToDisable.inverted
}).length
// Check the calendar “enabled” flag and respectively flip the
// disabled state. Then also check if it’s beyond the min/max limits.
return calendar.item.enable === -1 ? !isDisabledMatch : isDisabledMatch ||
dateToVerify.pick < calendar.item.min.pick ||
dateToVerify.pick > calendar.item.max.pick
} //DatePicker.prototype.disabled
/**
* Parse a string into a usable type.
*/
DatePicker.prototype.parse = function( type, value, options ) {
var calendar = this,
parsingObject = {}
// If it’s already parsed, we’re good.
if ( !value || typeof value != 'string' ) {
return value
}
// We need a `.format` to parse the value with.
if ( !( options && options.format ) ) {
options = options || {}
options.format = calendar.settings.format
}
// Convert the format into an array and then map through it.
calendar.formats.toArray( options.format ).map( function( label ) {
var
// Grab the formatting label.
formattingLabel = calendar.formats[ label ],
// The format length is from the formatting label function or the
// label length without the escaping exclamation (!) mark.
formatLength = formattingLabel ? _.trigger( formattingLabel, calendar, [ value, parsingObject ] ) : label.replace( /^!/, '' ).length
// If there's a format label, split the value up to the format length.
// Then add it to the parsing object with appropriate label.
if ( formattingLabel ) {
parsingObject[ label ] = value.substr( 0, formatLength )
}
// Update the value as the substring from format length to end.
value = value.substr( formatLength )
})
// Compensate for month 0index.
return [
parsingObject.yyyy || parsingObject.yy,
+( parsingObject.mm || parsingObject.m ) - 1,
parsingObject.dd || parsingObject.d
]
} //DatePicker.prototype.parse
/**
* Various formats to display the object in.
*/
DatePicker.prototype.formats = (function() {
// Return the length of the first word in a collection.
function getWordLengthFromCollection( string, collection, dateObject ) {
// Grab the first word from the string.
// Regex pattern from http://stackoverflow.com/q/150033
var word = string.match( /[^\x00-\x7F]+|\w+/ )[ 0 ]
// If there's no month index, add it to the date object
if ( !dateObject.mm && !dateObject.m ) {
dateObject.m = collection.indexOf( word ) + 1
}
// Return the length of the word.
return word.length
}
// Get the length of the first word in a string.
function getFirstWordLength( string ) {
return string.match( /\w+/ )[ 0 ].length
}
return {
d: function( string, dateObject ) {
// If there's string, then get the digits length.
// Otherwise return the selected date.
return string ? _.digits( string ) : dateObject.date
},
dd: function( string, dateObject ) {
// If there's a string, then the length is always 2.
// Otherwise return the selected date with a leading zero.
return string ? 2 : _.lead( dateObject.date )
},
ddd: function( string, dateObject ) {
// If there's a string, then get the length of the first word.
// Otherwise return the short selected weekday.
return string ? getFirstWordLength( string ) : this.settings.weekdaysShort[ dateObject.day ]
},
dddd: function( string, dateObject ) {
// If there's a string, then get the length of the first word.
// Otherwise return the full selected weekday.
return string ? getFirstWordLength( string ) : this.settings.weekdaysFull[ dateObject.day ]
},
m: function( string, dateObject ) {
// If there's a string, then get the length of the digits
// Otherwise return the selected month with 0index compensation.
return string ? _.digits( string ) : dateObject.month + 1
},
mm: function( string, dateObject ) {
// If there's a string, then the length is always 2.
// Otherwise return the selected month with 0index and leading zero.
return string ? 2 : _.lead( dateObject.month + 1 )
},
mmm: function( string, dateObject ) {
var collection = this.settings.monthsShort
// If there's a string, get length of the relevant month from the short
// months collection. Otherwise return the selected month from that collection.
return string ? getWordLengthFromCollection( string, collection, dateObject ) : collection[ dateObject.month ]
},
mmmm: function( string, dateObject ) {
var collection = this.settings.monthsFull
// If there's a string, get length of the relevant month from the full
// months collection. Otherwise return the selected month from that collection.
return string ? getWordLengthFromCollection( string, collection, dateObject ) : collection[ dateObject.month ]
},
yy: function( string, dateObject ) {
// If there's a string, then the length is always 2.
// Otherwise return the selected year by slicing out the first 2 digits.
return string ? 2 : ( '' + dateObject.year ).slice( 2 )
},
yyyy: function( string, dateObject ) {
// If there's a string, then the length is always 4.
// Otherwise return the selected year.
return string ? 4 : dateObject.year
},
// Create an array by splitting the formatting string passed.
toArray: function( formatString ) { return formatString.split( /(d{1,4}|m{1,4}|y{4}|yy|!.)/g ) },
// Format an object into a string using the formatting options.
toString: function ( formatString, itemObject ) {
var calendar = this
return calendar.formats.toArray( formatString ).map( function( label ) {
return _.trigger( calendar.formats[ label ], calendar, [ 0, itemObject ] ) || label.replace( /^!/, '' )
}).join( '' )
}
}
})() //DatePicker.prototype.formats
/**
* Check if two date units are the exact.
*/
DatePicker.prototype.isDateExact = function( one, two ) {
var calendar = this
// When we’re working with weekdays, do a direct comparison.
if (
( _.isInteger( one ) && _.isInteger( two ) ) ||
( typeof one == 'boolean' && typeof two == 'boolean' )
) {
return one === two
}
// When we’re working with date representations, compare the “pick” value.
if (
( _.isDate( one ) || $.isArray( one ) ) &&
( _.isDate( two ) || $.isArray( two ) )
) {
return calendar.create( one ).pick === calendar.create( two ).pick
}
// When we’re working with range objects, compare the “from” and “to”.
if ( $.isPlainObject( one ) && $.isPlainObject( two ) ) {
return calendar.isDateExact( one.from, two.from ) && calendar.isDateExact( one.to, two.to )
}
return false
}
/**
* Check if two date units overlap.
*/
DatePicker.prototype.isDateOverlap = function( one, two ) {
var calendar = this,
firstDay = calendar.settings.firstDay ? 1 : 0
// When we’re working with a weekday index, compare the days.
if ( _.isInteger( one ) && ( _.isDate( two ) || $.isArray( two ) ) ) {
one = one % 7 + firstDay
return one === calendar.create( two ).day + 1
}
if ( _.isInteger( two ) && ( _.isDate( one ) || $.isArray( one ) ) ) {
two = two % 7 + firstDay
return two === calendar.create( one ).day + 1
}
// When we’re working with range objects, check if the ranges overlap.
if ( $.isPlainObject( one ) && $.isPlainObject( two ) ) {
return calendar.overlapRanges( one, two )
}
return false
}
/**
* Flip the “enabled” state.
*/
DatePicker.prototype.flipEnable = function(val) {
var itemObject = this.item
itemObject.enable = val || (itemObject.enable == -1 ? 1 : -1)
}
/**
* Mark a collection of dates as “disabled”.
*/
DatePicker.prototype.deactivate = function( type, datesToDisable ) {
var calendar = this,
disabledItems = calendar.item.disable.slice(0)
// If we’re flipping, that’s all we need to do.
if ( datesToDisable == 'flip' ) {
calendar.flipEnable()
}
else if ( datesToDisable === false ) {
calendar.flipEnable(1)
disabledItems = []
}
else if ( datesToDisable === true ) {
calendar.flipEnable(-1)
disabledItems = []
}
// Otherwise go through the dates to disable.
else {
datesToDisable.map(function( unitToDisable ) {
var matchFound
// When we have disabled items, check for matches.
// If something is matched, immediately break out.
for ( var index = 0; index < disabledItems.length; index += 1 ) {
if ( calendar.isDateExact( unitToDisable, disabledItems[index] ) ) {
matchFound = true
break
}
}
// If nothing was found, add the validated unit to the collection.
if ( !matchFound ) {
if (
_.isInteger( unitToDisable ) ||
_.isDate( unitToDisable ) ||
$.isArray( unitToDisable ) ||
( $.isPlainObject( unitToDisable ) && unitToDisable.from && unitToDisable.to )
) {
disabledItems.push( unitToDisable )
}
}
})
}
// Return the updated collection.
return disabledItems
} //DatePicker.prototype.deactivate
/**
* Mark a collection of dates as “enabled”.
*/
DatePicker.prototype.activate = function( type, datesToEnable ) {
var calendar = this,
disabledItems = calendar.item.disable,
disabledItemsCount = disabledItems.length
// If we’re flipping, that’s all we need to do.
if ( datesToEnable == 'flip' ) {
calendar.flipEnable()
}
else if ( datesToEnable === true ) {
calendar.flipEnable(1)
disabledItems = []
}
else if ( datesToEnable === false ) {
calendar.flipEnable(-1)
disabledItems = []
}
// Otherwise go through the disabled dates.
else {
datesToEnable.map(function( unitToEnable ) {
var matchFound,
disabledUnit,
index,
isExactRange
// Go through the disabled items and try to find a match.
for ( index = 0; index < disabledItemsCount; index += 1 ) {
disabledUnit = disabledItems[index]
// When an exact match is found, remove it from the collection.
if ( calendar.isDateExact( disabledUnit, unitToEnable ) ) {
matchFound = disabledItems[index] = null
isExactRange = true
break
}
// When an overlapped match is found, add the “inverted” state to it.
else if ( calendar.isDateOverlap( disabledUnit, unitToEnable ) ) {
if ( $.isPlainObject( unitToEnable ) ) {
unitToEnable.inverted = true
matchFound = unitToEnable
}
else if ( $.isArray( unitToEnable ) ) {
matchFound = unitToEnable
if ( !matchFound[3] ) matchFound.push( 'inverted' )
}
else if ( _.isDate( unitToEnable ) ) {
matchFound = [ unitToEnable.getFullYear(), unitToEnable.getMonth(), unitToEnable.getDate(), 'inverted' ]
}
break
}
}
// If a match was found, remove a previous duplicate entry.
if ( matchFound ) for ( index = 0; index < disabledItemsCount; index += 1 ) {
if ( calendar.isDateExact( disabledItems[index], unitToEnable ) ) {
disabledItems[index] = null
break
}
}
// In the event that we’re dealing with an exact range of dates,
// make sure there are no “inverted” dates because of it.
if ( isExactRange ) for ( index = 0; index < disabledItemsCount; index += 1 ) {
if ( calendar.isDateOverlap( disabledItems[index], unitToEnable ) ) {
disabledItems[index] = null
break
}
}
// If something is still matched, add it into the collection.
if ( matchFound ) {
disabledItems.push( matchFound )
}
})
}
// Return the updated collection.
return disabledItems.filter(function( val ) { return val != null })
} //DatePicker.prototype.activate
/**
* Create a string for the nodes in the picker.
*/
DatePicker.prototype.nodes = function( isOpen ) {
var
calendar = this,
settings = calendar.settings,
calendarItem = calendar.item,
nowObject = calendarItem.now,
selectedObject = calendarItem.select,
highlightedObject = calendarItem.highlight,
viewsetObject = calendarItem.view,
disabledCollection = calendarItem.disable,
minLimitObject = calendarItem.min,
maxLimitObject = calendarItem.max,
// Create the calendar table head using a copy of weekday labels collection.
// * We do a copy so we don't mutate the original array.
tableHead = (function( collection, fullCollection ) {
// If the first day should be Monday, move Sunday to the end.
if ( settings.firstDay ) {
collection.push( collection.shift() )
fullCollection.push( fullCollection.shift() )
}
// Create and return the table head group.
return _.node(
'thead',
_.node(
'tr',
_.group({
min: 0,
max: DAYS_IN_WEEK - 1,
i: 1,
node: 'th',
item: function( counter ) {
return [
collection[ counter ],
settings.klass.weekdays,
'scope=col title="' + fullCollection[ counter ] + '"'
]
}
})
)
) //endreturn
})( ( settings.showWeekdaysFull ? settings.weekdaysFull : settings.weekdaysShort ).slice( 0 ), settings.weekdaysFull.slice( 0 ) ), //tableHead
// Create the nav for next/prev month.
createMonthNav = function( next ) {
// Otherwise, return the created month tag.
return _.node(
'div',
' ',
settings.klass[ 'nav' + ( next ? 'Next' : 'Prev' ) ] + (
// If the focused month is outside the range, disabled the button.
( next && viewsetObject.year >= maxLimitObject.year && viewsetObject.month >= maxLimitObject.month ) ||
( !next && viewsetObject.year <= minLimitObject.year && viewsetObject.month <= minLimitObject.month ) ?
' ' + settings.klass.navDisabled : ''
),
'data-nav=' + ( next || -1 ) + ' ' +
_.ariaAttr({
role: 'button',
controls: calendar.$node[0].id + '_table'
}) + ' ' +
'title="' + (next ? settings.labelMonthNext : settings.labelMonthPrev ) + '"'
) //endreturn
}, //createMonthNav
// Create the month label.
createMonthLabel = function() {
var monthsCollection = settings.showMonthsShort ? settings.monthsShort : settings.monthsFull
// If there are months to select, add a dropdown menu.
if ( settings.selectMonths ) {
return _.node( 'select',
_.group({
min: 0,
max: 11,
i: 1,
node: 'option',
item: function( loopedMonth ) {
return [
// The looped month and no classes.
monthsCollection[ loopedMonth ], 0,
// Set the value and selected index.
'value=' + loopedMonth +
( viewsetObject.month == loopedMonth ? ' selected' : '' ) +
(
(
( viewsetObject.year == minLimitObject.year && loopedMonth < minLimitObject.month ) ||
( viewsetObject.year == maxLimitObject.year && loopedMonth > maxLimitObject.month )
) ?
' disabled' : ''
)
]
}
}),
settings.klass.selectMonth,
( isOpen ? '' : 'disabled' ) + ' ' +
_.ariaAttr({ controls: calendar.$node[0].id + '_table' }) + ' ' +
'title="' + settings.labelMonthSelect + '"'
)
}
// If there's a need for a month selector
return _.node( 'div', monthsCollection[ viewsetObject.month ], settings.klass.month )
}, //createMonthLabel
// Create the year label.
createYearLabel = function() {
var focusedYear = viewsetObject.year,
// If years selector is set to a literal "true", set it to 5. Otherwise
// divide in half to get half before and half after focused year.
numberYears = settings.selectYears === true ? 5 : ~~( settings.selectYears / 2 )
// If there are years to select, add a dropdown menu.
if ( numberYears ) {
var
minYear = minLimitObject.year,
maxYear = maxLimitObject.year,
lowestYear = focusedYear - numberYears,
highestYear = focusedYear + numberYears
// If the min year is greater than the lowest year, increase the highest year
// by the difference and set the lowest year to the min year.
if ( minYear > lowestYear ) {
highestYear += minYear - lowestYear
lowestYear = minYear
}
// If the max year is less than the highest year, decrease the lowest year
// by the lower of the two: available and needed years. Then set the
// highest year to the max year.
if ( maxYear < highestYear ) {
var availableYears = lowestYear - minYear,
neededYears = highestYear - maxYear
lowestYear -= availableYears > neededYears ? neededYears : availableYears
highestYear = maxYear
}
return _.node( 'select',
_.group({
min: lowestYear,
max: highestYear,
i: 1,
node: 'option',
item: function( loopedYear ) {
return [
// The looped year and no classes.
loopedYear, 0,
// Set the value and selected index.
'value=' + loopedYear + ( focusedYear == loopedYear ? ' selected' : '' )
]
}
}),
settings.klass.selectYear,
( isOpen ? '' : 'disabled' ) + ' ' + _.ariaAttr({ controls: calendar.$node[0].id + '_table' }) + ' ' +
'title="' + settings.labelYearSelect + '"'
)
}
// Otherwise just return the year focused
return _.node( 'div', focusedYear, settings.klass.year )
} //createYearLabel
// Create and return the entire calendar.
return _.node(
'div',
( settings.selectYears ? createYearLabel() + createMonthLabel() : createMonthLabel() + createYearLabel() ) +
createMonthNav() + createMonthNav( 1 ),
settings.klass.header
) + _.node(
'table',
tableHead +
_.node(
'tbody',
_.group({
min: 0,
max: WEEKS_IN_CALENDAR - 1,
i: 1,
node: 'tr',
item: function( rowCounter ) {
// If Monday is the first day and the month starts on Sunday, shift the date back a week.
var shiftDateBy = settings.firstDay && calendar.create([ viewsetObject.year, viewsetObject.month, 1 ]).day === 0 ? -7 : 0
return [
_.group({
min: DAYS_IN_WEEK * rowCounter - viewsetObject.day + shiftDateBy + 1, // Add 1 for weekday 0index
max: function() {
return this.min + DAYS_IN_WEEK - 1
},
i: 1,
node: 'td',
item: function( targetDate ) {
// Convert the time date from a relative date to a target date.
targetDate = calendar.create([ viewsetObject.year, viewsetObject.month, targetDate + ( settings.firstDay ? 1 : 0 ) ])
var isSelected = selectedObject && selectedObject.pick == targetDate.pick,
isHighlighted = highlightedObject && highlightedObject.pick == targetDate.pick,
isDisabled = disabledCollection && calendar.disabled( targetDate ) || targetDate.pick < minLimitObject.pick || targetDate.pick > maxLimitObject.pick,
formattedDate = _.trigger( calendar.formats.toString, calendar, [ settings.format, targetDate ] )
return [
_.node(
'div',
targetDate.date,
(function( klasses ) {
// Add the `infocus` or `outfocus` classes based on month in view.
klasses.push( viewsetObject.month == targetDate.month ? settings.klass.infocus : settings.klass.outfocus )
// Add the `today` class if needed.
if ( nowObject.pick == targetDate.pick ) {
klasses.push( settings.klass.now )
}
// Add the `selected` class if something's selected and the time matches.
if ( isSelected ) {
klasses.push( settings.klass.selected )
}
// Add the `highlighted` class if something's highlighted and the time matches.
if ( isHighlighted ) {
klasses.push( settings.klass.highlighted )
}
// Add the `disabled` class if something's disabled and the object matches.
if ( isDisabled ) {
klasses.push( settings.klass.disabled )
}
return klasses.join( ' ' )
})([ settings.klass.day ]),
'data-pick=' + targetDate.pick + ' ' + _.ariaAttr({
role: 'gridcell',
label: formattedDate,
selected: isSelected && calendar.$node.val() === formattedDate ? true : null,
activedescendant: isHighlighted ? true : null,
disabled: isDisabled ? true : null
})
),
'',
_.ariaAttr({ role: 'presentation' })
] //endreturn
}
})
] //endreturn
}
})
),
settings.klass.table,
'id="' + calendar.$node[0].id + '_table' + '" ' + _.ariaAttr({
role: 'grid',
controls: calendar.$node[0].id,
readonly: true
})
) +
// * For Firefox forms to submit, make sure to set the buttons’ `type` attributes as “button”.
_.node(
'div',
_.node( 'button', settings.today, settings.klass.buttonToday,
'type=button data-pick=' + nowObject.pick +
( isOpen && !calendar.disabled(nowObject) ? '' : ' disabled' ) + ' ' +
_.ariaAttr({ controls: calendar.$node[0].id }) ) +
_.node( 'button', settings.clear, settings.klass.buttonClear,
'type=button data-clear=1' +
( isOpen ? '' : ' disabled' ) + ' ' +
_.ariaAttr({ controls: calendar.$node[0].id }) ) +
_.node('button', settings.close, settings.klass.buttonClose,
'type=button data-close=true ' +
( isOpen ? '' : ' disabled' ) + ' ' +
_.ariaAttr({ controls: calendar.$node[0].id }) ),
settings.klass.footer
) //endreturn
} //DatePicker.prototype.nodes
/**
* The date picker defaults.
*/
DatePicker.defaults = (function( prefix ) {
return {
// The title label to use for the month nav buttons
labelMonthNext: 'Next month',
labelMonthPrev: 'Previous month',
// The title label to use for the dropdown selectors
labelMonthSelect: 'Select a month',
labelYearSelect: 'Select a year',
// Months and weekdays
monthsFull: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
monthsShort: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
weekdaysFull: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
weekdaysShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
// Today and clear
today: 'Today',
clear: 'Clear',
close: 'Close',
// Picker close behavior
closeOnSelect: true,
closeOnClear: true,
// The format to show on the `input` element
format: 'd mmmm, yyyy',
// Classes
klass: {
table: prefix + 'table',
header: prefix + 'header',
navPrev: prefix + 'nav--prev',
navNext: prefix + 'nav--next',
navDisabled: prefix + 'nav--disabled',
month: prefix + 'month',
year: prefix + 'year',
selectMonth: prefix + 'select--month',
selectYear: prefix + 'select--year',
weekdays: prefix + 'weekday',
day: prefix + 'day',
disabled: prefix + 'day--disabled',
selected: prefix + 'day--selected',
highlighted: prefix + 'day--highlighted',
now: prefix + 'day--today',
infocus: prefix + 'day--infocus',
outfocus: prefix + 'day--outfocus',
footer: prefix + 'footer',
buttonClear: prefix + 'button--clear',
buttonToday: prefix + 'button--today',
buttonClose: prefix + 'button--close'
}
}
})( Picker.klasses().picker + '__' )
/**
* Extend the picker to add the date picker.
*/
Picker.extend( 'pickadate', DatePicker )
}));
/*!
* Time picker for pickadate.js v3.5.6
* http://amsul.github.io/pickadate.js/time.htm
*/
(function ( factory ) {
// AMD.
if ( typeof define == 'function' && define.amd )
define( ['picker', 'jquery'], factory )
// Node.js/browserify.
else if ( typeof exports == 'object' )
module.exports = factory( require('./picker.js'), require('jquery') )
// Browser globals.
else factory( Picker, jQuery )
}(function( Picker, $ ) {
/**
* Globals and constants
*/
var HOURS_IN_DAY = 24,
MINUTES_IN_HOUR = 60,
HOURS_TO_NOON = 12,
MINUTES_IN_DAY = HOURS_IN_DAY * MINUTES_IN_HOUR,
_ = Picker._
/**
* The time picker constructor
*/
function TimePicker( picker, settings ) {
var clock = this,
elementValue = picker.$node[ 0 ].value,
elementDataValue = picker.$node.data( 'value' ),
valueString = elementDataValue || elementValue,
formatString = elementDataValue ? settings.formatSubmit : settings.format
clock.settings = settings
clock.$node = picker.$node
// The queue of methods that will be used to build item objects.
clock.queue = {
interval: 'i',
min: 'measure create',
max: 'measure create',
now: 'now create',
select: 'parse create validate',
highlight: 'parse create validate',
view: 'parse create validate',
disable: 'deactivate',
enable: 'activate'
}
// The component's item object.
clock.item = {}
clock.item.clear = null
clock.item.interval = settings.interval || 30
clock.item.disable = ( settings.disable || [] ).slice( 0 )
clock.item.enable = -(function( collectionDisabled ) {
return collectionDisabled[ 0 ] === true ? collectionDisabled.shift() : -1
})( clock.item.disable )
clock.
set( 'min', settings.min ).
set( 'max', settings.max ).
set( 'now' )
// When there’s a value, set the `select`, which in turn
// also sets the `highlight` and `view`.
if ( valueString ) {
clock.set( 'select', valueString, {
format: formatString
})
}
// If there’s no value, default to highlighting “today”.
else {
clock.
set( 'select', null ).
set( 'highlight', clock.item.now )
}
// The keycode to movement mapping.
clock.key = {
40: 1, // Down
38: -1, // Up
39: 1, // Right
37: -1, // Left
go: function( timeChange ) {
clock.set(
'highlight',
clock.item.highlight.pick + timeChange * clock.item.interval,
{ interval: timeChange * clock.item.interval }
)
this.render()
}
}
// Bind some picker events.
picker.
on( 'render', function() {
var $pickerHolder = picker.$root.children(),
$viewset = $pickerHolder.find( '.' + settings.klass.viewset ),
vendors = function( prop ) {
return ['webkit', 'moz', 'ms', 'o', ''].map(function( vendor ) {
return ( vendor ? '-' + vendor + '-' : '' ) + prop
})
},
animations = function( $el, state ) {
vendors( 'transform' ).map(function( prop ) {
$el.css( prop, state )
})
vendors( 'transition' ).map(function( prop ) {
$el.css( prop, state )
})
}
if ( $viewset.length ) {
animations( $pickerHolder, 'none' )
$pickerHolder[ 0 ].scrollTop = ~~$viewset.position().top - ( $viewset[ 0 ].clientHeight * 2 )
animations( $pickerHolder, '' )
}
}, 1 ).
on( 'open', function() {
picker.$root.find( 'button' ).attr( 'disabled', false )
}, 1 ).
on( 'close', function() {
picker.$root.find( 'button' ).attr( 'disabled', true )
}, 1 )
} //TimePicker
/**
* Set a timepicker item object.
*/
TimePicker.prototype.set = function( type, value, options ) {
var clock = this,
clockItem = clock.item
// If the value is `null` just set it immediately.
if ( value === null ) {
if ( type == 'clear' ) type = 'select'
clockItem[ type ] = value
return clock
}
// Otherwise go through the queue of methods, and invoke the functions.
// Update this as the time unit, and set the final value as this item.
// * In the case of `enable`, keep the queue but set `disable` instead.
// And in the case of `flip`, keep the queue but set `enable` instead.
clockItem[ ( type == 'enable' ? 'disable' : type == 'flip' ? 'enable' : type ) ] = clock.queue[ type ].split( ' ' ).map( function( method ) {
value = clock[ method ]( type, value, options )
return value
}).pop()
// Check if we need to cascade through more updates.
if ( type == 'select' ) {
clock.set( 'highlight', clockItem.select, options )
}
else if ( type == 'highlight' ) {
clock.set( 'view', clockItem.highlight, options )
}
else if ( type == 'interval' ) {
clock.
set( 'min', clockItem.min, options ).
set( 'max', clockItem.max, options )
}
else if ( type.match( /^(flip|min|max|disable|enable)$/ ) ) {
if ( clockItem.select && clock.disabled( clockItem.select ) ) {
clock.set( 'select', value, options )
}
if ( clockItem.highlight && clock.disabled( clockItem.highlight ) ) {
clock.set( 'highlight', value, options )
}
if ( type == 'min' ) {
clock.set( 'max', clockItem.max, options )
}
}
return clock
} //TimePicker.prototype.set
/**
* Get a timepicker item object.
*/
TimePicker.prototype.get = function( type ) {
return this.item[ type ]
} //TimePicker.prototype.get
/**
* Create a picker time object.
*/
TimePicker.prototype.create = function( type, value, options ) {
var clock = this
// If there’s no value, use the type as the value.
value = value === undefined ? type : value
// If it’s a date object, convert it into an array.
if ( _.isDate( value ) ) {
value = [ value.getHours(), value.getMinutes() ]
}
// If it’s an object, use the “pick” value.
if ( $.isPlainObject( value ) && _.isInteger( value.pick ) ) {
value = value.pick
}
// If it’s an array, convert it into minutes.
else if ( $.isArray( value ) ) {
value = +value[ 0 ] * MINUTES_IN_HOUR + (+value[ 1 ])
}
// If no valid value is passed, set it to “now”.
else if ( !_.isInteger( value ) ) {
value = clock.now( type, value, options )
}
// If we’re setting the max, make sure it’s greater than the min.
if ( type == 'max' && value < clock.item.min.pick ) {
value += MINUTES_IN_DAY
}
// If the value doesn’t fall directly on the interval,
// add one interval to indicate it as “passed”.
if ( type != 'min' && type != 'max' && (value - clock.item.min.pick) % clock.item.interval !== 0 ) {
value += clock.item.interval
}
// Normalize it into a “reachable” interval.
value = clock.normalize( type, value, options )
// Return the compiled object.
return {
// Divide to get hours from minutes.
hour: ~~( HOURS_IN_DAY + value / MINUTES_IN_HOUR ) % HOURS_IN_DAY,
// The remainder is the minutes.
mins: ( MINUTES_IN_HOUR + value % MINUTES_IN_HOUR ) % MINUTES_IN_HOUR,
// The time in total minutes.
time: ( MINUTES_IN_DAY + value ) % MINUTES_IN_DAY,
// Reference to the “relative” value to pick.
pick: value % MINUTES_IN_DAY
}
} //TimePicker.prototype.create
/**
* Create a range limit object using an array, date object,
* literal “true”, or integer relative to another time.
*/
TimePicker.prototype.createRange = function( from, to ) {
var clock = this,
createTime = function( time ) {
if ( time === true || $.isArray( time ) || _.isDate( time ) ) {
return clock.create( time )
}
return time
}
// Create objects if possible.
if ( !_.isInteger( from ) ) {
from = createTime( from )
}
if ( !_.isInteger( to ) ) {
to = createTime( to )
}
// Create relative times.
if ( _.isInteger( from ) && $.isPlainObject( to ) ) {
from = [ to.hour, to.mins + ( from * clock.settings.interval ) ];
}
else if ( _.isInteger( to ) && $.isPlainObject( from ) ) {
to = [ from.hour, from.mins + ( to * clock.settings.interval ) ];
}
return {
from: createTime( from ),
to: createTime( to )
}
} //TimePicker.prototype.createRange
/**
* Check if a time unit falls within a time range object.
*/
TimePicker.prototype.withinRange = function( range, timeUnit ) {
range = this.createRange(range.from, range.to)
return timeUnit.pick >= range.from.pick && timeUnit.pick <= range.to.pick
}
/**
* Check if two time range objects overlap.
*/
TimePicker.prototype.overlapRanges = function( one, two ) {
var clock = this
// Convert the ranges into comparable times.
one = clock.createRange( one.from, one.to )
two = clock.createRange( two.from, two.to )
return clock.withinRange( one, two.from ) || clock.withinRange( one, two.to ) ||
clock.withinRange( two, one.from ) || clock.withinRange( two, one.to )
}
/**
* Get the time relative to now.
*/
TimePicker.prototype.now = function( type, value/*, options*/ ) {
var interval = this.item.interval,
date = new Date(),
nowMinutes = date.getHours() * MINUTES_IN_HOUR + date.getMinutes(),
isValueInteger = _.isInteger( value ),
isBelowInterval
// Make sure “now” falls within the interval range.
nowMinutes -= nowMinutes % interval
// Check if the difference is less than the interval itself.
isBelowInterval = value < 0 && interval * value + nowMinutes <= -interval
// Add an interval because the time has “passed”.
nowMinutes += type == 'min' && isBelowInterval ? 0 : interval
// If the value is a number, adjust by that many intervals.
if ( isValueInteger ) {
nowMinutes += interval * (
isBelowInterval && type != 'max' ?
value + 1 :
value
)
}
// Return the final calculation.
return nowMinutes
} //TimePicker.prototype.now
/**
* Normalize minutes to be “reachable” based on the min and interval.
*/
TimePicker.prototype.normalize = function( type, value/*, options*/ ) {
var interval = this.item.interval,
minTime = this.item.min && this.item.min.pick || 0
// If setting min time, don’t shift anything.
// Otherwise get the value and min difference and then
// normalize the difference with the interval.
value -= type == 'min' ? 0 : ( value - minTime ) % interval
// Return the adjusted value.
return value
} //TimePicker.prototype.normalize
/**
* Measure the range of minutes.
*/
TimePicker.prototype.measure = function( type, value, options ) {
var clock = this
// If it’s anything false-y, set it to the default.
if ( !value ) {
value = type == 'min' ? [ 0, 0 ] : [ HOURS_IN_DAY - 1, MINUTES_IN_HOUR - 1 ]
}
// If it’s a string, parse it.
if ( typeof value == 'string' ) {
value = clock.parse( type, value )
}
// If it’s a literal true, or an integer, make it relative to now.
else if ( value === true || _.isInteger( value ) ) {
value = clock.now( type, value, options )
}
// If it’s an object already, just normalize it.
else if ( $.isPlainObject( value ) && _.isInteger( value.pick ) ) {
value = clock.normalize( type, value.pick, options )
}
return value
} ///TimePicker.prototype.measure
/**
* Validate an object as enabled.
*/
TimePicker.prototype.validate = function( type, timeObject, options ) {
var clock = this,
interval = options && options.interval ? options.interval : clock.item.interval
// Check if the object is disabled.
if ( clock.disabled( timeObject ) ) {
// Shift with the interval until we reach an enabled time.
timeObject = clock.shift( timeObject, interval )
}
// Scope the object into range.
timeObject = clock.scope( timeObject )
// Do a second check to see if we landed on a disabled min/max.
// In that case, shift using the opposite interval as before.
if ( clock.disabled( timeObject ) ) {
timeObject = clock.shift( timeObject, interval * -1 )
}
// Return the final object.
return timeObject
} //TimePicker.prototype.validate
/**
* Check if an object is disabled.
*/
TimePicker.prototype.disabled = function( timeToVerify ) {
var clock = this,
// Filter through the disabled times to check if this is one.
isDisabledMatch = clock.item.disable.filter( function( timeToDisable ) {
// If the time is a number, match the hours.
if ( _.isInteger( timeToDisable ) ) {
return timeToVerify.hour == timeToDisable
}
// If it’s an array, create the object and match the times.
if ( $.isArray( timeToDisable ) || _.isDate( timeToDisable ) ) {
return timeToVerify.pick == clock.create( timeToDisable ).pick
}
// If it’s an object, match a time within the “from” and “to” range.
if ( $.isPlainObject( timeToDisable ) ) {
return clock.withinRange( timeToDisable, timeToVerify )
}
})
// If this time matches a disabled time, confirm it’s not inverted.
isDisabledMatch = isDisabledMatch.length && !isDisabledMatch.filter(function( timeToDisable ) {
return $.isArray( timeToDisable ) && timeToDisable[2] == 'inverted' ||
$.isPlainObject( timeToDisable ) && timeToDisable.inverted
}).length
// If the clock is "enabled" flag is flipped, flip the condition.
return clock.item.enable === -1 ? !isDisabledMatch : isDisabledMatch ||
timeToVerify.pick < clock.item.min.pick ||
timeToVerify.pick > clock.item.max.pick
} //TimePicker.prototype.disabled
/**
* Shift an object by an interval until we reach an enabled object.
*/
TimePicker.prototype.shift = function( timeObject, interval ) {
var clock = this,
minLimit = clock.item.min.pick,
maxLimit = clock.item.max.pick/*,
safety = 1000*/
interval = interval || clock.item.interval
// Keep looping as long as the time is disabled.
while ( /*safety &&*/ clock.disabled( timeObject ) ) {
/*safety -= 1
if ( !safety ) {
throw 'Fell into an infinite loop while shifting to ' + timeObject.hour + ':' + timeObject.mins + '.'
}*/
// Increase/decrease the time by the interval and keep looping.
timeObject = clock.create( timeObject.pick += interval )
// If we've looped beyond the limits, break out of the loop.
if ( timeObject.pick <= minLimit || timeObject.pick >= maxLimit ) {
break
}
}
// Return the final object.
return timeObject
} //TimePicker.prototype.shift
/**
* Scope an object to be within range of min and max.
*/
TimePicker.prototype.scope = function( timeObject ) {
var minLimit = this.item.min.pick,
maxLimit = this.item.max.pick
return this.create( timeObject.pick > maxLimit ? maxLimit : timeObject.pick < minLimit ? minLimit : timeObject )
} //TimePicker.prototype.scope
/**
* Parse a string into a usable type.
*/
TimePicker.prototype.parse = function( type, value, options ) {
var hour, minutes, isPM, item, parseValue,
clock = this,
parsingObject = {}
// If it’s already parsed, we’re good.
if ( !value || typeof value != 'string' ) {
return value
}
// We need a `.format` to parse the value with.
if ( !( options && options.format ) ) {
options = options || {}
options.format = clock.settings.format
}
// Convert the format into an array and then map through it.
clock.formats.toArray( options.format ).map( function( label ) {
var
substring,
// Grab the formatting label.
formattingLabel = clock.formats[ label ],
// The format length is from the formatting label function or the
// label length without the escaping exclamation (!) mark.
formatLength = formattingLabel ?
_.trigger( formattingLabel, clock, [ value, parsingObject ] ) :
label.replace( /^!/, '' ).length
// If there's a format label, split the value up to the format length.
// Then add it to the parsing object with appropriate label.
if ( formattingLabel ) {
substring = value.substr( 0, formatLength )
parsingObject[ label ] = substring.match(/^\d+$/) ? +substring : substring
}
// Update the time value as the substring from format length to end.
value = value.substr( formatLength )
})
// Grab the hour and minutes from the parsing object.
for ( item in parsingObject ) {
parseValue = parsingObject[item]
if ( _.isInteger(parseValue) ) {
if ( item.match(/^(h|hh)$/i) ) {
hour = parseValue
if ( item == 'h' || item == 'hh' ) {
hour %= 12
}
}
else if ( item == 'i' ) {
minutes = parseValue
}
}
else if ( item.match(/^a$/i) && parseValue.match(/^p/i) && ('h' in parsingObject || 'hh' in parsingObject) ) {
isPM = true
}
}
// Calculate it in minutes and return.
return (isPM ? hour + 12 : hour) * MINUTES_IN_HOUR + minutes
} //TimePicker.prototype.parse
/**
* Various formats to display the object in.
*/
TimePicker.prototype.formats = {
h: function( string, timeObject ) {
// If there's string, then get the digits length.
// Otherwise return the selected hour in "standard" format.
return string ? _.digits( string ) : timeObject.hour % HOURS_TO_NOON || HOURS_TO_NOON
},
hh: function( string, timeObject ) {
// If there's a string, then the length is always 2.
// Otherwise return the selected hour in "standard" format with a leading zero.
return string ? 2 : _.lead( timeObject.hour % HOURS_TO_NOON || HOURS_TO_NOON )
},
H: function( string, timeObject ) {
// If there's string, then get the digits length.
// Otherwise return the selected hour in "military" format as a string.
return string ? _.digits( string ) : '' + ( timeObject.hour % 24 )
},
HH: function( string, timeObject ) {
// If there's string, then get the digits length.
// Otherwise return the selected hour in "military" format with a leading zero.
return string ? _.digits( string ) : _.lead( timeObject.hour % 24 )
},
i: function( string, timeObject ) {
// If there's a string, then the length is always 2.
// Otherwise return the selected minutes.
return string ? 2 : _.lead( timeObject.mins )
},
a: function( string, timeObject ) {
// If there's a string, then the length is always 4.
// Otherwise check if it's more than "noon" and return either am/pm.
return string ? 4 : MINUTES_IN_DAY / 2 > timeObject.time % MINUTES_IN_DAY ? 'a.m.' : 'p.m.'
},
A: function( string, timeObject ) {
// If there's a string, then the length is always 2.
// Otherwise check if it's more than "noon" and return either am/pm.
return string ? 2 : MINUTES_IN_DAY / 2 > timeObject.time % MINUTES_IN_DAY ? 'AM' : 'PM'
},
// Create an array by splitting the formatting string passed.
toArray: function( formatString ) { return formatString.split( /(h{1,2}|H{1,2}|i|a|A|!.)/g ) },
// Format an object into a string using the formatting options.
toString: function ( formatString, itemObject ) {
var clock = this
return clock.formats.toArray( formatString ).map( function( label ) {
return _.trigger( clock.formats[ label ], clock, [ 0, itemObject ] ) || label.replace( /^!/, '' )
}).join( '' )
}
} //TimePicker.prototype.formats
/**
* Check if two time units are the exact.
*/
TimePicker.prototype.isTimeExact = function( one, two ) {
var clock = this
// When we’re working with minutes, do a direct comparison.
if (
( _.isInteger( one ) && _.isInteger( two ) ) ||
( typeof one == 'boolean' && typeof two == 'boolean' )
) {
return one === two
}
// When we’re working with time representations, compare the “pick” value.
if (
( _.isDate( one ) || $.isArray( one ) ) &&
( _.isDate( two ) || $.isArray( two ) )
) {
return clock.create( one ).pick === clock.create( two ).pick
}
// When we’re working with range objects, compare the “from” and “to”.
if ( $.isPlainObject( one ) && $.isPlainObject( two ) ) {
return clock.isTimeExact( one.from, two.from ) && clock.isTimeExact( one.to, two.to )
}
return false
}
/**
* Check if two time units overlap.
*/
TimePicker.prototype.isTimeOverlap = function( one, two ) {
var clock = this
// When we’re working with an integer, compare the hours.
if ( _.isInteger( one ) && ( _.isDate( two ) || $.isArray( two ) ) ) {
return one === clock.create( two ).hour
}
if ( _.isInteger( two ) && ( _.isDate( one ) || $.isArray( one ) ) ) {
return two === clock.create( one ).hour
}
// When we’re working with range objects, check if the ranges overlap.
if ( $.isPlainObject( one ) && $.isPlainObject( two ) ) {
return clock.overlapRanges( one, two )
}
return false
}
/**
* Flip the “enabled” state.
*/
TimePicker.prototype.flipEnable = function(val) {
var itemObject = this.item
itemObject.enable = val || (itemObject.enable == -1 ? 1 : -1)
}
/**
* Mark a collection of times as “disabled”.
*/
TimePicker.prototype.deactivate = function( type, timesToDisable ) {
var clock = this,
disabledItems = clock.item.disable.slice(0)
// If we’re flipping, that’s all we need to do.
if ( timesToDisable == 'flip' ) {
clock.flipEnable()
}
else if ( timesToDisable === false ) {
clock.flipEnable(1)
disabledItems = []
}
else if ( timesToDisable === true ) {
clock.flipEnable(-1)
disabledItems = []
}
// Otherwise go through the times to disable.
else {
timesToDisable.map(function( unitToDisable ) {
var matchFound
// When we have disabled items, check for matches.
// If something is matched, immediately break out.
for ( var index = 0; index < disabledItems.length; index += 1 ) {
if ( clock.isTimeExact( unitToDisable, disabledItems[index] ) ) {
matchFound = true
break
}
}
// If nothing was found, add the validated unit to the collection.
if ( !matchFound ) {
if (
_.isInteger( unitToDisable ) ||
_.isDate( unitToDisable ) ||
$.isArray( unitToDisable ) ||
( $.isPlainObject( unitToDisable ) && unitToDisable.from && unitToDisable.to )
) {
disabledItems.push( unitToDisable )
}
}
})
}
// Return the updated collection.
return disabledItems
} //TimePicker.prototype.deactivate
/**
* Mark a collection of times as “enabled”.
*/
TimePicker.prototype.activate = function( type, timesToEnable ) {
var clock = this,
disabledItems = clock.item.disable,
disabledItemsCount = disabledItems.length
// If we’re flipping, that’s all we need to do.
if ( timesToEnable == 'flip' ) {
clock.flipEnable()
}
else if ( timesToEnable === true ) {
clock.flipEnable(1)
disabledItems = []
}
else if ( timesToEnable === false ) {
clock.flipEnable(-1)
disabledItems = []
}
// Otherwise go through the disabled times.
else {
timesToEnable.map(function( unitToEnable ) {
var matchFound,
disabledUnit,
index,
isRangeMatched
// Go through the disabled items and try to find a match.
for ( index = 0; index < disabledItemsCount; index += 1 ) {
disabledUnit = disabledItems[index]
// When an exact match is found, remove it from the collection.
if ( clock.isTimeExact( disabledUnit, unitToEnable ) ) {
matchFound = disabledItems[index] = null
isRangeMatched = true
break
}
// When an overlapped match is found, add the “inverted” state to it.
else if ( clock.isTimeOverlap( disabledUnit, unitToEnable ) ) {
if ( $.isPlainObject( unitToEnable ) ) {
unitToEnable.inverted = true
matchFound = unitToEnable
}
else if ( $.isArray( unitToEnable ) ) {
matchFound = unitToEnable
if ( !matchFound[2] ) matchFound.push( 'inverted' )
}
else if ( _.isDate( unitToEnable ) ) {
matchFound = [ unitToEnable.getFullYear(), unitToEnable.getMonth(), unitToEnable.getDate(), 'inverted' ]
}
break
}
}
// If a match was found, remove a previous duplicate entry.
if ( matchFound ) for ( index = 0; index < disabledItemsCount; index += 1 ) {
if ( clock.isTimeExact( disabledItems[index], unitToEnable ) ) {
disabledItems[index] = null
break
}
}
// In the event that we’re dealing with an overlap of range times,
// make sure there are no “inverted” times because of it.
if ( isRangeMatched ) for ( index = 0; index < disabledItemsCount; index += 1 ) {
if ( clock.isTimeOverlap( disabledItems[index], unitToEnable ) ) {
disabledItems[index] = null
break
}
}
// If something is still matched, add it into the collection.
if ( matchFound ) {
disabledItems.push( matchFound )
}
})
}
// Return the updated collection.
return disabledItems.filter(function( val ) { return val != null })
} //TimePicker.prototype.activate
/**
* The division to use for the range intervals.
*/
TimePicker.prototype.i = function( type, value/*, options*/ ) {
return _.isInteger( value ) && value > 0 ? value : this.item.interval
}
/**
* Create a string for the nodes in the picker.
*/
TimePicker.prototype.nodes = function( isOpen ) {
var
clock = this,
settings = clock.settings,
selectedObject = clock.item.select,
highlightedObject = clock.item.highlight,
viewsetObject = clock.item.view,
disabledCollection = clock.item.disable
return _.node(
'ul',
_.group({
min: clock.item.min.pick,
max: clock.item.max.pick,
i: clock.item.interval,
node: 'li',
item: function( loopedTime ) {
loopedTime = clock.create( loopedTime )
var timeMinutes = loopedTime.pick,
isSelected = selectedObject && selectedObject.pick == timeMinutes,
isHighlighted = highlightedObject && highlightedObject.pick == timeMinutes,
isDisabled = disabledCollection && clock.disabled( loopedTime ),
formattedTime = _.trigger( clock.formats.toString, clock, [ settings.format, loopedTime ] )
return [
_.trigger( clock.formats.toString, clock, [ _.trigger( settings.formatLabel, clock, [ loopedTime ] ) || settings.format, loopedTime ] ),
(function( klasses ) {
if ( isSelected ) {
klasses.push( settings.klass.selected )
}
if ( isHighlighted ) {
klasses.push( settings.klass.highlighted )
}
if ( viewsetObject && viewsetObject.pick == timeMinutes ) {
klasses.push( settings.klass.viewset )
}
if ( isDisabled ) {
klasses.push( settings.klass.disabled )
}
return klasses.join( ' ' )
})( [ settings.klass.listItem ] ),
'data-pick=' + loopedTime.pick + ' ' + _.ariaAttr({
role: 'option',
label: formattedTime,
selected: isSelected && clock.$node.val() === formattedTime ? true : null,
activedescendant: isHighlighted ? true : null,
disabled: isDisabled ? true : null
})
]
}
}) +
// * For Firefox forms to submit, make sure to set the button’s `type` attribute as “button”.
_.node(
'li',
_.node(
'button',
settings.clear,
settings.klass.buttonClear,
'type=button data-clear=1' + ( isOpen ? '' : ' disabled' ) + ' ' +
_.ariaAttr({ controls: clock.$node[0].id })
),
'', _.ariaAttr({ role: 'presentation' })
),
settings.klass.list,
_.ariaAttr({ role: 'listbox', controls: clock.$node[0].id })
)
} //TimePicker.prototype.nodes
/**
* Extend the picker to add the component with the defaults.
*/
TimePicker.defaults = (function( prefix ) {
return {
// Clear
clear: 'Clear',
// The format to show on the `input` element
format: 'h:i A',
// The interval between each time
interval: 30,
// Picker close behavior
closeOnSelect: true,
closeOnClear: true,
// Classes
klass: {
picker: prefix + ' ' + prefix + '--time',
holder: prefix + '__holder',
list: prefix + '__list',
listItem: prefix + '__list-item',
disabled: prefix + '__list-item--disabled',
selected: prefix + '__list-item--selected',
highlighted: prefix + '__list-item--highlighted',
viewset: prefix + '__list-item--viewset',
now: prefix + '__list-item--now',
buttonClear: prefix + '__button--clear'
}
}
})( Picker.klasses().picker )
/**
* Extend the picker to add the time picker.
*/
Picker.extend( 'pickatime', TimePicker )
}));
/*!
* pickadate.js v3.5.6, 2015/04/20
* By Amsul, http://amsul.ca
* Hosted on http://amsul.github.io/pickadate.js
* Licensed under MIT
*/
(function ( factory ) {
// AMD.
if ( typeof define == 'function' && define.amd )
define( 'picker', ['jquery'], factory )
// Node.js/browserify.
else if ( typeof exports == 'object' )
module.exports = factory( require('jquery') )
// Browser globals.
else this.Picker = factory( jQuery )
}(function( $ ) {
var $window = $( window )
var $document = $( document )
var $html = $( document.documentElement )
var supportsTransitions = document.documentElement.style.transition != null
/**
* The picker constructor that creates a blank picker.
*/
function PickerConstructor( ELEMENT, NAME, COMPONENT, OPTIONS ) {
// If there’s no element, return the picker constructor.
if ( !ELEMENT ) return PickerConstructor
var
IS_DEFAULT_THEME = false,
// The state of the picker.
STATE = {
id: ELEMENT.id || 'P' + Math.abs( ~~(Math.random() * new Date()) )
},
// Merge the defaults and options passed.
SETTINGS = COMPONENT ? $.extend( true, {}, COMPONENT.defaults, OPTIONS ) : OPTIONS || {},
// Merge the default classes with the settings classes.
CLASSES = $.extend( {}, PickerConstructor.klasses(), SETTINGS.klass ),
// The element node wrapper into a jQuery object.
$ELEMENT = $( ELEMENT ),
// Pseudo picker constructor.
PickerInstance = function() {
return this.start()
},
// The picker prototype.
P = PickerInstance.prototype = {
constructor: PickerInstance,
$node: $ELEMENT,
/**
* Initialize everything
*/
start: function() {
// If it’s already started, do nothing.
if ( STATE && STATE.start ) return P
// Update the picker states.
STATE.methods = {}
STATE.start = true
STATE.open = false
STATE.type = ELEMENT.type
// Confirm focus state, convert into text input to remove UA stylings,
// and set as readonly to prevent keyboard popup.
ELEMENT.autofocus = ELEMENT == getActiveElement()
ELEMENT.readOnly = !SETTINGS.editable
ELEMENT.id = ELEMENT.id || STATE.id
if ( ELEMENT.type != 'text' ) {
ELEMENT.type = 'text'
}
// Create a new picker component with the settings.
P.component = new COMPONENT(P, SETTINGS)
// Create the picker root and then prepare it.
P.$root = $( '<div class="' + CLASSES.picker + '" id="' + ELEMENT.id + '_root" />' )
prepareElementRoot()
// Create the picker holder and then prepare it.
P.$holder = $( createWrappedComponent() ).appendTo( P.$root )
prepareElementHolder()
// If there’s a format for the hidden input element, create the element.
if ( SETTINGS.formatSubmit ) {
prepareElementHidden()
}
// Prepare the input element.
prepareElement()
// Insert the hidden input as specified in the settings.
if ( SETTINGS.containerHidden ) $( SETTINGS.containerHidden ).append( P._hidden )
else $ELEMENT.after( P._hidden )
// Insert the root as specified in the settings.
if ( SETTINGS.container ) $( SETTINGS.container ).append( P.$root )
else $ELEMENT.after( P.$root )
// Bind the default component and settings events.
P.on({
start: P.component.onStart,
render: P.component.onRender,
stop: P.component.onStop,
open: P.component.onOpen,
close: P.component.onClose,
set: P.component.onSet
}).on({
start: SETTINGS.onStart,
render: SETTINGS.onRender,
stop: SETTINGS.onStop,
open: SETTINGS.onOpen,
close: SETTINGS.onClose,
set: SETTINGS.onSet
})
// Once we’re all set, check the theme in use.
IS_DEFAULT_THEME = isUsingDefaultTheme( P.$holder[0] )
// If the element has autofocus, open the picker.
if ( ELEMENT.autofocus ) {
P.open()
}
// Trigger queued the “start” and “render” events.
return P.trigger( 'start' ).trigger( 'render' )
}, //start
/**
* Render a new picker
*/
render: function( entireComponent ) {
// Insert a new component holder in the root or box.
if ( entireComponent ) {
P.$holder = $( createWrappedComponent() )
prepareElementHolder()
P.$root.html( P.$holder )
}
else P.$root.find( '.' + CLASSES.box ).html( P.component.nodes( STATE.open ) )
// Trigger the queued “render” events.
return P.trigger( 'render' )
}, //render
/**
* Destroy everything
*/
stop: function() {
// If it’s already stopped, do nothing.
if ( !STATE.start ) return P
// Then close the picker.
P.close()
// Remove the hidden field.
if ( P._hidden ) {
P._hidden.parentNode.removeChild( P._hidden )
}
// Remove the root.
P.$root.remove()
// Remove the input class, remove the stored data, and unbind
// the events (after a tick for IE - see `P.close`).
$ELEMENT.removeClass( CLASSES.input ).removeData( NAME )
setTimeout( function() {
$ELEMENT.off( '.' + STATE.id )
}, 0)
// Restore the element state
ELEMENT.type = STATE.type
ELEMENT.readOnly = false
// Trigger the queued “stop” events.
P.trigger( 'stop' )
// Reset the picker states.
STATE.methods = {}
STATE.start = false
return P
}, //stop
/**
* Open up the picker
*/
open: function( dontGiveFocus ) {
// If it’s already open, do nothing.
if ( STATE.open ) return P
// Add the “active” class.
$ELEMENT.addClass( CLASSES.active )
aria( ELEMENT, 'expanded', true )
// * A Firefox bug, when `html` has `overflow:hidden`, results in
// killing transitions :(. So add the “opened” state on the next tick.
// Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=625289
setTimeout( function() {
// Add the “opened” class to the picker root.
P.$root.addClass( CLASSES.opened )
aria( P.$root[0], 'hidden', false )
}, 0 )
// If we have to give focus, bind the element and doc events.
if ( dontGiveFocus !== false ) {
// Set it as open.
STATE.open = true
// Prevent the page from scrolling.
if ( IS_DEFAULT_THEME ) {
$html.
css( 'overflow', 'hidden' ).
css( 'padding-right', '+=' + getScrollbarWidth() )
}
// Pass focus to the root element’s jQuery object.
focusPickerOnceOpened()
// Bind the document events.
$document.on( 'click.' + STATE.id + ' focusin.' + STATE.id, function( event ) {
var target = event.target
// If the target of the event is not the element, close the picker picker.
// * Don’t worry about clicks or focusins on the root because those don’t bubble up.
// Also, for Firefox, a click on an `option` element bubbles up directly
// to the doc. So make sure the target wasn't the doc.
// * In Firefox stopPropagation() doesn’t prevent right-click events from bubbling,
// which causes the picker to unexpectedly close when right-clicking it. So make
// sure the event wasn’t a right-click.
if ( target != ELEMENT && target != document && event.which != 3 ) {
// If the target was the holder that covers the screen,
// keep the element focused to maintain tabindex.
P.close( target === P.$holder[0] )
}
}).on( 'keydown.' + STATE.id, function( event ) {
var
// Get the keycode.
keycode = event.keyCode,
// Translate that to a selection change.
keycodeToMove = P.component.key[ keycode ],
// Grab the target.
target = event.target
// On escape, close the picker and give focus.
if ( keycode == 27 ) {
P.close( true )
}
// Check if there is a key movement or “enter” keypress on the element.
else if ( target == P.$holder[0] && ( keycodeToMove || keycode == 13 ) ) {
// Prevent the default action to stop page movement.
event.preventDefault()
// Trigger the key movement action.
if ( keycodeToMove ) {
PickerConstructor._.trigger( P.component.key.go, P, [ PickerConstructor._.trigger( keycodeToMove ) ] )
}
// On “enter”, if the highlighted item isn’t disabled, set the value and close.
else if ( !P.$root.find( '.' + CLASSES.highlighted ).hasClass( CLASSES.disabled ) ) {
P.set( 'select', P.component.item.highlight )
if ( SETTINGS.closeOnSelect ) {
P.close( true )
}
}
}
// If the target is within the root and “enter” is pressed,
// prevent the default action and trigger a click on the target instead.
else if ( $.contains( P.$root[0], target ) && keycode == 13 ) {
event.preventDefault()
target.click()
}
})
}
// Trigger the queued “open” events.
return P.trigger( 'open' )
}, //open
/**
* Close the picker
*/
close: function( giveFocus ) {
// If we need to give focus, do it before changing states.
if ( giveFocus ) {
if ( SETTINGS.editable ) {
ELEMENT.focus()
}
else {
// ....ah yes! It would’ve been incomplete without a crazy workaround for IE :|
// The focus is triggered *after* the close has completed - causing it
// to open again. So unbind and rebind the event at the next tick.
P.$holder.off( 'focus.toOpen' ).focus()
setTimeout( function() {
P.$holder.on( 'focus.toOpen', handleFocusToOpenEvent )
}, 0 )
}
}
// Remove the “active” class.
$ELEMENT.removeClass( CLASSES.active )
aria( ELEMENT, 'expanded', false )
// * A Firefox bug, when `html` has `overflow:hidden`, results in
// killing transitions :(. So remove the “opened” state on the next tick.
// Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=625289
setTimeout( function() {
// Remove the “opened” and “focused” class from the picker root.
P.$root.removeClass( CLASSES.opened + ' ' + CLASSES.focused )
aria( P.$root[0], 'hidden', true )
}, 0 )
// If it’s already closed, do nothing more.
if ( !STATE.open ) return P
// Set it as closed.
STATE.open = false
// Allow the page to scroll.
if ( IS_DEFAULT_THEME ) {
$html.
css( 'overflow', '' ).
css( 'padding-right', '-=' + getScrollbarWidth() )
}
// Unbind the document events.
$document.off( '.' + STATE.id )
// Trigger the queued “close” events.
return P.trigger( 'close' )
}, //close
/**
* Clear the values
*/
clear: function( options ) {
return P.set( 'clear', null, options )
}, //clear
/**
* Set something
*/
set: function( thing, value, options ) {
var thingItem, thingValue,
thingIsObject = $.isPlainObject( thing ),
thingObject = thingIsObject ? thing : {}
// Make sure we have usable options.
options = thingIsObject && $.isPlainObject( value ) ? value : options || {}
if ( thing ) {
// If the thing isn’t an object, make it one.
if ( !thingIsObject ) {
thingObject[ thing ] = value
}
// Go through the things of items to set.
for ( thingItem in thingObject ) {
// Grab the value of the thing.
thingValue = thingObject[ thingItem ]
// First, if the item exists and there’s a value, set it.
if ( thingItem in P.component.item ) {
if ( thingValue === undefined ) thingValue = null
P.component.set( thingItem, thingValue, options )
}
// Then, check to update the element value and broadcast a change.
if ( thingItem == 'select' || thingItem == 'clear' ) {
$ELEMENT.
val( thingItem == 'clear' ? '' : P.get( thingItem, SETTINGS.format ) ).
trigger( 'change' )
}
}
// Render a new picker.
P.render()
}
// When the method isn’t muted, trigger queued “set” events and pass the `thingObject`.
return options.muted ? P : P.trigger( 'set', thingObject )
}, //set
/**
* Get something
*/
get: function( thing, format ) {
// Make sure there’s something to get.
thing = thing || 'value'
// If a picker state exists, return that.
if ( STATE[ thing ] != null ) {
return STATE[ thing ]
}
// Return the submission value, if that.
if ( thing == 'valueSubmit' ) {
if ( P._hidden ) {
return P._hidden.value
}
thing = 'value'
}
// Return the value, if that.
if ( thing == 'value' ) {
return ELEMENT.value
}
// Check if a component item exists, return that.
if ( thing in P.component.item ) {
if ( typeof format == 'string' ) {
var thingValue = P.component.get( thing )
return thingValue ?
PickerConstructor._.trigger(
P.component.formats.toString,
P.component,
[ format, thingValue ]
) : ''
}
return P.component.get( thing )
}
}, //get
/**
* Bind events on the things.
*/
on: function( thing, method, internal ) {
var thingName, thingMethod,
thingIsObject = $.isPlainObject( thing ),
thingObject = thingIsObject ? thing : {}
if ( thing ) {
// If the thing isn’t an object, make it one.
if ( !thingIsObject ) {
thingObject[ thing ] = method
}
// Go through the things to bind to.
for ( thingName in thingObject ) {
// Grab the method of the thing.
thingMethod = thingObject[ thingName ]
// If it was an internal binding, prefix it.
if ( internal ) {
thingName = '_' + thingName
}
// Make sure the thing methods collection exists.
STATE.methods[ thingName ] = STATE.methods[ thingName ] || []
// Add the method to the relative method collection.
STATE.methods[ thingName ].push( thingMethod )
}
}
return P
}, //on
/**
* Unbind events on the things.
*/
off: function() {
var i, thingName,
names = arguments;
for ( i = 0, namesCount = names.length; i < namesCount; i += 1 ) {
thingName = names[i]
if ( thingName in STATE.methods ) {
delete STATE.methods[thingName]
}
}
return P
},
/**
* Fire off method events.
*/
trigger: function( name, data ) {
var _trigger = function( name ) {
var methodList = STATE.methods[ name ]
if ( methodList ) {
methodList.map( function( method ) {
PickerConstructor._.trigger( method, P, [ data ] )
})
}
}
_trigger( '_' + name )
_trigger( name )
return P
} //trigger
} //PickerInstance.prototype
/**
* Wrap the picker holder components together.
*/
function createWrappedComponent() {
// Create a picker wrapper holder
return PickerConstructor._.node( 'div',
// Create a picker wrapper node
PickerConstructor._.node( 'div',
// Create a picker frame
PickerConstructor._.node( 'div',
// Create a picker box node
PickerConstructor._.node( 'div',
// Create the components nodes.
P.component.nodes( STATE.open ),
// The picker box class
CLASSES.box
),
// Picker wrap class
CLASSES.wrap
),
// Picker frame class
CLASSES.frame
),
// Picker holder class
CLASSES.holder,
'tabindex="-1"'
) //endreturn
} //createWrappedComponent
/**
* Prepare the input element with all bindings.
*/
function prepareElement() {
$ELEMENT.
// Store the picker data by component name.
data(NAME, P).
// Add the “input” class name.
addClass(CLASSES.input).
// If there’s a `data-value`, update the value of the element.
val( $ELEMENT.data('value') ?
P.get('select', SETTINGS.format) :
ELEMENT.value
)
// Only bind keydown events if the element isn’t editable.
if ( !SETTINGS.editable ) {
$ELEMENT.
// On focus/click, open the picker.
on( 'focus.' + STATE.id + ' click.' + STATE.id, function(event) {
event.preventDefault()
P.open()
}).
// Handle keyboard event based on the picker being opened or not.
on( 'keydown.' + STATE.id, handleKeydownEvent )
}
// Update the aria attributes.
aria(ELEMENT, {
haspopup: true,
expanded: false,
readonly: false,
owns: ELEMENT.id + '_root'
})
}
/**
* Prepare the root picker element with all bindings.
*/
function prepareElementRoot() {
aria( P.$root[0], 'hidden', true )
}
/**
* Prepare the holder picker element with all bindings.
*/
function prepareElementHolder() {
P.$holder.
on({
// For iOS8.
keydown: handleKeydownEvent,
'focus.toOpen': handleFocusToOpenEvent,
blur: function() {
// Remove the “target” class.
$ELEMENT.removeClass( CLASSES.target )
},
// When something within the holder is focused, stop from bubbling
// to the doc and remove the “focused” state from the root.
focusin: function( event ) {
P.$root.removeClass( CLASSES.focused )
event.stopPropagation()
},
// When something within the holder is clicked, stop it
// from bubbling to the doc.
'mousedown click': function( event ) {
var target = event.target
// Make sure the target isn’t the root holder so it can bubble up.
if ( target != P.$holder[0] ) {
event.stopPropagation()
// * For mousedown events, cancel the default action in order to
// prevent cases where focus is shifted onto external elements
// when using things like jQuery mobile or MagnificPopup (ref: #249 & #120).
// Also, for Firefox, don’t prevent action on the `option` element.
if ( event.type == 'mousedown' && !$( target ).is( 'input, select, textarea, button, option' )) {
event.preventDefault()
// Re-focus onto the holder so that users can click away
// from elements focused within the picker.
P.$holder[0].focus()
}
}
}
}).
// If there’s a click on an actionable element, carry out the actions.
on( 'click', '[data-pick], [data-nav], [data-clear], [data-close]', function() {
var $target = $( this ),
targetData = $target.data(),
targetDisabled = $target.hasClass( CLASSES.navDisabled ) || $target.hasClass( CLASSES.disabled ),
// * For IE, non-focusable elements can be active elements as well
// (http://stackoverflow.com/a/2684561).
activeElement = getActiveElement()
activeElement = activeElement && ( activeElement.type || activeElement.href )
// If it’s disabled or nothing inside is actively focused, re-focus the element.
if ( targetDisabled || activeElement && !$.contains( P.$root[0], activeElement ) ) {
P.$holder[0].focus()
}
// If something is superficially changed, update the `highlight` based on the `nav`.
if ( !targetDisabled && targetData.nav ) {
P.set( 'highlight', P.component.item.highlight, { nav: targetData.nav } )
}
// If something is picked, set `select` then close with focus.
else if ( !targetDisabled && 'pick' in targetData ) {
P.set( 'select', targetData.pick )
if ( SETTINGS.closeOnSelect ) {
P.close( true )
}
}
// If a “clear” button is pressed, empty the values and close with focus.
else if ( targetData.clear ) {
P.clear()
if ( SETTINGS.closeOnClear ) {
P.close( true )
}
}
else if ( targetData.close ) {
P.close( true )
}
}) //P.$holder
}
/**
* Prepare the hidden input element along with all bindings.
*/
function prepareElementHidden() {
var name
if ( SETTINGS.hiddenName === true ) {
name = ELEMENT.name
ELEMENT.name = ''
}
else {
name = [
typeof SETTINGS.hiddenPrefix == 'string' ? SETTINGS.hiddenPrefix : '',
typeof SETTINGS.hiddenSuffix == 'string' ? SETTINGS.hiddenSuffix : '_submit'
]
name = name[0] + ELEMENT.name + name[1]
}
P._hidden = $(
'<input ' +
'type=hidden ' +
// Create the name using the original input’s with a prefix and suffix.
'name="' + name + '"' +
// If the element has a value, set the hidden value as well.
(
$ELEMENT.data('value') || ELEMENT.value ?
' value="' + P.get('select', SETTINGS.formatSubmit) + '"' :
''
) +
'>'
)[0]
$ELEMENT.
// If the value changes, update the hidden input with the correct format.
on('change.' + STATE.id, function() {
P._hidden.value = ELEMENT.value ?
P.get('select', SETTINGS.formatSubmit) :
''
})
}
// Wait for transitions to end before focusing the holder. Otherwise, while
// using the `container` option, the view jumps to the container.
function focusPickerOnceOpened() {
if (IS_DEFAULT_THEME && supportsTransitions) {
P.$holder.find('.' + CLASSES.frame).one('transitionend', function() {
P.$holder[0].focus()
})
}
else {
P.$holder[0].focus()
}
}
function handleFocusToOpenEvent(event) {
// Stop the event from propagating to the doc.
event.stopPropagation()
// Add the “target” class.
$ELEMENT.addClass( CLASSES.target )
// Add the “focused” class to the root.
P.$root.addClass( CLASSES.focused )
// And then finally open the picker.
P.open()
}
// For iOS8.
function handleKeydownEvent( event ) {
var keycode = event.keyCode,
// Check if one of the delete keys was pressed.
isKeycodeDelete = /^(8|46)$/.test(keycode)
// For some reason IE clears the input value on “escape”.
if ( keycode == 27 ) {
P.close( true )
return false
}
// Check if `space` or `delete` was pressed or the picker is closed with a key movement.
if ( keycode == 32 || isKeycodeDelete || !STATE.open && P.component.key[keycode] ) {
// Prevent it from moving the page and bubbling to doc.
event.preventDefault()
event.stopPropagation()
// If `delete` was pressed, clear the values and close the picker.
// Otherwise open the picker.
if ( isKeycodeDelete ) { P.clear().close() }
else { P.open() }
}
}
// Return a new picker instance.
return new PickerInstance()
} //PickerConstructor
/**
* The default classes and prefix to use for the HTML classes.
*/
PickerConstructor.klasses = function( prefix ) {
prefix = prefix || 'picker'
return {
picker: prefix,
opened: prefix + '--opened',
focused: prefix + '--focused',
input: prefix + '__input',
active: prefix + '__input--active',
target: prefix + '__input--target',
holder: prefix + '__holder',
frame: prefix + '__frame',
wrap: prefix + '__wrap',
box: prefix + '__box'
}
} //PickerConstructor.klasses
/**
* Check if the default theme is being used.
*/
function isUsingDefaultTheme( element ) {
var theme,
prop = 'position'
// For IE.
if ( element.currentStyle ) {
theme = element.currentStyle[prop]
}
// For normal browsers.
else if ( window.getComputedStyle ) {
theme = getComputedStyle( element )[prop]
}
return theme == 'fixed'
}
/**
* Get the width of the browser’s scrollbar.
* Taken from: https://github.com/VodkaBears/Remodal/blob/master/src/jquery.remodal.js
*/
function getScrollbarWidth() {
if ( $html.height() <= $window.height() ) {
return 0
}
var $outer = $( '<div style="visibility:hidden;width:100px" />' ).
appendTo( 'body' )
// Get the width without scrollbars.
var widthWithoutScroll = $outer[0].offsetWidth
// Force adding scrollbars.
$outer.css( 'overflow', 'scroll' )
// Add the inner div.
var $inner = $( '<div style="width:100%" />' ).appendTo( $outer )
// Get the width with scrollbars.
var widthWithScroll = $inner[0].offsetWidth
// Remove the divs.
$outer.remove()
// Return the difference between the widths.
return widthWithoutScroll - widthWithScroll
}
/**
* PickerConstructor helper methods.
*/
PickerConstructor._ = {
/**
* Create a group of nodes. Expects:
* `
{
min: {Integer},
max: {Integer},
i: {Integer},
node: {String},
item: {Function}
}
* `
*/
group: function( groupObject ) {
var
// Scope for the looped object
loopObjectScope,
// Create the nodes list
nodesList = '',
// The counter starts from the `min`
counter = PickerConstructor._.trigger( groupObject.min, groupObject )
// Loop from the `min` to `max`, incrementing by `i`
for ( ; counter <= PickerConstructor._.trigger( groupObject.max, groupObject, [ counter ] ); counter += groupObject.i ) {
// Trigger the `item` function within scope of the object
loopObjectScope = PickerConstructor._.trigger( groupObject.item, groupObject, [ counter ] )
// Splice the subgroup and create nodes out of the sub nodes
nodesList += PickerConstructor._.node(
groupObject.node,
loopObjectScope[ 0 ], // the node
loopObjectScope[ 1 ], // the classes
loopObjectScope[ 2 ] // the attributes
)
}
// Return the list of nodes
return nodesList
}, //group
/**
* Create a dom node string
*/
node: function( wrapper, item, klass, attribute ) {
// If the item is false-y, just return an empty string
if ( !item ) return ''
// If the item is an array, do a join
item = $.isArray( item ) ? item.join( '' ) : item
// Check for the class
klass = klass ? ' class="' + klass + '"' : ''
// Check for any attributes
attribute = attribute ? ' ' + attribute : ''
// Return the wrapped item
return '<' + wrapper + klass + attribute + '>' + item + '</' + wrapper + '>'
}, //node
/**
* Lead numbers below 10 with a zero.
*/
lead: function( number ) {
return ( number < 10 ? '0': '' ) + number
},
/**
* Trigger a function otherwise return the value.
*/
trigger: function( callback, scope, args ) {
return typeof callback == 'function' ? callback.apply( scope, args || [] ) : callback
},
/**
* If the second character is a digit, length is 2 otherwise 1.
*/
digits: function( string ) {
return ( /\d/ ).test( string[ 1 ] ) ? 2 : 1
},
/**
* Tell if something is a date object.
*/
isDate: function( value ) {
return {}.toString.call( value ).indexOf( 'Date' ) > -1 && this.isInteger( value.getDate() )
},
/**
* Tell if something is an integer.
*/
isInteger: function( value ) {
return {}.toString.call( value ).indexOf( 'Number' ) > -1 && value % 1 === 0
},
/**
* Create ARIA attribute strings.
*/
ariaAttr: ariaAttr
} //PickerConstructor._
/**
* Extend the picker with a component and defaults.
*/
PickerConstructor.extend = function( name, Component ) {
// Extend jQuery.
$.fn[ name ] = function( options, action ) {
// Grab the component data.
var componentData = this.data( name )
// If the picker is requested, return the data object.
if ( options == 'picker' ) {
return componentData
}
// If the component data exists and `options` is a string, carry out the action.
if ( componentData && typeof options == 'string' ) {
return PickerConstructor._.trigger( componentData[ options ], componentData, [ action ] )
}
// Otherwise go through each matched element and if the component
// doesn’t exist, create a new picker using `this` element
// and merging the defaults and options with a deep copy.
return this.each( function() {
var $this = $( this )
if ( !$this.data( name ) ) {
new PickerConstructor( this, name, Component, options )
}
})
}
// Set the defaults.
$.fn[ name ].defaults = Component.defaults
} //PickerConstructor.extend
function aria(element, attribute, value) {
if ( $.isPlainObject(attribute) ) {
for ( var key in attribute ) {
ariaSet(element, key, attribute[key])
}
}
else {
ariaSet(element, attribute, value)
}
}
function ariaSet(element, attribute, value) {
element.setAttribute(
(attribute == 'role' ? '' : 'aria-') + attribute,
value
)
}
function ariaAttr(attribute, data) {
if ( !$.isPlainObject(attribute) ) {
attribute = { attribute: data }
}
data = ''
for ( var key in attribute ) {
var attr = (key == 'role' ? '' : 'aria-') + key,
attrVal = attribute[key]
data += attrVal == null ? '' : attr + '="' + attribute[key] + '"'
}
return data
}
// IE8 bug throws an error for activeElements within iframes.
function getActiveElement() {
try {
return document.activeElement
} catch ( err ) { }
}
// Expose the picker constructor.
return PickerConstructor
}));
/* ==========================================================================
$BASE-PICKER
========================================================================== */
/**
* Note: the root picker element should *NOT* be styled more than what’s here.
*/
.picker {
font-size: 16px;
text-align: left;
line-height: 1.2;
color: #000000;
position: absolute;
z-index: 10000;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/**
* The picker input element.
*/
.picker__input {
cursor: default;
}
/**
* When the picker is opened, the input element is “activated”.
*/
.picker__input.picker__input--active {
border-color: #0089ec;
}
/**
* The holder is the only “scrollable” top-level container element.
*/
.picker__holder {
width: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/*!
* Default mobile-first, responsive styling for pickadate.js
* Demo: http://amsul.github.io/pickadate.js
*/
/**
* Note: the root picker element should *NOT* be styled more than what’s here.
*/
/**
* Make the holder and frame fullscreen.
*/
.picker__holder,
.picker__frame {
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
/**
* The holder should overlay the entire screen.
*/
.picker__holder {
position: fixed;
transition: background 0.15s ease-out, -webkit-transform 0s 0.15s;
transition: background 0.15s ease-out, transform 0s 0.15s;
-webkit-backface-visibility: hidden;
}
/**
* The frame that bounds the box contents of the picker.
*/
.picker__frame {
position: absolute;
margin: 0 auto;
min-width: 256px;
max-width: 666px;
width: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
transition: all 0.15s ease-out;
}
@media (min-height: 33.875em) {
.picker__frame {
overflow: visible;
top: auto;
bottom: -100%;
max-height: 80%;
}
}
@media (min-height: 40.125em) {
.picker__frame {
margin-bottom: 7.5%;
}
}
/**
* The wrapper sets the stage to vertically align the box contents.
*/
.picker__wrap {
display: table;
width: 100%;
height: 100%;
}
@media (min-height: 33.875em) {
.picker__wrap {
display: block;
}
}
/**
* The box contains all the picker contents.
*/
.picker__box {
background: #ffffff;
display: table-cell;
vertical-align: middle;
}
@media (min-height: 26.5em) {
.picker__box {
font-size: 1.25em;
}
}
@media (min-height: 33.875em) {
.picker__box {
display: block;
font-size: 1.33em;
border: 1px solid #777777;
border-top-color: #898989;
border-bottom-width: 0;
border-radius: 5px 5px 0 0;
box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
}
}
@media (min-height: 40.125em) {
.picker__box {
font-size: 1.5em;
border-bottom-width: 1px;
border-radius: 5px;
}
}
/**
* When the picker opens...
*/
.picker--opened .picker__holder {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
zoom: 1;
background: rgba(0, 0, 0, 0.32);
transition: background 0.15s ease-out;
}
.picker--opened .picker__frame {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
@media (min-height: 33.875em) {
.picker--opened .picker__frame {
top: auto;
bottom: 0;
}
}
/* ==========================================================================
$BASE-DATE-PICKER
========================================================================== */
/**
* The picker box.
*/
.picker__box {
padding: 0 1em;
}
/**
* The header containing the month and year stuff.
*/
.picker__header {
text-align: center;
position: relative;
margin-top: .75em;
}
/**
* The month and year labels.
*/
.picker__month,
.picker__year {
font-weight: 500;
display: inline-block;
margin-left: .25em;
margin-right: .25em;
}
.picker__year {
color: #999999;
font-size: .8em;
font-style: italic;
}
/**
* The month and year selectors.
*/
.picker__select--month,
.picker__select--year {
border: 1px solid #b7b7b7;
height: 2em;
padding: .5em;
margin-left: .25em;
margin-right: .25em;
}
@media (min-width: 24.5em) {
.picker__select--month,
.picker__select--year {
margin-top: -0.5em;
}
}
.picker__select--month {
width: 35%;
}
.picker__select--year {
width: 22.5%;
}
.picker__select--month:focus,
.picker__select--year:focus {
border-color: #0089ec;
}
/**
* The month navigation buttons.
*/
.picker__nav--prev,
.picker__nav--next {
position: absolute;
padding: .5em 1.25em;
width: 1em;
height: 1em;
box-sizing: content-box;
top: -0.25em;
}
@media (min-width: 24.5em) {
.picker__nav--prev,
.picker__nav--next {
top: -0.33em;
}
}
.picker__nav--prev {
left: -1em;
padding-right: 1.25em;
}
@media (min-width: 24.5em) {
.picker__nav--prev {
padding-right: 1.5em;
}
}
.picker__nav--next {
right: -1em;
padding-left: 1.25em;
}
@media (min-width: 24.5em) {
.picker__nav--next {
padding-left: 1.5em;
}
}
.picker__nav--prev:before,
.picker__nav--next:before {
content: " ";
border-top: .5em solid transparent;
border-bottom: .5em solid transparent;
border-right: 0.75em solid #000000;
width: 0;
height: 0;
display: block;
margin: 0 auto;
}
.picker__nav--next:before {
border-right: 0;
border-left: 0.75em solid #000000;
}
.picker__nav--prev:hover,
.picker__nav--next:hover {
cursor: pointer;
color: #000000;
background: #b1dcfb;
}
.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
cursor: default;
background: none;
border-right-color: #f5f5f5;
border-left-color: #f5f5f5;
}
/**
* The calendar table of dates
*/
.picker__table {
text-align: center;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
font-size: inherit;
width: 100%;
margin-top: .75em;
margin-bottom: .5em;
}
@media (min-height: 33.875em) {
.picker__table {
margin-bottom: .75em;
}
}
.picker__table td {
margin: 0;
padding: 0;
}
/**
* The weekday labels
*/
.picker__weekday {
width: 14.285714286%;
font-size: .75em;
padding-bottom: .25em;
color: #999999;
font-weight: 500;
/* Increase the spacing a tad */
}
@media (min-height: 33.875em) {
.picker__weekday {
padding-bottom: .5em;
}
}
/**
* The days on the calendar
*/
.picker__day {
padding: .3125em 0;
font-weight: 200;
border: 1px solid transparent;
}
.picker__day--today {
position: relative;
}
.picker__day--today:before {
content: " ";
position: absolute;
top: 2px;
right: 2px;
width: 0;
height: 0;
border-top: 0.5em solid #0059bc;
border-left: .5em solid transparent;
}
.picker__day--disabled:before {
border-top-color: #aaaaaa;
}
.picker__day--outfocus {
color: #dddddd;
}
.picker__day--infocus:hover,
.picker__day--outfocus:hover {
cursor: pointer;
color: #000000;
background: #b1dcfb;
}
.picker__day--highlighted {
border-color: #0089ec;
}
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
cursor: pointer;
color: #000000;
background: #b1dcfb;
}
.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
background: #0089ec;
color: #ffffff;
}
.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
background: #f5f5f5;
border-color: #f5f5f5;
color: #dddddd;
cursor: default;
}
.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
background: #bbbbbb;
}
/**
* The footer containing the "today", "clear", and "close" buttons.
*/
.picker__footer {
text-align: center;
}
.picker__button--today,
.picker__button--clear,
.picker__button--close {
border: 1px solid #ffffff;
background: #ffffff;
font-size: .8em;
padding: .66em 0;
font-weight: bold;
width: 33%;
display: inline-block;
vertical-align: bottom;
}
.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
cursor: pointer;
color: #000000;
background: #b1dcfb;
border-bottom-color: #b1dcfb;
}
.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
background: #b1dcfb;
border-color: #0089ec;
outline: none;
}
.picker__button--today:before,
.picker__button--clear:before,
.picker__button--close:before {
position: relative;
display: inline-block;
height: 0;
}
.picker__button--today:before,
.picker__button--clear:before {
content: " ";
margin-right: .45em;
}
.picker__button--today:before {
top: -0.05em;
width: 0;
border-top: 0.66em solid #0059bc;
border-left: .66em solid transparent;
}
.picker__button--clear:before {
top: -0.25em;
width: .66em;
border-top: 3px solid #ee2200;
}
.picker__button--close:before {
content: "\D7";
top: -0.1em;
vertical-align: top;
font-size: 1.1em;
margin-right: .35em;
color: #777777;
}
.picker__button--today[disabled],
.picker__button--today[disabled]:hover {
background: #f5f5f5;
border-color: #f5f5f5;
color: #dddddd;
cursor: default;
}
.picker__button--today[disabled]:before {
border-top-color: #aaaaaa;
}
/* ==========================================================================
$DEFAULT-DATE-PICKER
========================================================================== */
/* ==========================================================================
$BASE-TIME-PICKER
========================================================================== */
/**
* The list of times.
*/
.picker__list {
list-style: none;
padding: 0.75em 0 4.2em;
margin: 0;
}
/**
* The times on the clock.
*/
.picker__list-item {
border-bottom: 1px solid #dddddd;
border-top: 1px solid #dddddd;
margin-bottom: -1px;
position: relative;
background: #ffffff;
padding: .75em 1.25em;
}
@media (min-height: 46.75em) {
.picker__list-item {
padding: .5em 1em;
}
}
/* Hovered time */
.picker__list-item:hover {
cursor: pointer;
color: #000000;
background: #b1dcfb;
border-color: #0089ec;
z-index: 10;
}
/* Highlighted and hovered/focused time */
.picker__list-item--highlighted {
border-color: #0089ec;
z-index: 10;
}
.picker__list-item--highlighted:hover,
.picker--focused .picker__list-item--highlighted {
cursor: pointer;
color: #000000;
background: #b1dcfb;
}
/* Selected and hovered/focused time */
.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected {
background: #0089ec;
color: #ffffff;
z-index: 10;
}
/* Disabled time */
.picker__list-item--disabled,
.picker__list-item--disabled:hover,
.picker--focused .picker__list-item--disabled {
background: #f5f5f5;
border-color: #f5f5f5;
color: #dddddd;
cursor: default;
border-color: #dddddd;
z-index: auto;
}
/**
* The clear button
*/
.picker--time .picker__button--clear {
display: block;
width: 80%;
margin: 1em auto 0;
padding: 1em 1.25em;
background: none;
border: 0;
font-weight: 500;
font-size: .67em;
text-align: center;
text-transform: uppercase;
color: #666;
}
.picker--time .picker__button--clear:hover,
.picker--time .picker__button--clear:focus {
color: #000000;
background: #b1dcfb;
background: #ee2200;
border-color: #ee2200;
cursor: pointer;
color: #ffffff;
outline: none;
}
.picker--time .picker__button--clear:before {
top: -0.25em;
color: #666;
font-size: 1.25em;
font-weight: bold;
}
.picker--time .picker__button--clear:hover:before,
.picker--time .picker__button--clear:focus:before {
color: #ffffff;
border-color: #ffffff;
}
/* ==========================================================================
$DEFAULT-TIME-PICKER
========================================================================== */
/**
* The frame the bounds the time picker.
*/
.picker--time .picker__frame {
min-width: 256px;
max-width: 320px;
}
/**
* The picker box.
*/
.picker--time .picker__box {
font-size: 1em;
background: #f2f2f2;
padding: 0;
}
@media (min-height: 40.125em) {
.picker--time .picker__box {
margin-bottom: 5em;
}
}