From 05aaf36d6dc5e8b0b44d41b81aaff92658643077 Mon Sep 17 00:00:00 2001 From: Kaalleen <36401965+kaalleen@users.noreply.github.com> Date: Thu, 15 Nov 2018 17:39:25 +0100 Subject: [PATCH] add editable footer closes #346 --- print/resources/inkstitch.js | 150 +++++++++++++++++++++++++- print/resources/style.css | 192 ++++++++++++++++++++++++++++++---- print/templates/footer.html | 3 +- print/templates/headline.html | 4 +- print/templates/ui.html | 183 ++++++++++++++++++++------------ 5 files changed, 435 insertions(+), 97 deletions(-) diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index a0d61f3c2..ac8c72b4c 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 5a1ccb44d..f697c7dca 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 { + figure.inksimulation div, + .ui, + #settings-ui, + #errors, + span.logo-instructions { display: none; } - .ui { - 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 { diff --git a/print/templates/footer.html b/print/templates/footer.html index 0c043e2f6..175896283 100644 --- a/print/templates/footer.html +++ b/print/templates/footer.html @@ -1,6 +1,7 @@ diff --git a/print/templates/headline.html b/print/templates/headline.html index bf112deaf..11ef3ba5c 100644 --- a/print/templates/headline.html +++ b/print/templates/headline.html @@ -1,7 +1,7 @@ diff --git a/print/templates/ui.html b/print/templates/ui.html index 5d565abaf..2db3a81d8 100644 --- a/print/templates/ui.html +++ b/print/templates/ui.html @@ -16,82 +16,129 @@
+
+
+
+
{{ _('Page Setup') }} -
-

- - -

-
-
-
- {{ _('Print Layouts') }} -

-

-

-

-

{{ _('Thumbnail size') }}: 15mm -

-
- -
-
-
- {{ _('Estimated Time') }} -
- {{ _('Machine Settings') }} -

- - -

-
-
- {{ _('Time Factors') }} -

- - -

-

- -

-

- -

-
-
- {{ _('Display Time On') }} -

-

-

-

-

-

-
- -
-
- {{ _('Design') }} -

- +

+ +

-
- +
+ {{ _('Print Layouts') }} +

+

+

+

+

{{ _('Thumbnail size') }}: 15mm

+
+ + + +
+
+ {{ _('Logo') }} + +
+ + +
+ +
+ {{ _('Estimated Time') }} +
+ {{ _('Machine Settings') }} +

+ + +

+
+
+ {{ _('Time Factors') }} +

+ + +

+

+ +

+

+ +

+
+
+ {{ _('Display Time On') }} +

+

+

+

+

+

+
+ +
+ +
+ {{ _('Design') }} +

+ +

+
+ + + +