چگونه یک Copy-to-Clipboard حرفه‌ای برای کدهای سایت بسازیم؟

🌟 نقشه راهت برای یک دکمه Copy-to-Clipboard حرفه‌ای در یک نگاه 🌟

<textarea id="code-to-copy-legacy" style="position:absolute; left:-9999px;">این یک کد نمونه برای روش قدیمی است.</textarea>
<button onclick="copyToClipboardLegacy()">کپی (قدیمی)</button>

<script>
function copyToClipboardLegacy() {
    const codeElement = document.getElementById('code-to-copy-legacy');
    codeElement.select();
    document.execCommand('copy');
    alert('کد کپی شد! (روش قدیمی)');
}
</script>
    

👍 پیشنهاد حرفه‌ای‌ها: همیشه از Clipboard API استفاده کنید. این روش امن‌تر، مدرن‌تر و از نظر عملکردی بهتره.

<div class="code-block">
    <pre><code id="myCodeSnippet">
function sayHello() {
    console.log("Hello, Fa-Tools Community!");
}
sayHello();
    </code></pre>
    <button class="copy-btn" data-target-id="myCodeSnippet">
        <span class="icon">📋</span> <span class="text">کپی کد</span>
    </button>
    <span class="copy-feedback" aria-live="polite"></span>
</div>

<div class="code-block">
    <pre><code id="anotherCodeSnippet">
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc; /* یه غلط املایی برای نمونه */
}
    </code></pre>
    <button class="copy-btn" data-target-id="anotherCodeSnippet">
        <span class="icon">📋</span> <span class="text">کپی کد</span>
    </button>
    <span class="copy-feedback" aria-live="polite"></span>
</div>
    

.code-block {
    position: relative;
    background-color: #2d2d2d; /* پس‌زمینه تیره برای کد */
    color: #f8f8f2;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    overflow-x: auto; /* برای اسکرول افقی در موبایل */
}

.code-block pre {
    margin: 0;
    padding-top: 40px; /* برای فضای دکمه کپی */
    font-size: 15px;
    line-height: 1.6;
    direction: ltr;
    text-align: left;
}

.code-block .copy-btn {
    position: absolute;
    top: 10px;
    right: 10px; /* موقعیت دکمه در بالا سمت راست */
    background-color: #3498db;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.3s ease;
}

.code-block .copy-btn:hover {
    background-color: #2980b9;
}

.code-block .copy-feedback {
    position: absolute;
    top: 10px;
    left: 10px; /* موقعیت فیدبک در بالا سمت چپ */
    background-color: #2ecc71;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 13px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.code-block .copy-feedback.show {
    opacity: 1;
    visibility: visible;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .code-block pre {
        font-size: 14px;
    }
    .code-block .copy-btn {
        padding: 6px 10px;
        font-size: 13px;
    }
    .code-block .copy-btn .text {
        display: none; /* مخفی کردن متن "کپی کد" در موبایل برای فضای بیشتر */
    }
    .code-block .copy-feedback {
        padding: 6px 10px;
        font-size: 12px;
    }
}
    

document.addEventListener('DOMContentLoaded', () => {
    // همه دکمه‌های کپی رو پیدا می‌کنیم
    const copyButtons = document.querySelectorAll('.copy-btn');

    copyButtons.forEach(button => {
        button.addEventListener('click', async () => {
            const targetId = button.dataset.targetId;
            const codeElement = document.getElementById(targetId);
            const feedbackElement = button.nextElementSibling; // span.copy-feedback

            if (!codeElement) {
                console.error(`Element with ID "${targetId}" not found.`);
                showFeedback(feedbackElement, 'خطا!', 'error');
                return;
            }

            const textToCopy = codeElement.textContent;

            try {
                // چک می‌کنیم آیا مرورگر از Clipboard API پشتیبانی می‌کنه یا نه
                if (navigator.clipboard && navigator.clipboard.writeText) {
                    await navigator.clipboard.writeText(textToCopy);
                    showFeedback(feedbackElement, 'کپی شد!', 'success');
                } else {
                    // Fallback برای مرورگرهای قدیمی‌تر (اختیاری)
                    // این قسمت برای IE یا مرورگرهای خیلی قدیمی کاربرد داره
                    const textarea = document.createElement('textarea');
                    textarea.value = textToCopy;
                    textarea.style.position = 'fixed'; // برای اینکه دیده نشه
                    textarea.style.left = '-9999px';
                    document.body.appendChild(textarea);
                    textarea.focus();
                    textarea.select();
                    document.execCommand('copy');
                    textarea.remove();
                    showFeedback(feedbackElement, 'کپی شد! (Fallback)', 'success');
                }
            } catch (err) {
                console.error('Failed to copy text: ', err);
                showFeedback(feedbackElement, 'کپی نشد!', 'error');
            }
        });
    });

    // تابع برای نمایش فیدبک بصری
    function showFeedback(element, message, type) {
        element.textContent = message;
        element.classList.remove('success', 'error'); // کلاس‌های قبلی رو پاک می‌کنیم
        element.classList.add(type, 'show'); // کلاس جدید و 'show' رو اضافه می‌کنیم

        // بعد از چند ثانیه فیدبک رو پنهان می‌کنیم
        setTimeout(() => {
            element.classList.remove('show');
            // بعد از پنهان شدن کلاس‌های رنگی رو هم پاک می‌کنیم
            setTimeout(() => {
                element.classList.remove('success', 'error');
            }, 300); // زمان transition CSS
        }, 2000); // 2 ثانیه نمایش
    }
});

// برای اینکه دکمه کپی در بلوک‌های کد خود مقاله هم کار کنه
async function copyCodeSample(button) {
    const targetId = button.dataset.target;
    const codeElement = document.getElementById(targetId);
    if (!codeElement) {
        console.error(`Code element with ID "${targetId}" not found.`);
        return;
    }
    const textToCopy = codeElement.textContent;
    try {
        await navigator.clipboard.writeText(textToCopy);
        button.textContent = 'کپی شد!';
        setTimeout(() => {
            button.textContent = 'کپی';
        }, 2000);
    } catch (err) {
        console.error('Failed to copy code sample: ', err);
        button.textContent = 'خطا!';
        setTimeout(() => {
            button.textContent = 'کپی';
        }, 2000);
    }
}
    

💡 نکته: برای بلوک‌های کد خودت، می‌تونی از یه syntax highlighter مثل Prism.js یا Highlight.js استفاده کنی تا کدها شیک‌تر نمایش داده بشن.

مشکل ۱: دکمه کپی کار نمی‌کنه و هیچ اتفاقی نمی‌افته.

✔ راه‌حل:

• کنسول مرورگر رو چک کن: F12 رو بزن و تب Console رو باز کن. آیا خطای جاوااسکریپت می‌بینی؟ مثل “Failed to copy text” یا “Permission denied”.
• HTTPS رو مطمئن شو: Clipboard API فقط روی HTTPS کار می‌کنه (مگر در `localhost` برای توسعه). اگه سایتت HTTP هست، باید به HTTPS منتقلش کنی.
• پشتیبانی مرورگر: مطمئن شو که مرورگری که استفاده می‌کنی (مثلاً IE11) از Clipboard API پشتیبانی می‌کنه. اگه نه، باید از Fallback استفاده کنی یا از کتابخانه‌ای مثل Clipboard.js بهره ببری.
• `id` ها رو چک کن: مطمئن شو که `id` کد المنت و `data-target-id` دکمه کپی دقیقاً با هم مطابقت دارن.

مشکل ۲: پیام “کپی شد!” نمایش داده نمیشه یا ناپدید نمیشه.

✔ راه‌حل:

• CSS رو بررسی کن: مطمئن شو که کلاس‌های `show`, `success`, `error` در CSSت تعریف شدن و ترنزیشن‌ها (Transitions) درست کار می‌کنن.
• مسیر `feedbackElement`: در جاوااسکریپت، مطمئن شو که `feedbackElement` داره `span.copy-feedback` صحیح رو پیدا می‌کنه. (`button.nextElementSibling` برای این کار در ساختار ماست).
• `setTimeout`ها: چک کن که توابع `setTimeout` برای نمایش و پنهان کردن فیدبک، به درستی زمان‌بندی شده باشن.

مشکل ۳: کد در موبایل از کادر خارج میشه.

✔ راه‌حل:

• `overflow-x: auto` روی `pre` یا `code-block`: مطمئن شو که این ویژگی رو روی عنصر والد کد (معمولاً `pre` یا `code-block`) اعمال کردی. این کار باعث ایجاد اسکرول افقی می‌شه.
• `white-space: pre-wrap`: گاهی اوقات برای کنترل شکستن خطوط، این ویژگی هم مفیده، اما برای کدهای برنامه‌نویسی معمولاً `white-space: pre` یا `pre-line` بهتره تا فرمت کد به هم نریزه و با `overflow-x: auto` ترکیب بشه.
• `word-break: break-all`: در موارد خاص، این می‌تونه کمک کنه، اما با احتیاط استفاده بشه چون ممکنه کلمات رو بشکنه.

مشکل ۴: کد کپی میشه اما فرمتینگ (فاصله‌ها، خطوط جدید) بهم می‌ریزه.

✔ راه‌حل:

• `textContent` و نه `innerHTML`: برای استخراج متن از عنصر کد، همیشه از `element.textContent` استفاده کن. `innerHTML` تگ‌های HTML رو هم برمی‌گردونه که باعث بهم‌ریختگی می‌شه.
• Pre-formatted text: مطمئن شو که کدت داخل تگ `pre` و `code` قرار داره. این تگ‌ها به مرورگر می‌گن که باید متن رو “همونطور که هست” نمایش بده، شامل فاصله‌ها و شکست خطوط.

سوالات متداول (FAQ)