From f34fb01ecfc0c782a3cd9712ea09252e09f4bda3 Mon Sep 17 00:00:00 2001
From: Louis-Olivier Brassard <louis@loupbrun.ca>
Date: Wed, 17 Apr 2019 10:49:03 -0400
Subject: [PATCH] Parcours: dispositions conherentes, assurer transitions
Closes #25
---
src/components/ParcoursAllComponent.vue | 2 +
src/components/ParcoursIndexComponent.vue | 128 +++++++++-----
src/components/ParcoursSingleComponent.vue | 189 +++++++++++----------
3 files changed, 184 insertions(+), 135 deletions(-)
diff --git a/src/components/ParcoursAllComponent.vue b/src/components/ParcoursAllComponent.vue
index 1a3e397..8fbed1c 100644
--- a/src/components/ParcoursAllComponent.vue
+++ b/src/components/ParcoursAllComponent.vue
@@ -97,6 +97,8 @@ export default {
}, function (response) {
console.log('Error retrieving parcours', response)
}).finally(function () {
+ // Processing should be finished at this point
+ // Fade the loader out
$('.loader').fadeOut()
})
// }, function (response) {
diff --git a/src/components/ParcoursIndexComponent.vue b/src/components/ParcoursIndexComponent.vue
index 65e9aed..34f1cd4 100644
--- a/src/components/ParcoursIndexComponent.vue
+++ b/src/components/ParcoursIndexComponent.vue
@@ -1,52 +1,59 @@
<template>
- <div class="parcours-index" v-bind:parcours="parcours">
- <div class="page-title-container">
- <h1>{{ parcours.versions[0].title }}</h1>
- </div>
+ <div class="parcours-index">
+ <loader></loader>
- <scroll-progress-bar></scroll-progress-bar>
+ <div class="content-wrapper"
+ v-if="parcours && parcours.versions">
- <div v-if="parcours && parcours.versions"
- class="row scroll row--all">
- <div class="col-md-5 col-md-offset-1">
- <div class="inner-links">
- <router-link :to="{ name: 'parcoursAll' }">
- <span class="dash"></span>
- Retour aux parcours
- </router-link>
- </div>
+ <div class="page-title-container">
+ <h1>{{ parcours.versions[0].title }}</h1>
+ </div>
+
+ <scroll-progress-bar></scroll-progress-bar>
- <div class="page-subtitle-container">
- <span class="dash"></span>
- <h2>{{ parcours.versions[0].title }}</h2>
+ <div class="row scroll row--all">
+ <div class="col-md-5 col-md-offset-1">
+ <div class="inner-links">
+ <router-link :to="{ name: 'parcoursAll' }">
+ <span class="dash"></span>
+ Retour aux parcours
+ </router-link>
+ </div>
+
+ <div class="page-subtitle-container">
+ <span class="dash"></span>
+ <h2>{{ parcours.versions[0].title }}</h2>
+ </div>
</div>
- </div>
- <div class="col-md-6 pull-right">
- <div class="vertical-list-container">
- <div class="vertical-list-wrapper">
- <h3 v-for="(entity, index) in parcours.entities">
- <router-link :to="{
- name: 'parcoursSingle',
- params: { parcoursId: parcours.id_keyword,
- parcoursSlug: '-' + slugify(parcours.versions[0].title),
- epigramIndex: index + 1
- } }">
- <span class="bg"></span>{{ entity.title }} <sup>{{ index + 1 | romanize }}</sup>
- </router-link>
- </h3>
- <!--
- <index-nav v-bind:list-items="parcours.entities"
- v-bind:item-id="parcoursId"
- v-bind:item-slug="'-' + slugify(parcours.versions[0].title)"
- route-name="parcoursSingle"
- ></index-nav>
- -->
+ <div class="col-md-6 pull-right">
+ <div class="vertical-list-container">
+ <div class="vertical-list-wrapper">
+ <h3 v-for="(entity, index) in parcours.entities">
+ <router-link :to="{
+ name: 'parcoursSingle',
+ params: { parcoursId: parcours.id_keyword,
+ parcoursSlug: '-' + slugify(parcours.versions[0].title),
+ epigramIndex: index + 1
+ } }">
+ <span class="bg"></span>{{ entity.title }} <sup>{{ index + 1 | romanize }}</sup>
+ </router-link>
+ </h3>
+ <!--
+ <index-nav v-bind:list-items="parcours.entities"
+ v-bind:item-id="parcoursId"
+ v-bind:item-slug="'-' + slugify(parcours.versions[0].title)"
+ route-name="parcoursSingle"
+ ></index-nav>
+ -->
+ </div>
</div>
</div>
</div>
</div>
- <div v-else class="notExist">
+
+ <div v-else
+ class="notExist">
<p>Le parcours que vous cherchez n'existe pas</p>
<back-btn></back-btn>
</div>
@@ -55,6 +62,7 @@
<script>
import BackBtn from './partials/BackBtn'
+import Loader from './partials/Loader'
import Pagination from './partials/parcours/Pagination'
import Player from './partials/parcours/Player'
import Translation from './partials/parcours/Translation'
@@ -69,6 +77,7 @@ export default {
name: 'ParcoursIndex',
components: {
BackBtn,
+ Loader,
Pagination,
Player,
Translation,
@@ -78,24 +87,32 @@ export default {
IndexNav
},
route: {
- data: function (transition) {
- console.log('route.data', transition)
- transition.next({
- parcours: transition.to.params.themeId - 1,
- epigram: transition.to.params.id - 1
- })
- }
+// data: function (transition) {
+// console.log('route.data', transition)
+// transition.next({
+// parcours: transition.to.params.themeId - 1,
+// epigram: transition.to.params.id - 1
+// })
+// }
},
data () {
return {
parcours: {},
parcoursIndex: 0,
- parcoursId: 0
+ parcoursId: 0,
+ loaded: false
}
},
created: function () {
var self = this
+ self.$nextTick(function () {
+ // ensure elements are in-document
+ // immediately show loader
+
+ $('.loader').fadeIn()
+ })
+
self.$set(self, 'epigramIndex', self.$route.params.epigramIndex)
self.$set(self, 'parcoursId', self.$route.params.parcoursId)
@@ -124,6 +141,14 @@ export default {
}, function (err) {
console.error('Error retrieving parcours', err)
})
+ .finally(function () {
+ // Processing should be finished at this point
+ // Fade the loader out
+ $('.loader').fadeOut()
+
+ console.log('!!!!!! self !!!!!!!', self)
+ $(self.$el).addClass('loaded')
+ })
},
slugify: function (text) {
if (!text) return ''
@@ -183,6 +208,10 @@ $hover: .5s all ease-out
.parcours-index
width: 100%
height: 100%
+
+.content-wrapper
+ width: 100%
+ height: 100%
display: flex
flex-direction: column
@@ -430,6 +459,8 @@ $hover: .5s all ease-out
align-items: center
justify-content: center
position: relative
+ opacity: 0 // fade opacity in
+ transition: opacity .5s
p
font-size: 30px
@@ -438,4 +469,7 @@ $hover: .5s all ease-out
.back-btn
left: 0
+.loaded
+ .notExist
+ opacity: 1
</style>
diff --git a/src/components/ParcoursSingleComponent.vue b/src/components/ParcoursSingleComponent.vue
index 216f003..b95796f 100644
--- a/src/components/ParcoursSingleComponent.vue
+++ b/src/components/ParcoursSingleComponent.vue
@@ -1,113 +1,116 @@
<template>
<div class="parcours-single">
<loader></loader>
- <div class="page-title-container"
- v-if="parcours && parcours.versions">
- <h1>{{ versionLanguage(parcours.versions).title }}</h1>
- </div>
-
- <div class="row"
- v-if="parcours && parcours.versions"
- >
- <div class="col-md-9 col-md-offset-1">
- <div class="inner-links">
- <router-link :to="{ name: 'parcoursIndex', params: { parcoursId: parcoursId, parcoursName: $route.parcoursName } }">
- <span class="dash"></span>
- Sommaire du parcours
- </router-link>
- </div>
- <br>
- <br>
+ <div class="content-wrapper">
+ <div class="page-title-container"
+ v-if="parcours && parcours.versions">
+ <h1>{{ versionLanguage(parcours.versions).title }}</h1>
+ </div>
- <div class="row">
- <div class="col-md-3 col-md-offset-1">
- <translation :epigram="epigram"
- :parcours-title="parcours.versions[0].title"
- ></translation>
+ <div class="row"
+ v-if="parcours && parcours.versions"
+ >
+ <div class="col-md-9 col-md-offset-1">
+ <div class="inner-links">
+ <router-link :to="{ name: 'parcoursIndex', params: { parcoursId: parcoursId, parcoursName: $route.parcoursName } }">
+ <span class="dash"></span>
+ Sommaire du parcours
+ </router-link>
</div>
- <div class="col-md-3 col-md-offset-1">
- <greek-text :epigram="epigram"></greek-text>
- </div>
+ <br>
+ <br>
- <div class="col-md-3">
- <notes :epigram="epigram"></notes>
- </div>
+ <div class="row">
+ <div class="col-md-3 col-md-offset-1">
+ <translation :epigram="epigram"
+ :parcours-title="parcours.versions[0].title"
+ ></translation>
+ </div>
- <div
- v-if="epigram && epigram.imageUrl"
- class="manuscript-image"
- >
- <p @click="showPopin">
- Image du manuscrit
- </p>
- </div>
- </div>
- </div>
+ <div class="col-md-3 col-md-offset-1">
+ <greek-text :epigram="epigram"></greek-text>
+ </div>
- <div class="col-md-1">
- <pagination v-if="parcours.entities"
- :total="parcoursTotal"
- :current="epigramIndex"
- v-on:prev="prev()"
- v-on:next="next()"></pagination>
- </div>
- </div>
+ <div class="col-md-3">
+ <notes :epigram="epigram"></notes>
+ </div>
+ <div
+ v-if="epigram && epigram.imageUrl"
+ class="manuscript-image"
+ >
+ <p @click="showPopin">
+ Image du manuscrit
+ </p>
+ </div>
+ </div>
+ </div>
-<!--
- <div class="">
- <characters :data="epigram"></characters>
+ <div class="col-md-1">
+ <pagination v-if="parcours.entities"
+ :total="parcoursTotal"
+ :current="epigramIndex"
+ v-on:prev="prev()"
+ v-on:next="next()"></pagination>
+ </div>
</div>
--->
- <div class="component--carousel">
- <div v-if="epigram && epigram.externalRef && epigram.externalRef.length">
- <header class="carousel__header">
- <div class="row">
- <div class="col-md-4 col-md-offset-1">
- <div class="text-theme">
- <h3>
- Références
- </h3>
+
+ <!--
+ <div class="">
+ <characters :data="epigram"></characters>
+ </div>
+ -->
+
+ <div class="component--carousel">
+ <div v-if="epigram && epigram.externalRef && epigram.externalRef.length">
+ <header class="carousel__header">
+ <div class="row">
+ <div class="col-md-4 col-md-offset-1">
+ <div class="text-theme">
+ <h3>
+ Références
+ </h3>
+ </div>
</div>
</div>
+ </header>
+ <div class="scroll carousel__container">
+ <article class="carousel__wrapper">
+ <a v-if="epigram"
+ v-for="(ref, index) in epigram.externalRef"
+ class="carousel__item -link"
+ v-on:click="openFancybox(index, $event)"
+ v-bind:href="ref.url"
+ v-bind:data-src="ref.url"
+ v-bind:data-caption="ref.title"
+ >
+ {{ ref.title }}
+ </a>
+ </article>
</div>
- </header>
- <div class="scroll carousel__container">
- <article class="carousel__wrapper">
- <a v-if="epigram"
- v-for="(ref, index) in epigram.externalRef"
- class="carousel__item -link"
- v-on:click="openFancybox(index, $event)"
- v-bind:href="ref.url"
- v-bind:data-src="ref.url"
- v-bind:data-caption="ref.title"
- >
- {{ ref.title }}
- </a>
- </article>
</div>
</div>
- </div>
- <div
- tabindex="0"
- @click="hidePopin"
- @keyup.esc="hidePopin"
- v-if="epigram && epigram.imageUrl"
- class="manuscript-popin"
- >
<div
+ tabindex="0"
@click="hidePopin"
- class="popin-cross-container"
+ @keyup.esc="hidePopin"
+ v-if="epigram && epigram.imageUrl"
+ class="manuscript-popin"
>
- <div class="popin-cross"></div>
+ <div
+ @click="hidePopin"
+ class="popin-cross-container"
+ >
+ <div class="popin-cross"></div>
+ </div>
+ <img v-if="epigram && epigram.imageUrl"
+ :src="epigram.imageUrl"
+ v-bind:alt="epigram.title"
+ >
</div>
- <img v-if="epigram && epigram.imageUrl"
- :src="epigram.imageUrl"
- v-bind:alt="epigram.title"
- >
</div>
</div>
</template>
@@ -116,6 +119,7 @@
import Vue from 'vue'
import BackBtn from './partials/BackBtn'
+import Loader from './partials/Loader'
import Pagination from './partials/parcours/Pagination'
//import Player from './partials/parcours/Player'
import Translation from './partials/parcours/Translation'
@@ -142,6 +146,7 @@ export default {
name: 'ParcoursSingle',
components: {
BackBtn,
+ Loader,
Pagination,
// Player,
Translation,
@@ -169,6 +174,7 @@ export default {
// ensure elements are in-document
// immediately show loader
$('.loader').fadeIn()
+ $('.content-wrapper').css({opacity: 0})
})
self.parcoursId = self.$route.params.parcoursId
@@ -231,6 +237,7 @@ export default {
})
.finally(function () {
$('.loader').fadeOut()
+ $('.content-wrapper').css({opacity: 1})
})
} else {
self.getEpigram()
@@ -371,9 +378,15 @@ $hover: .5s all ease-out
.parcours-single
width: 100%
height: 100%
+
+.content-wrapper
+ width: 100%
+ height: 100%
display: flex
flex-direction: column
- justify-content: space-between
+ justify-content: space-around
+ opacity: 0
+ transition: opacity 1s
.epigram-row
//position: absolute
--
GitLab