hesu-JT/js/news.js

/* ============================================================
   HESU — News & Insights listing (vanilla JS, no dependencies)
   · category tabs (Company News / Delivery Cases / Exhibition Info)
   · renders one row per article: text-left + image-right
   · client-side pagination (5 per page) over the filtered set
   · staggered scroll-reveal for rows + [data-reveal] elements
   ============================================================ */
(function () {
  'use strict';

  /* ---------- article data (newest first; cat matches a tab) ----------
     Only Company News has real content for now; the other categories
     are intentionally empty and show a "coming soon" state. ---------- */
  var ARTICLES = [
    { cat: 'Company News', date: '2025.04.15', title: 'Hesu Industrial Participates in the 139th Canton Fair',
      excerpt: 'The 139th China Import and Export Fair (Canton Fair) was successfully held in Guangzhou. As a key enterprise in the foreign trade industry, Hesu Industrial organized a professional team to attend the exhibition.',
      img: 'image/news/news1.jpg', href: 'news-detail.html?id=1' },
    { cat: 'Company News', date: '2025.03.02', title: 'Hesu Industrial Dubai Branch Officially Opens for Business',
      excerpt: 'Dubai is located at the core business hub of Asia, Europe and Africa, with superior geographical advantages, serving as an important transit center radiating the Gulf countries, West Asia and North Africa markets. Integrating local office',
      img: 'image/news/news2.jpg', href: 'news-detail.html?id=2' },
    { cat: 'Company News', date: '2025.02.10', title: 'Hesu Industrial West Africa Factory Officially Put into Use',
      excerpt: 'Equipped with standardized fully automatic production lines, the West Africa factory strictly follows the unified production technology and quality control standards of the headquarters.',
      img: 'image/news/news3.jpg', href: 'news-detail.html?id=3' },
    { cat: 'Company News', date: '2025.01.18', title: 'Global Customers Visit Hesu Industrial Headquarters in China',
      excerpt: 'The visiting customers successively inspected the company’s production workshops, raw material warehouses, quality inspection laboratories and product exhibition halls. They had a comprehensive understanding',
      img: 'image/news/news4.jpg', href: 'news-detail.html?id=4' }
  ];

  var PER_PAGE = 5;
  var page = 1;
  var currentCat = 'Company News';   /* default active tab */

  var grid = document.getElementById('newsGrid');
  var pager = document.getElementById('newsPagination');
  var tabsWrap = document.getElementById('newsTabs');
  if (!grid || !pager || !ARTICLES.length) return;

  function esc(s) {
    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }

  function filtered() {
    return ARTICLES.filter(function (a) { return a.cat === currentCat; });
  }
  function totalPages() {
    return Math.max(1, Math.ceil(filtered().length / PER_PAGE));
  }

  /* ---------- row markup: text left + image right ---------- */
  function rowHTML(a) {
    var href = a.href || '#';
    return '' +
      '<article class="nw-row">' +
        '<div class="nw-row__body">' +
          '<h3 class="nw-row__title">' + esc(a.title) + '</h3>' +
          '<p class="nw-row__excerpt">' + esc(a.excerpt) + '</p>' +
          '<a class="nw-row__more" href="' + href + '">Explore More </a>' +
        '</div>' +
        '<a class="nw-row__media" href="' + href + '" aria-label="' + esc(a.title) + '" tabindex="-1">' +
          '<img src="' + a.img + '" alt="' + esc(a.title) + '" loading="lazy" />' +
        '</a>' +
      '</article>';
  }

  function revealRows() {
    var rows = grid.querySelectorAll('.nw-row');
    if (!('IntersectionObserver' in window)) {
      rows.forEach(function (r) { r.classList.add('in'); });
      return;
    }
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); }
      });
    }, { threshold: 0.1 });
    rows.forEach(function (r, i) {
      r.style.transitionDelay = ((i % PER_PAGE) * 0.07) + 's';
      io.observe(r);
    });
  }

  function renderGrid() {
    var data = filtered();
    if (!data.length) {
      grid.innerHTML = '<div class="nw-empty">Coming soon — no ' + esc(currentCat) + ' yet.</div>';
      pager.style.display = 'none';
      return;
    }
    pager.style.display = '';
    var start = (page - 1) * PER_PAGE;
    grid.innerHTML = data.slice(start, start + PER_PAGE).map(rowHTML).join('');
    revealRows();
  }

  /* ---------- pagination ---------- */
  function makeButton(label, opts) {
    var b = document.createElement('button');
    b.type = 'button';
    b.className = 'nw-page' + (opts.nav ? ' nw-page--nav' : '') + (opts.active ? ' is-active' : '');
    b.innerHTML = label;
    if (opts.active) { b.setAttribute('aria-current', 'page'); b.disabled = true; }
    if (opts.disabled) b.disabled = true;
    if (typeof opts.go === 'number' && !opts.disabled && !opts.active) {
      b.addEventListener('click', function () { goTo(opts.go); });
    }
    return b;
  }

  function renderPager() {
    pager.innerHTML = '';
    var tp = totalPages();

    var prevBtn = makeButton('<span class="arrow" aria-hidden="true">‹</span>', { nav: true, disabled: page === 1, go: page - 1 });
    prevBtn.setAttribute('aria-label', 'Previous page');
    pager.appendChild(prevBtn);

    for (var i = 1; i <= tp; i++) {
      var nb = makeButton(String(i), { active: i === page, go: i });
      nb.setAttribute('aria-label', 'Page ' + i);
      pager.appendChild(nb);
    }

    var nextBtn = makeButton('<span class="arrow" aria-hidden="true">›</span>', { nav: true, disabled: page === tp, go: page + 1 });
    nextBtn.setAttribute('aria-label', 'Next page');
    pager.appendChild(nextBtn);
  }

  function goTo(n) {
    var tp = totalPages();
    if (n < 1 || n > tp || n === page) return;
    page = n;
    renderGrid();
    renderPager();
    scrollTop();
  }

  function scrollTop() {
    var head = document.querySelector('.nw-listing');
    if (head) {
      var top = head.getBoundingClientRect().top + window.scrollY - 70;
      window.scrollTo({ top: top, behavior: 'smooth' });
    }
  }

  /* ---------- category tabs ---------- */
  if (tabsWrap) {
    var tabs = tabsWrap.querySelectorAll('.nw-tab');
    tabs.forEach(function (t) {
      t.addEventListener('click', function () {
        if (t.classList.contains('is-active')) return;
        currentCat = t.getAttribute('data-cat');
        tabs.forEach(function (x) {
          x.classList.remove('is-active');
          x.setAttribute('aria-selected', 'false');
        });
        t.classList.add('is-active');
        t.setAttribute('aria-selected', 'true');
        page = 1;
        renderGrid();
        renderPager();
        scrollTop();
      });
    });
  }


  /* ---------- boot ---------- */
  renderGrid();
  renderPager();
})();