2012-04-04T23:33:00+02:00

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. if(strx.indexOf('<')!=-1)
    6. {
    7. var s = strx.split('<'); 
    8. for(var i=0;i<s.length;i++) 
    9. if(s[i].indexOf('>')!=-1) s[i] = s[i].substring(s[i].indexOf('>')+1,s[i].length); 
    10. strx =  s.join(''); 
    11. }
    12. chop = (chop < strx.length-1) ? chop : strx.length-2; 
    13. while (strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
    14. if (strx.length>chop) strx = strx.substring(0,chop-1); 
    15. return strx+'...'; 
    16. }

    17. function montaSlideShow_bySammy(jsonObject)
    18. {
    19.   var entries=jsonObject.feed.entry;
    20.   var numRandom;
    21.   var postTitle,postContent,postURL,postImatge;
    22.   var htmlContent='';
    23.   var objPanes=[];
    24.   var bTrobats=false;
    25.   
    26.   // SlideShow Config
    27.   var numeroPosts=5;                     // Numero de post a mostrar
    28.   var lengthResum=150;                   // Longitud maxima del text
    29.   var idDIV='slideShowContainer_bySammy';  // Identificador on s'ha de possar els slideShow
    30.   var width=640;                        // Amplada en pixels
    31.   var height=300;                       // Alcada en pixels
    32.   var delayTime=10;                     // Temps d'espera en segons
    33.   var leftArrow='http://lh4.googleusercontent.com/-O3nf08K7HRc/T3SvAqG1kSI/AAAAAAAADLc/bLIA-xx1eng/s800/left_arrow.png'; // Fletxa esquerra
    34.   var rightArrow='http://lh5.googleusercontent.com/-oZgwvU6fglg/T3SvAOxgUOI/AAAAAAAADLU/lNL30kOBoXU/s800/right_arrow.png'; // Fletxa dereta
    35.   
    36.     for (var I=0; I < numeroPosts;I++)
    37.     {
    38.        numRandom=Math.floor((Math.random()*entries.length)+0);
    39.        postTitle=entries[numRandom].title.$t;
    40.        postURL='';
    41.        for (var k = 0; k < entries[numRandom].link.length; k++)
    42.           if (entries[numRandom].link[k].rel == 'alternate') { postURL = entries[numRandom].link[k].href; break;}
    43.        postContent='';
    44.        if ('content' in entries[numRandom]) postContent=entries[numRandom].content.$t;
    45.        else if ('summary' in entries[numRandom]) postContent=entries[numRandom].summary.$t;
    46.        postContent=removeHtmlTag_bySammy(postContent,lengthResum);
    47.        // Buscar la primera imatge del post
    48.        var s,a,b,c,d;
    49.        postImatge='';
    50.        s=entries[numRandom].content.$t;
    51.        a = s.indexOf('<img');    // Buscar tag IMG
    52.        b = s.indexOf('src="',a); // Buscar l'atribut SRC de la etiqueta trobada
    53.        c = s.indexOf('"',b+5);   // Buscar el final del atribut SRC
    54.        d = s.substr(b+5,c-b-5);  // Llegir valor del atribut SRC

    55.        if((a!=-1) && (b!=-1) && (c!=-1) && (d!='')) postImatge = d;
    56.        if (postImatge!='')
    57.        {
    58.          bTrobats=true;
    59.          htmlContent='<a href="'+postURL+'"><img src="'+postImatge+'" style="border-style:none; width:'+width+'px; height:'+height+'px"/></a>';
    60.          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">
    61. <a href="'+postURL+'" style="text-decoration:underline; color: #ffffff;">'+postTitle+'</h3>
    62. </a>'+postContent+'</span>';
    63.          
    64.          objPanes.push({className: 'pane', innerHTML: htmlContent});
    65.        }
    66.        entries.splice(numRandom,1); // Eliminar la entrada per no repetir
    67.        if (entries.length==0) break; // Finalitzar si no hi ha mes entrades.
    68.     }
    69.     if (bTrobats)
    70.        {
    71.          require(["dojox/widget/Rotator", "dojox/widget/rotator/Fade", "dojo/domReady!"], function(dom){
    72.                 dojo.style(idDIV,{width: width+'px',height: height+'px', padding:'0px 5px 5px 5px', overflow: 'hidden'});
    73.                 var divSlideShow=dojo.create('div',{innerHTML:'', style:'width: '+width+'px; height:'+height+'px; background-color: #000000'},dojo.byId(idDIV));
    74.                 var leftSlide=dojo.create('div',{innerHTML:''},dojo.byId(idDIV));
    75.                 dojo.style(leftSlide,
    76.                     {filter: 'alpha(opacity=0)',
    77.                      opacity:0.0, 
    78.                      cursor:'pointer',
    79.                      background: 'rgba(255,255,255,0.6) url('+leftArrow+') left center no-repeat',
    80.                      position: 'absolute',
    81.                      top:0,
    82.                      left:'5px',
    83.                      'z-index':666,
    84.                      width:'35px',
    85.                      height:height+'px'
    86.                     });

    87.                 var rightSlide=dojo.create('div',{innerHTML:''},dojo.byId(idDIV));
    88.                 dojo.style(rightSlide,
    89.                     {filter: 'alpha(opacity=0)',
    90.                      opacity:0.0, 
    91.                      cursor:'pointer',
    92.                      background: 'rgba(255,255,255,0.6) url('+rightArrow+') right center no-repeat',
    93.                      position: 'absolute',
    94.                      top:0,
    95.                      right:'5px',
    96.                      'z-index':666,
    97.                      width:'35px',
    98.                      height:height+'px'
    99.                     });
    100.                 var objRotator=new dojox.widget.Rotator(
    101.                   {
    102.                     transition: 'dojox.widget.rotator.fade',
    103.                     panes: objPanes
    104.                   }, divSlideShow);   
    105.                   console.log(objRotator);
    106.                  setInterval(function(){objRotator.next();},delayTime*1000);   
    107.                  require(["dojo/_base/connect"], function(connect){
    108.                        connect.connect(rightSlide, 'onmouseover', function(){dojo.style(rightSlide,{opacity: 1.0,filter: 'alpha(opacity=50)'});});
    109.                        connect.connect(rightSlide, 'onmouseout', function(){dojo.style(rightSlide,{opacity: 0.0,filter: 'alpha(opacity=00)'});});
    110.                        connect.connect(rightSlide, 'onclick', function(){objRotator.next();});
    111.                        
    112.                        connect.connect(leftSlide, 'onmouseover', function(){dojo.style(leftSlide,{opacity: 1.0,filter: 'alpha(opacity=50)'});});
    113.                        connect.connect(leftSlide, 'onmouseout', function(){dojo.style(leftSlide,{opacity: 0.0,filter: 'alpha(opacity=0)'});});
    114.                        connect.connect(leftSlide, 'onclick', function(){objRotator.prev();});
    115.                 });
    116.          });       
    117.        }
    118. }
    119. //]]>
    120. </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.

No hay comentarios:

Publicar un comentario

Sobre NekoFan

Dos cuartas partes de "Anime",una de Japón y otra de videojuegos,mezclado con programación y Dojo hacen la receta (im)perfecta de este blog.




Enlaces

Visitas