From 3e42efbf6377add245000b3d4b6a70a34ddc7b6d Mon Sep 17 00:00:00 2001
From: Bruno Massa <brmassa@67164.no-reply.drupal.org>
Date: Wed, 13 May 2009 22:54:57 +0000
Subject: [PATCH] Improvements: * The new color system is now enabled. Well,
the input part only. Now its time to actually use this color in the charts! *
Note take Charts module might use ColorPicker module to enhance the
experience. But its now required.
---
charts.admin.inc | 120 +++++++++++---------------
charts.inc | 13 +--
charts_color.js | 217 ++++-------------------------------------------
3 files changed, 73 insertions(+), 277 deletions(-)
diff --git a/charts.admin.inc b/charts.admin.inc
index 7cc0605..b9070ec 100644
--- a/charts.admin.inc
+++ b/charts.admin.inc
@@ -12,59 +12,57 @@
*
* @ingroup from
*/
-function _charts_color_form(&$form, $settings) {
- // The Color module integration starts with a field set
+function _charts_color_form_complete(&$form, $default) {
+ // Use ColorPicker module if possible
+ $field_type = module_exists('colorpicker') ? 'colorpicker_textfield' : 'textfield';
+
$form['color'] = array(
- '#attributes' => array('id' => 'charts_color', 'class' => ' clear-block'),
- '#collapsible' => TRUE,
'#type' => 'fieldset',
- '#theme' => 'charts_settings_color',
'#title' => t('Color'),
+ '#tree' => TRUE
);
-
- // Load some color palettes
- $form['color']['scheme'] = array(
+ $form['color']['color_palettes'] = array(
'#type' => 'select',
- '#title' => t('Color set'),
- '#options' => $settings['#color_palettes'],
- '#default_value' => $settings['#color_palette'],
+ '#title' => t('Color palettes'),
+ '#options' => $default['color_palettes'],
+ '#default_value' => $default['color_palette'],
);
-
- // Add palette fields. Since all
- $color_palette = explode(',', $settings['#color_palette']);
-
- $names = array(
- t('Color %number', array('%number' => 1)),
- t('Color %number', array('%number' => 2)),
- t('Color %number', array('%number' => 3)),
- t('Color %number', array('%number' => 4)),
- t('Color %number', array('%number' => 5)),
- t('Color %number', array('%number' => 6)),
- t('Color %number', array('%number' => 7)),
- t('Color %number', array('%number' => 8)),
+ $form['color']['background'] = array(
+ '#type' => $field_type,
+ '#title' => t('Background'),
+ '#default_value' => $default['color']['background'],
+// '#colorpicker' => 'colorpicker',
);
- $form['color']['palette'] = array(
- '#prefix' => '<div id="preview"></div><div id="farbtastic"></div><div id="palette" class="clear-block">',
- '#suffix' => '</div>',
- '#tree' => TRUE,
+ $form['color']['text'] = array(
+ '#type' => $field_type,
+ '#title' => t('Text'),
+ '#default_value' => $default['color']['text'],
);
- foreach ($names as $color => $value) {
- $form['color']['palette']['color'. $color] = array(
- '#type' => 'textfield',
- '#title' => $value,
- '#default_value' => empty($color_palette[$color]) ? '336699' : $color_palette[$color],
- '#size' => 8,
+ for ($series = 0; $series < 8; $series++) {
+ $form['color'][$series] = array(
+ '#type' => $field_type,
+ '#title' => t('Series %serie', array('%serie' => $series + 1)),
+ '#default_value' => $default['color'][$series],
);
- $color_palette['color'. $color] = $color_palette[$color];
- unset($color_palette[$color]);
}
- $form['color']['farbtastic'] = array(
- '#prefix' => '<div id="farbtastic">',
- '#sufix' => '</div>',
- );
- // Add the necessary JS data into the page
- drupal_add_js(array('charts_color' => array('reference' => $color_palette)), 'setting');
+ drupal_add_js(drupal_get_path('module', 'charts') .'/charts_color.js');
+ drupal_add_js(array('chartsColorCustom' => t('Custom')), 'setting');
+}
+
+/**
+ * Subform that use simple color inputs.
+ *
+ * @ingroup from
+ */
+function _charts_color_form_simple(&$form, $settings) {
+ // Load some color palettes
+ $form['color_palettes'] = array(
+ '#type' => 'select',
+ '#title' => t('Color palettes'),
+ '#options' => $settings['color_palettes'],
+ '#default_value' => $settings['color_palette'],
+ );
}
/**
@@ -129,13 +127,14 @@ function _charts_module_invoke_all() {
*
* @ingroup form
*/
-function _charts_settings_form(&$form, $default = array(), $example = FALSE, $color_full = FALSE, $use_default = FALSE) {
+function _charts_settings_form(&$form, $default = array(), $options = array()) {
module_load_include('inc', 'charts');
$default = $default + _charts_settings();
+ $options = array_fill_keys($options, TRUE);
- if ($example) {
+ if (!empty($options['example'])) {
$form['chart_example'] = array(
- '#value' => _charts_example(),
+ '#value' => _charts_example($default),
);
}
@@ -170,16 +169,11 @@ function _charts_settings_form(&$form, $default = array(), $example = FALSE, $co
'#title' => t('Height'),
);
- if ($color_full) {
- _charts_color_form($form, $default);
+ if (empty($options['color_complete'])) {
+ _charts_color_form_simple($form, $default);
}
else {
- $form['color_palette'] = array(
- '#type' => 'select',
- '#title' => t('Color set'),
- '#options' => $default['color_palettes'],
- '#default_value' => $default['color_palette'],
- );
+ _charts_color_form_complete($form, $default);
}
return $form;
@@ -193,7 +187,7 @@ function _charts_settings_form(&$form, $default = array(), $example = FALSE, $co
*/
function _charts_settings_page() {
$form = array();
- _charts_settings_form($form, array(), TRUE, TRUE);
+ _charts_settings_form($form, array(), array('example', 'color_complete'));
$form['submit'] = array(
'#type' => 'submit',
@@ -229,21 +223,3 @@ function _charts_settings_page_submit(&$form, &$form_state) {
// Save the data into database
variable_set('charts_settings', $settings);
}
-
-/**
- * Theme color form.
- *
- * @ingroup @themeable
- */
-function theme_charts_settings_color($form) {
- // Add Farbtastic color picker JS
- drupal_add_css('misc/farbtastic/farbtastic.css', 'module', 'all', FALSE);
- drupal_add_js('misc/farbtastic/farbtastic.js');
- drupal_add_js(drupal_get_path('module', 'charts') .'/charts_color.js');
-
- // Add the necessary CSS
- drupal_add_css(drupal_get_path('module', 'charts') .'/charts_color.css');
-
- // Preview and the rest of the form
- return '<div id="preview"></div>'. drupal_render($form);
-}
diff --git a/charts.inc b/charts.inc
index 909d8fa..4734b51 100644
--- a/charts.inc
+++ b/charts.inc
@@ -116,8 +116,13 @@ function _charts_settings() {
// Color Palette
$settings['color_palettes'] = _charts_settings_color_palette();
if (empty($settings['color_palette'])) {
- $settings['color_palette'] = '0,0,0,0,0,0,0,0';
+ $settings['color_palette'] = current(array_keys($settings['color_palettes']));
}
+
+ // Color
+ $settings['color'] = explode( ',', $settings['color_palette']);
+ $settings['color']['background'] = array_shift($settings['color']);
+ $settings['color']['text'] = array_shift($settings['color']);
}
return $settings;
@@ -128,10 +133,8 @@ function _charts_settings() {
*/
function _charts_settings_color_palette() {
return array(
+ '#ffffff,#000000,#ff0000,#00cc00,#0066b3,#ff8000,#ffcc00,#330099,#990099,#ccff00' => t('Primary'),
+ '#ffffff,#000000,#ff6600,#009999,#1919b3,#ffb200,#ffff00,#660099,#e60066,#33ff00' => t('Secondary'),
'' => t('Custom'),
- '#ff0000,#00cc00,#0066b3,#ff8000,#ffcc00,#330099,#990099,#ccff00' => t('Primary'),
- '#ff6600,#009999,#1919b3,#ffb200,#ffff00,#660099,#e60066,#33ff00' => t('Secondary'),
-// 'ff0000,00cc00,0066b3,ff8000,ffcc00,330099,990099,ccff00' => t('Primary'),
-// 'ff6600,009999,1919b3,ffb200,ffff00,660099,e60066,33ff00' => t('Secondary'),
);
}
diff --git a/charts_color.js b/charts_color.js
index b2937c5..22cb2a2 100644
--- a/charts_color.js
+++ b/charts_color.js
@@ -2,213 +2,30 @@
/**
* @author Bruno Massa http://drupal.org/user/67164
* @file
- * Its the integration with Color module and Charts.
- * Using the Farbtastic JS, this file set the behavior of the
+ * Set the color palette to Charts.
*/
-Drupal.behaviors.charts_color = function (context) {
- /**
- * Function copied from Color module.
- *
- * Callback for Farbtastic when a new color is chosen.
- */
- callback = function (input, color, propagate, colorscheme) {
- // Set background/foreground color
- $(input).css({
- backgroundColor: color,
- 'color': farb.RGBToHSL(farb.unpack(color))[2] > 0.5 ? '#000' : '#fff'
- });
-
- // Change input value
- if (input.value && input.value != color) {
- input.value = color;
-
- // Update locked values
- if (propagate) {
- var i = input.i;
- for (j = i + 1; ; ++j) {
- if (!locks[j - 1] || $(locks[j - 1]).is('.unlocked')) break;
- var matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
- callback(inputs[j], matched, false);
- }
- for (j = i - 1; ; --j) {
- if (!locks[j] || $(locks[j]).is('.unlocked')) break;
- var matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
- callback(inputs[j], matched, false);
- }
-
- // Update preview
- preview();
- }
-
- // Reset colorscheme selector
- if (!colorscheme) {
- resetScheme();
- }
- }
- }
-
- /**
- * Function copied from Color module.
- *
- * Focus the Farbtastic on a particular field.
- */
- focus = function () {
- var input = this;
- // Remove old bindings
- focused && $(focused).unbind('keyup', farb.updateValue)
- .unbind('keyup', preview).unbind('keyup', resetScheme)
- .parent().removeClass('item-selected');
-
- // Add new bindings
- focused = this;
- farb.linkTo(function (color) { callback(input, color, true, false); });
- farb.setColor(this.value);
- $(focused).keyup(farb.updateValue).keyup(preview).keyup(resetScheme)
- .parent().addClass('item-selected');
- }
-
- /**
- * Print a Chart (with generic data) preview.
- */
- preview = function () {
- }
-
- /**
- * Function copied from Color module.
- *
- * Reset the color scheme selector.
- */
- resetScheme = function () {
- $('#edit-scheme', form).each(function () {
- this.selectedIndex = this.options.length - 1;
- });
- }
-
- /**
- * Function copied from Color module
- *
- * Shift a given color, using a reference pair (ref in HSL).
- */
- shift_color = function (given, ref1, ref2) {
- // Convert to HSL
- given = farb.RGBToHSL(farb.unpack(given));
-
- // Hue: apply delta
- given[0] += ref2[0] - ref1[0];
-
- // Saturation: interpolate
- if (ref1[1] == 0 || ref2[1] == 0) {
- given[1] = ref2[1];
- }
- else {
- var d = ref1[1] / ref2[1];
- if (d > 1) {
- given[1] /= d;
+Drupal.behaviors.chartsColor = function (context) {
+ var chartsColor = function() {
+ var colors = $("#edit-color-color-palettes").val().split(",");
+ var series = ["background", "text", 0, 1, 2, 3, 4, 5, 6, 7];
+ var disabled = ($("#edit-color-palettes").children("option:selected").text() == Drupal.settings.chartsColorCustom);
+ for (var s = 0, len = series.length; s < len; ++s) {
+ $("#edit-color-"+ s).val(colors[s]);
+ if (disabled) {
+ $("#edit-color-"+ s).attr("disabled", "");
}
else {
- given[1] = 1 - (1 - given[1]) * d;
+ $("#edit-color-"+ s).attr("disabled", "disabled");
}
}
-
- // Luminance: interpolate
- if (ref1[2] == 0 || ref2[2] == 0) {
- given[2] = ref2[2];
+ if (disabled) {
+ $("#edit-colorpicker").attr("disabled", "");
}
else {
- var d = ref1[2] / ref2[2];
- if (d > 1) {
- given[2] /= d;
- }
- else {
- given[2] = 1 - (1 - given[2]) * d;
- }
+ $("#edit-colorpicker").attr("disabled", "disabled");
}
+ };
- return farb.pack(farb.HSLToRGB(given));
- }
-
- // Declaring some variavles and settings some generic values
- var inputs = [];
- var hooks = [];
- var locks = [];
- var focused = null;
-
- // Determine what is the main charts color piece of
- var form = $('#charts_color', context);
-
- // Add Farbtastic
- var farb = $.farbtastic('#farbtastic');
-
- // Decode reference colors to HSL
- var reference = Drupal.settings.charts_color.reference;
- for (i in reference) {
- reference[i] = farb.RGBToHSL(farb.unpack(reference[i]));
- }
-
- // Set up colorscheme selector
- $('#edit-scheme', form).change(function () {
- var colors = this.options[this.selectedIndex].value;
- if (colors != '') {
- colors = colors.split(',');
- for (i in colors) {
- callback(inputs[i], colors[i], false, true);
- }
- preview();
- }
- });
-
- // Initialize color fields
- $('#palette input.form-text', form)
- .each(function () {
- // Extract palette field name
- this.key = this.id.substring(13);
-
- // Link to color picker temporarily to initialize.
- farb.linkTo(function () {}).setColor('#000').linkTo(this);
-
- // Add lock
- var i = inputs.length;
- if (inputs.length) {
- var lock = $('<div class="lock"></div>').toggle(
- function () {
- $(this).addClass('unlocked');
- $(hooks[i - 1]).attr('class',
- locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook up' : 'hook'
- );
- $(hooks[i]).attr('class',
- locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook down' : 'hook'
- );
- },
- function () {
- $(this).removeClass('unlocked');
- $(hooks[i - 1]).attr('class',
- locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook both' : 'hook down'
- );
- $(hooks[i]).attr('class',
- locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook both' : 'hook up'
- );
- }
- );
- $(this).after(lock);
- locks.push(lock);
- };
-
- // Add hook
- var hook = $('<div class="hook"></div>');
- $(this).after(hook);
- hooks.push(hook);
-
- $(this).parent().find('.lock').click();
- this.i = i;
- inputs.push(this);
- })
- .focus(focus);
-
- $('#palette label', form);
-
- // Focus first color
- focus.call(inputs[0]);
-
- // Render preview
- preview();
+ $("#edit-color-color-palettes").change(chartsColor);
+ chartsColor();
};
--
GitLab