Jugando con mi Blog: Indice x ventana



<script type="text/javascript">
// <![CDATA[


// ...............................................
// ... Paso Clave para lanzar todos los enlaces
// ... desde la Ventana Indice Remota Abierta
// ... a la Ventana Principal del Blog Abierta.
// ...............................................
// ... edit by tommy for "chatarras club"
// ...//chatarrasclub.blogspot.com/
// ...............................................
//
// Importante:
//
// El sistema funciona detectando desde que ventana padre se lanza
// la ventana remota hija y desde esta lanza los datos a la ventana
// padre que la abrio.
//
// Si mientras trabajamos con la ventana remota se cierra
// la ventana padre que es la principal del blog
// el indice desde la ventana remota dejara de funcionar
// hasta que volvamos a lanzar todo desde el propio blog.
//
// ...............................................


function remoteLinkIndex01Popup( urlPostBlog ) {


// ... debemos detectar si ventana padre del blog esta cerrada Y avisar Y cerrar ventana hija remota.
// ... PROBLEMS !!!
// ... en "Internet Explorer" OK detecta padre cerrada y avisa y cierra hija OK.
// ... en otros navegadores el sistema funciona bien Pero a veces No detecta No avisa No cierra.


if ( !window.opener || window.opener.closed ) {
   alert("Ventana Principal Blog Parece Estar Cerrada !!!\n\n... y No se puede Trabajar desde la Ventana Remota !!!\n\nSe debe cerrar la ventana remota y abrir el blog\n\n... para volver a lanzar todo desde alli.") ;
   window.self.close() ;
   return ;
   } else {
   // ... si todo va bien lanza links en ventana padre del blog.
   window.opener.location = urlPostBlog ;

   }

}

// ]]>
</script>




<!-- ***********************************************

     EL SIGUIENTE CODIGO FUE PUBLICADO POR
     //vagabundia.blogspot.com/

     ***********************************************

     ... edit by tommy for "chatarras club"
     ... //chatarrasclub.blogspot.com/

     SOLO SE HAN REALIZADO UNAS MINIMAS MODIFICACIONES
     DEL CODIGO ORIGINAL PARA LANZAR Y EJECUTAR
     EL INDICE EN MI VENTANA REMOTA.

     PRACTICAMENTE SOLO SE HAN CAMBIADO DOS LINEAS
     DEL CODIGO ORIGINAL Y SE HAN CREADO LAS FUNCIONES
     NECESARIAS PARA MI VENTANA REMOTA.

************************************************ -->



<!-- RESUMEN DE ENTRADAS CON PAGINACION -->



<style type='text/css'>


/* ... CSS ORIGINAL ... ANULADO PARA HACER MIS PRUEBAS ... */


/* ... CSS MODIFICADO EN PARTE ... PARA MI VENTANA REMOTA ... */



  /* es el rectángulo del DIV donde se mostrarán */

  #resultados {

     height: 1000px;   /* origen 1000 */

     width: 660px;     /* origen 660 me salen 3 columnas */

     text-align: center;

     }


  #loadingscript { /* es el texto de "cargando" */ }



  /* estas son las reglas de estilo para las entradas */

  .paginaposts { /* cada rectángulo */

    border: 1px solid #555;

    float: left;

    height: 35x;   /* origen 35 para salir 3 columnas */

    margin: 1px;   /* origen 1 */

    padding: 5px;

    width: 197px;  /* origen 197 para salir 3 columnas */


  }


  .paginaposts a { /* los enlaces */

    color: #DDD;

    display: block;

    font-size: 11px;   /* origen 11 para salir 3 columnas */

    text-decoration: none;

  }



  .paginaposts img { /* la imagen miniatura */

    float: left;

    height: 36px;    /* origen 36 para salir 3 columnas */

    width: 36px;     /* origen 36 para salir 3 columnas */

border: 0px;

  }


  .paginaposts h6 { /* el título de las entradas */

    float: right;

    height: 40px;    /* origen 45 para salir 3 columnas */

    margin: 0;

    width: 140px;    /* origen 145 para salir 3 columnas */

text-align: center;

  }



  .paginaposts:hover { /* un efecto hover */

    border: 1px solid #33F;
  }



  /* estas son las reglas de estilo para la paginación inferior */

  #paginacion { /* el rectángulo contenedor */
    color: #BBB;
    font-family: Lucida Grande;
    font-size: 24px;
    font-weight: bold;
    height: 35px;
    line-height: 28px;
    padding: 20px 0;
    text-align: center;
  }

  #paginacion span, #paginacion a { /* cada número, texto o enlace */
    border: 1px solid #444;
    color: #BBB;
    display: inline-block;
    font-family: Lucida Grande;
    font-size: 24px;
    font-weight: bold;
    margin: 0 2px;
    padding: 0 5px;

  }

  #paginacion span.actual { /* resaltamos la página actual */
    color: #FFF;
    padding: 0 5px;
  }

  #paginacion a:hover { /* efecto hover sobre los enlaces */
    color: #FFF;
  }

  #paginacion .antesdespues { border: none; }

  #paginacion .antesdespues:hover { }

  #paginacion span.deshabilitado { /* los enlaces deshabilitados */
    border: none;
    color: #666;
  }

  /* la salida de la cantidad total */

  #totales {text-align:center;}

</style>



<script type='text/javascript'>
// <![CDATA[

// estos son los datos que debemos establecer

var postporpagina = 60;   // la cantidad de entradas a mostrar por página ... origen a 60

// la url de nuestro blog Sin Barra / Final tal como el ejemplo.

// ... DEBES MODIFICAR Y PONER LA DIRECCION DE TU BLOG.
// ... DEBES MODIFICAR Y PONER LA DIRECCION DE TU BLOG.
// ... DEBES MODIFICAR Y PONER LA DIRECCION DE TU BLOG.

var urlsitio = "http://durabritte.blogspot.mx";

var minpaginas = 5;  // la cantidad mínima de páginas a mostrar ... origen a 5

var maxpaginas = 10; // la cantidad máxima de páginas a mostrar ... origen a 10

// la dirección de la imagen por defecto a ser utilizada

// ... DEBES MODIFICAR Y PONER LA DIRECCION DE TU GRAFICO POR DEFECTO.
// ... DEBES MODIFICAR Y PONER LA DIRECCION DE TU GRAFICO POR DEFECTO.
// ... DEBES MODIFICAR Y PONER LA DIRECCION DE TU GRAFICO POR DEFECTO.

var imgxdefecto = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMv8KBCGQRPThf1XTW5rEVJG-qRVULIz66Jv9Lv0D_MzeX7jdfrCrhRr58TdOm7PS0QOtqdVshRrbrtc_5dpN4jACItE5BBk0fihvMzl70EHR68Nn9VG1XF-cY4qwBybfN3MXupneBhWS/s0/ChatarraGrua04.jpg";


var firsttime = 0; // lo usamos para detectar la primera vez que se ejecuta
var paginaactual = 1; // contendrá el número de página donde estemos
var cantidadpaginas = 0; // contendrá el número total de páginas
var cantidadposts = 0; // contendrá el número total de entradas


// la función que interpreta los feeds y que siempre es más o menos la misma

function showpageposts(json) {

  var entry, posttitle, posturl, postimg;
  var salida = "";

  // la primera vez que se ejecuta la función, leemos la cantidad de entradas que hay y calculamos la cantidad de páginas

  if(cantidadpaginas==0) {
    cantidadposts = parseInt(json.feed.openSearch$totalResults.$t);
    cantidadpaginas = parseInt(cantidadposts / postporpagina) + 1;
  }

  // leemos los datos que luego mostraremos

  for (var i = 0; i < postporpagina; i++) {
    if (i == json.feed.entry.length) { break; } // si no hay más, salimos
    entry = json.feed.entry[i];

    // el título de las entradas

    posttitle = entry.title.$t;

    // buscamos la url de las entradas

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

    // buscamos la imagen de las entradas o usamos la que establecimos por defecto

    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = imgxdefecto;
    }

    // armamos el código HTML de salida de manera similar a lo que se veía en el post
    // //vagabundia.blogspot.com/2010/12/usar-json-para-mostrar-las-entradas-del.html

    salida += "<div class='paginaposts'>";

    // en ORIGINAL Vagabundia asi estaba bien ... es el link de imagen.
    // salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";

    // ...
    // ... MODIFICADO ... by tommy for "chatarras club" ...
    salida += '<a href="javascript:remoteLinkIndex01Popup(' + "'" + posturl + "'" + ')"><img src=' + "'" + postimg + "'" + '/></a>';

    // en ORIGINAL Vagabundia asi estaba bien ... es el link de texto.
    // salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";

    // ...
    // ... MODIFICADO ... by tommy for "chatarras club" ...
    salida += '<h6><a href="javascript:remoteLinkIndex01Popup(' + "'" + posturl + "'" + ')">' + posttitle + '</a></h6>';

    salida += "</div>";

  }



  // listo, ahora lo mostramos

  document.getElementById("resultados").innerHTML = salida;

  // y ejecutamos la función para paginar

  paginacion();

}



// esta es la función que muestra la paginación

function paginacion() {

  contadorP = 0;
  salida = "";

  // dependiendo de donde estamos, ponemos un enlace para retroceder o no

  if(paginaactual>1) {
    salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual-1) + ")'>anterior</a>";
  } else {
    salida += "<span class='deshabilitado'>anterior</span>";
  }

  // se calcula y se muestran los números de las primeras páginas, una sepación y las últimas páginas

  if (cantidadpaginas<(maxpaginas+1)) {
    for (contadorP = 1; contadorP <= cantidadpaginas; contadorP++){
      if (contadorP==paginaactual) {
        salida += "<span class='actual'>" + contadorP + "</span>";
      } else {
        salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
      }
    }
  } else if(cantidadpaginas>(maxpaginas-1)) {
    if(paginaactual<minpaginas) {
      for (contadorP=1; contadorP<(maxpaginas-2); contadorP++){
       if (contadorP == paginaactual) {
         salida += "<span class='actual'>" + contadorP + "</span>";
       } else {
         salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
       }
     }
     salida += " ... ";
     salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
     salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
    } else if(cantidadpaginas-(minpaginas-1)>paginaactual&&paginaactual>(minpaginas-1)) {
      salida += "<a href='javascript:incluirscript(1)'>1</a>";
      salida += "<a href='javascript:incluirscript(2)'>2</a>";
      salida += " ... ";
      for (contadorP=paginaactual-2; contadorP<=paginaactual+2; contadorP++) {
        if (contadorP==paginaactual) {
          salida += "<span class='actual'>" + contadorP + "</span>";
        } else {
          salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
        }
      }
      salida += " ... ";
      salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
      salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
    } else {
      salida += "<a href='javascript:incluirscript(1)'>1</a>";
      salida += "<a href='javascript:incluirscript(2)'>2</a>";
      salida += " ... ";
      for (contadorP=cantidadpaginas-(minpaginas+1); contadorP<=cantidadpaginas; contadorP++) {
        if (contadorP==paginaactual) {
          salida += "<span class='actual'>" + contadorP + "</span>";
        } else {
          salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
        }
      }
    }
  }


  // dependiendo de donde estamos, ponemos un enlace para avanzar o no

  if (paginaactual<contadorP-1) {
    salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual+1) + ")'>siguiente</a>";
  } else {
    salida += "<span class='deshabilitado'>siguiente</span>";
  }


  // mostramos el resultado

  document.getElementById("paginacion").innerHTML = salida;


  // y eventualmente, podemos mostrar la cantidad total

  var iniciopagina = (paginaactual * postporpagina) - (postporpagina - 1);
  var finalpagina = paginaactual * postporpagina;
  var totales = "Total de entradas publicadas: " + cantidadposts + " - Mostrando entradas " + iniciopagina + " a " + finalpagina;
  document.getElementById("totales").innerHTML = totales;

}


// esta es la función que escribe y ejecuta el script de manera dinámica

function incluirscript(pagina) {

  // salvo que sea la primera vez, antes, borramos el script

  if(firsttime==1) {removerscript();}

  // borramos todo y mostramos algún mensaje de carga

  document.getElementById("resultados").innerHTML = "<div id='loadingscript'>cargando ...</div>";
  document.getElementById("paginacion").innerHTML = "";
  document.getElementById("totales").innerHTML = "";

  // calculamos el valor a colocar en start-index

  var iniciopagina = (pagina * postporpagina) - (postporpagina - 1);

  // y armamos la url del feed

  var archivo = urlsitio + "/feeds/posts/default?start-index=" + iniciopagina;
  archivo += "&max-results=" + postporpagina;
  archivo += "&orderby=published&alt=json-in-script&callback=showpageposts";

  // cargamos y ejecutamos el script de manera dinámica

  var nuevo = document.createElement('script');
  nuevo.setAttribute('type', 'text/javascript');
  nuevo.setAttribute('src', archivo);
  nuevo.setAttribute('id', 'TEMPORAL');
  document.getElementsByTagName('head')[0].appendChild(nuevo);

  // establecemos los nuevos datos

  firsttime = 1;
  paginaactual = pagina;

}


// esta es la función que elimina un script previamente agregado utilizando su ID

function removerscript() {
  var el = document.getElementById("TEMPORAL");
  var padre = el.parentNode;
  padre.removeChild(el);
}

// ejecutamos la función por primera vez cuando se termina de cargar nuestro sitio

onload=function() { incluirscript(1); }

// ]]>
</script>



<!-- CODIGO HTML -->


<div style="text-align:center;">    <!-- ini todo centrado -->
<br/>
<b>The Index Of "durabritte" ~ Resumen de Entradas ~</b><br/>
<br/>

<!-- aquí se mostrarán los posts -->
<div id="resultados"></div>

<!-- elimino flotaciones -->
<div style="clear:both;"></div>
<br/>

<!-- aquí se mostrará la paginación -->
<div id="paginacion"></div>

<!-- aquí se mostrará el texto con los totales  -->
<div id="totales"></div>

<br/>
<b>... edit by http://durabritte.blogspot.mx/" ...</b><br/>
</div>   <!-- end todo centrado -->
<br/>
[ INDICE GENERAL DEL BLOG]
Jugando con mi Blog

Páginas

Indice x ventana

No hay comentarios :

Paginacion
