Clickable JS smileys on Textareas

As requested in the forums, I tried to make the Smileys clickable, i.e. having a small toolbar with smileys attached to each textarea, with javascript-supported smiley-insertion by just clicking to the toolbar (like PhpBB does). Perhaps this might be included into the module itself in some form? Tested on 4.7.3. with no WYSIWYG editor.

The code is: Add into smileys.module:

// -------- Added: clickable smileys!


/**
* Implementation of hook_elements()
*/
function smileys_elements() {
  $type['textarea'] = array('#process' => array('smileys_textarea' => array()));
  return $type;
}


/*
* Add smileys underneath textareas
*/
function smileys_textarea($element) {
  if (arg(0) != 'admin') {  // Not admin pages!

    // Add the .js file to this page!
    $path = drupal_get_path('module', 'smileys');
    drupal_add_js($path . '/smileys.js');

    // Create clickable smileys and append to textarea
    $output = '<div class="smileys">';
    $list = _smileys_list();
    foreach ($list as $smiley) {
      $alt = check_plain($smiley->description);
      $acro = check_plain($smiley->acronyms).' ';
      $acro = substr($acro,0,strpos($acro,' '));
      $output .= '<div class="smiley"><a href="javascript:setsmil(\''. $element['#id'].
        "',' " . $acro . ' \')"><img src="'. check_url(base_path() . $smiley->image) .
        '" title="'. $alt .'" alt="'. $alt .'" /></a></div>';
    }
    $output .= '</div>';

    // be first to allow float-css over img-assist!
    $element['#suffix'] = $output.$element['#suffix'];
  }
  return $element;
}

And a new file smileys.js in the smileys directory:

// JavaScript to insert emoticon-code into textarea

function setsmil(ktery,content) {

  var areas = document.getElementsByTagName('textarea');
  for (var i = 0; ar = areas[i]; i++) {
    if (ar && ar.getAttribute('id') == ktery) {

      // Insert the code
      /* IE */
      if (document.selection) {
        ar.focus();
        cursor = document.selection.createRange();
        cursor.text = content;
    
      } else if (ar.selectionStart || ar.selectionStart == "0") { /* Gecko-based engines: Mozilla, Camino, Firefox, Netscape */
        var startPos  = ar.selectionStart;
        var endPos    = ar.selectionEnd;
        var body      = ar.value;
        ar.value = body.substring(0, startPos) + content + body.substring(endPos, body.length);
    
      } else { /* Worst case scenario: browsers that don't know about cursor position, Safari, OmniWeb, Konqueror */
        ar.value += content;
      }

    }  
  }
}

Seems to work well on our website, inserts to cursor-position (as oposed to PhpBB), supports also multiple textareas on the same site (happens with CCK content types). Might be a good starter for future imrpovement:

TODO: Better condition to show/not show the toolbar depending on text format being filtered on the particular textarea, perhaps also some admin-interface settings to disable / show depending on added content-type.
TODO: Check what it does with all the possible WYSIWYG editors.