Improve the way theater changes photos

This patch brings a new and improved way to navigate between photos.

Previously each time you reach the end or the beginning of the gallery the Theater just vanish  automatically and this wasn't intented at all!

What I want instead is that the gallery never close unless the user clicks on the "x" button or press escape or whatever.

In order to accomplish this I implemented two new mutations and remove the "change index logic" from the theater itself which should not be aware of the index change anyway.

I also fix the undefined error on "changeSelectedPhoto" finally!

Author: Claudio Ludovico Panetta

src/components/Theater.vue

@@ -62,13 +62,11 @@
 
         methods: {
             previousPhoto() {
-                let photo = this.$store.getters.photos[this.photoIndex - 1];
-                this.$store.commit("changeSelectedPhoto", photo);
+                this.$store.commit("previousPhotoOfIndex", this.photoIndex - 1);
             },
 
             nextPhoto() {
-                let photo = this.$store.getters.photos[this.photoIndex + 1];
-                this.$store.commit("changeSelectedPhoto", photo);
+                this.$store.commit("nextPhotoOfIndex", this.photoIndex + 1);
             },
 
             closeTheater() {
@@ -79,7 +77,7 @@
     }
 </script>
 
-<style>
+<style scoped>
 .Theater {
     position: fixed;
     top: 0;

src/store/mutations.js

@@ -1,9 +1,50 @@
 export const mutations = {
+
+    /**
+     * Write the photos inside the Vuex store
+     * so we can use them
+     * 
+     * @param state
+     * @param {Array} photos
+     */
     writePhotos(state, photos) {
         state.photos = photos;
     },
 
+    /**
+     * Change the current photo on the theater if
+     * exists otherwise we set the current photo to 
+     * an empty object and the theater will close automatically
+     * 
+     * @param state
+     * @param {Object} photo
+     */
     changeSelectedPhoto(state, photo) {
-        state.selectedPhoto = ((photo !== undefined || photo !== null) && Object.keys(photo).length > 0) ? photo : {};
+        state.selectedPhoto = ((photo !== undefined && photo !== null) && Object.keys(photo).length > 0) ? photo : {};
+    },
+
+    /**
+     * If the index is equal to -1 we need to get the last photo of the gallery
+     * so we can create that chain effect that we want instead of closing
+     * the theater which is not intended at the moment.
+     * 
+     * @param state
+     * @param {number} index
+     */
+    previousPhotoOfIndex(state, index) {
+        index = (index + 1 === 0) ? state.photos.length - 1 : index;
+        state.selectedPhoto = state.photos[index];   
+    },
+
+    /**
+     * If we reach the latest element of the array we want to go back to the first one
+     * creating the second part of the chain for the photo gallery.
+     * 
+     * @param state
+     * @param {number} index
+     */
+    nextPhotoOfIndex(state, index) {
+        index = (index - state.photos.length === 0) ? 0 : index;
+        state.selectedPhoto = state.photos[index];
     }
 };