From b561962b59e8194e6622f87394e7b8565d78c182 Mon Sep 17 00:00:00 2001 From: Sarven Capadisli Date: Wed, 20 May 2009 23:11:35 +0000 Subject: Color picker reset: Resetting form values will also dynamically update the page colors back to their original. --- actions/designsettings.php | 3 +- js/farbtastic/farbtastic.go.js | 108 ++++++++++++++++++++++------------------- 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('
'); - $('#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('
'); + $('#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); + }); }); -- cgit v1.2.3-54-g00ecf