kopia lustrzana https://github.com/badgen/badgen
feat: support iconWidth config
rodzic
dce85e7c70
commit
903860f6db
24
lib/index.js
24
lib/index.js
|
@ -1,14 +1,14 @@
|
|||
const calcWidth = require('./calc-text-width.js').Verdana11
|
||||
const colorPresets = require('./color-presets.js')
|
||||
|
||||
module.exports = function ({subject, status, color, style, emoji, icon}) {
|
||||
module.exports = function ({subject, status, color, style, emoji, icon, iconWidth = 13}) {
|
||||
typeAssert(typeof subject === 'string', '<subject> must be string')
|
||||
typeAssert(typeof status === 'string', '<status> must be string')
|
||||
|
||||
color = colorPresets[color] || color || colorPresets['blue']
|
||||
|
||||
const iconSpanWidth = icon ? (subject.length ? iconWidth + 4 : iconWidth - 1.5) : 0
|
||||
const stTextWidth = calcWidth(status, emoji)
|
||||
const sbRectWidth = calcWidth(subject, emoji) + 10 + (icon ? 15 : 0)
|
||||
const sbRectWidth = calcWidth(subject, emoji) + 10 + iconSpanWidth
|
||||
const stRectWidth = stTextWidth + 10
|
||||
const width = sbRectWidth + stRectWidth
|
||||
|
||||
|
@ -20,11 +20,12 @@ module.exports = function ({subject, status, color, style, emoji, icon}) {
|
|||
<rect x="${sbRectWidth}" width="${stRectWidth}" height="20" fill="#${color}"/>
|
||||
</g>
|
||||
<g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
|
||||
<text x="${icon ? '21.6' : '6'}" y="14.8" fill="#000" opacity="0.1">${subject}</text>
|
||||
<text x="${icon ? '20.6' : '5'}" y="13.8">${subject}</text>
|
||||
<text x="${icon ? '22.5' : '6'}" y="14.8" fill="#000" opacity="0.1">${subject}</text>
|
||||
<text x="${icon ? '21.5' : '5'}" y="13.8">${subject}</text>
|
||||
<text x="${sbRectWidth + 5.5}" y="14.8" fill="#000" opacity="0.1" textLength="${stTextWidth}">${status}</text>
|
||||
<text x="${sbRectWidth + 4.5}" y="13.8" textLength="${stTextWidth}">${status}</text>
|
||||
</g>${icon ? genIconMarkup(icon) : ''}
|
||||
</g>
|
||||
${icon ? `<image x="3.8" y="3.4" width="${iconWidth}" height="13.2" xlink:href="${icon}"/>` : ''}
|
||||
</svg>
|
||||
`
|
||||
}
|
||||
|
@ -42,19 +43,16 @@ module.exports = function ({subject, status, color, style, emoji, icon}) {
|
|||
<rect width="${width}" height="20" fill="url(#a)"/>
|
||||
</g>
|
||||
<g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
|
||||
<text x="${icon ? '21.6' : '6'}" y="14.8" fill="#000" opacity="0.25">${subject}</text>
|
||||
<text x="${icon ? '20.6' : '5'}" y="13.8">${subject}</text>
|
||||
<text x="${icon ? '22.5' : '6'}" y="14.8" fill="#000" opacity="0.25">${subject}</text>
|
||||
<text x="${icon ? '21.5' : '5'}" y="13.8">${subject}</text>
|
||||
<text x="${sbRectWidth + 5.5}" y="14.8" fill="#000" opacity="0.25" textLength="${stTextWidth}">${status}</text>
|
||||
<text x="${sbRectWidth + 4.5}" y="13.8" textLength="${stTextWidth}">${status}</text>
|
||||
</g>${icon ? genIconMarkup(icon) : ''}
|
||||
</g>
|
||||
${icon ? `<image x="3.9" y="3.5" width="${iconWidth}" height="13" xlink:href="${icon}"/>` : ''}
|
||||
</svg>
|
||||
`
|
||||
}
|
||||
|
||||
function genIconMarkup (iconB64) {
|
||||
return `<image x="3.8" y="3.4" width="13.2" height="13.2" xlink:href="${iconB64}"/>`
|
||||
}
|
||||
|
||||
function typeAssert (assertion, message) {
|
||||
if (!assertion) throw new TypeError(message)
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue