# blockenberg/2.0.7/blocks/chapter-navigation/frontend.js
Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor, version 2.0.7. 236 lines.
- Page: https://pluginprobe.com/plugins/blockenberg/2.0.7/code/blocks/chapter-navigation/frontend.js
- Raw: https://pluginprobe.com/plugins/blockenberg/2.0.7/raw/blocks/chapter-navigation/frontend.js
- Modified: 2026-03-06T12:32:40+00:00
Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/blockenberg/2.0.7/code/blocks/chapter-navigation/frontend.js#L10-L20`.
```javascript
(function () {
function init() {
document.querySelectorAll('.bkbg-cnv-app').forEach(function (el) {
if (el.dataset.rendered) return;
el.dataset.rendered = '1';
var opts;
try { opts = JSON.parse(el.dataset.opts || '{}'); } catch (e) { opts = {}; }
var o = Object.assign({
seriesTitle: 'Series',
currentPart: 1,
totalParts: 1,
currentTitle: 'Current Chapter',
prevTitle: '',
prevUrl: '',
nextTitle: '',
nextUrl: '',
chapters: [],
showChapterList: true,
chapterListOpen: false,
showProgress: true,
style: 'card',
openInNewTab: false,
partLabel: 'Part',
bgColor: '#ffffff',
borderColor: '#e2e8f0',
accentColor: '#6366f1',
seriesTitleColor: '#374151',
currentTitleColor: '#111827',
progressBg: '#e2e8f0',
progressFill: '#6366f1',
btnBg: '#f1f5f9',
btnColor: '#374151',
pillBg: '#eef2ff',
pillColor: '#4f46e5',
chapterListBg: '#f8fafc',
activeChapterBg: '#eef2ff',
activeChapterColor: '#4f46e5',
borderRadius: 10,
paddingTop: 0,
paddingBottom: 0
}, opts);
function typoCssVarsForEl(typo, prefix, el) {
if (!typo) return;
if (typo.family) el.style.setProperty(prefix + 'font-family', "'" + typo.family + "', sans-serif");
if (typo.weight) el.style.setProperty(prefix + 'font-weight', typo.weight);
if (typo.transform) el.style.setProperty(prefix + 'text-transform', typo.transform);
if (typo.style) el.style.setProperty(prefix + 'font-style', typo.style);
if (typo.decoration) el.style.setProperty(prefix + 'text-decoration', typo.decoration);
var su = typo.sizeUnit || 'px';
if (typo.sizeDesktop !== '' && typo.sizeDesktop != null) el.style.setProperty(prefix + 'font-size-d', typo.sizeDesktop + su);
if (typo.sizeTablet !== '' && typo.sizeTablet != null) el.style.setProperty(prefix + 'font-size-t', typo.sizeTablet + su);
if (typo.sizeMobile !== '' && typo.sizeMobile != null) el.style.setProperty(prefix + 'font-size-m', typo.sizeMobile + su);
var lhu = typo.lineHeightUnit || '';
if (typo.lineHeightDesktop !== '' && typo.lineHeightDesktop != null) el.style.setProperty(prefix + 'line-height-d', typo.lineHeightDesktop + lhu);
if (typo.lineHeightTablet !== '' && typo.lineHeightTablet != null) el.style.setProperty(prefix + 'line-height-t', typo.lineHeightTablet + lhu);
if (typo.lineHeightMobile !== '' && typo.lineHeightMobile != null) el.style.setProperty(prefix + 'line-height-m', typo.lineHeightMobile + lhu);
var lsu = typo.letterSpacingUnit || 'px';
if (typo.letterSpacingDesktop !== '' && typo.letterSpacingDesktop != null) el.style.setProperty(prefix + 'letter-spacing-d', typo.letterSpacingDesktop + lsu);
if (typo.letterSpacingTablet !== '' && typo.letterSpacingTablet != null) el.style.setProperty(prefix + 'letter-spacing-t', typo.letterSpacingTablet + lsu);
if (typo.letterSpacingMobile !== '' && typo.letterSpacingMobile != null) el.style.setProperty(prefix + 'letter-spacing-m', typo.letterSpacingMobile + lsu);
var wsu = typo.wordSpacingUnit || 'px';
if (typo.wordSpacingDesktop !== '' && typo.wordSpacingDesktop != null) el.style.setProperty(prefix + 'word-spacing-d', typo.wordSpacingDesktop + wsu);
if (typo.wordSpacingTablet !== '' && typo.wordSpacingTablet != null) el.style.setProperty(prefix + 'word-spacing-t', typo.wordSpacingTablet + wsu);
if (typo.wordSpacingMobile !== '' && typo.wordSpacingMobile != null) el.style.setProperty(prefix + 'word-spacing-m', typo.wordSpacingMobile + wsu);
}
var target = o.openInNewTab ? '_blank' : '_self';
var progress = Math.round((o.currentPart / o.totalParts) * 100);
var wrap = document.createElement('div');
wrap.className = 'bkbg-cnv-wrap bkbg-cnv-' + o.style;
wrap.style.cssText = 'background:' + o.bgColor + ';padding-top:' + o.paddingTop + 'px;padding-bottom:' + o.paddingBottom + 'px;';
if (o.style === 'card') {
wrap.style.cssText += 'border:1px solid ' + o.borderColor + ';border-radius:' + o.borderRadius + 'px;box-shadow:0 2px 8px rgba(0,0,0,.06);overflow:hidden;';
} else if (o.style === 'banner') {
wrap.style.cssText += 'border-left:4px solid ' + o.accentColor + ';border:1px solid ' + o.borderColor + ';border-left-width:4px;border-radius:' + o.borderRadius + 'px;overflow:hidden;';
} else {
wrap.style.cssText += 'border-top:2px solid ' + o.accentColor + ';padding-top:16px;';
}
/* Header */
var hdr = document.createElement('div');
hdr.className = 'bkbg-cnv-header';
hdr.style.cssText = 'padding:16px 20px;' + (o.style !== 'minimal' ? 'border-bottom:1px solid ' + o.borderColor + ';' : '');
var meta = document.createElement('div');
meta.className = 'bkbg-cnv-meta';
meta.style.cssText = 'display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;';
var pill = document.createElement('span');
pill.className = 'bkbg-cnv-pill';
pill.style.cssText = 'background:' + o.pillBg + ';color:' + o.pillColor + ';padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;';
pill.textContent = o.partLabel + ' ' + o.currentPart + ' of ' + o.totalParts;
var series = document.createElement('span');
series.className = 'bkbg-cnv-series';
series.style.cssText = 'font-size:13px;color:' + o.seriesTitleColor + ';';
series.textContent = o.seriesTitle;
meta.appendChild(pill);
meta.appendChild(series);
hdr.appendChild(meta);
var cTitle = document.createElement('h3');
cTitle.className = 'bkbg-cnv-current-title';
cTitle.style.cssText = 'margin:0;color:' + o.currentTitleColor + ';';
cTitle.textContent = o.currentTitle;
hdr.appendChild(cTitle);
if (o.showProgress) {
var pWrap = document.createElement('div');
pWrap.className = 'bkbg-cnv-progress-wrap';
pWrap.style.marginTop = '10px';
var pBar = document.createElement('div');
pBar.className = 'bkbg-cnv-progress-bar';
pBar.style.cssText = 'background:' + o.progressBg + ';border-radius:4px;height:6px;overflow:hidden;';
var pFill = document.createElement('div');
pFill.className = 'bkbg-cnv-progress-fill';
pFill.style.cssText = 'background:' + o.progressFill + ';width:' + progress + '%;height:100%;border-radius:4px;';
var pLbl = document.createElement('div');
pLbl.className = 'bkbg-cnv-progress-label';
pLbl.style.cssText = 'font-size:11px;margin-top:4px;opacity:.8;color:' + o.seriesTitleColor + ';';
pLbl.textContent = progress + '% through the series';
pBar.appendChild(pFill);
pWrap.appendChild(pBar);
pWrap.appendChild(pLbl);
hdr.appendChild(pWrap);
}
wrap.appendChild(hdr);
/* Nav row */
var nav = document.createElement('div');
nav.className = 'bkbg-cnv-nav';
nav.style.cssText = 'display:flex;gap:10px;padding:14px 20px;flex-wrap:wrap;';
if (o.prevTitle) {
var prevBtn = document.createElement('a');
prevBtn.className = 'bkbg-cnv-btn';
prevBtn.href = o.prevUrl || '#';
prevBtn.target = target;
if (o.openInNewTab) prevBtn.rel = 'noopener noreferrer';
prevBtn.style.cssText = 'flex:1;min-width:160px;background:' + o.btnBg + ';color:' + o.btnColor + ';padding:10px 14px;border-radius:6px;font-size:13px;text-decoration:none;display:flex;flex-direction:column;gap:2px;';
prevBtn.innerHTML = '← Previous' + esc(o.prevTitle) + '';
nav.appendChild(prevBtn);
}
if (o.nextTitle) {
var nextBtn = document.createElement('a');
nextBtn.className = 'bkbg-cnv-btn bkbg-cnv-btn-next';
nextBtn.href = o.nextUrl || '#';
nextBtn.target = target;
if (o.openInNewTab) nextBtn.rel = 'noopener noreferrer';
nextBtn.style.cssText = 'flex:1;min-width:160px;background:' + o.accentColor + ';color:#fff;padding:10px 14px;border-radius:6px;font-size:13px;text-decoration:none;display:flex;flex-direction:column;gap:2px;text-align:right;';
nextBtn.innerHTML = 'Next →' + esc(o.nextTitle) + '';
nav.appendChild(nextBtn);
}
wrap.appendChild(nav);
/* Chapter list */
if (o.showChapterList && o.chapters && o.chapters.length) {
var details = document.createElement('details');
if (o.chapterListOpen) details.open = true;
details.style.cssText = 'border-top:1px solid ' + o.borderColor + ';';
var summary = document.createElement('summary');
summary.className = 'bkbg-cnv-summary';
summary.style.cssText = 'padding:12px 20px;cursor:pointer;font-size:13px;font-weight:600;list-style:none;display:flex;align-items:center;justify-content:space-between;background:' + o.chapterListBg + ';color:' + o.seriesTitleColor + ';';
summary.innerHTML = 'All ' + o.totalParts + ' chapters▾';
var ul = document.createElement('ol');
ul.className = 'bkbg-cnv-list';
ul.style.cssText = 'margin:0;padding:8px 0;list-style:none;background:' + o.chapterListBg + ';';
o.chapters.forEach(function (ch, i) {
var isActive = (i + 1) === o.currentPart;
var li = document.createElement('li');
li.className = 'bkbg-cnv-list-item';
li.style.cssText = 'padding:8px 20px 8px 44px;position:relative;font-size:13px;' + (isActive ? 'background:' + o.activeChapterBg + ';' : '');
var num = document.createElement('span');
num.className = 'bkbg-cnv-item-num';
num.style.cssText = 'position:absolute;left:20px;font-weight:700;color:' + (isActive ? o.activeChapterColor : o.seriesTitleColor) + ';';
num.textContent = (i + 1) + '.';
li.appendChild(num);
if (ch.url && !isActive) {
var link = document.createElement('a');
link.className = 'bkbg-cnv-item-link';
link.href = ch.url;
link.target = target;
if (o.openInNewTab) link.rel = 'noopener noreferrer';
link.style.cssText = 'color:' + o.seriesTitleColor + ';text-decoration:none;';
link.textContent = ch.title;
li.appendChild(link);
} else {
var span = document.createElement('span');
span.style.cssText = 'color:' + (isActive ? o.activeChapterColor : o.seriesTitleColor) + ';font-weight:' + (isActive ? '600' : '400') + ';';
span.textContent = ch.title;
li.appendChild(span);
}
if (isActive) {
var badge = document.createElement('span');
badge.className = 'bkbg-cnv-current-badge';
badge.style.cssText = 'margin-left:8px;font-size:11px;padding:1px 7px;background:' + o.accentColor + ';color:#fff;border-radius:10px;font-weight:600;';
badge.textContent = 'Current';
li.appendChild(badge);
}
ul.appendChild(li);
});
details.appendChild(summary);
details.appendChild(ul);
wrap.appendChild(details);
}
typoCssVarsForEl(o.typoTitle, '--bkbg-cnv-tt-', wrap);
el.parentNode.insertBefore(wrap, el);
});
}
function esc(str) {
return String(str || '').replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
}
if (document.readyState !== 'loading') { init(); }
else { document.addEventListener('DOMContentLoaded', init); }
})();
```