| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
function mk(tag, cls, styles) { |
| 5 |
var d = document.createElement(tag); |
| 6 |
if (cls) d.className = cls; |
| 7 |
if (styles) Object.keys(styles).forEach(function (k) { d.style[k] = styles[k]; }); |
| 8 |
return d; |
| 9 |
} |
| 10 |
function tx(tag, cls, text, styles) { |
| 11 |
var d = mk(tag, cls, styles); |
| 12 |
d.textContent = text; |
| 13 |
return d; |
| 14 |
} |
| 15 |
function ap(p) { |
| 16 |
Array.prototype.slice.call(arguments, 1).forEach(function (c) { if (c) p.appendChild(c); }); |
| 17 |
return p; |
| 18 |
} |
| 19 |
var _typoKeys = { |
| 20 |
family:'font-family', weight:'font-weight', style:'font-style', |
| 21 |
transform:'text-transform', decoration:'text-decoration', |
| 22 |
sizeDesktop:'font-size-d', sizeTablet:'font-size-t', sizeMobile:'font-size-m', |
| 23 |
lineHeightDesktop:'line-height-d', lineHeightTablet:'line-height-t', lineHeightMobile:'line-height-m', |
| 24 |
letterSpacingDesktop:'letter-spacing-d', letterSpacingTablet:'letter-spacing-t', letterSpacingMobile:'letter-spacing-m', |
| 25 |
wordSpacingDesktop:'word-spacing-d', wordSpacingTablet:'word-spacing-t', wordSpacingMobile:'word-spacing-m' |
| 26 |
}; |
| 27 |
var _typoUnits = { size:'sizeUnit', lineHeight:'lineHeightUnit', letterSpacing:'letterSpacingUnit', wordSpacing:'wordSpacingUnit' }; |
| 28 |
var _typoUnitDefaults = { size:'px', lineHeight:'', letterSpacing:'px', wordSpacing:'px' }; |
| 29 |
function typoCssVarsForEl(el, obj, prefix) { |
| 30 |
if (!obj || typeof obj !== 'object') return; |
| 31 |
Object.keys(_typoKeys).forEach(function (k) { |
| 32 |
var v = obj[k]; if (v === undefined || v === '') return; |
| 33 |
var prop = _typoKeys[k]; |
| 34 |
var base = k.replace(/Desktop|Tablet|Mobile/, ''); |
| 35 |
var uKey = _typoUnits[base]; |
| 36 |
if (uKey && typeof v === 'number') v = v + (obj[uKey] || _typoUnitDefaults[base] || ''); |
| 37 |
el.style.setProperty(prefix + prop, v); |
| 38 |
}); |
| 39 |
} |
| 40 |
|
| 41 |
// ── helpers ───────────────────────────────────────────────────── |
| 42 |
function getPrefix(msg) { |
| 43 |
var m = (msg || '').match(/^(\w+)[\s:!]/); |
| 44 |
return m ? m[1].toLowerCase() : ''; |
| 45 |
} |
| 46 |
function initials(name) { |
| 47 |
var parts = (name || 'A').trim().split(/\s+/); |
| 48 |
if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase(); |
| 49 |
return parts[0][0].toUpperCase(); |
| 50 |
} |
| 51 |
function prefixColor(prefix, a) { |
| 52 |
if (prefix === 'feat') return a.featColor; |
| 53 |
if (prefix === 'fix') return a.fixColor; |
| 54 |
if (prefix === 'chore') return a.choreColor; |
| 55 |
if (prefix === 'docs') return a.docsColor; |
| 56 |
if (prefix === 'refactor') return a.refactorColor; |
| 57 |
return a.choreColor; |
| 58 |
} |
| 59 |
|
| 60 |
// ── build a single commit row ──────────────────────────────────── |
| 61 |
function buildCommitRow(commit, a, isLast) { |
| 62 |
var prefix = getPrefix(commit.message); |
| 63 |
|
| 64 |
// Left column: dot + vertical line |
| 65 |
var dot = mk('div', '', { |
| 66 |
width: '10px', height: '10px', borderRadius: '50%', |
| 67 |
background: a.dotColor, flexShrink: '0', |
| 68 |
marginTop: '5px', position: 'relative', zIndex: '1', |
| 69 |
boxShadow: '0 0 0 3px ' + a.bgColor + ', 0 0 0 5px ' + a.dotColor + '22' |
| 70 |
}); |
| 71 |
var leftCol = mk('div', '', { |
| 72 |
display: 'flex', flexDirection: 'column', alignItems: 'center', |
| 73 |
width: '20px', flexShrink: '0', marginTop: '2px' |
| 74 |
}); |
| 75 |
ap(leftCol, dot); |
| 76 |
if (!isLast) { |
| 77 |
var line = mk('div', '', { |
| 78 |
width: '2px', flex: '1', background: a.lineColor, |
| 79 |
margin: '4px auto 0', minHeight: '24px' |
| 80 |
}); |
| 81 |
ap(leftCol, line); |
| 82 |
} |
| 83 |
|
| 84 |
// Avatar |
| 85 |
var avatar = null; |
| 86 |
if (a.showAuthorInitials) { |
| 87 |
avatar = tx('div', '', initials(commit.author), { |
| 88 |
width: '26px', height: '26px', borderRadius: '50%', |
| 89 |
background: a.authorBg, color: a.authorColor, |
| 90 |
display: 'flex', alignItems: 'center', justifyContent: 'center', |
| 91 |
fontSize: '11px', fontWeight: '700', flexShrink: '0', |
| 92 |
lineHeight: '26px', textAlign: 'center' |
| 93 |
}); |
| 94 |
} |
| 95 |
|
| 96 |
// Message row |
| 97 |
var msgRow = mk('div', '', { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px', marginBottom: '6px' }); |
| 98 |
if (prefix) { |
| 99 |
var prefixEl = tx('span', '', prefix, { |
| 100 |
fontSize: '11px', fontWeight: '600', |
| 101 |
color: prefixColor(prefix, a), |
| 102 |
marginRight: '4px', letterSpacing: '0.02em' |
| 103 |
}); |
| 104 |
ap(msgRow, prefixEl); |
| 105 |
} |
| 106 |
var msgEl = tx('span', 'bkcmh-msg', commit.message, { |
| 107 |
color: a.messageColor |
| 108 |
}); |
| 109 |
ap(msgRow, msgEl); |
| 110 |
|
| 111 |
// Tags row |
| 112 |
var tagRow = null; |
| 113 |
if (a.showTags && commit.tags && commit.tags.length) { |
| 114 |
tagRow = mk('div', '', { display: 'flex', flexWrap: 'wrap', gap: '4px', marginBottom: '6px' }); |
| 115 |
commit.tags.forEach(function (tag) { |
| 116 |
var badge = tx('span', '', '\uD83C\uDFF7 ' + tag, { |
| 117 |
display: 'inline-flex', alignItems: 'center', |
| 118 |
background: a.tagBg, color: a.tagColor, |
| 119 |
borderRadius: '4px', padding: '1px 7px', |
| 120 |
fontSize: '11px', fontWeight: '600', letterSpacing: '0.04em' |
| 121 |
}); |
| 122 |
ap(tagRow, badge); |
| 123 |
}); |
| 124 |
} |
| 125 |
|
| 126 |
// Meta row |
| 127 |
var metaRow = mk('div', '', { |
| 128 |
display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' |
| 129 |
}); |
| 130 |
if (avatar) ap(metaRow, avatar); |
| 131 |
var authorEl = tx('span', 'bkcmh-meta', commit.author, { |
| 132 |
color: a.authorColor |
| 133 |
}); |
| 134 |
ap(metaRow, authorEl); |
| 135 |
|
| 136 |
if (a.showHash && commit.hash) { |
| 137 |
var hashEl = tx('span', 'bkcmh-hash', commit.hash, { |
| 138 |
color: a.hashColor, background: a.tagBg, |
| 139 |
borderRadius: '4px', padding: '1px 6px' |
| 140 |
}); |
| 141 |
ap(metaRow, hashEl); |
| 142 |
} |
| 143 |
if (a.showDate && commit.date) { |
| 144 |
var dateEl = tx('span', 'bkcmh-meta', commit.date, { |
| 145 |
color: a.dateColor, marginLeft: 'auto' |
| 146 |
}); |
| 147 |
ap(metaRow, dateEl); |
| 148 |
} |
| 149 |
|
| 150 |
var rightCol = mk('div', '', { |
| 151 |
flex: '1', minWidth: '0', paddingBottom: isLast ? '0' : '16px' |
| 152 |
}); |
| 153 |
ap(rightCol, msgRow); |
| 154 |
if (tagRow) ap(rightCol, tagRow); |
| 155 |
ap(rightCol, metaRow); |
| 156 |
|
| 157 |
var row = mk('div', '', { display: 'flex', gap: '14px' }); |
| 158 |
ap(row, leftCol, rightCol); |
| 159 |
return row; |
| 160 |
} |
| 161 |
|
| 162 |
// ── build full block ───────────────────────────────────────────── |
| 163 |
function buildBlock(appEl) { |
| 164 |
if (appEl.dataset.rendered) return; |
| 165 |
appEl.dataset.rendered = '1'; |
| 166 |
|
| 167 |
var a; |
| 168 |
try { a = JSON.parse(appEl.dataset.opts || '{}'); } catch (e) { a = {}; } |
| 169 |
|
| 170 |
// Header |
| 171 |
var dotsWrap = mk('div', '', { display: 'flex', gap: '6px', alignItems: 'center' }); |
| 172 |
ap(dotsWrap, |
| 173 |
mk('span', '', { width: '12px', height: '12px', borderRadius: '50%', background: '#ef4444', display: 'block' }), |
| 174 |
mk('span', '', { width: '12px', height: '12px', borderRadius: '50%', background: '#f59e0b', display: 'block' }), |
| 175 |
mk('span', '', { width: '12px', height: '12px', borderRadius: '50%', background: '#22c55e', display: 'block' }) |
| 176 |
); |
| 177 |
var repoSpan = tx('span', '', '\uD83D\uDCC1 ' + (a.repoName || 'repo'), { |
| 178 |
color: a.repoColor || '#f8fafc', fontWeight: '700', |
| 179 |
fontSize: ((a.fontSize || 14) + 1) + 'px', letterSpacing: '0.01em' |
| 180 |
}); |
| 181 |
|
| 182 |
var header = mk('div', '', { |
| 183 |
display: 'flex', alignItems: 'center', gap: '12px', flexWrap: 'wrap', |
| 184 |
padding: '12px 16px', |
| 185 |
background: a.headerBg || '#1e293b', |
| 186 |
borderBottom: '1px solid ' + (a.borderColor || '#1e293b'), |
| 187 |
borderRadius: (a.borderRadius || 12) + 'px ' + (a.borderRadius || 12) + 'px 0 0' |
| 188 |
}); |
| 189 |
ap(header, dotsWrap, repoSpan); |
| 190 |
|
| 191 |
if (a.showBranch && a.branchName) { |
| 192 |
var branchDot = mk('span', '', { |
| 193 |
width: '8px', height: '8px', borderRadius: '50%', |
| 194 |
background: a.branchColor || '#4ade80', display: 'inline-block' |
| 195 |
}); |
| 196 |
var branchText = tx('span', '', a.branchName, {}); |
| 197 |
var branchBadge = mk('span', '', { |
| 198 |
display: 'inline-flex', alignItems: 'center', gap: '5px', |
| 199 |
background: a.branchBg || '#166534', color: a.branchColor || '#4ade80', |
| 200 |
borderRadius: '20px', padding: '2px 10px', |
| 201 |
fontSize: '12px', fontWeight: '600' |
| 202 |
}); |
| 203 |
ap(branchBadge, branchDot, branchText); |
| 204 |
ap(header, branchBadge); |
| 205 |
} |
| 206 |
|
| 207 |
// Body |
| 208 |
var body = mk('div', '', { padding: '20px 20px 12px' }); |
| 209 |
var commits = a.commits || []; |
| 210 |
commits.forEach(function (c, idx) { |
| 211 |
var row = buildCommitRow(c, a, idx === commits.length - 1); |
| 212 |
ap(body, row); |
| 213 |
}); |
| 214 |
|
| 215 |
// Wrap |
| 216 |
appEl.style.background = a.bgColor || '#0f172a'; |
| 217 |
appEl.style.border = '1px solid ' + (a.borderColor || '#1e293b'); |
| 218 |
appEl.style.borderRadius = (a.borderRadius || 12) + 'px'; |
| 219 |
appEl.style.overflow = 'hidden'; |
| 220 |
appEl.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'; |
| 221 |
typoCssVarsForEl(appEl, a.typoMessage, '--bkcmh-msg-'); |
| 222 |
typoCssVarsForEl(appEl, a.typoMeta, '--bkcmh-meta-'); |
| 223 |
ap(appEl, header, body); |
| 224 |
} |
| 225 |
|
| 226 |
function init() { |
| 227 |
document.querySelectorAll('.bkbg-commit-history-app').forEach(buildBlock); |
| 228 |
} |
| 229 |
if (document.readyState !== 'loading') { init(); } else { document.addEventListener('DOMContentLoaded', init); } |
| 230 |
})(); |
| 231 |
|
