diff options
Diffstat (limited to 'print')
| -rw-r--r-- | print/resources/inkstitch.js | 123 | ||||
| -rw-r--r-- | print/resources/style.css | 25 | ||||
| -rw-r--r-- | print/templates/headline.html | 11 | ||||
| -rw-r--r-- | print/templates/ui.html | 13 |
4 files changed, 130 insertions, 42 deletions
diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index c6e88e52..253e9243 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -1,3 +1,12 @@ +$.postJSON = function(url, data, success=null) { + return $.ajax(url, { + type: 'POST', + data: JSON.stringify(data), + contentType: 'application/json', + success: success + }); +}; + function ping() { $.get("/ping") .done(function() { setTimeout(ping, 1000) }) @@ -130,45 +139,62 @@ $(function() { }) }); - + /* Contendeditable Fields */ - - document.querySelectorAll('[contenteditable="true"]').forEach(function(elem) { - elem.addEventListener('focusout', function() { + + $('[contenteditable="true"]').on('focusout', function() { /* change svg scale */ - var content = $(this).html(); - var field_name = $(this).attr('data-field-name'); - if(field_name == 'svg-scale') { - var scale = parseInt(content); - var svg = $(this).parent().siblings('svg'); - var transform = svg.css('transform').match(/-?[\d\.]+/g); - - transform[0] = scale / 100; - transform[3] = scale / 100; - svg.css({ transform: 'matrix(' + transform + ')' }); - } - /* When we focus out from a contenteditable field, we want to - set the same content to all fields with the same classname */ - else { - $('[data-field-name="' + field_name + '"]').html(content); - } - }); + var content = $(this).html(); + var field_name = $(this).attr('data-field-name'); + if(field_name == 'svg-scale') { + var scale = parseInt(content); + var svg = $(this).parent().siblings('svg'); + var transform = svg.css('transform').match(/-?[\d\.]+/g); + + transform[0] = scale / 100; + transform[3] = scale / 100; + svg.css({ transform: 'matrix(' + transform + ')' }); + } else { + /* When we focus out from a contenteditable field, we want to + * set the same content to all fields with the same classname */ + $('[data-field-name="' + field_name + '"]').html(content); + $.postJSON('/settings/' + field_name, {value: content}); + } }); - + + // load up initial metadata values + $.getJSON('/settings', function(settings) { + $.each(settings, function(field_name, value) { + $('[data-field-name="' + field_name + '"]').each(function(i, item) { + var item = $(item); + if (item.is(':checkbox')) { + item.prop('checked', value).trigger('change'); + } else if (item.is('img')) { + item.attr('src', value); + } else if (item.is('select')) { + item.val(value).trigger('change'); + } else { + item.text(value); + } + }); + }); + }); + $('[contenteditable="true"]').keypress(function(e) { if (e.which == 13) { // pressing enter defocuses the element this.blur(); + // also suppress the enter keystroke to avoid adding a new line return false; } else { return true; } }); - - + + /* Settings Bar */ - + $('button.close').click(function() { $.post('/shutdown', {}) .done(function(data) { @@ -193,20 +219,55 @@ $(function() { $('#close-settings').click(function(){ $('#settings-ui').hide(); }); - + /* Settings */ - + // Paper Size $('select#printing-size').change(function(){ - $('.page').toggleClass('a4'); + var size = $(this).find(':selected').val(); + $('.page').toggleClass('a4', size == 'a4'); + $.postJSON('/settings/paper-size', {value: size}); }); - + //Checkbox $(':checkbox').change(function() { - $('.' + this.id).toggle(); + var checked = $(this).prop('checked'); + var field_name = $(this).attr('data-field-name'); + + $('.' + field_name).toggle(checked); setPageNumbers(); scaleAllSvg(); + + $.postJSON('/settings/' + field_name, {value: checked}); + }); + + // Logo + $('#logo-picker').change(function(e) { + var file = e.originalEvent.srcElement.files[0]; + var reader = new FileReader(); + reader.onloadend = function() { + var data = reader.result; + $('figure.brandlogo img').attr('src', data); + $.postJSON('/settings/logo', {value: data}); + }; + reader.readAsDataURL(file); + }); + + // "save as defaults" button + $('#save-settings').click(function(e) { + var settings = {}; + settings["client-overview"] = $("[data-field-name='client-overview']").is(':checked'); + settings["client-detailedview"] = $("[data-field-name='client-detailedview']").is(':checked'); + settings["operator-overview"] = $("[data-field-name='operator-overview']").is(':checked'); + settings["operator-detailedview"] = $("[data-field-name='operator-detailedview']").is(':checked'); + settings["paper-size"] = $('select#printing-size').find(':selected').val(); + + var logo = $("figure.brandlogo img").attr('src'); + if (logo.startsWith("data:")) { + settings["logo"] = logo; + } + + $.postJSON('/defaults', {'value': settings}); }); - }); diff --git a/print/resources/style.css b/print/resources/style.css index 333af7aa..013f567c 100644 --- a/print/resources/style.css +++ b/print/resources/style.css @@ -230,6 +230,10 @@ body { cursor: pointer; } + #settings-ui fieldset { + margin-bottom: 1em; + } + /* Header */ @@ -251,11 +255,30 @@ body { margin: 2.5mm; } + figure.brandlogo label { + display: block; + width: 100%; + height: 100%; + line-height: 30mm; + text-align: center; + } + figure.brandlogo img { max-width: 30mm; max-height: 30mm; + display: inline; + vertical-align: middle; } - + + /* hide the actual file picker control, since we just want them to click the + * image instead + */ + #logo-picker { + width: 0px; + height: 0px; + opacity: 0%; + } + .operator-detailedview figure.brandlogo { height: 20mm; width: 30mm; diff --git a/print/templates/headline.html b/print/templates/headline.html index 649c02ea..421202e4 100644 --- a/print/templates/headline.html +++ b/print/templates/headline.html @@ -1,11 +1,14 @@ <figure class="brandlogo"> - <img src="{{ logo.src or "resources/inkstitch-logo.svg" }}" alt="{{ logo.title }}" title="{{ logo.title }}"> + <label for="logo-picker"> + <img src="{{ logo.src or "resources/inkstitch-logo.svg" }}" alt="{{ logo.title }}" title="{{ logo.title }}" data-field-name="logo"> + <input type=file id="logo-picker" /> + </label> </figure> <div class="headline"> <div class="pageTitle"> - <h1><span class="jobtitle" contenteditable="true" data-placeholder="{{ _('Enter job title...') }}" data-field-name="job-title">{{ job.title }}</span></h1> - <p class="header-field" data-label="{{ _('CLIENT') }}:" contenteditable="true" data-placeholder="{{ _('Enter client name...') }}" data-field-name="client-name">{{ client }}</p> - <p class="header-field" data-label="{{ _('PURCHASE ORDER #:') }}" contenteditable="true" data-placeholder="{{ _('Enter purchase order number...') }}" data-field-name="purchase-order">{{ purchase_order }}</p> + <h1><span class="jobtitle" contenteditable="true" data-placeholder="{{ _('Enter job title...') }}" data-field-name="title"></span></h1> + <p class="header-field" data-label="{{ _('CLIENT') }}:" contenteditable="true" data-placeholder="{{ _('Enter client name...') }}" data-field-name="client-name"></p> + <p class="header-field" data-label="{{ _('PURCHASE ORDER #:') }}" contenteditable="true" data-placeholder="{{ _('Enter purchase order number...') }}" data-field-name="purchase-order"></p> </div> <div class="currentDate">{{ date|datetimeformat(_('%Y.%m.%d')) }}</div> diff --git a/print/templates/ui.html b/print/templates/ui.html index 078f1a4c..f7246962 100644 --- a/print/templates/ui.html +++ b/print/templates/ui.html @@ -15,7 +15,7 @@ <h1>{{ _('Settings') }}</h1> <div> <p>{{ _('Printing Size') }}: - <select id="printing-size"> + <select id="printing-size" data-field-name="paper-size"> <option value="letter" selected="selected">Letter</option> <option value="a4">A4</option> </select> @@ -23,11 +23,12 @@ </div> <div> <fieldset> - <legend>{{ ('Print Layouts') }}:</legend> - <p><input type="checkbox" id="client-overview" {{ 'checked' if view.client_overview else '' }}><label for="client-overview">Client Overview</label></p> - <p><input type="checkbox" id="client-detailedview" {{ 'checked' if view.client_detailedview else '' }}><label for="client-detailedview">Client Detailed View</label></p> - <p><input type="checkbox" id="operator-overview" {{ 'checked' if view.operator_overview else '' }}><label for="operator-overview">Operator Overview</label></p> - <p><input type="checkbox" id="operator-detailedview" {{ 'checked' if view.operator_detailedview else '' }}><label for="operator-overview">Operator Detailed View</label></p> + <legend>{{ _('Print Layouts') }}:</legend> + <p><input type="checkbox" id="client-overview" data-field-name="client-overview" /><label for="client-overview">Client Overview</label></p> + <p><input type="checkbox" id="client-detailedview" data-field-name="client-detailedview" /><label for="client-detailedview">Client Detailed View</label></p> + <p><input type="checkbox" id="operator-overview" data-field-name="operator-overview" CHECKED /><label for="operator-overview">Operator Overview</label></p> + <p><input type="checkbox" id="operator-detailedview" data-field-name="operator-detailedview" CHECKED /><label for="operator-detailedview">Operator Detailed View</label></p> </fieldset> + <button id="save-settings" title="{{ _("Includes all settings visible here and also the icon.") }}">{{ _("Save as defaults") }}</button> </div> </div> |