2018-04-15 00:39:59 +00:00
|
|
|
$.postJSON = function(url, data, success=null) {
|
|
|
|
return $.ajax(url, {
|
|
|
|
type: 'POST',
|
|
|
|
data: JSON.stringify(data),
|
|
|
|
contentType: 'application/json',
|
|
|
|
success: success
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
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') {
|
2018-04-21 20:23:13 +00:00
|
|
|
|
2018-04-09 17:20:02 +00:00
|
|
|
// always center svg
|
|
|
|
transform = "translate(-50%, -50%)";
|
2018-04-21 20:23:13 +00:00
|
|
|
|
2018-04-09 17:20:02 +00:00
|
|
|
if(scale == 'fit') {
|
2018-03-31 00:37:11 +00:00
|
|
|
var scale = Math.min(
|
2018-04-21 20:23:13 +00:00
|
|
|
element.width() / element.find('svg').width(),
|
2018-04-09 17:20:02 +00:00
|
|
|
element.height() / element.find('svg').height()
|
2018-03-31 00:37:11 +00:00
|
|
|
);
|
2018-04-09 17:20:02 +00:00
|
|
|
}
|
2018-04-21 20:23:13 +00:00
|
|
|
|
2018-04-09 17:20:02 +00:00
|
|
|
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 });
|
2018-04-17 19:48:38 +00:00
|
|
|
element.find('.scale').text(label);
|
2018-04-09 17:20:02 +00:00
|
|
|
}
|
2018-03-31 00:37:11 +00:00
|
|
|
|
2018-04-11 16:57:55 +00:00
|
|
|
// set preview svg scale to fit into its box if transform is not set
|
|
|
|
function scaleAllSvg() {
|
|
|
|
$('.page').each(function() {
|
2018-04-17 19:48:38 +00:00
|
|
|
if( $(this).find('.inksimulation svg').css('transform') == 'none') {
|
|
|
|
scaleSVG($(this).find('.inksimulation'), 'fit');
|
2018-04-11 16:57:55 +00:00
|
|
|
}
|
2018-04-09 17:20:02 +00:00
|
|
|
});
|
2018-03-31 00:37:11 +00:00
|
|
|
}
|
|
|
|
|
2018-04-18 20:09:43 +00:00
|
|
|
var saveTimerHandles = {};
|
|
|
|
|
|
|
|
function setSVGTransform(figure, transform) {
|
|
|
|
var field_name = $(figure).data('field-name');
|
|
|
|
var scale = transform.match(/-?[\d\.]+/g)[0];
|
|
|
|
figure.find('svg').css({ transform: transform });
|
|
|
|
figure.find(".scale").text(parseInt(scale*100));
|
|
|
|
|
|
|
|
// avoid spamming updates
|
|
|
|
if (saveTimerHandles[field_name] != null)
|
|
|
|
clearTimeout(saveTimerHandles[field_name]);
|
|
|
|
|
|
|
|
saveTimerHandles[field_name] = setTimeout(function() {
|
|
|
|
$.postJSON('/settings/' + field_name, {value: transform});
|
|
|
|
}, 250);
|
|
|
|
}
|
|
|
|
|
2018-03-31 00:37:11 +00:00
|
|
|
$(function() {
|
|
|
|
setTimeout(ping, 1000);
|
|
|
|
setPageNumbers();
|
2018-04-21 20:23:13 +00:00
|
|
|
|
2018-04-09 17:20:02 +00:00
|
|
|
/* SCALING AND MOVING SVG */
|
2018-04-21 20:23:13 +00:00
|
|
|
|
2018-04-09 17:20:02 +00:00
|
|
|
/* Mousewheel scaling */
|
|
|
|
$('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function (e) {
|
2018-04-18 17:20:33 +00:00
|
|
|
if(e.ctrlKey == true) {
|
2018-04-21 20:23:13 +00:00
|
|
|
|
2018-04-11 16:57:55 +00:00
|
|
|
var svg = $(this).find('svg');
|
|
|
|
var transform = svg.css('transform').match(/-?[\d\.]+/g);
|
|
|
|
var scale = parseFloat(transform[0]);
|
2018-04-21 20:23:13 +00:00
|
|
|
|
2018-04-17 01:15:39 +00:00
|
|
|
if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
|
|
|
|
// scroll down = zoom out
|
|
|
|
scale *= 0.97;
|
|
|
|
if (scale < 0.01)
|
|
|
|
scale = 0.01;
|
2018-04-11 16:57:55 +00:00
|
|
|
} else {
|
|
|
|
//scroll up
|
2018-04-17 01:15:39 +00:00
|
|
|
scale *= 1.03;
|
2018-04-11 16:57:55 +00:00
|
|
|
}
|
2018-04-21 20:23:13 +00:00
|
|
|
|
2018-04-11 16:57:55 +00:00
|
|
|
// set modified scale
|
|
|
|
transform[0] = scale;
|
|
|
|
transform[3] = scale;
|
2018-04-18 20:09:43 +00:00
|
|
|
|
|
|
|
setSVGTransform($(this), 'matrix(' + transform + ')');
|
2018-04-08 15:34:35 +00:00
|
|
|
|
2018-04-11 16:57:55 +00:00
|
|
|
//prevent page fom scrolling
|
|
|
|
return false;
|
|
|
|
}
|
2018-04-08 15:34:35 +00:00
|
|
|
});
|
2018-04-21 20:23:13 +00:00
|
|
|
|
2018-04-09 17:20:02 +00:00
|
|
|
/* Fit SVG */
|
|
|
|
$('button.svg-fit').click(function() {
|
|
|
|
var svgfigure = $(this).closest('figure');
|
|
|
|
scaleSVG(svgfigure, 'fit');
|
|
|
|
});
|
2018-04-21 20:23:13 +00:00
|
|
|
|
2018-04-11 16:57:55 +00:00
|
|
|
/* Full Size SVG */
|
2018-04-09 17:20:02 +00:00
|
|
|
$('button.svg-full').click(function() {
|
|
|
|
var svgfigure = $(this).closest('figure');
|
|
|
|
scaleSVG(svgfigure, '1');
|
|
|
|
});
|
2018-04-21 20:23:13 +00:00
|
|
|
|
2018-04-08 15:34:35 +00:00
|
|
|
/* Drag SVG */
|
|
|
|
$('figure.inksimulation').on('mousedown', function(e) {
|
2018-04-17 19:01:38 +00:00
|
|
|
var p0 = { x: e.pageX, y: e.pageY };
|
|
|
|
var start_transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g);
|
|
|
|
var start_offset = { x: parseFloat(start_transform[4]), y: parseFloat(start_transform[5]) };
|
|
|
|
|
|
|
|
$(this).css({cursor: 'move'});
|
|
|
|
$(this).on('mousemove', function(e) {
|
|
|
|
var p1 = { x: e.pageX, y: e.pageY };
|
|
|
|
// set modified translate
|
|
|
|
var transform = $(this).find('svg').css('transform').match(/-?[\d\.]+/g);
|
|
|
|
transform[4] = start_offset.x + (p1.x - p0.x);
|
|
|
|
transform[5] = start_offset.y + (p1.y - p0.y);
|
2018-04-18 20:09:43 +00:00
|
|
|
|
|
|
|
// I'd ike to use setSVGTransform() here but this code runs many
|
|
|
|
// times per second and it's just too CPU-intensive.
|
|
|
|
$(this).find('svg').css({transform: 'matrix(' + transform + ')'});
|
2018-04-17 19:01:38 +00:00
|
|
|
});
|
2018-04-08 15:34:35 +00:00
|
|
|
}).on('mouseup', function(e) {
|
2018-04-17 19:01:38 +00:00
|
|
|
$(this).css({cursor: 'auto'});
|
|
|
|
$(this).data('p0', null);
|
|
|
|
$(this).off('mousemove');
|
2018-04-18 20:09:43 +00:00
|
|
|
|
|
|
|
// set it using setSVGTransform() to ensure that it's saved to the server
|
|
|
|
setSVGTransform($(this), $(this).find('svg').css('transform'));
|
2018-04-17 19:01:38 +00:00
|
|
|
});
|
2018-04-21 20:23:13 +00:00
|
|
|
|
2018-04-11 16:57:55 +00:00
|
|
|
/* Apply transforms to All */
|
|
|
|
$('button.svg-apply').click(function() {
|
|
|
|
var transform = $(this).parent().siblings('svg').css('transform');
|
|
|
|
$('.inksimulation').each(function() {
|
2018-04-18 20:09:43 +00:00
|
|
|
setSVGTransform($(this), transform);
|
2018-04-11 16:57:55 +00:00
|
|
|
})
|
|
|
|
});
|
2018-04-14 01:23:00 +00:00
|
|
|
|
2018-03-31 00:37:11 +00:00
|
|
|
/* Contendeditable Fields */
|
2018-04-14 01:23:00 +00:00
|
|
|
|
|
|
|
$('[contenteditable="true"]').on('focusout', function() {
|
2018-04-11 16:57:55 +00:00
|
|
|
/* change svg scale */
|
2018-04-24 03:12:48 +00:00
|
|
|
var content = $(this).html();
|
2018-04-14 01:23:00 +00:00
|
|
|
var field_name = $(this).attr('data-field-name');
|
2018-04-17 01:03:46 +00:00
|
|
|
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});
|
|
|
|
}
|
2018-03-31 00:37:11 +00:00
|
|
|
});
|
2018-04-14 01:23:00 +00:00
|
|
|
|
2018-04-14 03:39:49 +00:00
|
|
|
// load up initial metadata values
|
2018-04-17 00:17:07 +00:00
|
|
|
$.getJSON('/settings', function(settings) {
|
2018-04-17 19:48:38 +00:00
|
|
|
$.each(settings, function(field_name, value) {
|
|
|
|
$('[data-field-name="' + field_name + '"]').each(function(i, item) {
|
|
|
|
var item = $(item);
|
|
|
|
if (item.is(':checkbox')) {
|
2018-04-24 04:22:45 +00:00
|
|
|
item.prop('checked', value).trigger('initialize');
|
2018-04-17 19:48:38 +00:00
|
|
|
} else if (item.is('img')) {
|
|
|
|
item.attr('src', value);
|
|
|
|
} else if (item.is('select')) {
|
2018-04-24 04:22:45 +00:00
|
|
|
item.val(value).trigger('initialize');
|
2018-04-18 20:09:43 +00:00
|
|
|
} else if (item.is('figure.inksimulation')) {
|
|
|
|
setSVGTransform(item, value);
|
2018-04-17 19:48:38 +00:00
|
|
|
} else {
|
|
|
|
item.text(value);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
// wait until page size is set (if they've specified one) and then scale SVGs to fit
|
|
|
|
setTimeout(function() { scaleAllSvg() }, 500);
|
2018-04-14 03:39:49 +00:00
|
|
|
});
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
});
|
2018-04-14 01:23:00 +00:00
|
|
|
|
|
|
|
|
2018-03-31 00:37:11 +00:00
|
|
|
/* Settings Bar */
|
2018-04-14 01:23:00 +00:00
|
|
|
|
2018-03-31 00:37:11 +00:00
|
|
|
$('button.close').click(function() {
|
|
|
|
$.post('/shutdown', {})
|
|
|
|
.done(function(data) {
|
|
|
|
window.close();
|
2018-04-19 02:30:26 +00:00
|
|
|
|
|
|
|
/* Chrome and Firefox both have a rule: scripts can only close windows
|
|
|
|
* that they opened. Chrome seems to have an exception for windows that
|
|
|
|
* were opened by an outside program, so the above works fine. Firefox
|
|
|
|
* steadfastly refuses to allow us to close the window, so we'll tell
|
|
|
|
* the user (in their language) that they can close it.
|
|
|
|
*/
|
|
|
|
setTimeout(function() {
|
|
|
|
document.open();
|
|
|
|
document.write("<html><body>" + data + "</body></html>");
|
|
|
|
document.close();
|
|
|
|
}, 1000);
|
2018-03-31 00:37:11 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
$('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();
|
|
|
|
});
|
2018-04-14 01:23:00 +00:00
|
|
|
|
2018-03-31 00:37:11 +00:00
|
|
|
/* Settings */
|
2018-04-14 01:23:00 +00:00
|
|
|
|
2018-03-31 00:37:11 +00:00
|
|
|
// Paper Size
|
2018-04-24 04:22:45 +00:00
|
|
|
$('select#printing-size').on('change initialize', function(){
|
|
|
|
$('.page').toggleClass('a4', $(this).find(':selected').val() == 'a4');
|
|
|
|
}).on('change', function() {
|
|
|
|
$.postJSON('/settings/paper-size', {value: $(this).find(':selected').val()});
|
2018-03-31 00:37:11 +00:00
|
|
|
});
|
2018-04-14 01:23:00 +00:00
|
|
|
|
2018-04-24 03:12:48 +00:00
|
|
|
// Thread Palette
|
|
|
|
$('select#thread-palette').change(function(){
|
|
|
|
$('.modal').show();
|
|
|
|
}).on('update', function() {
|
|
|
|
$(this).data('current-value', $(this).find(':selected').val());
|
|
|
|
}).trigger('update');
|
|
|
|
|
|
|
|
$('#modal-yes').on('click', function(){
|
|
|
|
$("select#thread-palette").trigger("update");
|
|
|
|
$('.modal').hide();
|
2018-04-24 04:22:45 +00:00
|
|
|
var body = {'name': $('select#thread-palette').find(':selected').val()};
|
|
|
|
$.postJSON('/palette', body, function() {
|
|
|
|
$.getJSON('/threads', function(threads) {
|
|
|
|
console.log("threads: " + JSON.stringify(threads));
|
|
|
|
$.each(threads, function(i, thread) {
|
|
|
|
console.log("doing: " + JSON.stringify(thread));
|
|
|
|
$('[data-field-name="color-' + thread.hex + '"]').text(thread.name);
|
|
|
|
var thread_description = thread.manufacturer;
|
|
|
|
if (thread.number) {
|
|
|
|
thread_description += " #" + thread.number;
|
|
|
|
}
|
|
|
|
$('[data-field-name="thread-' + thread.hex + '"]').text(thread_description);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-04-24 03:12:48 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
$('#modal-no').on('click', function(){
|
|
|
|
var select = $("select#thread-palette");
|
|
|
|
select.find('[value="' + select.data('current-value') + '"]').prop('selected', true);
|
|
|
|
$('.modal').hide();
|
|
|
|
});
|
|
|
|
|
2018-03-31 00:37:11 +00:00
|
|
|
//Checkbox
|
2018-04-24 04:22:45 +00:00
|
|
|
$(':checkbox').on('change initialize', function() {
|
2018-04-15 00:39:59 +00:00
|
|
|
var field_name = $(this).attr('data-field-name');
|
|
|
|
|
2018-04-24 04:22:45 +00:00
|
|
|
$('.' + field_name).toggle($(this).prop('checked'));
|
2018-03-31 00:37:11 +00:00
|
|
|
setPageNumbers();
|
2018-04-24 04:22:45 +00:00
|
|
|
}).on('change', function() {
|
|
|
|
$.postJSON('/settings/' + field_name, {value: $(this).prop('checked')});
|
2018-03-31 00:37:11 +00:00
|
|
|
});
|
2018-04-14 01:23:00 +00:00
|
|
|
|
2018-04-17 00:17:07 +00:00
|
|
|
// Logo
|
|
|
|
$('#logo-picker').change(function(e) {
|
2018-05-12 00:48:06 +00:00
|
|
|
var file = e.originalEvent.currentTarget.files[0];
|
2018-04-17 00:17:07 +00:00
|
|
|
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});
|
|
|
|
});
|
2018-03-31 00:37:11 +00:00
|
|
|
});
|