diff --git a/colorfield.module b/colorfield.module index 7ee66cd620336bdd4ece3bf46462f6a6be8f0d26..56695eb2718a187536e2398104412bbe50b8aef3 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' => '
', - '#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' => '', + '#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 0000000000000000000000000000000000000000..70d69e633aadf47bff410171c81d25f5fd2c1f65 --- /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);