zuevav/VH_posting_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add badge price tag controls: position, size, ribbon & digit colors

Browse Source 
Adds four new controls to the digital-badge price tag so users can fine
-tune the look: a vertical position slider (raises/lowers the band
within the circle), a size slider (60-160% of the default band scale),
and two color rows for the ribbon and the digits — each with six
preset swatches plus a native color picker for custom colors.
Per-item state (priceY, priceSize, priceBg, priceFg) is preserved
across selections and renders consistently in the 240x240 export.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
zuevav
2026-05-14 21:51:32 +03:00
parent 68f4560bd5
commit 45a20d1edb
3 changed files with 186 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/app.js
+118 -17
View File
@@ -4251,6 +4251,12 @@ document.addEventListener('DOMContentLoaded', function() {
priceEnabled: document.getElementById('badge-price-enabled'),
priceOptions: document.getElementById('badge-price-options'),
priceValue: document.getElementById('badge-price-value'),
priceY: document.getElementById('badge-price-y'),
priceYValue: document.getElementById('badge-price-y-value'),
priceSize: document.getElementById('badge-price-size'),
priceSizeValue: document.getElementById('badge-price-size-value'),
priceBg: document.getElementById('badge-price-bg'),
priceFg: document.getElementById('badge-price-fg'),
nickEnabled: document.getElementById('badge-nickname-enabled'),
nickOptions: document.getElementById('badge-nickname-options'),
nickValue: document.getElementById('badge-nickname-value'),
@@ -4308,19 +4314,29 @@ document.addEventListener('DOMContentLoaded', function() {
c.closePath();
}
function drawPriceArc(c, size, text) {
const yTop = size * 0.74;
const yBottom = size * 0.965;
function drawPriceArc(c, size, item, text) {
const scale = (item.priceSize || 100) / 100;
const offsetY = ((item.priceY || 0) / 100) * size;
const baseTopFrac = 0.74;
const baseBottomFrac = 0.965;
const baseHeight = (baseBottomFrac - baseTopFrac) * size;
const height = baseHeight * scale;
const centerY = ((baseTopFrac + baseBottomFrac) / 2) * size + offsetY;
const yTop = centerY - height / 2;
const yBottom = centerY + height / 2;
const bg = item.priceBg || '#FFCC00';
const fg = item.priceFg || '#000000';
c.save();
c.fillStyle = '#FFCC00';
c.fillStyle = bg;
c.fillRect(0, yTop, size, yBottom - yTop);
const grad = c.createLinearGradient(0, yTop, 0, yTop + size * 0.012);
grad.addColorStop(0, 'rgba(255,255,255,0.35)');
grad.addColorStop(1, 'rgba(255,255,255,0)');
c.fillStyle = grad;
// Subtle inner highlight at top edge of the band.
const hi = c.createLinearGradient(0, yTop, 0, yTop + size * 0.012);
hi.addColorStop(0, 'rgba(255,255,255,0.3)');
hi.addColorStop(1, 'rgba(255,255,255,0)');
c.fillStyle = hi;
c.fillRect(0, yTop, size, size * 0.012);
const fontSize = (yBottom - yTop) * 0.55;
c.fillStyle = '#000';
c.fillStyle = fg;
c.textAlign = 'center';
c.textBaseline = 'middle';
c.font = `700 ${fontSize}px ${FONT_STACK}`;
@@ -4328,20 +4344,27 @@ document.addEventListener('DOMContentLoaded', function() {
c.restore();
}
function drawPriceRect(c, size, text) {
const w = size * 0.78;
const h = size * 0.13;
function drawPriceRect(c, size, item, text) {
const scale = (item.priceSize || 100) / 100;
const offsetY = ((item.priceY || 0) / 100) * size;
const baseW = size * 0.78;
const baseH = size * 0.13;
const w = baseW * scale;
const h = baseH * scale;
const x = (size - w) / 2;
const y = size * 0.755;
const baseTop = size * 0.755;
const y = baseTop + offsetY + (baseH - h) / 2;
const bg = item.priceBg || '#FFCC00';
const fg = item.priceFg || '#000000';
c.save();
c.fillStyle = 'rgba(0,0,0,0.22)';
roundRect(c, x, y + size * 0.008, w, h, h * 0.28);
c.fill();
c.fillStyle = '#FFCC00';
c.fillStyle = bg;
roundRect(c, x, y, w, h, h * 0.28);
c.fill();
const fontSize = h * 0.62;
c.fillStyle = '#000';
c.fillStyle = fg;
c.textAlign = 'center';
c.textBaseline = 'middle';
c.font = `700 ${fontSize}px ${FONT_STACK}`;
@@ -4440,9 +4463,9 @@ document.addEventListener('DOMContentLoaded', function() {
if (hasPrice) {
if (item.priceStyle === 'rect') {
drawPriceRect(c, size, priceText);
drawPriceRect(c, size, item, priceText);
} else {
drawPriceArc(c, size, priceText);
drawPriceArc(c, size, item, priceText);
}
}
@@ -4507,6 +4530,10 @@ document.addEventListener('DOMContentLoaded', function() {
showPrice: false,
priceValue: '',
priceStyle: 'arc',
priceY: 0, // -50..+20: vertical offset from default position
priceSize: 100, // 60..160 (% scale of band height)
priceBg: '#FFCC00', // ribbon color
priceFg: '#000000', // digits color
showNickname: false,
nickname: '',
nickColor: 'white',
@@ -4555,6 +4582,14 @@ document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('input[name="badge-price-style"]').forEach(r => {
r.checked = r.value === item.priceStyle;
});
el.priceY.value = item.priceY;
el.priceYValue.textContent = item.priceY;
el.priceSize.value = item.priceSize;
el.priceSizeValue.textContent = item.priceSize + '%';
el.priceBg.value = item.priceBg;
el.priceFg.value = item.priceFg;
syncSwatches('bg', item.priceBg);
syncSwatches('fg', item.priceFg);
el.nickEnabled.checked = item.showNickname;
el.nickOptions.classList.toggle('hidden', !item.showNickname);
el.nickValue.value = item.nickname || badgeState.defaultNickname || '';
@@ -4778,6 +4813,72 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
// Price vertical position slider
el.priceY.addEventListener('input', () => {
const item = currentItem();
if (!item) return;
const v = parseInt(el.priceY.value, 10) || 0;
item.priceY = v;
el.priceYValue.textContent = v;
renderPreview();
});
// Price size slider
el.priceSize.addEventListener('input', () => {
const item = currentItem();
if (!item) return;
const v = parseInt(el.priceSize.value, 10) || 100;
item.priceSize = v;
el.priceSizeValue.textContent = v + '%';
renderPreview();
});
// Color: ribbon background
function normalizeHex(v) {
return (v || '').toString().toLowerCase();
}
function syncSwatches(target, color) {
const norm = normalizeHex(color);
document.querySelectorAll(`.badge-color-row[data-target="${target}"] .badge-color-swatch`).forEach(sw => {
sw.classList.toggle('active', normalizeHex(sw.dataset.color) === norm);
});
}
el.priceBg.addEventListener('input', () => {
const item = currentItem();
if (!item) return;
item.priceBg = el.priceBg.value;
syncSwatches('bg', item.priceBg);
renderPreview();
});
el.priceFg.addEventListener('input', () => {
const item = currentItem();
if (!item) return;
item.priceFg = el.priceFg.value;
syncSwatches('fg', item.priceFg);
renderPreview();
});
document.querySelectorAll('.badge-color-row .badge-color-swatch').forEach(sw => {
sw.addEventListener('click', () => {
const item = currentItem();
if (!item) return;
const target = sw.parentElement.dataset.target;
const color = sw.dataset.color;
if (target === 'bg') {
item.priceBg = color;
el.priceBg.value = color;
} else if (target === 'fg') {
item.priceFg = color;
el.priceFg.value = color;
}
syncSwatches(target, color);
renderPreview();
});
});
el.nickEnabled.addEventListener('change', () => {
const item = currentItem();
if (!item) return;