jQuery: إضافة شريط أدوات تفاعلي للتحكم بمحتوى المواضيع

[كود جيفري]

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

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

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

الخطوة الأولى: قالب الموضوع
لوحة الإدارة ← مظهر المنتدى ← التومبلايتات والقوالب ← إدارة عامة، ثم اضغط على تعديل قالب viewtopic_body وابحث عن:

 <!-- BEGIN switch_signature -->
 <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->
 </div>

وأضف بعده مباشرة السطر التالي:

<div class="Lufy"></div>

ثم سجّل وانشر القالب.

الخطوة الثانية: كود الجافا سكريبت
لوحة الإدارة ← عناصر إضافية ← إدارة أكواد Javascript، وأنشئ كودًا جديدًا بالخيارات التالية:
العنوان: اكتب ما تريد
أضف الكود إلى: المواضيع

(function($) {
    $(document).ready(function() {

        const settingsStyles = `
            :root {
                --pro-bg: #1e1e1e;
                --pro-surface-bg: #2d2d2d;
                --pro-border: #404040;
                --pro-shadow: rgba(0, 0, 0, 0.3);
                --pro-heading-color: #f1f1f1;
                --pro-button-text: #e0e0e0;
                --pro-button-hover-bg: #3c3c3c;
                --pro-accent-color: #00aaff;
                --pro-accent-text: #ffffff;
            }
            .post-content img, .post-content a, .post-content blockquote, .post-content .quote, .post-content .codebox, .post-content iframe, .post-content video, .post-content .attachbox, .post-content .post-signature {
                transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.5s ease, margin 0.5s ease, padding 0.5s ease, pointer-events 0s ease 0.5s;
                transform-origin: top;
                will-change: transform, opacity, max-height;
            }
            .hidden-by-settings {
                opacity: 0;
                transform: scaleY(0.9);
                max-height: 0 !important;
                overflow: hidden !important;
                margin-top: 0 !important;
                margin-bottom: 0 !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                border-width: 0 !important;
                pointer-events: none;
            }
            .post-settings-bar {
                background: var(--pro-bg);
                border: 1px solid var(--pro-border);
                padding: 1rem 1.25rem;
                margin-top: 1.5rem;
                border-radius: 12px;
                box-shadow: 0 10px 30px var(--pro-shadow);
            }
            .post-settings-bar h4 {
                margin: 0 0 1rem 0;
                font-size: 1rem;
                font-weight: 600;
                color: var(--pro-heading-color);
            }
            .settings-controls {
                display: flex;
                flex-wrap: nowrap;
                gap: 0.5rem;
            }
            .settings-controls button {
                all: unset;
                box-sizing: border-box;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex: 1 1 auto;
                min-width: 44px;
                gap: 0.5rem;
                padding: 0.6rem 0.8rem;
                font-size: 0.875rem;
                font-weight: 500;
                border: 1px solid var(--pro-border);
                background-color: var(--pro-surface-bg);
                color: var(--pro-button-text);
                border-radius: 8px;
                cursor: pointer;
                user-select: none;
                transition: all 0.2s ease-in-out;
            }
            .settings-controls button:hover {
                transform: translateY(-3px);
                background-color: var(--pro-button-hover-bg);
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            }
            .settings-controls button.active {
                background: var(--pro-accent-color);
                color: var(--pro-accent-text);
                border-color: var(--pro-accent-color);
                transform: translateY(-3px) scale(1.05);
                box-shadow: 0 5px 15px rgba(0, 170, 255, 0.3);
            }
            .settings-controls button .material-icons {
                font-size: 1.25rem;
            }
            @media (max-width: 768px) {
                .settings-controls button span {
                    display: none;
                }
            }
        `;

        $('head').append(`<style>${settingsStyles}</style>`);

        const settingsBarHTML = `
            <div class="post-settings-bar">
                <h4>ادوات&nbsp;المشاركة</h4>
                <div class="settings-controls">
                    <button data-action="toggle-images" title="إخفاء/إظهار الصور">
                        <i class="material-icons">image</i> <span>الصور</span>
                    </button>
                    <button data-action="toggle-links" title="إخفاء/إظهار الروابط">
                        <i class="material-icons">link_off</i> <span>الروابط</span>
                    </button>
                    <button data-action="toggle-quotes" title="إخفاء/إظهار الاقتباسات">
                        <i class="material-icons">format_quote</i> <span>الاقتباسات</span>
                    </button>
                    <button data-action="toggle-code" title="إخفاء/إظهار الأكواد">
                        <i class="material-icons">code_off</i> <span>الأكواد</span>
                    </button>
                    <button data-action="toggle-videos" title="إخفاء/إظهار الفيديو">
                        <i class="material-icons">videocam_off</i> <span>الفيديو</span>
                    </button>
                    <button data-action="toggle-attachments" title="إخفاء/إظهار المرفقات">
                        <i class="material-icons">attachment</i> <span>المرفقات</span>
                    </button>
                    <button data-action="toggle-signature" title="إخفاء/إظهار التوقيع">
                        <i class="material-icons">edit_off</i> <span>التوقيع</span>
                    </button>
                    <button data-action="font-increase" title="تكبير الخط">
                        <i class="material-icons">zoom_in</i>
                    </button>
                    <button data-action="font-decrease" title="تصغير الخط">
                        <i class="material-icons">zoom_out</i>
                    </button>
                </div>
            </div>
        `;

        $('.post-body').each(function() {
            const postContainer = $(this);
            postContainer.find('.Lufy').html(settingsBarHTML);

            postContainer.on('click', '.settings-controls button', function() {
                const button = $(this);
                const action = button.data('action');
                const postContent = postContainer.find('.post-content');
                
                const toggleActions = {
                    'toggle-images':      () => postContent.find('img').toggleClass('hidden-by-settings'),
                    'toggle-links':       () => postContent.find('a').toggleClass('hidden-by-settings'),
                    'toggle-quotes':      () => postContent.find('blockquote').toggleClass('hidden-by-settings'),
                    'toggle-code':        () => postContent.find('.codebox').toggleClass('hidden-by-settings'),
                    'toggle-videos':      () => postContent.find('iframe, video').toggleClass('hidden-by-settings'),
                    'toggle-attachments': () => postContent.find('.attachbox').toggleClass('hidden-by-settings'),
                    'toggle-signature':   () => postContent.find('.post-signature').toggleClass('hidden-by-settings'),
                };

                if (toggleActions[action]) {
                    button.toggleClass('active');
                    toggleActions[action]();
                } else if (action === 'font-increase') {
                    let currentSize = parseInt(postContent.css('font-size'));
                    if (currentSize < 28) postContent.css('font-size', `${currentSize + 1}px`);
                } else if (action === 'font-decrease') {
                    let currentSize = parseInt(postContent.css('font-size'));
                    if (currentSize > 12) postContent.css('font-size', `${currentSize - 1}px`);
                }
            });
        });
    });
})(jQuery);

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

أداة تمنح القارئ حرية تخصيص طريقة عرض المحتوى بما يناسبه، وتجعل قراءة المواضيع الطويلة أكثر راحة. فكرة الكود للعضو كونان2000.

صاحب الكود: Lufy