Navegar etiquetas debajo de las entradas

Si entendí bien la pregunta de Josema, su idea es que, cuando se haga click en el enlace de una etiqueta, las entradas de esa etiqueta se muestren así como normalmente se muestran las entradas relacionadas debajo de cada post,es decir, una imagen y un resumen de la misma.

Hace mucho tiempo había puesto algo parecido que requería de la librería Prototype y que terminé quitando porque ... no me acuerdo por qué pero seguro que era una buena razón o no.

Ahora repito la experiencia y veremos qué pasa pero, sin librerías extras ya que luego de un par de años y doscientos mil quinientos treinta y dos errores, más o menos he logrado comprender como funciona esto de Json que es, claro, lo que debe usarse en cualquiera de estos casos porque no hay otra manera de filtrar y acceder a los datos de Blogger que no sea leyendo los feeds.

Lo que cuento es lo que puede verse en la parte inferior de las entradas individuales de este blog; allí, se ven las etiquetas que tiene la entrada (salvo cuando me olvido de ponerlas) y debajo, las entradas relacionadas que también se leen con Json y muestran cuatro entradas tomadas al azar. Los enlaces de esas etiquetas, abren las páginas por defecto que crea Blogger que son de tipo:

http://miblog.blogspot.com/search/label/NOMBRE_etiqueta

La idea es reemplazar esos enlaces para que, en lugar de abrir una página, se puedan ver sin salirse de la página y navegar por ellas, avanzando o retrocediendo por todas las entradas que existan con esa etiqueta, sin importar si son veinte o cientos ya que intentaremos no colapsar el sitio, cargando los scripts uno por uno y borrándolos de la memoria una vez que ya no se usan.

El criterio básico es utilizar el mismo esquema que en esta otra entrada y como no puedo pensar en abstracto y no existe un esquema idéntico en todas las plantillas, me limito a mostrar qué hice y las variaciones deberán ser investigadas ya que son casi infinitas.

Primero, expando la plantilla y busco el lugar donde tengo agregados los posts relacionados y allí, haré dos cosas, indicaré la altura del DIV que los contiene y debajo, agregaré una serie de etiquetas con IDs específicos que son en aquellas donde el script escribirá los datos:

<div class='post-footer-line post-footer-line-4'>
  <div id='postsrelacionados' style='height:190px;'>
    <script type='text/javascript'>mostrarrelacionados();</script>
  </div>
  <div style='clear:both;'/>
</div>

<div class='post-footer-line post-footer-line-5'>
  <div id='etiquetasbajopost' style='height:0px;'>
    <div id='navetiquetas'/>
    <div id='navetiquetassel'/>
    <div id='navetiquetasfooter'/>
  </div>
</div>

Si guardo, todo queda igual que antes, los posts relacionados no cambian y debajo hay etiquetas sin contenido que tienen altura cero justamente para ocultarlas ya que intentaré permutar entre ellos y el nuevo sistema, ocultando uno cuando se muestra el otro y viceversa.

Busco ahora el LOOP donde Blogger escribe las etiquetas y por las dudas, condiciono los enlaces porque sólo quiero que esto funcione en las páginas individuales:

<b:loop values='data:post.labels' var='label'>
  .......
  <b:if cond='data:blog.pageType == "item"'>
    <a expr:onclick='&quot;setnavetiquetas(\&quot;&quot; + data:label.name + &quot;\&quot;);return false;&quot;' href='javascript:void(0);' rel='tag'><data:label.name/></a>
  <b:else/>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  </b:if>
  .......
</b:loop>

Y ahora, el script que va antes de </head> que también podemos condicionar y cuyo contenido puede verse en este archivo de texto

<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>
//<![CDATA[
var laetiqueta; // es la etiqueta que se mostrará
var navetiquetasflagfirst = 0; // al inicio es cero
var labelsporpagina = 4; // definir cuántas entradas queremos ver
var labelanterior, labelsiguiente;

// esta es la función genérica que elimina las etiquetas y crea el resumen
// si ya la o usamos alguna similar no hace falta repetirla
function eliminartags(cual,longitud){
  var resumen = cual.split("<");
  for(var i=0;i<resumen.length;i++){
    if(resumen[i].indexOf(">")!=-1){
      resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length);
    }
  }
  resumen =  resumen.join("");
  resumen = resumen.substring(0,longitud-1);
  return resumen;
}

// inicializamos la etiqueta a mostrar porque un post puede tener varias
function setnavetiquetas(cual) {
  navetiquetasflagfirst = 0;
  laetiqueta = cual;
  navetiquetas(0);
  return false;
}

// es la función muestra las etiquetas y nos permite navegar por ellas
function navetiquetas(direccion){
  var p, parametros;
  if(direccion==-1) {
    // si navegamos hacia atrás
    p = labelanterior.indexOf("?");
    parametros = labelanterior.substring(p);
  } else if (direccion==1) {
    // si navegamos hacia adelante
    p = labelsiguiente.indexOf("?");
    parametros = labelsiguiente.substring(p);
  } else {
    // si es la primera vez que se ejecuta ocultamos los posts relacionados
    document.getElementById("postsrelacionados").style.height = "0px"; // ocultar
    // y mostramos este sistema
    document.getElementById("etiquetasbajopost").style.height = "270px"; // la altura
    // los parámetros para leer Json
    parametros = "?start-index=1&max-results=" + labelsporpagina + "&orderby=published&alt=json-in-script"
  }
  parametros += "&callback=shownavetiquetas";
  incluirscriptlabels(parametros);
}

// esta es la funcion que carga el script de manera dinámica
function incluirscriptlabels(parametros) {
  // si no es la primera vez, borramos el script anterior
  if(navetiquetasflagfirst==1) {removerscriptlabels();}
  // borramos todo y ponemos un texto o una imagen de carga
  document.getElementById("navetiquetas").innerHTML = "<div id='navetiquetasloading'></div>";
  document.getElementById("navetiquetassel").innerHTML = "";
  // este es el archivo con los feeds
  var archivofeeds = "/feeds/posts/default/-/" + laetiqueta + parametros;
  // lo cargamos y ejecutamos
  var nuevo = document.createElement('script');
  nuevo.setAttribute('type', 'text/javascript');
  nuevo.setAttribute('src', archivofeeds);
  nuevo.setAttribute('id', 'NAVLABELTEMPORAL');
  document.getElementsByTagName('head')[0].appendChild(nuevo);
  navetiquetasflagfirst = 1;
}

// esta es la función que remueve el script cargado previamente
function removerscriptlabels() {
  var el = document.getElementById("NAVLABELTEMPORAL");
  var padre = el.parentNode;
  padre.removeChild(el);
}

// esta es la función que cierra este sector y restaura los posts relacionados
function cerrarnavetiquetas() {
    document.getElementById("etiquetasbajopost").style.height = "0px"; // ocultar
    document.getElementById("postsrelacionados").style.height = "190px"; // la altura deende del diseño
}

// esta es la misma función de siempre que nos permite leer el feed
function shownavetiquetas(json) {
  var entry, posttitle, posturl, postimg, postcontent;
  var salida = "";
  labelanterior = "";
  labelsiguiente = "";

  // vamos a buscar las direcciones para navegar la lista
  for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
      // esta es la página anterior
      labelanterior = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
      // esta es la página siguinte
      labelsiguiente = json.feed.link[k].href;
    }
  }

  // leemos tantas entradas como definimos
  for (var i = 0; i < labelsporpagina; i++) {

    // si no hay más, terminamos el bucle
    if (i == json.feed.entry.length) { break; }

    entry = json.feed.entry[i];

    // este es título de cada entrada
    posttitle = entry.title.$t;

    // buscamos la URL de la entrada
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

    // buscamos el contendio de la entrada y lo guardamos
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    } else {
      postcontent = "";
    }

    // buscamos la imagen o usamos una imagen por defecto
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = "URL_imagen_por_defecto"; // colocar dirección de la imagen
    }

    // terminada la lectura, vamos creando el código HTML
    // que en este caso tienen la misma clase CSS que los posts relacionados
    salida += "<div class='relsposts'>";
    salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
    salida += "<p>" + eliminartags(postcontent,75) + " ...</p>";
    salida += "</div>";
  }
  document.getElementById("navetiquetas").innerHTML = salida;

  // creo el HTML de la barra de navegación inferior
  salida = "<a href='javascript:cerrarnavetiquetas()' class='close'></a>"
  if(labelanterior) {
    salida += "<a href='javascript:navetiquetas(-1);' class='anterior'></a>";
  } else {
    salida += "<span class='deshabilitado anterior'></span>";
  }
  if(labelsiguiente) {
    salida += "<a href='javascript:navetiquetas(1);' class='siguiente'></a>";
  } else {
    salida += "<span class='deshabilitado siguiente'></span>";
  }
  salida += "<a href='javascript:navetiquetas(0);' class='inicio'>inicio</a>";
  document.getElementById("navetiquetassel").innerHTML = salida;

  // creo una línea más para dar la opcion de usar las páginas "normales"
  // y agrego un enlace para suscripciones 
  salida = "<a href='/search/label/" + laetiqueta + "' target='_blank'>ver p&aacute;gina de etiquetas</a>
  salida += "<a style='float: right;' href='/feeds/posts/summary/-/" + laetiqueta + "' target='_blank'>Suscribirse a " + laetiqueta + "</a>";
  document.getElementById("navetiquetasfooter").innerHTML = salida;

}
//]]>
</script>
</b:if>

Como siempre, algo de estilo a gusto de cada uno que también ponemos antes de </head>:

<style>
  /* el div contenedor */
  #etiquetasbajopost {
    height:0px;
    overflow:hidden;
  }
  /* el div con las entradas */
  #navetiquetas {
    height: 190px; /* la altura dependerá de los detalles personales */
    width: 100%;
  }
  /* cada una de las entradas */
  .relsposts {
    float: left;
    height: 180px;
    margin: 0 5px;
    overflow: hidden;
    padding: 5px;
    text-align: center;
    width: 130px;
  }
  .relsposts:hover {  /* si se quiere algún efecto */ }
  .relsposts a {
    color: #EEE;
    display: inline;
    font-family: Helvetica;
    font-size: 11px;
    line-height: 1;
  }
  .relsposts img {
    height: 72px;
    padding: 5px;
    width: 72px;
  }
  .relsposts h6 {
    display: table-cell;
    height: 5em;
    margin: 5px 0 0;
    overflow: hidden;
    padding-bottom: 2px;
    vertical-align: middle;
    width: 130px;
  }
  .relsposts p {
    color: #AAA;
    font-size: 10px;
    height: 4em;
    line-height: 1.2;
    margin: 5px 0 0;
    overflow: hidden;
    padding: 5px 0;
    text-align: left;
  }

  /* la navegación inferior */
  #navetiquetassel {
    height: 24px;
    line-height: 24px;
    margin: 20px auto 0;
    padding: 1px 10px;
    text-align: center;
    width: 500px;
  }
  /* las medidas dependerán de las imágenes */
  #navetiquetassel .anterior {
    background: transparent url(IMAGEN_ATRAS) no-repeat right 50%;
    float: left;
    height: 24px;
    width: 17px;
  }
  #navetiquetassel .siguiente {
    background: transparent url(IMAGEN_ADELANTE) no-repeat left 50%;
    float: right;
    height: 24px;
     width: 17px;
  }
  #navetiquetassel .close {
    background: transparent url(IMAGEN_CERRAR) no-repeat scroll left 4px;
    float: right;
    height: 24px;
    margin-left: 100px;
    width: 17px;
  }
  #navetiquetassel a { opacity: 0.8; filter:alpha(opacity=80); }
  #navetiquetassel a:hover { opacity:1;filter:alpha(opacity=100); }
  #navetiquetassel .deshabilitado { opacity:.3;filter:alpha(opacity=30); }

  /* la linea inferior */
  #navetiquetasfooter {
    height: 36px;
    line-height: 36px;
    margin: 0 auto;
    width: 500px;
  }
  #navetiquetasfooter a { /* propiedades de los textos */ }
  #navetiquetasfooter a:hover { /* si se quiere algún enlace */ }
  #navetiquetasfooter a.enlacefeed { float: right; }

  /* una imagen de carga temporal */
  #navetiquetasloading {
    background: transparent url(URL_IMAGEN) no-repeat 50% 50%;
    height: 190px;
    width: 100%;
  }
</style>