Carousel major update for v0.3

This major update includes a bunch of new features as
well as a new redesigned system for storing the current
state of the carousel!

Introducing: Vuex.

With vuex we are now ready to scale this carousel without cluttering
the main components. In fact vuex can be used to store all the current photos
and the selected one, is that cool?

Our components have less code and they don't have to bother anymore with
a complicated share event handler.

We have also done some minor optimization to the infrastructure removing
useless code and refactoring the current one to be more modular.

Patch notes:
- Add a new folder that contains the store system built with Vuex
- Remove the old shared events handler
- Improve the quality of the components with a complete refactor
- Add components name
- Add Type on components properties
- Remove useless spacing inside the files

Author: Claudio Ludovico Panetta

dist/carousel.js

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

package.json

@@ -1,7 +1,7 @@
-require("./shared/EventDispatcher.js");
-
 import Vue from "vue";
 import VueResource from "vue-resource";
+import {store} from "./store/store";
+
 import Photos from "./components/Photos.vue";
 import Theater from "./components/Theater.vue";
 
@@ -11,11 +11,13 @@ Vue.config.debug = true;
 const carousel = new Vue({
     el: "#your-application-id",
 
-    components: { Photos, Theater },
+    store,
+
+    components: {Photos, Theater},
 
     mounted() {
         // Debug purpose
-        if(Vue.config.debug) {
+        if (Vue.config.debug) {
             console.log("Debug is on");
         }
     }

src/carousel.js

@@ -10,51 +10,29 @@
 
 <script>
     export default {
+        name: "Photos",
 
-        props: ["source"],
+        props: {
+            source: { Type: String }
+        },
 
-        data() {
-            return {
-                photos: {},
+        computed: {
+            photos() {
+                return this.$store.getters.photos
             }
         },
 
         mounted() {
-
-            window.EventDispatcher.listen("previousPhotoHasBeenRequested", (index) => {
-                index--;
-                if (index > 0) {
-                    this.selectThisPhoto(this.photos[index], index);
-                } else {
-                    this.selectThisPhoto({});
-                }
-            });
-
-            window.EventDispatcher.listen("nextPhotoHasBeenRequested", (index) => {
-                index++;
-                if (index <= this.photos.length - 1) {
-                    this.selectThisPhoto(this.photos[index], index);
-                } else {
-                    this.selectThisPhoto({});
-                }
-            });
-
-            this.$http.get(this.source).then((fetchedPhotos) => {
-                this.photos = fetchedPhotos.data;
+            this.$http.get(this.source).then((response) => {
+                this.$store.commit("writePhotos", response.data);
             }, (response) => {
                 console.error(response);
             });
         },
 
         methods: {
-
-            selectThisPhoto(photo, index = null) {
-
-                if (index !== null) {
-                    photo.index = index;
-                }
-
-                window.EventDispatcher.fire("photoHasBeenSelected", photo);
+            selectThisPhoto(photo, index) {
+                this.$store.commit("changeSelectedPhoto", {photo, index});
             },
         },
     }
@@ -81,4 +59,8 @@
     display: block;
     max-width: 100%;
 }
-</style>
+
+
+
+
+</style>

src/components/Photos.vue

@@ -22,7 +22,7 @@
             </div>
             <div class="Theater__information">
                 <div class="Theater__header">
-                    <h4>{{ selectedPhoto.of }}</h4>
+                    <h4></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>
@@ -35,56 +35,58 @@
         </div>
     </div>
 </template>
+
 <script>
     export default {
-
-        data() {
-            return {
-                selectedPhoto: {},
-            }
-        },
-
-        mounted() {
-            window.EventDispatcher.listen("photoHasBeenSelected", (photo) => {
-                this.changeSelectedPhoto(photo);
-            });
-        },
+        name: "Theater",
 
         methods: {
+            previousPhoto(index) {
 
-            changeSelectedPhoto(photo) {
-                this.selectedPhoto = photo;
-            },
+                index--;
+                let payload = {};
+                if (index > 0) {
+                    payload.photo = this.$store.getters.photos[index]
+                    payload.index = index;
+                }
 
-            previousPhoto(index) {
-              window.EventDispatcher.fire("previousPhotoHasBeenRequested", index);
+                this.$store.commit("changeSelectedPhoto", payload);
             },
 
             nextPhoto(index) {
-                window.EventDispatcher.fire("nextPhotoHasBeenRequested", 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.changeSelectedPhoto({});
+                this.$store.commit("changeSelectedPhoto", {});
             },
         },
 
-        computed: {
+         computed: {
+            selectedPhoto() {
+                return this.$store.getters.selectedPhoto;
+            },
 
             isPhotoSelected() {
-                return Object.keys(this.selectedPhoto).length !== 0 && this.selectedPhoto.constructor === Object;
+                return this.$store.getters.isPhotoSelected;
             },
 
             isTheaterClose() {
                 return {
                     "Theater--closed": !this.isPhotoSelected,
                 }
             },
-        }
+        },
     }
 </script>
-<style>
 
+<style>
 .Theater {
     position: fixed;
     top: 0;
@@ -170,4 +172,16 @@
 .Theater__command--header > a {
     color: black;
 }
+
+
+
+
+
+
+
+
+
+
+
+
 </style>

src/components/Theater.vue

@@ -0,0 +1,40 @@
+export const getters = {
+
+    /**
+     * Return the current array of
+     * photos from the state property
+     *
+     * It doesn't matter if the array is
+     * empty.
+     *
+     * @param state
+     * @returns {Array}
+     */
+    photos: state => {
+        return state.photos;
+    },
+
+    /**
+     * Return the current selected photo as
+     * an object.
+     *
+     * @param state
+     * @returns {state.selectedPhoto|{}}
+     */
+    selectedPhoto: state => {
+        return state.selectedPhoto;
+    },
+
+    /**
+     * Returns a boolean that determine if there is
+     * a selected photo or an empty object for the
+     * "selectedPhoto" state
+     *
+     * @param state
+     * @param getters
+     * @returns {boolean}
+     */
+    isPhotoSelected: (state, getters) => {
+        return Object.keys(getters.selectedPhoto).length > 0;
+    }
+};

src/shared/EventDispatcher.js

@@ -0,0 +1,17 @@
+export const mutations = {
+    writePhotos(state, photos) {
+        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;
+        }
+    },
+};

src/store/getters.js

@@ -0,0 +1,15 @@
+export const state = {
+
+    /**
+     * Each time a photo is selected from
+     * the gallery this property became a
+     * Photo Object
+     */
+    selectedPhoto: {},
+
+    /**
+     * List of photos available inside
+     * the gallery.
+     */
+    photos: [],
+};

src/store/mutations.js

@@ -0,0 +1,22 @@
+import Vue from "vue";
+import Vuex from "vuex";
+Vue.use(Vuex);
+
+import {state} from "./states";
+import {getters} from "./getters";
+import {mutations} from "./mutations";
+
+/**
+ * Carousel main store
+ *
+ * We are using the Vuex store system because
+ * it easier to keep track of what's happening
+ * between the Photo Gallery and the Theater
+ *
+ * @type {Store}
+ */
+export const store = new Vuex.Store({
+    state,
+    getters,
+    mutations,
+});