diff options
| -rw-r--r-- | actions/designsettings.php | 73 | ||||
| -rw-r--r-- | js/farbtastic/farbtastic.go.js | 69 |
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() + + ; + }); |