martes, 15 de enero de 2013

Blogger: script para crear tabla de contenidos a partir de los posts

El otro día buscando una manera de crear una tabla de contenido a partir de los posts de areaTIC y agrupados según las etiquetas de cada uno llegué a este interesante artículo en Ciudadblogger. Se acercaba bastante a lo que quería hacer pero lo tuve que adaptar ligeramente (podéis ver el resultado en la pestaña ARCHIVO de este blog):

  • Muestro la fecha del post delante de su título, así dentro de cada grupo (que corresponde a una etiqueta) los tengo ordenados cronológicamente ya que en el caso de areaTIC tiene más sentido que alfabéticamente.

  • Corrijo un problema que había con la ordenación de los grupos (etiquetas) ya que si había etiquetas en mayúsculas y minúsculas siempre salían primero las mayúsculas y se perdía la ordenación alfabética.

  • Como nuevos marco los 3 últimos posts en lugar de los 10 que tenía el código original... 10 posts se puede ir 1/2/3/... meses atrás, eso según como ya no es nuevo... ¿no? En mi caso no lo era, podéis modificarlo según lo que necesitéis

  • Ajusto el estilo del "Nuevo" y lo coloco al inicio de línea del post, delante de la fecha, se localizan más fácilmente las novedades.

  • Aumento la separación entre los grupos (etiquetas) para que se visualicen mejor las entradas y el grupo al que pertenecen.

A continuación os pego el código resultante y que se está utilizando en areaTIC:
<script>
//<![CDATA[
var postTitle=new Array();
var postUrl=new Array();
var postMp3=new Array();
var postDate=new Array();
var postLabels=new Array();
var postBaru=new Array();
var sortBy="titleasc";
var tocLoaded=false;
var numChars=250;
var postFilter=""
var numberfeed=0;

function loadtoc(a){
  function b(){
    if("entry" in a.feed){
      var d=a.feed.entry.length;
      numberfeed=d;
      ii=0;
      for(var h=0;h<d;h++){
        var n=a.feed.entry[h];
        var e=n.title.$t;
        var m=n.published.$t.substring(0,10);
        var j;
        for(var g=0;g<n.link.length;g++){
          if(n.link[g].rel=="alternate"){
            j=n.link[g].href;
            break
          }
        }
        var o="";
        for(var g=0;g<n.link.length;g++){
          if(n.link[g].rel=="enclosure"){
            o=n.link[g].href;break
          }
        }
        var c="";
        if("category" in n){
          for(var g=0;g<n.category.length;g++){
            c=n.category[g].term;
            var f=c.lastIndexOf(";");
            if(f!=-1){
              c=c.substring(0,f)
            }
            postLabels[ii]=c;
            postTitle[ii]='['+m+'] ' + e;
            postDate[ii]=m;
            postUrl[ii]=j;
            postMp3[ii]=o;
            // Marcamos como nuevos los 3 últimos posts
            if(h<3){
              postBaru[ii]=true  
            }else{
              postBaru[ii]=false
            }
            ii=ii+1
          }
        }
      }
    }
  }
  b();
  sortBy="titleasc";
  sortPosts(sortBy);
  sortlabel();
  tocLoaded=true;
  displayToc2();
  document.write('')
}

function filterPosts(a){
  scroll(0,0);
  postFilter=a; 
  displayToc(postFilter)
}

function allPosts(){
  sortlabel();
  postFilter="";
  displayToc(postFilter)
}

function sortPosts(d){
  function c(e,g){ 
    var f=postTitle[e];
    postTitle[e]=postTitle[g];
    postTitle[g]=f;
    var f=postDate[e];
    postDate[e]=postDate[g];
    postDate[g]=f;
    var f=postUrl[e];
    postUrl[e]=postUrl[g];
    postUrl[g]=f;
    var f=postLabels[e];
    postLabels[e]=postLabels[g];
    postLabels[g]=f;
    var f=postMp3[e];
    postMp3[e]=postMp3[g];
    postMp3[g]=f;
    var f=postBaru[e];
    postBaru[e]=postBaru[g];
    postBaru[g]=f
  }
  for(var b=0;b<postTitle.length-1;b++){
    for(var a=b+1;a<postTitle.length;a++){
      if(d=="titleasc"){
        if(postTitle[b].toUpperCase()>postTitle[a].toUpperCase()){
          c(b,a)
        }
      }
      if(d=="titledesc"){
        if(postTitle[b].toUpperCase()<postTitle[a].toUpperCase()){
          c(b,a)
        }
      }
      if(d=="dateoldest"){
        if(postDate[b]>postDate[a]){
          c(b,a)
        }
      }
      if(d=="datenewest"){
        if(postDate[b]<postDate[a]){
          c(b,a)
        }
      }
      if(d=="orderlabel"){
        if(postLabels[b].toUpperCase()>postLabels[a].toUpperCase()){
          c(b,a)
        }
      }
    }
  }
}

function sortlabel(){
  sortBy="orderlabel";
  sortPosts(sortBy);
  var a=0;
  var b=0;
  while(b<postTitle.length){
    temp1=postLabels[b];
    firsti=a;
    do{
      a=a+1;
    }
    while(postLabels[a]==temp1);
    b=a;
    sortPosts2(firsti,a);
    if(b>postTitle.length){
      break
    }
  }
}

function sortPosts2(d,c){
  function e(f,h){
    var g=postTitle[f];
    postTitle[f]=postTitle[h];
    postTitle[h]=g;
    var g=postDate[f];
    postDate[f]=postDate[h];
    postDate[h]=g;
    var g=postUrl[f];
    postUrl[f]=postUrl[h];
    postUrl[h]=g;
    var g=postLabels[f];
    postLabels[f]=postLabels[h];
    postLabels[h]=g;
    var g=postMp3[f];
    postMp3[f]=postMp3[h];
    postMp3[h]=g;
    var g=postBaru[f];
    postBaru[f]=postBaru[h];
    postBaru[h]=g
  }
  for(var b=d;b<c-1;b++){
    for(var a=b+1;a<c;a++){
      if(postTitle[b].toUpperCase()>postTitle[a].toUpperCase()){
        e(b,a)
      }
    }
  }
}

function displayToc(a){
  var l=0;
  var h="";
  var e="Judul Artikel";
  var m="Klik untuk sortir berdasarkan judul";
  var d="Tanggal";
  var k="Klik untuk Sortir bedasarkan tanggal";
  var c="Kategori";
  var j="";
  if(sortBy=="titleasc"){
    m+=" (descending)";
    k+=" (newest first)"
  }
  if(sortBy=="titledesc"){
    m+=" (ascending)";
    k+=" (newest first)"
  }
  if(sortBy=="dateoldest"){
    m+=" (ascending)";
    k+=" (newest first)"
  }
  if(sortBy=="datenewest"){
    m+=" (ascending)";
    k+=" (oldest first)"
  }
  if(postFilter!=""){
    j="Klik untuk menampilkan semua"
  }
  h+="<table>";
  h+="<tr>";
  h+='<td class="toc-header-col1">';
  h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";
  h+="</td>";
  h+='<td class="toc-header-col2">';
  h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";
  h+="</td>";
  h+='<td class="toc-header-col3">';
  h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";
  h+="</td>";h+='<td class="toc-header-col4">';
  h+="Download MP3";
  h+="</td>";
  h+="</tr>";
  for(var g=0;g<postTitle.length;g++){
    if(a==""){
      h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+
         postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+
         '</td><td class="toc-entry-col3">'+postLabels[g]+
         '</td><td class="toc-entry-col4"><a href="'+postMp3[g]+
         '">Download</a></td></tr>';
      l++
    }else{
      z=postLabels[g].lastIndexOf(a);
      if(z!=-1){
        h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+
           '</a></td><td class="toc-entry-col2">'+postDate[g]+
           '</td><td class="toc-entry-col3">'+postLabels[g]+
           '</td><td class="toc-entry-col4"><a href="'+postMp3[g]+
           '">Download</a></td></tr>';
        l++
      }
    }
  }
  h+="</table>";
  if(l==postTitle.length){
    var f='<span class="toc-note">Menampilkan Semua '+
          postTitle.length+" Artikel<br/></span>"
  }else{
    var f='<span class="toc-note">Menampilkan '+l+
          " artikel dengan kategori '";
    f+=postFilter+"' dari "+postTitle.length+" Total Artikel<br/></span>"
  }
  var b=document.getElementById("toc");
  b.innerHTML=f+h
}

function displayToc2(){
  var a=0;
  var b=0;
  while(b<postTitle.length){
    temp1=postLabels[b];
    document.write("<p/>");
    document.write("<br/>");
    document.write('<p><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");
    firsti=a;
    do{
      document.write("<li>");
      if(postBaru[a]==true){
        document.write('<strong><span style="color:red">[Nuevo] </span></strong>')
      }
      document.write('<a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");
      document.write("</li>");
      a=a+1
    }
    while(postLabels[a]==temp1);
    b=a;
    document.write("</ol>");
    sortPosts2(firsti,a);
    if(b>postTitle.length){
      break
    }
  }
}

function toggleTitleSort(){
  if(sortBy=="titleasc"){
    sortBy="titledesc"
  }else{
    sortBy="titleasc"
  }
  sortPosts(sortBy);
  displayToc(postFilter)
}

function toggleDateSort(){
  if(sortBy=="datenewest"){
    sortBy="dateoldest"
  }else{
    sortBy="datenewest"
  }
  sortPosts(sortBy);
  displayToc(postFilter)
}

function showToc(){
  if(tocLoaded){
    displayToc(postFilter);
    var a=document.getElementById("toclink")
  }else{
    alert("Just wait... TOC is loading")
  }
}

function hideToc(){
  var a=document.getElementById("toc");
  a.innerHTML="";
  var b=document.getElementById("toclink");
  b.innerHTML='<a href="#" onclick="scroll(0,0); showToc();Effect.toggle(\'toc-result\',\'blind\');">?? Menampilkan Daftar Isi</a><img src="http://radiorodja.googlepages.com/new_1.gif"/>'
}

function looptemp2(){
  for(var a=0;a<numberfeed;a++){
    document.write("<br>");
    document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Download mp3 : <a href="'+postMp3[a]+'">'+postTitle[a]+"</a><br>");
    document.write("<br>")
  }
};
//]]>
</script>
<script src="http://www.areatic.net/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Entiendo que con la nueva sección ARCHIVO añadida a areaTIC se hace más fácil acceder a los contenidos que realmente interesan al lector y prescindir de los que no son de su interés. Bueno, hasta aquí el artículo de hoy, aprovecho una mejora en areaTIC para hacérosla llegar y que la podáis incorporar en vuestros blogs... espero que os haya sido interesante. Dentro de areaTIC puedes encontrar otros artículos, no dudes en consultar nuestro archivo; también puedes seguirnos por RSS o las principales redes sociales (twitter, facebook, linkedin...)


2 comentarios:

La Banda Ciudadana 27 MHz dijo...

Buenas tardes. Un post excelente para mi, gracias.

¿Sería posible ordenar las entradas, dentro de cada etiqueta, de mas nueva a mas antigua? Ahora salen ordenadas de mas antigua a mas nueva.

Muchas gracias.

Vicente Espinoza dijo...

Gracias muy útil :)

Publicar un comentario