diff options
Diffstat (limited to 'print/resources')
| -rw-r--r-- | print/resources/inkstitch.js | 147 | ||||
| -rw-r--r-- | print/resources/style.css | 22 |
2 files changed, 146 insertions, 23 deletions
diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index ab0b587d..253e9243 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -22,43 +22,144 @@ function setPageNumbers() { }); } -// set preview svg scale to fit into its box -function scaleInksimulation() { - $('.inksimulation').each(function() { +// Scale SVG (fit || full size) +function scaleSVG(element, scale = 'fit') { + + // always center svg + transform = "translate(-50%, -50%)"; + + if(scale == 'fit') { var scale = Math.min( - $(this).width() / $(this).find('svg').width(), - $(this).height() / $(this).find('svg').height() + element.width() / element.find('svg').width(), + element.height() / element.find('svg').height() ); + // Do not scale to more than 100% + scale = (scale <= 1) ? scale : 1; + } + + transform += " scale(" + scale + ")"; + var label = parseInt(scale*100); - // center the SVG - transform = "translate(-50%, -50%)"; - - if(scale <= 1) { - transform += " scale(" + scale + ")"; - label = parseInt(scale*100) + '%'; - } else { - label = "100%"; - } + element.find('svg').css({ transform: transform }); + element.find('figcaption span').text(label); +} - $(this).find('svg').css({ transform: transform }); - $(this).find('figcaption span').text(label); - }); +// set preview svg scale to fit into its box if transform is not set +function scaleAllSvg() { + $('.page').each(function() { + if( $(this).css('display') != 'none' ) { + if( $(this).find('.inksimulation svg').css('transform') == 'none') { + if( $(this).find('.inksimulation span').text() == '') { + scaleSVG($(this).find('.inksimulation')); + } + else { + var transform = $(this).find('.inksimulation span').text(); + var scale = transform.match(/-?[\d\.]+/g)[0]; + $(this).find('.inksimulation svg').css({ transform: transform }); + $(this).find('.inksimulation span').text(parseInt(scale*100)); + } + } + } + }); } $(function() { setTimeout(ping, 1000); setPageNumbers(); - scaleInksimulation(); + scaleAllSvg(); + + /* SCALING AND MOVING SVG */ + + /* Mousewheel scaling */ + $('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function (e) { + if(event.ctrlKey == true) { + + var svg = $(this).find('svg'); + var transform = svg.css('transform').match(/-?[\d\.]+/g); + var scale = parseFloat(transform[0]); + + if( scale > 0.01 && (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0)) { + // scroll down + scale -= 0.01; + } else { + //scroll up + scale += 0.01; + } + + // set modified scale + transform[0] = scale; + transform[3] = scale; + svg.css({ transform: 'matrix(' + transform + ')' }); + + // set scale caption text + $(this).find("span").text(parseInt(scale*100)); + + //prevent page fom scrolling + return false; + } + }); + + /* Fit SVG */ + $('button.svg-fit').click(function() { + var svgfigure = $(this).closest('figure'); + scaleSVG(svgfigure, 'fit'); + }); + + /* Full Size SVG */ + $('button.svg-full').click(function() { + var svgfigure = $(this).closest('figure'); + scaleSVG(svgfigure, '1'); + }); + + /* Drag SVG */ + $('figure.inksimulation').on('mousedown', function(e) { + $(this).data('p0', { x: e.pageX, y: e.pageY }); + $(this).css({cursor: 'move'}); + }).on('mouseup', function(e) { + $(this).css({cursor: 'auto'}); + var p0 = $(this).data('p0'), + p1 = { x: e.pageX, y: e.pageY }, + d = Math.sqrt(Math.pow(p1.x - p0.x, 2) + Math.pow(p1.y - p0.y, 2)); + if (d > 4) { + var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g); + transform[4] = parseFloat(transform[4]) + parseFloat(p1.x-p0.x); + transform[5] = parseFloat(transform[5]) + parseFloat(p1.y-p0.y); + // set modified translate + $(this).find('svg').css({ transform: 'matrix(' + transform + ')' }); + } + }) + + /* Apply transforms to All */ + $('button.svg-apply').click(function() { + var transform = $(this).parent().siblings('svg').css('transform'); + var scale = transform.match(/-?[\d\.]+/g)[0]; + $('.inksimulation').each(function() { + $(this).find('svg').css({ transform: transform }); + $(this).find("span").text(parseInt(scale*100)); + + }) + }); /* Contendeditable Fields */ - // When we focus out from a contenteditable field, we want to - // set the same content to all fields with the same classname $('[contenteditable="true"]').on('focusout', function() { + /* change svg scale */ var content = $(this).html(); var field_name = $(this).attr('data-field-name'); - $('[data-field-name="' + field_name + '"]').text(content); - $.postJSON('/settings/' + field_name, {value: content}); + 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 @@ -135,7 +236,7 @@ $(function() { $('.' + field_name).toggle(checked); setPageNumbers(); - scaleInksimulation(); + scaleAllSvg(); $.postJSON('/settings/' + field_name, {value: checked}); }); diff --git a/print/resources/style.css b/print/resources/style.css index 8be2370d..013f567c 100644 --- a/print/resources/style.css +++ b/print/resources/style.css @@ -69,6 +69,10 @@ page-break-after: always; margin: 0 !important; } + + figure.inksimulation div { + display: none; + } .ui { display: none; @@ -412,6 +416,24 @@ body { font-weight: bold; line-height: 12pt; margin: 2.5mm; + background: rgba(255, 255, 255, 0.73); + padding: 5px; + } + + figure.inksimulation div { + position: absolute; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + width: fit-content; + } + + figure.inksimulation button { + border: none; + background: grey; + color: white; } /* Color Swatches */ |