new: margins can be specified in the web UI

This commit is contained in:
Philipp Klaus 2017-02-10 10:07:38 +01:00
parent dc79624e1d
commit 7bf6b40c94

View File

@ -78,7 +78,15 @@
</div> </div>
<div id="collapse3" class="panel-collapse collapse"> <div id="collapse3" class="panel-collapse collapse">
<div class="chooser panel-body"> <div class="chooser panel-body">
Some more settings will show here, once implemented. <label for="marginTop">Margin Top:</label>
<input id="marginTop" class="form-control" type="number" min="0" max="200" value="24" onChange="preview()" required>
<label for="marginBottom">Margin Bottom:</label>
<input id="marginBottom" class="form-control" type="number" min="0" max="200" value="45" onChange="preview()" required>
<label for="marginLeft">Margin Left:</label>
<input id="marginLeft" class="form-control" type="number" min="0" max="200" value="35" onChange="preview()" required>
<label for="marginRight">Margin Right:</label>
<input id="marginRight" class="form-control" type="number" min="0" max="200" value="35" onChange="preview()" required>
(margins in % of font size)
</div> <!-- class="chooser panel-body" --> </div> <!-- class="chooser panel-body" -->
</div> </div>
</div> </div>
@ -125,11 +133,28 @@ function formData() {
font_size: $('#fontSize').val(), font_size: $('#fontSize').val(),
label_size: $('#labelSize option:selected').val(), label_size: $('#labelSize option:selected').val(),
align: $('input[name=fontAlign]:checked').val(), align: $('input[name=fontAlign]:checked').val(),
orientation: $('input[name=orientation]:checked').val() orientation: $('input[name=orientation]:checked').val(),
margin_top: $('#marginTop').val(),
margin_bottom: $('#marginBottom').val(),
margin_left: $('#marginLeft').val(),
margin_right: $('#marginRight').val()
} }
} }
function preview() { function preview() {
// http://stackoverflow.com/a/16284355
// http://stackoverflow.com/a/7697455
if ($('input[name=orientation]:checked').val() == 'standard') {
$('#marginTop').prop('disabled', false).removeAttr('title');
$('#marginBottom').prop('disabled',false).removeAttr('title');
$('#marginLeft').prop('disabled', true).prop('title', 'Only relevant if rotated orientation is selected.');
$('#marginRight').prop('disabled', true).prop('title', 'Only relevant if rotated orientation is selected.');
} else {
$('#marginTop').prop('disabled', true).prop('title', 'Only relevant if standard orientation is selected.');
$('#marginBottom').prop('disabled',true).prop('title', 'Only relevant if standard orientation is selected.');
$('#marginLeft').prop('disabled', false).removeAttr('title');
$('#marginRight').prop('disabled', false).removeAttr('title');
}
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: '/api/preview/text?return_format=base64', url: '/api/preview/text?return_format=base64',