From d4c95e080ffb80ceb6f10b663c7547b25689a840 Mon Sep 17 00:00:00 2001 From: Lex Neva Date: Sat, 21 Apr 2018 16:23:13 -0400 Subject: assign thread color names in printout --- print/resources/inkstitch.js | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) (limited to 'print/resources/inkstitch.js') diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index 498b1211..4a4e4456 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -24,17 +24,17 @@ function setPageNumbers() { // Scale SVG (fit || full size) function scaleSVG(element, scale = 'fit') { - + // always center svg transform = "translate(-50%, -50%)"; - + if(scale == 'fit') { var scale = Math.min( - element.width() / element.find('svg').width(), + element.width() / element.find('svg').width(), element.height() / element.find('svg').height() ); } - + transform += " scale(" + scale + ")"; var label = parseInt(scale*100); @@ -71,17 +71,17 @@ function setSVGTransform(figure, transform) { $(function() { setTimeout(ping, 1000); setPageNumbers(); - + /* SCALING AND MOVING SVG */ - + /* Mousewheel scaling */ $('figure.inksimulation').on( 'DOMMouseScroll mousewheel', function (e) { if(e.ctrlKey == true) { - + var svg = $(this).find('svg'); var transform = svg.css('transform').match(/-?[\d\.]+/g); var scale = parseFloat(transform[0]); - + if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { // scroll down = zoom out scale *= 0.97; @@ -91,7 +91,7 @@ $(function() { //scroll up scale *= 1.03; } - + // set modified scale transform[0] = scale; transform[3] = scale; @@ -102,19 +102,19 @@ $(function() { 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) { var p0 = { x: e.pageX, y: e.pageY }; @@ -141,7 +141,7 @@ $(function() { // set it using setSVGTransform() to ensure that it's saved to the server setSVGTransform($(this), $(this).find('svg').css('transform')); }); - + /* Apply transforms to All */ $('button.svg-apply').click(function() { var transform = $(this).parent().siblings('svg').css('transform'); @@ -154,7 +154,7 @@ $(function() { $('[contenteditable="true"]').on('focusout', function() { /* change svg scale */ - var content = $(this).html(); + var content = $.trim($(this).text()); var field_name = $(this).attr('data-field-name'); if(field_name == 'svg-scale') { var scale = parseInt(content); @@ -295,4 +295,3 @@ $(function() { $.postJSON('/defaults', {'value': settings}); }); }); - -- cgit v1.2.3 From c234d6ed2c7d8cd7b7991643dbec4383bed9e2dc Mon Sep 17 00:00:00 2001 From: Lex Neva Date: Mon, 23 Apr 2018 23:12:48 -0400 Subject: UI to select different thread paette --- print/resources/inkstitch.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) (limited to 'print/resources/inkstitch.js') diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index 4a4e4456..60d17f61 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -154,7 +154,7 @@ $(function() { $('[contenteditable="true"]').on('focusout', function() { /* change svg scale */ - var content = $.trim($(this).text()); + var content = $(this).html(); var field_name = $(this).attr('data-field-name'); if(field_name == 'svg-scale') { var scale = parseInt(content); @@ -255,6 +255,26 @@ $(function() { $.postJSON('/settings/paper-size', {value: size}); }); + // Thread Palette + $('select#thread-palette').change(function(){ + $('.modal').show(); + }).on('update', function() { + $(this).data('current-value', $(this).find(':selected').val()); + console.log("selected: " + $(this).data('current-value')); + }).trigger('update'); + + $('#modal-yes').on('click', function(){ + // do shit with the newly-selected palette... + $("select#thread-palette").trigger("update"); + $('.modal').hide(); + }); + + $('#modal-no').on('click', function(){ + var select = $("select#thread-palette"); + select.find('[value="' + select.data('current-value') + '"]').prop('selected', true); + $('.modal').hide(); + }); + //Checkbox $(':checkbox').change(function() { var checked = $(this).prop('checked'); -- cgit v1.2.3 From 8608508e0237b06bea5aac7558c695fd7bc8492b Mon Sep 17 00:00:00 2001 From: Lex Neva Date: Tue, 24 Apr 2018 00:22:45 -0400 Subject: allow selection of a different thread palette --- print/resources/inkstitch.js | 38 +++++++++++++++++++++++++------------- 1 file changed, 25 insertions(+), 13 deletions(-) (limited to 'print/resources/inkstitch.js') diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index 60d17f61..daa2cf4b 100644 --- a/print/resources/inkstitch.js +++ b/print/resources/inkstitch.js @@ -178,11 +178,11 @@ $(function() { $('[data-field-name="' + field_name + '"]').each(function(i, item) { var item = $(item); if (item.is(':checkbox')) { - item.prop('checked', value).trigger('change'); + item.prop('checked', value).trigger('initialize'); } else if (item.is('img')) { item.attr('src', value); } else if (item.is('select')) { - item.val(value).trigger('change'); + item.val(value).trigger('initialize'); } else if (item.is('figure.inksimulation')) { setSVGTransform(item, value); } else { @@ -249,10 +249,10 @@ $(function() { /* Settings */ // Paper Size - $('select#printing-size').change(function(){ - var size = $(this).find(':selected').val(); - $('.page').toggleClass('a4', size == 'a4'); - $.postJSON('/settings/paper-size', {value: size}); + $('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()}); }); // Thread Palette @@ -260,13 +260,26 @@ $(function() { $('.modal').show(); }).on('update', function() { $(this).data('current-value', $(this).find(':selected').val()); - console.log("selected: " + $(this).data('current-value')); }).trigger('update'); $('#modal-yes').on('click', function(){ - // do shit with the newly-selected palette... $("select#thread-palette").trigger("update"); $('.modal').hide(); + 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); + }); + }); + }); }); $('#modal-no').on('click', function(){ @@ -276,14 +289,13 @@ $(function() { }); //Checkbox - $(':checkbox').change(function() { - var checked = $(this).prop('checked'); + $(':checkbox').on('change initialize', function() { var field_name = $(this).attr('data-field-name'); - $('.' + field_name).toggle(checked); + $('.' + field_name).toggle($(this).prop('checked')); setPageNumbers(); - - $.postJSON('/settings/' + field_name, {value: checked}); + }).on('change', function() { + $.postJSON('/settings/' + field_name, {value: $(this).prop('checked')}); }); // Logo -- cgit v1.2.3