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

New features: 

* Color module integrated and some fine tunning
parent a32c3b4a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
charts.inc
+ 158
− 49
View file @ 54c15f19
......@@ -6,6 +6,89 @@
* Transform DATA into INFORMATION using beautiful CHARTS.
*/
/**
* Color module integration with Charts settings.
*
* @ingroup from
*/
function _charts_color_form(&$form, $form_state) {
// The Color module integration starts with a field set
$form['color'] = array(
'#attributes' => array('id' => 'charts_color', 'class'=> ' clear-block'),
'#collapsible' => TRUE,
'#type' => 'fieldset',
'#title' => t('Color'),
);
// Load some color palettes
$schemes = _charts_color_palette();
$form['color']['scheme'] = array(
'#type' => 'select',
'#title' => t('Color set'),
'#options' => $schemes,
'#default_value' => '',
);
$form['color']['schemes'] = array(
'#type' => 'value',
'#value' => $schemes
);
// Add palette fields. Since all
$names = array(
'color1' => t('Color %number', array('%number' => 1)),
'color2' => t('Color %number', array('%number' => 2)),
'color3' => t('Color %number', array('%number' => 3)),
'color4' => t('Color %number', array('%number' => 4)),
'color5' => t('Color %number', array('%number' => 5)),
'color65' => t('Color %number', array('%number' => 6)),
'color7' => t('Color %number', array('%number' => 7)),
'color8' => t('Color %number', array('%number' => 8)),
);
$reference_colors = array(
'color1' => '#ffffff',
'color2' => '#ffffff',
'color3' => '#ffffff',
'color4' => '#ffffff',
'color5' => '#ffffff',
'color65' => '#ffffff',
'color7' => '#ffffff',
'color8' => '#ffffff',
);
$form['color']['palette'] = array(
'#prefix' => '<div id="preview"></div><div id="farbtastic"></div><div id="palette" class="clear-block">',
'#suffix' => '</div>',
'#tree' => true,
);
foreach ($reference_colors as $name => $value) {
$form['color']['palette'][$name] = array(
'#type' => 'textfield',
'#title' => $names[$name],
'#default_value' => $value,
'#size' => 8,
);
}
$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' => $reference_colors)), 'setting');
return $form;
}
/**
* List all preset color palette
*/
function _charts_color_palette() {
return array(
'' => t('Custom'),
'#FF0000,#00CC00,#0066B3,#FF8000,#FFCC00,#330099,#990099,#CCFF00' => t('Primary'),
'#FF6600,#009999,#1919B3,#FFB200,#FFFF00,#660099,#E60066,#33FF00' => t('Secondary'),
);
}
/**
* Invoke a hook in all enabled modules that implement it.
*
......@@ -37,7 +120,7 @@ function _charts_module_invoke_all() {
*
* @ingroup form
*/
function _charts_settings() {
function _charts_settings($form_state) {
// Get the previously saved data from Data Base
$settings = variable_get('charts_settings', array());
......@@ -91,55 +174,57 @@ function _charts_settings() {
'#title' => t('Height'),
);
$form['color'] = array(
'#default_value' => empty($settings['#color']) ? 'FFFFFF' : $settings['#color'],
'#description' => t('Use the hexadecimal RGB value'),
'#type' => 'textfield',
'#title' => t('Background Color'),
);
// $form['color'] = array(
// '#default_value' => empty($settings['#color']) ? 'FFFFFF' : $settings['#color'],
// '#description' => t('Use the hexadecimal RGB value'),
// '#type' => 'textfield',
// '#title' => t('Background Color'),
// );
_charts_color_form($form, $form_state);
// Color palette for the series and values.
$colors = empty($settings['#color_palette']) ?
array(
'FF8000',
'FFC080',
'FFDFBF',
'FFC080',
'FFCC00',
'FFE500',
'FFF9BF',
'78C0E9',
'179CE8',
'30769E',
'C8E9FC',
'ECF8FF',
'00CCFF',
'4086AA',
'91C3DC',
'87907D',
'AAB6A2',
'555555',
'666666',
'21B6A8',
'177F75',
'B6212D',
'7F171F',
'B67721',
'7F5417',
) :
$settings['#color_palette'];
$form['color_palette'] = array(
'#default_value' => implode(', ', $colors),
'#description' => t('Used to differentiate series or pie-chart pieces. Use the hexadecimal RGB value'),
'#type' => 'textarea',
'#title' => t('Color Palette'),
);
$colors_example = '';
foreach ($colors as $color) {
$colors_example .= "<span style='color:#$color;'>########### $color ###########</span><br />";
}
$form['color_palette_example'] = array(
'#value' => $colors_example,
);
// $colors = empty($settings['#color_palette']) ?
// array(
// 'FF8000',
// 'FFC080',
// 'FFDFBF',
// 'FFC080',
// 'FFCC00',
// 'FFE500',
// 'FFF9BF',
// '78C0E9',
// '179CE8',
// '30769E',
// 'C8E9FC',
// 'ECF8FF',
// '00CCFF',
// '4086AA',
// '91C3DC',
// '87907D',
// 'AAB6A2',
// '555555',
// '666666',
// '21B6A8',
// '177F75',
// 'B6212D',
// '7F171F',
// 'B67721',
// '7F5417',
// ) :
// $settings['#color_palette'];
// $form['color_palette'] = array(
// '#default_value' => implode(', ', $colors),
// '#description' => t('Used to differentiate series or pie-chart pieces. Use the hexadecimal RGB value'),
// '#type' => 'textarea',
// '#title' => t('Color Palette'),
// );
// $colors_example = '';
// foreach ($colors as $color) {
// $colors_example .= "<span style='color:#$color;'>########### $color ###########</span><br />";
// }
// $form['color_palette_example'] = array(
// '#value' => $colors_example,
// );
$form['submit'] = array(
'#type' => 'submit',
......@@ -177,3 +262,27 @@ function _charts_settings_submit(&$form, &$form_state) {
// Print a 'OK' message
drupal_set_message('Settings saved');
}
/**
* Theme color form.
*
* @ingroup @themeable
*/
function theme__charts_settings($form) {
// Preview
$output .= '<div id="preview"></div>';
// The rest of the form
$output .= drupal_render($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');
// Put everything inside given DIV. Its necessary for JS code
return $output;
}
charts.module
+ 11
− 0
View file @ 54c15f19
......@@ -134,3 +134,14 @@ function _charts_series_values($series) {
return $data;
}
/**
* Implementation of hook_theme().
*/
function charts_theme() {
return array(
'_charts_settings' => array(
'arguments' => array('form' => NULL),
),
);
}
charts_color.css
+ 12
− 18
View file @ 54c15f19
/* $Id$ */
/* Farbtastic placement */
#charts_color {
max-width: 50em;
position: relative;
}
#farbtastic {
position: absolute;
top: 0;
right: 0;
float: right;
}
/* All color-related */
#charts_color .form-item {
height: 2em;
line-height: 2em;
padding-left: 1em; /* LTR */
padding-left: 1em;
margin: 0.5em 0;
}
#charts_color label {
float: left; /* LTR */
clear: left; /* LTR */
float: left;
clear: left;
width: 10em;
}
#charts_color .form-text, #charts_color .form-select {
float: left; /* LTR */
float: left;
}
#charts_color .form-text {
text-align: center;
margin-right: 5px; /* LTR */
margin-right: 5px;
cursor: pointer;
}
/* Palette */
#palette .hook {
float: left; /* LTR */
float: left;
margin-top: 3px;
width: 16px;
height: 16px;
}
#palette .down, #palette .up, #palette .both {
background: url(images/hook.png) no-repeat 100% 0; /* LTR */
background: url(images/hook.png) no-repeat 100% 0;
}
#palette .up {
background-position: 100% -27px; /* LTR */
background-position: 100% -27px;
}
#palette .both {
background-position: 100% -54px; /* LTR */
background-position: 100% -54px;
}
#palette .lock {
float: left; /* LTR */
float: left;
position: relative;
top: -1.4em;
left: -10px; /* LTR */
left: -10px;
width: 20px;
height: 25px;
background: url(images/lock.png) no-repeat 50% 2px;
......
charts_color.js
+ 65
− 67
View file @ 54c15f19
......@@ -7,55 +7,11 @@
*/
Drupal.behaviors.charts_color = function (context) {
/**
* Function copied from Color module
*
* Shift a given color, using a reference pair (ref in HSL).
*/
function shift_color(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 {
given[1] = 1 - (1 - given[1]) * d;
}
}
// Luminance: interpolate
if (ref1[2] == 0 || ref2[2] == 0) {
given[2] = ref2[2];
}
else {
var d = ref1[2] / ref2[2];
if (d > 1) {
given[2] /= d;
}
else {
given[2] = 1 - (1 - given[2]) * d;
}
}
return farb.pack(farb.HSLToRGB(given));
}
/**
* Function copied from Color module.
*
* Callback for Farbtastic when a new color is chosen.
*/
function callback(input, color, propagate, colorscheme) {
* 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,
......@@ -89,26 +45,14 @@ Drupal.behaviors.charts_color = function (context) {
resetScheme();
}
}
}
/**
* Function copied from Color module.
*
* Reset the color scheme selector.
*/
function resetScheme() {
$('#edit-scheme', form).each(function () {
this.selectedIndex = this.options.length - 1;
});
}
/**
* Function copied from Color module.
*
* Focus the Farbtastic on a particular field.
*/
function focus() {
* 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)
......@@ -126,7 +70,61 @@ Drupal.behaviors.charts_color = function (context) {
/**
* Print a Chart (with generic data) preview.
*/
function 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 {
given[1] = 1 - (1 - given[1]) * d;
}
}
// Luminance: interpolate
if (ref1[2] == 0 || ref2[2] == 0) {
given[2] = ref2[2];
}
else {
var d = ref1[2] / ref2[2];
if (d > 1) {
given[2] /= d;
}
else {
given[2] = 1 - (1 - given[2]) * d;
}
}
return farb.pack(farb.HSLToRGB(given));
}
// Declaring some variavles and settings some generic values
......
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