#776684 by Steven Merrill: Fixed The color.module preview HTML is hardcoded.

4 files changed, 51 insertions, 29 deletions

diff --git a/modules/color/color.js b/modules/color/color.js
index be6d83392..0fc815bd0 100644
--- a/modules/color/color.js
+++ b/modules/color/color.js
@@ -69,33 +69,7 @@ Drupal.behaviors.color = {
      * Render the preview.
      */
     function preview() {
-      // 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);
-          });
-        }
-      }
+      Drupal.color.callback(context, settings, form, farb, height, width);
     }
 
     /**
diff --git a/modules/color/color.module b/modules/color/color.module
index 65cd33608..1a8414da2 100644
--- a/modules/color/color.module
+++ b/modules/color/color.module
@@ -237,7 +237,11 @@ function theme_color_scheme_form($variables) {
   $info = $form['info']['#value'];
   $path = drupal_get_path('theme', $theme) . '/';
   drupal_add_css($path . $info['preview_css']);
-
+  
+  $preview_js_path = isset($info['preview_js']) ? $path . $info['preview_js'] : drupal_get_path('module', 'color') . '/' . 'preview.js';
+  // Add the JS at a weight below color.js.
+  drupal_add_js($preview_js_path, array('weight' => JS_DEFAULT - 1));
+    
   $output  = '';
   $output .= '<div class="color-form clearfix">';
   // Color schemes
@@ -251,7 +255,9 @@ function theme_color_scheme_form($variables) {
   // Preview
   $output .= drupal_render_children($form);
   $output .= '<h2>' . t('Preview') . '</h2>';
-  $output .= '<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" style="background-image: url(' . base_path() . $path . $info['preview_image'] . ')"></div></div>';
+  // Attempt to load preview HTML if the theme provides it.
+  $preview_html_path = DRUPAL_ROOT . '/' . (isset($info['preview_html']) ? drupal_get_path('theme', $theme) . '/' . $info['preview_html'] : drupal_get_path('module', 'color') . '/preview.html');
+  $output .= file_get_contents($preview_html_path);
   // Close the wrapper div.
   $output .= '</div>';
 
diff --git a/modules/color/preview.html b/modules/color/preview.html
new file mode 100644
index 000000000..e25b7add7
--- /dev/null
+++ b/modules/color/preview.html
@@ -0,0 +1,7 @@
+<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>
\ No newline at end of file
diff --git a/modules/color/preview.js b/modules/color/preview.js
new file mode 100644
index 000000000..814a2d20d
--- /dev/null
+++ b/modules/color/preview.js
@@ -0,0 +1,35 @@
+// $Id$
+
+(function ($) {
+  Drupal.color = {
+    callback: function(context, settings, form, farb, height, width) {  
+      // 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);
+          });
+        }
+      }
+    }
+  };
+})(jQuery);
\ No newline at end of file