summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorjoachim2012-12-21 15:51:59 (GMT)
committer Artusamak2012-12-21 16:30:07 (GMT)
commit10c4d0d0c39d432a9d633e7d060918725dfe809c (patch)
tree6da7ca17cb973e910938eff4ef5266ac21ea7702
parent4046351ead989b69b3304c4013a56175347ac690 (diff)
Issue #1743952 by joachim, quicksketch: Use farbtastic as default colorpicker.
-rwxr-xr-xcolorfield.module41
-rwxr-xr-xlib/js/colorfield-farbtastic.js53
2 files changed, 66 insertions, 28 deletions
diff --git a/colorfield.module b/colorfield.module
index 7ee66cd..56695eb 100755
--- a/colorfield.module
+++ b/colorfield.module
@@ -35,7 +35,7 @@ function colorfield_field_info() {
'colorfield_rgb' => array(
'label' => t('Color Picker (RGB)'),
'description' => t('A field composed of an RGB color.'),
- 'default_widget' => 'colorfield_3text',
+ 'default_widget' => 'colorfield_text',
'default_formatter' => 'colorfield_simple_text',
'instance_settings' => array('text_processing' => 0),
),
@@ -288,10 +288,6 @@ function colorfield_field_widget_info() {
'label' => t('RGB text field'),
'field types' => array('colorfield_rgb'),
),
- 'colorfield_colorpicker' => array(
- 'label' => t('Color Picker'),
- 'field types' => array('colorfield_rgb'),
- ),
);
}
@@ -319,30 +315,7 @@ function colorfield_field_widget_form(&$form, &$form_state, $field, $instance, $
$widget = $element;
$widget['#delta'] = $delta;
-
switch ($instance['widget']['type']) {
-
- case 'colorfield_colorpicker':
- $widget += array(
- '#suffix' => '<div class="colorfield-colorpicker"></div>',
- '#attributes' => array('class' => array('edit-colorfield-colorpicker')),
- '#attached' => array(
- // Add Farbtastic color picker.
- /**
- 'library' => array(
- array('system', 'farbtastic'),
- ),
- */
- // Add javascript to trigger the colorpicker.
- 'js' => array(
- drupal_get_path('module', 'colorfield') . '/lib/js/colorpicker.js',
- drupal_get_path('module', 'colorfield') . '/colorfield.js'
- ),
- // And the CSS
- 'css' => array(drupal_get_path('module', 'colorfield') . '/lib/css/colorpicker.css'),
- ),
- );
-
// DELIBERATE fall-through: From here on the colorfield_text and
// colorfield_colorpicker are exactly the same.
case 'colorfield_text':
@@ -353,6 +326,18 @@ function colorfield_field_widget_form(&$form, &$form_state, $field, $instance, $
// configurations where all characters won't fit in input field.
'#size' => 7,
'#maxlength' => 7,
+ '#suffix' => '<div class="colorfield-colorpicker"></div>',
+ '#attributes' => array('class' => array('edit-colorfield-colorpicker')),
+ '#attached' => array(
+ // Add Farbtastic color picker.
+ 'library' => array(
+ array('system', 'farbtastic'),
+ ),
+ // Add javascript to trigger the colorpicker.
+ 'js' => array(
+ drupal_get_path('module', 'colorfield') . '/lib/js/colorfield-farbtastic.js',
+ ),
+ ),
);
break;
diff --git a/lib/js/colorfield-farbtastic.js b/lib/js/colorfield-farbtastic.js
new file mode 100755
index 0000000..70d69e6
--- /dev/null
+++ b/lib/js/colorfield-farbtastic.js
@@ -0,0 +1,53 @@
+/**
+ * @file
+ * Javascript for Farbtastic colorfield widget.
+ */
+
+/**
+ * Provides a farbtastic colorpicker for the widget.
+ */
+(function ($) {
+ Drupal.behaviors.field_example_colorpicker = {
+ attach: function (context) {
+ $(".edit-colorfield-colorpicker", context).bind("focus", function (event) {
+ var edit_field = this;
+ var picker = $(this).closest('div').parent().find(".colorfield-colorpicker");
+
+ // Hide all color pickers except this one.
+ $(".colorfield-colorpicker").hide();
+ $(picker).show();
+
+ var updateBackground = function () {
+ // Catch errors caused by invalid hex codes.
+ var unpacked = farb.unpack(this.value);
+ if (!unpacked) {
+ return;
+ }
+ // If a valid color, set background/foreground colors.
+ $(this).css({
+ backgroundColor: this.value,
+ 'color': farb.RGBToHSL(unpacked)[2] > 0.5 ? '#000' : '#fff'
+ });
+ }
+
+ var updatePicker = function () {
+ farb.setColor(this.value);
+ }
+
+ // Adjust the background color on keyup and onload.
+ $(edit_field)
+ .unbind('keyup.colorfield')
+ .bind('keyup.colorfield', updateBackground)
+ .bind('keyup.colorfield', updatePicker);
+
+ // Attach Farbtastic.
+ var farb = $.farbtastic(picker);
+ farb.setColor(edit_field.value);
+ farb.linkTo(function (color) {
+ edit_field.value = color;
+ updateBackground.apply(edit_field);
+ });
+ });
+ }
+ }
+})(jQuery);