| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
function escHtml(str) { |
| 5 |
if (!str) return ''; |
| 6 |
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); |
| 7 |
} |
| 8 |
|
| 9 |
function buildCardHTML(post, cfg) { |
| 10 |
var thumbHTML = ''; |
| 11 |
if (cfg.showImage && post.image) { |
| 12 |
thumbHTML = '<div class="bkbg-pg-thumb bkbg-pg-hover--' + escHtml(cfg.hover) + '">' + |
| 13 |
'<div class="bkbg-pg-thumb-inner">' + |
| 14 |
'<img src="' + escHtml(post.image) + '" alt="' + escHtml(post.title) + '" loading="lazy">' + |
| 15 |
'</div></div>'; |
| 16 |
} |
| 17 |
|
| 18 |
var metaHTML = ''; |
| 19 |
if (cfg.showMeta && post.meta) { |
| 20 |
metaHTML = '<div class="bkbg-pg-meta">' + escHtml(post.meta) + '</div>'; |
| 21 |
} |
| 22 |
|
| 23 |
var titleHTML = '<h3 class="bkbg-pg-title"><a href="' + escHtml(post.link) + '">' + escHtml(post.title) + '</a></h3>'; |
| 24 |
|
| 25 |
var excerptHTML = ''; |
| 26 |
if (cfg.showExcerpt && post.excerpt) { |
| 27 |
excerptHTML = '<p class="bkbg-pg-excerpt">' + escHtml(post.excerpt) + '</p>'; |
| 28 |
} |
| 29 |
|
| 30 |
var rmHTML = ''; |
| 31 |
if (cfg.showReadMore) { |
| 32 |
var rmLabel = escHtml(cfg.rmLabel) + (cfg.rmStyle === 'arrow' ? ' →' : ''); |
| 33 |
rmHTML = '<a href="' + escHtml(post.link) + '" class="bkbg-pg-readmore bkbg-pg-readmore--' + escHtml(cfg.rmStyle) + '">' + rmLabel + '</a>'; |
| 34 |
} |
| 35 |
|
| 36 |
return '<article class="bkbg-pg-card">' + |
| 37 |
thumbHTML + |
| 38 |
'<div class="bkbg-pg-body">' + |
| 39 |
metaHTML + titleHTML + excerptHTML + rmHTML + |
| 40 |
'</div></article>'; |
| 41 |
} |
| 42 |
|
| 43 |
function renderGrid(wrap, posts, cfg) { |
| 44 |
var grid = wrap.querySelector('.bkbg-pg-grid'); |
| 45 |
if (!grid) { |
| 46 |
grid = document.createElement('div'); |
| 47 |
grid.className = 'bkbg-pg-grid'; |
| 48 |
wrap.appendChild(grid); |
| 49 |
} |
| 50 |
if (!posts || !posts.length) { |
| 51 |
grid.innerHTML = '<p class="bkbg-pg-empty">' + escHtml(cfg.noPosts) + '</p>'; |
| 52 |
return; |
| 53 |
} |
| 54 |
grid.innerHTML = posts.map(function (p) { return buildCardHTML(p, cfg); }).join(''); |
| 55 |
} |
| 56 |
|
| 57 |
function initPostGrid(wrap) { |
| 58 |
var d = wrap.dataset; |
| 59 |
var cfg = { |
| 60 |
postType: d.postType || 'post', |
| 61 |
orderby: d.orderby || 'date', |
| 62 |
order: d.order || 'desc', |
| 63 |
perPage: parseInt(d.perPage, 10) || 6, |
| 64 |
offset: parseInt(d.offset, 10) || 0, |
| 65 |
excerptLen: parseInt(d.excerptLen,10) || 20, |
| 66 |
showImage: d.showImage !== '0', |
| 67 |
showMeta: d.showMeta !== '0', |
| 68 |
showExcerpt:d.showExcerpt!== '0', |
| 69 |
showReadMore:d.showRm !== '0', |
| 70 |
rmLabel: d.rmLabel || 'Read More', |
| 71 |
rmStyle: d.rmStyle || 'link', |
| 72 |
noPosts: d.noPosts || 'No posts found.', |
| 73 |
hover: d.hover || 'zoom' |
| 74 |
}; |
| 75 |
|
| 76 |
var path = (window.blockenbergData && window.blockenbergData.restUrl) |
| 77 |
? window.blockenbergData.restUrl + 'blockenberg/v1/post-grid' |
| 78 |
: '/wp-json/blockenberg/v1/post-grid'; |
| 79 |
|
| 80 |
var url = path + '?type=' + encodeURIComponent(cfg.postType) |
| 81 |
+ '&orderby=' + encodeURIComponent(cfg.orderby) |
| 82 |
+ '&order=' + encodeURIComponent(cfg.order) |
| 83 |
+ '&per_page='+ cfg.perPage |
| 84 |
+ '&offset=' + cfg.offset |
| 85 |
+ '&excerpt_len=' + cfg.excerptLen; |
| 86 |
|
| 87 |
var grid = wrap.querySelector('.bkbg-pg-grid'); |
| 88 |
if (!grid) { |
| 89 |
grid = document.createElement('div'); |
| 90 |
grid.className = 'bkbg-pg-grid'; |
| 91 |
wrap.appendChild(grid); |
| 92 |
} |
| 93 |
grid.innerHTML = '<div class="bkbg-pg-loading"><span>Loading…</span></div>'; |
| 94 |
|
| 95 |
fetch(url, { credentials: 'same-origin' }) |
| 96 |
.then(function (r) { return r.json(); }) |
| 97 |
.then(function (res) { renderGrid(wrap, res.posts, cfg); }) |
| 98 |
.catch(function () { |
| 99 |
grid.innerHTML = '<p class="bkbg-pg-empty" style="color:#ef4444">Failed to load posts.</p>'; |
| 100 |
}); |
| 101 |
} |
| 102 |
|
| 103 |
document.addEventListener('DOMContentLoaded', function () { |
| 104 |
document.querySelectorAll('.bkbg-pg-wrap').forEach(initPostGrid); |
| 105 |
}); |
| 106 |
})(); |
| 107 |
|
