From 7bf6b40c9434e4c3445be5b339cabc3078db5887 Mon Sep 17 00:00:00 2001
From: Philipp Klaus <philipp.klaus@gmail.com>
Date: Fri, 10 Feb 2017 10:07:38 +0100
Subject: [PATCH] new: margins can be specified in the web UI

---
 views/labeldesigner.jinja2 | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/views/labeldesigner.jinja2 b/views/labeldesigner.jinja2
index aa7ea6b..f1576c7 100644
--- a/views/labeldesigner.jinja2
+++ b/views/labeldesigner.jinja2
@@ -78,7 +78,15 @@
             </div>
             <div id="collapse3" class="panel-collapse collapse">
               <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>
           </div>
@@ -125,11 +133,28 @@ function formData() {
     font_size:   $('#fontSize').val(),
     label_size:  $('#labelSize option:selected').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() {
+  // 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({
     type:        'POST',
     url:         '/api/preview/text?return_format=base64',