Skip to content

You should also implement (infinite scroll) for pages and forums #119

Description

@SeditioCMS

With this feature, users can better follow the next article or forum topic.

sample code

`define('SED_CODE', TRUE);
define('SED_ROOT', dirname(FILE));

require(SED_ROOT . '/system/functions.php');
require(SED_ROOT . '/datas/config.php');
require(SED_ROOT . '/system/common.php');

$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$articlesPerPage = 10;
$offset = ($page - 1) * $articlesPerPage;

$articles = array();

$sql = "SELECT page_id, page_title, page_text, page_date FROM $db_pages WHERE page_state=0 LIMIT $offset, $articlesPerPage";
$result = sed_sql_query($sql);

while ($row = sed_sql_fetchassoc($result)) {
$articles[] = $row;
}

header('Content-Type: application/json');
echo json_encode(['articles' => $articles]);`

`echo '<script>
let page = 1;
const loader = document.getElementById("loader");

const loadArticles = () => {
loader.style.display = "block";
fetch("loader.php?page=" + page)
.then(response => response.json())
.then(data => {
const articles = document.getElementById("articles");
data.articles.forEach(article => {
const articleElement = document.createElement("div");
articleElement.className = "article";
articleElement.innerHTML = <h2>${article.page_title}</h2><p>${article.page_text}</p><small>${article.page_date}</small>;
articles.appendChild(articleElement);
});
loader.style.display = "none";
page++;
});
};

const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
loadArticles();
}
}, {
rootMargin: "0px",
threshold: 1.0
});

observer.observe(loader);
</script>';`

Articles will be uploaded here
Yükleniyor...

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions