Skip to content
Snippets Groups Projects
Commit 3e42efbf authored by Bruno Massa's avatar Bruno Massa
Browse files

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.
parent 2b8d86b1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
charts.admin.inc
+ 48
− 72
View file @ 3e42efbf
...@@ -12,59 +12,57 @@ ...@@ -12,59 +12,57 @@
* *
* @ingroup from * @ingroup from
*/ */
function _charts_color_form(&$form, $settings) { function _charts_color_form_complete(&$form, $default) {
// The Color module integration starts with a field set // Use ColorPicker module if possible
$field_type = module_exists('colorpicker') ? 'colorpicker_textfield' : 'textfield';
$form['color'] = array( $form['color'] = array(
'#attributes' => array('id' => 'charts_color', 'class' => ' clear-block'),
'#collapsible' => TRUE,
'#type' => 'fieldset', '#type' => 'fieldset',
'#theme' => 'charts_settings_color',
'#title' => t('Color'), '#title' => t('Color'),
'#tree' => TRUE
); );
$form['color']['color_palettes'] = array(
// Load some color palettes
$form['color']['scheme'] = array(
'#type' => 'select', '#type' => 'select',
'#title' => t('Color set'), '#title' => t('Color palettes'),
'#options' => $settings['#color_palettes'], '#options' => $default['color_palettes'],
'#default_value' => $settings['#color_palette'], '#default_value' => $default['color_palette'],
); );
$form['color']['background'] = array(
// Add palette fields. Since all '#type' => $field_type,
$color_palette = explode(',', $settings['#color_palette']); '#title' => t('Background'),
'#default_value' => $default['color']['background'],
$names = array( // '#colorpicker' => 'colorpicker',
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']['palette'] = array( $form['color']['text'] = array(
'#prefix' => '<div id="preview"></div><div id="farbtastic"></div><div id="palette" class="clear-block">', '#type' => $field_type,
'#suffix' => '</div>', '#title' => t('Text'),
'#tree' => TRUE, '#default_value' => $default['color']['text'],
); );
foreach ($names as $color => $value) { for ($series = 0; $series < 8; $series++) {
$form['color']['palette']['color'. $color] = array( $form['color'][$series] = array(
'#type' => 'textfield', '#type' => $field_type,
'#title' => $value, '#title' => t('Series %serie', array('%serie' => $series + 1)),
'#default_value' => empty($color_palette[$color]) ? '336699' : $color_palette[$color], '#default_value' => $default['color'][$series],
'#size' => 8,
); );
$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(drupal_get_path('module', 'charts') .'/charts_color.js');
drupal_add_js(array('charts_color' => array('reference' => $color_palette)), 'setting'); 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() { ...@@ -129,13 +127,14 @@ function _charts_module_invoke_all() {
* *
* @ingroup form * @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'); module_load_include('inc', 'charts');
$default = $default + _charts_settings(); $default = $default + _charts_settings();
$options = array_fill_keys($options, TRUE);
if ($example) { if (!empty($options['example'])) {
$form['chart_example'] = array( $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 ...@@ -170,16 +169,11 @@ function _charts_settings_form(&$form, $default = array(), $example = FALSE, $co
'#title' => t('Height'), '#title' => t('Height'),
); );
if ($color_full) { if (empty($options['color_complete'])) {
_charts_color_form($form, $default); _charts_color_form_simple($form, $default);
} }
else { else {
$form['color_palette'] = array( _charts_color_form_complete($form, $default);
'#type' => 'select',
'#title' => t('Color set'),
'#options' => $default['color_palettes'],
'#default_value' => $default['color_palette'],
);
} }
return $form; return $form;
...@@ -193,7 +187,7 @@ function _charts_settings_form(&$form, $default = array(), $example = FALSE, $co ...@@ -193,7 +187,7 @@ function _charts_settings_form(&$form, $default = array(), $example = FALSE, $co
*/ */
function _charts_settings_page() { function _charts_settings_page() {
$form = array(); $form = array();
_charts_settings_form($form, array(), TRUE, TRUE); _charts_settings_form($form, array(), array('example', 'color_complete'));
$form['submit'] = array( $form['submit'] = array(
'#type' => 'submit', '#type' => 'submit',
...@@ -229,21 +223,3 @@ function _charts_settings_page_submit(&$form, &$form_state) { ...@@ -229,21 +223,3 @@ function _charts_settings_page_submit(&$form, &$form_state) {
// Save the data into database // Save the data into database
variable_set('charts_settings', $settings); 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);
}
charts.inc
+ 8
− 5
View file @ 3e42efbf
...@@ -116,8 +116,13 @@ function _charts_settings() { ...@@ -116,8 +116,13 @@ function _charts_settings() {
// Color Palette // Color Palette
$settings['color_palettes'] = _charts_settings_color_palette(); $settings['color_palettes'] = _charts_settings_color_palette();
if (empty($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; return $settings;
...@@ -128,10 +133,8 @@ function _charts_settings() { ...@@ -128,10 +133,8 @@ function _charts_settings() {
*/ */
function _charts_settings_color_palette() { function _charts_settings_color_palette() {
return array( 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'), '' => 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'),
); );
} }
charts_color.js
+ 17
− 200
View file @ 3e42efbf
...@@ -2,213 +2,30 @@ ...@@ -2,213 +2,30 @@
/** /**
* @author Bruno Massa http://drupal.org/user/67164 * @author Bruno Massa http://drupal.org/user/67164
* @file * @file
* Its the integration with Color module and Charts. * Set the color palette to Charts.
* Using the Farbtastic JS, this file set the behavior of the
*/ */
Drupal.behaviors.charts_color = function (context) { Drupal.behaviors.chartsColor = function (context) {
/** var chartsColor = function() {
* Function copied from Color module. var colors = $("#edit-color-color-palettes").val().split(",");
* var series = ["background", "text", 0, 1, 2, 3, 4, 5, 6, 7];
* Callback for Farbtastic when a new color is chosen. var disabled = ($("#edit-color-palettes").children("option:selected").text() == Drupal.settings.chartsColorCustom);
*/ for (var s = 0, len = series.length; s < len; ++s) {
callback = function (input, color, propagate, colorscheme) { $("#edit-color-"+ s).val(colors[s]);
// Set background/foreground color if (disabled) {
$(input).css({ $("#edit-color-"+ s).attr("disabled", "");
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;
} }
else { else {
given[1] = 1 - (1 - given[1]) * d; $("#edit-color-"+ s).attr("disabled", "disabled");
} }
} }
if (disabled) {
// Luminance: interpolate $("#edit-colorpicker").attr("disabled", "");
if (ref1[2] == 0 || ref2[2] == 0) {
given[2] = ref2[2];
} }
else { else {
var d = ref1[2] / ref2[2]; $("#edit-colorpicker").attr("disabled", "disabled");
if (d > 1) {
given[2] /= d;
}
else {
given[2] = 1 - (1 - given[2]) * d;
}
} }
};
return farb.pack(farb.HSLToRGB(given)); $("#edit-color-color-palettes").change(chartsColor);
} chartsColor();
// 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();
}; };
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment