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

Using JSON to create swatches in HTML output.

2 files changed, 107 insertions, 35 deletions

diff --git a/actions/designsettings.php b/actions/designsettings.php
index cdd950e78..0deb3f684 100644
--- a/actions/designsettings.php
+++ b/actions/designsettings.php
@@ -76,7 +76,6 @@ class DesignsettingsAction extends AccountSettingsAction
                                           'action' =>
                                           common_local_url('designsettings')));
         $this->elementStart('fieldset');
-//        $this->element('legend', null, _('Design settings'));
         $this->hidden('token', common_session_token());
 
         $this->elementStart('fieldset', array('id' => 'settings_design_background-image'));
@@ -91,28 +90,46 @@ class DesignsettingsAction extends AccountSettingsAction
         $this->elementStart('fieldset', array('id' => 'settings_design_color'));
         $this->element('legend', null, _('Change colours'));
         $this->elementStart('ul', 'form_data');
-        $this->elementStart('li');
-        $this->input('color-1', _('Background color'), '#F0F2F5', null);
-        $this->elementEnd('li');
-        $this->elementStart('li');
-        $this->input('color-2', _('Content background color'), '#FFFFFF', null);
-        $this->elementEnd('li');
-        $this->elementStart('li');
-        $this->input('color-3', _('Sidebar background color'), '#CEE1E9', null);
-        $this->elementEnd('li');
-        $this->elementStart('li');
-        $this->input('color-4', _('Text color'), '#000000', null);
-        $this->elementEnd('li');
-        $this->elementStart('li');
-        $this->input('color-5', _('Link color'), '#002E6E', null);
-        $this->elementEnd('li');
+
+        //This is a JSON object in the DB field. Here for testing. Remove later.
+        $userSwatch = '{"body":{"background-color":"#F0F2F5"},
+                        "#content":{"background-color":"#FFFFFF"},
+                        "#aside_primary":{"background-color":"#CEE1E9"},
+                        "html body":{"color":"#000000"},
+                        "a":{"color":"#002E6E"}}';
+
+        //Default theme swatch -- Where should this be stored?
+        $defaultSwatch = array('body' => array('background-color' => '#F0F2F5'),
+                               '#content' => array('background-color' => '#FFFFFF'),
+                               '#aside_primary' => array('background-color' => '#CEE1E9'),
+                               'html body' => array('color' => '#000000'),
+                               'a' => array('color' => '#002E6E'));
+
+        $userSwatch = ($userSwatch) ? json_decode($userSwatch, true) : $defaultSwatch;
+
+        $s = 0;
+        $labelSwatch = array('Background color',
+                             'Content background color',
+                             'Sidebar background color',
+                             'Text color',
+                             'Link color');
+        foreach($userSwatch as $propertyvalue => $value) {
+            $foo = array_values($value); //Is this necessary? $value[0] doesn't work because of invalid key
+            $this->elementStart('li');
+            $this->input("swatch-".$s, $labelSwatch[$s], $foo[0]);
+            $this->elementEnd('li');
+            $s++;
+        }
+
         $this->elementEnd('ul');
-        $this->element('div', array('id' => 'color-picker'));
         $this->elementEnd('fieldset');
 
-
         $this->submit('save', _('Save'));
-
+/*TODO: Check submitted form values: 
+json_encode(form values)
+if submitted Swatch == DefaultSwatch, don't store in DB.
+else store in BD
+*/
         $this->elementEnd('fieldset');
         $this->elementEnd('form');
 
@@ -187,7 +204,7 @@ class DesignsettingsAction extends AccountSettingsAction
 
 
     /**
-     * Add the jCrop stylesheet
+     * Add the Farbtastic stylesheet
      *
      * @return void
      */
@@ -205,7 +222,7 @@ class DesignsettingsAction extends AccountSettingsAction
     }
 
     /**
-     * Add the jCrop scripts
+     * Add the Farbtastic scripts
      *
      * @return void
      */
@@ -214,14 +231,12 @@ class DesignsettingsAction extends AccountSettingsAction
     {
         parent::showScripts();
 
-//        if ($this->mode == 'crop') {
-            $farbtasticPack = common_path('js/farbtastic/farbtastic.js');
-            $farbtasticGo   = common_path('js/farbtastic/farbtastic.go.js');
+        $farbtasticPack = common_path('js/farbtastic/farbtastic.js');
+        $farbtasticGo   = common_path('js/farbtastic/farbtastic.go.js');
 
-            $this->element('script', array('type' => 'text/javascript',
-                                           'src' => $farbtasticPack));
-            $this->element('script', array('type' => 'text/javascript',
-                                           'src' => $farbtasticGo));
-//        }
+        $this->element('script', array('type' => 'text/javascript',
+                                       'src' => $farbtasticPack));
+        $this->element('script', array('type' => 'text/javascript',
+                                       'src' => $farbtasticGo));
     }
 }
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()
+
+        ;
+
 });