Staff en línea
Últimos temas
[Ocio] Contemos hasta el 5000
por Chalo Lun Oct 15, 2018 8:24 am

[Revisado] Errores Yoshi Fans club
por YoshiGM Sáb Oct 13, 2018 12:36 pm

[CSS] Dar estilo a los rangos
por Eslam Love Miér Oct 03, 2018 11:15 pm

Página 2 de 2. Precedente  1, 2

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



Última edición por Flerex el Lun Jul 24, 2017 12:52 pm, editado 2 veces
Recuerdo del primer mensaje :

¡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 :

36


Me gusta :

6


ingreso :

14/07/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Excelente aporte!
hamesashek
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 :

Se actualizó el color de los títulos


Sombra titulo :

1px 1px 1px #fff


Mensajes :

23


Puntos :

28


Me gusta :

3


ingreso :

20/05/2017


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

staff
Mensaje automático



[ok]Se movio el tema del subforo Zona Beta a Javascript[/ok]
Chalo
avatar

¿Que estoy pensando? :

ayudando como debe ser [table class=fecha_up][td]Se modifico:2/010/18 - 20:40 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6839


Puntos :

8934


Me gusta :

1030


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

Volver arriba Ir abajo

 En la misma categoria


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