diff options
Diffstat (limited to 'print')
| -rw-r--r-- | print/resources/inkstitch.js | 54 | ||||
| -rw-r--r-- | print/resources/style.css | 25 | ||||
| -rw-r--r-- | print/templates/headline.html | 5 | ||||
| -rw-r--r-- | print/templates/ui.html | 5 |
4 files changed, 74 insertions, 15 deletions
diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index 8123a31f..ab0b587d 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -58,20 +58,22 @@ $(function() { var content = $(this).html(); var field_name = $(this).attr('data-field-name'); $('[data-field-name="' + field_name + '"]').text(content); - $.postJSON('/metadata/' + field_name + '/set', {value: content}); + $.postJSON('/settings/' + field_name, {value: content}); }); // load up initial metadata values - $.getJSON('/metadata', function(metadata) { - $.each(metadata, function(field_name, value) { + $.getJSON('/settings', function(settings) { + $.each(settings, function(field_name, value) { $('[data-field-name="' + field_name + '"]').each(function(i, item) { - console.log(item); - if ($(item).is(':checkbox')) { - console.log("is a checkbox"); - $(item).prop('checked', value).trigger('change'); + 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 { - console.log("is not a checkbox"); - $(item).text(value); + item.text(value); } }); }); @@ -121,7 +123,9 @@ $(function() { // 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 @@ -133,8 +137,36 @@ $(function() { setPageNumbers(); scaleInksimulation(); - $.postJSON('/metadata/' + field_name + '/set', {value: checked}); + $.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 824f8dce..8be2370d 100644 --- a/print/resources/style.css +++ b/print/resources/style.css @@ -226,6 +226,10 @@ body { cursor: pointer; } + #settings-ui fieldset { + margin-bottom: 1em; + } + /* Header */ @@ -247,11 +251,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 cbc9c43a..421202e4 100644 --- a/print/templates/headline.html +++ b/print/templates/headline.html @@ -1,5 +1,8 @@ <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"> diff --git a/print/templates/ui.html b/print/templates/ui.html index 9acdd1bc..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> + <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> |