كود تحديد ونسخ المحتوى لنسخة AwesomeBB

[كود جيفري]

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

مثال على الكود​

شرح تركيب الكود​

خطوات التركيب
توجه إلى لوحة الإدارة ← عناصر إضافية ← HTML و JAVASCRIPT ← إدارة أكواد Javascript، واضغط على "إنشاء كود Javascript جديد" واملأ البيانات التالية:
العنوان: كود تحديد المحتوى
الصلاحيات: للجميع
مكان وضع الكود: المواضيع

jQuery(function ($) {
    var sCSS = '<style>' +
        '.AwesomeBB-main-container {' +
        '    background-color: #1E1E1E !important;' +
        '    border: 1px solid #444 !important;' +
        '    margin: 1em auto !important;' +
        '    max-width: 750px !important;' +
        '    border-radius: 6px !important;' +
        '    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;' +
        '    overflow: hidden !important;' +
        '}' +
        '.AwesomeBBtop {' +
        '    background-color: #252526 !important;' +
        '    color: #CCCCCC !important;' +
        '    font-weight: 500 !important;' +
        '    font-size: 13px !important;' +
        '    padding: 10px 15px !important;' +
        '    display: flex !important;' +
        '    justify-content: space-between !important;' +
        '    align-items: center !important;' +
        '    direction: rtl !important;' +
        '    border-bottom: 1px solid #3A3A3A !important;' +
        '}' +
        '.AwesomeBBtop .buttons-wrapper {' +
        '    display: flex !important;' +
        '    align-items: center !important;' +
        '}' +
        '.AwesomeBBtop button {' +
        '    display: flex !important;' +
        '    align-items: center !important;' +
        '    justify-content: center !important;' +
        '    gap: 8px !important;' +
        '    min-width: 105px !important;' +
        '    font-family: inherit !important;' +
        '    font-size: 12px !important;' +
        '    font-weight: 600 !important;' +
        '    background-color: transparent !important;' +
        '    color: #E5E5E5 !important;' +
        '    border: 1px solid #555555 !important;' +
        '    border-radius: 5px !important;' +
        '    padding: 6px 12px !important;' +
        '    margin-left: 8px !important;' +
        '    cursor: pointer !important;' +
        '    transition: all 0.2s ease !important;' +
        '}' +
        '.AwesomeBBtop button:hover {' +
        '    background-color: #3C3C3C !important;' +
        '    border-color: #777777 !important;' +
        '    color: #FFFFFF !important;' +
        '}' +
        '.AwesomeBBtop .btn-icon {' +
        '    font-size: 13px;' +
        '}' +
        '.AwesomeBBtop .btn-copy {' +
        '    color: #4EC9B0 !important;' +
        '    border-color: #4EC9B0 !important;' +
        '}' +
        '.AwesomeBBtop .btn-copy:hover {' +
        '    background-color: #4EC9B0 !important;' +
        '    color: #1E1E1E !important;' +
        '    border-color: #4EC9B0 !important;' +
        '}' +
        'pre.AwesomeBB_block {' +
        '    background-color: #1E1E1E !important;' +
        '    color: #D4D4D4 !important;' +
        '    font-family: "Fira Code", Consolas, "Courier New", monospace !important;' +
        '    font-size: 14px !important;' +
        '    line-height: 1.6 !important;' +
        '    max-height: 280px !important;' +
        '    overflow: auto !important;' +
        '    padding: 15px !important;' +
        '    margin: 0 !important;' +
        '    direction: ltr;' +
        '    text-align: left;' +
        '    border-top: none !important;' +
        '}' +
        'pre.AwesomeBB_block.expand {' +
        '    max-height: none !important;' +
        '}' +
        '.prettyprint ol.linenums {' +
        '    padding-left: 20px !important;' +
        '    color: #666 !important;' +
        '}' +
        '.prettyprint ol.linenums li {' +
        '    line-height: 1.6 !important;' +
        '}' +
        '</style>';

    $('head').append(sCSS);
    $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css">');

    $('.codebox').each(function () {
        var originalCodebox = $(this);
        var codeContentElement = originalCodebox.find('dd.cont_code');
        if (!codeContentElement.length) {
            codeContentElement = originalCodebox.find('code').first();
        }
        if (!codeContentElement.length) {
            return;
        }
        var sContent = codeContentElement.html();
        var newCodeboxHTML =
            '<div class="AwesomeBB-main-container">' +
            '  <div class="AwesomeBBtop">' +
            '    <div class="buttons-wrapper">' +
            '      <button class="btn-about" onclick="AwesomeBBAbout(this); return false;">' +
            '        <i class="fas fa-info-circle btn-icon"></i><span>حول</span>' +
            '      </button>' +
            '      <button class="btn-toggle-size" onclick="AwesomeBBToggleSize(this); return false;" ' +
            '        data-text-expand="تكبير" data-text-collapse="تصغير" ' +
            '        data-icon-expand-class="fas fa-expand-alt" data-icon-collapse-class="fas fa-compress-alt">' +
            '        <i class="fas fa-expand-alt btn-icon"></i><span>تكبير</span>' +
            '      </button>' +
            '      <button class="btn-copy" onclick="AwesomeBBSelect(this); return false;">' +
            '        <i class="fas fa-copy btn-icon"></i><span>نسخ الكود</span>' +
            '      </button>' +
            '      <button class="btn-new-window" onclick="AwesomeBBPopup(this); return false;">' +
            '        <i class="fas fa-external-link-alt btn-icon"></i><span>نافذة جديدة</span>' +
            '      </button>' +
            '    </div>' +
            '    <span class="code-title">الكود:</span>' +
            '  </div>' +
            '  <pre class="highlight AwesomeBB_block">' + sContent + '</pre>' +
            '</div>';
        originalCodebox.replaceWith(newCodeboxHTML);
    });

    if ($('pre.AwesomeBB_block').length > 0) {
        $.getScript('https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=desert', function () {
            $('pre.AwesomeBB_block').addClass('prettyprint linenums');
        });
    }
});

function AwesomeBBToggleSize(oThis) {
    var $button = jQuery(oThis);
    var $icon = $button.find('.btn-icon');
    var $text = $button.find('span');
    var preBlock = $button.closest('.AwesomeBB-main-container').find('pre.AwesomeBB_block');

    if (preBlock.hasClass('expand')) {
        preBlock.removeClass('expand');
        $text.text($button.data('text-expand'));
        $icon.removeClass($button.data('icon-collapse-class')).addClass($button.data('icon-expand-class'));
    } else {
        preBlock.addClass('expand');
        $text.text($button.data('text-collapse'));
        $icon.removeClass($button.data('icon-expand-class')).addClass($button.data('icon-collapse-class'));
    }
}

function AwesomeBBPopup(oThis) {
    var content = jQuery(oThis).closest('.AwesomeBB-main-container').find('pre.AwesomeBB_block').html();

    var my_window = window.open("", "AwesomeBB_Code", "scrollbars=1,toolbar=no,menubar=no,personalbar=no,status=0,left=0,location=0,menubar=0,top=0,width=640,height=480");

    my_window.document.write('<html><head><title>Code</title><style>body{margin:0;padding:5px;background:#1E1E1E;}pre{margin:0;font-family:"Fira Code",Consolas,monospace;font-size:14px;color:#D4D4D4;}</style></head><body><pre>' + content + '</pre></body></html>');
    my_window.document.close();
}

function AwesomeBBAbout(oThis) {
    alert('تم عمل الكود من قبل Lufy منتدى الدعم والمساعدة');
}

function AwesomeBBSelect(oThis) {
    var doc = document;
    var text = jQuery(oThis).closest('.AwesomeBB-main-container').find('pre.AwesomeBB_block')[0];
    if (doc.body.createTextRange) {
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

ثم اضغط على زر قدم.

أداة لا غنى عنها لأي منتدى يهتم بنشر الأكواد والشروحات التقنية، فهي توفر على الأعضاء الوقت وتمنح المحتوى مظهرًا مرتبًا. كل الشكر لصاحب الكود على تطويره.

صاحب الكود: Lufy