Color picker reset: Resetting form values will also dynamically update

the page colors back to their original.

2 files changed, 61 insertions, 50 deletions

diff --git a/actions/designsettings.php b/actions/designsettings.php
index a85b36a25..8a7c26104 100644
--- a/actions/designsettings.php
+++ b/actions/designsettings.php
@@ -141,7 +141,8 @@ class DesignsettingsAction extends AccountSettingsAction
         $this->elementEnd('fieldset');
 
         $this->submit('save', _('Save'));
-        $this->element('input', array('type' => 'reset',
+        $this->element('input', array('id' => 'settings_design_reset',
+                                      'type' => 'reset',
                                       'value' => 'Reset',
                                       'class' => 'form_action-secondary'));
 
diff --git a/js/farbtastic/farbtastic.go.js b/js/farbtastic/farbtastic.go.js
index e298c1dab..6a0a5c56b 100644
--- a/js/farbtastic/farbtastic.go.js
+++ b/js/farbtastic/farbtastic.go.js
@@ -1,29 +1,22 @@
 $(document).ready(function() {
-    function UpdateColors(e) {
-        var S = f.linked;
-        var C = f.color;
-
-        if (S && S.value && S.value != C) {
-            UpdateSwatch(S);
-
-            switch (parseInt(f.linked.id.slice(-1))) {
-                case 0: default:
-                    $('body').css({'background-color':C});
-                    break;
-                case 1:
-                    $('#content').css({'background-color':C});
-                    break;
-                case 2:
-                    $('#aside_primary').css({'background-color':C});
-                    break;
-                case 3:
-                    $('body').css({'color':C});
-                    break;
-                case 4:
-                    $('a').css({'color':C});
-                    break;
-            }
-            S.value = C;
+    function UpdateColors(S) {
+        C = $(S).val();
+        switch (parseInt(S.id.slice(-1))) {
+            case 0: default:
+                $('body').css({'background-color':C});
+                break;
+            case 1:
+                $('#content').css({'background-color':C});
+                break;
+            case 2:
+                $('#aside_primary').css({'background-color':C});
+                break;
+            case 3:
+                $('body').css({'color':C});
+                break;
+            case 4:
+                $('a').css({'color':C});
+                break;
         }
     }
 
@@ -33,35 +26,52 @@ $(document).ready(function() {
     }
 
     function UpdateSwatch(e) {
-        $(e).css({
-            "background-color": e.value,
-            "color": f.hsl[2] > 0.5 ? "#000": "#fff"
-        });
+        $(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 .swatch');
-
-    swatches
-        .each(UpdateColors)
+    function SynchColors(e) {
+        var S = f.linked;
+        var C = f.color;
 
-        .blur(function() {
-            $(this).val($(this).val().toUpperCase());
-         })
+        if (S && S.value && S.value != C) {
+            S.value = C;
+            UpdateSwatch(S);
+            UpdateColors(S);
+        }
+    }
 
-        .focus(function() {
-            $('#color-picker').show();
-            UpdateFarbtastic(this);
-        })
+    function Init() {
+        $('#settings_design_color').append('<div id="color-picker"></div>');
+        $('#color-picker').hide();
 
-        .change(function() {
-            UpdateFarbtastic(this);
-            UpdateSwatch(this);
-        }).change()
+        f = $.farbtastic('#color-picker', SynchColors);
+        swatches = $('#settings_design_color .swatch');
 
-        ;
+        swatches
+            .each(SynchColors)
+            .blur(function() {
+                $(this).val($(this).val().toUpperCase());
+             })
+            .focus(function() {
+                $('#color-picker').show();
+                UpdateFarbtastic(this);
+            })
+            .change(function() {
+                UpdateFarbtastic(this);
+                UpdateSwatch(this);
+                UpdateColors(this);
+            }).change();
+    }
 
+    var f, swatches;
+    Init();
+    $('#form_settings_design').bind('reset', function(){
+        setTimeout(function(){
+            swatches.each(function(){UpdateColors(this);});
+            $('#color-picker').remove();
+            swatches.unbind();
+            Init();
+        },10);
+    });
 });