From d4c4f2c7cc947eea71d99ef6030ecb4401508835 Mon Sep 17 00:00:00 2001
From: Kaalleen <36401965+kaalleen@users.noreply.github.com>
Date: Thu, 12 Jul 2018 21:16:22 +0200
Subject: operator detailedview dynamic thumbnail size (#221)
---
print/resources/favicon.ico | Bin 0 -> 102290 bytes
print/resources/inkstitch.js | 126 ++++++++++-
print/resources/style.css | 351 ++++++++++++++++++++++-------
print/templates/headline.html | 2 +-
print/templates/index.html | 6 +-
print/templates/operator_detailedview.html | 138 ++++++------
print/templates/operator_overview.html | 11 +-
print/templates/print_detail.html | 11 +-
print/templates/print_overview.html | 11 +-
print/templates/ui.html | 76 ++++---
print/templates/ui_svg_action_buttons.html | 10 +
11 files changed, 511 insertions(+), 231 deletions(-)
create mode 100644 print/resources/favicon.ico
create mode 100644 print/templates/ui_svg_action_buttons.html
(limited to 'print')
diff --git a/print/resources/favicon.ico b/print/resources/favicon.ico
new file mode 100644
index 00000000..1b5455bd
Binary files /dev/null and b/print/resources/favicon.ico differ
diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js
index 6bcb183d..9f67bc90 100644
--- a/print/resources/inkstitch.js
+++ b/print/resources/inkstitch.js
@@ -17,6 +17,85 @@ function ping() {
.fail(function() { $('#errors').attr('class', 'show') });
}
+//function to chunk opd view into pieces
+ // source: https://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div
+$.fn.chunk = function(size) {
+ var arr = [];
+ for (var i = 0; i < this.length; i += size) {
+ arr.push(this.slice(i, i + size));
+ }
+ return this.pushStack(arr, "chunk", size);
+}
+
+// build operator detailed view (opd)
+function buildOpd(thumbnail_size = $('#operator-detailedview-thumbnail-size').val() ) {
+
+ var thumbnail_size = parseInt(thumbnail_size);
+ var thumbnail_size_mm = thumbnail_size + 'mm';
+
+ var thumbnail_layout = (thumbnail_size >= 60) ? 'medium' : 'small';
+
+ // remove old settings
+ $( "div.page.operator-detailedview header" ).remove();
+ $( "div.page.operator-detailedview footer" ).remove();
+ $( "div.page.operator-detailedview .job-headline" ).remove();
+ $('div.page.operator-detailedview .opd-color-block').parentsUntil('div.page.operator-detailedview').addBack().unwrap();
+ $('.opd-color-block').removeClass('medium large');
+ $('.opd-color-block').removeAttr('style');
+
+ // set thumbnail size
+ $('.operator-svg.operator-preview').css({
+ 'width': thumbnail_size_mm,
+ 'height': thumbnail_size_mm,
+ 'max-width': thumbnail_size_mm
+ });
+
+ // calculate number of blocks per page
+ var num_blocks_per_page = 1;
+ if(thumbnail_layout == 'medium') {
+ $('.opd-color-block').addClass('medium');
+ // set width to be able to calculate the height
+ $('.opd-color-block').css({ 'width': thumbnail_size_mm });
+ // calculate max height -> source: https://stackoverflow.com/questions/6060992/element-with-the-max-height-from-a-set-of-elements
+ var color_box_height = Math.max.apply(null, $('.opd-color-block').map(function () { return $(this).height(); }).get());
+ var container_height = $('#opd-info').height();
+ var num_rows = Math.floor(container_height / color_box_height);
+ var num_columns = Math.floor(175 / thumbnail_size);
+ // if only two blocks fit into one row, use 50% of the space for each of them
+ if(num_columns == 2) { $('.opd-color-block').css({ 'width': 'calc(50% - 2mm)' }); }
+ // set equal height for all color blocks
+ $('.opd-color-block').css({ 'height': color_box_height });
+ // set number of color blocks per page for medium thumbnails
+ num_blocks_per_page = num_columns * num_rows;
+ // use layout for large thumbnails if only 2 or less color blocks fit on one page
+ if(num_blocks_per_page <= 2) {
+ $('.opd-color-block').removeClass('medium').removeAttr('style').addClass('large');
+ thumbnail_layout = 'large';
+ // set number of color blocks per page for large thumbnails
+ num_blocks_per_page = 2;
+ }
+ } else {
+ // set number of color blocks per page for small thumbnails
+ num_blocks_per_page = Math.floor(220 / thumbnail_size);
+ }
+ // set number of color blocks per page to 1 if it defaults to zero
+ // this should never happen, but we want to avoid the browser to crash
+ num_blocks_per_page = (num_blocks_per_page <= 0) ? '1' : num_blocks_per_page;
+
+ // adjust to new settings
+ var header = $('#opd-info header').prop('outerHTML');
+ var footer = $('#opd-info footer').prop('outerHTML');
+ var job_headline = $('#opd-info .job-headline').prop('outerHTML');
+ var opd_visibility = ($('#operator-detailedview').is(':checked')) ? 'block' :'none';
+ var paper_size = $('#printing-size').val();
+ $('.opd-color-block').chunk(num_blocks_per_page).wrap('