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

Commit 109845f

Browse files
author
Claudio Ludovico Panetta
committed
Carousel major update for v0.5.0
This patch brings a lot of new functionality as well as a new import system that helps to easily import the right components as well as the store system inside your Vue application. A new set of components have been implemented for the so awaited comments section! Yes you can attach comments on each photo and display them inside the theater. At the moment the comment section cannot be edited, which means that the comments are in read-only mode. In the future this will be possible. I've also improved the readme section as well as the index.html and I've separated the example from the source file for an easy import inside your application. The road to v1.0.0 is far but we have just marked the v0.5.0 which is half of that Patch notes: - Add the v0.5.0 to Package.json - Change dist name from "carousel.js" to "example.js" in order to separate example from the source - Remove vue instance from carousel.js - Improve import system for distributing the package with npmjs - Add new Comment component - Add new Comments component - Improve Photo component - Improve Theater component DOM tree - Improve Theater component flexbox system - Add comments component to Theater component - Add new moment.js dependency - Improve README and general documentation
1 parent 51c3b9b commit 109845f

File tree

13 files changed

+1610
-530
lines changed

13 files changed

+1610
-530
lines changed

‎CHANGELOG‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,26 @@
22
All notable changes to this project will be documented in this file.
33

44

5+
## [0.5.0]
6+
7+
### Added
8+
- Add new Comment component
9+
- Add new Comments component
10+
- Add comments component to Theater component
11+
- Add new moment.js dependency
12+
13+
### Changed
14+
- Change dist name from "carousel.js" to "example.js" in order to separate example from the source
15+
- Improve import system for distributing the package with npmjs
16+
- Improve Photo component
17+
- Improve Theater component DOM tree
18+
- Improve Theater component flexbox system
19+
- Improve README and general documentation
20+
21+
### Removed
22+
- Remove vue instance from carousel.js
23+
24+
525
## [0.4.3]
626

727
### Added

‎README.md‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,15 @@ In order to use the carousel you have to follow 3 simple steps:
2121

2222
- Install the package from npm `npm install vuejs-carousel --save`
2323
- Go into your Vue main file or main javascript file
24-
- Import the carousel `import {Photo, Photos, Theater} from "vuejs-carousel"`
24+
- Import the carousel `import {store, Photos, Theater} from "vuejs-carousel"`
2525
- Add the component inside your views
2626

2727

28-
2928
## How to use
3029

3130
This carousel is pretty easy to use. Put the source code inside your page:
3231

33-
<script src="dist/carousel.js"></script>
32+
<script src="dist/example.js"></script>
3433

3534
Add the components to your page like the example:
3635

@@ -44,18 +43,26 @@ Try it with a source, for example you can use [Json Placeholder](http://jsonplac
4443

4544
## Configuration
4645

47-
The current state of the component uses an array of `photos` object and it expects this attributes:
46+
The current state of the component uses an array of `photos` objects and it expects this attributes:
4847

49-
- albumId
5048
- id
51-
- thumbnailUrl
52-
- title
53-
- url
49+
- thumbnail
50+
- photo
51+
- name
52+
- body
53+
- created_at
54+
- comments *array*
55+
- id
56+
- name
57+
- body
58+
- created_at
5459

5560
**Be Aware**: If you have a different API structure you have to change the code a little bit in particular
5661
you have to change the attributes of `selectedPhoto` and of `photos`. I will try to make this as dynamic as
5762
possible soon...
5863

64+
The source of the API is provided by [Mockaroo](https://www.mockaroo.com/8e9a75b0)
65+
5966
## Contributing
6067

6168
If you want to contribute to this project issues and pull requests are welcome! In order to get started with the code you should:

‎dist/carousel.js‎

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

‎dist/example.js‎

Lines changed: 1361 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99
</head>
1010
<body>
1111

12-
<div id="your-application-id">
13-
<!-- Header section !-->
12+
<div id="example-application">
1413
<header class="hero is-bold is-medium is-light is-bold">
1514
<div class="hero-head">
1615
<nav class="nav">
@@ -22,7 +21,7 @@
2221
</span>
2322
<div class="nav-left nav-menu">
2423
<span class="nav-item">
25-
<a class="button is-info is-outlined" href="https://github.com/ludo237/vuejs-carousel" target="_blank">
24+
<a class="button is-info is-outlined" href="https://github.com/ludo237/vuejs-carousel" target="_blank" rel="nofollow">
2625
<span class="icon">
2726
<i class="fa fa-github"></i>
2827
</span>
@@ -46,14 +45,13 @@ <h2 class="subtitle">Easy to use VueJS component for Photo galleries, built with
4645
</div>
4746
</header>
4847

49-
<!-- Main section !-->
5048
<section class="section">
5149
<div class="container">
5250
<div class="content">
5351
<h1>VueJs Carousel</h1>
5452
<p>VueJs Carousel is a photo gallery system that has two main components a <code>Photos</code> components that fetches the photos from a json request
5553
and renders them within a list and a <code>Theater</code> component used to display the full size of any selected photo from the gallery. The code is
56-
developed by following <code>ECMA Script 2015 and 2016</code> and is hosted on <strong>Github</strong>. Feel free to try this component and help me
54+
developed by following <code>ECMA Script 2016</code> standards and is hosted on <strong>Github</strong>. Feel free to try this component and help me
5755
improving it by submitting issues or pull requests.</p>
5856

5957
<h2>How to install</h2>
@@ -66,14 +64,13 @@ <h2>How to install</h2>
6664
</ul>
6765

6866
<h2>Live Example</h2>
69-
<p>This live example uses <strong>JSON placeholder</strong> from <strong>typicode</strong> all thumbnails are 150x150 pixels and all the
70-
original images are 600x600 pixels.</p>
71-
<photos source="https://jsonplaceholder.typicode.com/photos?_limit=10"></photos>
67+
<p>This live example uses <strong>JSON array</strong> from <strong>Mockaroo</strong> all thumbnails are 150x150 pixels and all the
68+
original images are 800x600 pixels. You can grab the current JSON schema of the example <a href="https://www.mockaroo.com/8e9a75b0" target="_blank" rel="nofollow">on Mockaroo</a></p>
69+
<photos source="https://www.mockaroo.com/8e9a75b0/download?count=10&key=e2db8d80"></photos>
7270
</div>
7371
</div>
7472
</section>
7573

76-
<!-- Simple footer !-->
7774
<footer class="footer">
7875
<div class="container">
7976
<div class="content has-text-centered">
@@ -83,7 +80,7 @@ <h2>Live Example</h2>
8380
and is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC ANS 4.0</a>.
8481
</p>
8582
<p>
86-
<a class="icon" href="https://github.com/ludo237">
83+
<a class="icon" href="https://github.com/ludo237" target="_blank" rel="nofollow">
8784
<i class="fa fa-github"></i>
8885
</a>
8986
</p>
@@ -93,6 +90,6 @@ <h2>Live Example</h2>
9390
<theater></theater>
9491
</div>
9592

96-
<script src="dist/carousel.js" crossorigin="anonymous"></script>
93+
<script src="dist/example.js" crossorigin="anonymous"></script>
9794
</body>
9895
</html>

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vuejs-carousel",
33
"description": "Complete photo carousel build with VueJS and web standards in mind",
4-
"version": "0.4.3",
4+
"version": "0.5.0",
55
"author": "Claudio Ludovico Panetta <ludovico1990@hotmail.it>",
66
"private": false,
77
"license": "MIT",
@@ -24,6 +24,7 @@
2424
},
2525
"dependencies": {
2626
"axios": "^0.15.3",
27+
"moment": "^2.17.1",
2728
"vue": "^2.1.6",
2829
"vue-resource": "^1.0.3",
2930
"vuex": "^2.1.1"

‎src/carousel.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
1-
import Vue from "vue";
21
import {store} from "./store/store";
32
import Photos from "./components/Photos.vue";
43
import Theater from "./components/Theater.vue";
54

6-
const carousel = new Vue({
7-
el: "#your-application-id",
8-
5+
export {
96
store,
10-
11-
components: {
12-
Photos,
13-
Theater
14-
},
15-
});
7+
Photos,
8+
Theater
9+
}

‎src/components/Comment.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<li class="Comment">
3+
<div class="Comment__header">
4+
<div class="Comment__author">
5+
<figure class="Author__avatar">
6+
<img :src="comment.avatar">
7+
</figure>
8+
<div class="Author__name">
9+
<strong v-text="comment.name"></strong>
10+
</div>
11+
</div>
12+
</div>
13+
<div class="Comment__body">
14+
<p>{{ comment.text}}</p>
15+
<span role="presentation" aria-hidden="true"> · </span>
16+
<small v-text="createdAt"></small>
17+
</div>
18+
</li>
19+
</template>
20+
21+
<script>
22+
import Moment from "moment";
23+
24+
export default{
25+
props: {
26+
comment: {
27+
type: Object,
28+
required: true,
29+
}
30+
},
31+
32+
computed: {
33+
createdAt() {
34+
return Moment(this.comment.created_at).fromNow();
35+
}
36+
}
37+
}
38+
39+
</script>
40+
41+
<style scoped>
42+
.Comment {
43+
align-items: flex-start;
44+
display: flex;
45+
flex-direction: column;
46+
margin-top: 1rem;
47+
}
48+
49+
.Comment__header {
50+
display: flex;
51+
flex-direction: column;
52+
}
53+
54+
.Comment__author {
55+
display: flex;
56+
flex-direction: row;
57+
}
58+
59+
.Author__avatar {
60+
height: 32px;
61+
margin-right: .5rem;
62+
width: 32px;
63+
}
64+
65+
.Author__name {
66+
}
67+
68+
.Comment__body {
69+
text-align: justify;
70+
}
71+
72+
</style>

‎src/components/Comments.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div class="Comments">
3+
<div class="Comments__header">
4+
5+
</div>
6+
<ul class="Comments__list">
7+
<comment v-for="comment in descendantComments" :comment="comment"></comment>
8+
</ul>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import Comment from "./Comment.vue";
14+
15+
export default {
16+
17+
components: {
18+
Comment
19+
},
20+
21+
computed: {
22+
comments() {
23+
return this.$store.getters.selectedPhoto.comments;
24+
},
25+
26+
descendantComments() {
27+
return this.comments.sort((a, b) => {
28+
return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
29+
});
30+
}
31+
},
32+
}
33+
34+
</script>
35+
36+
<style scoped>
37+
.Comments {
38+
background-color: #f6f7f9;
39+
border-top: 1px solid #e1e2e3;
40+
padding: 1.2rem;
41+
}
42+
43+
.Comments_list {
44+
45+
}
46+
47+
</style>

‎src/components/Photo.vue‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<li class="Photo">
33
<figure class="Photo__container">
4-
<img class="Photo__source" :src="thumbnail" @click="selectThisPhoto(photo)"/>
4+
<img class="Photo__source" :src="photo.thumbnail" @click="selectThisPhoto(photo)"/>
55
</figure>
66
</li>
77
</template>
@@ -17,12 +17,6 @@
1717
},
1818
},
1919
20-
computed: {
21-
thumbnail() {
22-
return this.photo.thumbnailUrl;
23-
}
24-
},
25-
2620
methods: {
2721
selectThisPhoto(photo) {
2822
this.$store.commit("changeSelectedPhoto", photo);

0 commit comments

Comments
 (0)