Update script.js

script.js

@@ -1,76 +1,175 @@
+// عناصر الواجهة
+const searchBox   = document.getElementById("searchBox");
+const clearSearch = document.getElementById("clearSearch");
+const pageSizeEl  = document.getElementById("pageSize");
+const toggleTheme = document.getElementById("toggleTheme");
+const tableBody   = document.getElementById("tableBody");
+const pagination  = document.getElementById("pagination");
+const counter     = document.getElementById("counter");
+const loading     = document.getElementById("loading");
+
+// حالة البيانات
 let data = [];
 let filtered = [];
+let currentPage = 1;
+let rowsPerPage = parseInt(pageSizeEl.value, 10);
 
-const searchBox = document.getElementById("searchBox");
-const tableBody = document.getElementById("tableBody");
-const counter = document.getElementById("counter");
-const loading = document.getElementById("loading");
-const toggleTheme = document.getElementById("toggleTheme");
+// ألوان جانبية للعمود الثالث
+const colors = ["#00bcd4","#4caf50","#f44336","#ff9800","#9c27b0","#e91e63","#009688","#3f51b5","#607d8b","#795548"];
 
-// --- تحميل البيانات
-fetch("data.json")
-  .then(r=>r.json())
-  .then(json=>{
-    data=json;
-    filtered=data;
-    loading.style.display="none";
-    updateView();
-  })
-  .catch(()=> loading.textContent="تعذر تحميل البيانات.");
+// تطبيع عربي للبحث (يتجاهل التشكيل ويُوحّد الألفات/الياء/الهاء المربوطة)
+function normalizeArabic(str=""){
+  return str
+    .replace(/[\u064B-\u0652]/g, "")  // التشكيل
+    .replace(/[أإآا]/g,"ا")
+    .replace(/ى/g,"ي")
+    .replace(/ؤ/g,"و")
+    .replace(/ئ/g,"ي")
+    .replace(/ة/g,"ه")
+    .toLowerCase();
+}
+function matches(text, q){
+  if(!q) return true;
+  return normalizeArabic(String(text)).includes(normalizeArabic(q));
+}
 
-// --- تحديث العرض
-function updateView(){
-  const q=searchBox.value.trim();
-  filtered=data.filter(it=>{
-    return matches(it.code,q) || matches(it.activity,q);
-  });
-  counter.textContent="عدد الأنشطة الاقتصادية: "+filtered.length;
-  renderTable();
+// تمييز الكلمة داخل النص
+function highlight(text, q){
+  if(!q) return text;
+  const esc = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return String(text).replace(new RegExp(esc, 'gi'), m => `<mark class="hl">${m}</mark>`);
 }
 
+// ترقيم الصفحات
+function renderPagination(){
+  const pages = Math.ceil(filtered.length / rowsPerPage);
+  pagination.innerHTML = "";
+  if (pages <= 1) return;
+
+  const makeBtn = (label, page, active=false, disabled=false)=>{
+    const b = document.createElement("button");
+    b.textContent = label;
+    b.className = "page-btn" + (active ? " active" : "");
+    b.disabled = disabled;
+    b.addEventListener("click", ()=>{ currentPage = page; updateView(); window.scrollTo({top:0, behavior:"smooth"}); });
+    return b;
+  };
+
+  pagination.appendChild(makeBtn("‹ السابق", Math.max(1, currentPage-1), false, currentPage===1));
+
+  const windowSize = 5;
+  const total = pages;
+  let start = Math.max(1, currentPage - Math.floor(windowSize/2));
+  let end   = Math.min(total, start + windowSize - 1);
+  if (end - start + 1 < windowSize) start = Math.max(1, end - windowSize + 1);
+
+  if (start > 1) pagination.appendChild(makeBtn("1", 1, currentPage===1));
+  if (start > 2) pagination.appendChild(Object.assign(document.createElement("span"), {className:"dots", textContent:"..."}));
+  for (let p=start; p<=end; p++) pagination.appendChild(makeBtn(String(p), p, p===currentPage));
+  if (end < total - 1) pagination.appendChild(Object.assign(document.createElement("span"), {className:"dots", textContent:"..."}));
+  if (end < total) pagination.appendChild(makeBtn(String(total), total, currentPage===total));
+
+  pagination.appendChild(makeBtn("التالي ›", Math.min(total, currentPage+1), false, currentPage===total));
+}
+
+// عرض الجدول لصفحة واحدة
 function renderTable(){
-  tableBody.innerHTML="";
-  filtered.forEach(it=>{
-    const tr=document.createElement("tr");
-    tr.innerHTML=`<td>${it.code}</td><td>${it.activity}</td>`;
+  const q = searchBox.value.trim();
+  tableBody.innerHTML = "";
+
+  const start = (currentPage - 1) * rowsPerPage;
+  const pageItems = filtered.slice(start, start + rowsPerPage);
+
+  if (pageItems.length === 0) {
+    const tr = document.createElement("tr");
+    const td = document.createElement("td");
+    td.colSpan = 3;
+    td.textContent = "لا توجد نتائج مطابقة.";
+    td.style.textAlign = "center";
+    td.style.color = "#888";
+    tr.appendChild(td);
+    tableBody.appendChild(tr);
+    return;
+  }
+
+  pageItems.forEach((it, i)=>{
+    const tr = document.createElement("tr");
+
+    const codeTd = document.createElement("td");
+    codeTd.innerHTML = highlight(it.code ?? "", q);
+
+    const actTd = document.createElement("td");
+    actTd.innerHTML  = highlight(it.activity ?? "", q);
+
+    const colorTd = document.createElement("td");
+    const colorBar = document.createElement("div");
+    colorBar.className = "color-bar";
+    colorBar.style.backgroundColor = colors[i % colors.length];
+    colorTd.appendChild(colorBar);
+
+    tr.appendChild(codeTd);
+    tr.appendChild(actTd);
+    tr.appendChild(colorTd);
     tableBody.appendChild(tr);
   });
 }
 
-function matches(text, query){
-  if(!query) return true;
-  return text.toString().toLowerCase().includes(query.toLowerCase());
+// تحديث العرض (تصفية + عداد + جدول + ترقيم)
+function updateView(){
+  const q = searchBox.value.trim();
+  filtered = data.filter(it => matches(it.code, q) || matches(it.activity, q));
+  counter.textContent = `عدد الأنشطة الاقتصادية: ${filtered.length.toLocaleString()}`;
+  loading.style.display = "none";
+  renderTable();
+  renderPagination();
 }
 
-searchBox.addEventListener("input", updateView);
-
-// --- نسخ الرمز عند النقر
-tableBody.addEventListener("click", async (e)=>{
-  const cell = e.target.closest("td");
-  if(!cell) return;
-  const colIndex = [...cell.parentElement.children].indexOf(cell);
-  if(colIndex === 0){ // أول عمود (الرمز)
-    const text = cell.innerText.trim();
-    try{ await navigator.clipboard.writeText(text); showToast("تم نسخ الرمز: "+text); }
-    catch{ showToast("تعذر النسخ"); }
-  }
+// زر مسح البحث
+clearSearch.addEventListener("click", ()=>{
+  searchBox.value = "";
+  searchBox.focus();
+  currentPage = 1;
+  updateView();
 });
 
-function showToast(msg){
-  let t=document.getElementById("toast");
-  if(!t){ t=document.createElement("div"); t.id="toast"; document.body.appendChild(t); }
-  t.textContent=msg;
-  t.className="show";
-  setTimeout(()=> t.className="",1500);
-}
+// بحث بتأخير بسيط (يقلل الضغط على الجوال)
+function debounce(fn, delay=200){ let t; return (...a)=>{ clearTimeout(t); t=setTimeout(()=>fn(...a), delay); }; }
+searchBox.addEventListener("input", debounce(()=>{
+  currentPage = 1;
+  updateView();
+}, 180));
 
-// --- الوضع الليلي
-if(localStorage.getItem("theme")==="dark"){ document.documentElement.classList.add("dark"); }
+// تغيير حجم الصفحة
+pageSizeEl.addEventListener("change", ()=>{
+  rowsPerPage = parseInt(pageSizeEl.value, 10);
+  currentPage = 1;
+  updateView();
+});
 
+// الوضع الليلي اختياري (لا تشغيل تلقائي)
+if (localStorage.getItem("theme")==="dark") {
+  document.documentElement.classList.add("dark");
+  toggleTheme.textContent = "الوضع الفاتح ☀️";
+} else {
+  toggleTheme.textContent = "الوضع الليلي 🌙";
+}
 toggleTheme.addEventListener("click", ()=>{
   document.documentElement.classList.toggle("dark");
-  const mode=document.documentElement.classList.contains("dark")?"dark":"light";
+  const mode = document.documentElement.classList.contains("dark") ? "dark" : "light";
   localStorage.setItem("theme", mode);
-  toggleTheme.textContent= mode==="dark" ? "الوضع الفاتح ☀️" : "الوضع الليلي 🌙";
+  toggleTheme.textContent = mode==="dark" ? "الوضع الفاتح ☀️" : "الوضع الليلي 🌙";
+});
+
+// تحميل البيانات مرة واحدة
+fetch("data.json")
+  .then(r=>r.json())
+  .then(json=>{
+    data = json;
+    updateView();
+  })
+  .catch(()=>{ if(loading) loading.textContent="تعذر تحميل البيانات."; });
+
+// اختصار لوحة مفاتيح لسهولة الوصول للبحث
+document.addEventListener("keydown", (e)=>{
+  if(e.key==="/"){ e.preventDefault(); searchBox.focus(); }
 });
-toggleTheme.textContent=document.documentElement.classList.contains("dark") ? "الوضع الفاتح ☀️" : "الوضع الليلي 🌙";