O tickler RSS não funciona ao usar uma coleção de links em vez de textos: o que há de errado?

Fabrizio Bartolomucci

Estou usando uma solução em: https://www.cssscript.com/rss-feed-scroller-marquee/ para criar um tickler para minha página da web. Tudo bem, exceto pelo fato de o tickler apenas mostrar os textos do feed rss mas era impossível clicar neles para ir para o artigo. Então, tentei adulterá-lo, construindo um url adequado e tentando animá-lo. Mesmo assim, o item parece bem construído, mas quando o animo, nada acontece. Este é o código da classe js modificada:

/*!
* RSS Marquee
*
* Licensed under MIT
* Copyright (c) 2020 [Samuel Carreira]
*/
class RSSMarquee {
/**
 * 
 * @param {string[]} feedURLs Feed URLs
 * @param {object} elementContainer the selector of the marquee container
 * @param {number} options.speed duration in ms per character. Bigger values = slow speed
 * @param {number} options.maxItems specify max number of titles to show (useful to debug)
 * @param {object} options.hostnameSelector The selector of the element where you want to  show the URL of the news feed source (usefull for copyright atttribution)
 */
constructor(feedURLs, elementContainer, options = { speed: 110, maxItems: null, hostnameSelector: null }) {
    this._feedURLs = new Array();

    if (Array.isArray(feedURLs)) {
        this._feedURLs = feedURLs;
    } else {
        this._feedURLs[0] = feedURLs;
    }

    const URLvalidation = this._feedURLs.every(this.validateURL);

    if (!URLvalidation) {
        throw new TypeError('Invalid URL on list');
    }

    this._urlIndex = 0;

    this._anim = null;

    this._newsText = '';

    this._lastTime = Date.now();

    if (elementContainer === null) {
        throw new TypeError('Invalid element selector');
    }

    this._elementContainer = elementContainer;
    this.styleElementContainer();

    this._options = {
        speed: this.validateSpeed(options.speed),
        maxItems: options.maxItems,
        hostnameSelector: options.hostnameSelector,
        // ...options
    };

    this.getRSS();
}


validateSpeed(speed) {
    if (!Number(speed) || speed < 50 || speed > 300) {
        return 110; // default safe value
    } else {
        return speed;
    }
}

/**
 * Set the animation speed
 * @param {number} speed value between 50-300
 */
set setSpeed(speed) {
    this._options.speed = this.validateSpeed(speed);
}

get getSpeed() {
    return this._options.speed;
}

/**
 * Validate URL (uses URL interface)
 * 
 * @param {string} url Url to check
 * @returns {boolean} true if valid
 */
validateURL(url) {
    try {
        const u = new URL(url);
        return true;
    } catch (e) {
        return false;
    }
}

/**
 * Get Hostname from url string
 * 
 * Sample: "http://www.dnoticias.pt/rss/desporto.xml"
 *         returns -> www.dnoticias.pt
 * 
 * @param {string} url url string
 * @returns {string} hostname
 */
getHostname(url) {
    try {
        const u = new URL(url);
        return u.hostname;
    } catch (e) {
        return '';
    }
}

getRSS() {
    const url = this._feedURLs[this._urlIndex];

    this.fetchRSS(url)
        .then((xmlText) => {
            this._newsText = this.parseXMLFeed(xmlText);

            this.showMarquee(this._newsText);

            this.showHostname(url);
        })
        .catch((err) => {
            console.error(err);

            this.handleErrors();
        });

}

handleErrors() {
    const diffTime = Date.now() - this._lastTime;

    if (diffTime > 5000) {
        console.log('Trying next feed URL...');

        this.nextURL();
        this._lastTime = Date.now();
    } else {
        if (this._newsText === '') {
            console.log('delay...');
            setTimeout(() => {
                this.nextURL();
            }, 5000);
        } else {
            console.log('show again cached saved news');
            this.showMarquee(this._newsText);
        }
    }
}


nextURL() {
    this.increaseIndex();

    this.getRSS();
}

styleElementContainer() {
    this._elementContainer.style.overflow = 'hidden';
    this._elementContainer.style.whiteSpace = 'nowrap';
}

showHostname(url) {
    if (!this._options.hostnameSelector) {
        return;
    }

    this._options.hostnameSelector.innerText = this.getHostname(url);
}


showMarquee(aCollection) {
    
    try {
        const animKeyframes = [{
            transform: 'translateX(0)'
        },
        {
            transform: 'translateX(-100%)'
        }
        ];

        const animOptions = {
            duration: 25000, // The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. Although this is technically optional, keep in mind that your animation will not run if this value is 0.
            easing: 'linear', // The rate of the animation's change over time. Accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)". Defaults to "linear".
            iterations: 1, // The number of times the animation should repeat. Defaults to 1, and can also take a value of Infinity to make it repeat for as long as the element exists.
            delay: 0, // The number of milliseconds to delay the start of the animation. Defaults to 0.
            endDelay: 0 // The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to 0. 
        };

        animOptions.duration = aCollection.length * this._options.speed;

        const elementChildNode = document.createElement('span');
        elementChildNode.style.display = 'inline-block';
        elementChildNode.style.paddingLeft = '100%';

        //const textNode = document.createTextNode(text);
        console.log(aCollection.lenght);
        aCollection.forEach(function(item, index, array) {
            elementChildNode.appendChild(item)
        })
        console.log("totale:");
        console.log(elementChildNode);
        //elementChildNode.appendChild(textNode);

        //this._elementContainer.appendChild(elementChildNode);
        
        this._anim = elementChildNode.animate(animKeyframes, animOptions);
        console.log('start animation');
        this._anim.onfinish = () => {
            console.log('end');
            while (this._elementContainer.firstChild) {
                this._elementContainer.firstChild.remove();
            }
            delete this._anim.onfinish;

            this.nextURL();
        };

        this._lastTime = Date.now();
    } catch (err) {
        console.error(err);
    }
}

increaseIndex() {
    this._urlIndex += 1;
    if (this._urlIndex > this._feedURLs.length - 1) {
        this._urlIndex = 0;
    }
}

/**
 * Fetch RSS 
 * @param {string} feedURL RSS XML url
 */
fetchRSS(feedURL) {
    return new Promise((resolve, reject) => {
        console.info(`Start fetching ${feedURL}...`);

        fetch(feedURL, { mode: 'cors', redirect: 'follow' })
            .then((response) => {
                return response.text();
            })
            .then((xmlTxt) => {
                return resolve(xmlTxt);
            })
            .catch(() => {
                console.error('Error in fetching the RSS feed');
                reject();
            })
    });
}

/**
 * Parses RSS XML feed
 * 
 * - Select title elementContainer
 * - add dot separator between "headlines"
 * - remove <![CDATA[ string
 * - remove html tags
 * 
 * @param {string} xmlText 
 * @returns {string} parsed feed
 */
parseXMLFeed(xmlText) {
    try {
        const parser = new DOMParser();
        const doc = parser.parseFromString(xmlText, "text/xml");

        let news = '';
        let aCollection=[];
        let totals = 0;

        for (let item of doc.querySelectorAll('item')) {
            let title = item.getElementsByTagName("title")[0].childNodes[0].nodeValue;
            // let description = item.getElementsByTagName("description")[0].childNodes[0].nodeValue;
            let link = item.getElementsByTagName("link")[0].childNodes[0].nodeValue;
            if (title) {
                if (news.length) {
                    news += '\xa0' + ' • ' + '\xa0';
                }
                title = this.remoteCData(title);
                title = this.stripTags(title);
                news += title;
                var a = document.createElement('a');
                var linkText = document.createTextNode(title);
                a.appendChild(linkText);
                a.title = title;
                a.href = link;
                aCollection.push(a);
                totals += 1;
            }


            if (this._options.maxItems !== null && totals >= this._options.maxItems) {
                console.info('Maximum items reached!');
                break;
            }
        }
        //console.log(aCollection);
        //console.log(news);
        console.info(`Parsed ${totals} title(s)`);
        return aCollection;
    } catch (err) {
        console.error(err);
        return '   ';
    }
}

stripTags(textWithTags) {
    return textWithTags.replace(/<(.|\n)*?>/g, '');
}

remoteCData(originalText) {
    return originalText.replace("<![CDATA[", "").replace("]]>", "");
}
}

A animação que não ocorre está em função: showMarquee (aCollection). O site original mostra como testá-lo.

Obrigado,

Fabrizio Bartolomucci

o problema era devido a comentários: this._elementContainer.appendChild (elementChildNode); além disso, tive que ajustar a velocidade modificando:

animOptions.duration = aCollection.length * this._options.speed*10;

e, finalmente, para restaurar o ponto para separar os itens.

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

O que há de errado em uma classe interna não usar uma classe externa em Java?

O que há de errado em usar um 'exceto' simples?

O que há de errado em usar 'Not In' nesta consulta SQL?

O que há de errado em usar goto?

O que há de errado em usar TThread.Resume?

O que há de errado em usar um FragmentStatePagerAdapter?

Há algum benefício em usar settings.json em vez de uma coleção mongodb?

Mysql concat não funciona se uma coluna for nula, o que há de errado com a consulta?

Compreendendo o carregamento infinito ao usar o Scrapy - o que há de errado?

Por que uma exceção de ponteiro nulo não é verificada em tempo de compilação, por exemplo, ao iterar uma coleção nula em Java em vez de uma exceção de tempo de execução?

Por que uma exceção de ponteiro nulo não é verificada em tempo de compilação, por exemplo, ao iterar uma coleção nula em Java em vez de uma exceção de tempo de execução?

Por que não posso usar uma instrução if em vez de usar assert em C ++?

A função Item.Restrict não funciona ao usar like em vez de =

Por que o monkeypatch do python não funciona ao importar uma classe em vez de um módulo?

O evento Vuejs @click funciona errado de vez em quando

O que há de errado em minha hierarquia de classes para uma desserialização de xml?

O que há de errado em usar a intenção de envio para outra Activity?

O que há de errado em gravar em uma variável global no modo de produção?

O que há de errado em usar uma matriz primitiva como um parâmetro de tipo real em Java 5?

Minha implementação de iterador não funciona. O que há de errado com ela?

O que posso usar em vez de uma gaveta deslizante

Em C, o que posso usar em vez de strlen se não quiser usar uma função de string?

O que há de errado com minha tentativa de concatenar em uma instrução if

O que há de errado em ocultar o método virtual de uma classe base?

O que há de errado com o iterador para uma estrutura de dados em árvore?

O que há de errado em usar a igualdade de herança em Java?

Por que a concatenação de strings não é executada ao usar um campo em vez de uma propriedade de expressão?

Obtendo o tipo errado ao usar uma função importada de C em Python - Ctypes

O que há de errado em acionar o mouseup arrastando?

TOP lista

  1. 1

    Obtendo apenas o número de uma String C #

  2. 2

    como acessar a conexão do banco de dados em visualizações no codeigniter 4

  3. 3

    Como redimensionar tabelas geradas pelo Stargazer no R Markdown?

  4. 4

    recuperar valores em uma linha de dataframes com base no valor em outro

  5. 5

    Firebase Storage Web: como fazer upload de um arquivo

  6. 6

    为什么在使用argc和argv时不会出现分段错误?

  7. 7

    Como agrupar objetos em uma lista em outras listas por atributo usando streams e Java 8?

  8. 8

    Qual é a diferença entre o tamanho do passo e a taxa de aprendizado no aprendizado de máquina?

  9. 9

    Por que definir a variável como uma string vazia não é necessária em meu código?

  10. 10

    Insert a value to hidden input Laravel Blade

  11. 11

    Configure o coletor de arquivos Serilog para usar um arquivo de log por execução do aplicativo

  12. 12

    Como ler arquivos yaml em laravel?

  13. 13

    Série Fibonacci usando programação dinâmica

  14. 14

    Como adicionar elementos a um array multidimensional em PHP?

  15. 15

    How do I set an IronPython ctypes c_char_p pointer to an absolute address that is not a valid memory address to read from?

  16. 16

    Por que meus intervalos de confiança de 95% da minha regressão multivariada estão sendo plotados como uma linha de loess?

  17. 17

    Como faço para que um formulário no Access se torne uma janela pop-up?

  18. 18

    Como anexar um arquivo a um e-mail usando JavaMail

  19. 19

    Adicionar campos de texto dinâmicos por meio da seleção suspensa de componentes?

  20. 20

    如何使用SOM算法进行分类预测

  21. 21

    TypeError não capturado: não é possível atribuir a propriedade somente leitura

quentelabel

Arquivo