implement better timeline navigations with fades
This commit is contained in:
parent
5426c5a0ef
commit
3b8f551477
|
@ -66,19 +66,6 @@ async function fetchTimelineItemsAndPossiblyFallBack () {
|
|||
stop('fetchTimelineItemsAndPossiblyFallBack')
|
||||
}
|
||||
|
||||
export function initializeTimeline () {
|
||||
mark('initializeTimeline')
|
||||
let instanceName = store.get('currentInstance')
|
||||
let timeline = store.get('currentTimeline')
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
console.log('initialized')
|
||||
store.setForTimeline(instanceName, timeline, {initialized: true})
|
||||
})
|
||||
})
|
||||
stop('initializeTimeline')
|
||||
}
|
||||
|
||||
export async function setupTimeline () {
|
||||
mark('setupTimeline')
|
||||
// If we don't have any item ids, or if the current item ids are stale
|
||||
|
|
54
routes/_components/TimelineHomePage.html
Normal file
54
routes/_components/TimelineHomePage.html
Normal file
|
@ -0,0 +1,54 @@
|
|||
<!--
|
||||
Same as TimelinePage.html, but needs to manage visibility of ComposeBox itself
|
||||
without a div wrapper due to sticky-positioned compose button.
|
||||
TODO: this is a bit hacky due to code duplication
|
||||
-->
|
||||
<div class="timeline-home-page" aria-busy="{{hideTimeline}}">
|
||||
{{#if hidePage}}
|
||||
<LoadingPage />
|
||||
{{/if}}
|
||||
{{#if $currentVerifyCredentials }}
|
||||
<ComposeBox realm="home" hidden="{{hidePage}}"/>
|
||||
{{/if}}
|
||||
<div class="timeline-home-anchor-container">
|
||||
{{#if !hidePage && hideTimeline}}
|
||||
<LoadingPage />
|
||||
{{/if}}
|
||||
<div class="timeline-home-reveal-container {{hideTimeline ? 'hidden' : ''}}">
|
||||
<LazyTimeline timeline="home" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.timeline-home-page, .timeline-home-anchor-container {
|
||||
position: relative;
|
||||
}
|
||||
.timeline-home-reveal-container {
|
||||
transition: opacity 0.2s linear; /* main page reveal */
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
|
||||
import { store } from '.././_store/store.js'
|
||||
import LoadingPage from '../_components/LoadingPage.html'
|
||||
import ComposeBox from '../_components/compose/ComposeBox.html'
|
||||
|
||||
export default {
|
||||
oncreate () {
|
||||
this.store.set({
|
||||
timelineInitialized: false,
|
||||
timelinePreinitialized: false
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
hidePage: ($timelineInitialized, $timelinePreinitialized) => !$timelineInitialized && !$timelinePreinitialized,
|
||||
hideTimeline: ($timelineInitialized) => !$timelineInitialized,
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
LoadingPage,
|
||||
ComposeBox
|
||||
}
|
||||
}
|
||||
</script>
|
47
routes/_components/TimelinePage.html
Normal file
47
routes/_components/TimelinePage.html
Normal file
|
@ -0,0 +1,47 @@
|
|||
<div class="timeline-page" aria-busy="{{hideTimeline}}">
|
||||
{{#if hidePage}}
|
||||
<LoadingPage />
|
||||
{{/if}}
|
||||
<div class="timeline-slot-reveal-container {{hidePage ? 'hidden' : ''}}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="timeline-anchor-container">
|
||||
{{#if !hidePage && hideTimeline}}
|
||||
<LoadingPage />
|
||||
{{/if}}
|
||||
<div class="timeline-reveal-container {{hideTimeline ? 'hidden' : ''}}">
|
||||
<LazyTimeline :timeline />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.timeline-page, .timeline-anchor-container {
|
||||
position: relative;
|
||||
}
|
||||
.timeline-reveal-container, .timeline-slot-reveal-container {
|
||||
transition: opacity 0.2s linear; /* main page reveal */
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
|
||||
import { store } from '.././_store/store.js'
|
||||
import LoadingPage from '../_components/LoadingPage.html'
|
||||
|
||||
export default {
|
||||
oncreate () {
|
||||
this.store.set({
|
||||
timelineInitialized: false,
|
||||
timelinePreinitialized: false
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
hidePage: ($timelineInitialized, $timelinePreinitialized) => !$timelineInitialized && !$timelinePreinitialized,
|
||||
hideTimeline: ($timelineInitialized) => !$timelineInitialized,
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
LoadingPage
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -1,4 +1,4 @@
|
|||
<div class="compose-box {{overLimit ? 'over-char-limit' : ''}} {{realm === 'dialog' ? 'dialog-size' : '' }}">
|
||||
<div class="{{className}} {{hideAndFadeIn}}">
|
||||
<ComposeAuthor />
|
||||
{{#if contentWarningShown}}
|
||||
<div class="compose-content-warning-wrapper"
|
||||
|
@ -12,11 +12,11 @@
|
|||
<ComposeLengthIndicator :length :overLimit />
|
||||
<ComposeMedia :realm :media />
|
||||
</div>
|
||||
<div class="compose-box-button-sentinel" ref:sentinel></div>
|
||||
<div class="compose-box-button-wrapper" >
|
||||
<div class="compose-box-button-sentinel {{hideAndFadeIn}}" ref:sentinel></div>
|
||||
<div class="compose-box-button-wrapper {{hideAndFadeIn}}" >
|
||||
<ComposeButton :length :overLimit :sticky on:click="onClickPostButton()" />
|
||||
</div>
|
||||
<div class="compose-box-border-bottom"></div>
|
||||
<div class="compose-box-border-bottom {{hideAndFadeIn}}"></div>
|
||||
<style>
|
||||
.compose-box {
|
||||
border-radius: 4px;
|
||||
|
@ -40,6 +40,10 @@
|
|||
max-width: calc(100vw - 60px);
|
||||
}
|
||||
|
||||
.compose-box-fade-in {
|
||||
transition: opacity 0.2s linear; /* main page reveal */
|
||||
}
|
||||
|
||||
.compose-box-border-bottom {
|
||||
height: 1px;
|
||||
background: var(--main-border);
|
||||
|
@ -91,6 +95,7 @@
|
|||
import { slide } from 'svelte-transitions'
|
||||
import { postStatus, insertHandleForReply } from '../../_actions/compose'
|
||||
import { importDialogs } from '../../_utils/asyncModules'
|
||||
import { classname } from '../../_utils/classname'
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
|
@ -133,6 +138,19 @@
|
|||
},
|
||||
store: () => store,
|
||||
computed: {
|
||||
className: (overLimit, realm) => {
|
||||
return classname(
|
||||
'compose-box',
|
||||
overLimit && 'over-char-limit',
|
||||
realm === 'dialog' && 'dialog-size'
|
||||
)
|
||||
},
|
||||
hideAndFadeIn: (hidden) => {
|
||||
return classname(
|
||||
'compose-box-fade-in',
|
||||
hidden && 'hidden'
|
||||
)
|
||||
},
|
||||
composeData: ($currentComposeData, realm) => $currentComposeData[realm] || {},
|
||||
text: (composeData) => composeData.text || '',
|
||||
media: (composeData) => composeData.media || [],
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<div class="pseudo-virtual-list {{shown ? '' : 'hidden'}}" on:initializedVisibleItems ref:node>
|
||||
<div class="pseudo-virtual-list" on:initialized ref:node>
|
||||
{{#if wrappedItems}}
|
||||
{{#each wrappedItems as wrappedItem, i @item}}
|
||||
<PseudoVirtualListLazyItem
|
||||
|
@ -18,7 +18,6 @@
|
|||
<style>
|
||||
.pseudo-virtual-list {
|
||||
position: relative;
|
||||
transition: opacity 0.25s linear;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
@ -51,8 +50,8 @@
|
|||
console.log('allItemsHaveHeight', allItemsHaveHeight)
|
||||
if (allItemsHaveHeight && !this.get('initialized')) {
|
||||
this.set({initialized: true})
|
||||
console.log('initializedVisibleItems')
|
||||
this.fire('initializedVisibleItems')
|
||||
console.log('initialized PseudoVirtualList')
|
||||
this.fire('initialized')
|
||||
}
|
||||
})
|
||||
stop('PseudoVirtualList oncreate()')
|
||||
|
|
|
@ -4,17 +4,13 @@
|
|||
on:focusWithCapture="saveFocus(event)"
|
||||
on:blurWithCapture="clearFocus(event)"
|
||||
>
|
||||
{{#if !$initialized}}
|
||||
<LoadingPage />
|
||||
{{/if}}
|
||||
{{#if virtual}}
|
||||
<VirtualList component="{{VirtualListComponent}}"
|
||||
realm="{{$currentInstance + '/' + timeline}}"
|
||||
containerQuery=".container"
|
||||
:makeProps
|
||||
items="{{$timelineItemIds}}"
|
||||
shown="{{$initialized}}"
|
||||
showFooter="{{$initialized && $runningUpdate}}"
|
||||
showFooter="{{$timelineInitialized && $runningUpdate}}"
|
||||
footerComponent="{{LoadingFooter}}"
|
||||
showHeader="{{$showHeader}}"
|
||||
headerComponent="{{MoreHeaderVirtualWrapper}}"
|
||||
|
@ -22,7 +18,8 @@
|
|||
on:scrollToBottom="onScrollToBottom()"
|
||||
on:scrollToTop="onScrollToTop()"
|
||||
on:scrollTopChanged="onScrollTopChanged(event)"
|
||||
on:initializedVisibleItems="initialize()"
|
||||
on:initialized="initialize()"
|
||||
on:noNeedToScroll="onNoNeedToScroll()"
|
||||
/>
|
||||
{{else}}
|
||||
{{#await importPseudoVirtualList}}
|
||||
|
@ -35,20 +32,14 @@
|
|||
containerQuery=".container"
|
||||
:makeProps
|
||||
items="{{$timelineItemIds}}"
|
||||
shown="{{$initialized}}"
|
||||
scrollToItem="{{scrollToItem}}"
|
||||
on:initializedVisibleItems="initialize()"
|
||||
on:initialized="initialize()"
|
||||
/>
|
||||
{{catch error}}
|
||||
<div>Component failed to load. Try refreshing! {{error}}</div>
|
||||
{{/await}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<style>
|
||||
.timeline {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import { store } from '../../_store/store'
|
||||
import StatusVirtualListItem from './StatusVirtualListItem.html'
|
||||
|
@ -60,19 +51,18 @@
|
|||
import { timelines } from '../../_static/timelines'
|
||||
import { database } from '../../_database/database'
|
||||
import {
|
||||
initializeTimeline,
|
||||
fetchTimelineItemsOnScrollToBottom,
|
||||
setupTimeline,
|
||||
showMoreItemsForTimeline,
|
||||
showMoreItemsForThread,
|
||||
showMoreItemsForCurrentTimeline
|
||||
} from '../../_actions/timeline'
|
||||
import LoadingPage from '../LoadingPage.html'
|
||||
import { focusWithCapture, blurWithCapture } from '../../_utils/events'
|
||||
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
|
||||
import { mark, stop } from '../../_utils/marks'
|
||||
import { importPseudoVirtualList } from '../../_utils/asyncModules'
|
||||
import isEqual from 'lodash/isEqual'
|
||||
import { doubleRAF } from '../../_utils/doubleRAF'
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
|
@ -154,8 +144,7 @@
|
|||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
VirtualList,
|
||||
LoadingPage
|
||||
VirtualList
|
||||
},
|
||||
events: {
|
||||
focusWithCapture,
|
||||
|
@ -167,14 +156,18 @@
|
|||
return
|
||||
}
|
||||
this.set({initializeStarted: true})
|
||||
console.log('timeline initialize()')
|
||||
initializeTimeline()
|
||||
mark('initializeTimeline')
|
||||
doubleRAF(() => {
|
||||
console.log('timeline initialized')
|
||||
this.store.set({timelineInitialized: true})
|
||||
stop('initializeTimeline')
|
||||
})
|
||||
},
|
||||
onScrollTopChanged(scrollTop) {
|
||||
this.set({scrollTop: scrollTop})
|
||||
},
|
||||
onScrollToBottom() {
|
||||
if (!this.store.get('initialized') ||
|
||||
if (!this.store.get('timelineInitialized') ||
|
||||
this.store.get('runningUpdate') ||
|
||||
this.get('timelineType') === 'status') { // for status contexts, we've already fetched the whole thread
|
||||
return
|
||||
|
@ -289,6 +282,13 @@
|
|||
})
|
||||
})
|
||||
},
|
||||
onNoNeedToScroll() {
|
||||
// If the timeline doesn't need to scroll, then we can safely "preinitialize,"
|
||||
// i.e. render anything above the fold of the timeline. This avoids the affect
|
||||
// where the scrollable content appears to jump around if we need to scroll it.
|
||||
console.log('timeline preinitialized')
|
||||
this.store.set({timelinePreinitialized: true})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -1,5 +1,5 @@
|
|||
<VirtualListContainer :realm :containerQuery >
|
||||
<div class="virtual-list {{shown ? '' : 'hidden'}}"
|
||||
<VirtualListContainer :realm :containerQuery on:initialized on:noNeedToScroll >
|
||||
<div class="virtual-list"
|
||||
style="height: {{$height}}px;"
|
||||
ref:node >
|
||||
<VirtualListHeader component="{{headerComponent}}" virtualProps="{{headerProps}}" shown="{{$showHeader}}"/>
|
||||
|
@ -21,7 +21,6 @@
|
|||
<style>
|
||||
.virtual-list {
|
||||
position: relative;
|
||||
transition: opacity 0.25s linear;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
import { mark, stop } from '../../_utils/marks'
|
||||
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
|
||||
import { isMobile } from '../../_utils/isMobile'
|
||||
import { doubleRAF } from '../../_utils/doubleRAF'
|
||||
|
||||
const SCROLL_EVENT_DELAY = 300
|
||||
|
||||
|
@ -26,9 +27,20 @@
|
|||
console.log('forcing scroll top to ', scrollTop)
|
||||
node.scrollTop = scrollTop
|
||||
stop('set scrollTop')
|
||||
doubleRAF(() => {
|
||||
console.log('initialized VirtualList')
|
||||
this.fire('initialized')
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.fire('noNeedToScroll')
|
||||
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
|
||||
if (allVisibleItemsHaveHeight) {
|
||||
console.log('initialized VirtualList')
|
||||
this.fire('initialized')
|
||||
}
|
||||
})
|
||||
this.store.setForRealm({
|
||||
scrollHeight: node.scrollHeight,
|
||||
offsetHeight: node.offsetHeight
|
||||
|
|
|
@ -1,24 +1,25 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
<DynamicPageBanner title="" />
|
||||
{{#if $currentAccountProfile && $currentVerifyCredentials}}
|
||||
<TimelinePage timeline="account/{{params.accountId}}">
|
||||
<DynamicPageBanner title="" />
|
||||
{{#if $currentAccountProfile && $currentVerifyCredentials}}
|
||||
<AccountProfile account="{{$currentAccountProfile}}"
|
||||
relationship="{{$currentAccountRelationship}}"
|
||||
verifyCredentials="{{$currentVerifyCredentials}}"
|
||||
/>
|
||||
{{/if}}
|
||||
<PinnedStatuses accountId="{{params.accountId}}" />
|
||||
<LazyTimeline timeline='account/{{params.accountId}}' />
|
||||
{{/if}}
|
||||
<PinnedStatuses accountId="{{params.accountId}}" />
|
||||
</TimelinePage>
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Profile</h1>
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Profile</h1>
|
||||
|
||||
<p>A user timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
<p>A user timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<script>
|
||||
import LazyTimeline from '../../_components/timeline/LazyTimeline.html'
|
||||
import TimelinePage from '../../_components/TimelinePage.html'
|
||||
import FreeTextLayout from '../../_components/FreeTextLayout.html'
|
||||
import { store } from '../../_store/store.js'
|
||||
import HiddenFromSSR from '../../_components/HiddenFromSSR'
|
||||
|
@ -42,7 +43,7 @@
|
|||
}
|
||||
},
|
||||
components: {
|
||||
LazyTimeline,
|
||||
TimelinePage,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner,
|
||||
|
|
|
@ -1,19 +1,20 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
{{#if $pinnedPage !== '/favorites'}}
|
||||
<DynamicPageBanner title="Favorites" icon="#fa-star"/>
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='favorites' />
|
||||
<TimelinePage timeline="favorites">
|
||||
{{#if $pinnedPage !== '/favorites'}}
|
||||
<DynamicPageBanner title="Favorites" icon="#fa-star"/>
|
||||
{{/if}}
|
||||
</TimelinePage>
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Favorites</h1>
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Favorites</h1>
|
||||
|
||||
<p>Your favorites will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
<p>Your favorites will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<script>
|
||||
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
|
||||
import TimelinePage from '.././_components/TimelinePage.html'
|
||||
import FreeTextLayout from '.././_components/FreeTextLayout.html'
|
||||
import { store } from '.././_store/store.js'
|
||||
import HiddenFromSSR from '.././_components/HiddenFromSSR'
|
||||
|
@ -22,7 +23,7 @@
|
|||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
TimelinePage,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
|
|
|
@ -1,19 +1,20 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
{{#if $pinnedPage !== '/federated'}}
|
||||
<DynamicPageBanner title="Federated Timeline" icon="#fa-globe"/>
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='federated' />
|
||||
<TimelinePage timeline="federated">
|
||||
{{#if $pinnedPage !== '/federated'}}
|
||||
<DynamicPageBanner title="Federated Timeline" icon="#fa-globe"/>
|
||||
{{/if}}
|
||||
</TimelinePage>
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Federated</h1>
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Federated</h1>
|
||||
|
||||
<p>Your federated timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
<p>Your federated timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<script>
|
||||
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
|
||||
import TimelinePage from '.././_components/TimelinePage.html'
|
||||
import FreeTextLayout from '.././_components/FreeTextLayout.html'
|
||||
import { store } from '.././_store/store.js'
|
||||
import HiddenFromSSR from '.././_components/HiddenFromSSR'
|
||||
|
@ -22,7 +23,7 @@
|
|||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
TimelinePage,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
|
|
|
@ -1,25 +1,18 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
{{#if $currentVerifyCredentials}}
|
||||
<ComposeBox realm="home" />
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='home' />
|
||||
<TimelineHomePage/>
|
||||
{{else}}
|
||||
<NotLoggedInHome/>
|
||||
{{/if}}
|
||||
<style>
|
||||
</style>
|
||||
<script>
|
||||
import NotLoggedInHome from '.././_components/NotLoggedInHome.html'
|
||||
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
|
||||
import ComposeBox from '.././_components/compose/ComposeBox.html'
|
||||
import { store } from '.././_store/store.js'
|
||||
import TimelineHomePage from '../_components/TimelineHomePage.html'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
NotLoggedInHome,
|
||||
ComposeBox
|
||||
TimelineHomePage
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -1,19 +1,20 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
{{#if $pinnedPage !== `/lists/${params.listId}`}}
|
||||
<DynamicPageBanner title="{{listTitle}}" icon="#fa-bars"/>
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='list/{{params.listId}}' />
|
||||
<TimelinePage timeline="list/{{params.listId}}">
|
||||
{{#if $pinnedPage !== `/lists/${params.listId}`}}
|
||||
<DynamicPageBanner title="{{listTitle}}" icon="#fa-bars"/>
|
||||
{{/if}}
|
||||
</TimelinePage>
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>List</h1>
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>List</h1>
|
||||
|
||||
<p>A list will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
<p>A list will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<script>
|
||||
import LazyTimeline from '../../_components/timeline/LazyTimeline.html'
|
||||
import TimelinePage from '../../_components/TimelinePage.html'
|
||||
import FreeTextLayout from '../../_components/FreeTextLayout.html'
|
||||
import { store } from '../../_store/store.js'
|
||||
import HiddenFromSSR from '../../_components/HiddenFromSSR'
|
||||
|
@ -26,7 +27,7 @@
|
|||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
TimelinePage,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
|
|
|
@ -1,19 +1,20 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
{{#if $pinnedPage !== '/local'}}
|
||||
<DynamicPageBanner title="Local Timeline" icon="#fa-users"/>
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='local' />
|
||||
<TimelinePage timeline="local">
|
||||
{{#if $pinnedPage !== '/local'}}
|
||||
<DynamicPageBanner title="Local Timeline" icon="#fa-users"/>
|
||||
{{/if}}
|
||||
</TimelinePage>
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Local</h1>
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Local</h1>
|
||||
|
||||
<p>Your local timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
<p>Your local timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<script>
|
||||
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
|
||||
import TimelinePage from '.././_components/TimelinePage.html'
|
||||
import FreeTextLayout from '.././_components/FreeTextLayout.html'
|
||||
import { store } from '.././_store/store.js'
|
||||
import HiddenFromSSR from '.././_components/HiddenFromSSR'
|
||||
|
@ -22,7 +23,7 @@
|
|||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
TimelinePage,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
<LazyTimeline timeline='notifications' />
|
||||
<TimelinePage timeline="notifications" />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
|
@ -10,17 +10,17 @@
|
|||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<script>
|
||||
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
|
||||
import FreeTextLayout from '.././_components/FreeTextLayout.html'
|
||||
import { store } from '.././_store/store.js'
|
||||
import HiddenFromSSR from '.././_components/HiddenFromSSR'
|
||||
import TimelinePage from '../_components/TimelinePage.html'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR
|
||||
HiddenFromSSR,
|
||||
TimelinePage
|
||||
}
|
||||
};
|
||||
</script>
|
|
@ -1,29 +1,30 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
<DynamicPageBanner title=""/>
|
||||
<LazyTimeline timeline='status/{{params.statusId}}' />
|
||||
<TimelinePage timeline="status/{{params.statusId}}">
|
||||
<DynamicPageBanner title=""/>
|
||||
</TimelinePage>
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Status</h1>
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Status</h1>
|
||||
|
||||
<p>A status thread will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
<p>A status thread will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<script>
|
||||
import LazyTimeline from '../../../_components/timeline/LazyTimeline.html'
|
||||
import FreeTextLayout from '../../../_components/FreeTextLayout.html'
|
||||
import { store } from '../../../_store/store.js'
|
||||
import HiddenFromSSR from '../../../_components/HiddenFromSSR'
|
||||
import DynamicPageBanner from '../../../_components/DynamicPageBanner.html'
|
||||
import TimelinePage from '../../../_components/TimelinePage.html'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
DynamicPageBanner,
|
||||
TimelinePage
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -1,17 +1,18 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
<DynamicPageBanner title="{{'#' + params.tagName}}"/>
|
||||
<LazyTimeline timeline='tag/{{params.tagName}}' />
|
||||
<TimelinePage timeline="tag/{{params.tagName}}">
|
||||
<DynamicPageBanner title="{{'#' + params.tagName}}"/>
|
||||
</TimelinePage>
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>#{{params.tagName}}</h1>
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>#{{params.tagName}}</h1>
|
||||
|
||||
<p>A hashtag timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
<p>A hashtag timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<script>
|
||||
import LazyTimeline from '../../_components/timeline/LazyTimeline.html'
|
||||
import TimelinePage from '../../_components/TimelinePage.html'
|
||||
import FreeTextLayout from '../../_components/FreeTextLayout.html'
|
||||
import { store } from '../../_store/store.js'
|
||||
import HiddenFromSSR from '../../_components/HiddenFromSSR'
|
||||
|
@ -20,7 +21,7 @@
|
|||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
TimelinePage,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
|
|
|
@ -11,7 +11,6 @@ function computeForTimeline (store, key, defaultValue) {
|
|||
export function timelineComputations (store) {
|
||||
computeForTimeline(store, 'timelineItemIds', null)
|
||||
computeForTimeline(store, 'runningUpdate', false)
|
||||
computeForTimeline(store, 'initialized', false)
|
||||
computeForTimeline(store, 'lastFocusedElementSelector', null)
|
||||
computeForTimeline(store, 'ignoreBlurEvents', false)
|
||||
computeForTimeline(store, 'itemIdsToAdd', null)
|
||||
|
|
3
routes/_utils/doubleRAF.js
Normal file
3
routes/_utils/doubleRAF.js
Normal file
|
@ -0,0 +1,3 @@
|
|||
export function doubleRAF (fn) {
|
||||
requestAnimationFrame(() => requestAnimationFrame(fn))
|
||||
}
|
Loading…
Reference in a new issue