Skip to content

Instantly share code, notes, and snippets.

@erikfig

erikfig/checkNeedMoreData

Last active Dec 23, 2018
Embed
What would you like to do?
checkNeedMoreData() {
// aqui eu verifico se posso/preciso de mais conteúdo
// primeiramente pego a posição do elemento de paginação na página
let bottom = this.$el.getBoundingClientRect().bottom;
// desconto uma margem, para evitar ter que carregar só quando o usuário chegar ao fim
// isso ajuda a melhorar a experiência e para o usuário nem perceber que você adicionou dinâmicamente
bottom -= this.margin;
// verifico se já chegamos no ponto especificado e se não estamos carregando algo
return bottom <= window.innerHeight && !this.onLoad;
}
getMore() {
// aqui eu vou adicionar mais conteúdo a página
// incremento a página (se estiver na 1, vou pegar o valor da 2 e assim por diante)
this.currentPage++;
// informo que estou carregando informações
this.onLoad = true;
// executo o método load com os dados fornecidos pelos props do component
this.load('?page=' + this.currentPage, this.paginationBox).then((data) => {
// com posse do conteúdo da próxima página eu adiciono ao DOM
const item = document.querySelector(this.paginationBox);
item.innerHTML += data;
// e informo que não estou mais carregando conteúdo
this.onLoad = false;
});
},
// pego a url da próxima página e o seletor do elemento com o conteúdo
load(url, element) {
// pego o conteúdo da página via ajax
return fetch(url).then((res) => {
// transformo em texto
return res.text();
}).then((data) => {
// a variável data contém o valor de res.text()
// eu pego a posição da tag box
let slicex = data.indexOf("<body");
// separei o > de fechamento para garantir que o body seja encontrado
// mesmo se existir algum atributo na tag de abertura
slicex = data.indexOf(">", slicex);
// pego a posição da tag de fechamento do body
const slicey = data.lastIndexOf("</body>");
// e com as posições definidas eu extraio apenas o conteúdo do body
const content = data.slice(slicex + 1, slicey);
// crio um body "virtual"
const body = document.createElement("body");
// adiciono o conteúdo extraédo
body.innerHTML = content;
// e pego apenas o html do elemento definido no seletor
const response = body.querySelector(element);
// retorno se existir
if (response) {
return response.innerHTML;
}
// se não existir retorno nulo
return null;
})
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.