Emoticones en el nuevo sistema de comentarios

Si usamos los comentarios de nuevo estilo, otra vez vamos a tener que cambiar el script que agrega los emoticones ya que el viejo sistema, no funcionará (las viejas entradas: 1 | 2 | 3)

El problema surge porque Blogger añade los comentarios usando JavaScript así que ahora, debemos "esperar que sean escriots" y recién luego, analizar el texto y cambiar las imágenes.

Desplegamos los artilugios y buscamos el includable cuyo ID es threaded_comments y veremos estas líneas:

<div id='comment-holder'>
  <data:post.commentHtml/>
</div>

donde eso en color son los comentarios en si mismo; allí es donde interceptamos la página y agregamos la llamada al script:

<div id='comment-holder'>
  <data:post.commentHtml/>
  <script type='text/javascript'>NEWemoticonComentario();</script>
</div>

Ahora, deberíamos agregar el script antes de </head> y allí, pondré dos funciones, la primera, será la lista de los emoticones y es muy similar a lo que ya usábamos; la segunda es la que hará los cambios:

<script type='text/javascript'>
//<![CDATA[

// llega con el texto del comentario y lo devuelve modificado
function DRAWemo(cualTexto){
  cualTexto = cualTexto.replace(/:\)/g,'<img width="15" height="15" src="URL_imagen" />');
  // ....... sigo agregando la lista
  // y termino así:
  return cualTexto;
}

// busca los textos de los comentarios
function NEWemoticonComentario() {
  // vamos a cambiar aprte del contenido del DIV cuyo ID es comment-holder
  var  c = document.getElementById("comment-holder");
  if(c!=null) {
    // si existe, creamos una lista con todas las etiquetas BLOCKQUOTE que es donde estan los textos
    var listacoms = c.getElementsByTagName("blockquote");
    if(listacoms.length>0){
      // si hay comentario, lo leemos uno por uno
      for(var i=0; i<listacoms.length; ++i) {
        // leemos el contenido del comentario en formato HTML
        comlTexto = listacoms[i].innerHTML;
        // y lo cambiamos     
        listacoms[i].innerHTML = DRAWemo(comlTexto);
      }
    }
  }
}

//]]>
</script>

Si se usa jQuery, la segunda creo que podría simplificarse de este modo:

function NEWemoticonComentario() {
  $("blockquote.comment-content").each(function(index) {
    var nuevoTexto = DRAWemo($(this).html());
    $(this).html(nuevoTexto);
  });
}

Eso es todo y el ejemplo sigue estando en la misma entrada del blog de pruebas