From f435520663d59378546426ea7263e78d51362c44 Mon Sep 17 00:00:00 2001 From: Kaalleen <36401965+kaalleen@users.noreply.github.com> Date: Tue, 26 Mar 2019 18:24:02 +0100 Subject: Add Custom Page to Print PDF (#418) --- print/resources/inkstitch-logo.svg | 125 +++++++++++++++++++++------ print/resources/inkstitch.js | 170 +++++++++++++++++++++---------------- print/resources/style.css | 139 +++++++++++++++++------------- 3 files changed, 277 insertions(+), 157 deletions(-) (limited to 'print/resources') diff --git a/print/resources/inkstitch-logo.svg b/print/resources/inkstitch-logo.svg index d9a298cf..138318b9 100644 --- a/print/resources/inkstitch-logo.svg +++ b/print/resources/inkstitch-logo.svg @@ -1,27 +1,98 @@ - - - - - - - - - - - - - - - - - + + + +image/svg+xml + + + + + + + + + + + + + \ No newline at end of file diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index ac8c72b4..79c6d9c3 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -285,7 +285,7 @@ $(function() { /* Contendeditable Fields */ - $('body').on('focusout', '[contenteditable="true"]:not(.footer-info)', function() { + $('body').on('focusout', '[contenteditable="true"]:not(.info-text)', function() { /* change svg scale */ var content = $(this).text(); var field_name = $(this).attr('data-field-name'); @@ -326,6 +326,8 @@ $(function() { } else if (item.is('div.footer-info')) { $('#footer-info-text').html(value); item.html(value); + } else if (item.is('#custom-page-content')) { + $('#custom-page-content').html(value); } else { item.text(value); } @@ -339,7 +341,7 @@ $(function() { }, 500); }); - $('body').on('keypress', '[contenteditable="true"]:not(#footer-info-text)', function(e) { + $('body').on('keypress', '[contenteditable="true"]:not(.info-text)', function(e) { if (e.which == 13) { // pressing enter defocuses the element this.blur(); @@ -360,8 +362,8 @@ $(function() { } }); - $('#footer-info-text[contenteditable="true"]').focusout(function() { - updateFooter(); + $('.info-text[contenteditable="true"]').focusout(function() { + updateEditableText($(this)); }); /* Settings Bar */ @@ -415,119 +417,142 @@ $(function() { }); // Footer - function getEditMode(){ - return $('#switch-mode').prop('checked'); + function getEditMode(element){ + return element.closest('fieldset').find('.switch-mode').prop('checked'); } - $('#switch-mode').change(function() { - var editMode = getEditMode(); + $('.switch-mode').change(function() { + var element = $(this); + var info_text = element.closest('fieldset').find('.info-text'); + var editMode = getEditMode(element); if (editMode) { - $('#footer-info-text').text( $('#footer-info-text' ).html()); - $('#tool-bar .edit-only').prop("disabled", true); + info_text.text( info_text.html() ); + element.closest('.tool-bar').find('.tb-button.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); + info_text.css('display', 'block'); + var sourceText = info_text.text(); + info_text.html( sourceText ); + element.closest('.tool-bar').find('.tb-button.edit-only').prop('disabled', false); } }); - function updateFooter() { - var editMode = getEditMode(); - var footerText = ''; + function updateEditableText(element) { + var editMode = getEditMode(element); + var info_text = element.closest('fieldset').find('.info-text'); + var content = info_text.html(); + var editableText = ''; + if (editMode) { - footerText = $('#footer-info-text' ).text(); + editableText = info_text.text(); + } else { + editableText = info_text.html(); + } + + if(info_text.is('#footer-info-text')) { + $('div.footer-info').html(editableText); + $.postJSON('/settings/footer-info', {value: content}); } else { - footerText = $('#footer-info-text').html(); + $.postJSON('/settings/custom-page-content', {value: content}); } - $('.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-bold').click(function() { + if(!getEditMode($(this))) { + formatText('bold'); + updateEditableText($(this)); + } }); - $('#tb-italic').click(function() { - formatText('italic'); + $('.tb-italic').click(function() { + if(!getEditMode($(this))) { + formatText('italic'); + updateEditableText($(this)); + } }); - $('#tb-underline').click(function() { - formatText('underline'); + $('.tb-underline').click(function() { + if(!getEditMode($(this))) { + formatText('underline'); + updateEditableText($(this)); + } }); - $('#tb-remove').click(function() { - formatText('removeFormat'); + $('.tb-remove').click(function() { + if(!getEditMode($(this))) { + formatText('removeFormat'); + updateEditableText($(this)); + } }); - $('#tb-hyperlink').click(function() { - formatText('createlink', 'tempurl'); - $('#footer-url').css('display', 'block'); + $('.tb-hyperlink').click(function() { + if(!getEditMode($(this))) { + formatText('createlink', 'tempurl'); + updateEditableText($(this)); + $(this).closest('.tool-bar').children('.url-window').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-ok').click(function() { + var link = $(this).closest('.tool-bar').find('.user-url').val(); + $(this).closest('fieldset').find('.info-text').find('a[href="tempurl"]').attr('href', link); + $('.user-url').val('https://'); + $('.url-window').css('display', 'none'); + updateEditableText($(this)); }); - $('#url-cancel').click(function() { - $('#footer-info-text a[href="tempurl"]').contents().unwrap(); - $('#footer-link').val('https://'); - $('#footer-url').css('display', 'none'); - updateFooter(); + $('.url-cancel').click(function() { + $(this).closest('fieldset').find('.info-text').find('a[href="tempurl"]').contents().unwrap(); + $('.user-url').val('https://'); + $('.url-window').css('display', 'none'); + updateEditableText($(this)); }); - $('#tb-mail').click(function() { - formatText('createlink', 'tempurl'); - $('#footer-email').css('display', 'block'); + $('.tb-mail').click(function() { + if(!getEditMode($(this))) { + formatText('createlink', 'tempurl'); + updateEditableText($(this)); + $(this).closest('.tool-bar').find('.mail-window').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-ok').click(function() { + var link = 'mailto:' + $(this).closest('.tool-bar').find('.user-mail').val(); + $(this).closest('fieldset').find('.info-text').find('a[href="tempurl"]').attr('href', link); + $('.user-mail').val('@'); + $('.mail-window').css('display', 'none'); + updateEditableText($(this)); }); - $('#mail-cancel').click(function() { - $('#footer-info-text a[href="tempurl"]').contents().unwrap(); - $('#footer-mail').val('@'); - $('#footer-email').css('display', 'none'); - updateFooter(); + $('.mail-cancel').click(function() { + $(this).closest('fieldset').find('.info-text').find('a[href="tempurl"]').contents().unwrap(); + $('.user-mail').val('@'); + $('.mail-window').css('display', 'none'); + updateEditableText($(this)); }); - $('#tb-reset').click(function() { - $('#footer-reset').css('display', 'block'); + $('.tb-reset').click(function() { + $(this).closest('.tool-bar').find('.reset-window').css('display', 'block'); }); - $('#reset-ok').click(function() { - var htmlMode = getEditMode(); + $('.reset-ok').click(function() { + var htmlMode = getEditMode($(this)); if(!htmlMode) { - $('#footer-info-text').html($('#footer-info-original').html()); + $(this).closest('fieldset').find('.info-text').html($(this).closest('.tool-bar').find('.original-info').html()); } else { - $('#footer-info-text').text($('#footer-info-original').html()); + $(this).closest('fieldset').find('.info-text').text($(this).closest('.tool-bar').find('.original-info').html()); } - $('#footer-reset').css('display', 'none'); - updateFooter(); + $('.reset-window').css('display', 'none'); + updateEditableText($(this)); }); - $('#reset-cancel').click(function() { - $('#footer-reset').css('display', 'none'); + $('.reset-cancel').click(function() { + $('.reset-window').css('display', 'none'); }); $('body').on("click", ".edit-footer-link", function() { @@ -713,6 +738,7 @@ $(function() { settings["operator-overview"] = $("[data-field-name='operator-overview']").is(':checked'); settings["operator-detailedview"] = $("[data-field-name='operator-detailedview']").is(':checked'); settings["operator-detailedview-thumbnail-size"] = $("[data-field-name='operator-detailedview-thumbnail-size']").val(); + settings["custom-page"] = $("[data-field-name='custom-page']").is(':checked'); settings["paper-size"] = $('select#printing-size').find(':selected').val(); var logo = $("figure.brandlogo img").attr('src'); diff --git a/print/resources/style.css b/print/resources/style.css index f697c7dc..9ffff07d 100644 --- a/print/resources/style.css +++ b/print/resources/style.css @@ -66,30 +66,6 @@ body { position: relative; } -/* Printing Size */ - .page.a4 { - width: 205mm; - height: 292mm; - padding: 15mm; - } - - .page.client-overview.a4 header, .page.operator-overview.a4 header { - height: 50mm; - flex-direction: row; - } - - .page.client-overview.a4 div.job-details, .page.operator-overview.a4 div.job-details { - width: 100%; - } - - .page.client-overview.a4 .client-overview-main figure.inksimulation { - height: 150mm; - } - - .page.client-overview.a4 figure.brandlogo, .page.operator-overview.a4 figure.brandlogo { - margin: -6mm 2.5mm; - } - /* Settings */ .ui { @@ -289,7 +265,7 @@ body { position: relative; } - #footer-info-text { + .info-text { width: 100%; min-height: 5em; border: 1px solid darkgrey; @@ -298,23 +274,25 @@ body { background: white; } - #tool-bar .tb-button { - border: 1px solid darkgrey; + .tb-button { + border: 1px solid darkgrey !important; border-bottom: none; margin-bottom: -0.2em; - cursor: pointer; - color: #413232; height: 2.2em; vertical-align: top; + padding: 5px; + cursor: pointer; + background: white; + color: black; } - #tool-bar .tb-button:disabled { - background: #eaeaea; - color: white; - cursor: auto; + .tb-button:disabled { + background: #eaeaea !important; + color: white !important; + cursor: auto !important; } - #edit-mode { + .edit-mode { display: inline; position: relative; border: 1px solid darkgray; @@ -322,18 +300,18 @@ body { vertical-align: top; } - #edit-mode input { + .edit-mode input { visibility: hidden; } - #edit-mode label { + .edit-mode label { cursor: pointer; vertical-align: middle; background: white; color: #413232; } - #edit-mode label:after { + .edit-mode label:after { opacity: 0.1; content: ''; position: absolute; @@ -348,21 +326,21 @@ body { transform: rotate(-45deg); } - #edit-mode label:hover::after { + .edit-mode label:hover::after { opacity: 0.5; } - #edit-mode input[type=checkbox]:checked + label:after { + .edit-mode input[type=checkbox]:checked + label:after { opacity: 1; } - #edit-mode span { + .edit-mode span { margin-left: 1em; } - div#footer-url, div#footer-email, div#footer-reset { + div.tb-popup { display: none; - position: absolute; + position: absolute !important; background: white; border: 1px solid black; padding: 5mm; @@ -371,7 +349,7 @@ body { z-index: 10; } - div#footer-info-original { + div.original-info { visibility: hidden; width: 0; height: 0; @@ -418,7 +396,6 @@ body { /* Header */ - header { width: 100%; height: 40mm; @@ -434,13 +411,11 @@ body { figure.brandlogo { height: 30mm; width: 30mm; - margin: 2.5mm; + margin: 0 4mm 0 0; } figure.brandlogo label { display: block; - width: 100%; - height: 100%; text-align: center; position: relative; } @@ -472,13 +447,6 @@ body { cursor: pointer; } - .operator-detailedview figure.brandlogo { - height: 20mm; - width: 30mm; - margin: 0 2.5mm; - text-align: left; - } - .operator-detailedview figure.brandlogo img { max-width: 30mm; max-height: 20mm; @@ -488,7 +456,7 @@ body { display: flex; display: -webkit-flex; /* old webkit */ display: -ms-flexbox; /* IE 10 */ - width: calc(100% - 50mm); + width: calc(100% - 40mm); height: 50%; flex-grow: 1; } @@ -515,6 +483,10 @@ body { padding-top: 6mm; } + .operator-overview figure.inksimulation { + height: 210mm; + } + .operator-overview div.job-details, .client-overview div.job-details { padding-top: 2mm; } @@ -904,6 +876,11 @@ body { .opd-color-block.large { display: block; margin: 5mm 0; + font-size: 14pt; + } + + .opd-color-block.large .operator-colorswatch { + font-size: 8pt; } .opd-color-block.large:first-child { @@ -987,6 +964,23 @@ body { display: none; } +/* Custom information sheet */ + .custom-page header { + height: 30mm; + } + + .custom-page main { + height: 230mm + } + #custom-page-tool-bar { + margin-bottom: 0.5em; + } + + #custom-page-content { + height: 200mm; + overflow-y: hidden; + text-align: left; + } /* Color Swatch Logic */ /* reference : http://jsfiddle.net/jrulle/btg63ezy/3/ */ @@ -1120,7 +1114,33 @@ body { height: calc(100% / 5); width: calc(100% / 12); } - + + +/* Print Size A4 */ + + .page.a4 { + width: 210mm; + height: 296mm; + padding: 15mm; + } + + .page.client-overview.a4 header, .page.operator-overview.a4 header { + height: 50mm; + flex-direction: row; + } + + .page.client-overview.a4 div.job-details, .page.operator-overview.a4 div.job-details { + width: 100%; + } + + .page.client-overview.a4 .client-overview-main figure.inksimulation { + height: 150mm; + } + + .page.client-overview.a4 figure.brandlogo, .page.operator-overview.a4 figure.brandlogo { + margin: 0 4mm -2mm 0; + } + @media screen { .page { margin-top: 20mm !important; @@ -1153,8 +1173,11 @@ body { .ui, #settings-ui, #errors, - span.logo-instructions { - display: none; + span.logo-instructions, + #custom-page-tool-bar, + #custom-page-content, + .notice--warning { + display: none !important; } .header-field:not(:empty)::before { -- cgit v1.2.3 From c8a43bbe1df0ecc11022794ef94538f3b1ba31f2 Mon Sep 17 00:00:00 2001 From: Kaalleen <36401965+kaalleen@users.noreply.github.com> Date: Tue, 2 Apr 2019 06:21:53 +0200 Subject: prevent html from showing up in custom text field (#421) --- print/resources/inkstitch.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) (limited to 'print/resources') diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index 79c6d9c3..86bc213e 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -324,10 +324,10 @@ $(function() { } else if (item.is('figure.inksimulation')) { setSVGTransform(item, value); } else if (item.is('div.footer-info')) { - $('#footer-info-text').html(value); - item.html(value); + $('#footer-info-text').html($.parseHTML(value)); + item.html($.parseHTML(value)); } else if (item.is('#custom-page-content')) { - $('#custom-page-content').html(value); + $('#custom-page-content').html($.parseHTML(value)); } else { item.text(value); } @@ -431,7 +431,7 @@ $(function() { } else { info_text.css('display', 'block'); var sourceText = info_text.text(); - info_text.html( sourceText ); + info_text.html( $.parseHTML(sourceText) ); element.closest('.tool-bar').find('.tb-button.edit-only').prop('disabled', false); } }); @@ -439,7 +439,6 @@ $(function() { function updateEditableText(element) { var editMode = getEditMode(element); var info_text = element.closest('fieldset').find('.info-text'); - var content = info_text.html(); var editableText = ''; if (editMode) { @@ -449,10 +448,10 @@ $(function() { } if(info_text.is('#footer-info-text')) { - $('div.footer-info').html(editableText); - $.postJSON('/settings/footer-info', {value: content}); + $('div.footer-info').html($.parseHTML(editableText)); + $.postJSON('/settings/footer-info', {value: editableText}); } else { - $.postJSON('/settings/custom-page-content', {value: content}); + $.postJSON('/settings/custom-page-content', {value: editableText}); } } -- cgit v1.2.3