Comentarios desplegables en Blogger – Teleconferencias

Si a veces comprimimos las entradas (sumarios) y otras los resultados de una búsqueda deentradas por categoría ¿por qué no puede ser útil hacer lo mismo con los comentarios?

Como es habitual, esto no será de interés para todos, pero algunos blogs por su temática, reciben frecuentes comentarios de mucha extensión y el propietario del sitio puede tener la necesidad o el gusto, de hacerlos más homogéneos en cuanto a longitud. Para ellos va este truco.

El inconveniente es que supone un añadido más al código del sitio y, en contra de lo que pueda parecer, se tienen que leer y ejecutar más cosas y por tanto se demora algo más la carga.

Con este sistema lo que se consiguen son dos cosas. Por un lado que esa parte de la entrada (comentarios) tenga unaspecto más uniforme, como si estuviera en una tabla, ya que todos los comentarios ocuparán aproximadamente el mismo alto. Por otro,la longitud de la página se reducirá, lo que puede ser también una ventaja para losafortunados blogs que reciben multitud de participaciones de sus lectores.

Lo que haremos será tomar uno por uno todos los comentarios, crear una copia reducida con un máximo de caracteres determinado por nosotros y añadirle un enlace que esconderá este y mostrará el comentario original. El contenido original lo dejaremos tal cual añadiéndole también un enlace para hacer lo contrario.

Para que esto funcione como queremos y que no se vean ambos comentarios a la vez (original y copia reducida), sino alternativamente, usaremos la ya conocida función JavaScript paraplegar y desplegar cosas; aquella que usaba las clasesvisible einvisible. Si no la tenéis de otros trucos similares, la añadís ahora antes de/head:

style type='text/css'
.visible {display:block;}
.invisible {display:none;}
/style

script type='text/JavaScript'
function plegardesplegar(identificacion){
var elemento = document.getElementById(identificacion);
if(elemento.className == "visible"){
elemento.className = "invisible";
}
else{
elemento.className = "visible";
}
}
/script

El siguiente paso será meter en nuestra plantilla el script que hará toda la faena. Lo hemos metido todo dentro de una función, de manera que para usarla sólo será necesario llamarla desde dónde la necesitamos, pasándole los parámetros oportunos. En este caso, aprovechamos que todos los comentarios tienen unaID única que será la que utilizaremos.

Como antes, esto hay que insertarlo antes del/head:

style type='text/css'
.desplegarcomentarios{}
.desplegarcomentarios a {text-decoration: none;}
.desplegarcomentarios a:hover {letter-spacing:2px;text-decoration: none; font-weight: bold;}
/style

script type='text/javascript'
//![CDATA[
function crearSumarioComentario(cID){

var numcar =100;

var contenido = document.getElementById(cID);
var strx = contenido.innerHTML;
var original = strx;

if(strx.lengthnumcar) {
numcar = (numcar strx.length-1) ? numcar : strx.length-2;
while(strx.charAt(numcar-1)!=' ' && strx.indexOf(' ',numcar)!=-1) numcar++;
strx = strx.substring(0,numcar-1);

strx = 'div class="visible" id="' +cID+ 'uno"' + strx + '... (span class="desplegarcomentarios"a href="javascript:plegardesplegar("' +cID+ 'uno");javascript:plegardesplegar("' +cID+ 'dos");" alt="Ver comentario" title="Ver comentario"▼Leer más/a/span)/div';

strx = strx+ 'div class="invisible" id="'+cID+'dos"' +original+ 'span class="desplegarcomentarios"a href="javascript:plegardesplegar("' +cID+ 'uno");javascript:plegardesplegar("' +cID+ 'dos");" alt="Plegar comentario" title="Plegar comentario"◄◄/a/span/div';
}
contenido.innerHTML = strx;
}
//
/script

La primera parte simplemente es el estilo de los enlaces para plegar/desplegar y usamos en este caso la clasedesplegarcomentarios que se puede modificar al gusto.

La otra parte fácilmente configurable es el contenido de la variablenumcar (100 en el ejemplo), justo al comenzar la función del script, que indicará el número de caracteres máximos que admitiremos para no cortar el comentario.

Y para subir nota, explico un poco lo que hace todo ese código. La funcióncrearSumarioComentario recibirá un dato que será laID del comentario a tratar. Las primeras líneas asignan contenidos a las variables que vamos a necesitar:

numcar: la longitud máxima del comentario a partir de la cual lo cortaremos
contenido: obtiene el contenido íntregro del comentario mediante getElementById
strx: extrae ese contenido y lo guarda
original: como vamos a ir modificando strx, reservamos aquí el contenido original para utilizarlo más adelante

A continuación viene todo el meollo dentro de un condicional que discrimina los comentarios que son más largos de lo deseado, de los que son más cortos que nuestro límite. Estos últimos no entraran en el condicional y simplemente serán devueltos íntegros.

Dentro delif comenzamos con una rutina que recorta el texto (strx) hasta dejarlo en una cantidad de caracteres igual anumcar. Luego añadimos a esa cadena recortada algo de código HTML para incorporar la clase visible, unID igual al que tenía pero con el sufijo uno y un enlace con la llamada a la funciónplegardesplegar (la que comentamos al principio), que servirá para mostrar u ocultar cada uno de los comentarios.

Luego añadimos otro comentario con la misma estructura, pero esta vez con la claseinvisible y el contenido original.

Por último tomamos el nuevo contenido creado (o el original si saltamos la condición) y lo reubicamos en el mismo sitio del que lo extrajimos.

Se ha explicado brevemente al principio, pero con todo esto lo que hacemos es sustituir el comentario original por dos comentarios nuevos, uno recortado y otro completo. Ambos llevan respectivamente la clase visible e invisible, por lo que en primera instancia el primero se ve y el otro no. Los enlaces que llevan cada uno de ellos lo que harán será intercambiar esas clases por lo que el visible no se verá y a la inversa. El efecto será más o menos este:

Quiere la boca exhausta vid, kiwi, piña y fugaz jamón. Fabio...▼Leer más

Quiere la boca exhausta vid, kiwi, piña y fugaz jamón. Fabio me exige, sin tapujos, que añada cerveza al whisky. Jovencillo emponzoñado de whisky, ¡qué figurota exhibes! La cigüeña tocaba cada vez mejor el saxofón y el búho pedía kiwi y queso.◄◄

Ya esta todo preparado pero si guardamos veremos que no ocurre nada. Todavía nos falta ejecutar desde algún sitio la función y pasarle laID de todos los comentarios a la función. Para ello buscamos este trozo e insertamos lo que está en negrita, justo antes del cierre del párrafo:

p
div expr:id='data:comment.id'
data:comment.body/
/div
script type='text/javascript'crearSumarioComentario("data:comment.id/");/script
/p