-
Notifications
You must be signed in to change notification settings - Fork 0
/
dynamic-form.component.js
110 lines (97 loc) · 3.39 KB
/
dynamic-form.component.js
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
angular.
module('tasyFormModule', []).
info({ version: '0.1.0' }).
component('dynamicForm', {
templateUrl: 'dynamic-form.component.html',
bindings: {
model: '=',
layout: '='
},
controller: function DynamicFormController($rootScope, $scope, $log) {
var $ctrl = this;
var layout = null;
$scope.isEdittingForm = false;
$scope.submitForm = function () {
$rootScope.$broadcast('onFormSubmit', $ctrl.model);
};
$scope.onEditForm = function () {
$scope.isEdittingForm = true;
$ctrl.layout = angular.copy($ctrl.layout);
layout = angular.copy($ctrl.layout);
};
$scope.onSaveForm = function () {
$scope.isEdittingForm = false;
$ctrl.layout = angular.copy($ctrl.layout);
$rootScope.$broadcast('onSaveForm', $ctrl.layout);
};
$scope.onCancelForm = function () {
$scope.isEdittingForm = false;
$ctrl.layout = angular.copy(layout);
};
$scope.addLine = function (collection) {
collection.push({});
};
$scope.deleteLine = function (collection, index) {
collection.splice(index, 1);
};
}
}).
directive('resizable', function () {
return {
restrict: 'A',
scope: {
resizableEnabled: '=',
resizableField: '='
},
link: function postLink(scope, elem, attrs) {
if (!scope.resizableEnabled) {
return;
}
//Desenha caixa de redimensionamento
var resizer = document.createElement('div');
resizer.className = 'resizer-top-left';
elem.append(resizer);
resizer = document.createElement('div');
resizer.className = 'resizer-top-right';
elem.append(resizer);
resizer = document.createElement('div');
resizer.className = 'resizer-bottom-left';
elem.append(resizer);
resizer = document.createElement('div');
resizer.className = 'resizer-bottom-right';
elem.append(resizer);
//Define todos os movimentos possíveis
elem.resizable({ handles: " n, e, s, w, ne, se, sw, nw" });
elem.on('resizestop', function (evt, ui) {
scope.resizableField.width = ui.size.width;
scope.resizableField.x = ui.position.left;
scope.resizableField.y = ui.position.top;
});
elem.on('resize',function(evt,ui) {
//Deixa marcado em azul
elem.addClass('selected');
});
elem.on('mouseover',function() {
elem.addClass('selected');
});
elem.on('mouseleave',function() {
elem.removeClass('selected');
});
//Ao mover
elem.on('dragstart', function(evt, ui){
// Exibe posição x, y na tela
$('.field-position').show();
});
elem.on('drag', function(evt, ui){
$('.field-position').text(ui.position.left + ' x ' + ui.position.top);
});
elem.on('dragstop',function(evt,ui) {
$('.field-position').hide();
scope.resizableField.x = ui.position.left;
scope.resizableField.y = ui.position.top;
});
//Define por onde pode mover os objetos
elem.draggable({containment: '.dynamic-form form'});
}
};
});