functional color switches, look changes

javascript/src/Plugins/qfq.fabric.js

@@ -53,6 +53,7 @@ $(function (n) {
 
         ModeSettings.prototype.setUpButtons = function() {
             var $controlWrapper = $("#fabric-controls");
+            var $buttonGroup = $("<div>", {class: "btn-group"});
             var that = this;
             this.myModes.modes.forEach(function(o) {
                 var $button = $("<button>", {
@@ -69,15 +70,17 @@ $(function (n) {
                     $button.addClass("btn-primary");
                 }
                 that.myButtons.push($button);
-                $controlWrapper.append($button);
+                $buttonGroup.append($button);
                 var modePressed = o.name;
                 $button.on("click", function() {
                     that.qFabric.buttonPress(modePressed, $button)
                 });
             });
-            var $colorSelector = $("<div>");
-            $controlWrapper.append($colorSelector);
+            $controlWrapper.append($buttonGroup);
+
 
+            var $colorSelector = $("<div>", {class: "color-picker"});
+            $controlWrapper.append($colorSelector);
             this.myModes.colors.forEach(function (o) {
                 var $button = $("<button>", {
                     type: 'button',
@@ -87,6 +90,9 @@ $(function (n) {
                 });
                 $colorSelector.append($button);
                 that.myColors.push($button);
+                $button.on("click", function() {
+                    that.qFabric.setColor(o, $button);
+                })
             });
         };
 
@@ -403,6 +409,13 @@ $(function (n) {
         this.drawRectangleMode = true;
     };
 
+    n.Fabric.prototype.setColor = function(color, $button) {
+        this.activeColor.red = color.red;
+        this.activeColor.blue = color.blue;
+        this.activeColor.green = color.green;
+        this.setBrush();
+    };
+
     // Just for mockup, init() function called from new QfqNS.Plugin class maybe.
     n.fabric = new n.Fabric();
     n.fabric.setBackground("../mockup/mockData/Scan2a.jpeg");
@@ -453,46 +466,4 @@ $(function (n) {
 
     */
 
-    $("#draw-blue").on("click", function() {
-        n.fabric.activeColor.red = 0;
-        n.fabric.activeColor.green = 68;
-        n.fabric.activeColor.blue = 255;
-        n.fabric.setBrush();
-    });
-
-    $("#draw-light-blue").on("click", function() {
-        n.fabric.activeColor.red = 0;
-        n.fabric.activeColor.green = 204;
-        n.fabric.activeColor.blue = 255;
-        n.fabric.setBrush();
-    });
-
-    $("#draw-red").on("click", function() {
-        n.fabric.activeColor.red = 255;
-        n.fabric.activeColor.green = 0;
-        n.fabric.activeColor.blue = 0;
-        n.fabric.setBrush();
-    });
-
-    $("#draw-pink").on("click", function() {
-        n.fabric.activeColor.red = 255;
-        n.fabric.activeColor.green = 53;
-        n.fabric.activeColor.blue = 177;
-        n.fabric.setBrush();
-    });
-
-    $("#draw-green").on("click", function() {
-        n.fabric.activeColor.red = 133;
-        n.fabric.activeColor.green = 196;
-        n.fabric.activeColor.blue = 75;
-        n.fabric.setBrush();
-    });
-
-    $("#draw-yellow").on("click", function() {
-        n.fabric.activeColor.red = 255;
-        n.fabric.activeColor.green = 204;
-        n.fabric.activeColor.blue = 0;
-        n.fabric.setBrush();
-    });
-
 }(QfqNS));
\ No newline at end of file