add editable footer

closes #346 

2 files changed, 316 insertions, 26 deletions

diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index a0d61f3c..ac8c72b4 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -285,8 +285,8 @@ $(function() {
 
   /* Contendeditable Fields */
 
-  $('[contenteditable="true"]').on('focusout', function() {
-        /* change svg scale */
+  $('body').on('focusout', '[contenteditable="true"]:not(.footer-info)', function() {
+    /* change svg scale */
     var content = $(this).text();
     var field_name = $(this).attr('data-field-name');
     if(field_name == 'svg-scale') {
@@ -323,6 +323,9 @@ $(function() {
             item.val(value).trigger('initialize');
         } else if (item.is('figure.inksimulation')) {
             setSVGTransform(item, value);
+        } else if (item.is('div.footer-info')) {
+            $('#footer-info-text').html(value);
+            item.html(value);
         } else {
             item.text(value);
         }
@@ -336,7 +339,7 @@ $(function() {
     }, 500);
   });
 
-  $('[contenteditable="true"]').keypress(function(e) {
+  $('body').on('keypress', '[contenteditable="true"]:not(#footer-info-text)', function(e) {
     if (e.which == 13) {
       // pressing enter defocuses the element
       this.blur();
@@ -347,6 +350,20 @@ $(function() {
     }
   });
 
+  $('#footer-info-text[contenteditable="true"]').keypress(function(e) {
+    if (e.which == 13) {
+      if($(this).find('div').length > 2) {
+        return false;
+      } else {
+        return true;
+      }
+    }
+  });
+
+  $('#footer-info-text[contenteditable="true"]').focusout(function() {
+    updateFooter();
+  });
+
   /* Settings Bar */
 
   $('button.close').click(function() {
@@ -397,6 +414,128 @@ $(function() {
     $(this).addClass("active");
   });
 
+  // Footer
+  function getEditMode(){
+    return $('#switch-mode').prop('checked');
+  }
+
+  $('#switch-mode').change(function() {
+    var editMode = getEditMode();
+    if (editMode) {
+      $('#footer-info-text').text( $('#footer-info-text' ).html());
+      $('#tool-bar .edit-only').prop("disabled", true);
+    } else {
+      $('#footer-info-text').css('display', 'block');
+      var sourceText = $('#footer-info-text').text();
+      $('#footer-info-text').html( sourceText );
+      $('#tool-bar .tb-button.edit-only').prop('disabled', false);
+    }
+  });
+
+  function updateFooter() {
+    var editMode = getEditMode();
+    var footerText = '';
+    if (editMode) {
+      footerText = $('#footer-info-text' ).text();
+    } else {
+      footerText = $('#footer-info-text').html();
+    }
+    $('.footer-info').html(footerText);
+    var content = $('.footer-info').html();
+    $.postJSON('/settings/footer-info', {value: content});
+  }
+
+  function formatText(selection, value) {
+    var htmlMode = getEditMode();
+    if(!htmlMode) {
+      if(window.getSelection().toString()){
+        document.execCommand(selection, false, value);
+        updateFooter();
+      }
+    }
+  }
+
+  $('#tb-bold').click(function(selection) {
+    formatText('bold');
+  });
+
+  $('#tb-italic').click(function() {
+    formatText('italic');
+  });
+
+  $('#tb-underline').click(function() {
+    formatText('underline');
+  });
+
+  $('#tb-remove').click(function() {
+    formatText('removeFormat');
+  });
+
+  $('#tb-hyperlink').click(function() {
+    formatText('createlink', 'tempurl');
+    $('#footer-url').css('display', 'block');
+  });
+
+  $('#url-ok').click(function() {
+    var link = $('#footer-link').val();
+    $('#footer-info-text a[href="tempurl"]').attr('href', link);
+    $('#footer-link').val('https://');
+    $('#footer-url').css('display', 'none');
+    updateFooter();
+  });
+
+  $('#url-cancel').click(function() {
+    $('#footer-info-text a[href="tempurl"]').contents().unwrap();
+    $('#footer-link').val('https://');
+    $('#footer-url').css('display', 'none');
+    updateFooter();
+  });
+
+  $('#tb-mail').click(function() {
+    formatText('createlink', 'tempurl');
+    $('#footer-email').css('display', 'block');
+  });
+
+  $('#mail-ok').click(function() {
+    var link = 'mailto:' + $('#footer-mail').val();
+    $('#footer-info-text a[href="tempurl"]').attr('href', link);
+    $('#footer-mail').val('@');
+    $('#footer-email').css('display', 'none');
+    updateFooter();
+  });
+
+  $('#mail-cancel').click(function() {
+    $('#footer-info-text a[href="tempurl"]').contents().unwrap();
+    $('#footer-mail').val('@');
+    $('#footer-email').css('display', 'none');
+    updateFooter();
+  });
+
+  $('#tb-reset').click(function() {
+    $('#footer-reset').css('display', 'block');
+  });
+
+  $('#reset-ok').click(function() {
+    var htmlMode = getEditMode();
+    if(!htmlMode) {
+      $('#footer-info-text').html($('#footer-info-original').html());
+    } else {
+      $('#footer-info-text').text($('#footer-info-original').html());
+    }
+    $('#footer-reset').css('display', 'none');
+    updateFooter();
+  });
+
+  $('#reset-cancel').click(function() {
+    $('#footer-reset').css('display', 'none');
+  });
+
+  $('body').on("click", ".edit-footer-link", function() {
+    $("button.settings").trigger("click");
+    $("#branding-tab").trigger("click");
+  });
+
+
   // Paper Size
   $('select#printing-size').on('change initialize', function(){
     $('.page').toggleClass('a4', $(this).find(':selected').val() == 'a4');
@@ -555,8 +694,8 @@ $(function() {
   });
 
   // Logo
-  $('#logo-picker').change(function(e) {
-    var file = e.originalEvent.currentTarget.files[0];
+  $(document).on("change", ".logo-picker", function(e) {
+    var file = e.currentTarget.files[0];
     var reader = new FileReader();
     reader.onloadend = function() {
       var data = reader.result;
@@ -580,6 +719,7 @@ $(function() {
     if (logo.startsWith("data:")) {
         settings["logo"] = logo;
     }
+    settings["footer-info"] = $("[data-field-name='footer-info']").html();
 
     settings["machine-speed"] = $("[data-field-name='machine-speed']").val();
     settings["time-additional"] = $("[data-field-name='time-additional']").val();
diff --git a/print/resources/style.css b/print/resources/style.css
index 5a1ccb44..f697c7dc 100644
--- a/print/resources/style.css
+++ b/print/resources/style.css
@@ -199,6 +199,12 @@ body {
     border: 1px solid #413232;
     padding: 5px;
     cursor: pointer;
+    background: white;
+    color: black;
+  }
+
+  #settings-ui button.tab {
+    background: transparent;
   }
   
   #settings-ui button.active {
@@ -256,6 +262,133 @@ body {
     pointer-events: none;
   }
 
+  .logo-ui {
+    float: left;
+  }
+
+  .brandlogo-ui {
+    width: auto !important;
+  }
+
+  .brandlogo-ui img {
+    background: white;
+  }
+
+  .logo-legend {
+    display: inline !important;
+    position: relative;
+    line-height: 30mm;
+    padding: 5px;
+    border: 1px solid #413232;
+    background: white;
+    margin-left: 1em;
+    cursor: pointer;
+  }
+
+  #edit-footer {
+    position: relative;
+  }
+
+  #footer-info-text {
+    width: 100%;
+    min-height: 5em;
+    border: 1px solid darkgrey;
+    padding: 12px;
+    overflow-y: scroll;
+    background: white;
+  }
+
+  #tool-bar .tb-button {
+    border: 1px solid darkgrey;
+    border-bottom: none;
+    margin-bottom: -0.2em;
+    cursor: pointer;
+    color: #413232;
+    height: 2.2em;
+    vertical-align: top;
+  }
+
+  #tool-bar .tb-button:disabled {
+    background: #eaeaea;
+    color: white;
+    cursor: auto;
+  }
+
+  #edit-mode {
+    display: inline;
+    position: relative;
+    border: 1px solid darkgray;
+    padding: 0 5px 10px 0;
+    vertical-align: top;
+  }
+
+  #edit-mode input {
+      visibility: hidden;
+  }
+
+  #edit-mode label {
+    cursor: pointer;
+    vertical-align: middle;
+    background: white;
+    color: #413232;
+  }
+
+  #edit-mode label:after {
+    opacity: 0.1;
+    content: '';
+    position: absolute;
+    width: 9px;
+    height: 5px;
+    background: transparent;
+    top: 6px;
+    left: 7px;
+    border: 3px solid black;
+    border-top: none;
+    border-right: none;
+    transform: rotate(-45deg);
+  }
+
+  #edit-mode label:hover::after {
+      opacity: 0.5;
+  }
+
+  #edit-mode input[type=checkbox]:checked + label:after {
+      opacity: 1;
+  }
+
+  #edit-mode span {
+    margin-left: 1em;
+  }
+
+  div#footer-url, div#footer-email, div#footer-reset {
+    display: none;
+    position: absolute;
+    background: white;
+    border: 1px solid black;
+    padding: 5mm;
+    top: 0;
+    left: 0;
+    z-index: 10;
+  }
+
+  div#footer-info-original {
+    visibility: hidden;
+    width: 0;
+    height: 0;
+  }
+
+  .notice--warning {
+    padding: 1em;
+    font-size: 0.75em;
+    text-indent: initial;
+    border: 1px solid #d0d0d0;
+    background: white;
+  }
+
+  .ff-serif {
+    font-family: serif;
+  }
+
   #modal-background {
     display: none;
     z-index: 3;
@@ -322,10 +455,9 @@ body {
   /* hide the actual file picker control, since we just want them to click the
    * image instead
    */
-  #logo-picker {
-    width: 0px;
-    height: 0px;
-    opacity: 0;
+  .logo-picker {
+    visibility: hidden;
+    position: absolute;
   }
 
   .logo-instructions {
@@ -510,6 +642,7 @@ body {
     padding-left: 3px;
     padding-right: 3px;
     margin: 0px 1px 0px 1px;
+    cursor: pointer;
   }
 
   input.realistic {
@@ -524,6 +657,15 @@ body {
     pointer-events: none;
   }
 
+  figure.inksimulation div {
+    display: none;
+  }
+
+  /* Display svg buttons only with svg hover */
+  figure.inksimulation:hover > div {
+    display: block;
+  }
+
 /* Color Swatches */
 
   .color-palette {
@@ -799,6 +941,7 @@ body {
     white-space: wrap;
     text-align: center;
     padding-top: 2mm;
+    position: relative;
 
   }
 
@@ -809,6 +952,25 @@ body {
     margin-top: 0;
   }
 
+  .edit-footer-link {
+    display: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    line-height: 15mm;
+    background: #ffffffbf;
+    font-size: x-large;
+    cursor: pointer;
+    height: 15mm;
+    border: 1px dashed #cccbcb;
+  }
+
+  footer:hover > .edit-footer-link {
+    display: block;
+  }
+
 /* Messages */
 
   #errors.show {
@@ -987,30 +1149,18 @@ body {
         margin: 0 !important;
     }
 
-    figure.inksimulation div {
-      display: none;
-    }
-
-    .ui {
+    figure.inksimulation div,
+    .ui,
+    #settings-ui,
+    #errors,
+    span.logo-instructions {
       display: none;
     }
 
-    #settings-ui {
-      display: none !important;
-    }
-
-    #errors {
-      display: none !important;
-    }
-
     .header-field:not(:empty)::before {
         content: attr(data-label);
         padding-right: 0.5em;
     }
-
-    span.logo-instructions {
-      display: none;
-    }
 }
 
 @page {