nodebb-plugin-chat-search 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-chat-search",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A plugin to search text within NodeBB chats",
   "main": "library.js",
   "nbbpm": {

package/static/lib/main.js

@@ -1,52 +1,110 @@
 'use strict';
 
+// מצב גלובלי לזיכרון בין מעברי דפים
+window.chatSearchState = window.chatSearchState || {
+    query: '',
+    resultsHtml: '',
+    isOpen: false,
+    lastScroll: 0
+};
+
 $(document).ready(function () {
-    console.log('[Chat Search] Loaded (Clean UI).');
+    console.log('[Chat Search] Loaded (Instant No-Flicker).');
+
+    let observer = null;
+
+    // האזנה למעבר דפים
+    $(window).on('action:ajaxify.start', function () {
+        // לפני שהדף מתחלף, ננסה לשמור את האלמנט בזיכרון אם נרצה להחזירו (אופציונלי)
+        // כרגע אנו מסתמכים על בנייה מחדש מהירה מאוד
+    });
 
     $(window).on('action:ajaxify.end', function (ev, data) {
-        $('#global-chat-search-container').remove();
-        
+        // אם יש observer ישן, ננתק אותו כדי לא להעמיס
+        if (observer) observer.disconnect();
+
         const isChatUrl = data.url.match(/^(user\/[^\/]+\/)?chats/);
         const isChatTemplate = data.template && data.template.name === 'chats';
 
         if (isChatUrl || isChatTemplate) {
-            waitForElementAndAdd();
+            initFastInjection();
+        } else {
+            // יציאה מאזור הצ'אטים - איפוס הזיכרון
+            window.chatSearchState = { query: '', resultsHtml: '', isOpen: false, lastScroll: 0 };
         }
     });
 
     $(window).on('action:chat.loaded', function (ev, data) {
+        highlightActiveChat();
         handleScrollToMessage();
     });
 
+    // בדיקה ראשונית
     if (ajaxify.data && ajaxify.data.template && ajaxify.data.template.name === 'chats') {
-        waitForElementAndAdd();
+        initFastInjection();
     }
 
-    function waitForElementAndAdd() {
+    function initFastInjection() {
+        // 1. ניסיון הזרקה מיידי
+        tryInject();
+
+        // 2. הפעלת MutationObserver לזיהוי שינויים ב-DOM בזמן אמת (מונע קפיצות)
+        const targetNode = document.body;
+        const config = { childList: true, subtree: true };
+
+        observer = new MutationObserver(function(mutationsList) {
+            for(let mutation of mutationsList) {
+                if (mutation.type === 'childList') {
+                    // אם נוספו אלמנטים לדף, נבדוק אם הסרגל הגיע
+                    const container = findContainer();
+                    if (container.length > 0 && container.find('#global-chat-search-container').length === 0) {
+                        addGlobalSearchBar(container);
+                    }
+                }
+            }
+        });
+
+        observer.observe(targetNode, config);
+
+        // 3. גיבוי: Interval מהיר מאוד (50ms) למקרה שה-Observer פספס
         let attempts = 0;
-        const interval = setInterval(function() {
+        const interval = setInterval(() => {
             attempts++;
-            let container = $('[component="chat/nav-wrapper"]'); 
-            if (container.length === 0) container = $('.chats-page').find('.col-md-4').first(); 
-
-            if (container.length > 0) {
-                addGlobalSearchBar(container);
-                clearInterval(interval);
-            } else if (attempts >= 20) {
+            if (tryInject()) {
+                // לא עוצרים את האינטרוול מיד, כי לפעמים NodeBB מרענן פעמיים
+                if (attempts > 20) clearInterval(interval);
+            } else if (attempts > 40) { // 2 שניות
                 clearInterval(interval);
             }
-        }, 200);
+        }, 50);
+    }
+
+    function findContainer() {
+        // סדר עדיפויות למציאת הקונטיינר
+        let container = $('[component="chat/nav-wrapper"]'); 
+        if (container.length === 0) container = $('.chats-page').find('.col-md-4').first();
+        return container;
+    }
+
+    function tryInject() {
+        const container = findContainer();
+        if (container.length > 0) {
+            addGlobalSearchBar(container);
+            return true;
+        }
+        return false;
     }
 
     function addGlobalSearchBar(container) {
         if ($('#global-chat-search-container').length > 0) return;
 
+        // ה-HTML של התיבה
         const searchHtml = `
             <div id="global-chat-search-container" style="padding: 10px; background: #fff; border-bottom: 1px solid #ddd; margin-bottom: 10px;">
                 <div class="input-group">
-                    <input type="text" id="global-chat-search" class="form-control" placeholder="חפש הודעה..." style="font-size: 14px;">
+                    <input type="text" id="global-chat-search" class="form-control" placeholder="חפש הודעה..." style="font-size: 14px; height: 34px;">
                     <span class="input-group-btn">
-                        <button class="btn btn-primary" id="btn-chat-search" type="button"><i class="fa fa-search"></i></button>
+                        <button class="btn btn-primary" id="btn-chat-search" type="button" style="height: 34px;"><i class="fa fa-search"></i></button>
                     </span>
                 </div>
                 <div id="global-search-results" style="margin-top: 5px; max-height: 400px; overflow-y: auto; background: white; border: 1px solid #eee; display:none;"></div>
@@ -55,10 +113,39 @@ $(document).ready(function () {
 
         container.prepend(searchHtml);
         
+        // --- שחזור מיידי של המצב (מונע הבהוב של התוכן) ---
+        const input = $('#global-chat-search');
+        const results = $('#global-search-results');
+        
+        if (window.chatSearchState.query) {
+            input.val(window.chatSearchState.query);
+        }
+        
+        if (window.chatSearchState.isOpen && window.chatSearchState.resultsHtml) {
+            results.html(window.chatSearchState.resultsHtml).show();
+            // שחזור מיקום הגלילה
+            if (window.chatSearchState.lastScroll > 0) {
+                results.scrollTop(window.chatSearchState.lastScroll);
+            }
+            highlightActiveChat();
+        }
+        // ------------------------------------------------
+
+        // הגדרת אירועים (Events)
         $('#btn-chat-search').off('click').on('click', executeSearch);
-        $('#global-chat-search').off('keypress').on('keypress', function (e) {
+        
+        // שמירת גלילה
+        results.on('scroll', function() {
+            window.chatSearchState.lastScroll = $(this).scrollTop();
+        });
+
+        input.off('keypress').on('keypress', function (e) {
             if (e.which === 13) executeSearch();
         });
+        
+        input.on('input', function() {
+            window.chatSearchState.query = $(this).val();
+        });
     }
 
     function executeSearch() {
@@ -67,12 +154,15 @@ $(document).ready(function () {
 
         if (!query) {
             resultsContainer.hide();
+            window.chatSearchState.isOpen = false;
+            window.chatSearchState.resultsHtml = '';
             return;
         }
 
         let targetUid = ajaxify.data.uid || app.user.uid;
 
         resultsContainer.show().html('<div class="text-center" style="padding:10px;"><i class="fa fa-spinner fa-spin"></i> מחפש...</div>');
+        window.chatSearchState.isOpen = true;
 
         socket.emit('plugins.chatSearch.searchGlobal', { 
             query: query,
@@ -80,12 +170,14 @@ $(document).ready(function () {
         }, function (err, messages) {
             if (err) {
                 console.error(err);
-                resultsContainer.html('<div class="alert alert-danger" style="margin:5px;">שגיאה בחיפוש</div>');
+                resultsContainer.html('<div class="alert alert-danger" style="margin:5px;">שגיאה</div>');
                 return;
             }
 
             if (!messages || messages.length === 0) {
-                resultsContainer.html('<div class="text-center" style="padding:10px; color:#777;">לא נמצאו תוצאות.</div>');
+                const noRes = '<div class="text-center" style="padding:10px; color:#777;">לא נמצאו תוצאות.</div>';
+                resultsContainer.html(noRes);
+                window.chatSearchState.resultsHtml = noRes;
                 return;
             }
 
@@ -93,17 +185,71 @@ $(document).ready(function () {
             
             messages.forEach(msg => {
                 const date = new Date(msg.timestamp).toLocaleDateString();
-                
-                let baseUrl = window.location.pathname; 
+                let baseUrl = window.location.pathname.replace(/\/chats\/.*$/, '/chats');
                 if (baseUrl.endsWith('/')) baseUrl = baseUrl.slice(0, -1);
-                if (baseUrl.match(/\/[0-9]+$/)) baseUrl = baseUrl.replace(/\/[0-9]+$/, '');
 
                 const chatLink = baseUrl + '/' + msg.roomId + '?mid=' + msg.mid;
                 const senderName = (msg.user && msg.user.username) ? msg.user.username : 'Unknown';
-                
-                // הסרנו את השורה של "עם: ..."
 
                 html += `
-                    <li class="list-group-item search-result" style="cursor:pointer; border-bottom: 1px solid #f0f0f0; padding: 10px 8px;" onclick="ajaxify.go('${chatLink}')">
+                    <li class="list-group-item search-result" data-roomid="${msg.roomId}" style="cursor:pointer; border-bottom: 1px solid #f0f0f0; padding: 10px 8px;" onclick="ajaxify.go('${chatLink}')">
                         <div style="font-size:13px; color:#333; margin-bottom:5px;">
-                            <span class="pull-left text-muted"
+                            <span class="pull-left text-muted" style="font-size:10px; margin-right: 8px;">${date}</span>
+                            <strong>${msg.roomName}</strong> 
+                        </div>
+                        <div style="font-size:12px; color:#444; background: #f9f9f9; padding: 6px; border-radius: 4px; border-right: 3px solid #007bff;">
+                            <strong>${senderName}:</strong> ${msg.content}
+                        </div>
+                    </li>
+                `;
+            });
+            html += '</ul>';
+            
+            resultsContainer.html(html);
+            
+            // עדכון הזיכרון
+            window.chatSearchState.resultsHtml = html;
+            window.chatSearchState.lastScroll = 0;
+            
+            highlightActiveChat();
+        });
+    }
+
+    function highlightActiveChat() {
+        // מנסים לקחת RoomID מה-URL או מהמידע של NodeBB
+        let currentRoomId = ajaxify.data.roomId;
+        if (!currentRoomId) {
+             const match = window.location.pathname.match(/chats\/(\d+)/);
+             if (match) currentRoomId = match[1];
+        }
+
+        if (!currentRoomId) return;
+
+        $('.search-result').css('background-color', '');
+        $('.search-result[data-roomid="' + currentRoomId + '"]').css('background-color', '#eef6ff');
+    }
+
+    function handleScrollToMessage() {
+        const params = new URLSearchParams(window.location.search);
+        const mid = params.get('mid');
+        if (!mid) return;
+
+        scrollToId(mid);
+        let attempts = 0;
+        const scrollInt = setInterval(() => {
+            attempts++;
+            if (scrollToId(mid) || attempts > 15) clearInterval(scrollInt);
+        }, 300);
+    }
+
+    function scrollToId(mid) {
+        const el = $('[data-mid="' + mid + '"]');
+        if (el.length > 0) {
+            el[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
+            el.css('background', '#fffeca').css('transition', 'background 1s');
+            setTimeout(() => el.css('background', ''), 2000);
+            return true;
+        }
+        return false;
+    }
+});