DOJO y Blogger: PostRotator

¿Quién no ha querido poner una breve presentación secuencial de post al azar escritos en el Blog? Bueno supongo que al menos dos personas que yo sepa...
Para no tener que rascar más código, voy a pasar el implementado en mi blog, a ver si alguien se ahorra un poco de trabajo, además de unas cortas instrucciones sobre su implementación.

El principio es simple: quiero coger del blog una serie de post al azar y mostrarlos en la página principal, de forma secuencial y en forma de diapositivas. Para ello, utilizaré las librerías de JavaScript DOJO, que nos simplificarán la tarea a realizar.

Los pasos a realizar son los siguientes:

• IMPORTANTE: Salvar primero una copia de la plantilla completa, para poder recuperar la situación en caso de que algo no funcione correctamente.
• Acceder a Blogger, concretamente al panel de control del blog donde vamos a instalar la presentación,
• Seleccionar la opción Plantilla y dentro de ella el botón de Edición de HTML,
  
• Ignorar el mensaje de advertencia y seleccionar el botón de Continuar,
  
• Marcar la casilla Expandir plantillas de artilugios,
  
• Colocar el siguiente código antes del tag </head>:

  1. <script data-dojo-config="async: false" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js">
  2. <script type='text/javascript'>
  3. //<![CDATA[
  4. function removeHtmlTag_bySammy(strx,chop)
  5. { 
  6. if(strx.indexOf('<')!=-1)
  7. {
  8. var s = strx.split('<'); 
  9. for(var i=0;i<s.length;i++) 
  10. if(s[i].indexOf('>')!=-1) s[i] = s[i].substring(s[i].indexOf('>')+1,s[i].length); 
  11. strx =  s.join(''); 
  12. }
  13. chop = (chop < strx.length-1) ? chop : strx.length-2; 
  14. while (strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
  15. if (strx.length>chop) strx = strx.substring(0,chop-1); 
  16. return strx+'...'; 
  17. }
  18. 
      
  19. function montaSlideShow_bySammy(jsonObject)
  20. {
  21.   var entries=jsonObject.feed.entry;
  22.   var numRandom;
  23.   var postTitle,postContent,postURL,postImatge;
  24.   var htmlContent='';
  25.   var objPanes=[];
  26.   var bTrobats=false;
  27.   
  28.   // SlideShow Config
  29.   var numeroPosts=5;                     // Numero de post a mostrar
  30.   var lengthResum=150;                   // Longitud maxima del text
  31.   var idDIV='slideShowContainer_bySammy';  // Identificador on s'ha de possar els slideShow
  32.   var width=640;                        // Amplada en pixels
  33.   var height=300;                       // Alcada en pixels
  34.   var delayTime=10;                     // Temps d'espera en segons
  35.   var leftArrow='http://lh4.googleusercontent.com/-O3nf08K7HRc/T3SvAqG1kSI/AAAAAAAADLc/bLIA-xx1eng/s800/left_arrow.png'; // Fletxa esquerra
  36.   var rightArrow='http://lh5.googleusercontent.com/-oZgwvU6fglg/T3SvAOxgUOI/AAAAAAAADLU/lNL30kOBoXU/s800/right_arrow.png'; // Fletxa dereta
  37.   
  38.     for (var I=0; I < numeroPosts;I++)
  39.     {
  40.        numRandom=Math.floor((Math.random()*entries.length)+0);
  41.        postTitle=entries[numRandom].title.$t;
  42.        postURL='';
  43.        for (var k = 0; k < entries[numRandom].link.length; k++)
  44.           if (entries[numRandom].link[k].rel == 'alternate') { postURL = entries[numRandom].link[k].href; break;}
  45.        postContent='';
  46.        if ('content' in entries[numRandom]) postContent=entries[numRandom].content.$t;
  47.        else if ('summary' in entries[numRandom]) postContent=entries[numRandom].summary.$t;
  48.        postContent=removeHtmlTag_bySammy(postContent,lengthResum);
  49.        // Buscar la primera imatge del post
  50.        var s,a,b,c,d;
  51.        postImatge='';
  52.        s=entries[numRandom].content.$t;
  53.        a = s.indexOf('<img');    // Buscar tag IMG
  54.        b = s.indexOf('src="',a); // Buscar l'atribut SRC de la etiqueta trobada
  55.        c = s.indexOf('"',b+5);   // Buscar el final del atribut SRC
  56.        d = s.substr(b+5,c-b-5);  // Llegir valor del atribut SRC
  57. 
      
  58.        if((a!=-1) && (b!=-1) && (c!=-1) && (d!='')) postImatge = d;
  59.        if (postImatge!='')
  60.        {
  61.          bTrobats=true;
  62.          htmlContent='<a href="'+postURL+'"><img src="'+postImatge+'" style="border-style:none; width:'+width+'px; height:'+height+'px"/></a>';
  63.          htmlContent+='<span style="filter: alpha(opacity=70); padding:5px 5px 5px 5px; background:rgba(0,0,0,0.6); *background:rgb(0,0,0); width:98%; color: #ffffff; position:absolute; left:0%; bottom:10px;"><h3 style="text-align:center">
  64. <a href="'+postURL+'" style="text-decoration:underline; color: #ffffff;">'+postTitle+'</h3>
  65. </a>'+postContent+'</span>';
  66.          
  67.          objPanes.push({className: 'pane', innerHTML: htmlContent});
  68.        }
  69.        entries.splice(numRandom,1); // Eliminar la entrada per no repetir
  70.        if (entries.length==0) break; // Finalitzar si no hi ha mes entrades.
  71.     }
  72.     if (bTrobats)
  73.        {
  74.          require(["dojox/widget/Rotator", "dojox/widget/rotator/Fade", "dojo/domReady!"], function(dom){
  75.                 dojo.style(idDIV,{width: width+'px',height: height+'px', padding:'0px 5px 5px 5px', overflow: 'hidden'});
  76.                 var divSlideShow=dojo.create('div',{innerHTML:'', style:'width: '+width+'px; height:'+height+'px; background-color: #000000'},dojo.byId(idDIV));
  77.                 var leftSlide=dojo.create('div',{innerHTML:''},dojo.byId(idDIV));
  78.                 dojo.style(leftSlide,
  79.                     {filter: 'alpha(opacity=0)',
  80.                      opacity:0.0, 
  81.                      cursor:'pointer',
  82.                      background: 'rgba(255,255,255,0.6) url('+leftArrow+') left center no-repeat',
  83.                      position: 'absolute',
  84.                      top:0,
  85.                      left:'5px',
  86.                      'z-index':666,
  87.                      width:'35px',
  88.                      height:height+'px'
  89.                     });
  90. 
      
  91.                 var rightSlide=dojo.create('div',{innerHTML:''},dojo.byId(idDIV));
  92.                 dojo.style(rightSlide,
  93.                     {filter: 'alpha(opacity=0)',
  94.                      opacity:0.0, 
  95.                      cursor:'pointer',
  96.                      background: 'rgba(255,255,255,0.6) url('+rightArrow+') right center no-repeat',
  97.                      position: 'absolute',
  98.                      top:0,
  99.                      right:'5px',
  100.                      'z-index':666,
  101.                      width:'35px',
  102.                      height:height+'px'
  103.                     });
  104.                 var objRotator=new dojox.widget.Rotator(
  105.                   {
  106.                     transition: 'dojox.widget.rotator.fade',
  107.                     panes: objPanes
  108.                   }, divSlideShow);   
  109.                   console.log(objRotator);
  110.                  setInterval(function(){objRotator.next();},delayTime*1000);   
  111.                  require(["dojo/_base/connect"], function(connect){
  112.                        connect.connect(rightSlide, 'onmouseover', function(){dojo.style(rightSlide,{opacity: 1.0,filter: 'alpha(opacity=50)'});});
  113.                        connect.connect(rightSlide, 'onmouseout', function(){dojo.style(rightSlide,{opacity: 0.0,filter: 'alpha(opacity=00)'});});
  114.                        connect.connect(rightSlide, 'onclick', function(){objRotator.next();});
  115.                        
  116.                        connect.connect(leftSlide, 'onmouseover', function(){dojo.style(leftSlide,{opacity: 1.0,filter: 'alpha(opacity=50)'});});
  117.                        connect.connect(leftSlide, 'onmouseout', function(){dojo.style(leftSlide,{opacity: 0.0,filter: 'alpha(opacity=0)'});});
  118.                        connect.connect(leftSlide, 'onclick', function(){objRotator.prev();});
  119.                 });
  120.          });       
  121.        }
  122. }
  123. //]]>
  124. </script>

• Localizar en el código HTML del blog la zona donde colocar la presentación, debería de ser algo así como:

  <b:includable id='main' var='top'>
     <b:if cond='data:mobile == &quot;false&quot;'>
     <!-- posts -->
     <div class='blog-posts hfeed'>

• Colocar justo debajo el siguiente código:

  <b:if cond='data:blog.pageType == "index"'>
      <!-- Index page, inserir la sequencia de post. -->
      <div id='slideShowContainer_bySammy'/>
      <script src='http://sammy1965.blogspot.com/feeds/posts/default?start-     index=1&alt=json-in-script&callback=montaSlideShow_bySammy' type='text/javascript'/>
  </b:if>

• Guardar la plantilla y finalizamos.

He marcado las partes a modificar para personalizar el control, evidentemente hay una que debe cambiarse, la URL del blog, el resto es opcional.
Si no se ha cometido ningún error, el funcionamiento debería de ser el esperado.

Quedo abierto a cualquier tipo de comentario, sugerencia o queja.