كود لنسخ و تحديد محتوى صناديق الاكواد للزين فورو المطور

            <xf:macro template="prism_macros" name="setup" />[/SIZE][/B]
[SIZE=5][B]
<div class="bbCodeBlock bbCodeBlock--screenLimited bbCodeBlock--code">
    <div class="bbCodeBlock-title">
        <button class="selectCodeButton">تحديد المحتوى</button>
        <button class="copyCodeButton">نسخ الكود</button>
        {{ $config.phrase ?: phrase('code') }}{$xf.language.label_separator}
    </div>
    <div class="bbCodeBlock-content" dir="ltr">
        <pre class="bbCodeCode" dir="ltr" data-xf-init="code-block" data-lang="{{ $language ?: '' }}">
            <code>{$content}</code>
        </pre>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // تحديد جميع أزرار التحديد والنسخ
    const codeBlocks = document.querySelectorAll('.bbCodeBlock');
    
    codeBlocks.forEach(block => {
        const selectBtn = block.querySelector('.selectCodeButton');
        const copyBtn = block.querySelector('.copyCodeButton');
        const codeElement = block.querySelector('.bbCodeBlock-content pre code');
        
        // حدث تحديد المحتوى
        selectBtn.addEventListener('click', () => {
            const range = document.createRange();
            range.selectNodeContents(codeElement);
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
        });
        
        // حدث نسخ المحتوى
        copyBtn.addEventListener('click', async () => {
            try {
                await navigator.clipboard.writeText(codeElement.textContent);
                showNotification('تم نسخ الكود بنجاح!', 'success');
            } catch (err) {
                showNotification('فشل في نسخ الكود', 'error');
                console.error('Failed to copy: ', err);
            }
        });
    });
    
    // عرض الإشعارات
    function showNotification(message, type) {
        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        notification.textContent = message;
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.classList.add('fade-out');
            setTimeout(() => notification.remove(), 500);
        }, 3000);
    }
});
</script>

<style>
/* أنماط عامة */
.bbCodeBlock {
    margin: 1em 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.bbCodeBlock-title {
    background: #f5f5f5;
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbCodeBlock-content {
    background: #f9f9f9;
    max-width: 100%;
    overflow-x: auto;
}

.bbCodeCode {
    white-space: pre;
    word-wrap: normal;
    margin: 0;
    padding: 12px;
    font-family: 'Consolas', 'Monaco', 'Andale Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    background: transparent;
}

/* أنماط الأزرار */
.selectCodeButton, .copyCodeButton {
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.selectCodeButton {
    background: #ffa500;
    color: white;
}

.copyCodeButton {
    background: #4CAF50;
    color: white;
}

.selectCodeButton:hover {
    background: #e69500;
}

.copyCodeButton:hover {
    background: #45a049;
}

/* أنماط الإشعارات */
.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 4px;
    color: white;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.5s;
}

.notification.success {
    background: #4CAF50;
}

.notification.error {
    background: #f44336;
}

.notification.fade-out {
    opacity: 0;
}

/* تحسينات للعرض على الأجهزة الصغيرة */
@media (max-width: 768px) {
    .bbCodeBlock-title {
        flex-wrap: wrap;
    }
    
    .selectCodeButton, .copyCodeButton {
        margin-bottom: 5px;
    }
}
</style>