1 files changed, 136 insertions, 0 deletions
diff --git a/color/preview.js b/color/preview.js
new file mode 100644
index 0000000..2644a06
--- /dev/null
+++ b/color/preview.js
@@ -0,0 +1,136 @@
+// $Id$
+(function ($) {
+  Drupal.color = {
+    callback: function(context, settings, form, farb, height, width) {
+
+      // Apply grid classes to the farbtastic container.
+      $('#placeholder').addClass('grid-4').addClass('push-6').addClass('alpha').addClass('omega');
+
+      var wrapper = $('#container');
+
+      $('#edit-scheme').change(function() {
+        var current = $(this).val();
+        var scheme = settings.color.schemes[current];
+        for (var i in scheme) {
+          $('#palette input[name="palette['+ i + ']"]', form).val(scheme[i]).css('background-color', scheme[i]);
+        };
+        Drupal.color.callback(context, settings, form, farb, height, width);
+      });
+
+      // Make variables for the selectors so the processing is more readable.
+      var page = 'html, body';
+      var tabs = '#skip-link a, .tabs a';
+      var tabs_active = '.tabs a.active';
+      var site_name = 'h1.site-name a';
+      var site_slogan = 'h2.site-slogan';
+      var navigation = '.region-navigation .content ul a, .region-navigation .content ul a:visited';
+      var title_page = 'h1.title';
+      var title_block = 'h2.block-title';
+      var title_linked = 'h2.title a';
+      var links = 'a, .a:visited';
+      var node_links = 'article .links a, article .links a:visited';
+      var header = '.region-header, .region-navigation, .region-header h2.block-title, .region-navigation h2.block-title';
+      var header_links = '.region-header a, .region-header a:visited';
+      var footer = '.breadcrumb, footer.section, footer.section .block-title';
+      var footer_links = '.breadcrumb a, footer.section a, footer.section a:visited';
+
+      // Page
+      $(page, context)
+        .css('background-color', $('#palette input[name="palette[page_background]"]', form).val())
+        .css('color', $('#palette input[name="palette[page_foreground]"]', form).val());
+
+      // Links
+      $(links, wrapper).css('color', $('#palette input[name="palette[links]"]', form).val());
+      $(links, wrapper).hover(function() {
+        $(this).css('color', $('#palette input[name="palette[links_hover]"]', form).val());
+      }, function() {
+        $(this).css('color', $('#palette input[name="palette[links]"]', form).val());
+      });
+
+      // Identity
+      $(site_name, context).css('color', $('#palette input[name="palette[site_name]"]', form).val());
+      $(site_slogan, context).css('color', $('#palette input[name="palette[site_slogan]"]', form).val());
+
+      // Navigation
+      $(navigation, context).css('background-color', $('#palette input[name="palette[navigation_background]"]', form).val())
+        .css('color', $('#palette input[name="palette[navigation_foreground]"]', form).val());
+      $(navigation, context).hover(function() {
+        $(this).css({
+          backgroundColor: '#fff',
+          color: $('#palette input[name="palette[page_foreground]"]', form).val(),
+        })
+      }, function() {
+        $(this).css('background-color', $('#palette input[name="palette[navigation_background]"]', form).val())
+          .css('color', $('#palette input[name="palette[navigation_foreground]"]', form).val());
+      });
+
+      // Tabs
+      $(tabs, context).css({
+         backgroundColor: $('#palette input[name="palette[tab_background]"]', form).val(),
+         color: $('#palette input[name="palette[tab_foreground]"]', form).val()
+      });
+      $(tabs, context).not(tabs_active).hover(function() {
+        $(this).css({
+          backgroundColor: $('#palette input[name="palette[tab_background_active]"]', form).val(),
+          color: $('#palette input[name="palette[tab_foreground_active]"]', form).val(),
+        })
+      }, function() {
+        $(this).css({
+          backgroundColor: $('#palette input[name="palette[tab_background]"]', form).val(),
+          color: $('#palette input[name="palette[tab_foreground]"]', form).val()
+        })
+      });
+      $(tabs_active, context).css({
+        backgroundColor: $('#palette input[name="palette[tab_background_active]"]', form).val(),
+        color: $('#palette input[name="palette[tab_foreground_active]"]', form).val(),
+      });
+      $(tabs_active, context).hover(function() {
+        $(this).css({
+          backgroundColor: $('#palette input[name="palette[tab_background_active]"]', form).val(),
+          color: $('#palette input[name="palette[tab_foreground_active]"]', form).val(),
+        })
+      }, function() {
+        $(this).css({
+          backgroundColor: $('#palette input[name="palette[tab_background_active]"]', form).val(),
+          color: $('#palette input[name="palette[tab_foreground_active]"]', form).val(),
+        })
+      });
+
+      // Titles
+      $(title_page, context).css('color', $('#palette input[name="palette[title_page]"]', form).val());
+      $(title_block, context).css('color', $('#palette input[name="palette[title_block]"]', form).val());
+      $(title_linked, context).css('color', $('#palette input[name="palette[title_linked]"]', form).val());
+
+      // Node links
+      $(node_links, context).css('background-color', $('#palette input[name="palette[node_links_background]"]', form).val())
+        .css('color', $('#palette input[name="palette[node_links_foreground]"]', form).val());
+      $(node_links, context).hover(function() {
+        $(this).css('background-color', $('#palette input[name="palette[node_links_background_hover]"]', form).val())
+          .css('color', $('#palette input[name="palette[node_links_foreground_hover]"]', form).val());
+      }, function() {
+        $(this).css('background-color', $('#palette input[name="palette[node_links_background]"]', form).val())
+        .css('color', $('#palette input[name="palette[node_links_foreground]"]', form).val());
+      });
+
+      // Header
+      $(header, context).css('color', $('#palette input[name="palette[header_foreground]"]', form).val())
+      $(header_links, context).css('color', $('#palette input[name="palette[header_links]"]', form).val());
+      $(header_links, context).hover(function() {
+        $(this).css('color', $('#palette input[name="palette[header_links_hover]"]', form).val());
+      }, function() {
+        $(this).css('color', $('#palette input[name="palette[header_links]"]', form).val());
+      });
+
+      // Footer
+      $(footer, context).css('background-color', $('#palette input[name="palette[footer_background]"]', form).val())
+        .css('color', $('#palette input[name="palette[footer_foreground]"]', form).val());
+      $(footer_links, context).css('color', $('#palette input[name="palette[footer_links]"]', form).val());
+      $(footer_links, context).hover(function() {
+        $(this).css('color', $('#palette input[name="palette[footer_links_hover]"]', form).val());
+      }, function() {
+        $(this).css('color', $('#palette input[name="palette[footer_links]"]', form).val());
+      });
+
+    }
+  };
+})(jQuery);