Feed Async

Feed Async é um recurso de funcionalidades que utiliza JavaScript para solicitar novos conteúdos sem recarregar a página.

feed_async()

A função auxiliar que habilita o carregamento assíncrono de conteúdo e registra internamente o gancho feed_async e carrega o arquivo responsável pela geração do conteúdo do feed.

Parâmetros:
$args array Configurações do feed assíncrono:

• selector string Seletor CSS do elemento que contém o feed. O padrão é #feed. Pode utilizar qualquer seletor compatível com querySelector(), incluindo classes e atributos data-*.
• file_location string Caminho do arquivo PHP responsável pela geração do conteúdo do feed. O padrão é feed-async.php.

Retorno: void

feed_async([
    'selector'      => '#master',
    'file_location' => TEMPLATE_PATH . 'feed.php',
]);

feed_async([
    'selector'      => '#feed',
    'file_location' => TEMPLATE_PATH . 'controller/feed.php',
]);

Quando file_location não for informado, o arquivo feed-async.php será utilizado como fallback.

<div data-feed="async"></div>

<div class="submit">
    <button class="btn js-loadmore">Carregar mais</button>
</div>

O atributo data-feed="async" e a classe js-loadmore são obrigatórios para que o JavaScript identifique, respectivamente, o elemento que receberá o conteúdo e o botão responsável por solicitar mais resultados.
Os elementos <div>, .submit e <button> são apenas exemplos de estrutura e podem ser substituídos conforme a necessidade do template.

constructor( settings ) {
    this.selector = settings.selector;
    
    this.container = document.querySelector( this.selector );
    
    this.feed   = this.container.querySelector('[data-feed="async"]');
    this.button = this.container.querySelector('.js-loadmore');
    
    ...

O elemento definido em selector funciona como o container da funcionalidade. Os elementos data-feed="async" e .js-loadmore devem estar dentro desse container.