73 lines
1.9 KiB
HTML
73 lines
1.9 KiB
HTML
<div class="the-list" on:initialized>
|
|
{#each safeItems as item, i (item)}
|
|
<ListLazyItem
|
|
{component}
|
|
index={i}
|
|
{length}
|
|
{makeProps}
|
|
key={item}
|
|
on:initialized="itemInitialized()"
|
|
/>
|
|
{/each}
|
|
</div>
|
|
<ScrollListShortcuts bind:items=safeItems/>
|
|
<style>
|
|
.the-list {
|
|
position: relative;
|
|
}
|
|
</style>
|
|
<script>
|
|
import ListLazyItem from './ListLazyItem.html'
|
|
import ScrollListShortcuts from '../shortcut/ScrollListShortcuts.html'
|
|
import { listStore } from './listStore'
|
|
import { getScrollContainer } from '../../_utils/scrollContainer'
|
|
import { getMainTopMargin } from '../../_utils/getMainTopMargin'
|
|
|
|
export default {
|
|
oncreate () {
|
|
let { realm } = this.get()
|
|
this.store.setCurrentRealm(realm)
|
|
},
|
|
ondestroy () {
|
|
this.store.setCurrentRealm(null)
|
|
},
|
|
methods: {
|
|
itemInitialized () {
|
|
let { initializedCount, length } = this.get()
|
|
initializedCount++
|
|
this.set({ initializedCount })
|
|
if (initializedCount === length) {
|
|
this.initialize()
|
|
}
|
|
},
|
|
initialize () {
|
|
let { scrollToItem } = this.get()
|
|
if (scrollToItem) {
|
|
let element = document.getElementById(`list-item-${scrollToItem}`)
|
|
requestAnimationFrame(() => {
|
|
console.log('scrolling element into view')
|
|
// TODO: this is hacky
|
|
element.scrollIntoView(true)
|
|
getScrollContainer().scrollTop -= (getMainTopMargin() + 10) // 10 is the status-article padding top
|
|
this.fire('initialized')
|
|
})
|
|
} else {
|
|
this.fire('initialized')
|
|
}
|
|
}
|
|
},
|
|
data: () => ({
|
|
initializedCount: 0
|
|
}),
|
|
computed: {
|
|
safeItems: ({ items }) => items || [],
|
|
length: ({ safeItems }) => safeItems.length
|
|
},
|
|
components: {
|
|
ListLazyItem,
|
|
ScrollListShortcuts
|
|
},
|
|
store: () => listStore
|
|
}
|
|
</script>
|