Feature: Closing for pin-preview works well with auto-close

pinry/static/js/vue/main.js

@@ -2,7 +2,10 @@ var events = new Vue({});
 var eventsName = {
   pinReflowDone: "single-pin-reflow-done",
   allPinReflowDone: "all-pin-reflow-done",
-  viewPin: "view-single-pin"
+  pinView: {
+    open: "view-single-pin",
+    close: "close-pin-view",
+  },
 };
 
 function fetchPins(offset) {
@@ -133,7 +136,6 @@ Vue.component(
       var windowHeight = utils.getWindowHeight();
       var backgroundHeight = documentHeight;
       var lightBoxWrapperStyle = {
-        'height': imageHeight + 'px',
         'width': imageWidth + "px",
         'marginTop': '80px',
         'marginBottom': '80px',
@@ -152,6 +154,11 @@ Vue.component(
         height: imageHeight + 'px',
       };
       this.lightBoxWrapperStyle = lightBoxWrapperStyle;
+    },
+    methods: {
+      onCloseView: function() {
+        events.$emit(eventsName.pinView.close);
+      }
     }
   }
 );
@@ -186,7 +193,7 @@ Vue.component('pin', {
   },
   methods: {
     showImageDetail: function(event) {
-      events.$emit(eventsName.viewPin, this.pin);
+      events.$emit(eventsName.pinView.open, this.pin);
       if (event) event.preventDefault();
     },
     reflow: function() {
@@ -424,14 +431,21 @@ var app = new Vue({
   },
   created: function() {
     events.$on(
-      eventsName.viewPin,
+      eventsName.pinView.open,
       this.onViewPin,
     );
+    events.$on(
+      eventsName.pinView.close,
+      this.onClosePin,
+    );
   },
   methods: {
     onViewPin: function(pin) {
       this.currentPin = pin;
     },
+    onClosePin: function(pin) {
+      this.currentPin = null;
+    },
     onLoaded: function(){
       this.loading = false;
     },

pinry/templates/includes/lightbox-vue.html

@@ -1,7 +1,7 @@
 {% verbatim %}
     <script id="lightbox-template" type="text/x-template">
       <transition name="fade">
-        <div class="lightbox-background" :style="backgroundStyle">
+        <div class="lightbox-background" :style="backgroundStyle" v-on:click.self="onCloseView()">
             <div class="lightbox-wrapper" :style="lightBoxWrapperStyle">
                 <div class="lightbox-image-wrapper" :style="lightBoxImageWrapperStyle">
                     <img class="lightbox-image" :src="pin.image.image" />