summaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorSarven Capadisli <csarven@controlyourself.ca>2009-05-18 20:10:46 +0000
committerSarven Capadisli <csarven@controlyourself.ca>2009-05-18 20:10:46 +0000
commit806200379d2e35a5cbf5ce4940474e1cbdd1f1a0 (patch)
tree281a51499fc26dc1e938799e2ce2dd88758cd747 /js
parent5897dfa4c37d6a44bcde5dc7569c8b0d30f21b84 (diff)
Dynamic color updates to page elements when user picks a color.
Using JSON to create swatches in HTML output.
Diffstat (limited to 'js')
-rw-r--r--js/farbtastic/farbtastic.go.js69
1 files changed, 63 insertions, 6 deletions
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()
+
+ ;
+
});