function theme_jquery_colorpicker

callback theme for the new form element

File

sites/all/modules/ulmus/jquery_colorpicker/jquery_colorpicker.module, line 75

JQuery Colorpicker primary module file.

Code

function theme_jquery_colorpicker($variables) {
  $element = $variables['element'];

  $element['#id'] = isset($element['#id']) ? $element['#id'] : 'edit-' . rand(0, 9999);

  $class = array('form-colorpicker');
  $output = '';

  $path = libraries_get_path('colorpicker');

  // 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']) && strlen($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";
  }
  // 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,
  );

  // Attach the 3rd party CSS and JS files, and attach the module's JS files.
  $element['#attached'] = array(
    'css' => array(
      
      // Add the 3rd party CSS files required for the form elmeent.
      $path . '/css/colorpicker.css',
    ),
    'js' => array(
      
      // Add the 3rd party JS files required for the form element.
      $path . '/js/colorpicker.js',
      
      // Add the module js files.
      drupal_get_path('module', 'jquery_colorpicker') . '/js/jquery_colorpicker.js',
      
      // Add the settings.
      array(
        'data' => $settings,
        'type' => 'setting',
      ),
    ),
  );
  // If IE6 support is enabled, attach the inline CSS and JS that will reside in conditional comments.
  if (variable_get('jquery_colorpicker_ie6_support', 0)) {
    $ie6_path = base_path() . drupal_get_path('module', 'jquery_colorpicker') . '/twin_helix/';
    $path_to_pngfix = $ie6_path . 'iepngfix.htc';
    $path_to_tilebg = $ie6_path . 'iepngfix_tilebg.js';
    $css = '<!--[if lt IE 7]>' . '.inner_wrapper, .color_picker, .colorpicker_color div, .colorpicker_color div div  { behavior: url("' . $path_to_pngfix . '") } ' . '<![endif]-->';
    $element['#attached']['css'][] = array(
      'data' => $css,
      'type' => 'inline',
    );
    $js = 'var script = document.createElement("script"); script.type = "text/javascript";';
    $js .= 'script.src = "' . $path_to_tilebg . '";';
    $js .= 'document.getElementsByTagName("head")[0].appendChild(script);';
    $element['#attached']['js'][] = array(
      'data' => $js,
      'type' => 'inline',
    );
  }

  // 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'] . '" class="jquery_colorpicker">';
  $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>';
  $name = isset($element['#name']) ? $element['#name'] : $element['#id'];
  $value = isset($element['#value']) ? check_plain($element['#value']) : '';
  $output .= '<input type="text"' . ' maxlength="6"' . ' name="' . $name . '" id="' . $element['#id'] . '"' . ' size="7"' . ' value="' . $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['#cardinality'])) {
    if ($element['#cardinality'] == FIELD_CARDINALITY_UNLIMITED) {
      $output .= '<div>' . l(t('Remove'), '#', array('html' => TRUE, 'attributes' => array('onclick' => 'jQuery(\'#' . $element['#id'] . '\').find(\'input\').val(\'\'); jQuery(\'#' . $element['#id'] . '\').parent().parent().parent().hide(); return false;'))) . '</div>';
    }
    else {
      $output .= '<div>' . l(t('Clear'), '#', array('html' => TRUE, 'attributes' => array('onclick' => 'jQuery(\'#' . $element['#id'] . '\').find(\'input\').val(\'\'); jQuery(\'#' . $element['#id'] . ' .color_picker\').css("backgroundColor", "#FFF"); return false'))) . '</div>';
    }
  }
  $output .= '</div>';

  if (isset($element['#field_suffix'])) {
    $output .= '<span class="field-suffix">' . $element['#field_suffix'] . '</span>';
  }
  $element['#children'] = $output;
  $element['#theme'] = 'form_element';
  return drupal_render($element);
}