Smileys Button and Preview

Smileys module provides an input filter converting text smileys into images. It allows creation or import of new smileys.

The smiley button dynamically gets the list of smileys and displays them in a dialog for users to choose. For demonstrating the effect of smiley filter, the preview button is also modified in order to convert text smileys into images.

Smileys Demo:

Here is the button code:

php:
$L = drupal_to_js(_smileys_list());
$P = base_path();
drupal_add_js("
var smlyList = $L, smlyPath = '$P';
var smlyWrap = \$('<div style=\"width:200px\"></div>');
\$.each(smlyList, function(i, s) {\$('<a href=\"#\" title=\"'+ s.description +'\"><img src=\"$P'+ s.image +'\" alt=\" '+ s.acronyms.split(' ')[0] +' \" /></a>').css('margin', '0.5em').appendTo(smlyWrap)});
", 'inline');
return 'js:
editor.dialog.open("Smileys");
$("tr.body>td", editor.dialog.popup).empty().append(smlyWrap);
$("a", smlyWrap).each(function(){this.onclick=function(){editor.dialog.close();editor.active.replaceSelection(this.firstChild.alt, "end"); return false;};});';

Preview button code:

js:
function SMLY2HTML(S) {
  function A(s, p) {for (var i in p) s = s.replace(new RegExp(i, 'g'), p[i]); return s;}
  var B = {}, b = '(^|[ ,\\.\\?!:\\(\\)\r\n<>]|$)';
  for (var s, i=0; s = smlyList[i]; i++) {
  var a = A(A(s.acronyms, {'([\\\\\\^\\$\\*\\+\\?\\.\\(\\)\\[\\]\\{\\}\\|])': '\\$1'}), {'\\s+': '|'}), h = '<img src="'+ smlyPath + s.image +'" />';
    parseInt(s.standalone) ? (B[b + a + b] = '$1'+ h +'$2') : (B[a] = h);
  }
  return A(S, B);
}
E.preview && $(E.preview).css('display') != 'none' ? E.setContent(E.oriCnt) : E.setContent(SMLY2HTML(E.oriCnt = E.getContent()));
eDefPreview();

Note: You can combine smiley preview with BBCode preview by copying SMLY2HTML function and changing BBC2HTML(E.oriCnt = E.getContent()) to SMLY2HTML(BBC2HTML(E.oriCnt = E.getContent())). Also note that SMLY2HTML requires smlyList and smlyPath variables defined by smiley button

Updated button code for 6.x-2.x:

php:
$L = drupal_to_js(_smileys_list());
$P = base_path();
drupal_add_js("(function($){
var click = function() {
  BUE.active.replaceSelection(this.firstChild.alt, 'end');
  return false;
};
var map = function(s) {
 return $('<a href=\"#\" title=\"'+ s.description +'\"><img src=\"$P'+ s.image +'\" alt=\" '+ s.acronyms.split(' ')[0] +' \" /></a>').css('margin', '0.5em').click(click)[0];
};
var links = $.map($L, map);
BUE.smlyWrap = function() {
  return $('<div style=\"width:200px\"></div>').append($(links).clone(true));
};
})(jQuery);", 'inline');
return 'js: E.quickPop.open(BUE.smlyWrap());';

Add new comment

php:
$L = drupal_to_js(_smileys_list(0, " WHERE promote_to_box='1' ORDER BY weight"));
$P = base_path();
drupal_add_js("
var smlyList = $L, smlyPath = '$P';
var smlyWrap = jQuery('<div style=\"width:200px\"></div>');
jQuery.each(smlyList, function(i, s) { jQuery('<a class=\"smiley\" href=\"#\" title=\"'+ s.description +'\"><img src=\"$P'+ s.image +'\" alt=\" '+ s.acronyms.split(' ')[0] +' \" /></a>').css('margin', '0.5em').appendTo(smlyWrap)});
", 'inline');
return 'js:

editor.quickPop.open("Smileys");
$("tr.body>td", editor.quickPop.popup).empty().append(smlyWrap);
$("a.smiley", editor.quickPop.popup).click(function(){
  editor.quickPop.close();
  editor.active.replaceSelection(this.firstChild.alt, "end");
  return false;
});

'; // end return 'js'.

Doesn't seem to work here

Submitted by RedTop (not verified) on Fri, 08/01/2010 - 13:38.

Doesn't seem to work here either.

errormessage was: "undefined smlyWrap"

Drupal 6.15
BUEditor 6.x-2.x-dev 2010-Jan-03

An updated button version for

Submitted by drupal on Fri, 08/01/2010 - 17:49.

An updated button version for 6.x-2.x has been added. Please check above.

Thanks for the quick reply!

Submitted by RedTop (not verified) on Sat, 09/01/2010 - 03:43.

Thanks for the quick reply! Unfortunately I still get an error:

"TypeError: BUE.smlyWrap is not a function"

That's probably something

Submitted by drupal on Sat, 09/01/2010 - 06:10.

That's probably something else breaking the script.

Oh.. d**n, it just hit me

Submitted by RedTop (not verified) on Sat, 09/01/2010 - 06:25.

Oh.. d**n, it just hit me that it must be the fact that I'm using popup comment forms using popups API... :(

Thanks for your help though! :)

I found another, less

Submitted by RedTop (not verified) on Sat, 09/01/2010 - 08:26.

I found another, less sophisticated solution. This one works for me (inside popup API modal forms):

js:
getSmile=function(txt) {
  editor.active.replaceSelection(txt,'end');
  editor.dialog.close();
}
var userForm = '<table><tr>';
userForm += '<td><a href="javascript:getSmile(\':ANGEL:\');"><img src="/sites/all/modules/smileys/packs/kolobok/aa.gif" alt="ANGEL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':HAPPY:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ab.gif" alt="HAPPY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SAD:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ac.gif" alt="SAD" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WINKING:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ad.gif" alt="WINKING" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':TONGUE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ae.gif" alt="TONGUE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':COOL:\');"><img src="/sites/all/modules/smileys/packs/kolobok/af.gif" alt="COOL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':LAUGHING:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ag.gif" alt="LAUGHING" /></a></td>';
userForm += '</tr><tr>';

userForm += '<td><a href="javascript:getSmile(\':EMBARASSED:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ah.gif" alt="EMBARASSED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SHOCKED:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ai.gif" alt="SHOCKED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':KISS:\');"><img src="/sites/all/modules/smileys/packs/kolobok/aj.gif" alt="KISS" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':CRYING:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ak.gif" alt="CRYING" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SILENT:\');"><img src="/sites/all/modules/smileys/packs/kolobok/al.gif" alt="SILENT" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':ANGRY:\');"><img src="/sites/all/modules/smileys/packs/kolobok/am.gif" alt="ANGRY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DONT_UNDERSTAND:\');"><img src="/sites/all/modules/smileys/packs/kolobok/an.gif" alt="DONT_UNDERSTAND" /></a></td>';
userForm += '</tr><tr>';
 
userForm += '<td><a href="javascript:getSmile(\':PENSIVE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ao.gif" alt="PENSIVE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':JOKINGLY:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ap.gif" alt="JOKINGLY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DEVIL:\');"><img src="/sites/all/modules/smileys/packs/kolobok/aq.gif" alt="DEVIL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':HEADPHONES:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ar.gif" alt="HEADPHONES" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':KISSED:\');"><img src="/sites/all/modules/smileys/packs/kolobok/as.gif" alt="KISSED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SICK:\');"><img src="/sites/all/modules/smileys/packs/kolobok/at.gif" alt="SICK" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':TIRED:\');"><img src="/sites/all/modules/smileys/packs/kolobok/au.gif" alt="TIRED" /></a></td>';
userForm += '</tr><tr>';
 
userForm += '<td><a href="javascript:getSmile(\':STOP:\');"><img src="/sites/all/modules/smileys/packs/kolobok/av.gif" alt="STOP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':KISSING:\');"><img src="/sites/all/modules/smileys/packs/kolobok/aw.gif" alt="KISSING" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':ROSE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ax.gif" alt="ROSE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':THUMBS UP:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ay.gif" alt="THUMBS UP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DRINK:\');"><img src="/sites/all/modules/smileys/packs/kolobok/az.gif" alt="DRINK" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':IN LOVE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/ba.gif" alt="IN LOVE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':BOMB:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bb.gif" alt="BOMB" /></a></td>';
userForm += '</tr><tr>';

userForm += '<td><a href="javascript:getSmile(\':HELP:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bc.gif" alt="HELP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':ROCK ON:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bd.gif" alt="ROCK ON" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':CONFUSED:\');"><img src="/sites/all/modules/smileys/packs/kolobok/be.gif" alt="CONFUSED" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':OK:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bf.gif" alt="OK" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WASSUP:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bg.gif" alt="WASSUP" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SORRY:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bh.gif" alt="SORRY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':BRAVO:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bi.gif" alt="BRAVO" /></a></td>';
userForm += '</tr><tr>';

userForm += '<td><a href="javascript:getSmile(\':ROFL:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bj.gif" alt="ROFL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':PARDON:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bk.gif" alt="PARDON" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':NO:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bl.gif" alt="NO" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':CRAZY:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bm.gif" alt="CRAZY" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DONT_KNOW:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bn.gif" alt="DONT_KNOW" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':DANCE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bo.gif" alt="DANCE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':YAHOO:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bp.gif" alt="YAHOO" /></a></td>';
userForm += '</tr><tr>';

userForm += '<td><a href="javascript:getSmile(\':HI:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bq.gif" alt="HI" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':BYE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/br.gif" alt="BYE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':YES:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bs.gif" alt="YES" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':ACUTE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bt.gif" alt="ACUTE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WALL:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bu.gif" alt="WALL" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':WRITE:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bv.gif" alt="WRITE" /></a></td>';
userForm += '<td><a href="javascript:getSmile(\':SCRATCH:\');"><img src="/sites/all/modules/smileys/packs/kolobok/bw.gif" alt="SCRATCH" /></a></td>';
userForm += '</tr></table>';
editor.dialog.open('Smileys', userForm);

Book navigation

Support ufku.com