summaryrefslogtreecommitdiff
path: root/print
diff options
context:
space:
mode:
Diffstat (limited to 'print')
-rw-r--r--print/resources/inkstitch.js54
-rw-r--r--print/resources/style.css22
-rw-r--r--print/templates/operator_overview.html4
-rw-r--r--print/templates/print_detail.html7
-rw-r--r--print/templates/print_overview.html12
-rw-r--r--print/templates/ui.html8
6 files changed, 95 insertions, 12 deletions
diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index e5065fe6..bb140705 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -7,6 +7,9 @@ $.postJSON = function(url, data, success=null) {
});
};
+var realistic_rendering = {};
+var normal_rendering = {};
+
function ping() {
$.get("/ping")
.done(function() { setTimeout(ping, 1000) })
@@ -142,6 +145,11 @@ $(function() {
setSVGTransform($(this), $(this).find('svg').css('transform'));
});
+ // ignore mouse events on the buttons (Fill, 100%, Apply to All)
+ $('figure.inksimulation div').on('mousedown mouseup', function(e) {
+ e.stopPropagation();
+ });
+
/* Apply transforms to All */
$('button.svg-apply').click(function() {
var transform = $(this).parent().siblings('svg').css('transform');
@@ -190,6 +198,12 @@ $(function() {
}
});
});
+
+ $.getJSON('/realistic', function(realistic_data) {
+ // realistic_rendering is global
+ realistic_rendering = realistic_data;
+ });
+
// wait until page size is set (if they've specified one) and then scale SVGs to fit
setTimeout(function() { scaleAllSvg() }, 500);
});
@@ -288,8 +302,8 @@ $(function() {
$('.modal').hide();
});
- //Checkbox
- $(':checkbox').on('change initialize', function() {
+ // View selection checkboxes
+ $(':checkbox.view').on('change initialize', function() {
var field_name = $(this).attr('data-field-name');
$('.' + field_name).toggle($(this).prop('checked'));
@@ -299,6 +313,42 @@ $(function() {
$.postJSON('/settings/' + field_name, {value: $(this).prop('checked')});
});
+ // Realistic rendering checkboxes
+ $(':checkbox.realistic').on('change', function(e) {
+ console.log("realistic rendering checkbox");
+
+ var item = $(this).data('field-name');
+ var figure = $(this).closest('figure');
+ var svg = figure.find('svg');
+ var transform = svg.css('transform');
+ var checked = $(this).prop('checked');
+
+ console.log("" + item + " " + transform);
+
+ // do this later to allow this event handler to return now,
+ // which will cause the checkbox to be checked or unchecked
+ // immediately even if SVG rendering takes awhile
+ setTimeout(function() {
+ if (checked) {
+ if (!(item in normal_rendering)) {
+ normal_rendering[item] = svg[0].outerHTML;
+ }
+ svg[0].outerHTML = realistic_rendering[item];
+ } else {
+ svg[0].outerHTML = normal_rendering[item];
+ }
+ // can't use the svg variable here because setting outerHTML created a new tag
+ figure.find('svg').css({transform: transform});
+ }, 100);
+
+ e.stopPropagation();
+ return true;
+ });
+
+ $('button.svg-realistic').click(function(e){
+ $(this).find('input').click();
+ });
+
// Logo
$('#logo-picker').change(function(e) {
var file = e.originalEvent.currentTarget.files[0];
diff --git a/print/resources/style.css b/print/resources/style.css
index 58ec8714..716934a8 100644
--- a/print/resources/style.css
+++ b/print/resources/style.css
@@ -473,6 +473,28 @@ body {
border: none;
background: grey;
color: white;
+ display: inline-block;
+ font-size: 16px;
+ font-family: "Barlow", sans-serif;
+ padding-left: 3px;
+ padding-right: 3px;
+ margin: 0px 1px 0px 1px;
+ }
+
+ input.realistic {
+ position: absolute;
+ transform: scale(0.7);
+ margin-left: 2px;
+ }
+
+ label.realistic {
+ margin-left: 20px;
+ }
+
+ /* prevents Chrome from sending a double event for the checkbox
+ and the containing <button> */
+ .realistic {
+ pointer-events: none;
}
/* Color Swatches */
diff --git a/print/templates/operator_overview.html b/print/templates/operator_overview.html
index 367d6d2b..6fa46911 100644
--- a/print/templates/operator_overview.html
+++ b/print/templates/operator_overview.html
@@ -32,6 +32,10 @@
<button class="svg-fit">{{ _('Fit') }}</button>
<button class="svg-full">100%</button>
<button class="svg-apply">{{ _('Apply to all') }}</button>
+ <button class="svg-realistic">
+ <input type="checkbox" id="realistic-operator-overview" data-field-name="overview" class="realistic" />
+ <label for="realistic-operator-overview" class="realistic">Realistic</label>
+ </button>
</div>
</figure>
</main>
diff --git a/print/templates/print_detail.html b/print/templates/print_detail.html
index 714d33a2..e73fe918 100644
--- a/print/templates/print_detail.html
+++ b/print/templates/print_detail.html
@@ -22,9 +22,12 @@
<button class="svg-fit">Fit</button>
<button class="svg-full">100%</button>
<button class="svg-apply">Apply to all</button>
+ <button class="svg-realistic">
+ <input type="checkbox" id="realistic-color-block-{{ loop.index0 }}" data-field-name="block{{ loop.index0 }}" class="realistic" />
+ <label for="realistic-color-block-{{ loop.index0 }}" class="realistic">Realistic</label>
+ </button>
</div>
- </figure>
-
+ </figure>
<div class="color-palette detailed">
{% include 'color_swatch.html' %}
</div>
diff --git a/print/templates/print_overview.html b/print/templates/print_overview.html
index efcf5b2e..b42ab7a9 100644
--- a/print/templates/print_overview.html
+++ b/print/templates/print_overview.html
@@ -32,14 +32,18 @@
<button class="svg-fit">Fit</button>
<button class="svg-full">100%</button>
<button class="svg-apply">Apply to all</button>
+ <button class="svg-realistic">
+ <input type="checkbox" id="realistic-client-overview" data-field-name="overview" class="realistic" />
+ <label for="realistic-client-overview" class="realistic">Realistic</label>
+ </button>
</div>
- </figure>
-
+ </figure>
+
<div class="color-palette">
{% for color_block in color_blocks %}
{% include 'color_swatch.html' %}
- {% endfor %}
-
+ {% endfor %}
+
</div>
<div class="signature">{{ _('Client Signature') }}</div>
</main>
diff --git a/print/templates/ui.html b/print/templates/ui.html
index b09dc941..3b11f345 100644
--- a/print/templates/ui.html
+++ b/print/templates/ui.html
@@ -26,10 +26,10 @@
<div>
<fieldset>
<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>
+ <p><input type="checkbox" class="view" id="client-overview" data-field-name="client-overview" /><label for="client-overview">Client Overview</label></p>
+ <p><input type="checkbox" class="view" id="client-detailedview" data-field-name="client-detailedview" /><label for="client-detailedview">Client Detailed View</label></p>
+ <p><input type="checkbox" class="view" id="operator-overview" data-field-name="operator-overview" CHECKED /><label for="operator-overview">Operator Overview</label></p>
+ <p><input type="checkbox" class="view" 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 these Page Setup settings and also the icon.") }}">{{ _("Save as defaults") }}</button>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-18 09:26:58 +0000