ปรับแต่ง Bootstrap Popover ให้ทำงานเหมือน Facebook Notification

Last updated on August 6, 2018

ถ้าพิจารณา popover ของ Bootstrap เทียบกับ popover ของ Facebook ก็แทบจะไม่มีอะไรต่างนอกจาก design แต่ interaction มีจุดที่ต่างกันอยู่ interaction ของแต่ละตัวเป็นแบบนี้ครับ

Notificaiton ของ Facebook

1. เมื่อคลิกปุ่มจะโชว์ popover
2. เมื่อคลิกซ้ำจะปิด popover
3. เมื่อคลิกในพื้นที่ popover popover ก็จะยังเปิดอยู่
4. เมื่อคลิกนอกพื้นที่ popover popover จะปิด

 Bootstrap Popover

คอนฟิก Boostrap Popover ให้ใกล้เคียงกับ Facebook notification โดยเลือก trigger : ‘click’  นอกนั้นใช้ default การทำงานเป็นดังนี้

1. เมื่อคลิกปุ่มจะโชว์ popover
2. เมื่อคลิกซ้ำจะปิด popover
3. เมื่อคลิกในพื้นที่ popover popover จะไม่ปิด
4. เมื่อคลิกนอกพื้นที่ popover popover จะไม่ปิด

การทำงาน 1-3 เหมือนกันแต่ข้อ 4 ไม่เหมือนกันถ้าเทียบความสะดวกในการใช้งานของผู้ใช้ interaction แบบ facebook จะดีกว่าเพราะไม่จำเป็นต้องกลับไปคลิกที่ปุ่มเพื่อปิด popover

เพื่อให้ได้การทำงานแบบที่ว่าเราต้องเขียนโค้ดเพิ่มเติมนิดหน่อยจากเดิมที่ใช้ trigger: ‘click’  เราจะเปลี่ยนไปใช้ trigger : ‘manual’  แล้วเขียน action ของ event เอง

Markup

<ul id="navbar-notify" class="nav">
    <li id="notif-popover-area">
        <a href="javascript:void(0)" alt="Notification" 
           title="Notification" id="notif-popover">
            <i class="icon-globe icon-large"></i>
        </a>
    </li>
</ul>

Javascript

$('#notif-popover').popover({
    placement: 'bottom',
    content: 'Text',
    title: 'Notification',
    trigger: 'manual'
}).click(function(e) {
    var notifOpenned = $(this).next().length;

    if(!notifOpenned) {
        $(this).popover('show');
    } else {
        $(this).popover('hide');
    }
});

// hide popover when mouse out of popover
$('body').click(function(e) {
    var notifElm = $('#notif-popover'),
    notifOpenned = notifElm.next().length,
    isOnNotif = $(e.target).parents('#notif-popover-area').length;

    if(notifOpenned && !isOnNotif) {
        notifElm.popover('hide');
    }
});

ส่วน javascript มีสิ่งที่ยุ่งยากนิดหน่อยคือการหาว่าพื้นที่ที่ผู้ใช้คลิกเป็นพื้นที่ภายใน popover หรือไม่

วิธีที่ผมใช้คือกำหนด id ให้กับ element ที่เป็น parent (ตัวอย่างนี้กำหนด id=”notif-popover-area”  ให้กับ<li> ) ของปุ่มที่รับ event click เพื่อเปิด popover เพราะเมื่อมีการคลิกปุ่ม Bootstrap จะสร้าง <div>  element ถัดไปจากปุ่มนั้น

การเช็กว่าเป็นพื้นที่ popover ทำได้โดยดูว่า element นั้นมี parent เป็น notif-popover-area หรือไม่ ถ้าใช่ก็ต้องทำอะไรแต่ถ้าไม่ใช่พื้นที่ popover ก็จะถูกปิด

เป็นเรื่อง UI และ UX เล็กๆ น้อยๆ แต่บันทึกไว้หน่อยแล้วกันเพราะมีคนใช้ Bootstrap เยอะและใช้งานลักษณะนี้บ่อย ใครที่ต้องการใช้งานแบบนี้ก็ลองเอาไปใช้ดูครับ