diff --git a/routes/_components/Layout.html b/routes/_components/Layout.html
index 5f2972d0..d43e598e 100644
--- a/routes/_components/Layout.html
+++ b/routes/_components/Layout.html
@@ -1,7 +1,7 @@
{{#if virtual}}
-
+
diff --git a/routes/_components/Timeline.html b/routes/_components/Timeline.html
index 1351f7a1..05dab511 100644
--- a/routes/_components/Timeline.html
+++ b/routes/_components/Timeline.html
@@ -7,7 +7,7 @@
shown="{{initialized}}"
footerComponent="{{LoadingFooter}}"
showFooter="{{initialized && runningUpdate}}"
- storeKey="{{timeline}}"
+ realm="{{timeline}}"
on:initializedVisibleItems="initialize()"
/>
diff --git a/routes/_components/virtualList/VirtualList.html b/routes/_components/virtualList/VirtualList.html
index 93233ff2..4e6dd320 100644
--- a/routes/_components/virtualList/VirtualList.html
+++ b/routes/_components/virtualList/VirtualList.html
@@ -31,13 +31,11 @@
export default {
oncreate () {
this.observe('showFooter', showFooter => {
- this.store.set({showFooter: showFooter})
+ this.store.setForRealm({showFooter: showFooter})
})
this.observe('items', (items) => {
mark('set items')
- this.store.set({
- items: items
- })
+ this.store.setForRealm({items: items})
stop('set items')
this.fireScrollToBottom = throttle(() => {
this.fire('scrollToBottom')
diff --git a/routes/_components/virtualList/VirtualListContainer.html b/routes/_components/virtualList/VirtualListContainer.html
index cdfd926d..9b7231f7 100644
--- a/routes/_components/virtualList/VirtualListContainer.html
+++ b/routes/_components/virtualList/VirtualListContainer.html
@@ -13,73 +13,38 @@
const SCROLL_EVENT_DELAY = 300
- const cachedVirtualStores = {}
-
- if (process.browser && process.env.NODE_ENV !== 'production') {
- window.cachedVirtualStores = cachedVirtualStores
- }
-
export default {
oncreate() {
mark('onCreate VirtualListContainer')
let node = this.refs.node
- let storeKey = this.get('storeKey')
- let cachedStore
- if (storeKey && (cachedStore = cachedVirtualStores[storeKey])) {
- this.store.set({
- scrollTop: cachedStore.state.scrollTop,
- scrollHeight: cachedStore.state.scrollHeight,
- offsetHeight: cachedStore.state.offsetHeight
- })
- this.store.set(cachedStore.state)
-
- // rehydrate scroll top
- let cachedScrollTop = cachedStore.state.scrollTop || 0
- if (cachedScrollTop === 0) {
- if (process.env.NODE_ENV !== 'production') {
- console.log('no need to force scroll top')
- }
- return
- }
- let initializedScrollTop = false
- let node = this.refs.node
+ let realm = this.get('realm')
+ this.store.set({currentRealm: realm})
+ let scrollTop = this.store.get('scrollTop')
+ if (scrollTop > 0) {
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
if (process.env.NODE_ENV !== 'production') {
console.log('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight)
}
- if (!initializedScrollTop && allVisibleItemsHaveHeight && node) {
- initializedScrollTop = true
+ if (!this.get('initializedScrollTop') && allVisibleItemsHaveHeight && node) {
+ this.set({'initializedScrollTop': true})
requestAnimationFrame(() => {
mark('set scrollTop')
if (process.env.NODE_ENV !== 'production') {
- console.log('forcing scroll top to ', cachedScrollTop)
+ console.log('forcing scroll top to ', scrollTop)
}
- node.scrollTop = cachedScrollTop
+ node.scrollTop = scrollTop
stop('set scrollTop')
})
}
})
} else {
- this.store.set({
- scrollTop: 0,
+ this.store.setForRealm({
scrollHeight: node.scrollHeight,
offsetHeight: node.offsetHeight
})
}
stop('onCreate VirtualListContainer')
},
- ondestroy() {
- let storeKey = this.get('storeKey')
- if (storeKey) {
- let clonedState = this.store.cloneState()
- if (process.env.NODE_ENV !== 'production') {
- console.log('caching scroll top', clonedState.scrollTop)
- }
- cachedVirtualStores[storeKey] = {
- state: clonedState
- }
- }
- },
store: () => virtualListStore,
events: {
scroll(node, callback) {
@@ -116,7 +81,7 @@
},
methods: {
onScroll(event) {
- this.store.set({
+ this.store.setForRealm({
scrollTop: event.target.scrollTop,
scrollHeight: event.target.scrollHeight
})
diff --git a/routes/_components/virtualList/virtualListStore.js b/routes/_components/virtualList/virtualListStore.js
index 5b3270dc..834f4471 100644
--- a/routes/_components/virtualList/virtualListStore.js
+++ b/routes/_components/virtualList/virtualListStore.js
@@ -3,28 +3,12 @@ import { mark, stop } from '../../_utils/marks'
const VIEWPORT_RENDER_FACTOR = 4
-const cloneKeys = [
- 'items',
- 'itemHeights',
- 'scrollTop',
- 'scrollHeight',
- 'offsetHeight'
-]
-
class VirtualListStore extends Store {
constructor(state) {
super(state)
this._batches = {}
}
- cloneState() {
- let res = {}
- for (let key of cloneKeys) {
- res[key] = this.get(key)
- }
- return res
- }
-
batchUpdate(key, subKey, value) {
let batch = this._batches[key]
if (!batch) {
@@ -53,15 +37,42 @@ class VirtualListStore extends Store {
stop('batchUpdate()')
})
}
+
+ setForRealm(obj) {
+ let realmName = this.get('currentRealm')
+ let realms = this.get('realms') || {}
+ realms[realmName] = Object.assign(realms[realmName] || {}, obj)
+ this.set({realms: realms})
+ }
}
const virtualListStore = new VirtualListStore({
- items: [],
+ realms: {},
+ currentRealm: null,
itemHeights: {},
- showFooter: false,
footerHeight: 0
})
+virtualListStore.compute('items', ['currentRealm', 'realms'], (currentRealm, realms) => {
+ return realms[currentRealm] && realms[currentRealm].items || []
+})
+
+virtualListStore.compute('showFooter', ['currentRealm', 'realms'], (currentRealm, realms) => {
+ return realms[currentRealm] && realms[currentRealm].showFooter
+})
+
+virtualListStore.compute('scrollTop', ['currentRealm', 'realms'], (currentRealm, realms) => {
+ return realms[currentRealm] && realms[currentRealm].scrollTop || 0
+})
+
+virtualListStore.compute('scrollHeight', ['currentRealm', 'realms'], (currentRealm, realms) => {
+ return realms[currentRealm] && realms[currentRealm].scrollHeight || 0
+})
+
+virtualListStore.compute('offsetHeight', ['currentRealm', 'realms'], (currentRealm, realms) => {
+ return realms[currentRealm] && realms[currentRealm].offsetHeight || 0
+})
+
virtualListStore.compute('visibleItems',
['items', 'scrollTop', 'itemHeights', 'offsetHeight'],
(items, scrollTop, itemHeights, offsetHeight) => {
diff --git a/routes/accounts/[accountId].html b/routes/accounts/[accountId].html
index bc55e744..052baf04 100644
--- a/routes/accounts/[accountId].html
+++ b/routes/accounts/[accountId].html
@@ -4,7 +4,7 @@
Pinafore – Federated
-
+
{{#if $isUserLoggedIn}}
{{else}}
diff --git a/routes/index.html b/routes/index.html
index 3837390a..e621390d 100644
--- a/routes/index.html
+++ b/routes/index.html
@@ -2,7 +2,7 @@
Pinafore – Home
-
+
{{#if $isUserLoggedIn}}
{{else}}
diff --git a/routes/local.html b/routes/local.html
index d31988f4..a9b67466 100644
--- a/routes/local.html
+++ b/routes/local.html
@@ -2,7 +2,7 @@
Pinafore – Local
-
+
{{#if $isUserLoggedIn}}
{{else}}
diff --git a/routes/notifications.html b/routes/notifications.html
index c3c9cc90..681fe897 100644
--- a/routes/notifications.html
+++ b/routes/notifications.html
@@ -2,7 +2,7 @@
Pinafore – Notifications
-
+
Notifications
diff --git a/routes/tags/[tagName].html b/routes/tags/[tagName].html
index ee1cdd2b..ce88f261 100644
--- a/routes/tags/[tagName].html
+++ b/routes/tags/[tagName].html
@@ -4,7 +4,7 @@