//Dosya adı: ft_react.js 
// Tepki menüsünü aç / kapa 
function ft_toggle_react_menu(postid) {
    var menu = document.getElementById('ft_react_menu_' + postid);
    if (!menu) return;

    if (menu.style.display == 'block') {
        menu.style.display = 'none';
    } else {
        menu.style.display = 'block';
    }
}

// Tepki gönder
function ft_send_reaction(type, postid, reactionid) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'ft_react.php', true); // dosya adın react.php ise burayı react.php yap
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

    var params =
        'type='       + encodeURIComponent(type) +
        '&postid='    + encodeURIComponent(postid) +
        '&reactionid='+ encodeURIComponent(reactionid);

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                if (!xhr.responseText) return;

                var data;
                try {
                    data = JSON.parse(xhr.responseText);
                } catch (e) {
                    if (window.console) console.log('ft_react JSON error:', xhr.responseText);
                    return;
                }

                if (data.success) {
                    // Menü kapanır
                    var menu = document.getElementById('ft_react_menu_' + postid);
                    if (menu) menu.style.display = 'none';

                    // Buton ikonu anında güncellensin
                    if (typeof data.user_reactionid != 'undefined') {
                        ft_update_like_button(postid, data.user_reactionid);
                    } else if (typeof data.reaction != 'undefined') {
                        ft_update_like_button(postid, data.reaction);
                    }

                    // Özet satırını yenile
                    ft_reload_reaction_summary(postid);
                } else {
                    // Kendi mesajına tepki vs.
                    if (data.error == 'own_post') {
                        alert('Kendi mesajınıza tepki bırakamazsınız.');
                    }
                }
            }
        }
    };

    xhr.send(params);
}

// Özet ve butonu yenile
function ft_reload_reaction_summary(postid) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'ft_reaction_summary.php?postid=' + encodeURIComponent(postid), true);

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            if (!xhr.responseText) return;

            var data;
            try {
                data = JSON.parse(xhr.responseText);
            } catch (e) {
                if (window.console) console.log('ft_reaction_summary JSON error:', xhr.responseText);
                return;
            }

            // Özet HTML
            if (typeof data.html != 'undefined') {
                var span = document.getElementById('ft_react_summary_' + postid);
                if (span) span.innerHTML = data.html;
            }

            // Beğen düğmesinin ikonu
            if (typeof data.user_reactionid != 'undefined') {
                ft_update_like_button(postid, data.user_reactionid);
            }
        }
    };

    xhr.send(null);
}

// Beğen düğmesi ikonunu değiştir
function ft_update_like_button(postid, reactionid) {
    var img = document.getElementById('ft_like_btn_img_' + postid);
    if (!img) return;

    // 0 veya boş ise varsayılan "Beğen" ikonuna dön
    if (!reactionid || reactionid == 0) {
        img.src = 'images/reactions/begen.png';
        img.alt = 'Beğen';
        return;
    }

    var map = {
        1: 'like.png',
        2: 'heart.png',
        3: 'haha.png',
        4: 'wow.png',
        5: 'sad.png',
        6: 'angry.png',
        7: 'care.png'
    };

    var file = map[reactionid] || 'begen.png';
    img.src = 'images/reactions/' + file;
    img.alt = '';
}

// Sayfa yüklenince tüm postlar için özetleri çek
document.addEventListener('DOMContentLoaded', function () {
    var summaries = document.querySelectorAll('.ft-reaction-summary[data-postid]');
    for (var i = 0; i < summaries.length; i++) {
        var pid = summaries[i].getAttribute(&#039;data-postid&#039;);
        if (pid) {
            ft_reload_reaction_summary(pid);
        }
    }
});

// =========================
//  Tepki verenler MODAL&#039;ı
//  (sekme + avatar + tarih)
// =========================

function ft_open_react_modal(postid, reactionid) {
    var xhr = new XMLHttpRequest();
    xhr.open(
        &#039;GET&#039;,
        &#039;ft_reaction_modal.php?postid=&#039; + encodeURIComponent(postid) +
        &#039;&reactionid=&#039; + encodeURIComponent(reactionid || 0),
        true
    );

    xhr.onreadystatechange = function () {
        if (xhr.readyState !== 4) return;

        if (xhr.status !== 200) {
            alert(&#039;Tepki listesi alınamadı (HTTP &#039; + xhr.status + &#039;).&#039;);
            return;
        }

        // Bazı PHP dosyalarında BOM olabiliyor, baştaki gizli karakteri temizle
        var raw = xhr.responseText || &#039;&#039;;
        raw = raw.replace(/^\uFEFF/, &#039;&#039;);

        var data;
        try {
            data = JSON.parse(raw);
        } catch (e) {
            if (window.console) console.error(&#039;JSON parse hatası:&#039;, raw, e);
            alert(&#039;Tepki listesi çözümlenemedi.&#039;);
            return;
        }

        if (!data || !data.groups || !data.groups.length) {
            alert(&#039;Bu mesaja henüz ifade yok.&#039;);
            return;
        }

        // --- Tüm kullanıcıları tek listede topla (Tümü sekmesi için)
        var allUsers = [];
        for (var g = 0; g < data.groups.length; g++) {
            var grp = data.groups[g];
            var users = grp.users || [];
            for (var u = 0; u < users.length; u++) {
                var usr = users[u];
                allUsers.push({
                    reactionid: grp.reactionid,
                    icon:       grp.icon,
                    label:      grp.label,
                    userid:     usr.userid,
                    username:   usr.username,
                    posts:      usr.posts || 0,
                    avatar:     usr.avatar || &#039;&#039;,
                    date:       usr.date || &#039;&#039;,
                    rawdate:    usr.rawdate || 0
                });
            }
        }

        var totalCount = allUsers.length;

        // Modal kapsayıcısı
        var wrapper = document.getElementById(&#039;ft_react_modal&#039;);
        if (!wrapper) {
            wrapper = document.createElement(&#039;div&#039;);
            wrapper.id = &#039;ft_react_modal&#039;;
            document.body.appendChild(wrapper);
        }

        // -------------------------
        //  HTML iskeletini oluştur
        // -------------------------
        var html = &#039;&#039;;

        // Karanlık arka plan
        html += &#039;<div class="ft-react-modal-overlay" onclick="ft_close_react_modal()"></div>&#039;;

        // Kutunun kendisi
        html += &#039;<div class="ft-react-modal-box">&#039;;
        html += &#039;  <div class="ft-react-modal-header">&#039;;
        html += &#039;    <span>&#039; + (data.title || (&#039;İfade bırakanlar #&#039; + postid)) + &#039;</span>&#039;;
        html += &#039;    <a href="#" class="ft-react-modal-close" onclick="ft_close_react_modal(); return false;">×</a>&#039;;
        html += &#039;  </div>&#039;;

        // Sekme barı
        html += &#039;  <div class="ft-react-modal-tabs">&#039;;
        html += &#039;    <a href="#" class="ft-react-tab" data-filter="all">Tümü (&#039; + totalCount + &#039;)</a>&#039;;
        for (var g2 = 0; g2 < data.groups.length; g2++) {
            var grp2 = data.groups[g2];
            html += &#039;    <a href="#" class="ft-react-tab" data-filter="&#039; + grp2.reactionid + &#039;">&#039;;
            html += &#039;      <img src="images/reactions/&#039; + grp2.icon + &#039;" class="ft-tab-icon" alt="" /> &#039;;
            html +=          grp2.label + &#039; (&#039; + grp2.count + &#039;)&#039;;
            html += &#039;    </a>&#039;;
        }
        html += &#039;  </div>&#039;;

        // Gövde
        html += &#039;  <div class="ft-react-modal-body">&#039;;

        if (!allUsers.length) {
            html += &#039;<div class="ft-react-empty">Bu mesaja tepki yok.</div>&#039;;
        } else {
            for (var i = 0; i < allUsers.length; i++) {
                var info = allUsers[i];

                html += &#039;<div class="ft-react-user-row" data-reaction="&#039; + info.reactionid + &#039;">&#039;;

                // Avatar
                html += &#039;  <div class="ft-react-user-avatar">&#039;;
                if (info.avatar) {
                    html += &#039;    <img src="&#039; + info.avatar + &#039;" alt="&#039; + info.username + &#039;" />&#039;;
                } else {
                    html += &#039;    <div class="ft-avatar-placeholder"></div>&#039;;
                }
                html += &#039;  </div>&#039;;

                // Kullanıcı adı + meta
                html += &#039;  <div class="ft-react-user-main">&#039;;
                html += &#039;    <div class="ft-react-username">&#039;;
                html += &#039;      <a href="member.php?u=&#039; + info.userid + &#039;">&#039; + info.username + &#039;</a>&#039;;
                html += &#039;    </div>&#039;;
                html += &#039;    <div class="ft-react-user-meta">&#039;;
                html += &#039;      Mesajlar: &#039; + info.posts;
                if (info.date) {
                    html += &#039; • &#039; + info.date;
                }
                html += &#039;    </div>&#039;;
                html += &#039;  </div>&#039;;

                // Sağda tepki ikonu
                html += &#039;  <div class="ft-react-user-reaction">&#039;;
                html += &#039;    <img src="images/reactions/&#039; + info.icon + &#039;" class="ft-react-icon-small" alt="&#039; + info.label + &#039;" />&#039;;
                html += &#039;  </div>&#039;;

                html += &#039;</div>&#039;; // .ft-react-user-row
            }
        }

        html += &#039;  </div>&#039;; // .ft-react-modal-body
        html += &#039;</div>&#039;;   // .ft-react-modal-box

        wrapper.innerHTML = html;
        wrapper.style.display = &#039;block&#039;;

        // -------------------------
        //  Sekme davranışı (filtre)
        // -------------------------
        var tabsContainer = wrapper.querySelector(&#039;.ft-react-modal-tabs&#039;);
        if (!tabsContainer) return;

        var tabs = tabsContainer.getElementsByClassName(&#039;ft-react-tab&#039;);
        var rows = wrapper.getElementsByClassName(&#039;ft-react-user-row&#039;);

        function setActiveTab(tab, filter) {
            // aktif sınıf
            for (var t = 0; t < tabs.length; t++) {
                tabs[t].className = tabs[t].className.replace(/\bft-react-tab-active\b/g, &#039;&#039;).replace(/\s+$/, &#039;&#039;);
            }
            tab.className += &#039; ft-react-tab-active&#039;;

            // satırları filtrele
            for (var r = 0; r < rows.length; r++) {
                var rid = rows[r].getAttribute(&#039;data-reaction&#039;);
                if (filter === &#039;all&#039; || filter === rid) {
                    rows[r].style.display = &#039;&#039;;
                } else {
                    rows[r].style.display = &#039;none&#039;;
                }
            }
        }

        for (var t2 = 0; t2 < tabs.length; t2++) {
            tabs[t2].onclick = function (ev) {
                ev = ev || window.event;
                if (ev.preventDefault) ev.preventDefault();
                ev.returnValue = false;

                var filter = this.getAttribute(&#039;data-filter&#039;);
                setActiveTab(this, filter);
                return false;
            };
        }

        // İlk açılışta hangi sekme aktif?
        var initialFilter = reactionid ? String(reactionid) : &#039;all&#039;;
        var initialTab = null;

        for (var t3 = 0; t3 < tabs.length; t3++) {
            if (tabs[t3].getAttribute(&#039;data-filter&#039;) === initialFilter) {
                initialTab = tabs[t3];
                break;
            }
        }
        if (!initialTab && tabs.length) {
            initialTab = tabs[0];
        }
        if (initialTab) {
            setActiveTab(initialTab, initialFilter);
        }
    };

    xhr.send(null);
}

function ft_close_react_modal() {
    var wrapper = document.getElementById(&#039;ft_react_modal&#039;);
    if (wrapper) {
        wrapper.style.display = &#039;none&#039;;
        wrapper.innerHTML = &#039;&#039;;
    }
}

Add a code snippet to your website: www.paste.org