Base Directory:
/home/ecedu/public_html/new/Views/layouts
View File: list-news-layout.php
<?php
$typeId = isset($_GET['i']) ? (int)$_GET['i'] : 0;
$type = $typeId;
// Set the label using switch
$label = $L['news']; // Default label
switch ($typeId) {
case 1:
$label = $L['news'];
break;
case 2:
$label = $L['conferences'];
break;
case 3:
$label = $L['activities'];
break;
case 4:
$label = $L['publications'];
break;
case 5:
$label = $L['research_articles'];
break;
case 6:
$label = $L['events_participations'];
break;
case 7:
$label = $L['education_list'];
break;
default:
$label = readMenu($menu, $typeId, $lang);
break;
}
?>
<main id="content">
<div class="container">
<div class="row">
<!--breadcrumb-->
<div class="col-12">
<div class="breadcrumb u-breadcrumb pt-0 px-0 mb-2 bg-transparent small" style="margin-top:-5px;">
<a class="breadcrumb-item" href="index.php?lang=<?= $lang ?>"><?= $L['home'] ?></a>
» <?= $label; ?>
</div>
</div>
<div class="col-md-8">
<!-- عنوان -->
<div class="block-title-6">
<h4 class="h5 border-primary">
<span class="bg-primary text-white"> <?= htmlspecialchars($label) ?></span>
</h4>
</div>
<!-- الأخبار -->
<div class="big-post">
<div class="border-bottom-last-0 first-pt-0" id="news-container">
<!-- يتم تعبئة الأخبار هنا بالـ JS -->
</div>
</div>
<!-- زر أو تحميل تلقائي -->
<div id="loader" class="text-center py-3 text-muted"><?= htmlspecialchars($L['read_more']) ?></div>
</div>
<!-- عمود جانبي -->
<?php include('right_sidebar.php'); ?>
</div>
</div>
</main>
<script>
/* متغيّرات من PHP */
const typeId = <?= (int)$typeId ?>;
const lang = <?= json_encode($lang) ?>;
const isHandleScroll = true;
let offset = 0;
let total = 0;
let loading = false;
/* عناصر DOM */
const box = document.querySelector('.big-post');
const container = document.getElementById('news-container');
const loader = document.getElementById('loader');
/* حمّل الدفعة الأولى ثم اربط التمرير */
loadNews();
/*-----------------------------------------
| جلب دفعة جديدة
*----------------------------------------*/
async function loadNews() {
if (loading) return;
if (total && offset >= total) return; // انتهينا
loading = true;
toggleLoader(true);
try {
const url = `service/loadMoreNews.php?typeId=${typeId}&lang=${lang}&offset=${offset}`;
const res = await fetch(url);
if (!res.ok) throw new Error(res.statusText);
const { total: t, rows } = await res.json();
total = t;
rows.forEach(news => container.appendChild(buildCard(news,lang,typeId)));
offset += rows.length;
if (offset === 0 && total === 0) {
container.innerHTML =
'<h2 class="text-center py-5 text-muted"><?= $L['no_result'] ?>!</h2>';
}
} catch (e) {
console.error(e);
// alert('حدث خطأ أثناء جلب الأخبار ✖');
}
toggleLoader(false);
loading = false;
}
/*-----------------------------------------
| إنشاء البطاقة
*----------------------------------------*/
function buildCard(news,lang,type) {
const plyIcon =playIcon(news,lang,type);
const card = document.createElement('article');
card.className = 'card card-full hover-a py-4';
card.innerHTML = `
<div class="row">
<div class="col-sm-6 col-md-12 col-lg-6">
<div class="image-wrapper position-relative w-100 overflow-hidden" style="aspect-ratio: 16/9;">
<a href="article.php?id=${news.id}&type=${type}">
<img class="img-fluid object-fit-cover"
src="${news.image}" alt="${news.title}"
srcset="${news.image}"
loading="lazy">
</a>
${plyIcon}
</div>
</div>
<div class="col-sm-6 col-md-12 col-lg-6 d-flex flex-column justify-content-center">
<div class="card-body pt-3 pt-sm-0 pt-md-3 pt-lg-0">
<h3 class="card-title h2 h3-sm h2-md">
<a href="article.php?id=${news.id}&type=${type}" class="text-decoration-none">${news.title}</a>
</h3>
<div class="card-text mb-2 text-muted small">
<span class="d-none d-sm-inline me-1">
<a class="font-weight-bold" href="article.php?id=${news.id}&type=${type}">${news.author}</a>
</span>
<time datetime="${news.date_raw}">${news.date}</time>
</div>
<p class="card-text">${news.description}</p>
</div>
</div>
</div>`;
return card;
}
function playIcon(news, lang, type) {
const id = news.news_id;
const url = news.news_link;
if (url) {
return `
<div class="post-type-icon" style="width: 36px;height: 36px;
border-radius: 50%;
background-color: rgba(0, 123, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;">
<a href="article.php?id=${id}&type=${type}&lang=${lang}" style="display: block; width: 100%; height: 100%;">
<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 16 16" style="width: 100%; height: 100%;">
<path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
</svg>
</a>
</div>
`;
} else {
return '';
}
}
/*-----------------------------------------
| التمرير
*----------------------------------------*/
function handleScroll() {
if (loading) return;
const nearBottom = box.scrollTop + box.clientHeight >= box.scrollHeight - 300;
if (nearBottom) loadNews();
}
/*-----------------------------------------
| مؤشر التحميل
*----------------------------------------*/
function toggleLoader(show) {
loader.style.display = show ? 'block' : 'none';
}
</script>