تغيير أيقونة الموضوع بسرعة دون الحاجة إلى تعديل الموضوع أو تحديث الصفحة

[Admin]

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

معاينة الكود​

تركيب الكود​

ينطبق هذا على النسخ التالية phpBB3، وPunBB، وInvision، وModernBB، وAwesomeBB. شريطة ألا تكون قوالب التومبيلات عندك خضعت لتعديلات كبيرة.

من خلال الجافا سكربت: العنوان: كما تشاء || الصلاحيات: كما تشاء || المكان: في المواضيع

$(document).ready(function() {
    const iconSelector = 'h2 img, h3 img, .topic-title img, .postbody-head img';
    $(document).on('click', iconSelector, function(e) {
        const $imgElement = $(this);
        let $parentPost = $imgElement.closest('.post, .post-container, [id^="p"], .postbody').attr('id');
        if (!$parentPost) {
        $parentPost = $imgElement.closest('div[id]').attr('id');
        }
        const postId = $parentPost ? $parentPost.replace(/\D/g, '') : null;
        if (!postId) {
            console.error("تعذر العثور على رقم المساهمة");
            return;
        }
        e.preventDefault();
        const editUrl = '/post?p=' + postId + '&mode=editpost';
        $('#icon-picker').remove();
        const $picker = $('<div id="icon-picker" style="position:absolute; background:#fff; border:2px solid #3498db; z-index:999999; box-shadow:0 10px 30px rgba(0,0,0,0.4); border-radius:12px; direction:rtl; min-width:200px; padding:5px;">جاري التحميل...</div>');
        $('body').append($picker);
        $picker.css({ top: e.pageY + 10, left: e.pageX - 100 });

        $.get(editUrl, function(data) {
            const $html = $(data);
            const $iconInputs = $html.find('input[name="post_icon"]');
            if ($iconInputs.length === 0) {
                $picker.html('<p style="padding:15px; text-align:center; color:red;">لا توجد أيقونات أو صلاحيات.</p>');
                return;
            }
            let iconsHtml = '<div style="background:#3498db; color:#fff; padding:8px; text-align:center; font-weight:bold; border-radius:8px; margin-bottom:5px;">اختر الأيقونة</div>';
            iconsHtml += '<div style="max-height:220px; overflow-y:auto;">';
            $iconInputs.each(function() {
                const iconId = $(this).val();
                const $iconImg = $(this).closest('label').find('img');
                const iconSrc = $iconImg.attr('src');
                iconsHtml += `
                    <div class="set-icon-btn" data-id="${iconId}" data-src="${iconSrc || ''}"
                        style="cursor:pointer; border:1px solid #eee; padding:5px; text-align:center; border-radius:8px;">
                        ${iconSrc ? `<img src="${iconSrc}" style="max-width:62px;">` : `<span style="font-size:10px;">بدون</span>`}
                    </div>`;
            });
            iconsHtml += '</div>';
            $picker.html(iconsHtml);

            $('.set-icon-btn').on('click', function() {
                const selectedIconId = $(this).attr('data-id');
                const selectedSrc = $(this).attr('data-src');
                $picker.html('<div style="text-align:center; padding:15px;">جاري التحديث...</div>');
                const $form = $html.find('form[name="post"]');
                let formData = $form.serializeArray();
                formData = formData.filter(item => !['post_icon', 'mode', 'post', 'p'].includes(item.name));
                formData.push({ name: 'post_icon', value: selectedIconId });
                formData.push({ name: 'mode', value: 'editpost' });
                formData.push({ name: 'p', value: postId });
                formData.push({ name: 'post', value: 'إرسال' });
                $.post('/post', formData, function() {
                    const ts = new Date().getTime();
                    const $allIcons = $('h2 img, h3 img, .topic-title img, .postbody-head h3 img');
                    if (selectedIconId == "0" || !selectedSrc) {
                        $allIcons.hide();
                    } else {
                        $allIcons.attr('src', selectedSrc + '?t=' + ts).show();
                    }
                
                    $picker.fadeOut(function() { $(this).remove(); });
                }).fail(function() {
                    alert("فشل في الحفظ");
                    $picker.remove();
                });
            });
        });
    });
// كونان2000
    $(document).on('mousedown', function(e) {
        if (!$('#icon-picker').is(e.target) && $('#icon-picker').has(e.target).length === 0) {
            $('#icon-picker').remove();
        }
    });
});