Staff en línea

[Beta] Temas similares al escribir el título de un tema
Tema iniciado por y Añadir a favoritos

Mensaje  Flerex


Última edición por Flerex el Lun Jul 24, 2017 12:52 pm, editado 2 veces
¡Hola!

Traigo una funcionalidad nueva para los foros Foroactivo en formato plugin. Este código permite al usuario ver una lista de temas similares al suyo a medida que va escribiendo el título. Es ideal para foros de soporte en los que los usuarios suelen hacer muchas veces preguntas repetidas sin buscar antes. A continuación dejo un ejemplo de cuál sería el resultado:


Como todos mis plugins, intento poner por encima de todo la personalización, para que cada persona pueda adaptar el código lo máximo posible a su foro. Este plugin trae un montón de opciones a configurar, muchas de ellas de tipo avanzado, que permiten a aquellas personas que sepan editar plantillas, poder utilizar el código sin tener problemas de incompatibilidad. Con estas mismas opciones sería incluso posible adaptar el código a cualquier otra versión, aunque eso correría por parte del usuario. Yo, por defecto, solo doy soporte a phpBB3.


Documentación


A continuación las configuraciones que puedes poner al script. Ten en cuenta que todas las opciones tienen el siguiente formato:

Código:
nombre: valor,

Por lo que si pones varias opciones, el principio del script debería verse más o menos así:

Código:
const settings = {
    nombreOpcion1: valor,
    nombreOpcion2: valor,
    nombreOpcion3: valor,
};

Nota: Poner una opción con su valor por defecto es equivalente a no ponerla.

Las opciones son las siguientes:


  • forums




    Los foros donde al crear un tema la funcionalidad de Temas Similares aparecerá. Un foro será representado por su ID (la de la URL al mismo). Las IDs estarán entre corchetes separadas por comas. Por ejemplo:

    Código:
    forums: [1, 2, 3, 4, 5],

    Casos especiales:
    • []: No activar el plugin en ningún foro (contraproducente).
      Código:
      forums: [],


    Valor por defecto:
    Código:
    forums: [],

  • searchIn


    El foro o categoría donde se realizará la búsqueda de los temas. Para identificar qué foro o categoría se utilizará su ID, precedida de la letra c para categorías o f para foros y puesto todo entre comillas. Por ejemplo, para buscar en la categoría con id 3 sería:

    Código:
    searchIn: 'c2',

    Existen valores especiales:


    • false: Buscar en el mismo foro en el que se está creando el tema.
    • '-1': Buscar en todo el foro


    Valor por defecto:
    Código:
    searchIn: false,

  • maxTopics



    Número máximo de temas que aparecerán. Por motivos de implementación, de momento el número máximo posible es el el número de temas que muestra foroactivo por página de búsqueda.

    Ejemplo:

    Código:
    maxTopics : 10,

    Valor por defecto:
    Código:
    maxTopics : 5,

  • triggerWhenWriting



    Activar o no la funcionalidad a medida que se está escribiendo. Desactivar esta funcionalidad hará que la lista de temas aparezca al dejar el campo de texto.

    Ejemplo:

    Código:
    triggerWhenWriting : false,

    Valor por defecto:
    Código:
    triggerWhenWriting : true,

  • hideAtFocusout


    Ocultar la funcionalidad al dejar el campo de texto.

    Precondiciones:

    • La opción triggerWhenWriting debe tener valor true


    Ejemplo:

    Código:
    hideAtFocusout : true,

    Valor por defecto:
    Código:
    hideAtFocusout : false,


  • autocomplete



    Activar o desactivar el autocompletado del campo del título (las sugerencias del navegador). Es decir, poner el atributo autocomplete del elemento input a on o off.

    Puede tomar valor true para que esté activado o false para que no lo esté.

    Ejemplo:

    Código:
    autocomplete : true,

    Valor por defecto:
    Código:
    autocomplete : false,

  • wordMinLength



    Número mínimos de caracteres de una palabra para ser tomada en cuenta en la búsqueda. Ten en cuenta que por limitaciones de Foroactivo no es posible poner menos de 3.

    El valor es un numero entero que puede ir desde 4 al máximo de caracteres permitidos por Foroactivo.

    Ejemplo:

    Código:
    wordMinLength : 5,

    Valor por defecto:
    Código:
    wordMinLength : 4,



Existen también opciones para usuarios avanzados. Para utilizarlas es necesario un poco de conocimiento de JS y HTML.

Opciones avanzadas:


  • excludedCharacters


    Objeto de expresión regular que hace match a los caracteres que se deberán ignorar en los títulos.

    Valor por defecto:
    Código:
    excludedCharacters : new RegExp(/[.,\/#!$%\^&\*¿?!¡;:{}\\=\-_`~"«“‘’”»()\[\]]/, 'g'),

  • dom


    Objeto personalizado que permite modificar la forma en la que se interpretan el DOM del foro. Útil en caso de que se desee modificar la estructura HTML del plugin o en caso de que se haya modificado partes de las plantillas de las que dependa el plugin.

    Se pueden ver todas las opciones en el valor por defecto, que correspondería a como se interpreta una estructura de un foro phpBB3. Adaptarlo a cualquier otra versión debería ser sencillo. Por motivos de hacer más fácil la adaptación a cualquier tipo de modificación de las plantillas, las relaciones entre los elementos son todas estrictamente parentales (es decir, no hay posibilidad de que cualquiera de los identificadores de DOM de este objeto sean lo mismo) y la forma en la que se relacionan parentalmente es de tipo deep (es decir, no es necesario que sean hijos o padres directos entre ellos —la implementación del plugin usa los métodos find y closest para seleccionar los elementos). Para más información, preguntadme.

    No es necesario poner todas las propiedades del objeto que aparecen en el valor por defecto, solo aquellas que sean distintas de las del objeto del valor por defecto.

    Valor por defecto:
    Código:
    dom : {

                /* Search page */
                topicscontainer : '.forabg',
                topic          : 'dd.dterm',
                infocontainer  : '.span-tab',
                titlelink      : '.topictitle',
                userlink        : 'a[href^="/u"]',
                forumlink      : 'a[href^="/f"]',
                topicicon      : 'dl.icon',

                /* structure */
                visible        : 'visible',

                /* posting page */
                titleinput      : '#postingbox input[name="subject"]',
                inputcontainer  : 'dl',

                /* created elements */
                maincontainer  : $('<div />', { id : 'similarTopics' }),
                similartopiccont : $('<div />', { class : 'topic-container' }),
                loadingelm      : $('<div />', { class : 'spinner' })
                                    .append($('<div/>', { class:'double-bounce1' }))
                                    .append($('<div/>', { class:'double-bounce2' })),
                topicelmcont    : $('<div />', { class: 'topic' }),
                topicelmtitle  : $('<div />', { class: 'topic-title' }),
                topicdatacont  : $('<div />', { class: 'topic-data' }),
                topicflags      : $('<div />', { class: 'topic-flags' }),
                topiciconcont  : $('<div />', { class: 'topic-icon' }),
                topicstatus    : $('<div />', { class: 'topic-status' }),
                topicelminfo    : $('<div />', { class: 'topic-info' }),
                topicauthor    : $('<span />', { class: 'topic-author', text: 'por ' }),
                topicforum      : $('<span />', { class: 'topic-forum', text: ' en ' }),
                similarstitle  : $('<h4 />', { class: 'similarTopics-title', text: 'Quizás te interese...' }),

            },



Más...

  • El código utiliza un CDN, lo cual me permite actualizar y mejorar siempre el código para que tengáis la última versión: la más segura y eficiente posible. No tenéis de que preocuparos: todas las versiones son backwards-compatible, por lo que ninguna actualización va a hacer que el código deje de funcionar en vuestros foros.

  • El soporte del plugin sigue mis reglas de soporte a navegadores: Las versiones actuales de los navegadores más comunes (Chrome, Firefox, Safari, Edge y derivados) y la versión anterior a la actual (version actual - 1). No se dará soporte a Internet Explorer o cualquier otro navegador antiguo, aunque es posible que funcione en muchos de ellos.

  • Si encontráis algún problema con el código en los anteriores navegadores os agradecería que me lo hicieseis saber.

  • Además, si tenéis alguna sugerencia o alguna idea de alguna posible opción que se puede añadir, hacédmelo saber.
Flerex
avatar

¿Que estoy pensando? :

Flerex


Banner en temas :

Flerex


Color de titulos :

Flerex


Sombra titulo :

1px 1px 1px #fff


Mensajes :

26


Puntos :

35


Me gusta :

5


ingreso :

14/07/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Mensaje  Chalo
excelente muchas gracias por aportar, yo tengo algo similar instalado aca en open, pero no para compartir, gracias thumbs
staff
Chalo
avatar

¿Que estoy pensando? :

Probando el foro [table class=fecha_up][td]Se modifico:2/010/17 - 12:15 hrs. [/td][/table]


Banner en temas :

http://i.imgur.com/XlCMsAOh.jpeg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6402


Puntos :

8406


Me gusta :

963


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario http://www.opensourcephpbb3.com

Volver arriba Ir abajo

Mensaje  Flerex
Chalo escribió:excelente muchas gracias por aportar, yo tengo algo similar instalado aca en open, pero no para compartir, gracias thumbs

No me había fijado la verdad, tengo JavaScript desactivado. Pero a simple vista creo que son un poco distintos, el que yo propongo presenta las opciones a medida que el usuario escribe y tiene un nivel de profundidad extra con los resultados.
Flerex
avatar

¿Que estoy pensando? :

Flerex


Banner en temas :

Flerex


Color de titulos :

Flerex


Sombra titulo :

1px 1px 1px #fff


Mensajes :

26


Puntos :

35


Me gusta :

5


ingreso :

14/07/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Mensaje  Chalo
si yo cambie el "keyup" por un "onblur" para mostrar los resultados al terminar la oración, y cortar las búsquedas innecesarias, por la tanto peticiones extras al server de foroactivo.

Bien por el code.

¿vuelves a foroactivo? btw
staff
Chalo
avatar

¿Que estoy pensando? :

Probando el foro [table class=fecha_up][td]Se modifico:2/010/17 - 12:15 hrs. [/td][/table]


Banner en temas :

http://i.imgur.com/XlCMsAOh.jpeg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6402


Puntos :

8406


Me gusta :

963


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario http://www.opensourcephpbb3.com

Volver arriba Ir abajo

Mensaje  Flerex
Chalo escribió:si yo cambie el "keyup" por un "onblur" para mostrar los resultados al terminar la oración, y cortar las búsquedas innecesarias, por la tanto peticiones extras al server de foroactivo.

Bien por el code.

¿vuelves a foroactivo? btw

Esta versión ya se encarga de ser repetuoso con las peticiones que hace, a parte de que dispone de caché.

No sé a qué te refieres con «volver a Foroactivo», pero no, no abriré más foros aquí nunca más.
Flerex
avatar

¿Que estoy pensando? :

Flerex


Banner en temas :

Flerex


Color de titulos :

Flerex


Sombra titulo :

1px 1px 1px #fff


Mensajes :

26


Puntos :

35


Me gusta :

5


ingreso :

14/07/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

El codigo muy completo. me gusto.. Gracias por aportar a OpenSource ;)
YoshiGM
avatar

¿Que estoy pensando? :

Nunca Te Rindas.. Sólo Sigue Intentándolo ;3 [table class=fecha_up][td]Se modifico:3/06/17 - 18:33 hrs. [/td][/table]


Banner en temas :

http://i19.servimg.com/u/f19/13/45/80/80/banner10.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #555


Mensajes :

947


Puntos :

1256


Me gusta :

167


ingreso :

17/12/2014


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario https://yoshifansclub.foroactivo.com

Volver arriba Ir abajo

Mensaje  Flerex
El plugin ha recibido una actualización. A continuación el changelog:

  • En base a la idea de Chalo, el plugin ha recibido una nueva opción para poder hacer aparecer la lista cuando se deje el campo de input, en vez de al escribir.
  • Añadida una opción para ocultar el listado de temas al dejar el campo del título. Solo posible si la opción anterior no se activa. (Idea por Sr.Smith)
  • Los enlaces ahora se abren por defecto en una nueva pestaña.


La nueva documentación se ha añadido directamente al tema principal. A continuación dejo solo la documentación de las opciones nuevas:

  • triggerWhenWriting



    Activar o no la funcionalidad a medida que se está escribiendo. Desactivar esta funcionalidad hará que la lista de temas aparezca al dejar el campo de texto.

    Ejemplo:

    Código:
    triggerWhenWriting : false,

    Valor por defecto:
    Código:
    triggerWhenWriting : true,

  • hideAtFocusout


    Ocultar la funcionalidad al dejar el campo de texto.

    Precondiciones:

    • La opción triggerWhenWriting debe tener valor true


    Ejemplo:

    Código:
    hideAtFocusout : true,

    Valor por defecto:
    Código:
    hideAtFocusout : false,


Nota: No es necesario hacer nada para disfrutar de la actualización. Podéis añadir directamente las nuevas opciones en vuestros foros.
Flerex
avatar

¿Que estoy pensando? :

Flerex


Banner en temas :

Flerex


Color de titulos :

Flerex


Sombra titulo :

1px 1px 1px #fff


Mensajes :

26


Puntos :

35


Me gusta :

5


ingreso :

14/07/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Mensaje  mrsrz
Excelente aporte!
mrsrz
avatar

¿Que estoy pensando? :

... [table class=fecha_up][td]Se modifico:25/11/16 - 19:20 hrs.[/td][/table]


Banner en temas :

http://profilerehab.com/facebook_covers/musical/cool_guitar_cover_9.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

419


Puntos :

587


Me gusta :

60


ingreso :

23/12/2014


Sexo :

Masculino

Plataforma :

PunBB


Navegador :

Chrome


Ver perfil de usuario http://musicinstant.host-es.com/

Volver arriba Ir abajo

Mensaje  muykay
jaja muchas gracias excelente;
muykay
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

64


Puntos :

65


Me gusta :

1


ingreso :

07/09/2017


Sexo :

Masculino

Plataforma :

MYBB


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.