Skip to content
This repository was archived by the owner on Sep 11, 2018. It is now read-only.

Commit cf77694

Browse files
author
Claudio Ludovico Panetta
committed
Major update to carousel vue application
This update includes a new revamped carousel system that has been splitted in two different components. The first component is `PhotoGallery` which is the container of the lists of photos from any source. The second component is the `Theater` which has the job of displaying the current selected photo from the photo gallery. Why creating two components? Because one big `Carousel` component was a bit of a mess to maintain and scale, also with the preivous version you have to use both in the same page structure but now they are separated and you can use both as two siblings. How to they communicate? Simple they relay on an external EventDispatcher that wraps a simple vue instance in order to use `$on` end `$emit` events! The code is still far from the perfection. Patch notes: - Fix index.js in order to use the new version - Add Theater.vue Component - Add PhotoGallery.vue component - Fix carousel.js entry point in order to use the new system - Remove Carousel.vue component - Add shared EventDispatcher class
1 parent b474fdf commit cf77694

File tree

6 files changed

+286
-249
lines changed

6 files changed

+286
-249
lines changed

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
<body>
1010
<div id="your-application-id">
1111
<strong>Hello From Vue Carousel</strong>
12-
<carousel source="https://jsonplaceholder.typicode.com/photos?_limit=10"></carousel>
12+
<photo-gallery source="https://jsonplaceholder.typicode.com/photos?_limit=10"></photo-gallery>
13+
<theater></theater>
1314
</div>
1415
<script src="dist/carousel.js"></script>
1516
</body>

‎src/carousel.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1+
require("./shared/EventDispatcher.js");
2+
13
import Vue from "vue";
24
import VueResource from "vue-resource";
3-
import Carousel from "./components/Carousel.vue";
5+
import PhotoGallery from "./components/PhotoGallery.vue";
6+
import Theater from "./components/Theater.vue";
47

58
Vue.use(VueResource);
69
Vue.config.debug = true;
710

811
const carousel = new Vue({
912
el: "#your-application-id",
10-
components: { Carousel },
13+
14+
components: { PhotoGallery, Theater },
1115

1216
mounted() {
1317
// Debug purpose

‎src/components/Carousel.vue‎

Lines changed: 0 additions & 246 deletions
This file was deleted.

‎src/components/PhotoGallery.vue‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template id="photo-gallery">
2+
<div class="PhotoGallery">
3+
<ul class="PhotoGallery__list">
4+
<li class="PhotoGallery__item" v-for="(photo, index) in photos">
5+
<figure class="PhotoGallery__figure image">
6+
<img class="PhotoGallery__image" :src="photo.thumbnailUrl" @click="selectThisPhoto(photo, index)"/>
7+
</figure>
8+
</li>
9+
</ul>
10+
</div>
11+
</template>
12+
<script>
13+
export default {
14+
15+
props: ["source"],
16+
17+
data() {
18+
return {
19+
photos: {},
20+
}
21+
},
22+
23+
mounted() {
24+
25+
window.EventDispatcher.listen("previousPhotoHasBeenRequested", (index) => {
26+
index--;
27+
if (index > 0) {
28+
this.selectThisPhoto(this.photos[index], index);
29+
} else {
30+
this.selectThisPhoto({});
31+
}
32+
});
33+
34+
window.EventDispatcher.listen("nextPhotoHasBeenRequested", (index) => {
35+
index++;
36+
if (index <= this.photos.length - 1) {
37+
this.selectThisPhoto(this.photos[index], index);
38+
} else {
39+
this.selectThisPhoto({});
40+
}
41+
});
42+
43+
this.$http.get(this.source).then((fetchedPhotos) => {
44+
this.photos = fetchedPhotos.data;
45+
}, (response) => {
46+
console.error(response);
47+
});
48+
},
49+
50+
methods: {
51+
52+
selectThisPhoto(photo, index = null) {
53+
54+
if (index !== null) {
55+
photo.index = index;
56+
}
57+
58+
window.EventDispatcher.fire("photoHasBeenSelected", photo);
59+
},
60+
},
61+
}
62+
</script>
63+
64+
<style>
65+
.PhotoGallery {
66+
overflow: hidden;
67+
}
68+
69+
.PhotoGallery__list {
70+
display: flex;
71+
flex-wrap: wrap;
72+
flex-direction: row;
73+
margin: 0;
74+
padding: 0;
75+
}
76+
77+
.PhotoGallery__item {
78+
list-style-type: none;
79+
}
80+
81+
.PhotoGallery__figure {
82+
display: block;
83+
}
84+
85+
.PhotoGallery__image {
86+
display: block;
87+
}
88+
</style>

0 commit comments

Comments
 (0)