pinafore/routes/_components/TimelinePage.html

47 lines
1.3 KiB
HTML

<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>