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

[abdulrahman]

<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>

​

بسم الله الرحمن الرحيم​

​

اقدم لكم هذا الكود النسخة المطورة الجديدة الذي يعمل على تحديد محتوى صندوق الاكواد لتسهيل عملية النسخ والنقل على المستخدم. بإضافة زر في الزاوية العليا للصندوق وعند الضغط عليه يقوم بتحديد المحتوى و زر أخر للنسخ. خاصية بسيطة ولكن مهمة خصيصًا للمنتديات التطويرية مثل المنتدى هنا. تم انشاء هذا الكود من قبل منتدى نقطة إبداع​

توجه نحو لوحة الادارة - المظهر - البحث في القوالب، وابحث عن القالب التالي: bb_code_tag_code
ومن ثم استبدل محتواه بالكود التالي
​

 

[Binkaddas]

بارك الله فيك