الردود الآلية: كود ردود جاهزة بضغطة زر للأعضاء

[كود جيفري]

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

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

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

القوالب (التمبلايت)
ابحث في قالب viewtopic_body عن التالي:

{QUICK_REPLY_FORM}

واستبدله بالتالي:

<div class="Quick-response"></div>
{QUICK_REPLY_FORM}

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

كود Javascript
العنوان: اختيارك
الصلاحيات: اختيارك
أضف الكود إلى: المواضيع

$(document).ready(function () {
    var CONFIG = {
        autoSend: true, 
        sendDelay: 500,
        storageKey: 'quickRepliesPro',
        maxHistory: 20
    };

    var buttonsData = [

        {
            id: 'thanks',
            label: 'شكراً',
            color: '#330066',
            shortcut: 1,
            icon: 'favorite',
            texts: [
                'شكرا لك على هذه المساهمة القيمة',
                'كل الشكر والتقدير لك على هذا الطرح المميز',
                'أشكرك على هذه المشاركة الرائعة والمفيدة',
                'شكراً جزيلاً لك، مشاركة تستحق التقدير',
                'بارك الله فيك، وشكراً على هذا الطرح الجميل'
            ]
        },

        {
            id: 'excellent',
            label: 'ممتاز',
            color: '#006633',
            shortcut: 2,
            icon: 'star',
            texts: [
                'موضوع ممتاز وجهود رائعة',
                'طرح مميز جداً ويستحق الإشادة',
                'مشاركة ممتازة ومحتوى ثري ومفيد',
                'عمل رائع ومستوى مميز، أحسنت الاختيار',
                'ممتاز بكل المقاييس، استمر بهذا الإبداع'
            ]
        },

        {
            id: 'great',
            label: 'رائع',
            color: '#990033',
            shortcut: 3,
            icon: 'verified',
            texts: [
                'طرح رائع ومفيد جداً، سلمت يداك',
                'رائع جداً، موضوع جميل ومميز',
                'ما شاء الله، إبداع واضح في الطرح',
                'مشاركة رائعة أضافت الكثير للموضوع',
                'جميل جداً، اختيار موفق وطرح أكثر من رائع'
            ]
        },

        {
            id: 'continue',
            label: 'تابع',
            color: '#003366',
            shortcut: 4,
            icon: 'forward',
            texts: [
                'ننتظر تميزك الدائم، تابع تقدمك',
                'استمر في هذا العطاء الرائع، وننتظر المزيد',
                'واصل هذا الإبداع، القادم أجمل بإذن الله',
                'نتمنى أن نرى المزيد من هذه المشاركات المميزة',
                'إلى الأمام دائماً، وبانتظار جديدك المميز'
            ]
        },

        {
            id: 'creative',
            label: 'مبدع',
            color: '#663300',
            shortcut: 5,
            icon: 'palette',
            texts: [
                'أبدعت في اختيار هذا الموضوع',
                'إبداع وتميز واضح في اختيارك وطرحك',
                'مبدع كالعادة، طرح يستحق المتابعة',
                'أحسنت، لمسة إبداعية جميلة جداً',
                'تميز وإبداع في الطرح، سلمت أناملك'
            ]
        },

        {
            id: 'welcome',
            label: 'ترحيب',
            color: '#00838F',
            shortcut: 6,
            icon: 'waving_hand',
            texts: [
                'أهلاً وسهلاً بك، نورت المنتدى',
                'يا هلا ومرحبا بك، سعداء بانضمامك إلينا',
                'حياك الله، نتمنى لك إقامة ممتعة ومفيدة'
            ]
        },

        {
            id: 'useful',
            label: 'مفيد',
            color: '#6A1B9A',
            shortcut: 7,
            icon: 'lightbulb',
            texts: [
                'معلومات مفيدة جداً، شكراً على مشاركتها',
                'طرح غني بالمعلومات والفائدة، جزاك الله خيراً',
                'استفدت كثيراً من هذه المشاركة، بارك الله فيك'
            ]
        },
 
        {
            id: 'appreciation',
            label: 'تقدير',
            color: '#C62828',
            shortcut: 8,
            icon: 'thumb_up',
            texts: [
                'كل التقدير والاحترام لهذا المجهود الرائع',
                'جهد واضح ومميز، لك منا كل التقدير',
                'مجهود يستحق الثناء والتقدير، أحسنت'
            ]
        },

        {
            id: 'short',
            label: 'مختصر',
            color: '#455A64',
            shortcut: 9,
            icon: 'bolt',
            texts: [
                'مميز جداً، شكراً لك',
                'رائع، أحسنت',
                'طرح جميل ومفيد',
                'شكراً على الإبداع'
            ]
        },
 
 {
            id: 'useful',
            label: 'صورة مخالفة',
            color: '#FF0000',
            shortcut: 10,
            icon: 'privacy_tip',
            texts: [
                'قد يؤدي نشر صور النساء، حتى لو كانت صورًا من الأنمي أو رسومات، إلى ارتكاب ذنوب جارية (اذكر الله واحذر)'               
            ]
        }
 
    ];

    var savedData = {};
    try {
        savedData = JSON.parse(
            localStorage.getItem(CONFIG.storageKey)
        ) || {};
    } catch (e) {
        savedData = {};
    }
    if (!savedData.counts) savedData.counts = {};
    if (!savedData.lastUsed) savedData.lastUsed = {};
    if (!savedData.history) savedData.history = [];
    function saveData() {
        try {
            localStorage.setItem(
                CONFIG.storageKey,
                JSON.stringify(savedData)
            );
        } catch (e) {}
    }

    var $targetContainer = $('.Quick-response');
    if (!$targetContainer.length) {
        return;
    }

    if (!$('#materialIconsLink').length) {
        $('<link id="materialIconsLink" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">').appendTo('head');
    }
    if (!$('#quickRepliesProStyle').length) {

        $('<style id="quickRepliesProStyle">').text(`
      
      .qrp-wrapper:before {
    content: "الردود الآلية";
    background: #2196F3;
    color: #f3f3f3;
    width: 100%;
    text-align: center;
    padding: 7px;
}
          .qrp-wrapper {
    width: 100%;
    margin: 10px 0;
    font-family: Arial,sans-serif;
    background: #e7e7e7;
    border: solid 1px#2196F3;
    display: flex;
    flex-direction: column;
    align-items: center;
}
          .qrp-toolbar {
    display: flex;
    margin-bottom: 15px;
    border-bottom: dotted 1px;
    width: 100%;
    justify-content: center;
   padding: 5px;
}
            .qrp-tool {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                border: none;
                background: #f1f1f1;
                color: #333;
                border-radius: 18px;
                padding: 8px 12px;
                cursor: pointer;
                font-weight: bold;
                transition: .2s;
            }
            .qrp-tool:hover {
                transform: translateY(-1px);
                background: #e3e3e3;
            }
            .qrp-buttons {
                display: flex;
                flex-wrap: wrap;
                gap: 15px;
            }
.Quick-response span.material-icons {
    font-size: 19px;
}
            .qrp-btn {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                position: relative;
                border: none;
                color: #fff;
                padding: 8px 13px;
                border-radius: 20px;
                font-weight: bold;
                font-size: 15px;
                cursor: pointer;
                box-shadow: 0 2px 5px rgba(0,0,0,.18);
                transition: transform .15s, opacity .15s, box-shadow .15s;
            }

            .qrp-btn:hover {
                transform: translateY(-2px);
                opacity: .9;
                box-shadow: 0 4px 8px rgba(0,0,0,.22);
            }

            .qrp-btn:active {
                transform: scale(.95);
            }

            .qrp-btn .material-icons,
            .qrp-tool .material-icons {
                font-size: 16px;
                vertical-align: middle;
            }

            .qrp-count {
                display: inline-block;
                background: rgba(255,255,255,.2);
                border-radius: 10px;
                padding: 1px 5px;
                margin-right: 3px;
                font-size: 10px;
            }

            .qrp-shortcut {
                position: absolute;
                top: -7px;
                left: -5px;
                background: #222;
                color: #fff;
                border-radius: 8px;
                padding: 1px 5px;
                font-size: 9px;
                opacity: .8;
            }

            .qrp-status {
                display: flex;
                align-items: center;
                gap: 5px;
                margin-top: 7px;
                font-size: 11px;
                color: #888;
            }

            .qrp-random {
                background: linear-gradient(135deg,#7b1fa2,#512da8) !important;
                color: #fff !important;
            }

            .qrp-empty {
                color: #999;
                padding: 10px;
                font-size: 13px;
            }

            @media (max-width: 600px) {
                .qrp-toolbar {
                    flex-direction: column;
                    align-items: stretch;
                }

                .qrp-btn {
                    padding: 8px 10px;
                }
            }

        `).appendTo('head');
    }
    var $wrapper = $('<div class="qrp-wrapper"></div>');
    var $toolbar = $('<div class="qrp-toolbar"></div>');
    var $random = $(
        '<button type="button" class="qrp-tool qrp-random">' +
        '<span class="material-icons">shuffle</span> رد عشوائي' +
        '</button>'
    );
    var $buttons = $('<div class="qrp-buttons"></div>');
    var $status = $('<div class="qrp-status"></div>');
    $toolbar
        .append($random);

    $wrapper
        .append($toolbar)
        .append($buttons)
        .append($status);

    $targetContainer.empty().append($wrapper);
    function getRandomText(btnData) {

        if (!btnData.texts || !btnData.texts.length) {
            return '';
        }
        var previous = savedData.lastUsed[btnData.id];
        var available = btnData.texts.slice();

        if (available.length > 1 && previous) {
            available = available.filter(function (text) {
                return text !== previous;
            });
        }

        var selected =
            available[Math.floor(Math.random() * available.length)];

        savedData.lastUsed[btnData.id] = selected;

        return selected;
    }

    function insertText(textToInsert) {

        var editorInstance = null;

        try {
            if (
                $('#text_editor_textarea').length &&
                $('#text_editor_textarea').sceditor
            ) {
                editorInstance =
                    $('#text_editor_textarea')
                    .sceditor('instance');
            }
        } catch (e) {
            editorInstance = null;
        }
        if (editorInstance) {

            var currentContent = editorInstance.val();

            editorInstance.val(
                currentContent +
                (currentContent ? "\n" : "") +
                textToInsert
            );

        } else {
            var $container = $('.sceditor-container');
            if ($container.hasClass('sourceMode')) {
                var $textarea =
                    $('.sceditor-container textarea:visible');
                if ($textarea.length) {
                    var currentVal = $textarea.val();
                    $textarea
                        .val(
                            currentVal +
                            (currentVal ? "\n" : "") +
                            textToInsert
                        )
                        .trigger('change');
                }

            } else {
                var $iframe =
                    $('.sceditor-container iframe');
                if ($iframe.length) {
                    var $body =
                        $iframe.contents().find('body');

                    if ($body.length) {

                        var currentHtml =
                            $body.html() || '';

                        $body.html(
                            currentHtml +
                            (currentHtml ? "<br>" : "") +
                            textToInsert
                        );
                    }
                }
            }
            var $mainTextarea =
            $('#text_editor_textarea');
            if ($mainTextarea.length) {
                var mainVal =
                $mainTextarea.val() || '';
                $mainTextarea
                    .val(
                        mainVal +
                        (mainVal ? "\n" : "") +
                        textToInsert
                    )
                    .trigger('change');
            }
        }
    }
    function sendReply() {
        if (!CONFIG.autoSend) {
            return;
        }
        setTimeout(function () {
            var $send =
            $('[value="إرسال"],[value="send"],[value="Enviar"],[value="Envoyer"],[value="Invia"],[value="Senden"],[value="Verzenden"],[value="Trimiteti"],[value="Αποστολή"],[value="Send"]');
            if ($send.length) {
                $send.trigger('click');
            }

        }, CONFIG.sendDelay);
    }

    function executeReply(btnData) {
        var text = getRandomText(btnData);
        if (!text) {
            return;
        }
        var lastHistory =
            savedData.history.length
                ? savedData.history[0]
                : null;
        if (
            lastHistory &&
            lastHistory.text === text
        ) {

            if (btnData.texts.length > 1) {
                text = getRandomText(btnData);
            }
        }
        if (!savedData.counts[btnData.id]) {
            savedData.counts[btnData.id] = 0;
        }
        savedData.counts[btnData.id]++;
        savedData.history.unshift({
            id: btnData.id,
            text: text,
            time: Date.now()
        });
        if (
            savedData.history.length >
            CONFIG.maxHistory
        ) {
            savedData.history =
                savedData.history.slice(
                    0,
                    CONFIG.maxHistory
                );
        }

        saveData();
        insertText(text);
        renderButtons();
        updateStatus(
            'تم إدراج: ' + btnData.label
        );
        sendReply();
    }

    function renderButtons() {
        $buttons.empty();
        var visibleCount = 0;
        buttonsData.forEach(function (btnData) {
            visibleCount++;
            var count =
            savedData.counts[btnData.id] || 0;
            var $btn = $(
            '<button type="button" class="qrp-btn"></button>'
            ).css(
                'background-color',
                btnData.color
            );
            var iconHtml = btnData.icon ? '<span class="material-icons">' + btnData.icon + '</span>' : '';
            var $count = $(
                '<span class="qrp-count">' +
                count +
                '</span>'
            );
            $btn
                .html(iconHtml + ' ' + btnData.label + ' ')
                .append($count);
            if (btnData.shortcut) {
                $btn.append(
                    '<span class="qrp-shortcut">' +
                    'Alt+' +
                    btnData.shortcut +
                    '</span>'
                );
            }
            $btn.on('click', function () {
                executeReply(btnData);
            });
            $buttons.append($btn);
        });

        if (!visibleCount) {
            $buttons.append(
                '<div class="qrp-empty">' +
                'لا توجد ردود' +
                '</div>'
            );
        }
    }
    function updateStatus(message) {
        var total = 0;
        Object.keys(savedData.counts)
            .forEach(function (key) {
            total +=
            savedData.counts[key] || 0;
            });

        $status.html(
            message ? '<span class="material-icons" style="font-size:14px;">info</span> ' + message :
            '<span class="material-icons" style="font-size:14px;">analytics</span> إجمالي الردود المستخدمة: ' + total
        );
    }

    $random.on('click', function () {
        if (!buttonsData.length) {
            return;
        }
        var randomIndex =
            Math.floor(
                Math.random() *
                buttonsData.length
            );

        executeReply(
            buttonsData[randomIndex]
        );
    });
    $(document).on('keydown', function (e) {
        if (!e.altKey) {
            return;
        }
        var key = parseInt(e.key, 10);
        if (
            isNaN(key) ||
            key < 1 ||
            key > 9
        ) {
            return;
        }
        var btnData =
            buttonsData.find(function (item) {
                return item.shortcut === key;
            });
        if (btnData) {

            e.preventDefault();

            executeReply(btnData);
        }
    });
    renderButtons();
    updateStatus();
});
// ===== by كونان2000 =====

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

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

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