علبة الدردشة: إضافة ستة أزرار جديدة للتفاعل السريع

السلام عليكم ورحمة الله وبركاته,
إضافة ستة أزرار جديدة للتفاعل السريع إلى علبة الدردشة بدون الحاجه الى الضغط على زر "ارسال"

اهلا ومرحبا بجميع مستخدمي احلى منتدى

https://i.postimg.cc/G3JtqRSk/Animation.gif
_____________________________________

كيفية تثبيت البرنامج

الكود:

 button#show-lead-pencil,#show-GIF,button#show-youtube,button#show-url,button#show-large-text,button#show-background {
margin-left: 7px;
    border: 0 !important;
    float: right;
    font-size: 0;
    height: 25px;
    width: 25px;
   cursor: pointer;
}
button#show-lead-pencil {
    background: url(https://i.servimg.com/u/f30/20/35/61/89/collec10.png);
    background-size: 100% 100%;
  margin-right: 7px;
}
#show-GIF {
    background: url(https://i.servimg.com/u/f30/20/35/61/89/video-10.png);
    background-size: 100% 100%;
    position: relative;
}
button#show-youtube {
    background: url(https://i.servimg.com/u/f20/16/85/77/67/ocia_a15.jpg);
}
button#show-url {
    background: url(https://i.servimg.com/u/f20/16/85/77/67/ocia_a16.jpg);
}
button#show-large-text {
    background: url(https://i.servimg.com/u/f20/16/85/77/67/ocia_a17.jpg);
}
button#show-background {
    background: url(https://i.servimg.com/u/f20/16/85/77/67/360_f_10.jpg);
   background-size: 100% 100%;
}
        #GIF-list {
            position: fixed; /* لجعل القائمة ثابتة في وسط الشاشة */
            background-color: #fff;
            padding: 10px;
            display: none; /* إخفاء القائمة في البداية */
            z-index: 999; /* تأكد من ظهور القائمة فوق العناصر الأخرى */
            list-style: none;
            margin: 0;
            padding: 0;
            width: 400px; /* عرض القائمة بناءً على عدد الأعمدة */
            max-height: 80vh; /* ارتفاع أقصى للقائمة */
            overflow-y: auto; /* تمرير عمودي إذا كان المحتوى أكثر من الارتفاع المحدد */
            top: 55%; /* مركز القائمة عموديًا */
            left: 66%; /* مركز القائمة أفقيًا */
            transform: translate(-50%, -50%); /* تحريك القائمة لتكون تمامًا في المركز */
        }
        #GIF-list li {
            display: inline-block;
            margin: 5px;
        }
      #GIF-list img {
    height: 60px;
    width: 60px;
    cursor: pointer;
}


#GIF-list li {
    margin-top: 25px !important;
    display: inline-block;
    margin: 3px;
}

ul#GIF-list:before {
    font-weight: bold;
    font-size: 17px;
    color: #fffdfd;
    background: #2196F3;
    right: 0;
    left: 0;
    position: absolute;
    display: flex;
    content: "صور متحركة";
    justify-content: center;
    align-content: center;
}

  #lead-pencil-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        max-width: 400px;
    }
    #GIF-list img {
    height: 60px;
    width: 60px;
    cursor: pointer;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}            
    .lead-pencil {
        display: block;
        text-align: center;
        background-color: #f9f9f9;
        cursor: pointer;
        border-radius: 4px;
    }
    .lead-pencil:hover {
        background-color: #e0e0e0;
    }
button#show-more {
    border: 0 !important;
    background: #e3e5e5 !important;
    padding: 2px;
   cursor: pointer;
}

@media  (max-width: 768px) { /* يمكنك تعديل العرض حسب الحاجة */
    #GIF-list {
        width: 80% !important; /* عرض القائمة بناءً على عدد الأعمدة */
        transform: translate(-70%,-50%)!important; /* تحريك القائمة لتكون تمامًا في المركز */
    }
}

الكود:

$(document).ready(function() {  
    function setupButtons() {
        if ($(window).width() < 4768) {
            $('#nb-users-connected').after('<button id="show-more" type="button">المزيد</button>');
        }
    }

    setupButtons();
    $('body').append(`
        <div id="button-popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; padding: 20px; background: white; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.5); z-index: 1000;">
            <button class="popup-button" id="show-lead-pencil" type="button">أظهر الرموز</button>
            <button class="popup-button" id="show-youtube" type="button">يوتيوب</button>
            <button class="popup-button" id="show-url" type="button">رابط نصي</button>
            <button class="popup-button" id="show-large-text" type="button">نص كبير</button>
            <button class="popup-button" id="show-background" type="button">خلفية</button>
            <button class="popup-button" id="show-GIF" type="button">عرض GIF</button>
            <button id="close-button-popup">إغلاق</button>
        </div>
    `);

    $('#show-more').on('click', function(event) {
        event.preventDefault();
        event.stopPropagation();
        $('#button-popup').toggle();
    });

    $('#close-button-popup').on('click', function() {
        $('#button-popup').hide();
    });

    // إعدادات نافذة الرموز
    $('body').append(`
        <div id="popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; padding: 20px; background: white; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.5); z-index: 1000;">
            <div id="lead-pencil-list" style="margin-bottom: 10px;"></div>
            <button id="close-popup">إغلاق</button>
        </div>
    `);

    var symbols = [
        "السلام عليكم ورحمة الله", "كيف حالك", "تمام ولله الحمد", "اهلا ومرحبا بك",
        "هههههههه", "بروح انام", "تصبحون على خير", "مع السلامة",
        "^_^", "◕.◕", "(❁´◡`❁)", "(★‿★)",
        "X_X", "^_~", "（〇_ｏ）", "(>▂<)",
        "(＠_＠;)", "(￣﹏￣；)", "(►__◄)", "(︶^︶)"
    ];

    var uniqueSymbols = Array.from(new Set(symbols));
    uniqueSymbols.forEach(function(symbol) {
        $('#lead-pencil-list').append(`<span class="lead-pencil" data-symbol="${symbol}">${symbol}</span>`);
    });
    $(document).on('click', '#show-lead-pencil', function() {
        $('#popup').show();
        $('#button-popup').hide();
    });

    $('#close-popup').on('click', function() {
        $('#popup').hide();
    });

    $(document).on('click', '.lead-pencil', function() {
        var symbol = $(this).data('symbol');
        var currentText = $('#chatbox_footer #message').val();
        if (!currentText.includes(symbol)) {
            $('#message').val(currentText + symbol);
            $('#message').focus();
            $('button[value="إرسال"],input#submit_button').click();
        }
        $('#popup').hide();
    });

    // إعدادات الأزرار الأخرى
    $(document).on('click', '.popup-button', function() {
        handleButtonClick($(this).attr('id'));
        $('#button-popup').hide();
    });

    function handleButtonClick(buttonId) {
        if (buttonId === 'show-youtube') {
            var youtubeUrl = prompt("أدخل رابط يوتيوب:");
            if (youtubeUrl) {
                $('#message').val(function(index, value) {
                    return value + `[youtube]${youtubeUrl}[/youtube]`;
                });
                $('button[value="إرسال"],input#submit_button').click();
            }
        } else if (buttonId === 'show-url') {
            var url = prompt("أدخل الرابط:");
            var description = prompt("أدخل وصف الرابط:");
            if (url && description) {
                $('#message').val(function(index, value) {
                    return value + `[url=${url}]${description}[/url]`;
                });
                $('button[value="إرسال"],input#submit_button').click();
            }
        } else if (buttonId === 'show-large-text') {
            var largeText = prompt("أدخل النص الكبير:");
            if (largeText) {
                $('#message').val(function(index, value) {
                    return value + `[size=24]${largeText}[/size]`;
                });
                $('button[value="إرسال"],input#submit_button').click();
            }
        } else if (buttonId === 'show-background') {
            var imageUrl = prompt("أدخل رابط الصورة:");
            var backgroundText = prompt("أدخل النص:");
            if (imageUrl && backgroundText) {
                $('#message').val(function(index, value) {
                    return value + `[table][tr][td style="background: url(${imageUrl});background-repeat: no-repeat;background-size: 100% 100%;height: 88px;"]${backgroundText}[/td][/tr][/table]`;
                });
                $('button[value="إرسال"],input#submit_button').click();
            }
        } else if (buttonId === 'show-GIF') {
            $('#popup').hide();
            $('#GIF-list').toggle();
        }
    }

    $(document).on('click', function(event) {
        if (!$(event.target).closest('#popup, #button-popup, #show-more').length) {
            $('#popup').hide();
            $('#button-popup').hide();
        }
    });

    // إعدادات زر GIF
    var $imageList = $('<ul>').attr('id', 'GIF-list').hide();

    var GIF = [
        { src: 'https://i.servimg.com/u/f30/20/35/61/89/35664d10.gif', alt: 'ولد يرقص' },
        { src: 'https://i.servimg.com/u/f30/20/35/61/89/animat24.gif', alt: 'موزة ترقص' },
        { src: 'https://i.servimg.com/u/f30/20/35/61/89/sponge10.gif', alt: 'سبونج بوب' },
        { src: 'https://i.servimg.com/u/f30/20/35/61/89/goku-d10.gif', alt: 'جوجو' },
        { src: 'https://i.servimg.com/u/f30/20/35/61/89/detect10.gif', alt: 'كونان' },
        { src: 'https://i.servimg.com/u/f30/20/35/61/89/emoji-10.gif', alt: 'متعجب' },
        { src: 'https://i.servimg.com/u/f20/16/85/77/67/tom-an10.gif', alt: 'توم يبي ينام' },
        { src: 'https://i.servimg.com/u/f20/16/85/77/67/d6bd4210.gif', alt: 'توم وجيري' },
        { src: 'https://i.servimg.com/u/f20/16/85/77/67/kuroo-10.gif', alt: 'ضحكة' },
        { src: 'https://i.servimg.com/u/f20/16/85/77/67/c18xku10.gif', alt: 'huh' },
        { src: 'https://i.servimg.com/u/f20/16/85/77/67/cat-gi10.gif', alt: 'قطة' },
        { src: 'https://i.servimg.com/u/f20/16/85/77/67/2ded2410.gif', alt: 'haha' }
    ];

    GIF.forEach(function(image) {
        var $listItem = $('<li>');
        var $img = $('<img>').attr('src', image.src).attr('alt', image.alt);
        $listItem.append($img);
        $imageList.append($listItem);
    });

    $('body').append($imageList);

    $imageList.on('click', 'img', function() {
        var src = $(this).attr('src');
        $('#message').val(src);
        $('button[value="إرسال"],input#submit_button').click();
        $imageList.hide();
    });

    $(document).on('click', function(event) {
        if (!$(event.target).closest('#show-GIF, #GIF-list').length) {
            $imageList.hide();
        }
    });
});

خاتمة

,