From 45748d73b5e784ad3e79350564eb68dcac71aa45 Mon Sep 17 00:00:00 2001 From: Silvio Rhatto Date: Fri, 23 Sep 2011 13:44:35 -0300 Subject: Initial import --- color/preview.js | 136 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 color/preview.js (limited to 'color/preview.js') 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); -- cgit v1.2.3