Colocar el módulo «Últimos Temas» en cualquier lugar

¿Alguna vez has intentado mover el módulo de «Últimos Temas» al tablón y has tenido problemas con el marquee, que se quedaba a mitad de camino de la pasarela? Si te ha ocurrido alguna vez, seguro que sabrás lo frustrante que es que ocurra eso sin saber muy bien por qué pasa y cómo solucionarlo para al final acabar poniendo una barra de desplazamiento manual. Aún teniendo en cuenta que no recomiendo el uso de barras de desplazamiento o marquees en casi ninguna situación debido a que su movimiento puede resultar molestos para los usuarios, hoy os traigo un nuevo plugin para poder mover dicho módulo de una forma muy sencilla.

Características

El plugin tiene las siguientes características o capacidades:

• Sencillez de uso al estar encapsulado en formato plugin
• Colocar más de un módulo de «Últimos Temas» de manera simultánea
• Elegir independientemente para cada módulo si tiene marquee o no, y en caso de tenerlo, su velocidad y dirección entre otras
• Funciona incluso en páginas donde los módulos no funcionan normalmente, como por ejemplo en los perfiles avanzados
• El marquee no se para antes de tiempo ni se cuelga

Prerequisitos

Debido a limitaciones de Foroactivo es necesario que por lo menos tengas el módulo «Últimos Temas» activado en la página. Da igual si lo colocas a la izquierda o a la derecha, pero tiene que estar activo. Siempre puedes ocultar los módulos con CSS si no los quieres visibles al usuario con:

#left,
#right {
    display: none;
}

Instalación

En este plugin, debido a limitaciones de Foroactivo y con motivos de eficiencia, habrá que hacer una modificación extra a las plantillas. Antes de nada, añade el siguiente JS desde la gestión de JavaScripts de tu PA y márcalo para que aparezca en todas las páginas:

/*! Recent Topics Generator v1.1.1 | Flerex | flerex.dev */
'use strict';(function(a){a.fn.recentTopicsGenerator=function(b){function c(){f.marquee(e)}const e=a.extend({scrolling:!1,duration:8e3,pauseOnHover:!0,direction:'up'},b),f=this;return f.empty().addClass('recentTopicsWidget'),function(){function g(h){const i=a('#comments_scroll_div',h),j=i.length?i.has('.js-marquee').length?a('.js-marquee',i):a('.marquee',i):a('#recent_topics',h);return j[0].childNodes}return a('#recent_topics').length?Promise.resolve(g(document)):new Promise((h,i)=>{a.get('/faq').done(j=>{h(g(a(j)))}).fail(()=>{i()})})}().then(g=>{g.forEach(h=>{f.append(h.cloneNode(!0))}),e.scrolling&&(a.fn.marquee?c():jQuery.getScript('https://illiweb.com/rsc/16/frm/jquery/marquee/jquery.marquee.min.js',c),f.css('overflow','hidden'))}),f}})(jQuery);

Con eso el plugin ya estaría instalado, ahora solo falta hacer esa modificación extra de la que hablamos anteriormente. En la plantilla mod_recent_topics, situada en la sección de plantillas «Portal», buscamos:

<!-- BEGIN scrolling_row -->

Y añadimos antes:

<div id="recent_topics">

Finalmente, buscamos:

<!-- END classical_row -->

Y añadimos después:

</div>

Funcionamiento

En las siguientes líneas se explicará cómo utilizar el código del código de una forma más técnica. Si lo único que quieres es saber como poner un módulo de últimos temas en alguna parte de tu foro, salta a la sección «Ejemplo de uso en la vida real». Utilizando jQuery, podemos insertar un módulo en un contenedor cualquiera de la siguiente forma:

$('#el_contenedor').recentTopicsGenerator()

Recordad que es necesario esperar por el DOM como de costumbre con document.ready, aunque a estas alturas seguro que ya lo sabrás.

$(function() {
    $('#el_contenedor').recentTopicsGenerator()
});

Con tan solo esas líneas de código insertaremos dentro del elemento #el_contenedor un módulo «Últimos Temas» sin marquee.

Opciones

Si quisiésemos activar la pasarela deberíamos pasarle las opciones de configuración al plugin. Estas son todas las opciones disponibles:

• scrolling: Activa o desactiva la pasarela (marquee). Recibe valores true o false (defecto). Es necesario marcar esta opción como true para poder utilizar el resto de opciones (lógicamente).
• direction: Acepta valores entrecomillados como up (defecto) down, left o right, que indican si la dirección es hacia arriba, abajo, izquierda o derecha respectivamente.
• duration: El tiempo (en ms, sin comillas) que va a tardar la pasarela en mostrar todos los temas. 8000 por defecto.
• pauseOnHover: Un valor booleano (true —defecto— o false para «sí» o «no»). Indica si al pasar el ratón por la pasarela se parará.

Como siempre, añadir una opción con su valor por defecto tiene la misma utilidad que el Plastidecor blanco. Nota: Hay muchas más opciones. Si quieres verlas todas siempre puedes recurrir a la documentación de jQuery.Marquee, el plugin del que se delega para dicha funcionalidad, el mismo que utiliza Foroactivo. Un ejemplo del código activando el marquee sería:

$('#el_contenedor').recentTopicsGenerator({
    scrolling: true,
})

Otro ejemplo, esta vez de cómo se vería el código añadiendo más parámetros de configuración:

$('#el_contenedor').recentTopicsGenerator({
    scrolling: true,
    direction: 'down',
    duration: 10000
})

Ejemplo de uso en la vida real

El uso más común que se le podría dar al código es, por ejemplo, cuando quieres incrustar una lista de temas recientes en un tablón de anuncios personalizados. Seguramente lo primero que se te ha pasado por la cabeza sería algo del estilo:

$(function() {
    $('#comments_scroll_div').appendTo('#el_sitio_para_incrustar')
});

Pero si estás aquí, será porque te has dado cuenta de que eso trae problemas. Por ejemplo, el módulo se para por la mitad o no aparece y genera un error JS en algunas partes del foro. La forma correcta de hacerlo, teniendo el plugin instalado sería colocando un código como el siguiente en la gestión de JS, marcándolo para que sea visible en donde mejor te convenga. Por ejemplo, en el índice si el tablón solo se ve en el índice o en todas las páginas si se ve en todas las páginas.

$(function() {
    $('#el_sitio_para_incrustar').recentTopicsGenerator({
        scrolling: true,
    })
});

Recuerda que es necesario que tengas en algún sitio de tu tablón algo del estilo:

<div id="el_sitio_para_incrustar"></div>