Mastodon
/
Pinafore-Web-Client-Frontend
mirror of https://github.com/nolanlawson/pinafore
1
0
Fork 0
Code Issues Releases Wiki Activity

finish timeline fixes

This commit is contained in:
Nolan Lawson 2018-03-29 23:16:09 -07:00
parent b3e48b01d5
commit d8d7f405c0
18 changed files with 238 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
routes/_components/TimelineHomePage.html Normal file
View 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
View 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>

26
routes/_components/compose/ComposeBox.html
View File

@ -1,4 +1,4 @@
<div class="compose-box {{overLimit ? 'over-char-limit' : ''}} {{realm === 'dialog' ? 'dialog-size' : '' }}"> <div class="{{className}} {{hideAndFadeIn}}">
<ComposeAuthor /> <ComposeAuthor />
{{#if contentWarningShown}} {{#if contentWarningShown}}
<div class="compose-content-warning-wrapper" <div class="compose-content-warning-wrapper"
@ -12,11 +12,11 @@
<ComposeLengthIndicator :length :overLimit /> <ComposeLengthIndicator :length :overLimit />
<ComposeMedia :realm :media /> <ComposeMedia :realm :media />
</div> </div>
<div class="compose-box-button-sentinel" ref:sentinel></div> <div class="compose-box-button-sentinel {{hideAndFadeIn}}" ref:sentinel></div>
<div class="compose-box-button-wrapper" > <div class="compose-box-button-wrapper {{hideAndFadeIn}}" >
<ComposeButton :length :overLimit :sticky on:click="onClickPostButton()" /> <ComposeButton :length :overLimit :sticky on:click="onClickPostButton()" />
</div> </div>
<div class="compose-box-border-bottom"></div> <div class="compose-box-border-bottom {{hideAndFadeIn}}"></div>
<style> <style>
.compose-box { .compose-box {
border-radius: 4px; border-radius: 4px;
@ -40,6 +40,10 @@
max-width: calc(100vw - 60px); max-width: calc(100vw - 60px);
} }
.compose-box-fade-in {
transition: opacity 0.2s linear; /* main page reveal */
}
.compose-box-border-bottom { .compose-box-border-bottom {
height: 1px; height: 1px;
background: var(--main-border); background: var(--main-border);
@ -91,6 +95,7 @@
import { slide } from 'svelte-transitions' import { slide } from 'svelte-transitions'
import { postStatus, insertHandleForReply } from '../../_actions/compose' import { postStatus, insertHandleForReply } from '../../_actions/compose'
import { importDialogs } from '../../_utils/asyncModules' import { importDialogs } from '../../_utils/asyncModules'
import { classname } from '../../_utils/classname'
export default { export default {
oncreate() { oncreate() {
@ -133,6 +138,19 @@
}, },
store: () => store, store: () => store,
computed: { 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] || {}, composeData: ($currentComposeData, realm) => $currentComposeData[realm] || {},
text: (composeData) => composeData.text || '', text: (composeData) => composeData.text || '',
media: (composeData) => composeData.media || [], media: (composeData) => composeData.media || [],

3
routes/_components/pseudoVirtualList/PseudoVirtualList.html
View File

@ -1,4 +1,4 @@
<div class="pseudo-virtual-list {{shown ? '' : 'hidden'}}" on:initialized ref:node> <div class="pseudo-virtual-list" on:initialized ref:node>
{{#if wrappedItems}} {{#if wrappedItems}}
{{#each wrappedItems as wrappedItem, i @item}} {{#each wrappedItems as wrappedItem, i @item}}
<PseudoVirtualListLazyItem <PseudoVirtualListLazyItem
@ -18,7 +18,6 @@
<style> <style>
.pseudo-virtual-list { .pseudo-virtual-list {
position: relative; position: relative;
transition: opacity 0.25s linear;
} }
</style> </style>
<script> <script>

2
routes/_components/timeline/LazyTimeline.html
View File

@ -1,7 +1,7 @@
<div class="lazy-timeline"> <div class="lazy-timeline">
{{#await importTimeline}} {{#await importTimeline}}
{{then constructor}} {{then constructor}}
<:Component {constructor} :timeline on:initialized /> <:Component {constructor} :timeline />
{{catch error}} {{catch error}}
<div>Component failed to load. Try refreshing! {{error}}</div> <div>Component failed to load. Try refreshing! {{error}}</div>
{{/await}} {{/await}}

29
routes/_components/timeline/Timeline.html
View File

@ -4,17 +4,13 @@
on:focusWithCapture="saveFocus(event)" on:focusWithCapture="saveFocus(event)"
on:blurWithCapture="clearFocus(event)" on:blurWithCapture="clearFocus(event)"
> >
{{#if !initialized}}
<LoadingPage />
{{/if}}
{{#if virtual}} {{#if virtual}}
<VirtualList component="{{VirtualListComponent}}" <VirtualList component="{{VirtualListComponent}}"
realm="{{$currentInstance + '/' + timeline}}" realm="{{$currentInstance + '/' + timeline}}"
containerQuery=".container" containerQuery=".container"
:makeProps :makeProps
items="{{$timelineItemIds}}" items="{{$timelineItemIds}}"
shown="{{initialized}}" showFooter="{{$timelineInitialized && $runningUpdate}}"
showFooter="{{initialized && $runningUpdate}}"
footerComponent="{{LoadingFooter}}" footerComponent="{{LoadingFooter}}"
showHeader="{{$showHeader}}" showHeader="{{$showHeader}}"
headerComponent="{{MoreHeaderVirtualWrapper}}" headerComponent="{{MoreHeaderVirtualWrapper}}"
@ -23,6 +19,7 @@
on:scrollToTop="onScrollToTop()" on:scrollToTop="onScrollToTop()"
on:scrollTopChanged="onScrollTopChanged(event)" on:scrollTopChanged="onScrollTopChanged(event)"
on:initialized="initialize()" on:initialized="initialize()"
on:noNeedToScroll="onNoNeedToScroll()"
/> />
{{else}} {{else}}
{{#await importPseudoVirtualList}} {{#await importPseudoVirtualList}}
@ -35,7 +32,6 @@
containerQuery=".container" containerQuery=".container"
:makeProps :makeProps
items="{{$timelineItemIds}}" items="{{$timelineItemIds}}"
shown="{{initialized}}"
scrollToItem="{{scrollToItem}}" scrollToItem="{{scrollToItem}}"
on:initialized="initialize()" on:initialized="initialize()"
/> />
@ -44,11 +40,6 @@
{{/await}} {{/await}}
{{/if}} {{/if}}
</div> </div>
<style>
.timeline {
position: relative;
}
</style>
<script> <script>
import { store } from '../../_store/store' import { store } from '../../_store/store'
import StatusVirtualListItem from './StatusVirtualListItem.html' import StatusVirtualListItem from './StatusVirtualListItem.html'
@ -66,7 +57,6 @@
showMoreItemsForThread, showMoreItemsForThread,
showMoreItemsForCurrentTimeline showMoreItemsForCurrentTimeline
} from '../../_actions/timeline' } from '../../_actions/timeline'
import LoadingPage from '../LoadingPage.html'
import { focusWithCapture, blurWithCapture } from '../../_utils/events' import { focusWithCapture, blurWithCapture } from '../../_utils/events'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask' import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { mark, stop } from '../../_utils/marks' import { mark, stop } from '../../_utils/marks'
@ -154,8 +144,7 @@
}, },
store: () => store, store: () => store,
components: { components: {
VirtualList, VirtualList
LoadingPage
}, },
events: { events: {
focusWithCapture, focusWithCapture,
@ -170,8 +159,7 @@
mark('initializeTimeline') mark('initializeTimeline')
doubleRAF(() => { doubleRAF(() => {
console.log('timeline initialized') console.log('timeline initialized')
this.set({initialized: true}) this.store.set({timelineInitialized: true})
this.fire('initialized')
stop('initializeTimeline') stop('initializeTimeline')
}) })
}, },
@ -179,7 +167,7 @@
this.set({scrollTop: scrollTop}) this.set({scrollTop: scrollTop})
}, },
onScrollToBottom() { onScrollToBottom() {
if (!this.get('initialized') || if (!this.store.get('timelineInitialized') ||
this.store.get('runningUpdate') || this.store.get('runningUpdate') ||
this.get('timelineType') === 'status') { // for status contexts, we've already fetched the whole thread this.get('timelineType') === 'status') { // for status contexts, we've already fetched the whole thread
return return
@ -294,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> </script>

5
routes/_components/virtualList/VirtualList.html
View File

@ -1,5 +1,5 @@
<VirtualListContainer :realm :containerQuery on:initialized > <VirtualListContainer :realm :containerQuery on:initialized on:noNeedToScroll >
<div class="virtual-list {{shown ? '' : 'hidden'}}" <div class="virtual-list"
style="height: {{$height}}px;" style="height: {{$height}}px;"
ref:node > ref:node >
<VirtualListHeader component="{{headerComponent}}" virtualProps="{{headerProps}}" shown="{{$showHeader}}"/> <VirtualListHeader component="{{headerComponent}}" virtualProps="{{headerProps}}" shown="{{$showHeader}}"/>
@ -21,7 +21,6 @@
<style> <style>
.virtual-list { .virtual-list {
position: relative; position: relative;
transition: opacity 0.25s linear;
} }
</style> </style>
<script> <script>

1
routes/_components/virtualList/VirtualListContainer.html
View File

@ -34,6 +34,7 @@
} }
}) })
} else { } else {
this.fire('noNeedToScroll')
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => { this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
if (allVisibleItemsHaveHeight) { if (allVisibleItemsHaveHeight) {
console.log('initialized VirtualList') console.log('initialized VirtualList')

27
routes/_pages/accounts/[accountId].html
View File

@ -1,24 +1,25 @@
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
<DynamicPageBanner title="" /> <TimelinePage timeline="account/{{params.accountId}}">
{{#if $currentAccountProfile && $currentVerifyCredentials}} <DynamicPageBanner title="" />
{{#if $currentAccountProfile && $currentVerifyCredentials}}
<AccountProfile account="{{$currentAccountProfile}}" <AccountProfile account="{{$currentAccountProfile}}"
relationship="{{$currentAccountRelationship}}" relationship="{{$currentAccountRelationship}}"
verifyCredentials="{{$currentVerifyCredentials}}" verifyCredentials="{{$currentVerifyCredentials}}"
/> />
{{/if}} {{/if}}
<PinnedStatuses accountId="{{params.accountId}}" /> <PinnedStatuses accountId="{{params.accountId}}" />
<LazyTimeline timeline='account/{{params.accountId}}' /> </TimelinePage>
{{else}} {{else}}
<HiddenFromSSR> <HiddenFromSSR>
<FreeTextLayout> <FreeTextLayout>
<h1>Profile</h1> <h1>Profile</h1>
<p>A user timeline will appear here when logged in.</p> <p>A user timeline will appear here when logged in.</p>
</FreeTextLayout> </FreeTextLayout>
</HiddenFromSSR> </HiddenFromSSR>
{{/if}} {{/if}}
<script> <script>
import LazyTimeline from '../../_components/timeline/LazyTimeline.html' import TimelinePage from '../../_components/TimelinePage.html'
import FreeTextLayout from '../../_components/FreeTextLayout.html' import FreeTextLayout from '../../_components/FreeTextLayout.html'
import { store } from '../../_store/store.js' import { store } from '../../_store/store.js'
import HiddenFromSSR from '../../_components/HiddenFromSSR' import HiddenFromSSR from '../../_components/HiddenFromSSR'
@ -42,7 +43,7 @@
} }
}, },
components: { components: {
LazyTimeline, TimelinePage,
FreeTextLayout, FreeTextLayout,
HiddenFromSSR, HiddenFromSSR,
DynamicPageBanner, DynamicPageBanner,

25
routes/_pages/favorites.html
View File

@ -1,19 +1,20 @@
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
{{#if $pinnedPage !== '/favorites'}} <TimelinePage timeline="favorites">
<DynamicPageBanner title="Favorites" icon="#fa-star"/> {{#if $pinnedPage !== '/favorites'}}
{{/if}} <DynamicPageBanner title="Favorites" icon="#fa-star"/>
<LazyTimeline timeline='favorites' /> {{/if}}
</TimelinePage>
{{else}} {{else}}
<HiddenFromSSR> <HiddenFromSSR>
<FreeTextLayout> <FreeTextLayout>
<h1>Favorites</h1> <h1>Favorites</h1>
<p>Your favorites will appear here when logged in.</p> <p>Your favorites will appear here when logged in.</p>
</FreeTextLayout> </FreeTextLayout>
</HiddenFromSSR> </HiddenFromSSR>
{{/if}} {{/if}}
<script> <script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html' import TimelinePage from '.././_components/TimelinePage.html'
import FreeTextLayout from '.././_components/FreeTextLayout.html' import FreeTextLayout from '.././_components/FreeTextLayout.html'
import { store } from '.././_store/store.js' import { store } from '.././_store/store.js'
import HiddenFromSSR from '.././_components/HiddenFromSSR' import HiddenFromSSR from '.././_components/HiddenFromSSR'
@ -22,7 +23,7 @@
export default { export default {
store: () => store, store: () => store,
components: { components: {
LazyTimeline, TimelinePage,
FreeTextLayout, FreeTextLayout,
HiddenFromSSR, HiddenFromSSR,
DynamicPageBanner DynamicPageBanner

25
routes/_pages/federated.html
View File

@ -1,19 +1,20 @@
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
{{#if $pinnedPage !== '/federated'}} <TimelinePage timeline="federated">
<DynamicPageBanner title="Federated Timeline" icon="#fa-globe"/> {{#if $pinnedPage !== '/federated'}}
{{/if}} <DynamicPageBanner title="Federated Timeline" icon="#fa-globe"/>
<LazyTimeline timeline='federated' /> {{/if}}
</TimelinePage>
{{else}} {{else}}
<HiddenFromSSR> <HiddenFromSSR>
<FreeTextLayout> <FreeTextLayout>
<h1>Federated</h1> <h1>Federated</h1>
<p>Your federated timeline will appear here when logged in.</p> <p>Your federated timeline will appear here when logged in.</p>
</FreeTextLayout> </FreeTextLayout>
</HiddenFromSSR> </HiddenFromSSR>
{{/if}} {{/if}}
<script> <script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html' import TimelinePage from '.././_components/TimelinePage.html'
import FreeTextLayout from '.././_components/FreeTextLayout.html' import FreeTextLayout from '.././_components/FreeTextLayout.html'
import { store } from '.././_store/store.js' import { store } from '.././_store/store.js'
import HiddenFromSSR from '.././_components/HiddenFromSSR' import HiddenFromSSR from '.././_components/HiddenFromSSR'
@ -22,7 +23,7 @@
export default { export default {
store: () => store, store: () => store,
components: { components: {
LazyTimeline, TimelinePage,
FreeTextLayout, FreeTextLayout,
HiddenFromSSR, HiddenFromSSR,
DynamicPageBanner DynamicPageBanner

25
routes/_pages/index.html
View File

@ -1,35 +1,18 @@
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
{{#if $currentVerifyCredentials }} <TimelineHomePage/>
<div class="compose-box-reveal {{timelineInitialized ? '' : 'hidden'}}">
<ComposeBox realm="home" />
</div>
{{/if}}
<LazyTimeline timeline='home' on:initialized="onTimelineInitialized()"/>
{{else}} {{else}}
<NotLoggedInHome/> <NotLoggedInHome/>
{{/if}} {{/if}}
<style>
.compose-box-reveal {
transition: opacity 0.25s linear;
}
</style>
<script> <script>
import NotLoggedInHome from '.././_components/NotLoggedInHome.html' 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 { store } from '.././_store/store.js'
import TimelineHomePage from '../_components/TimelineHomePage.html'
export default { export default {
store: () => store, store: () => store,
components: { components: {
LazyTimeline,
NotLoggedInHome, NotLoggedInHome,
ComposeBox TimelineHomePage
}, }
methods: {
onTimelineInitialized() {
this.set({timelineInitialized: true})
}
}
} }
</script> </script>

25
routes/_pages/lists/[listId].html
View File

@ -1,19 +1,20 @@
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
{{#if $pinnedPage !== `/lists/${params.listId}`}} <TimelinePage timeline="list/{{params.listId}}">
<DynamicPageBanner title="{{listTitle}}" icon="#fa-bars"/> {{#if $pinnedPage !== `/lists/${params.listId}`}}
{{/if}} <DynamicPageBanner title="{{listTitle}}" icon="#fa-bars"/>
<LazyTimeline timeline='list/{{params.listId}}' /> {{/if}}
</TimelinePage>
{{else}} {{else}}
<HiddenFromSSR> <HiddenFromSSR>
<FreeTextLayout> <FreeTextLayout>
<h1>List</h1> <h1>List</h1>
<p>A list will appear here when logged in.</p> <p>A list will appear here when logged in.</p>
</FreeTextLayout> </FreeTextLayout>
</HiddenFromSSR> </HiddenFromSSR>
{{/if}} {{/if}}
<script> <script>
import LazyTimeline from '../../_components/timeline/LazyTimeline.html' import TimelinePage from '../../_components/TimelinePage.html'
import FreeTextLayout from '../../_components/FreeTextLayout.html' import FreeTextLayout from '../../_components/FreeTextLayout.html'
import { store } from '../../_store/store.js' import { store } from '../../_store/store.js'
import HiddenFromSSR from '../../_components/HiddenFromSSR' import HiddenFromSSR from '../../_components/HiddenFromSSR'
@ -26,7 +27,7 @@
}, },
store: () => store, store: () => store,
components: { components: {
LazyTimeline, TimelinePage,
FreeTextLayout, FreeTextLayout,
HiddenFromSSR, HiddenFromSSR,
DynamicPageBanner DynamicPageBanner

25
routes/_pages/local.html
View File

@ -1,19 +1,20 @@
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
{{#if $pinnedPage !== '/local'}} <TimelinePage timeline="local">
<DynamicPageBanner title="Local Timeline" icon="#fa-users"/> {{#if $pinnedPage !== '/local'}}
{{/if}} <DynamicPageBanner title="Local Timeline" icon="#fa-users"/>
<LazyTimeline timeline='local' /> {{/if}}
</TimelinePage>
{{else}} {{else}}
<HiddenFromSSR> <HiddenFromSSR>
<FreeTextLayout> <FreeTextLayout>
<h1>Local</h1> <h1>Local</h1>
<p>Your local timeline will appear here when logged in.</p> <p>Your local timeline will appear here when logged in.</p>
</FreeTextLayout> </FreeTextLayout>
</HiddenFromSSR> </HiddenFromSSR>
{{/if}} {{/if}}
<script> <script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html' import TimelinePage from '.././_components/TimelinePage.html'
import FreeTextLayout from '.././_components/FreeTextLayout.html' import FreeTextLayout from '.././_components/FreeTextLayout.html'
import { store } from '.././_store/store.js' import { store } from '.././_store/store.js'
import HiddenFromSSR from '.././_components/HiddenFromSSR' import HiddenFromSSR from '.././_components/HiddenFromSSR'
@ -22,7 +23,7 @@
export default { export default {
store: () => store, store: () => store,
components: { components: {
LazyTimeline, TimelinePage,
FreeTextLayout, FreeTextLayout,
HiddenFromSSR, HiddenFromSSR,
DynamicPageBanner DynamicPageBanner

8
routes/_pages/notifications.html
View File

@ -1,5 +1,5 @@
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
<LazyTimeline timeline='notifications' /> <TimelinePage timeline="notifications" />
{{else}} {{else}}
<HiddenFromSSR> <HiddenFromSSR>
<FreeTextLayout> <FreeTextLayout>
@ -10,17 +10,17 @@
</HiddenFromSSR> </HiddenFromSSR>
{{/if}} {{/if}}
<script> <script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import FreeTextLayout from '.././_components/FreeTextLayout.html' import FreeTextLayout from '.././_components/FreeTextLayout.html'
import { store } from '.././_store/store.js' import { store } from '.././_store/store.js'
import HiddenFromSSR from '.././_components/HiddenFromSSR' import HiddenFromSSR from '.././_components/HiddenFromSSR'
import TimelinePage from '../_components/TimelinePage.html'
export default { export default {
store: () => store, store: () => store,
components: { components: {
LazyTimeline,
FreeTextLayout, FreeTextLayout,
HiddenFromSSR HiddenFromSSR,
TimelinePage
} }
}; };
</script> </script>

23
routes/_pages/statuses/[statusId]/index.html
View File

@ -1,29 +1,30 @@
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
<DynamicPageBanner title=""/> <TimelinePage timeline="status/{{params.statusId}}">
<LazyTimeline timeline='status/{{params.statusId}}' /> <DynamicPageBanner title=""/>
</TimelinePage>
{{else}} {{else}}
<HiddenFromSSR> <HiddenFromSSR>
<FreeTextLayout> <FreeTextLayout>
<h1>Status</h1> <h1>Status</h1>
<p>A status thread will appear here when logged in.</p> <p>A status thread will appear here when logged in.</p>
</FreeTextLayout> </FreeTextLayout>
</HiddenFromSSR> </HiddenFromSSR>
{{/if}} {{/if}}
<script> <script>
import LazyTimeline from '../../../_components/timeline/LazyTimeline.html'
import FreeTextLayout from '../../../_components/FreeTextLayout.html' import FreeTextLayout from '../../../_components/FreeTextLayout.html'
import { store } from '../../../_store/store.js' import { store } from '../../../_store/store.js'
import HiddenFromSSR from '../../../_components/HiddenFromSSR' import HiddenFromSSR from '../../../_components/HiddenFromSSR'
import DynamicPageBanner from '../../../_components/DynamicPageBanner.html' import DynamicPageBanner from '../../../_components/DynamicPageBanner.html'
import TimelinePage from '../../../_components/TimelinePage.html'
export default { export default {
store: () => store, store: () => store,
components: { components: {
LazyTimeline,
FreeTextLayout, FreeTextLayout,
HiddenFromSSR, HiddenFromSSR,
DynamicPageBanner DynamicPageBanner,
TimelinePage
} }
} }
</script> </script>

21
routes/_pages/tags/[tagName].html
View File

@ -1,17 +1,18 @@
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
<DynamicPageBanner title="{{'#' + params.tagName}}"/> <TimelinePage timeline="tag/{{params.tagName}}">
<LazyTimeline timeline='tag/{{params.tagName}}' /> <DynamicPageBanner title="{{'#' + params.tagName}}"/>
</TimelinePage>
{{else}} {{else}}
<HiddenFromSSR> <HiddenFromSSR>
<FreeTextLayout> <FreeTextLayout>
<h1>#{{params.tagName}}</h1> <h1>#{{params.tagName}}</h1>
<p>A hashtag timeline will appear here when logged in.</p> <p>A hashtag timeline will appear here when logged in.</p>
</FreeTextLayout> </FreeTextLayout>
</HiddenFromSSR> </HiddenFromSSR>
{{/if}} {{/if}}
<script> <script>
import LazyTimeline from '../../_components/timeline/LazyTimeline.html' import TimelinePage from '../../_components/TimelinePage.html'
import FreeTextLayout from '../../_components/FreeTextLayout.html' import FreeTextLayout from '../../_components/FreeTextLayout.html'
import { store } from '../../_store/store.js' import { store } from '../../_store/store.js'
import HiddenFromSSR from '../../_components/HiddenFromSSR' import HiddenFromSSR from '../../_components/HiddenFromSSR'
@ -20,7 +21,7 @@
export default { export default {
store: () => store, store: () => store,
components: { components: {
LazyTimeline, TimelinePage,
FreeTextLayout, FreeTextLayout,
HiddenFromSSR, HiddenFromSSR,
DynamicPageBanner DynamicPageBanner

2
routes/_utils/doubleRAF.js
View File

@ -1,3 +1,3 @@
export function doubleRAF(fn) { export function doubleRAF (fn) {
requestAnimationFrame(() => requestAnimationFrame(fn)) requestAnimationFrame(() => requestAnimationFrame(fn))
} }