How can I use the colorpicker for a form element?

Christian Zwahlen - March 27, 2008 - 15:50

Need the core color picker for drupal in forms.

This'll help;

pobster - March 27, 2008 - 15:53

Drupal 6

Christian Zwahlen - March 27, 2008 - 16:00

How is it possible to use the _core_ modul "color" with the color picker for moduls in Drupal 6?

Do you want me to post the

pobster - March 27, 2008 - 22:58

Do you want me to post the same thing again?...

Two seconds of browsing over the code and I wrote this;

  // Add Farbtastic color picker
  drupal_add_css('misc/farbtastic/farbtastic.css');
  drupal_add_js('misc/farbtastic/farbtastic.js');

  $form['color'] = array(
    '#type' => 'textfield',
    '#title' => t('Color pickmeup'),
    '#default_value' => '#123456',
    '#description' => '<div id="colorpicker"></div>',
  );

  $form['colorpicker_example'] = array(
    '#type' => 'item',
    '#description' => "<script type='text/javascript'>
    $(document).ready(function() {
      $('#colorpicker').farbtastic('#edit-color');
    });
    </script>",
  );
  return $form;

Okay so it's not the best way to call it, but it works fine.

Pobster

Thanks!

Christian Zwahlen - March 30, 2008 - 14:17

And for more than one element?

Uhhhh no... I'm not going

pobster - March 30, 2008 - 22:01

Uhhhh no... I'm not going to just tell you what to do, I've given you a perfectly good link already which tells you everything you need to know. Just follow it and look at it... I bet you never did your homework at school either did you?...

Pobster

Hmmm okay so I've just seen

pobster - March 30, 2008 - 22:11

Hmmm okay so I've just seen that you've actually contributed modules so you're not quite the slacker I assumed you are ;o)

Take a look at this which I've written for my own Tablemanager module;

tablemanager.css.inc

function tablemanager_css_styling($form_state) {
  $palette = array('thead' => '#ffffff', 'th.active' => '#ffffff', 'tr.even' => '#ffffff', 'tr.odd' => '#ffffff', 'td.active'  => '#ffffff');
  $names['colors'] = array(
    'thead' => t('thead'),
    'th.active' => t('th (active column)'),
    'tr.even' => t('even rows'),
    'tr.odd' => t('odd rows'),
    'td.active' => t('active column'),
  );
  $form['palette']['#tree'] = true;
  foreach ($palette as $name => $value) {
    $form['palette'][$name] = array(
      '#type' => 'textfield',
      '#title' => $names['colors'][$name],
      '#default_value' => $value,
      '#size' => 8,
    );
  }
  return $form;
} // tablemanager_css_styling

function theme_tablemanager_css_styling($form) {
  // Add Farbtastic color picker
  drupal_add_css('misc/farbtastic/farbtastic.css');
  drupal_add_js('misc/farbtastic/farbtastic.js');
  // Add our own js and css
  drupal_add_js(drupal_get_path('module', 'tablemanager') .'/misc/tablemanager.js');
  drupal_add_css(drupal_get_path('module', 'tablemanager') .'/misc/tablemanager_admin.css');

  // Palette
  $textfields = '<div id="palette" class="clear-block">';
  foreach (element_children($form['palette']) as $name) {
    $form['palette'][$name]['#attributes']['class'] = 'color_textfield';
    $form['palette'][$name]['#name'] = $name;
    $textfields .= drupal_render($form['palette'][$name]);
  }
  $textfields .= '</div>';

  $output .= theme('table', array(), array(array(array('data' => $textfields), array('data' => '<div class="colorpicker"></div>'), array('data' => tablemanager_example_table()))), array('id' => 'tablemanager-table-container'));

  // Render remaining fields
  $output .= drupal_render($form);
  return $output;
} // theme_tablemanager_css_styling

function tablemanager_example_table() {
  $header = array(array('data' => t('Name')), array('data' => t('Age'), 'field' => '2', 'sort' => 'asc'), array('data' => t('IQ')));
  $rows[] = array(array('data' => 'Peter'), array('data' => '35'), array('data' => '95'));
  $rows[] = array(array('data' => 'Lois'), array('data' => '30'), array('data' => '115'));
  $rows[] = array(array('data' => 'Paul'), array('data' => '33'), array('data' => '125'));
  return theme('table', $header, $rows, array('id' => 'tablemanager-example-table'));
} // tablemanager_example_table

tablemanager.js

// $Id$

// Global killswitch: only run if we are in a supported browser.
if (Drupal.jsEnabled) {
  $(document).ready(function () {
    // initiate farbtastic colorpicker
    var farb = $.farbtastic("div.colorpicker");
    $("input.color_textfield").each(function () {
      // set the background colors of all of the textfields appropriately
      $("table#tablemanager-example-table " + this.name).css("background-color", farb.color);
      farb.linkTo(this);
      // update the farbtastic colorpicker and example table when this textfield is clicked
      $(this).click(function () {
        $("table#tablemanager-example-table " + this.name).css("background-color", farb.color);
        farb.linkTo(this);
      });
    });
  });
}

Using code stolen completely from both the color module and the colorpicker module with absolutely no thought on my part. It's not finished as I'm doing other theme stuff with it, but it's a good starting point. If it doesn't work it's because I've removed parts of it I've added myself to simplify what you're looking at (and so I may have broken it, don't think so though?)

Pobster

 
 

Drupal is a registered trademark of Dries Buytaert.