Feature: Add basic framework for light-box-vue

pinry/static/js/vue/main.js

@@ -2,6 +2,7 @@ var events = new Vue({});
 var eventsName = {
   pinReflowDone: "single-pin-reflow-done",
   allPinReflowDone: "all-pin-reflow-done",
+  viewPin: "view-single-pin"
 };
 
 function fetchPins(offset) {
@@ -98,6 +99,30 @@ function HeightTable(blockMargin) {
 }
 
 
+Vue.component(
+  'light-box',
+  {
+    data: function () {
+      return {
+        backgroundStyle: null,
+        lightBoxImageWrapperStyle: null,
+      }
+    },
+    props: ['pin'],
+    template: "#lightbox-template",
+    created: function () {
+      var documentHeight = document.documentElement.getBoundingClientRect().height;
+      this.backgroundStyle = {
+        height: documentHeight + "px",
+      };
+      this.lightBoxImageWrapperStyle = {
+        height: this.pin.image.standard.height + 'px',
+      }
+    }
+  }
+);
+
+
 Vue.component('pin', {
   data: function () {
     return {
@@ -126,6 +151,10 @@ Vue.component('pin', {
     events.$emit(eventsName.pinReflowDone);
   },
   methods: {
+    showImageDetail: function(event) {
+      events.$emit(eventsName.viewPin, this.pin);
+      if (event) event.preventDefault();
+    },
     reflow: function() {
       this.heightOffset = this.heightTable.getHeightOffset(this.index, this.args.rowSize);
       this.imageStyle = this.getImageStyle();
@@ -365,9 +394,19 @@ var app = new Vue({
     return {
       loading: true,
       noMore: false,
+      currentPin: null,
     }
   },
+  created: function() {
+    events.$on(
+      eventsName.viewPin,
+      this.onViewPin,
+    );
+  },
   methods: {
+    onViewPin: function(pin) {
+      this.currentPin = pin;
+    },
     onLoaded: function(){
       this.loading = false;
     },

pinry/templates/base.html

@@ -97,6 +97,7 @@
 
         <!-- Templates -->
         {% include 'includes/vue-pin.html' %}
+        {% include 'includes/lightbox-vue.html' %}
         {% block extra_templates %}{% endblock %}
         <!-- End Templates -->
 

pinry/templates/core/pins.html

@@ -11,4 +11,6 @@
   <template v-if="noMore">
     <div id="the-end">&mdash; End &mdash;</div>
   </template>
+  <light-box v-if="currentPin" :pin="currentPin">
+  </light-box>
 {% endblock %}

pinry/templates/includes/lightbox-vue.html

@@ -0,0 +1,37 @@
+{% verbatim %}
+    <script id="lightbox-template" type="text/x-template">
+        <div class="lightbox-background">
+            <div class="lightbox-wrapper">
+                <div class="lightbox-image-wrapper">
+                    <img class="lightbox-image" src="{{ pin.image.image }}" />
+                </div>
+                <div class="lightbox-data clearfix">
+                  <div class="description" v-if="pin.description">
+                      {{ pin.description }}
+                  </div>
+                  <div class="avatar pull-left">
+                      <img src="//gravatar.com/avatar/{{submitter.gravatar}}.jpg">
+                  </div>
+                  <div class="text pull-left">
+                      <span class="dim">pinned by</span> {{ pin.submitter.username }}
+                      <template v-if="pin.tags">
+                        <br /><span class="dim">in</span>
+                        <template v-for="tag in pin.tags">
+                            <span class="tag">
+                              <a href="/pins/tags/{{ tag }}/" class="btn btn-xs btn-primary">
+                                {{ tag }}
+                              </a>
+                            </span>
+                        </template>
+                      </template>
+                  </div>
+                    <div class="text extra pull-right">
+                        <a href="{{ pin.referer }}" class="btn btn-sm btn-default btn-warning" target="_blank">Referer</a>
+                        <a href="{{ pin.url }}" class="btn btn-sm btn-default btn-primary" target="_blank">Original URL</a>
+                        <a href="/{{ pin.id }}/" class="btn btn-sm btn-default btn-success" target="_blank">Pin URL</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </script>
+{% endverbatim %}

pinry/templates/includes/lightbox.html

@@ -1,8 +1,8 @@
 {% verbatim %}
     <script id="lightbox-template" type="text/x-handlebars-template">
-        <div class="lightbox-background">
+        <div class="lightbox-background" :style="backgroundStyle">
             <div class="lightbox-wrapper">
-                <div class="lightbox-image-wrapper">
+                <div class="lightbox-image-wrapper" :style="lightBoxImageWrapperStyle">
                     <img class="lightbox-image" src="{{image.image}}" />
                 </div>
                 <div class="lightbox-data clearfix">

pinry/templates/includes/vue-pin.html

@@ -33,7 +33,10 @@
         </div>
       </transition>
 
-      <a :href="pin.image.image" class="lightbox" :style="imageStyle">
+      <a :href="pin.image.image"
+         @click="showImageDetail($event)"
+         class="lightbox"
+         :style="imageStyle">
         <div class="image-wrapper">
           <img :src="pin.image.thumbnail.image" v-on:load="onImageLoad">
         </div>