1 files changed, 56 insertions, 25 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});
   });
 });
-