Dynamic color updates to page elements when user picks a color.

Using JSON to create swatches in HTML output.

1 files changed, 63 insertions, 6 deletions

diff --git a/js/farbtastic/farbtastic.go.js b/js/farbtastic/farbtastic.go.js
index 21a1530bc..64dd7db20 100644
--- a/js/farbtastic/farbtastic.go.js
+++ b/js/farbtastic/farbtastic.go.js
@@ -1,10 +1,67 @@
 $(document).ready(function() {
-    var f = $.farbtastic('#color-picker');
-    var colors = $('#settings_design_color input');
+    function UpdateColors(e) {
+        var S = f.linked;
+        var C = f.color;
 
-    colors
-        .each(function () { f.linkTo(this); })
-        .focus(function() {
-            f.linkTo(this);
+        if (S && S.value && S.value != C) {
+            UpdateSwatch(S);
+
+            switch (parseInt(f.linked.id.slice(-1))) {
+                case 1: default:
+                    $('body').css({'background-color':C});
+                    break;
+                case 2:
+                    $('#content').css({'background-color':C});
+                    break;
+                case 3:
+                    $('#aside_primary').css({'background-color':C});
+                    break;
+                case 4:
+                    $('body').css({'color':C});
+                    break;
+                case 5:
+                    $('a').css({'color':C});
+                    break;
+            }
+            S.value = C;
+        }
+    }
+
+    function UpdateFarbtastic(e) {
+        f.linked = e;
+        f.setColor(e.value);
+    }
+
+    function UpdateSwatch(e) {
+        $(e).css({
+            "background-color": e.value,
+            "color": f.hsl[2] > 0.5 ? "#000": "#fff"
         });
+    }
+
+    $('#settings_design_color').append('<div id="color-picker"></div>');
+    $('#color-picker').hide();
+
+    var f = $.farbtastic('#color-picker', UpdateColors);
+    var swatches = $('#settings_design_color input');
+
+    swatches
+        .each(UpdateColors)
+
+        .blur(function() {
+            $(this).val($(this).val().toUpperCase());
+         })
+
+        .focus(function() {
+            $('#color-picker').show();
+            UpdateFarbtastic(this);
+        })
+
+        .change(function() {
+            UpdateFarbtastic(this);
+            UpdateSwatch(this);
+        }).change()
+
+        ;
+
 });