Color picker reset: Resetting form values will also dynamically update
the page colors back to their original.
This commit is contained in:
parent
f90d0ac6c8
commit
b561962b59
@ -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'));
|
||||
|
||||
|
@ -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();
|
||||
function SynchColors(e) {
|
||||
var S = f.linked;
|
||||
var C = f.color;
|
||||
|
||||
var f = $.farbtastic('#color-picker', UpdateColors);
|
||||
var swatches = $('#settings_design_color .swatch');
|
||||
if (S && S.value && S.value != C) {
|
||||
S.value = C;
|
||||
UpdateSwatch(S);
|
||||
UpdateColors(S);
|
||||
}
|
||||
}
|
||||
|
||||
swatches
|
||||
.each(UpdateColors)
|
||||
function Init() {
|
||||
$('#settings_design_color').append('<div id="color-picker"></div>');
|
||||
$('#color-picker').hide();
|
||||
|
||||
.blur(function() {
|
||||
$(this).val($(this).val().toUpperCase());
|
||||
})
|
||||
f = $.farbtastic('#color-picker', SynchColors);
|
||||
swatches = $('#settings_design_color .swatch');
|
||||
|
||||
.focus(function() {
|
||||
$('#color-picker').show();
|
||||
UpdateFarbtastic(this);
|
||||
})
|
||||
|
||||
.change(function() {
|
||||
UpdateFarbtastic(this);
|
||||
UpdateSwatch(this);
|
||||
}).change()
|
||||
|
||||
;
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user