acha-framework
Version:
is a modular framework on both client (angular.js) and server (node.js) side, it provides security, orm, ioc, obfuscation and ...
108 lines • 4.46 kB
JavaScript
(function ($, angular, underscore, window, document, undefined) {
'use strict';
angular.module('frontend.directives').factory('formElementsService', [function () {
var blacklist = [
'directive',
'label',
'labelTranslate'
];
return {
generate: function (model) {
var form = $('<form class="generated-form-element row"></form>');
model = model || {};
model.$groups = model.$groups || { 'column-1': { size: 'col-md-12' } };
var $groups = {};
Object.keys(model.$groups).forEach(function (key) {
var container = $('<div class="{0}"><div class="panel panel-white"> <div class="panel-heading"><h3 class="panel-title">{{:: {1}.title|textOrTranslate:{1}.titleTranslate }}</h3></div> <div class="panel-body"></div> </div></div>'.format([
model.$groups[key].size || 'col-md-12',
'$parent.model.$groups[\'{0}\']'.format([key]) || ' '
]));
$groups[key] = container.find('.panel-body');
form.append(container);
});
Object.keys(model).forEach(function (key, index) {
if (key === '$groups')
return;
if (model[key].visible === undefined)
model[key].visible = true;
if (model[key].disabled === undefined)
model[key].disabled = false;
var group = $('<div class=\'form-group\'></div>');
group.attr('ng-if', '$parent.model[\'{0}\'].visible'.format([key]));
var label = $('<label>{{::$parent.$parent.model[\'{0}\'].label|textOrTranslate:$parent.$parent.model[\'{0}\'].labelTranslate}}</label>'.format([key]));
group.append(label);
var directive = $('<{0}></{0}>'.format([model[key].directive]));
Object.keys(model[key]).forEach(function (directiveKey) {
if (blacklist.indexOf(directiveKey) === -1) {
directive.attr(directiveKey.toKebabCase(), '$parent.$parent.model[\'{0}\'][\'{1}\']'.format([
key,
directiveKey
]));
}
});
group.append(directive);
$groups[model[key].group || 'column-1'].append(group);
});
return form;
}
};
}]).directive('formElements', [
'$compile',
'$templateCache',
'formElementsService',
function ($compile, $templateCache, formElementsService) {
return {
restrict: 'E',
replace: true,
scope: {
tag: '<?',
disabled: '=?',
visible: '=?',
cssClass: '=?',
model: '=?',
waiting: '=?'
},
compile: function () {
var $template = $('<div ng-show="visible" class="af-form-elements af-component {{::cssClass}}"></div>');
return {
pre: function (scope, element, attr) {
scope.vm = {};
scope.vm.init = function () {
if (angular.isUndefined(scope.disabled)) {
scope.disabled = false;
}
if (angular.isUndefined(scope.visible)) {
scope.visible = true;
}
if (angular.isUndefined(scope.cssClass)) {
scope.cssClass = '';
}
if (angular.isUndefined(scope.waiting)) {
scope.waiting = false;
}
scope.vm.bind();
};
scope.vm.bind = function () {
element.append('<div ng-show="visible" class="af-form-elements af-component {{::cssClass}}"></div>');
scope.$watch('model', scope.vm.build);
};
scope.vm.build = function () {
var form = $template.find('.generated-form-element');
if (form.children().size() > 0) {
form.children().each(function (idx, child) {
child.scope().destroy();
child.remove();
});
}
var generated = formElementsService.generate(scope.model);
element.find('.af-form-elements').append(generated);
$compile(generated)(scope.$new(true));
};
scope.vm.init();
}
};
}
};
}
]);
}(jQuery, angular, _, window, document));