JS working for Single Style, with debud function [ <script> (function(){ /* =======================================================...
JS working for Single Style, with debud function
[
<script>
(function(){
/* =========================================================
CONFIG SECTION CODE STARTS HERE
========================================================= */
const DEBUG = true;
function log(...args){
if(DEBUG) console.log("%c[RAIL]","color:#4CAF50;font-weight:bold;", ...args);
}
function warn(...args){
if(DEBUG) console.warn("%c[RAIL WARN]","color:#FF9800;font-weight:bold;", ...args);
}
function errorLog(...args){
if(DEBUG) console.error("%c[RAIL ERROR]","color:#F44336;font-weight:bold;", ...args);
}
function debugGroup(title, fn){
if(!DEBUG){ fn(); return; }
console.groupCollapsed("🔎 " + title);
try{ fn(); } catch(e){ console.error(e); }
console.groupEnd();
}
function debugTime(label){
if(!DEBUG) return { end:()=>{} };
console.time(label);
return { end:()=>console.timeEnd(label) };
}
const SHEET_ID="1tj3xg0toFl8vT_O0SFQY2inq6XZqKRSqPMGlgcbLXMI";
const BASE=`https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?`;
const MAX_LINKS=7;
const rail=document.getElementById("rail_show");
if(!rail){
errorLog("Rail container not found.");
return;
}
const currentURL=location.href.split("?")[0]
.replace(/\/$/,"")
.toLowerCase();
log("Current URL:", currentURL);
const globalControl=document.getElementById("globalControl");
const globalStyle=globalControl?.getAttribute("data-style")?.toLowerCase() || "card";
/* =========================================================
CONFIG SECTION CODE ENDS HERE
========================================================= */
/* =========================================================
PARSE FUNCTION SECTION CODE STARTS HERE
========================================================= */
function parse(text){
debugGroup("PARSE FUNCTION", ()=>{
log("Raw response length:", text?.length);
});
const json=text.match(/google\.visualization\.Query\.setResponse\((.*)\)/);
if(!json){
warn("Parse failed.");
return [];
}
const rows = JSON.parse(json[1]).table.rows;
log("Rows extracted:", rows.length);
return rows;
}
/* =========================================================
PARSE FUNCTION SECTION CODE ENDS HERE
========================================================= */
/* =========================================================
STEP 1 FETCH SUBCATEGORY STARTS HERE
========================================================= */
log("STEP 1: Fetching subcategory...");
const step1Query=`
select D
where lower(F)='${currentURL}'
limit 1
`;
fetch(BASE+"tqx=out:json&tq="+encodeURIComponent(step1Query))
.then(r=>r.text())
.then(t=>{
const rows1=parse(t);
if(!rows1.length){
warn("Subcategory not found");
return;
}
const currentSubcat=rows1[0].c[0]?.v;
if(!currentSubcat){
warn("Subcategory empty");
return;
}
log("STEP 1 SUCCESS:", currentSubcat);
/* =========================================================
STEP 2 FETCH RELATED POSTS STARTS HERE
========================================================= */
const step2Query=`
select A,B,C,D,E,F,G,H,I,J,K,L,M
where D='${currentSubcat}'
and (M!='hide' or M is null)
`;
return fetch(BASE+"tqx=out:json&tq="+encodeURIComponent(step2Query));
})
.then(r=>r?.text())
.then(t=>{
if(!t) return;
const rows=parse(t);
const posts=rows.map(r=>{
const c=r.c;
return {
subcat:c[3]?.v||"",
title:c[4]?.v||"",
url:(c[5]?.v||"").toLowerCase(),
img:c[6]?.v||"",
author:c[7]?.v||"",
topics:c[9]?.v||"",
keywords:c[10]?.v||"",
style:(c[11]?.v||"").toLowerCase()
};
});
const related=posts.filter(p=>p.url!==currentURL);
debugGroup("STEP 2 SUMMARY", ()=>{
log("Total posts:", posts.length);
log("Related posts:", related.length);
});
if(!related.length) return;
/* =========================================================
HEADER RENDER SECTION STARTS HERE
========================================================= */
const currentPost=posts.find(p=>p.url===currentURL);
if(!currentPost) return;
const headerTopics = currentPost.topics
? `
<span class="header-topics">
<span class="subcat-label">Topics:</span>
${currentPost.topics.split(",").map(t=>{
const topic = t.trim();
if(!topic) return "";
return `
<a href="/p/topic-search.html?topic=${encodeURIComponent(topic)}"
class="rail-topic">${topic}</a>
`;
}).join("")}
</span>
`
: "";
rail.innerHTML=`
<div class="content-rail">
<div class="content-rail-header">
<div class="content-rail-title">
Category
<a href="/p/subcat_12.html?subcat=${encodeURIComponent(currentPost.subcat)}">
${currentPost.subcat}
</a>
${headerTopics}
</div>
<div class="row-arrows">
<button type="button" class="prev">‹</button>
<button type="button" class="next">›</button>
</div>
</div>
<div class="content-rail-body"></div>
</div>
`;
const body=rail.querySelector(".content-rail-body");
/* =========================================================
HEADER RENDER SECTION ENDS HERE
========================================================= */
/* =========================================================
BATCH RENDERING SECTION STARTS HERE
========================================================= */
let BATCH_SIZE = window.innerWidth <= 480 ? 6 :
window.innerWidth <= 768 ? 8 :
window.innerWidth <= 1200 ? 12 : 16;
log("Batch size:", BATCH_SIZE);
let currentIndex=0;
function renderBatch(){
const timer=debugTime("Batch Render Time");
if(currentIndex>=related.length){
timer.end();
return;
}
const end=Math.min(currentIndex+BATCH_SIZE, related.length);
const fragment=document.createDocumentFragment();
for(let i=currentIndex;i<end;i++){
const p=related[i];
const item=document.createElement("div");
item.className="rail-item rail-"+(p.style||globalStyle);
item.innerHTML=`
${p.img ? `<div class="rail-thumb"><img src="${p.img}" loading="lazy"></div>`:""}
<a href="${p.url}" class="rail-title">${p.title}</a>
${p.author ? `<div class="rail-author">By
<a href="/p/contributor.html?author=${encodeURIComponent(p.author)}">${p.author}</a>
</div>`:""}
`;
fragment.appendChild(item);
}
body.appendChild(fragment);
currentIndex=end;
timer.end();
}
renderBatch();
/* =========================================================
BATCH RENDERING SECTION ENDS HERE
========================================================= */
/* =========================================================
LOOPING ARROW SCROLL SECTION CODE STARTS HERE
========================================================= */
document.addEventListener("click", function(e){
const scrollAmount = body.clientWidth * 0.8;
if(e.target.closest(".next")){
log("NEXT clicked");
const nearEnd = body.scrollLeft + body.clientWidth >= body.scrollWidth - 50;
const allRendered = currentIndex >= related.length;
if(nearEnd){
if(!allRendered){
const previousWidth = body.scrollWidth;
renderBatch();
setTimeout(()=>{
body.scrollTo({
left: previousWidth,
behavior: "smooth"
});
},80);
} else {
body.scrollTo({
left: 0,
behavior: "smooth"
});
}
} else {
body.scrollBy({
left: scrollAmount,
behavior: "smooth"
});
}
}
if(e.target.closest(".prev")){
log("PREV clicked");
const atStart = body.scrollLeft <= 5;
const allRendered = currentIndex >= related.length;
if(atStart && allRendered){
body.scrollTo({
left: body.scrollWidth,
behavior: "smooth"
});
} else {
body.scrollBy({
left: -scrollAmount,
behavior: "smooth"
});
}
}
});
/* =========================================================
LOOPING ARROW SCROLL SECTION CODE ENDS HERE
========================================================= */
})
.catch(e=>errorLog("RAIL ERROR:",e));
})();
</script>]
is ka css ye hy, single galss style post rail ka
[<style>
/* =========================================================
GLOBAL VARIABLES
========================================================= */
:root {
--rail-gap: 16px;
--rail-border-radius: 14px;
--rail-card-width: 185px;
--rail-card-height: 250px;
--rail-thumb-height: 135px;
--rail-bg-color: linear-gradient(145deg,#1e1e1e,#111);
--rail-glass-bg: rgba(255,255,255,0.03);
--rail-title-color: #ff6a2f;
--rail-title-hover: #ff9b66;
--rail-text-color: #cfcfcf;
--rail-accent-glow: rgba(255,106,47,0.35);
}
/* =========================================================
RAIL CONTAINER
========================================================= */
.content-rail {
margin: 35px 0;
position: relative;
}
/* =========================================================
HEADER REFINED & COMPACT
========================================================= */
.content-rail-header{
display:flex;
align-items:center;
gap:10px;
padding:10px 14px;
background:#f2f2f2;
border-radius:14px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
flex-wrap:nowrap;
overflow:hidden;
}
/* Title text */
.content-rail-title{
display:flex;
align-items:center;
gap:8px;
font-size:13px;
color:#666;
white-space:nowrap;
flex-wrap:nowrap;
}
/* ================= SUB CATEGORY ================= */
.content-rail-title > a{
display:inline-flex;
align-items:center;
gap:6px;
font-size:13px;
font-weight:600;
color:#ff6a2f;
text-decoration:none;
padding:5px 12px;
border-radius:22px;
background:#ffffff;
transition:all .25s ease;
box-shadow:0 3px 8px rgba(0,0,0,0.06);
}
/* Folder icon */
.content-rail-title > a::before{
content:"📁";
font-size:13px;
}
/* Hover */
.content-rail-title > a:hover{
background:#ff6a2f;
color:#fff;
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(255,106,47,0.35);
}
/* ================= TOPICS ================= */
.header-topics{
display:flex;
align-items:center;
gap:6px;
white-space:nowrap;
}
/* Topics label */
.topics-label{
font-size:12px;
color:#777;
margin-left:6px;
}
/* Topic links */
.header-topics a{
display:inline-flex;
align-items:center;
gap:5px;
font-size:12px;
color:#555;
text-decoration:none;
padding:4px 10px;
border-radius:18px;
background:#e9e9e9;
transition:all .25s ease;
}
/* Tag icon */
.header-topics a::before{
content:"🏷";
font-size:11px;
opacity:0.9;
}
/* Hover */
.header-topics a:hover{
background:#ff6a2f;
color:#fff;
}
/* ================= ARROWS ================= */
.row-arrows{
margin-left:auto;
display:flex;
gap:6px;
}
.row-arrows button{
background:#222;
color:#fff;
border:none;
padding:6px 10px;
border-radius:8px;
cursor:pointer;
transition:.2s ease;
}
.row-arrows button:hover{
background:#000;
transform:translateY(-2px);
}
/* =========================================================
RAIL BODY
========================================================= */
.content-rail-body{
display:flex;
gap:var(--rail-gap);
overflow-x:auto;
overflow-y:hidden;
scroll-behavior:smooth;
flex-wrap:nowrap;
padding-bottom:14px;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
}
/* Custom Scrollbar */
.content-rail-body::-webkit-scrollbar{
height:8px;
}
.content-rail-body::-webkit-scrollbar-track{
background:#1a1a1a;
border-radius:10px;
}
.content-rail-body::-webkit-scrollbar-thumb{
background:linear-gradient(90deg,#ff6a2f,#ff9b66);
border-radius:10px;
}
/* =========================================================
CARD
========================================================= */
.rail-item{
flex:0 0 auto;
border-radius:var(--rail-border-radius);
overflow:hidden;
display:flex;
flex-direction:column;
text-align:center;
background:var(--rail-bg-color);
width:var(--rail-card-width);
height:var(--rail-card-height);
transition:0.35s ease;
scroll-snap-align:start;
position:relative;
}
/* Hover Depth Effect */
.rail-item:hover{
transform:translateY(-6px) scale(1.02);
box-shadow:0 12px 28px rgba(0,0,0,0.6),
0 0 18px var(--rail-accent-glow);
}
/* =========================================================
THUMB
========================================================= */
.rail-thumb{
width:100%;
height:var(--rail-thumb-height);
overflow:hidden;
position:relative;
}
/* Image Overlay Gradient */
.rail-thumb::after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:60%;
background:linear-gradient(to top,rgba(0,0,0,0.8),transparent);
}
.rail-thumb img{
width:100%;
height:100%;
object-fit:cover;
transition:0.4s ease;
}
.rail-item:hover .rail-thumb img{
transform:scale(1.08);
}
/* =========================================================
CONTENT
========================================================= */
.rail-content{
padding:14px 12px;
display:flex;
flex-direction:column;
gap:6px;
}
.rail-title{
display:block;
font-size:14px;
font-weight:600;
text-decoration:none;
color:var(--rail-title-color);
transition:0.25s ease;
line-height:1.4;
}
.rail-title:hover{
color:var(--rail-title-hover);
}
.rail-author{
font-size:12px;
color:var(--rail-text-color);
}
.rail-author a{
color:#00d4ff;
text-decoration:none;
transition:.2s;
}
.rail-author a:hover{
color:#ffd54f;
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:480px){
.content-rail-header{
overflow-x:auto;
}
.content-rail-title a{
font-size:14px;
}
.rail-item{
width:155px;
height:220px;
}
}
</style>]
COMMENTS