How to use standard Drupal 7 farbtastic component? jQuery error

Question

So, this is my code:

  drupal_add_library('system', 'farbtastic');

I've added it to a page callback function (also tried putting in an implementation of hook_page_alter()). It doesn't seem to initialize properly, it fails on the first line of the system library farbtastic,

Uncaught TypeError: Cannot read property 'farbtastic' of undefined

Has anyone had this issue before? Any ideas? I get the sense I'm doing something wrong because farbtastic is part of Drupal core now...

Answer 1

The Drupal core's farbtastic works differently. You will have to attach it to a an element eg: a form widget. Eg:

colour_mod.module

$form['colour1'] = array(
    '#type' => 'fieldset',
    '#title' => t('Enter Colour:'),
    '#tree' => TRUE,
    '#description' => '<div id="color_picker"></div>',
    '#attached' => array(
        'library' => array(
            array('system', 'farbtastic'),
        ),
        'js' => array(drupal_get_path('module', 'colour_mod') . '/colour_mod.js'),
    ),

);

colour_mod.js:

(function ($) {
  Drupal.behaviors.colour1 = {
    attach: function(context) {
                var farb = $.farbtastic("#color_picker");   
   }
  }
})(jQuery);

Answer 2

I've encountered the same "Cannot read property 'farbtastic' of undefined" error and the root cause is that the color picker is not still ready/loaded when the farbtastic's markups need to be injected to that element. My solution is to enclose the farbtastic code to ajaxComplete() event:

your_module.module

$form['marker_color'] = array('#type' => 'textfield',
  '#title' => t('Marker Color'),
  '#default_value' => '#18d',
  '#size' => 7,
  '#attached' => array(
    'library' => array(
      array('system', 'farbtastic'),
    ),
    'js' => array(drupal_get_path('module', 'your_module') . '/js/custom.js'),
    ),
  '#attributes' => array('id' => 'color-picker-target-textfield'),
  '#suffix' => '<div id="color-picker-container"></div>',       
);

js/custom.js

(function ($) {
  Drupal.behaviors.custom_farbtastic = {
    attach : function(context, settings) {
      // Wait the HEX input field to be rendered completely to prevent
      // referencing errors. Pass the context information to speed up
      // DOM traversal/searching.
      $('#color-picker-target-textfield', context).ajaxComplete(function() {
        // Prevent multiple processing.
        $('#color-picker-target-textfield', context).once('color-picker-target-processed', function() {
          // Create a farbtastic colorpicker in the given DIV container.
          var colorPicker = $.farbtastic('color-picker-container');

          // Retrieve the target text field that contains the HEX color strings.
          var colorPickerTarget = $('#color-picker-target-textfield');

          // Make the color picker auto-update the contents of the HEX text field.
          colorPicker.linkTo(colorPickerTarget);
        });
      });
    },
  }
};
})(jQuery);