From a4ecb0c66fa3893be2cd2297c7327628f79041f8 Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Tue, 19 Mar 2019 19:05:28 +0800
Subject: [PATCH] Feature: Add basic framework for light-box-vue

---
 pinry/static/js/vue/main.js                | 39 ++++++++++++++++++++++++++++++
 pinry/templates/base.html                  |  1 +
 pinry/templates/core/pins.html             |  2 ++
 pinry/templates/includes/lightbox-vue.html | 37 ++++++++++++++++++++++++++++
 pinry/templates/includes/lightbox.html     |  4 +--
 pinry/templates/includes/vue-pin.html      |  5 +++-
 6 files changed, 85 insertions(+), 3 deletions(-)
 create mode 100644 pinry/templates/includes/lightbox-vue.html

diff --git a/pinry/static/js/vue/main.js b/pinry/static/js/vue/main.js
index 0ccd52d..e622be5 100644
--- a/pinry/static/js/vue/main.js
+++ b/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;
     },
diff --git a/pinry/templates/base.html b/pinry/templates/base.html
index 76136e0..64ad1a3 100644
--- a/pinry/templates/base.html
+++ b/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 -->
 
diff --git a/pinry/templates/core/pins.html b/pinry/templates/core/pins.html
index 262721e..d3aa77a 100644
--- a/pinry/templates/core/pins.html
+++ b/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 %}
diff --git a/pinry/templates/includes/lightbox-vue.html b/pinry/templates/includes/lightbox-vue.html
new file mode 100644
index 0000000..db97856
--- /dev/null
+++ b/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 %}
diff --git a/pinry/templates/includes/lightbox.html b/pinry/templates/includes/lightbox.html
index ad83737..f4323dc 100644
--- a/pinry/templates/includes/lightbox.html
+++ b/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">
diff --git a/pinry/templates/includes/vue-pin.html b/pinry/templates/includes/vue-pin.html
index 6d5486b..dd5799a 100644
--- a/pinry/templates/includes/vue-pin.html
+++ b/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>