عداد زوار احترافي للأقسام

[كود جيفري]

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

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

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

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

كود يُظهر عبارة (0 يشاهده) عند عدم وجود متصفح للقسم

$(function() {
    const styles = `
        .forum-title-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 5px;
        }
        .forum-title-wrapper h3 {
            margin: 0;
        }
        .title-visitor-counter {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            font-weight: bold;
            color: #555;
            background-color: #f0f2f5;
            padding: 4px 10px;
            border-radius: 15px;
            flex-shrink: 0;
            line-height: 1;
        }
        .title-visitor-counter .material-icons {
            font-size: 16px;
        }
    `;
    $('head').append('<style>' + styles + '</style>');

    let forumVisitorCounts = {};

    $('#index .forum-description h3 a').each(function() {
        const forumName = $(this).text().trim();
        forumVisitorCounts[forumName] = 0;

        const counterSpan = $('<span class="title-visitor-counter" data-forum-name="' + forumName.replace(/"/g, '"') + '"></span>');
        const titleH3 = $(this).closest('h3');

        if (!titleH3.parent().hasClass('forum-title-wrapper')) {
            titleH3.wrap('<div class="forum-title-wrapper"></div>');
        }
        titleH3.after(counterSpan);
    });

    $.get('/viewonline', function(data) {
        const htmlData = $(data);
        const onlineTable = htmlData.find('table.table1');

        onlineTable.find('a[href^="/f"]').each(function() {
            const currentForumNameInOnlineList = $(this).text().trim();
            if (forumVisitorCounts.hasOwnProperty(currentForumNameInOnlineList)) {
                forumVisitorCounts[currentForumNameInOnlineList]++;
            }
        });

        for (const forumName in forumVisitorCounts) {
            if (forumVisitorCounts.hasOwnProperty(forumName)) {
                const count = forumVisitorCounts[forumName];
                let viewerText = '';

                if (count === 1) {
                    viewerText = 'يشاهده';
                } else if (count === 2) {
                    viewerText = 'يشاهدان';
                } else if (count >= 3 && count <= 10) {
                    viewerText = 'يشاهدون';
                } else if (count > 10) {
                    viewerText = 'يشاهدون';
                } else {
                     viewerText = 'يشاهدون';
                }
                
                const counterHtml = '<i class="material-icons">visibility</i>' + count + ' ' + viewerText;
                $('.title-visitor-counter[data-forum-name="' + forumName.replace(/"/g, '"') + '"]').html(counterHtml);
            }
        }

    }).fail(function() {
        $('.title-visitor-counter').html('<i class="material-icons">error_outline</i>');
    });
});

كود يُخفي عبارة (0 يشاهده) عند عدم وجود متصفح للقسم

$(function() {
    const styles = `
        .forum-title-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 5px;
        }
        .forum-title-wrapper h3 {
            margin: 0;
        }
        .title-visitor-counter {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            font-weight: bold;
            color: #555;
            background-color: #f0f2f5;
            padding: 4px 10px;
            border-radius: 15px;
            flex-shrink: 0;
            line-height: 1;
        }
        .title-visitor-counter .material-icons {
            font-size: 16px;
        }
    `;
    $('head').append('<style>' + styles + '</style>');

    const forumCounters = new Map();
    $('#index .forum-description h3 a').each(function() {
        const forumName = $(this).text().trim();
        const escapedName = forumName.replace(/"/g, '"');
        const counterSpan = $('<span class="title-visitor-counter" data-forum-name="' + escapedName + '"></span>').hide();
        const titleH3 = $(this).closest('h3');

        if (!titleH3.parent().hasClass('forum-title-wrapper')) {
            titleH3.wrap('<div class="forum-title-wrapper"></div>');
        }
        titleH3.after(counterSpan);
        forumCounters.set(forumName, counterSpan);
    });

    function updateStats() {
        $.get('/viewonline?_=' + new Date().getTime(), function(data) {
            const currentCounts = new Map();
            forumCounters.forEach((value, key) => {
                currentCounts.set(key, 0);
            });

            const htmlData = $(data);
            const onlineTable = htmlData.find('table.table1');

            onlineTable.find('a[href^="/f"]').each(function() {
                const onlineForumName = $(this).text().trim();
                if (currentCounts.has(onlineForumName)) {
                    currentCounts.set(onlineForumName, currentCounts.get(onlineForumName) + 1);
                }
            });

            currentCounts.forEach((count, forumName) => {
                const counterElement = forumCounters.get(forumName);

                if (count > 0) {
                    let viewerText;
                    if (count === 1) {
                        viewerText = 'يشاهده';
                    } else if (count === 2) {
                        viewerText = 'يشاهدان';
                    } else {
                        viewerText = 'يشاهدون';
                    }

                    const counterHtml = `<i class="material-icons">visibility</i> ${count} ${viewerText}`;
                    counterElement.html(counterHtml).show();
                } else {
                    counterElement.hide();
                }
            });

        }).fail(function() {
            forumCounters.forEach((counterElement) => {
                counterElement.html('<i class="material-icons">error_outline</i>').show();
            });
        });
    }

    updateStats();
    setInterval(updateStats, 60000);
});

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

لمسة حيوية تجعل الصفحة الرئيسية أكثر تفاعلًا وتكشف الأقسام الأكثر نشاطًا في منتداك. الكود مستوحى من فكرة "كود عدد زوار كل قسم مثل الفي بي".

صاحب الكود: LuFFy