Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-03-27 15:55:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

use new observer

Browse Source
This commit is contained in:
PhilReact 2023-09-03 19:36:58 -07:00
parent adfe69cce3
commit 8de559c955
1 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
plugins/plugins/core/components/ChatScroller.js
View File

@ -211,6 +211,7 @@ class ChatScroller extends LitElement {
this.messages = [] this.messages = []
this._upObserverhandler = this._upObserverhandler.bind(this) this._upObserverhandler = this._upObserverhandler.bind(this)
this._downObserverHandler = this._downObserverHandler.bind(this) this._downObserverHandler = this._downObserverHandler.bind(this)
this.__bottomObserverForFetchingMessagesHandler = this.__bottomObserverForFetchingMessagesHandler.bind(this)
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]") this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")
this.openTipUser = false this.openTipUser = false
@ -304,8 +305,9 @@ class ChatScroller extends LitElement {
</message-template>` </message-template>`
) )
})} })}
<div style=${"height: 1px; margin-top: -100px"} id='bottomObserverForFetchingMessages'></div>
<div style=${"height: 1px;"} id='downObserver'></div> <div style=${"height: 1px;"} id='downObserver'></div>
<!-- <div style=${"height: 1px; margin-top: -100px"} id='bottomObserverForFetchingMessages'></div> -->
</ul> </ul>
` `
@ -369,9 +371,11 @@ class ChatScroller extends LitElement {
this.viewElement = this.shadowRoot.getElementById('viewElement') this.viewElement = this.shadowRoot.getElementById('viewElement')
this.upObserverElement = this.shadowRoot.getElementById('upObserver') this.upObserverElement = this.shadowRoot.getElementById('upObserver')
this.downObserverElement = this.shadowRoot.getElementById('downObserver') this.downObserverElement = this.shadowRoot.getElementById('downObserver')
this.bottomObserverForFetchingMessages = this.shadowRoot.getElementById('bottomObserverForFetchingMessages')
// Intialize Observers // Intialize Observers
this.upElementObserver() this.upElementObserver()
this.downElementObserver() this.downElementObserver()
this.bottomObserver()
await this.getUpdateComplete() await this.getUpdateComplete()
this.viewElement.scrollTop = this.viewElement.scrollHeight + 50 this.viewElement.scrollTop = this.viewElement.scrollHeight + 50
@ -425,8 +429,14 @@ class ChatScroller extends LitElement {
if (!entries[0].isIntersecting) { if (!entries[0].isIntersecting) {
this.showLastMessageRefScroller(true) this.showLastMessageRefScroller(true)
} else { } else {
let _scrollElement = entries[0].target.previousElementSibling
this.showLastMessageRefScroller(false) this.showLastMessageRefScroller(false)
}
}
__bottomObserverForFetchingMessagesHandler(entries){
if (!entries[0].isIntersecting) {
} else {
let _scrollElement = entries[0].target.previousElementSibling
this._getAfterMessages(_scrollElement) this._getAfterMessages(_scrollElement)
} }
} }
@ -453,6 +463,18 @@ class ChatScroller extends LitElement {
// passing it the element to observe, and the options object // passing it the element to observe, and the options object
observer.observe(elementToObserve) observer.observe(elementToObserve)
} }
bottomObserver() {
const options = {
}
// identify an element to observe
const elementToObserve = this.bottomObserverForFetchingMessages
// passing it a callback function
const observer = new IntersectionObserver(this.__bottomObserverForFetchingMessagesHandler, options)
// call `observe()` on that MutationObserver instance,
// passing it the element to observe, and the options object
observer.observe(elementToObserve)
}
} }
window.customElements.define('chat-scroller', ChatScroller) window.customElements.define('chat-scroller', ChatScroller)