domingo, 16 de diciembre de 2012

Construir spoilers con el botón de Google+ y Javascript

En CodeCanyon encontré un artículo muy interesante que consta en construir spoilers con CSS3 y jQuery mediante el Callback del botón de Google+. Este artículo es un tutorial de pago, así que decidí hacer una alternativa algo similar, pero sin jQuery y con Javascript nativo.

Nota: Para comprobar en el demo si la cookie existe, primero debes actualizar la página, la cookie se almacenará en la entrada y no en todo el blog para prevenir que se desbloqueen todos los posts al mismo tiempo.
El tutorial:

Paso 1: Crear la función para el Callback y definir todas las variables:

Lo primero que debemos hacer es una función, que ésta lleve como parámetro el mismo que el del callback, además debemos empezar con todas las variables que se emplearán y también con las instrucciones que se ejecutarán al hacer +1.


<script type="text/javascript">
// Empezamos con las variables
var url = document.URL; // Establecemos la URL actual
var ruta = "http://tu-blog.blogspot.com".length; // Obtenemos la longitud de nuestro dominio
var mensaje_spoiler = document.getElementById("contenido-oculto"); // Creamos una variable a partir del spoiler
var boton_spoiler = document.getElementById("boton-plusone"); // Creamos una variable a partir del botón de Google+
var cookieplus = document.cookie.substring(document.cookie.indexOf("plusoneguardado" + '=') + "plusoneguardado".length + 1,document.cookie.length); // Esta variable nos permite crear un índice por si existen otras cookies almacenadas en la página, con esta la seleccionamos de manera individual
if(cookieplus.indexOf(';') != -1)cookieplus = cookieplus.substring(0,cookieplus.indexOf(';'))


function spoiler(plusone) { // Empezamos la función con el Callback
if(plusone.state == "on") { // Si el estado del callback es on...
mensaje_spoiler.className = "g-activo"; // Asignamos una clase .g-activo al contenido oculto
boton_spoiler.className ="g-oculto"; // Asignamos una clase .g-oculto al botón +1
document.cookie ='plusoneguardado=confirmado; path=' + url.substring(ruta,999); // Escribimos la cookie denominada plusoneguardado=confirmado y se le asigna un path, se calcula mediante substring y la longitud de la variable ruta
}

};
</script>

Paso 2: Detectar la cookie cuando la página se cargue:

Dentro de la misma etiqueta <script> iniciaremos otra nueva función, ésta se denominará leercookie y designará una serie de instrucciones si la condición se cumple:
<script type="text/javascript">
// Empezamos con las variables
var url = document.URL; // Establecemos la URL actual
var ruta = "http://tu-blog.blogspot.com".length; // Obtenemos la longitud de nuestro dominio
var mensaje_spoiler = document.getElementById("contenido-oculto"); // Creamos una variable a partir del spoiler
var boton_spoiler = document.getElementById("boton-plusone"); // Creamos una variable a partir del botón de Google+
var cookieplus = document.cookie.substring(document.cookie.indexOf("plusoneguardado" + '=') + "plusoneguardado".length + 1,document.cookie.length); // Esta variable nos permite crear un índice por si existen otras cookies almacenadas en la página, con esta la seleccionamos de manera individual
if(cookieplus.indexOf(';') != -1)cookieplus = cookieplus.substring(0,cookieplus.indexOf(';'))


function spoiler(plusone) { // Empezamos la función con el Callback
if(plusone.state == "on") { // Si el estado del callback es on...
mensaje_spoiler.className = "g-activo"; // Asignamos una clase .g-activo al contenido oculto
boton_spoiler.className ="g-oculto"; // Asignamos una clase .g-oculto al botón +1
document.cookie ='plusoneguardado=confirmado; path=' + url.substring(ruta,999); // Escribimos la cookie denominada plusoneguardado=confirmado y se le asigna un path, se calcula mediante substring y la longitud de la variable ruta
}

};
</script>


// Función creada para comprobar si la cookie existe
window.onload = function leercookie() { // Cargamos la función al cargar la página
if (cookieplus == "confirmado") { // Si la cookie contiene el valor "confirmado"...
mensaje_spoiler.className = "g-activo"; // Asignamos una clase .g-activo al contenido oculto
boton_spoiler.className ="g-oculto"; // Asignamos una clase .g-oculto al botón +1
}

};

No olvides reemplazar "http://tu-blog.blogspot.com" por la URL de tu blog (Sin / al final).

Nota: Este código debe ir antes de:

</body>

Paso 3: Añadir CSS a los elementos:

Para que todos estos elementos interactúen correctamente, lo que debemos hacer es crear las reglas CSS con las que condicionaremos los comportamientos. Lograremos entonces que la clase .g-activo sea del tipo visible, y .g-oculto una clase invisible, y junto con ello aplicaremos estilos a todos los elementos:

#plus-one { /*Atributos del contenedor del spoiler*/
font-family: 'Open Sans', sans-serif; /**/
background:#F9F9F9; /*Color de fondo en formato hexadecimal*/
border:5px solid white; /*Tamaño, tipo y color del borde*/
box-shadow:0 0 5px rgba(0,0,0,0.1), inset 0 0 5px rgba(0,0,0,0.3); /*Sombras con CSS3*/
color:#888; /*Color de la fuente*/
padding:12px 20px; /*Espaciado del contenedor*/
border-radius:10px; /*Bordes redondeados*/
width:85%; /*Ancho del spoiler*/
font-weight:300; /*Ancho de la tipografía, necesita que ésta la soporte*/
margin:10px auto; /*10px de márgen superior e inferior, y automático para centrar*/
}

#plus-one a { /*Atributos de los enlaces dentro del contenedor*/
text-decoration:none; /*Sin subrayado o algún otro tipo de decoración*/
color:#444;/*Color del enlace*/
}

#boton-plusone { /*Atributos del botón y del mensaje*/
font-style:italic; /*Cursiva*/
}

.g-oculto {
display:none; /* g-oculto es una clase invisible*/
}

.g-activo {
display:block; /*g-activo es una clase visible*/
}

Nota: Este código debe ir antes de:

]]></b:skin>

Y para la fuente, pega el siguiente código antes de </head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic' rel='stylesheet' type='text/css' />


Paso 4: Insertar el spoiler en alguna entrada:

Una vez que ya tengas todo instalado y configurado correctamente en tu plantilla, deberás pegar el siguiente código en la edición HTML de la entrada en la cual insertarás el spoiler:
<div id="plus-one">
<div id="boton-plusone">Contenido Bloqueado. Para desbloquear el contenido oculto presiona en el siguiente botón.
<br />
<g:plusone callback="spoiler"></g:plusone>
</div>

<div id="contenido-oculto" class="g-oculto">
Inserta acá el código que se mostrará cuando el botón haya sido presionado.
</div>
</div>

Importante: Para que el spoiler almacene la ruta correctamente, el spoiler debe ir oculto mediante el salto de línea en la página principal, o de lo contrario almacenará la cookie en dicha URL.

No hay comentarios:

Publicar un comentario