Cómo ocultar spoilers en tu sitio web usando JavaScript

Cómo ocultar spoilers en tu sitio web usando JavaScript

Administras un sitio web como un foro o algo relacionado donde los usuarios pueden publicar opiniones, tutoriales etc. sobre Juegos, Peliculas y Libros? Quizás no deberías, estás obligado a permitir que tus usuarios oculten información sensible (los llamados spoilers) que podrían revelar una trama importante sobre algun tema. De otra manera los usuarios de tu sitio web nunca regresarán si descubren que la verdadera identidad de Batman es Bruce Wayne, quizás no con un tema tan banal sino cosas importantes.

Hay muchas posibles soluciones en la web para dicho problema, sin embargo la mayoria de ellos son muy agresivos visualmente y bastante horribles. Usando simple CSS, una vez que mueves el mouse por encima de un elemento, leeras el spoiler sin nisiquiera haberlo querido. Es por eso que en este articulo te mostraremos como ocultar spoilers con un poco de desenfoque con la ayuda de un plugin de JavaScript que maneja perfectamente esta característica.

1. Descarga e incluye Spoiler Alert

Para lograr tu cometido, te recomendamos usar el Spoiler Alert plugin. Este plugin te permite ocultar texto e imágenes con un poco de desenfoque (SVG blur). Al pasar el mouse por encima de un elemento, tu usuario verá una pista acerca del spoiler y sabrá el contenido si clickea en este. Así con la ayuda de JavaScript podrás proteger el conocimiento de tus usuarios.

Descarga una copia del script de Spoiler Alert del repositorio oficial, es decir la copia minificada o completa aquí. Alternativamente puedes usar el script de un CDN gratuito. Luego procede a incluir el script en tu documento usando un tag de script:

<!-- Desde el CDN -->
<script src="https://cdn.rawgit.com/joshbuddy/spoiler-alert/master/spoiler.min.js"></script>

<!-- O de una copia local -->
<script src="spoiler.min.js"></script>

Hasta la fecha, el plugin no está hecho para funcionar con bundler como browserify o webpack (usando require) pues este crea una variable global en la ventana llamada spoilerAlert. Para más información acerca de este plugin, por favor visita el repositorio oficial en Github aquí.

2. Usando el plugin

Como mencionado anteriormente el plugin está expuesto globalmente como una variable global llamada spoilerAlert. Esta variable es una función que recibe hasta 2 argumentos. El primer argumento es una consulta de elementos en el DOM, es decir que selecciona en que elementos será aplicado el efecto blur. Esta consulta es usada internamente por la función document.querySelectorAll(tu selector). El siguiente ejemplo muestra como aplicar el blur a elementos spoiler o con la clase spoiler en su defecto:

<p>La identidad secreta de Bruce Wayne (o Bruno Días) <spoiler>Batman</spoiler></p>

Escuchame atentamente, <span class="spoiler">Mark David Chapman</span> mató a John Lennon porque <span class="spoiler"> tenía un monton de problemas psicologicos, uno de ellos escuchar voces literalmente en su cabeza.</span>

<script>
    spoilerAlert("spoiler, .spoiler");
</script> 

That means that you can blur any element in your document (event the entire html document). The second argument is optional an needs to be object with 2 properties namely max and partial. These values are the blur value desired for the element on every phase (partial when mouseover and max when no mouse near), by default, if this argument is not providen, spoilerAlert will use 4 for the max option and 2 for the partial:

<p>La identidad secreta de Bruce Wayne (o Bruno Días) <spoiler>Batman</spoiler></p>

Escuchame atentamente, <span class="spoiler">Mark David Chapman</span> mató a John Lennon porque <span class="spoiler"> tenía un monton de problemas psicologicos, uno de ellos escuchar voces literalmente en su cabeza.</span>

<script>
    spoilerAlert("spoiler, .spoiler", {
        max: 10,
        partial: 5
    });
</script> 

Despues de la ejecución de la función, tus elementos tendrán un desenfoque que evitará que los usuarios lean su contenido debido a sus spoilers.

Feliz prevención de spoilers !

Esto podría ser de tu interes

Conviertete en un programador más sociable