1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486 | 1
78
78
78
204
72
204
204
117
87
78
157
72
206
164
164
164
206
965
206
206
206
1
1
206
61
61
206
439
206
61
206
1656
88
1568
206
1894
92
1802
206
206
206
206
206
206
206
2
204
204
204
206
206
162
162
206
206
8
8
7
8
8
8
206
206
162
162
23
8
8
4
4
4
4
4
4
4
4
4
4
206
78
1170
1170
78
1
1
1
1
1
78
78
78
1560
1560
1560
78
78
78
78
78
78
1170
78
78
78
57
76
78
| angular.module('schemaForm').provider('schemaFormDecorators',
['$compileProvider', 'sfPathProvider', function($compileProvider, sfPathProvider) {
var defaultDecorator = '';
var decorators = {};
// Map template after decorator and type.
var templateUrl = function(name, form) {
//schemaDecorator is alias for whatever is set as default
if (name === 'sfDecorator') {
name = defaultDecorator;
}
var decorator = decorators[name];
if (decorator[form.type]) {
return decorator[form.type].template;
}
//try default
return decorator['default'].template;
};
var createDirective = function(name) {
$compileProvider.directive(name,
['$parse', '$compile', '$http', '$templateCache', '$interpolate', '$q', 'sfErrorMessage',
'sfPath','sfSelect',
function($parse, $compile, $http, $templateCache, $interpolate, $q, sfErrorMessage,
sfPath, sfSelect) {
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) {
Eif (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) {
Eif (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) {
Iif (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) {
Eif (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');
}
}
});
// Clean up the model when the corresponding form field is $destroy-ed.
// Default behavior can be supplied as a globalOption, and behavior can be overridden in the form definition.
scope.$on('$destroy', function() {
// If the entire schema form is destroyed we don't touch the model
if (!scope.externalDestructionInProgress) {
var destroyStrategy = form.destroyStrategy ||
(scope.options && scope.options.destroyStrategy) || 'remove';
// No key no model, and we might have strategy 'retain'
if (form.key && destroyStrategy !== 'retain') {
// Get the object that has the property we wan't to clear.
var obj = scope.model;
Eif (form.key.length > 1) {
obj = sfSelect(form.key.slice(0, form.key.length - 1), obj);
}
// We can get undefined here if the form hasn't been filled out entirely
Iif (obj === undefined) {
return;
}
// Type can also be a list in JSON Schema
var type = (form.schema && form.schema.type) || '';
// Empty means '',{} and [] for appropriate types and undefined for the rest
Iif (destroyStrategy === 'empty' && type.indexOf('string') !== -1) {
obj[form.key.slice(-1)] = '';
} else Iif (destroyStrategy === 'empty' && type.indexOf('object') !== -1) {
obj[form.key.slice(-1)] = {};
} else Iif (destroyStrategy === 'empty' && type.indexOf('array') !== -1) {
obj[form.key.slice(-1)] = [];
} else Iif (destroyStrategy === 'null') {
obj[form.key.slice(-1)] = null;
} else {
delete obj[form.key.slice(-1)];
}
}
}
});
}
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);
}
}
});
}
};
});
};
/**
* DEPRECATED: use defineDecorator instead.
* Create a decorator directive and its sibling "manual" use decorators.
* 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} templates, an object that maps "type" => "templateUrl"
*/
this.createDecorator = function(name, templates) {
//console.warn('schemaFormDecorators.createDecorator is DEPRECATED, use defineDecorator instead.');
decorators[name] = {'__name': name};
angular.forEach(templates, function(url, type) {
decorators[name][type] = {template: url, replace: false, builder: []};
});
Iif (!decorators[defaultDecorator]) {
defaultDecorator = name;
}
createDirective(name);
};
/**
* Create a decorator directive and its sibling "manual" use decorators.
* 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} fields, an object that maps "type" => `{ template, builder, replace}`.
attributes `builder` and `replace` are optional, and replace defaults to true.
*/
this.defineDecorator = function(name, fields) {
decorators[name] = {'__name': name}; // TODO: this feels like a hack, come up with a better way.
angular.forEach(fields, function(field, type) {
field.builder = field.builder || [];
field.replace = angular.isDefined(field.replace) ? field.replace : true;
decorators[name][type] = field;
});
Eif (!decorators[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} templates
*/
this.createDirectives = function(templates) {
angular.forEach(templates, function(url, type) {
createManualDirective(type, url);
});
};
/**
* Getter for decorator settings
* @param {string} name (optional) defaults to defaultDecorator
* @return {Object} rules and templates { rules: [],templates: {}}
*/
this.decorator = function(name) {
name = name || defaultDecorator;
return decorators[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
* @param {Function} builder (optional) builder function
* @param {boolean} replace (optional) defaults to false. Replace decorator directive with template.
*/
this.addMapping = function(name, type, url, builder, replace) {
if (decorators[name]) {
decorators[name][type] = {
template: url,
builder: builder,
replace: !!replace
};
}
};
//Service is just a getter for directive templates and rules
this.$get = function() {
return {
decorator: function(name) {
return decorators[name] || decorators[defaultDecorator];
},
defaultDecorator: defaultDecorator
};
};
//Create a default directive
createDirective('sfDecorator');
}]);
|