Base Directory:
/home/ecedu/public_html/cce/Views/layouts
View File: search-layout.php
<?php
$queries = array();
parse_str($_SERVER['QUERY_STRING'], $queries);
$search="";
$htmlSearch="<center><h2>".$L['no_result']."!</h2><center>";
if ($queries && $queries['keywords'] ){
$search = str_replace("+", " ", $queries['keywords']);
$news_tag=$L['make_search'];
}
$label = $L['results'];
?>
<main id="content">
<div class="container">
<div class="row">
<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 – آمنة عبر json_encode */
const search = <?= json_encode($search, JSON_UNESCAPED_UNICODE) ?>;
const lang = <?= json_encode($lang) ?>;
let offset = 0;
let total = 0;
let loading = false;
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?search=${encodeURIComponent(search)}&lang=${lang}&offset=${offset}`;
const res = await fetch(url);
const json = await res.json();
total = json.total;
let rows = json.rows;
rows.forEach(news => container.appendChild(buildCard(news)));
offset += rows.length;
} catch (err) {
console.error(err);
alert('حدث خطأ أثناء جلب الأخبار ✖');
}
toggleLoader(false);
loading = false;
}
/*-----------------------------------------
| إنشاء بطاقة خبر واحدة
*----------------------------------------*/
function buildCard(news) {
const plyIcon =playIcon(news,lang,type);
const div = document.createElement('article');
div.className = 'card card-full hover-a py-4';
div.innerHTML = `
<div class="row">
<div class="col-sm-6 col-md-12 col-lg-6">
<div class="ratio_360-202 image-wrapper position-relative">
<a href="article.php?id=${news.id}">
<img class="img-fluid" width="337" height="337"
src="${news.image}" alt="${news.title}">
</a>
${plyIcon}
</div>
</div>
<div class="col-sm-6 col-md-12 col-lg-6">
<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}">${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}">${news.author}</a>
</span>
<time datetime="${news.date_raw}">${news.date}</time>
</div>
<p class="card-text">${news.description}</p>
</div>
</div>
</div>`;
return div;
}
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 box = document.querySelector('.big-post');
const nearBottom =
box.scrollTop + box.clientHeight >= box.scrollHeight - 400; // 400px قبل النهاية
if (nearBottom) loadNews();
}
/*-----------------------------------------
| مؤشر التحميل
*----------------------------------------*/
function toggleLoader(show) {
loader.style.display = show ? 'block' : 'none';
}
</script>