Optimization update for v0.4

This update brings a lot of optimizations needed in order to create a scalable carousel for the future and thus we need to bump the version up because it's a major change.

First thing first we tried to set a standard for the code itself with good identation across all files.

We decouple the Photos component by splitting the component in two entities:

- Photos is a general container and it should not be responsible of the Photo itself and his behaviours
- Photo is a single photo component which is  responsible of controlling the single photo loaded from the source.

We also optimize the theater by removing the index as parameter because we can fetch it from the vuex itself, we don't need to pass index as a separate parameter anymore.

We have sone some small changes on the Vuex store that introduce some new getters and an optimized `changeSelectedPhoto` mutation.

Author: Claudio Ludovico Panetta

dist/carousel.js

@@ -36,7 +36,11 @@
 
             <div class="hero-body">
                 <div class="container has-text-centered">
-                    <h1 class="title">VueJs Carousel <small><img src="https://img.shields.io/npm/v/vuejs-carousel.svg" alt="VueJs Version"></small></h1>
+                    <h1 class="title">
+                        <span>VueJs Carousel</span>
+                        <small><img src="https://img.shields.io/npm/v/vuejs-carousel.svg" alt="VueJs Version"></small>
+                        <small><img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Part of Awesome VueJs"></small>
+                    </h1>
                     <h2 class="subtitle">Easy to use VueJS component for Photo galleries, built with VueJS and web standards in mind</h2>
                 </div>
             </div>

index.html

@@ -1,7 +1,7 @@
 {
   "name": "vuejs-carousel",
   "description": "Complete photo carousel build with VueJS and web standards in mind",
-  "version": "0.3.1",
+  "version": "0.4",
   "author": "Claudio Ludovico Panetta <ludovico1990@hotmail.it>",
   "private": false,
   "license": "MIT",

package.json

@@ -13,7 +13,10 @@ const carousel = new Vue({
 
     store,
 
-    components: {Photos, Theater},
+    components: {
+        Photos,
+        Theater
+    },
 
     mounted() {
         // Debug purpose

src/carousel.js

@@ -0,0 +1,32 @@
+<template>
+    <li class="Photo">
+        <figure class="Photo__container">
+            <img class="Photo__source" :src="thumbnail" @click="selectThisPhoto(photo)"/>
+        </figure>
+    </li>
+</template>
+
+<script>
+    export default {
+        name: "photo",
+
+        props: {
+            photo: {
+                type: Object,
+                required: true
+            },
+        },
+
+        computed: {
+            thumbnail() {
+                return this.photo.thumbnailUrl;
+            }
+        },
+
+        methods: {
+            selectThisPhoto(photo) {
+                this.$store.commit("changeSelectedPhoto", photo);
+            },
+        },
+    }
+</script>

src/components/Photo.vue

@@ -1,19 +1,17 @@
 <template id="photos">
     <ul class="Photos">
-        <li class="Photo" v-for="(photo, index) in photos">
-            <figure class="Photo__container">
-                <img class="Photo__source" :src="photo.thumbnailUrl" @click="selectThisPhoto(photo, index)"/>
-            </figure>
-        </li>
+        <photo v-for="photo in photos" :photo="photo"></photo>
     </ul>
 </template>
 
 <script>
+    import Photo from "./Photo.vue";
+
     export default {
-        name: "Photos",
+        name: "photos",
 
-        props: {
-            source: { Type: String }
+        components: {
+            Photo
         },
 
         computed: {
@@ -22,19 +20,19 @@
             }
         },
 
+        props: {
+            source: {
+                Type: String
+            }
+        },
+
         mounted() {
             this.$http.get(this.source).then((response) => {
                 this.$store.commit("writePhotos", response.data);
             }, (response) => {
                 console.error(response);
             });
         },
-
-        methods: {
-            selectThisPhoto(photo, index) {
-                this.$store.commit("changeSelectedPhoto", {photo, index});
-            },
-        },
     }
 </script>
 
@@ -59,8 +57,4 @@
     display: block;
     max-width: 100%;
 }
-
-
-
-
 </style>

src/components/Photos.vue

@@ -8,12 +8,12 @@
                     </figure>
                     <div class="Theater__commands">
                         <div class="Theater__command">
-                            <a href="#previous" @click.prevent="previousPhoto(selectedPhoto.index)">
+                            <a href="#previous" @click.prevent="previousPhoto()">
                                 <i class="fa fa-fw fa-lg fa-4x fa-angle-double-left" aria-hidden="true"></i>
                             </a>
                         </div>
                         <div class="Theater__command">
-                            <a href="#next" @click.prevent="nextPhoto(selectedPhoto.index)">
+                            <a href="#next" @click.prevent="nextPhoto()">
                                 <i class="fa fa-fw fa-lg fa-4x fa-angle-double-right" aria-hidden="true"></i>
                             </a>
                         </div>
@@ -22,7 +22,7 @@
             </div>
             <div class="Theater__information">
                 <div class="Theater__header">
-                    <h4></h4>
+                    <h4 v-text="selectedPhoto.title"></h4>
                     <div class="Theater__command Theater__command--header">
                         <a href="#close-theater" @click.prevent="closeTheater">
                             <i class="fa fa-fw fa-lg fa-times" aria-hidden="true"></i>
@@ -38,37 +38,13 @@
 
 <script>
     export default {
-        name: "Theater",
+        name: "theater",
 
-        methods: {
-            previousPhoto(index) {
-
-                index--;
-                let payload = {};
-                if (index > 0) {
-                    payload.photo = this.$store.getters.photos[index]
-                    payload.index = index;
-                }
-
-                this.$store.commit("changeSelectedPhoto", payload);
-            },
-
-            nextPhoto(index) {
-                index++;
-                let payload = {};
-                if (index <= this.$store.getters.photos.length - 1) {
-                    payload.photo = this.$store.getters.photos[index]
-                    payload.index = index;
-                }
-                this.$store.commit("changeSelectedPhoto", payload);
-            },
-
-            closeTheater() {
-                this.$store.commit("changeSelectedPhoto", {});
+        computed: {
+            photoIndex() {
+                return this.$store.getters.photoIndex;
             },
-        },
 
-         computed: {
             selectedPhoto() {
                 return this.$store.getters.selectedPhoto;
             },
@@ -83,6 +59,23 @@
                 }
             },
         },
+
+        methods: {
+            previousPhoto() {
+                let photo = this.$store.getters.photos[this.photoIndex - 1];
+                this.$store.commit("changeSelectedPhoto", photo);
+            },
+
+            nextPhoto() {
+                let photo = this.$store.getters.photos[this.photoIndex + 1];
+                this.$store.commit("changeSelectedPhoto", photo);
+            },
+
+            closeTheater() {
+                this.$store.commit("changeSelectedPhoto", {});
+            },
+        },
+
     }
 </script>
 
@@ -172,16 +165,4 @@
 .Theater__command--header > a {
     color: black;
 }
-
-
-
-
-
-
-
-
-
-
-
-
 </style>

src/components/Theater.vue

@@ -31,10 +31,18 @@ export const getters = {
      * "selectedPhoto" state
      *
      * @param state
-     * @param getters
      * @returns {boolean}
      */
-    isPhotoSelected: (state, getters) => {
-        return Object.keys(getters.selectedPhoto).length > 0;
+    isPhotoSelected: (state) => {
+        return Object.keys(state.selectedPhoto).length > 0;
+    },
+
+    /**
+     *
+     * @param state
+     * @returns {number}
+     */
+    photoIndex: state => {
+        return state.photos.indexOf(state.selectedPhoto);
     }
 };

src/store/getters.js

@@ -3,15 +3,7 @@ export const mutations = {
         state.photos = photos;
     },
 
-    changeSelectedPhoto(state, payload) {
-        if (Object.keys(payload).length <= 0) {
-            state.selectedPhoto = {};
-        } else {
-            if ("index" in payload) {
-                payload.photo.index = payload.index;
-            }
-
-            state.selectedPhoto = payload.photo;
-        }
-    },
+    changeSelectedPhoto(state, photo) {
+        state.selectedPhoto = (photo != null && Object.keys(photo).length > 0) ? photo : {};
+    }
 };