Make smileys clickable?

So do you want that side block of smiley's "clickable" that automaticly inserts the corresponding code for that smiley. Like the way other forums have it (phbb)?
I would like this feature too, I'm looking into the way phbb does it. I'll let you know how it turns out.

Ah, now I see what you wanted - various editors for htmlareas, such as TinyMCE, have this sort of option. TinyMCE's got about 16 smileys you can click from a popup, and it adds the code, but it is not so easy to add more if that is what you want. Good enough, probably, though.

Rick Cogley :: rick.cogley@esolia.co.jp
Tokyo, Japan

I would like clickable smileys as well. Has there been any progress on this? I suppose it should be enough to make a javascript powered block where when you click on a smiley it just adds the smiley code. The trick is in having the actuall clickable smiley button display a smiley that is set in smiley module administration. Other than that, the thing should be quite easy to do, right?

Anyone did it?

Thanks alot
Daniel

I tried to make clickable smileys, and it seems to work! :-)
I'm on Drupal 4.7.3., Smileys module 1.45.2.4, and no WYSIWYG editor (we're using the Texy module for pseudo-markups in our texts).

At the end of smileys.module file I added the following:

// -------- 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;
}

In addition, a brand new file must be added to the 'smileys' folder (the same where the .module file is), named "smileys.js", which should read:

// 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;
      }

    }  
  }
}

This patch adds all your available Smileys below textareas (everywhere excepting admin pages - TODO: more friendly page-selection depending on content-type or filters used?), clicking these smileys sets the corresponding acronym (first from the Smiley's list) into the textarea, at cursor position when possible (code snippet taken from img_assist), surrounded by spaces to ensure standalone smileys are ok. Multiple textareas on one page (CCK) works well.

You need to style this Smiley-list somehow in your theme's style.css - there are DIVs with class "smileys" and "smiley" to allow you something like "display:block; float:right", producing a nice Smileys control bar. In my case it fits just right to the img_assist icon.