Changeset 29811

Timestamp:

2015-03-27T10:24:28+13:00 (9 years ago)

Author:

davidb

Message:

Additional coding so the colour palette choices now feed through to the svg-editor

Location:

other-projects/nz-flag-design/trunk/main-form

Files:

• choose-canvas.html (modified) (1 diff)
• choose-palette.html (modified) (3 diffs)
• iterative-design.html (modified) (2 diffs)
• svg-edit-local/extensions/ext-advanced.js (modified) (1 diff)

other-projects/nz-flag-design/trunk/main-form/choose-canvas.html

@@ -55 +55 @@
     <script type="text/javascript">
         // Flag settings - used to initialise the svg canvas to the user's preferences
-        var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 };
+
+        var colourPotSwatch = [ "#00247d", "#cc142b", "#ffffff", "#29afaf", "#008000", "#800080", "#ffff15", "#ff6600" ]
+        var numColourPots = colourPotSwatch.length;
+
+
+        var flagCanvasSettings = { width: 800, height: 400,
+                               backgroundColor: "#000066",
+                               colourPots: colourPotSwatch.slice(0,3)
+                             };
 
 

other-projects/nz-flag-design/trunk/main-form/choose-palette.html

@@ -76 +76 @@
       var activatedColourPalette = false;
 
-      var colourPotSwatch = [ "#00247d", "#cc142b", "#ffffff", "#29afaf", "#008000", "#800080", "#ffff15", "#ff6600" ]
-      var numColourPots = colourPotSwatch.length;
-
       var selectedColourPot = null;
       var selectedColourPotID;
@@ -94 +91 @@
             $('#'+selectedColourPickerID).value = colour;
             $('#'+selectedColourPickerID).spectrum("set",colour);
+
+      
+            if (typeof flagCanvasSettings !== 'undefined') {
+                var colour_pos_pos = selectedColourPotID.replace("colour-pot");
+                flagCanvasSettings.colourPots[colour_pot_pos] = colour.toHexString();
+        }
 
             if (selectedColourPotID == "colour-pot0")
@@ -593 +596 @@
         function showColourPots(newValue)
         {            
+
+            flagCanvasSettings.colourPots = [];
+
         for (var i=0; i<numColourPots; i++) {
                 var circle = "colour-pot" + i;
             if (i<=newValue) {
-                  document.getElementById(circle).style.visibility = 'visible';
+                  var colourPot = document.getElementById(circle);
+                  colourPot.style.visibility = 'visible';
+          var colourHexStr = tinycolor(colourPot.style.fill).toHexString();
+
+                  flagCanvasSettings.colourPots[i] = colourHexStr;
         }
             else {

other-projects/nz-flag-design/trunk/main-form/iterative-design.html

@@ -278 +278 @@
                         //don't load the previous drawing!
                         reconfigureSvgCanvas(flagCanvasSettings);
+
+                    //if (typeof flagCanvasSettings !== 'undefined') {
+                setTimeout(function() {
+                  console.log("**** design frame = " + design_frame);
+                  console.log("**** design frame content window = " + design_frame.contentWindow);
+                  design_frame.contentWindow.setSVGEditorColourPalette(flagCanvasSettings);
+                }, 500);
+
+                //}
                     });
                 }
@@ -313 +322 @@
                         else {                
                             reconfigureSvgCanvas(flagCanvasSettings);   
+                            var design_frame = document.getElementById('design-2d-iframe');
+                    design_frame.contentWindow.setSVGEditorColourPalette(flagCanvasSettings);
                         }
                     }

other-projects/nz-flag-design/trunk/main-form/svg-edit-local/extensions/ext-advanced.js

@@ -101 +101 @@
     }
 }
+
+
+
+
+function setSVGEditorColourPalette(flagCanvasSettings) {
+    
+    var num_active_colours = flagCanvasSettings.colourPots.length;
+    console.log("*** num active colours = " + num_active_colours);
+
+    $('.palette_item').each( function (index) {
+    // Skip the first palette_item, so transparent fill is still an option
+    if (index==0) { return true; } // jquery equivalent of continue
+
+    var colour_index = index-1;
+
+    if (colour_index<num_active_colours) {
+        $(this).show();
+        $(this).css("background-color",flagCanvasSettings.colourPots[colour_index]);
+        $(this).attr("data-rgb",flagCanvasSettings.colourPots[colour_index]);
+
+        if (index==1) {
+        $(this).trigger("mousedown");
+        }
+    }
+    else {
+        $(this).hide();
+    }
+    });
+
+
+
+    //$('#palette').empty();
+    $('#palette').width(150);
+    
+    return;
+
+    var str = '<div class="palette_item" data-rgb="none"></div>';
+    $.each(flagCanvasSettings.colourPots, function(i, item) {
+    str += '<div class="palette_item" style="background-color: ' + item + ';" data-rgb="' + item + '"></div>';
+    });
+    $('#palette').append(str);
+
+
+            // Prevent selection of elements when shift-clicking
+            $('#palette').mouseover(function() {
+                var inp = $('<input type="hidden">');
+                $(this).append(inp);
+                inp.focus().remove();
+            });
+
+            $('.palette_item').mousedown(function(evt) {
+                // shift key or right click for stroke
+                var picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
+                var color = $(this).data('rgb');
+                var paint;
+
+                // Webkit-based browsers returned 'initial' here for no stroke
+                if (color === 'none' || color === 'transparent' || color === 'initial') {
+                    color = 'none';
+                    paint = new $.jGraduate.Paint();
+                } else {
+                    paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
+                }
+
+                //paintBox[picker].setPaint(paint);
+                svgCanvas.setColor(picker, color);
+
+                if (color !== 'none' && svgCanvas.getPaintOpacity(picker) !== 1) {
+                    svgCanvas.setPaintOpacity(picker, 1.0);
+                }
+                //updateToolButtonState();
+            }).bind('contextmenu', function(e) {e.preventDefault();});
+
+
+}