Replace combined field (YF + AF) with angular directive

Change-Id: Ie8ba632c1bb6a9a47c427c92aa620b7dd7c28485
This commit is contained in:
Timur Sufiev 2014-12-29 07:31:08 -08:00
parent b5cecf04b6
commit 525477601b
4 changed files with 75 additions and 144 deletions

View File

@ -139,4 +139,4 @@ i.fa-times-circle {
.merlin-panel textarea {
resize: vertical;
}
}

View File

@ -0,0 +1,16 @@
<div class="row">
<div class="col-md-5 col-sm-5 col-lg-5" style="display:none">
<div class="form-group">
<textarea class="form-control">{$ yaqlExpresion $}</textarea>
</div>
</div>
<div class="col-md-5 col-sm-5 col-lg-5">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon yaql-condition fa fa-unlock" role="button"></span>
<input type="text" class="form-control" value="{$ value $}">
<span class="input-group-addon fa fa-minus-circle"></span>
</div>
</div>
</div>
</div>

View File

@ -1,21 +1,55 @@
/**
* Created by tsufiev on 12/29/14.
*/
angular.module('hz').directive('editable', function($document) {
return {
restrict: 'E',
templateUrl: '/static/mistral/js/angular-templates/editable-popup.html',
scope: {
label: '@',
value: '@'
},
link: function(scope, element) {
angular.element(element).find('a[data-toggle="popover"]')
.popover({html: true})
.on('click', function(e) {
e.preventDefault();
return true;
});
(function() {
angular.module('hz')
.directive('editable', function() {
return {
restrict: 'E',
templateUrl: '/static/mistral/js/angular-templates/editable-popup.html',
scope: {
label: '@',
value: '@'
},
link: function(scope, element) {
angular.element(element).find('a[data-toggle="popover"]')
.popover({html: true})
.on('click', function(e) {
e.preventDefault();
return true;
});
}
};
})
.directive('yaqlFieldCombined', function() {
return {
restrict: 'E',
templateUrl: '/static/mistral/js/angular-templates/yaql-field-combined.html',
scope: {
yaqlExpression: '@',
value: '@'
},
link: function(scope, element) {
angular.element(element).find('span.yaql-condition')
.on('click', function() {
var $elt = $(this),
$inputColumn = $elt.closest('div.row').children(':first-child'),
$input;
$elt.hide();
$input = $inputColumn.show().find('textarea');
$input.focus().on('blur', function() {
$inputColumn.hide();
$elt.toggleClass('fa-lock', $input.val() !== '');
$elt.toggleClass('fa-unlock', $input.val() === '');
$elt.show();
});
});
}
}
};
});
})
})();

View File

@ -19,20 +19,6 @@
return true;
});
$('span.yaql-condition').on('click', function(e) {
var $elt = $(this),
$inputColumn = $elt.closest('div.row').children(':first-child'),
$input;
$elt.hide();
$input = $inputColumn.show().find('textarea');
$input.focus().on('blur', function() {
$inputColumn.hide();
$elt.toggleClass('fa-lock', $input.val() !== '');
$elt.toggleClass('fa-unlock', $input.val() === '');
$elt.show();
});
});
});
</script>
@ -380,38 +366,8 @@
</div>
</div>
<div id="collapse21" class="collapse in">
<div class="row">
<div class="col-md-5 col-sm-5 col-lg-5" style="display:none">
<div class="form-group">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="col-md-5 col-sm-5 col-lg-5">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon yaql-condition fa fa-unlock" role="button"></span>
<input type="text" class="form-control">
<span class="input-group-addon fa fa-minus-circle"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5 col-lg-5" style="display:none">
<div class="form-group">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="col-md-5 col-sm-5 col-lg-5">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon yaql-condition fa fa-unlock" role="button"></span>
<input type="text" class="form-control">
<span class="input-group-addon fa fa-minus-circle"></span>
</div>
</div>
</div>
</div>
<yaql-field-combined></yaql-field-combined>
<yaql-field-combined></yaql-field-combined>
</div>
</div>
<div class="section">
@ -425,22 +381,7 @@
</div>
</div>
<div id="collapse22" class="collapse in">
<div class="row">
<div class="col-md-5 col-sm-5 col-lg-5" style="display:none">
<div class="form-group">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="col-md-5 col-sm-5 col-lg-5">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon yaql-condition fa fa-unlock" role="button"></span>
<input type="text" class="form-control">
<span class="input-group-addon fa fa-minus-circle"></span>
</div>
</div>
</div>
</div>
<yaql-field-combined></yaql-field-combined>
</div>
</div>
<div class="section">
@ -454,22 +395,7 @@
</div>
</div>
<div id="collapse23" class="collapse in">
<div class="row">
<div class="col-md-5 col-sm-5 col-lg-5" style="display:none">
<div class="form-group">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="col-md-5 col-sm-5 col-lg-5">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon yaql-condition fa fa-unlock" role="button"></span>
<input type="text" class="form-control">
<span class="input-group-addon fa fa-minus-circle"></span>
</div>
</div>
</div>
</div>
<yaql-field-combined></yaql-field-combined>
</div>
</div>
</div>
@ -590,22 +516,7 @@
</div>
</div>
<div id="collapse24" class="collapse in">
<div class="row">
<div class="col-md-5 col-sm-5 col-lg-5" style="display:none">
<div class="form-group">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="col-md-5 col-sm-5 col-lg-5">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon yaql-condition fa fa-unlock" role="button"></span>
<input type="text" class="form-control">
<span class="input-group-addon fa fa-minus-circle"></span>
</div>
</div>
</div>
</div>
<yaql-field-combined></yaql-field-combined>
</div>
</div>
<div class="section">
@ -619,22 +530,7 @@
</div>
</div>
<div id="collapse25" class="collapse in">
<div class="row">
<div class="col-md-5 col-sm-5 col-lg-5" style="display:none">
<div class="form-group">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="col-md-5 col-sm-5 col-lg-5">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon yaql-condition fa fa-unlock" role="button"></span>
<input type="text" class="form-control">
<span class="input-group-addon fa fa-minus-circle"></span>
</div>
</div>
</div>
</div>
<yaql-field-combined></yaql-field-combined>
</div>
</div>
<div class="section">
@ -648,22 +544,7 @@
</div>
</div>
<div id="collapse26" class="collapse in">
<div class="row">
<div class="col-md-5 col-sm-5 col-lg-5" style="display:none">
<div class="form-group">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="col-md-5 col-sm-5 col-lg-5">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon yaql-condition fa fa-unlock" role="button"></span>
<input type="text" class="form-control">
<span class="input-group-addon fa fa-minus-circle"></span>
</div>
</div>
</div>
</div>
<yaql-field-combined></yaql-field-combined>
</div>
</div>
<div class="section">