Upload static/hot_multi.js

static/hot_multi.js

@@ -1,6 +1,10 @@
 // === OVERRIDE: loadHotTopics loads from MULTIPLE hashtags ===
 // This file loaded AFTER app_v2.js, overrides the function
 
+let _htAll = []; // All articles from multi-hashtag, for lazy loading
+let _htPage = 0;
+const _HT_PER_PAGE = 12;
+
 async function loadHotTopics(){
   const j=await fetch('/api/hot_topics').then(r=>r.json()).catch(()=>({topics:[]}));
   const el=document.getElementById('hot-topics');if(!el)return;
@@ -9,9 +13,9 @@ async function loadHotTopics(){
     const topicText=t.topic||t.label.replace(/^#/,'');
     return`<button class="hot-chip" onclick="searchTopic('${topicText.replace(/'/g,"\\'")}')">${esc(t.label)}</button>`;
   }).join('');
-  // Load tin HOT = tổng hợp từ TOP 3 hashtag nóng nhất
+  // Load tin HOT = tổng hợp từ TOP 5 hashtag nóng nhất (có AI Thế Giới & AI Việt Nam)
   if(topics.length>=2){
-    loadMultiHashtag(topics.slice(0,3).map(t=>t.topic||t.label.replace(/^#/,'')));
+    loadMultiHashtag(topics.slice(0,5).map(t=>t.topic||t.label.replace(/^#/,'')));
   }else if(topics.length){
     searchTopic(topics[0].topic||topics[0].label.replace(/^#/,''));
   }
@@ -33,17 +37,42 @@ async function loadMultiHashtag(topicList){
         if(src&&src.url&&!seen.has(src.url)){seen.add(src.url);src._topic=topicList[j];all.push(src);}
       }
     }
+    _htAll = all;
+    _htPage = 0;
     if(!all.length){box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT</h3><div style="color:#888;padding:8px">Đang cập nhật...</div></div>`;return;}
-    let h=`<div class="hashtag-sources"><h3>🔥 Tin HOT tổng hợp <span style="font-size:10px;color:#888">(${all.length} bài · ${topicList.length} chủ đề)</span></h3><div id="ht-list">`;
-    all.slice(0,12).forEach((s,i)=>{
-      h+=`<div class="hashtag-src-item" onclick="readArticle('${esc(s.url)}')"><div class="hashtag-src-img" id="ht-img-${i}"></div><div class="hashtag-src-text"><div class="hashtag-src-title">${esc(s.title)}</div><div class="hashtag-src-via">${esc(s.via||'')} · <span style="color:#f0c040;font-size:9px">#${esc(s._topic||'')}</span></div></div></div>`;
-    });
-    h+=`</div><div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:8px">`;
-    topicList.forEach(t=>{h+=`<button class="hot-chip" onclick="searchTopic('${t.replace(/'/g,"\\'")}')" style="font-size:10px">🔍 #${esc(t)}</button>`;});
-    h+=`</div></div>`;
-    box.innerHTML=h;
-    // Lazy load images
-    all.slice(0,12).forEach((s,i)=>{if(!s.url)return;fetch('/api/article?url='+encodeURIComponent(s.url)).then(r=>r.json()).then(d=>{if(d&&(d.og_image||d.img)){const el=document.getElementById('ht-img-'+i);if(el)el.innerHTML=`<img src="${esc(d.og_image||d.img)}" onerror="this.style.display='none'">`;}}).catch(()=>{});});
+    _renderHotPage(box, topicList);
     _htTopic=topicList[0];
   }catch(e){box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT</h3><div style="color:#e74c3c;padding:8px">Lỗi tải tin</div></div>`;}
+}
+
+function _renderHotPage(box, topicList){
+  const start = 0;
+  const end = (_htPage + 1) * _HT_PER_PAGE;
+  const pageItems = _htAll.slice(0, end);
+  let h=`<div class="hashtag-sources"><h3>🔥 Tin HOT tổng hợp <span style="font-size:10px;color:#888">(${_htAll.length} bài · ${topicList.length} chủ đề)</span></h3><div id="ht-list">`;
+  pageItems.forEach((s,i)=>{
+    h+=`<div class="hashtag-src-item" onclick="readArticle('${esc(s.url)}')"><div class="hashtag-src-img" id="ht-img-${i}"></div><div class="hashtag-src-text"><div class="hashtag-src-title">${esc(s.title)}</div><div class="hashtag-src-via">${esc(s.via||'')} · <span style="color:#f0c040;font-size:9px">#${esc(s._topic||'')}</span></div></div></div>`;
+  });
+  h+=`</div><div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:8px">`;
+  topicList.forEach(t=>{h+=`<button class="hot-chip" onclick="searchTopic('${t.replace(/'/g,"\\'")}')" style="font-size:10px">🔍 #${esc(t)}</button>`;});
+  h+=`</div>`;
+  // Nút lazy load - tải thêm tin
+  if (_htAll.length > end) {
+    h+=`<button class="hashtag-load-more" id="ht-load-more" onclick="_loadMoreHot()">Tải thêm ${Math.min(_HT_PER_PAGE, _htAll.length - end)} tin ▼</button>`;
+  }
+  h+=`</div>`;
+  box.innerHTML=h;
+  // Lazy load images
+  pageItems.forEach((s,i)=>{if(!s.url)return;fetch('/api/article?url='+encodeURIComponent(s.url)).then(r=>r.json()).then(d=>{if(d&&(d.og_image||d.img)){const el=document.getElementById('ht-img-'+i);if(el)el.innerHTML=`<img src="${esc(d.og_image||d.img)}" onerror="this.style.display='none'">`;}}).catch(()=>{});});
+}
+
+function _loadMoreHot(){
+  _htPage++;
+  const box = document.getElementById('hashtag-box');
+  if(!box)return;
+  // Extract topicList from the current buttons
+  const chipBtns = box.querySelectorAll('.hot-chip');
+  const topicList = Array.from(chipBtns).map(b => b.textContent.replace(/^🔍\s*#/, '').trim());
+  _renderHotPage(box, topicList.length ? topicList : [_htTopic]);
+  toast('📰 Đã tải thêm tin');
 }