Staff en línea

[ayuda] Ajustar JS de temas similares
Tema iniciado por y Añadir a favoritos

[ayuda] Ajustar JS de temas similares  
el Lun Jun 15, 2020 2:40 am
[problema]URL::https://proyektocomic.foroactivo.com/
Versión de mi foro::phpbb3
Navegador::chrome
Descripcion del problema:
Capturas de pantalla del problema: [ayuda] Ajustar JS de temas similares  Similartheme
[/problema]

Hola Chalo, te dejo un JS que tengo para temas similares a ver si le puedes hacer un ajuste para que se vean los prefijos con su color correspondiente.

Este el code:

Código:

/* The following code is DOM-dependent. It may not work if you modify the posting structure in the forum templates */

/*

    Similar Topics for Forumotion

    Version: 1.1.2
    Author: Flerex Ferwin
   
*/


/* The following code is DOM-dependent. It may not work if you modify the posting structure in the forum templates */

var FLRX = FLRX || {};

FLRX.similarTopics = (function () {

    'use strict';

    let settings = { // default settings
        forums : [],
        searchIn : false,
        maxTopics : 5,
        wordMinLength: 4,
        triggerWhenWriting: true,
        hideAtFocusout: false,


        autocomplete: false, // disable browser autocomplete from subject input

        /* Advanced settings */
        excludedCharacters : new RegExp(/[.,\/#!$%\^&\*¿?!¡;:{}\\=\-_`~"«“‘’”»()\[\]]/, 'g'), // The ignored characters from the topic title.
        dom : { // default settings (should work if left like this with unmodified templates)

            /* Search page */
            topicscontainer : '.forabg',
            topic          : 'dd.dterm',
            titlelink      : '.topictitle',
            userlink        : 'a[href^="/u"]',
            forumlink      : 'a[href^="/f"]',
            topicicon      : { img: false, selector: '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...' }),

        },
    },

    structure = {},

    request,

    debounce = function(cb, delay) {
        let timeout;
        return function(...a) {
            clearTimeout(timeout);
            timeout = setTimeout( _ => { timeout = null;  cb.call(this, ...a);  }, delay);
        };
    },

    /* transforms a UTF8-encoded URI into Windows-1252 */
    sanitizeURI = function(uri) {

        /* For some reason Forumotion uses Windows-1252 encoding in search URIs.
        This workaround will only fix issues with Spanish characters */

        return uri.replace(/%C3%91/g, '%D1') // Ñ
            .replace(/%C3%B1/g, '%F1') // ñ
            .replace(/%C3%81/g, '%C1') // Á
            .replace(/%C3%89/g, '%C9') // É
            .replace(/%C3%8D/g, '%CD') // Í
            .replace(/%C3%93/g, '%D3') // Ó
            .replace(/%C3%9A/g, '%DA') // Ú
            .replace(/%C3%9C/g, '%DC') // Ü
            .replace(/%C3%A1/g, '%E1') // á
            .replace(/%C3%A9/g, '%E9') // é
            .replace(/%C3%AD/g, '%ED') // í
            .replace(/%C3%B3/g, '%F3') // ó
            .replace(/%C3%BA/g, '%FA') // ú
            .replace(/%C3%BC/g, '%FC'); // ü
    },

    /* returns an object array (representation of topics) from a search URL synchronously */
    searchTopics = function(url, cb) {
        $.ajax({
            url : url,
        }).done(function(data) {
            let relatedTopics = [],
                $forabg = $(settings.dom.topicscontainer, data);
            if($forabg.length) {
                $forabg.find(settings.dom.topic).slice(0, settings.maxTopics).each(function() {
                   
                    let $this = $(this),
                    $topictitle = $this.find(settings.dom.titlelink),
                    $forumlink = $this.find(settings.dom.forumlink),
                    $userlink = $this.find(settings.dom.userlink),
                    $topicicon = settings.dom.topicicon.img
                        ? $this.find(settings.dom.topicicon.selector)
                        : $this.closest(settings.dom.topicicon.selector);

                    let status;
                    if(settings.dom.topicicon.img) {
                        status = $topicicon.attr('src');
                    } else {
                        status = $topicicon.css('background-image').length
                            ? $topicicon.css('background-image').slice(4, -1).replace(/"/g, '')
                            : false;
                    }

                    relatedTopics.push({
                        title  : $topictitle.text().trim(),
                        url    : $topictitle.attr('href'),
                        icon  : $this.css('background-image').slice(4, -1).replace(/"/g, ''),
                        status,
                        forum  : {
                            name : $forumlink.text(),
                            url  : $forumlink.attr('href'),
                        },
                        user  : {
                            name : $userlink.text(),
                            url  : $userlink.attr('href'),
                        },
                    });
                });
            }

            cb.call(this, relatedTopics);
        }).fail(_ => {let up; throw up || false});
    },

    /* returns an array with the words of a string that fulfil conditions of settings.excludedCharacters */
    getWords = function(str) {
        return str.trim().replace(settings.excludedCharacters, '').split(' ').filter(elm => elm.length >= settings.wordMinLength);
    },

    /* updates the similar topics DOM structure with the ones in the input array */
    updateDOM = function(arr) {

        structure.topiccontainer.empty();

        if(arr.length) {
            let docfrag = document.createDocumentFragment();
            $.each(arr, function(index, topic) {

                let $topicTitle = settings.dom.topicelmtitle.clone(),
                $topicContainer = settings.dom.topicelmcont.clone(),
                $topicInfo      = settings.dom.topicelminfo.clone(),
                $topicauthor    = settings.dom.topicauthor.clone(),
                $topicstatus    = settings.dom.topicstatus.clone(),
                $topicforum    = settings.dom.topicforum.clone(),
                $topicflags    = settings.dom.topicflags.clone(),
                $topicdata      = settings.dom.topicdatacont.clone(),
                $topicicon      = settings.dom.topiciconcont.clone(),

                /* link creation */
                $topicLink  = $('<a />', { target: '_blank', href: topic.url, text: topic.title }),
                $forumlink  = $('<a />', { target: '_blank', href: topic.forum.url, text: topic.forum.name }),
                $authorlink = $('<a />', { target: '_blank', href: topic.user.url, text: topic.user.name });

                $topicicon.css('background-image', `url('${ topic.icon }')`);
                topic.status && $topicstatus.css('background-image', `url('${ topic.status }')`);

                $topicauthor.append($authorlink);
                $topicforum.append($forumlink);
                $topicTitle.append($topicLink);
                $topicInfo.append($topicauthor, $topicforum);
                $topicdata.append($topicTitle, $topicInfo);
                $topicflags.append($topicstatus, $topicicon);
                $topicContainer.append($topicflags, $topicdata);

                docfrag.append($topicContainer[0]);

            });
            structure.topiccontainer[0].appendChild(docfrag);
           
        } else
            structure.maincontainer.removeClass(settings.dom.visible);
           
    },

    setLoadingStatus = function() {
        structure.loadingcontainer.addClass(settings.dom.visible);
        structure.recentstitle.removeClass(settings.dom.visible);
        structure.topiccontainer.removeClass(settings.dom.visible);
    },
    topicsRetrieved = function (){
        structure.loadingcontainer.removeClass(settings.dom.visible);
        structure.recentstitle.addClass(settings.dom.visible);
        structure.topiccontainer.addClass(settings.dom.visible);
    },

    searchAlgorithm = function(words, cb) {
        let params = {
            search_where    : settings.searchIn || `f${/\?f=(\d+)/.exec(location.search)[1]}`,
            show_results    : 'topics',
            sort_by        : 0,
            sort_dir        : 'DESC',
            search_terms    : 'all',
            search_keywords : words.join(' '),
        };

        searchTopics(`/search?${sanitizeURI($.param(params))}`, function(arr) {
            let relatedTopics = arr;

            if(relatedTopics.length < settings.maxTopics) {
                params.search_terms = 'any';
                searchTopics(`/search?${sanitizeURI($.param(params))}`, function(arr) {
                    let searchAnyWord = arr,
                    neededElms = settings.maxTopics - relatedTopics.length;
                    searchAnyWord = searchAnyWord.filter(elm => relatedTopics.find(e => e.url == elm.url) === undefined); // Ignore duplicates
                    relatedTopics = [...relatedTopics, ...searchAnyWord.slice(0, neededElms)];

                    cb.call(this, relatedTopics);

                });
            }
           
            cb.call(this, relatedTopics);

        });

    },
    hideSimilarTopics = function() {
        structure.maincontainer.removeClass(settings.dom.visible);
    },

    showSimilarTopics = function() {
        structure.maincontainer.addClass(settings.dom.visible);
    },

    /* main function */
    searchSimilarTopics = function($title) {
        let words = getWords($title.val());
       

        if(words.length == 0) {
            hideSimilarTopics();
            return;
        }

        // for the first time, if it was hidden
        showSimilarTopics();

        setLoadingStatus();

        searchAlgorithm(words, function(arr) {
            updateDOM(arr);
            topicsRetrieved();
        });

    },
    generateStructure = function($title) {
        let $similarTopics = settings.dom.maincontainer.clone(),
        $spinner = settings.dom.loadingelm.clone(),
        $topicsContainer = settings.dom.similartopiccont.clone(),
        $recentsTitle = settings.dom.similarstitle.clone();
       
        structure = {
            maincontainer    : $similarTopics,
            loadingcontainer : $spinner,
            topiccontainer  : $topicsContainer,
            recentstitle    : $recentsTitle,
        };

        $similarTopics.append($spinner, $recentsTitle, $topicsContainer);

        $title.closest(settings.dom.inputcontainer).after($similarTopics);
    },
    init = function(options) {
        $.extend(true, settings, options);

        let timeout,
        $title = $(settings.dom.titleinput);

        if(!settings.autocomplete)
            $title.attr('autocomplete', 'off');

        // append the basic dom structure (should be hidden by default with CSS)
        generateStructure($title);

        if(settings.triggerWhenWriting)
            $title.on('keypress', debounce(function(e) {
                if(e.which !== 0)
                    searchSimilarTopics($title);
            }, 500));
        else
            $title.on('focusout', function() {
                searchSimilarTopics($title);
            });

        if(settings.triggerWhenWriting && settings.hideAtFocusout)
            $title.on('focusout', function() {
                hideSimilarTopics();
            });

    };


    /* API :-) */
    return {
        init : init,
    };

})();


!function() {

    const settings = {
        forums : [1,2,3,4,5,6,7], // Forum IDs (separated by comma) where the "Similar Topics" feature will be enabled. Set to true to enable the feature everywhere (not recommended).
        searchIn : '-1', // Where the searches will take place. Use -1 to search everywhere. If not set, it will search the forum where the topic is being created
        maxTopics : 5, // Maximum amount of topics shown
    };


    location.pathname == '/post' &&
    location.search.indexOf('&mode=newtopic') > -1 &&
    (settings.forums === true || settings.forums.some(id => location.search.indexOf(`?f=${id}`) > -1)) &&
    $(function() {
        FLRX.similarTopics.init(settings);
    });

}();

citrato
citrato

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

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

102


Puntos :

130


Me gusta :

8


ingreso :

13/05/2020


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

Re: [ayuda] Ajustar JS de temas similares  
el Miér Jun 24, 2020 3:58 am
citrato
citrato

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

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

102


Puntos :

130


Me gusta :

8


ingreso :

13/05/2020


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

 En la misma categoria


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