summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--actions/designsettings.php73
-rw-r--r--js/farbtastic/farbtastic.go.js69
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()
+
+ ;
+
});