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

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

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

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

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

4. زر رابط نصي
يتيح للمستخدمين إنشاء روابط نصية مباشرة، مما يسهل تبادل المعلومات والمحتويات بشكل أكثر سلاسة ويسر.

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

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


ملاحظة...
تظهر الازرار داخل زر واحد اسمه "المزيد" وعند الضغط عليه تظهر الازرار الستة
________________________________

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

على جميع النسخ

CSS

الكود:

 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; /* تحريك القائمة لتكون تمامًا في المركز */
    }
}

Javascript
العنوان * : اختيارك
أضف الكود الى : علبة الدردشة

الكود:

$(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();
        }
    });
});

ومبروك عليك الازرار الجديدة في علبة الدردشة

-----------------------------------------------------------------------

خاتمة

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

نأمل أن تسهم هذه الميزات في جعل المحادثات أكثر تفاعلية ومتعة  

والسلام عليكم ورحمة الله وصلى الله على نبينا محمد وعلى اله وصحبة اجمعين

,

تم كتابة البرنامج التعليمي بواسطة كونان2000 باستخدام AI