The color.module preview HTML is hardcoded

New patch with comment language cleanup.

Testbot?

@chx: Good call on using DRUPAL_ROOT and on generalizing this out to a file. Thanks!

I've moved the default preview HTML to /misc/color-module-preview.html and also slightly modified Garland's preview.css so that we don't have to use PHP to assemble the path to the preview image as it was with the previous hardcoded HTML.

Garland still very happily recolors with this patch: http://skitch.com/00sven/n94yj/appearance-bartik.local .

Also worth noting: modifying the theme function for color_scheme_form in your own theme isn't even an option, since the admin theme (likely Seven) is the one that's active.

Another new patch. The missing link is that the color.module preview is entirely done through JavaScript and so changing the preview HTML will also require supplying a new JavaScript function in the namespace Drupal.color.callback which would be loaded from the location specified at array key 'preview_js' in the theme's color.inc.

As before, if the defaults are used, nothing else must be changed (as in Garland.)

A sample callback (in progress) for Bartik would then look something like this:

/* $Id$ */

(function ($) {
  Drupal.color = {
    callback: function(context, settings, form) {
      // Solid background.
      $('#preview', form).css('backgroundColor', $('#palette input[name="palette[base]"]', form).val());
    
      // Text preview
      $('#preview #preview-main h2, #preview #preview-main p', form).css('color', $('#palette input[name="palette[text]"]', form).val());
      $('#preview #preview-content a', form).css('color', $('#palette input[name="palette[link]"]', form).val());
      
      // CSS3 Gradient
      var gradient_start = $('#palette input[name="palette[top]"]', form).val();
      var gradient_end = $('#palette input[name="palette[bottom]"]', form).val();
    
      $('#preview #preview-header', form).attr('style', "background-color: " + gradient_start + "; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(" + gradient_start + "), to(" + gradient_end + ")); background-image: -moz-linear-gradient(-90deg, " + gradient_start + ", " + gradient_end + ");");
    }
  };
})(jQuery);

One more patch attached.

Here's the summary thus far. Like many other things in color.module's design, assumptions were made about the preview given by color.module.

First off, it assumed that the following HTML:

<div id="preview">
  <div id="text">
    <h2>Lorem ipsum dolor</h2>
    <p>Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a href="#">exercitation ullamco</a> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div id="img"></div>
</div>

and the following JavaScript:

// Solid background.
$('#preview', form).css('backgroundColor', $('#palette input[name="palette[base]"]', form).val());

// Text preview
$('#text', form).css('color', $('#palette input[name="palette[text]"]', form).val());
$('#text a, #text h2', form).css('color', $('#palette input[name="palette[link]"]', form).val());

// Set up gradients if there are some.
var color_start, color_end;
for (i in settings.gradients) {
  color_start = farb.unpack($('#palette input[name="palette[' + settings.gradients[i]['colors'][0] + ']"]', form).val());
  color_end = farb.unpack($('#palette input[name="palette[' + settings.gradients[i]['colors'][1] + ']"]', form).val());
  if (color_start && color_end) {
    var delta = [];
    for (j in color_start) {
      delta[j] = (color_end[j] - color_start[j]) / (settings.gradients[i]['vertical'] ? height[i] : width[i]);
    }
    var accum = color_start;
    // Render gradient lines.
    $('#gradient-' + i + ' > div', form).each(function () {
      for (j in accum) {
        accum[j] += delta[j];
      }
      this.style.backgroundColor = farb.pack(accum);
    });
  }
}

... would always be enough to render a suitable preview of what a colored theme would look like.

This patch:

• Breaks out the previously hardcoded preview HTML into an HTML file
• Allows themes to specify their own preview HTML file if not using the default
• Allows themes to specify their own preview JS function if not using the default
• Moves the default preview HTML and preview JavaScript files into files in color.module
• Maintains backwards compatibility with Garland and other existing themes that use color.module

And I'll be honest, here's what I don't like about it thus far:

• At the moment, since the callback function to recolor the preview can't be defined as a closure, it has to accept a whopping 6 arguments, many of which may not be used. (i.e. function(context, settings, form, farb, height, width) {})

If this patch goes in, themers not only get to color with more than 5 colors, they can also show truer-to-life previews such as this one:

One interesting note about 'base' - the 'base' color must _not_ appear exactly in the colored part of the stylesheet, and this has not been altered by either of my color.module patches (#778880: Add static caching to color.module or #776684: The color.module preview HTML is hardcoded.) I also don't believe that the third big color.module patch (#693504: Color.module does not support more than 5 colors and has hard-coded labels) changed it, but I didn't have much of a hand in that one.

Since 'base' is actually only used to color-shift items that are not explicitly included in the color.inc array or the pngs specified in color.inc (and since Bartik uses neither of these,) I actually removed 'base' from Bartik's color.inc altogether. (Check out the color.inc changes to Bartik in http://drupal.org/node/762474#comment-2879434 .)

This might do better as a new issue or as a follow-up to #693504: Color.module does not support more than 5 colors and has hard-coded labels.