summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSarven Capadisli <csarven@controlyourself.ca>2009-05-20 23:11:35 +0000
committerSarven Capadisli <csarven@controlyourself.ca>2009-05-20 23:11:35 +0000
commitb561962b59e8194e6622f87394e7b8565d78c182 (patch)
tree2961d7ab50948383b03bd7ef68ed8d8d58bef840
parentf90d0ac6c8daae0f939df75b120368976f7b4a30 (diff)
Color picker reset: Resetting form values will also dynamically update
the page colors back to their original.
-rw-r--r--actions/designsettings.php3
-rw-r--r--js/farbtastic/farbtastic.go.js108
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);
+ });
});