forked from cybrespace/pinafore
47 lines
1.3 KiB
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>
|