GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

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

Browse Source 
Using JSON to create swatches in HTML output.
This commit is contained in:
Sarven Capadisli 2009-05-18 20:10:46 +00:00
parent 5897dfa4c3
commit 806200379d
2 changed files with 107 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
actions/designsettings.php
View File

@ -76,7 +76,6 @@ class DesignsettingsAction extends AccountSettingsAction
'action' => 'action' =>
common_local_url('designsettings'))); common_local_url('designsettings')));
$this->elementStart('fieldset'); $this->elementStart('fieldset');
// $this->element('legend', null, _('Design settings'));
$this->hidden('token', common_session_token()); $this->hidden('token', common_session_token());
$this->elementStart('fieldset', array('id' => 'settings_design_background-image')); $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->elementStart('fieldset', array('id' => 'settings_design_color'));
$this->element('legend', null, _('Change colours')); $this->element('legend', null, _('Change colours'));
$this->elementStart('ul', 'form_data'); $this->elementStart('ul', 'form_data');
$this->elementStart('li');
$this->input('color-1', _('Background color'), '#F0F2F5', null); //This is a JSON object in the DB field. Here for testing. Remove later.
$this->elementEnd('li'); $userSwatch = '{"body":{"background-color":"#F0F2F5"},
$this->elementStart('li'); "#content":{"background-color":"#FFFFFF"},
$this->input('color-2', _('Content background color'), '#FFFFFF', null); "#aside_primary":{"background-color":"#CEE1E9"},
$this->elementEnd('li'); "html body":{"color":"#000000"},
$this->elementStart('li'); "a":{"color":"#002E6E"}}';
$this->input('color-3', _('Sidebar background color'), '#CEE1E9', null);
$this->elementEnd('li'); //Default theme swatch -- Where should this be stored?
$this->elementStart('li'); $defaultSwatch = array('body' => array('background-color' => '#F0F2F5'),
$this->input('color-4', _('Text color'), '#000000', null); '#content' => array('background-color' => '#FFFFFF'),
$this->elementEnd('li'); '#aside_primary' => array('background-color' => '#CEE1E9'),
$this->elementStart('li'); 'html body' => array('color' => '#000000'),
$this->input('color-5', _('Link color'), '#002E6E', null); 'a' => array('color' => '#002E6E'));
$this->elementEnd('li');
$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->elementEnd('ul');
$this->element('div', array('id' => 'color-picker'));
$this->elementEnd('fieldset'); $this->elementEnd('fieldset');
$this->submit('save', _('Save')); $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('fieldset');
$this->elementEnd('form'); $this->elementEnd('form');
@ -187,7 +204,7 @@ class DesignsettingsAction extends AccountSettingsAction
/** /**
* Add the jCrop stylesheet * Add the Farbtastic stylesheet
* *
* @return void * @return void
*/ */
@ -205,7 +222,7 @@ class DesignsettingsAction extends AccountSettingsAction
} }
/** /**
* Add the jCrop scripts * Add the Farbtastic scripts
* *
* @return void * @return void
*/ */
@ -214,14 +231,12 @@ class DesignsettingsAction extends AccountSettingsAction
{ {
parent::showScripts(); parent::showScripts();
// if ($this->mode == 'crop') { $farbtasticPack = common_path('js/farbtastic/farbtastic.js');
$farbtasticPack = common_path('js/farbtastic/farbtastic.js'); $farbtasticGo = common_path('js/farbtastic/farbtastic.go.js');
$farbtasticGo = common_path('js/farbtastic/farbtastic.go.js');
$this->element('script', array('type' => 'text/javascript', $this->element('script', array('type' => 'text/javascript',
'src' => $farbtasticPack)); 'src' => $farbtasticPack));
$this->element('script', array('type' => 'text/javascript', $this->element('script', array('type' => 'text/javascript',
'src' => $farbtasticGo)); 'src' => $farbtasticGo));
// }
} }
} }

69
js/farbtastic/farbtastic.go.js
View File

@ -1,10 +1,67 @@
$(document).ready(function() { $(document).ready(function() {
var f = $.farbtastic('#color-picker'); function UpdateColors(e) {
var colors = $('#settings_design_color input'); var S = f.linked;
var C = f.color;
colors if (S && S.value && S.value != C) {
.each(function () { f.linkTo(this); }) UpdateSwatch(S);
.focus(function() {
f.linkTo(this); 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()
;
}); });