Commit 8ff42bd2 authored by targoo's avatar targoo

add support for spectrum color picker (with and without opacity)

parent a90ac612
......@@ -25,12 +25,20 @@ function color_field_field_info() {
#92E1C0,#9FE1E7,#9FC6E7,#4986E7,#9A9CFF
#B99AFF,#C2C2C2,#CABDBF,#CCA6AC,#F691B2
#CD74E6,#A47AE2',
// Simple color.
'cell_width' => 10,
'cell_height' => 10,
'cell_margin' => 1,
'box_width' => 115,
'box_height' => 20,
'columns' => 16,
// Spectrum.
'show_input' => FALSE,
'show_palette' => FALSE,
'palette' => '',
'show_palette_only' => TRUE,
'show_buttons' => FALSE,
'allow_empty' => FALSE,
),
'default_widget' => 'color_field_default_widget',
'default_formatter' => 'color_field_default_formatter',
......@@ -152,6 +160,11 @@ function color_field_element_info() {
'#theme' => 'color_field_simple_widget',
'#theme_wrappers' => array('form_element'),
);
$elements['color_field_spectrum_widget'] = array(
'#input' => TRUE,
'#theme' => 'color_field_spectrum_widget',
'#theme_wrappers' => array('form_element'),
);
return $elements;
}
......
......@@ -21,16 +21,6 @@ function color_field_library() {
),
);
$path = libraries_get_path('dematte-color-picker');
$libraries['dematte-color-picker'] = array(
'title' => 'color_field_dematte_color_picker',
'website' => 'http://www.dematte.at/colorPicker/',
'version' => '0.9',
'js' => array(
$path . '/colorPicker.js' => array(),
),
);
$path = libraries_get_path('bgrins-spectrum');
$libraries['bgrins-spectrum'] = array(
'title' => 'color_field_spectrum_color_picker',
......@@ -44,6 +34,16 @@ function color_field_library() {
),
);
$path = libraries_get_path('dematte-color-picker');
$libraries['dematte-color-picker'] = array(
'title' => 'color_field_dematte_color_picker',
'website' => 'http://www.dematte.at/colorPicker/',
'version' => '0.9',
'js' => array(
$path . '/colorPicker.js' => array(),
),
);
$path = libraries_get_path('eyecon-color-picker');
$libraries['eyecon-color-picker'] = array(
'title' => 'color_field_eyecon_color_picker',
......@@ -51,9 +51,6 @@ function color_field_library() {
'version' => 'latest',
'js' => array(
$path . '/js/colorpicker.js' => array(),
$path . '/js/utils.js' => array(),
$path . '/js/layout.js' => array(),
$path . '/js/eye.js' => array(),
),
);
return $libraries;
......@@ -80,6 +77,10 @@ function color_field_theme($existing, $type, $theme, $path) {
'render element' => 'element',
'file' => 'color_field.theme.inc',
),
'color_field_spectrum_widget' => array(
'render element' => 'element',
'file' => 'color_field.theme.inc',
),
);
}
......@@ -111,3 +112,19 @@ function color_field_hex2rgb($hex = FALSE) {
$b = hexdec(substr($hex,-2));
return compact('r', 'g', 'b');
}
/**
* Helper: Convert HEX6 to RGBA.
*
* @param $hex.
* @param $alpha.
*
* @return $rgba
*/
function color_field_hex2rgba($hex, $alpha = 1) {
$r = hexdec(substr($hex,0,2));
$g = hexdec(substr($hex,2,2));
$b = hexdec(substr($hex,-2));
$a = $alpha;
return 'rgba(' . implode(compact('r', 'g', 'b', 'a'),',') . ')';
}
......@@ -5,6 +5,63 @@
* Theme functions.
*/
/**
* Formats a default color field widget.
*/
function theme_color_field_spectrum_widget($vars) {
$element = $vars['element'];
// Javascript settings.
$settings = array();
$settings['id'] = $element['rgb']['#id'];
$settings['show_input'] = (isset($field['settings']['show_input']) && $field['settings']['show_input'] == 1) ? TRUE : FALSE;
$settings['show_palette'] = (isset($field['settings']['show_palette']) && $field['settings']['show_palette'] == 1) ? TRUE : FALSE;
$settings['show_palette_only'] = (isset($field['settings']['show_palette_only']) && $field['settings']['show_palette_only'] == 1) ? TRUE : FALSE;
$settings['show_buttons'] = (isset($field['settings']['show_buttons']) && $field['settings']['show_buttons'] == 1) ? TRUE : FALSE;
$settings['allow_empty'] = (isset($field['settings']['allow_empty']) && $field['settings']['allow_empty'] == 1) ? TRUE : FALSE;
// Enable or not opacity.
if (isset($element['opacity'])) {
$settings['show_alpha'] = TRUE;
$element['opacity']['#attributes']['class'] = array('element-invisible');
unset($element['opacity']['#title']);
unset($element['opacity']['#description']);
} else {
$settings['show_alpha'] = FALSE;
}
$default_colors = (isset($field['settings']['palette']) && $field['settings']['palette'] != '') ? $field['settings']['palette'] : '';
preg_match_all("/#[0-9a-fA-F]{6}/", $default_colors, $default_colors, PREG_SET_ORDER);
foreach ($default_colors as $color) {
$settings['palette'][] = $color[0];
}
// Attach javascript and style.
$element['rgb']['#attached'] = array(
// Add Spectrum color picker.
'library' => array(array('color_field', 'bgrins-spectrum')),
'js' => array(
drupal_get_path('module', 'color_field') . '/color_field_spectrum_color_picker/color_field_spectrum_color_picker.jquery.js',
array(
'data' => array('color_field_spectrum' => array('#' . $element['rgb']['#id'] => $settings)),
'type' => 'setting',
),
),
);
$output = '';
$output .= '<div class="link-field-subrow clearfix">';
$output .= '<div class="link-field-title color-field-column">' . drupal_render($element['rgb']) . '</div>';
if (isset($element['opacity'])) {
$output .= '<div class="link-field-title color-field-column">' . drupal_render($element['opacity']) . '</div>';
}
$output .= '</div>';
$output .= drupal_render_children($element);
return $output;
}
/**
* Formats a default color field widget.
*/
......
......@@ -15,6 +15,52 @@ function _color_field_field_instance_settings_form($field, $instance) {
$form = array();
switch ($widget['type']) {
// Spectrum widget.
case 'color_field_spectrum_widget':
$form['show_input'] = array(
'#type' => 'checkbox',
'#title' => t('Show Input'),
'#default_value' => $settings['show_input'],
'#description' => t('Allow free form typing.'),
);
$form['show_palette'] = array(
'#type' => 'checkbox',
'#title' => t('Show Palette'),
'#default_value' => $settings['show_palette'],
'#description' => t('Show or hide Palette in Spectrum Widget'),
);
$form['palette'] = array(
'#type' => 'textarea',
'#title' => t('Color Palette'),
'#default_value' => $settings['palette'],
'#description' => t('Selectable color palette to accompany the Spectrum Widget'),
'#states' => array(
'visible' => array(
':input[name="field[settings][show_palette]"]' => array('checked' => TRUE),
),
),
);
$form['show_palette_only'] = array(
'#type' => 'checkbox',
'#title' => t('Show Palette Only'),
'#default_value' => $settings['show_palette_only'],
'#description' => t('Only show thePalette in Spectrum Widget and nothing else'),
);
$form['show_buttons'] = array(
'#type' => 'checkbox',
'#title' => t('Show Buttons'),
'#default_value' => $settings['show_buttons'],
'#description' => t('Add Cancel/Confirm Button.'),
);
$form['allow_empty'] = array(
'#type' => 'checkbox',
'#title' => t('Allow Empty'),
'#default_value' => $settings['allow_empty'],
'#description' => t('Allow empty value.'),
);
break;
// Spectrum default widget.
case 'color_field_default_widget':
$form['default_colors'] = array(
'#type' => 'textarea',
......@@ -24,6 +70,10 @@ function _color_field_field_instance_settings_form($field, $instance) {
'#description' => t('Default colors for pre-selected color boxes'),
);
break;
// Spectrum simple widget.
// Use to be color_field_simple_color.
case 'color_field_simple_color':
case 'color_field_simple_widget':
$form['cell_width'] = array(
'#type' => 'textfield',
......
......@@ -6,17 +6,40 @@
Drupal.behaviors.color_field_spectrum = {
attach: function (context) {
$.each(Drupal.settings.color_field_spectrum, function (selector) {
$('#' + this.id).spectrum({
$(selector).spectrum({
preferredFormat: "hex",
showInput: this.show_input,
showAlpha: false,
showAlpha: this.show_alpha,
showInitial: true,
showPalette: this.show_palette,
showPaletteOnly: this.show_palette_only,
palette:[this.palette],
showButtons: this.show_buttons,
allowEmpty: this.allow_empty,
change: function(tinycolor) {
var opacity_selector = selector.replace("-rgb","-opacity");
if ($(opacity_selector)) {
$(selector).val(tinycolor.toHexString());
$(opacity_selector).val(tinycolor._roundA);
}
}
});
// Set alpha value.
if (this.show_alpha) {
var tinycolor = $(selector).spectrum("get");
var opacity_selector = selector.replace("-rgb","-opacity");
var alpha = $(opacity_selector).val();
if (alpha > 0) {
tinycolor.setAlpha(alpha);
$(selector).spectrum("set", tinycolor);
}
}
});
}
};
......
Markdown is supported
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