غيّر صورتك الرمزية بضغطة زر دون تحديث الصفحة

[كود جيفري]

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

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

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

جافا سكريبت

العنوان: كما تشاء
الصلاحيات: المديرون - المشرفون - الأعضاء
المكان: في المواضيع

$(function() {
    if (typeof _userdata === 'undefined' || _userdata.session_logged_in === 0) return;
   
    var myID = _userdata.user_id;

    $('head').append(`
        <style>
            .avatar-modal-overlay {
                position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                background: rgba(0,0,0,0.8); display: none; justify-content: center;
                align-items: center; z-index: 99999;
            }
            .avatar-modal-content {
                background: #ffffff !important; padding: 25px !important; border-radius: 15px !important;
                width: 380px !important; text-align: center !important; direction: rtl !important;
                box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; border: 1px solid #ccc !important;
            }
            .ajax-avatar-container { margin-top: 10px; display: flex; justify-content: center; }
            .btn-main-trigger {
                background: #34495e; color: #fff; border: none; padding: 6px 12px;
                border-radius: 15px; font-size: 11px; cursor: pointer; transition: 0.3s;
            }
            .btn-main-trigger:hover { background: #2c3e50; }
           
         
            .btn-upload-box {
                background: #008aff; color: #fff; border: none; padding: 10px 20px;
                border-radius: 8px; cursor: pointer; font-weight: bold; width: 100%; margin-bottom: 10px;
            }
            .url-input-group {margin-top: 15px; }
            .modal-btns { display: flex; gap: 10px; justify-content: center; margin-top: 15px; }
            .btn-confirm { background: #2ecc71 !important; color: #fff !important; padding: 8px 20px; border-radius: 20px; border:none; cursor:pointer; }
            .btn-cancel { background: #e74c3c !important; color: #fff !important; padding: 8px 20px; border-radius: 20px; border:none; cursor:pointer; }
            .up-msg { font-size: 12px; margin-top: 10px; font-weight: bold; }
        </style>
    `);

    // إضافة المودال الجديد بتصميم يحتوي على الخيارين
    $('body').append(`
        <div class="avatar-modal-overlay">
            <div class="avatar-modal-content">
                <h3 id="modal-title" style="margin-bottom:20px; color:#333;"></h3>
               
                <div class="modal-option-zone">
                    <button type="button" class="btn-upload-box" id="inner-upload-btn"></button>
                    <input type="file" id="inner-file-input" style="display:none;" accept="image/*">
                </div>

                <div class="url-input-group">
                    <label style="cursor: auto; display:block; margin-bottom:8px; font-size:13px;" id="label-url"></label>
                    <input type="text" id="remote-avatar-url" placeholder="" style="width:90%; padding:10px; border:1px solid #959090; border-radius:5px; direction:rtl;">
                </div>

                <div class="up-msg" id="modal-status-msg"></div>

                <div class="modal-btns">
                    <button class="btn-confirm" id="modal-submit"></button>
                    <button class="btn-cancel" id="modal-close"></button>
                </div>
            </div>
        </div>
    `);

    // حقن النصوص برمجياً لضمان المسافات
    $('#modal-title').text('تحديث الصورة الرمزية');
    $('#inner-upload-btn').text('إختيار صورة من جهازك');
    $('#label-url').text('أو ضع رابط صورة خارجي:');
    $('#remote-avatar-url').attr('placeholder', 'لصق رابط الصورة هنا');
    $('#modal-submit').text('حفظ');
    $('#modal-close').text('إغلاق');

    function isMe(url) {
        if (!url) return false;
        return url.match(new RegExp('/u' + myID + '($|\\?)'));
    }

    // زر واحد فقط للحقن
    function inject($target) {
        if (!$target.length || $target.parent().find('.ajax-avatar-container').length > 0) return;
        var $container = $('<div class="ajax-avatar-container"></div>');
        var $btnMain = $('<button type="button" class="btn-main-trigger"></button>');
        $btnMain.text('تغيير الصورة');
        $container.append($btnMain);
        $target.after($container);
    }

    // أماكن الحقن
    $('.post-aside').each(function() { if (isMe($(this).find('.post-author-name a').attr('href'))) inject($(this).find('.post-author-avatar')); });
    $('dl.postprofile-details').each(function() { var hasMe = false; $(this).find('dt a').each(function() { if (isMe($(this).attr('href'))) hasMe = true; }); if (hasMe) inject($(this).find('dt a:has(img)').first()); });
    $('span.postdetails.poster-profile').each(function() { var hasMe = false; $(this).find('a').each(function() { if (isMe($(this).attr('href'))) hasMe = true; }); if (hasMe) inject($(this).find('a:has(img)').first()); });
    $('div.user').each(function() { if (isMe($(this).find('h4.username a').attr('href'))) inject($(this).find('div.user-basic-info a:has(img), div.user-basic-info img').first()); });
    $('div.postprofile').each(function() { var hasMe = false; $(this).find('dt a, .postprofile-name a').each(function() { if (isMe($(this).attr('href'))) hasMe = true; }); if (hasMe) inject($(this).find('.postprofile-avatar a:has(img), dt a:has(img)').first()); });

    function updateAvatar(dataObj, isFile, imageUrl) {
        var $msg = $('#modal-status-msg');
        $msg.text('جارٍ التحديث...').css('color', '#333');
       
        $.get('/profile?mode=editprofile&page_profil=avatars', function(html) {
            var formData = new FormData();
            $(html).find('form input[type="hidden"]').each(function() { formData.append($(this).attr('name'), $(this).val()); });
            isFile ? formData.append('avatar', dataObj) : formData.append('avatarremoteurl', dataObj);
            formData.append('submit', 'submit');

            $.ajax({
                url: '/profile?mode=editprofile&page_profil=avatars',
                type: 'POST', data: formData, contentType: false, processData: false,
                success: function() {
                    $msg.text('تم التحديث بنجاح!').css('color', 'green');
                    $('img').each(function() {
                        var $p = $(this).closest('a');
                        if ($p.length && isMe($p.attr('href'))) $(this).attr('src', imageUrl);
                    });
                    setTimeout(function() { $('.avatar-modal-overlay').hide(); $msg.text(''); }, 2000);
                }
            });
        });
    }

    // تشغيل النافذة
    $(document).on('click', '.btn-main-trigger', function() {
        $('.avatar-modal-overlay').css('display', 'flex');
        $('#modal-status-msg').text('');
    });

    // رفع ملف من داخل النافذة
    $(document).on('click', '#inner-upload-btn', function() { $('#inner-file-input').trigger('click'); });
    $(document).on('change', '#inner-file-input', function() {
        var file = this.files[0];
        if (!file) return;
        var reader = new FileReader();
        reader.onload = function(e) { updateAvatar(file, true, e.target.result); };
        reader.readAsDataURL(file);
    });

    // حفظ الرابط من داخل النافذة
    $(document).on('click', '#modal-submit', function() {
        var url = $('#remote-avatar-url').val();
        if (url && url.trim() !== "") {
            updateAvatar(url.trim(), false, url.trim());
        }
    });

    $(document).on('click', '#modal-close', function() { $('.avatar-modal-overlay').hide(); });
});

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

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

صاحب الكود: كونان2000