2018-03-31 00:37:11 +00:00
|
|
|
function ping() {
|
|
|
|
$.get("/ping")
|
|
|
|
.done(function() { setTimeout(ping, 1000) })
|
|
|
|
.fail(function() { $('#errors').attr('class', 'show') });
|
|
|
|
}
|
|
|
|
|
|
|
|
// set pagenumbers
|
|
|
|
function setPageNumbers() {
|
|
|
|
var totalPageNum = $('body').find('.page:visible').length;
|
|
|
|
$('span.total-page-num').text(totalPageNum);
|
|
|
|
$( '.page:visible span.page-num' ).each(function( index ) {
|
|
|
|
$(this).text(index + 1);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-04-09 17:20:02 +00:00
|
|
|
// Scale SVG (fit || full size)
|
|
|
|
function scaleSVG(element, scale = 'fit') {
|
|
|
|
|
|
|
|
// always center svg
|
|
|
|
transform = "translate(-50%, -50%)";
|
|
|
|
|
|
|
|
if(scale == 'fit') {
|
2018-03-31 00:37:11 +00:00
|
|
|
var scale = Math.min(
|
2018-04-09 17:20:02 +00:00
|
|
|
element.width() / element.find('svg').width(),
|
|
|
|
element.height() / element.find('svg').height()
|
2018-03-31 00:37:11 +00:00
|
|
|
);
|
2018-04-09 17:20:02 +00:00
|
|
|
// Do not scale to more than 100%
|
|
|
|
scale = (scale <= 1) ? scale : 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
transform += " scale(" + scale + ")";
|
|
|
|
var label = parseInt(scale*100);
|
2018-03-31 00:37:11 +00:00
|
|
|
|
2018-04-09 17:20:02 +00:00
|
|
|
element.find('svg').css({ transform: transform });
|
|
|
|
element.find('figcaption span').text(label);
|
|
|
|
}
|
2018-03-31 00:37:11 +00:00
|
|
|
|
2018-04-09 17:20:02 +00:00
|
|
|
// set preview svg scale to fit into its box
|
|
|
|
function scaleAllSvg(element = "") {
|
2018-03-31 00:37:11 +00:00
|
|
|
|
2018-04-09 17:20:02 +00:00
|
|
|
if(element == "") {
|
|
|
|
$('.inksimulation').each(function() {
|
|
|
|
scaleSVG($(this));
|
|
|
|
});
|
|
|
|
}
|
2018-03-31 00:37:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
$(function() {
|
|
|
|
setTimeout(ping, 1000);
|
|
|
|
setPageNumbers();
|
2018-04-09 17:20:02 +00:00
|
|
|
scaleAllSvg();
|
2018-03-31 00:37:11 +00:00
|
|
|
|
2018-04-09 17:20:02 +00:00
|
|
|
/* SCALING AND MOVING SVG */
|
|
|
|
|
|
|
|
/* Mousewheel scaling */
|
|
|
|
$('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function (e) {
|
|
|
|
|
|
|
|
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)) {
|
2018-04-08 15:34:35 +00:00
|
|
|
// scroll down
|
|
|
|
scale -= 0.01;
|
|
|
|
} else {
|
|
|
|
//scroll up
|
|
|
|
scale += 0.01;
|
|
|
|
}
|
2018-04-09 17:20:02 +00:00
|
|
|
|
2018-04-08 15:34:35 +00:00
|
|
|
// set modified scale
|
|
|
|
transform[0] = scale;
|
|
|
|
transform[3] = scale;
|
2018-04-09 17:20:02 +00:00
|
|
|
svg.css({ transform: 'matrix(' + transform + ')' });
|
2018-04-08 15:34:35 +00:00
|
|
|
|
|
|
|
// set scale caption text
|
|
|
|
$(this).find("span").text(parseInt(scale*100));
|
|
|
|
|
|
|
|
//prevent page fom scrolling
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
2018-04-09 17:20:02 +00:00
|
|
|
/* Fit SVG */
|
|
|
|
$('button.svg-fit').click(function() {
|
|
|
|
var svgfigure = $(this).closest('figure');
|
|
|
|
scaleSVG(svgfigure, 'fit');
|
|
|
|
});
|
|
|
|
|
|
|
|
/* Fit SVG */
|
|
|
|
$('button.svg-full').click(function() {
|
|
|
|
var svgfigure = $(this).closest('figure');
|
|
|
|
scaleSVG(svgfigure, '1');
|
|
|
|
});
|
|
|
|
|
2018-04-08 15:34:35 +00:00
|
|
|
/* 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) {
|
|
|
|
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 + ')' });
|
|
|
|
$(this).css({cursor: 'auto'});
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2018-03-31 00:37:11 +00:00
|
|
|
/* Contendeditable Fields */
|
|
|
|
|
|
|
|
// When we focus out from a contenteditable field, we want to
|
|
|
|
// set the same content to all fields with the same classname
|
|
|
|
document.querySelectorAll('[contenteditable="true"]').forEach(function(elem) {
|
|
|
|
elem.addEventListener('focusout', function() {
|
2018-04-09 17:20:02 +00:00
|
|
|
var content = $(this).html();
|
2018-03-31 00:37:11 +00:00
|
|
|
var field_name = $(this).attr('data-field-name');
|
|
|
|
$('[data-field-name="' + field_name + '"]').html(content);
|
2018-04-09 17:20:02 +00:00
|
|
|
|
|
|
|
/* change svg scale */
|
|
|
|
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 + ')' });
|
|
|
|
}
|
|
|
|
|
2018-03-31 00:37:11 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
$('[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) {
|
|
|
|
window.close();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
$('button.print').click(function() {
|
|
|
|
// printing halts all javascript activity, so we need to tell the backend
|
|
|
|
// not to shut down until we're done.
|
|
|
|
$.get("/printing/start")
|
|
|
|
.done(function() {
|
|
|
|
window.print();
|
|
|
|
$.get("/printing/end");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
$('button.settings').click(function(){
|
|
|
|
$('#settings-ui').show();
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#close-settings').click(function(){
|
|
|
|
$('#settings-ui').hide();
|
|
|
|
});
|
|
|
|
|
|
|
|
/* Settings */
|
|
|
|
|
|
|
|
// Paper Size
|
|
|
|
$('select#printing-size').change(function(){
|
|
|
|
$('.page').toggleClass('a4');
|
|
|
|
});
|
|
|
|
|
|
|
|
//Checkbox
|
|
|
|
$(':checkbox').change(function() {
|
|
|
|
$('.' + this.id).toggle();
|
|
|
|
setPageNumbers();
|
2018-04-09 17:20:02 +00:00
|
|
|
scaleAllSvg();
|
2018-03-31 00:37:11 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|