Wylie » emoticon http://www.wyliethomas.com/blog web consultant.developer.angler Wed, 07 Dec 2011 18:14:48 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 jQuery Emoticon Selector Plugin http://www.wyliethomas.com/blog/2010/03/02/jquery-emoticon-selector-plugin/ http://www.wyliethomas.com/blog/2010/03/02/jquery-emoticon-selector-plugin/#comments Tue, 02 Mar 2010 23:15:34 +0000 admin http://www.wyliethomas.com/blog/?p=117 I couldn’t find an emoticon plugin for inserting an emoticon into a text area. I found plenty that converted the emoticon code into an image. So, I set out to write my first jQuery plugin.

If you choose to use this, keep in mind this was my first plugin and should be thoroughly tested before using it. And if you make it better I would very much like to see what changes you made.

Lets check it out.

The view has two components. The jQuery call and the div with the necessary elements. (my examples are how i used this in Ruby)

  1.  
  2. <% javascript_tag do %>
  3.   $(document).ready(function() {
  4.     $("div#emodiv").emoticate({icon: ’smiley-icon’, replacediv: ‘list’});
  5.   });
  6. <% end %>
  7.  

Then the div that you identified in the jQuery call.

  1.  
  2. <div id="emodiv">
  3.   <img src="/images/emoticons/emoticon-0100-smile.png" id="smiley-icon">
  4.   <div id="list"> </div>
  5.   <select name="emoticons">
  6.     <option value=":)">emoticon-0100-smile.png</option>
  7.     <option value="|-(">emoticon-0106-crying.png</option>
  8.     <option value=";)">emoticon-0105-wink.png</option>
  9.     <option value=":(">emoticon-0106-crying.png</option>
  10.     <option value="(pt)">279.png</option>
  11.     <option value="(ct)">104.png</option>
  12.     <option value="(au)">342.png</option>
  13.     <option value="(eg)">emoticon-0116-evilgrin.png</option>
  14.     <option value=":*">emoticon-0109-kiss.png</option>
  15.   </select>
  16. <div style="clear: both;"></div>
  17. <p>
  18.   <textarea id="comment_1"></textarea>
  19. </p>
  20. </div>
  21.  

What is going to happen is that the select and options will be changed to a UL list with the icon images. When an emoticon is clicked it will be inserted into the text area within the div. (The id for the textarea does need to be unique).

And here is the plugin.

  1.  
  2. (function($){
  3.  
  4.   $.fn.emoticate = function(options){
  5.  
  6.     var defaults = ({
  7.       replacediv:   ‘replaceme’,
  8.       image_path:   ‘/images/emoticons/’,
  9.       speed:        500,
  10.       icon:         ’smiley’
  11.     });
  12.     var options = $.extend(defaults, options);
  13.  
  14.     return this.each(function() {
  15.       var select = $(’select’, this);
  16.       var area = $(‘textarea’, this);
  17.       var icon = $("#" + defaults.icon, this);
  18.  
  19.       var emo =‘<div class="emoticon-box"><ul>’;
  20.       $(‘option’, select).each(function () {
  21.         var option    = $(this);
  22.         var emocode        = option.val();
  23.         var title    = option.text();
  24.         var link = $.fn.emoticate.emoticlick(title, emocode, defaults.image_path);
  25.  
  26.         emo += ‘<li>’
  27.             + link
  28.             + ‘</li>’;
  29.       }); //end option
  30.       emo += ‘</ul></div>’;
  31.  
  32.       select.remove(); //get rid of the select to make way for emotification
  33.       $("#" + defaults.replacediv, this).html(emo); //put the emotification HTML in the right div
  34.       $("#" + defaults.replacediv, this).hide(); //hide the emoticons
  35.      
  36.       var listdiv = $("#" + defaults.replacediv, this); //reset the var so it will work in the icon click.. this probably could be done better
  37.  
  38.       //bind the link for every a tag that is in the replaced div
  39.       $(‘a’, this).bind(‘click’, function() {
  40.         $.fn.emoticate.insertme(area.attr(‘id’), $(this).attr(‘id’));
  41.         return false;
  42.       }); //end bind
  43.  
  44.       //click the icon
  45.       $(icon, this).bind(‘click’, function (){
  46.         listdiv.show(defaults.speed);
  47.       });
  48.  
  49.       //function to click anywhere to hide the emoticons
  50.       $(document.body)click(function (){
  51.         listdiv.hide(defaults.speed);
  52.       });
  53.  
  54.  
  55.     }); //end select
  56.  
  57.   }; //end function
  58.  
  59.  
  60.   $.fn.emoticate.emoticlick = function(id,emocode, image_path){
  61.     return ‘<a href="#" id="’ + emocode +‘"><img src="’ + image_path + id + ‘"></a>’;
  62.   };
  63.  
  64.   $.fn.emoticate.insertme = function(areaId,text){
  65.     var txtarea = document.getElementById(areaId);
  66.     var scrollPos = txtarea.scrollTop;
  67.     var strPos = 0;
  68.     var br = ((txtarea.selectionStart || txtarea.selectionStart == ‘0′) ?
  69.     "ff" : (document.selection ? "ie" : false ) );
  70.       if (br == "ie") {
  71.       txtarea.focus(); var range = document.selection.createRange(); range.moveStart (‘character’, -txtarea.value.length);
  72.       strPos = range.text.length;
  73.     }
  74.     else if (br == "ff") strPos = txtarea.selectionStart;
  75.  
  76.     var front = (txtarea.value).substring(0,strPos);  
  77.     var back = (txtarea.value).substring(strPos,txtarea.value.length);
  78.     txtarea.value=front+text+back;
  79.     strPos = strPos + text.length;
  80.       if (br == "ie") {
  81.       txtarea.focus();
  82.       var range = document.selection.createRange();
  83.       range.moveStart (‘character’, -txtarea.value.length);
  84.       range.moveStart (‘character’, strPos);
  85.       range.moveEnd (‘character’, 0);
  86.       range.select();
  87.     }
  88.     else if (br == "ff") {
  89.       txtarea.selectionStart = strPos;
  90.       txtarea.selectionEnd = strPos;
  91.       txtarea.focus();
  92.     }
  93.     txtarea.scrollTop = scrollPos;
  94.   };
  95.  
  96. })(jQuery);
  97.  

Or you can download it here.

]]> http://www.wyliethomas.com/blog/2010/03/02/jquery-emoticon-selector-plugin/feed/ 1