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