diff options
Diffstat (limited to 'print/resources')
| -rw-r--r-- | print/resources/inkstitch.js | 81 | ||||
| -rw-r--r-- | print/resources/style.css | 30 |
2 files changed, 83 insertions, 28 deletions
diff --git a/print/resources/inkstitch.js b/print/resources/inkstitch.js index 498b1211..daa2cf4b 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'); @@ -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,21 +249,53 @@ $(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 + $('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(); + 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(){ + 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'); + $(':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 @@ -295,4 +327,3 @@ $(function() { $.postJSON('/defaults', {'value': settings}); }); }); - diff --git a/print/resources/style.css b/print/resources/style.css index 97dee6a8..58ec8714 100644 --- a/print/resources/style.css +++ b/print/resources/style.css @@ -214,9 +214,6 @@ body { border-bottom: 1px solid rgb(188, 188, 188); border-bottom: 1px solid rgba(129, 129, 129, 0.5); box-shadow: 0 1px 1px 1px rgba(194, 191, 191, 0.5); - } - - #settings-ui div { text-align: left; font-size: 12pt; } @@ -238,6 +235,33 @@ body { margin-bottom: 1em; } + #modal-background { + display: none; + z-index: 3; + position: fixed; + background: black; + opacity: 0.5; + width: 100%; + height: 100%; + top: 0; + left: 0; + } + + #modal-content { + display: none; + z-index: 4; + position: fixed; + width: 50%; + height: 25%%; + top: 200px; + left: 25%; + background: rgb(255, 255, 255); + border-bottom: 1px solid rgb(188, 188, 188); + box-shadow: 0 1px 1px 1px rgb(194, 191, 191); + text-align: center; + font-size: 16pt; + } + /* Header */ |