Import source: app/src/components/QuoteSharer
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,335 @@
|
|||||||
|
// QuoteSharer — renders a floating "share quote" tooltip on text selection inside the article.
|
||||||
|
// Uses Canvas API for branded card rendering; Web Share API or download as PNG fallback.
|
||||||
|
import { useEffect, useRef, useState, useCallback } from 'react';
|
||||||
|
import { contentApi } from '../lib/content-api.js';
|
||||||
|
import shareIcon from '../assets/icons/share-2.svg';
|
||||||
|
import clipboardIcon from '../assets/icons/clipboard-copy.svg';
|
||||||
|
|
||||||
|
const BRAND_BG1 = '#0C1E22';
|
||||||
|
const BRAND_BG2 = '#0F6B73';
|
||||||
|
const BRAND_GOLD = '#D49A2A';
|
||||||
|
const FONT = '\'Vazirmatn\', Tahoma, sans-serif';
|
||||||
|
|
||||||
|
function loadFont() {
|
||||||
|
if (typeof document === 'undefined') return Promise.resolve();
|
||||||
|
return document.fonts.load(`700 18px Vazirmatn`).catch(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
|
||||||
|
const words = text.split(' ').filter(Boolean);
|
||||||
|
let line = '';
|
||||||
|
let currentY = y;
|
||||||
|
const lines = [];
|
||||||
|
for (const word of words) {
|
||||||
|
const test = line ? `${line} ${word}` : word;
|
||||||
|
const m = ctx.measureText(test);
|
||||||
|
if (m.width > maxWidth && line) {
|
||||||
|
lines.push(line);
|
||||||
|
line = word;
|
||||||
|
} else {
|
||||||
|
line = test;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (line) lines.push(line);
|
||||||
|
for (const l of lines.slice(0, 4)) {
|
||||||
|
ctx.fillText(l, x, currentY);
|
||||||
|
currentY += lineHeight;
|
||||||
|
}
|
||||||
|
return currentY;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderCard(canvas, text, articleTitle, authorName) {
|
||||||
|
const W = 1080, H = 1080;
|
||||||
|
canvas.width = W;
|
||||||
|
canvas.height = H;
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
// Background gradient
|
||||||
|
const grad = ctx.createLinearGradient(0, 0, W, H);
|
||||||
|
grad.addColorStop(0, BRAND_BG1);
|
||||||
|
grad.addColorStop(1, '#0F3540');
|
||||||
|
ctx.fillStyle = grad;
|
||||||
|
ctx.fillRect(0, 0, W, H);
|
||||||
|
|
||||||
|
// Decorative corner accent
|
||||||
|
ctx.fillStyle = BRAND_BG2;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(W, 0);
|
||||||
|
ctx.lineTo(W, 220);
|
||||||
|
ctx.lineTo(W - 220, 0);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
// Subtle grid pattern overlay
|
||||||
|
ctx.strokeStyle = 'rgba(255,255,255,0.03)';
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let i = 0; i < W; i += 60) {
|
||||||
|
ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, H); ctx.stroke();
|
||||||
|
ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(W, i); ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gold separator
|
||||||
|
ctx.fillStyle = BRAND_GOLD;
|
||||||
|
ctx.fillRect(80, 90, 5, 80);
|
||||||
|
|
||||||
|
// TEKNAV logo text
|
||||||
|
ctx.fillStyle = BRAND_GOLD;
|
||||||
|
ctx.font = `700 32px ${FONT}`;
|
||||||
|
ctx.textAlign = 'right';
|
||||||
|
ctx.direction = 'rtl';
|
||||||
|
ctx.fillText('تکناو', W - 60, 80);
|
||||||
|
|
||||||
|
// Tagline next to logo
|
||||||
|
ctx.fillStyle = 'rgba(212,154,42,0.55)';
|
||||||
|
ctx.font = `400 16px ${FONT}`;
|
||||||
|
ctx.fillText('teknav.ir', W - 60, 106);
|
||||||
|
|
||||||
|
// Quote marks
|
||||||
|
ctx.fillStyle = 'rgba(212,154,42,0.18)';
|
||||||
|
ctx.font = `700 280px ${FONT}`;
|
||||||
|
ctx.textAlign = 'right';
|
||||||
|
ctx.fillText('«', W - 40, 420);
|
||||||
|
|
||||||
|
// Quote text
|
||||||
|
ctx.fillStyle = '#FFFFFF';
|
||||||
|
ctx.font = `400 38px ${FONT}`;
|
||||||
|
ctx.textAlign = 'right';
|
||||||
|
ctx.direction = 'rtl';
|
||||||
|
const nextY = wrapText(ctx, text, W - 80, 220, W - 160, 60);
|
||||||
|
|
||||||
|
// Gold line
|
||||||
|
ctx.fillStyle = BRAND_GOLD;
|
||||||
|
ctx.fillRect(80, nextY + 20, W - 160, 2);
|
||||||
|
|
||||||
|
// Article title
|
||||||
|
ctx.fillStyle = 'rgba(255,255,255,0.65)';
|
||||||
|
ctx.font = `400 26px ${FONT}`;
|
||||||
|
ctx.textAlign = 'right';
|
||||||
|
const titleTrunc = articleTitle.length > 60 ? `${articleTitle.slice(0, 59)}…` : articleTitle;
|
||||||
|
ctx.fillText(titleTrunc, W - 80, nextY + 70);
|
||||||
|
|
||||||
|
// Author
|
||||||
|
ctx.fillStyle = 'rgba(255,255,255,0.45)';
|
||||||
|
ctx.font = `400 22px ${FONT}`;
|
||||||
|
ctx.fillText(authorName, W - 80, H - 60);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function QuoteSharer({ containerRef, article }) {
|
||||||
|
const [tooltip, setTooltip] = useState(null); // { x, y, text }
|
||||||
|
const [modal, setModal] = useState(false);
|
||||||
|
const [sharing, setSharing] = useState(false);
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
const canvasRef = useRef(null);
|
||||||
|
const fontReady = useRef(false);
|
||||||
|
|
||||||
|
useEffect(() => { loadFont().then(() => { fontReady.current = true; }); }, []);
|
||||||
|
|
||||||
|
// Close modal on Escape
|
||||||
|
useEffect(() => {
|
||||||
|
if (!modal) return;
|
||||||
|
const onKey = (e) => { if (e.key === 'Escape') { setModal(false); setTooltip(null); } };
|
||||||
|
document.addEventListener('keydown', onKey);
|
||||||
|
return () => document.removeEventListener('keydown', onKey);
|
||||||
|
}, [modal]);
|
||||||
|
|
||||||
|
const handleSelection = useCallback(() => {
|
||||||
|
const sel = window.getSelection();
|
||||||
|
if (!sel || sel.isCollapsed || !sel.toString().trim()) {
|
||||||
|
setTooltip(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const container = containerRef?.current;
|
||||||
|
if (!container) return;
|
||||||
|
let node = sel.anchorNode;
|
||||||
|
while (node && node !== container) node = node.parentNode;
|
||||||
|
if (!node) { setTooltip(null); return; }
|
||||||
|
|
||||||
|
const text = sel.toString().trim();
|
||||||
|
if (text.length < 20 || text.length > 400) { setTooltip(null); return; }
|
||||||
|
|
||||||
|
const range = sel.getRangeAt(0);
|
||||||
|
const rect = range.getBoundingClientRect();
|
||||||
|
setTooltip({
|
||||||
|
x: rect.left + rect.width / 2,
|
||||||
|
y: rect.top + window.scrollY - 48,
|
||||||
|
text,
|
||||||
|
});
|
||||||
|
}, [containerRef]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.addEventListener('mouseup', handleSelection);
|
||||||
|
document.addEventListener('touchend', handleSelection);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mouseup', handleSelection);
|
||||||
|
document.removeEventListener('touchend', handleSelection);
|
||||||
|
};
|
||||||
|
}, [handleSelection]);
|
||||||
|
|
||||||
|
const openModal = useCallback(() => {
|
||||||
|
if (!tooltip) return;
|
||||||
|
setModal(true);
|
||||||
|
try {
|
||||||
|
contentApi.trackEvent({ type: 'share_clicked', metadata: { channel: 'quote_card', slug: article?.slug } });
|
||||||
|
} catch {}
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
if (canvasRef.current) {
|
||||||
|
renderCard(
|
||||||
|
canvasRef.current,
|
||||||
|
tooltip.text,
|
||||||
|
article?.title || 'تکناو',
|
||||||
|
article?.authorName || 'تکناو',
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, [tooltip, article]);
|
||||||
|
|
||||||
|
const download = useCallback(() => {
|
||||||
|
if (!canvasRef.current) return;
|
||||||
|
canvasRef.current.toBlob((blob) => {
|
||||||
|
if (!blob) return;
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = 'teknav-quote.png';
|
||||||
|
a.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}, 'image/png');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const copyText = useCallback(() => {
|
||||||
|
if (!tooltip?.text) return;
|
||||||
|
const fullText = `«${tooltip.text}»\n\n— از مقاله: ${article?.title || 'تکناو'}\nhttps://www.teknav.ir/article/${article?.slug || ''}`;
|
||||||
|
try {
|
||||||
|
navigator.clipboard.writeText(fullText).then(() => {
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
}).catch(() => {});
|
||||||
|
} catch {}
|
||||||
|
}, [tooltip, article]);
|
||||||
|
|
||||||
|
const share = useCallback(async () => {
|
||||||
|
if (!canvasRef.current || sharing) return;
|
||||||
|
setSharing(true);
|
||||||
|
try {
|
||||||
|
if (navigator.share && navigator.canShare) {
|
||||||
|
const blob = await new Promise((res) => canvasRef.current.toBlob(res, 'image/png'));
|
||||||
|
const file = new File([blob], 'teknav-quote.png', { type: 'image/png' });
|
||||||
|
if (navigator.canShare({ files: [file] })) {
|
||||||
|
await navigator.share({
|
||||||
|
files: [file],
|
||||||
|
title: article?.title || 'تکناو',
|
||||||
|
url: `https://www.teknav.ir/article/${article?.slug || ''}`,
|
||||||
|
});
|
||||||
|
setSharing(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
download();
|
||||||
|
} catch {}
|
||||||
|
setSharing(false);
|
||||||
|
}, [sharing, download, article]);
|
||||||
|
|
||||||
|
if (!tooltip && !modal) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{tooltip && !modal && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
left: tooltip.x,
|
||||||
|
top: tooltip.y,
|
||||||
|
transform: 'translateX(-50%)',
|
||||||
|
zIndex: 1000,
|
||||||
|
background: '#0F3540',
|
||||||
|
border: '1px solid #D49A2A',
|
||||||
|
borderRadius: 8,
|
||||||
|
padding: '6px 14px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 13,
|
||||||
|
fontFamily: FONT,
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
boxShadow: '0 4px 16px rgba(0,0,0,0.4)',
|
||||||
|
userSelect: 'none',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 6,
|
||||||
|
}}
|
||||||
|
onMouseDown={(e) => { e.preventDefault(); openModal(); }}
|
||||||
|
>
|
||||||
|
<span className="tek-icon" style={{ ['--i']: `url("${shareIcon}")` }} aria-hidden="true" />
|
||||||
|
<span>اشتراکگذاری نقلقول</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{modal && (
|
||||||
|
<div
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-label="اشتراکگذاری نقلقول"
|
||||||
|
style={{
|
||||||
|
position: 'fixed', inset: 0, zIndex: 2000,
|
||||||
|
background: 'rgba(0,0,0,0.85)', display: 'flex',
|
||||||
|
alignItems: 'center', justifyContent: 'center',
|
||||||
|
flexDirection: 'column', gap: 16,
|
||||||
|
fontFamily: FONT, direction: 'rtl',
|
||||||
|
}}
|
||||||
|
onClick={(e) => { if (e.target === e.currentTarget) { setModal(false); setTooltip(null); } }}
|
||||||
|
>
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
style={{ maxWidth: 'min(90vw, 480px)', maxHeight: '65vh', borderRadius: 12, border: '2px solid #D49A2A' }}
|
||||||
|
/>
|
||||||
|
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center' }}>
|
||||||
|
<button
|
||||||
|
onClick={share}
|
||||||
|
disabled={sharing}
|
||||||
|
style={{
|
||||||
|
background: '#0F6B73', color: '#fff', border: 'none',
|
||||||
|
borderRadius: 8, padding: '10px 22px', fontSize: 14,
|
||||||
|
fontFamily: FONT, cursor: 'pointer', fontWeight: 700,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{sharing ? 'در حال اشتراک…' : <><span className="tek-icon" style={{ ['--i']: `url("${shareIcon}")` }} aria-hidden="true" /> اشتراکگذاری</>}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={copyText}
|
||||||
|
style={{
|
||||||
|
background: copied ? '#2E7D32' : '#1A3A42', color: copied ? '#fff' : '#D49A2A',
|
||||||
|
border: `1px solid ${copied ? '#2E7D32' : '#D49A2A'}`,
|
||||||
|
borderRadius: 8, padding: '10px 22px', fontSize: 14,
|
||||||
|
fontFamily: FONT, cursor: 'pointer', fontWeight: 700,
|
||||||
|
transition: 'all 0.2s',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{copied ? '✓ کپی شد' : <><span className="tek-icon" style={{ ['--i']: `url("${clipboardIcon}")` }} aria-hidden="true" /> کپی متن</>}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={download}
|
||||||
|
style={{
|
||||||
|
background: '#1A3A42', color: '#D49A2A', border: '1px solid #D49A2A',
|
||||||
|
borderRadius: 8, padding: '10px 22px', fontSize: 14,
|
||||||
|
fontFamily: FONT, cursor: 'pointer', fontWeight: 700,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
⬇ PNG
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => { setModal(false); setTooltip(null); }}
|
||||||
|
style={{
|
||||||
|
background: 'transparent', color: 'rgba(255,255,255,0.6)',
|
||||||
|
border: '1px solid rgba(255,255,255,0.2)',
|
||||||
|
borderRadius: 8, padding: '10px 16px', fontSize: 14,
|
||||||
|
fontFamily: FONT, cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
بستن
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p style={{ color: 'rgba(255,255,255,0.3)', fontSize: 12, margin: 0 }}>Esc برای بستن</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user