You are here

Home » API reference » Jquery Colorpicker 6.2 » jquery_colorpicker.module

function theme_colorpicker in Jquery Colorpicker 6.2

Same name and namespace in other branches
  1. 6 jquery_colorpicker.module \theme_colorpicker()

callback theme for the new form element

File

./jquery_colorpicker.module, line 83

Code

function theme_colorpicker($element) {
  $class = array(
    'form-colorpicker',
  );
  $output = '';
  $path = module_exists('libraries') && in_array('colorpicker', array_keys(libraries_get_libraries())) ? libraries_get_path('colorpicker') : drupal_get_path('module', 'jquery_colorpicker') . '/colorpicker';

  // First we add the 3rd party CSS files and JS files that are required for the form elmeent
  drupal_add_css($path . '/css/colorpicker.css');
  drupal_add_js($path . '/js/colorpicker.js');

  // Then we add the JS file required by this module
  drupal_add_js(drupal_get_path('module', 'jquery_colorpicker') . '/js/jquery_colorpicker.js');

  // If IE6 support has been enabled, we set a variable that will be used later during page rendering to indicate that
  // IE6 specific code should be added to the <head> of the page.
  if (variable_get('jquery_colorpicker_ie6_support', 0)) {
    global $jquery_colorpicker_ie6_page;
    $jquery_colorpicker_ie6_page = TRUE;
  }

  // Next we decide what background to use to render the element. In order to ensure the background exists, we create an array of
  // the two possibilities, that we will use to compare the value submitted in the Form API definition
  $backgrounds = array(
    'select.png',
    'select2.png',
  );

  // Now we check to see if the value in the Form API definition is valid. If it is, we use it, if it's not, we use a default value
  $background = in_array($element['#jquery_colorpicker_background'], $backgrounds) ? $element['#jquery_colorpicker_background'] : 'select.png';

  // Since we know the background, we can then get the URL of it to pass to the javascript function
  $background_url = base_path() . $path . '/images/' . $background;

  // next we determine what the default value for the form element is. This will also be passed to the javascript function.
  if (isset($element['#value'])) {
    $default_color = '#' . $element['#value'];
  }
  elseif (isset($element['#default_value']) && strlen($element['#default_value']) == 6 && preg_match('/^[0-9a-f]{6}$/i', $element['#default_value'])) {
    $default_color = '#' . strtolower($element['#default_value']);
  }
  else {
    $default_color = "#ffffff";
  }

  // Finally we build an array of all the settings to be used by the javascript function
  $settings = array(
    'ids' => array(
      $element['#id'],
    ),
    'backgrounds' => array(
      $background_url,
    ),
    'backgroundColors' => array(
      $default_color,
    ),
    $element['#id'] . '-defaultColor' => $default_color,
  );

  // And we pass the settings in a namespace to the Javascript
  drupal_add_js(array(
    'jqueryColorpicker' => $settings,
  ), 'setting');

  // Over the next few lines we build the output of the element in HTML and to send to the browser
  _form_set_class($element, $class);
  if (isset($element['#field_prefix'])) {
    $output .= '<span class="field-prefix">' . $element['#field_prefix'] . '</span> ';
  }
  $output .= '<div id="' . $element['#id'] . '-inner_wrapper" class="inner_wrapper">';
  $output .= '<div class="color_picker" style="background-color:' . $default_color . '">';
  $output .= '<span class="hash">#</span>';
  $output .= '<input type="text"' . ' maxlength="6"' . ' name="' . $element['#name'] . '" id="' . $element['#id'] . '"' . ' size="7"' . ' value="' . check_plain($element['#value']) . '"' . drupal_attributes($element['#attributes']) . ' />';
  $output .= '<div class="description">' . t('Enter a hexidecimal color value. Enabling javascript will replace this input with a graphical color selector.') . '</div>';
  $output .= '</div>';
  $output .= '</div>';
  if (isset($element['#field_suffix'])) {
    $output .= '<span class="field-suffix">' . $element['#field_suffix'] . '</span>';
  }

  // and finally we pass the newly built element output to the form API to take care of the rest of the rendering
  return theme('form_element', $element, $output);
}