طلب تصميم كود نسخ الكود توسيع الكود نافذة منبثقة للنسخة الأخيرة

/***
* Syntax Highlighter funtionality for Forumotion!
* CSS: .codebox dd.cont_code
* (c)  hamsahaq
* Version: 1.28082013-jq1.9.1
* Made by JScript - 2013/12/16
*/
code.punbb_block, pre.punbb_block {
    max-height: 250px !important;
    background: #000000;
    color: #babfbf;
    overflow: scroll;
}
.punbbtop {
  background-color: #FFDEAD !important;
  color: #1D3652;
  font-size: 10px;
  font-weight: bold;
  line-height: 100%;
  margin-top: 5px;
  padding: 2px 1px 2px 3px;
}
.hljs {
  padding: 0 !important;
  background-color: #000 !important;
}
.punbbtop button {
  background: -moz-linear-gradient(center top , #EDEDED 5%, #DFDFDF 100%) repeat scroll 0 0 #EDEDED;
  border: 1px solid #BBBBBB;
  border-radius: 3px;
  color: #1D3652;
  cursor: pointer;
  display: inline-block;
  font-size: 10px;
  padding: 0 6px;
  text-decoration: none;
}
.punbbtop button:hover {
  background: -moz-linear-gradient(center top , #DFDFDF 5%, #EDEDED 100%) repeat scroll 0 0 #DFDFDF;
  border-color: #9A9A9A;
  color: #3D70A3;
}
.punbbtop button:active {
  position: relative;
  top: 1px;
}
pre.punbb_block.expand, code.punbb_block.expand {
  max-height: 100% !important;
}
.prettyprint ol.linenums {
  padding-left: 15px !important;
}

// تنفيذ الكود
document.addEventListener('DOMContentLoaded', () => {
    const tagCode = document.querySelectorAll('.codebox code');
    
    tagCode.forEach(code => {
        const sContent = code.innerHTML;
        const codebox = code.closest('.codebox');
        
        const punbbtop = document.createElement('div');
        punbbtop.className = 'punbbtop';
        punbbtop.innerHTML = `
            تظليل المحتوى
            <button onclick="punbbExpand(this); return false;">تكبير</button>
            <button style="display: none" onclick="punbbCollapse(this); return false;">تصغير</button>
            <button onclick="punbbSelect(this); return false;">انسخ</button>
            <button onclick="punbbPopup(this); return false;">نافذة</button>
            <button style="margin-right: 50px; float: right;" onclick="punbbAbout(this); return false;"></button>`;
        
        const pre = document.createElement('pre');
        pre.className = 'highlight punbb_block';
        pre.innerHTML = sContent;

        codebox.parentNode.insertBefore(punbbtop, codebox);
        codebox.parentNode.insertBefore(pre, codebox);
        codebox.remove();
    });

    const script = document.createElement('script');
    script.src = 'http://balupton.github.io/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js';
    script.onload = () => {
        SyntaxHighlighter.init({ 'wrapLines': false });
    };
    document.head.appendChild(script);
});

// تعريف الدوال
function punbbExpand(oThis) {
    oThis.style.display = 'none';
    oThis.nextElementSibling.style.display = '';
    oThis.parentNode.nextElementSibling.classList.add('expand');
}

function punbbCollapse(oThis) {
    oThis.style.display = 'none';
    oThis.previousElementSibling.style.display = '';
    oThis.parentNode.nextElementSibling.classList.remove('expand');
}

function punbbPopup(oThis) {
    const content = oThis.parentNode.nextElementSibling.innerHTML;
    const my_window = window.open("", "PunBB_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('<pre>' + content + '</pre>');
}

function punbbAbout(oThis) {
    alert('Simple code to add Syntax Highlighter fuctionality for Forumotion\n\hamsahaq - 2013/12/16\n');
}

function punbbSelect(oThis) {
    const text = oThis.parentNode.nextElementSibling;
    const range = document.createRange();
    range.selectNodeContents(text);
    
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
}

/***
* Syntax Highlighter funtionality for Forumotion!
* CSS: .codebox dd.cont_code
* (c)  hamsahaq
* Version: 1.28082013-jq1.9.1
* Made by JScript - 2013/12/16
*/
code.punbb_block, pre.punbb_block {
    max-height: 250px !important;
    background: #384246;
    color: #ffffff;
    overflow: scroll;
}
.punbbtop {
    background-color: #9ca9af !important;
    border-right: solid #1e6197 6px;
    margin-top: 5px;
    padding: 7px;
}
.hljs {
  padding: 0 !important;
  background-color: #000 !important;
}
.punbbtop button {
    background: #e5e5e5;
    border: 1px solid #8f8f8f;
    color: #1D3652;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    padding: 6px;
    margin-left: 4px;
}
.punbbtop button:hover {
  background: -moz-linear-gradient(center top , #DFDFDF 5%, #EDEDED 100%) repeat scroll 0 0 #DFDFDF;
  border-color: #9A9A9A;
  color: #3D70A3;
}
.punbbtop button:active {
  position: relative;
  top: 1px;
}
pre.punbb_block.expand, code.punbb_block.expand {
  max-height: 100% !important;
}
.prettyprint ol.linenums {
  padding-left: 15px !important;
}

$(document).ready(function() {
    $('.codebox code').each(function() {
        const code = $(this);
        const sContent = code.html();
        const codebox = code.closest('.codebox');

        const punbbtop = $('<div class="punbbtop"></div>').html(`
            <button class="expand">تكبير</button>
            <button class="collapse" style="display: none;">تصغير</button>
            <button class="copy">نسخ</button>
            <button class="popup">نافذة</button>
        `);

        const pre = $('<pre class="highlight punbb_block"></pre>').html(sContent);

        codebox.after(pre).after(punbbtop);
        codebox.remove();
    });

    $.getScript('http://balupton.github.io/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js', function() {
        SyntaxHighlighter.init({ 'wrapLines': false });
    });

    $(document).on('click', '.expand', function(e) {
        e.preventDefault();
        $(this).hide();
        $(this).siblings('.collapse').show();
        $(this).parent().next('pre').addClass('expand');
    });

    $(document).on('click', '.collapse', function(e) {
        e.preventDefault();
        $(this).hide();
        $(this).siblings('.expand').show();
        $(this).parent().next('pre').removeClass('expand');
    });

    $(document).on('click', '.popup', function(e) {
        e.preventDefault();
        const content = $(this).parent().next('pre').html();
        const my_window = window.open("", "PunBB_Code", "scrollbars=1,toolbar=no,menubar=no,status=0,left=0,location=0,menubar=0,top=0,width=640,height=480");
        my_window.document.write('<pre>' + content + '</pre>');
    });

    $(document).on('click', '.copy', function(e) {
        e.preventDefault();
        const text = $(this).parent().next('pre')[0];
        const range = document.createRange();
        range.selectNodeContents(text);
        
        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        
        try {
            document.execCommand('copy');
            showCopyMessage($(this));
        } catch (err) {
            console.error('Failed to copy: ', err);
        }

        selection.removeAllRanges();
    });

    function showCopyMessage(button) {
        const message = $('<span>تم النسخ!</span>').css({
            color: 'green',
            marginLeft: '10px'
        });
        button.parent().find('.copy').after(message);

        setTimeout(() => {
            message.remove();
        }, 400);
    }
});