fixed notification infinite scrolling
it actually infinitely scrolls :yippee:
This commit is contained in:
		
							parent
							
								
									975984c4bc
								
							
						
					
					
						commit
						a9160a3a8f
					
				
					 3 changed files with 22 additions and 12 deletions
				
			
		|  | @ -149,6 +149,7 @@ export async function getStreamingHealth(host) { | ||||||
|  * @param {string} host - The domain of the target server. |  * @param {string} host - The domain of the target server. | ||||||
|  * @param {string} token - The application token. |  * @param {string} token - The application token. | ||||||
|  * @param {string} min_id - If provided, only shows notifications after this ID. |  * @param {string} min_id - If provided, only shows notifications after this ID. | ||||||
|  |  * @param {string} max_id - If provided, only shows notifications before this ID. | ||||||
|  * @param {string} limit - The maximum number of notifications to retrieve (default 40). |  * @param {string} limit - The maximum number of notifications to retrieve (default 40). | ||||||
|  * @param {string} types - A list of notification types to filter to. |  * @param {string} types - A list of notification types to filter to. | ||||||
|  */ |  */ | ||||||
|  |  | ||||||
|  | @ -8,6 +8,7 @@ import { parsePost } from '$lib/post.js'; | ||||||
| import { parseAccount } from '$lib/account.js'; | import { parseAccount } from '$lib/account.js'; | ||||||
| 
 | 
 | ||||||
| const prefix = app_name + '_notif_'; | const prefix = app_name + '_notif_'; | ||||||
|  | const notification_limit = 40; | ||||||
| 
 | 
 | ||||||
| export const notifications = writable([]); | export const notifications = writable([]); | ||||||
| export const unread_notif_count = writable(load("unread_count")); | export const unread_notif_count = writable(load("unread_count")); | ||||||
|  | @ -41,29 +42,29 @@ function load(name) { | ||||||
|     return data ? data : false; |     return data ? data : false; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| let loading; |  | ||||||
| export async function getNotifications(min_id, max_id) { | export async function getNotifications(min_id, max_id) { | ||||||
|     if (loading) return; // no spamming!!
 |     const new_notifications = await api.getNotifications( | ||||||
|     loading = true; |  | ||||||
| 
 |  | ||||||
|     const notif_data = await api.getNotifications( |  | ||||||
|         get(server).host, |         get(server).host, | ||||||
|         get(app).token, |         get(app).token, | ||||||
|         min_id, |         min_id, | ||||||
|         max_id, |         max_id, | ||||||
|  |         notification_limit, | ||||||
|     ); |     ); | ||||||
| 
 | 
 | ||||||
|     if (!notif_data) { |     if (!new_notifications) { | ||||||
|         console.error(`Failed to retrieve notifications.`); |         console.error(`Failed to retrieve notifications.`); | ||||||
|         loading = false; |         loading = false; | ||||||
|         return; |         return; | ||||||
|     } |     } | ||||||
| 
 | 
 | ||||||
|     for (let i in notif_data) { |     for (let i in new_notifications) { | ||||||
|         let notif = notif_data[i]; |         let notif = new_notifications[i]; | ||||||
|         notif.accounts = [ await parseAccount(notif.account) ]; |         notif.accounts = [ await parseAccount(notif.account) ]; | ||||||
|         if (get(notifications).length > 0) { | 
 | ||||||
|             let prev = get(notifications)[get(notifications).length - 1]; |         const _notifications = get(notifications); | ||||||
|  |         if (_notifications.length > 0) { | ||||||
|  |             let prev = _notifications[_notifications.length - 1]; | ||||||
|  | 
 | ||||||
|             if (notif.type === prev.type) { |             if (notif.type === prev.type) { | ||||||
|                 if (prev.status && notif.status && prev.status.id === notif.status.id) { |                 if (prev.status && notif.status && prev.status.id === notif.status.id) { | ||||||
|                     notifications.update(notifications => { |                     notifications.update(notifications => { | ||||||
|  | @ -74,8 +75,8 @@ export async function getNotifications(min_id, max_id) { | ||||||
|                 } |                 } | ||||||
|             } |             } | ||||||
|         } |         } | ||||||
|  | 
 | ||||||
|         notif.status = notif.status ? await parsePost(notif.status, 0, false) : null; |         notif.status = notif.status ? await parsePost(notif.status, 0, false) : null; | ||||||
|         notifications.update(notifications => [...notifications, notif]); |         notifications.update(notifications => [...notifications, notif]); | ||||||
|     } |     } | ||||||
|     loading = false; |  | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @ -13,11 +13,19 @@ | ||||||
|         } |         } | ||||||
|         unread_notif_count.set(0); |         unread_notif_count.set(0); | ||||||
|     }); |     }); | ||||||
|  | 
 | ||||||
|  |     let notif_lock = true; // `true` means "open" | ||||||
|     document.addEventListener("scroll", () => { |     document.addEventListener("scroll", () => { | ||||||
|  |         if (!notif_lock) return; | ||||||
|         if ($account && $page.url.pathname !== "/notifications") return; |         if ($account && $page.url.pathname !== "/notifications") return; | ||||||
|  | 
 | ||||||
|         if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) { |         if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) { | ||||||
|             let max_id = $notifications.length > 0 ? $notifications[$notifications.length - 1].id : null; |             let max_id = $notifications.length > 0 ? $notifications[$notifications.length - 1].id : null; | ||||||
|             getNotifications(null, max_id); | 
 | ||||||
|  |             notif_lock = false; | ||||||
|  |             getNotifications(null, max_id).then(() => { | ||||||
|  |                 notif_lock = true; | ||||||
|  |             }); | ||||||
|         } |         } | ||||||
|     }); |     }); | ||||||
| </script> | </script> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue