From 01bac724d6e7195fb8337b689e67463c0fd4e0a1 Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Mon, 25 Feb 2019 19:06:52 +0800
Subject: [PATCH] Feature: Implements FadeIn and Fadeout for specified pin

---
 pinry/static/css/pinry.css             |  1 -
 pinry/static/css/vue-pin.css           |  7 +++++++
 pinry/static/js/helpers.js             | 12 ------------
 pinry/static/js/vue/main.js            | 14 ++++++++++++++
 pinry/templates/base.html              |  6 ++----
 pinry/templates/includes/vue-pin.html  |  9 +++++++++
 pinry/templates/includes/vue-pins.html |  4 ++--
 7 files changed, 34 insertions(+), 19 deletions(-)
 create mode 100644 pinry/static/css/vue-pin.css
 create mode 100644 pinry/templates/includes/vue-pin.html

diff --git a/pinry/static/css/pinry.css b/pinry/static/css/pinry.css
index 935edfe..b3517bc 100644
--- a/pinry/static/css/pinry.css
+++ b/pinry/static/css/pinry.css
@@ -185,7 +185,6 @@ textarea {
     -webkit-box-shadow: 0 1px 0 #bbb;
        -moz-box-shadow: 0 1px 0 #bbb;
             box-shadow: 0 1px 0 #bbb;
-    display: none;
     position: absolute;
     width: 240px;
 }
diff --git a/pinry/static/css/vue-pin.css b/pinry/static/css/vue-pin.css
new file mode 100644
index 0000000..5c70559
--- /dev/null
+++ b/pinry/static/css/vue-pin.css
@@ -0,0 +1,7 @@
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .3s;
+}
+
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
diff --git a/pinry/static/js/helpers.js b/pinry/static/js/helpers.js
index 3956e1f..2e18ce9 100644
--- a/pinry/static/js/helpers.js
+++ b/pinry/static/js/helpers.js
@@ -87,15 +87,3 @@ function postPinData(data) {
 function getUrlParameter(name) {
     return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
 }
-
-Handlebars.registerHelper('niceLinks', (function () {
-    var reNL = /\r?\n/g,
-        reURL = /https?:[/][/](?:www[.])?([^/]+)(?:[/]([.]?[^\s,.])+)?/g;
-    return function (text) {
-        var t = Handlebars.Utils.escapeExpression(text);
-        t = t.replace(reURL, '<a href="$&" target="_blank">$1</a>');
-        t = t.replace(reNL, '<br>');
-        return new Handlebars.SafeString(t);
-    };
-})());
-
diff --git a/pinry/static/js/vue/main.js b/pinry/static/js/vue/main.js
index 157ab48..a03a2f6 100644
--- a/pinry/static/js/vue/main.js
+++ b/pinry/static/js/vue/main.js
@@ -6,6 +6,20 @@ function fetchPins(offset) {
   return axios.get(apiUrl)
 }
 
+Vue.component('pin', {
+  data: function () {
+    return {'loaded': false}
+  },
+  props: ['pin'],
+  template: '#pin-template',
+  methods: {
+    onImageLoad: function () {
+      this.loaded = true;
+    }
+  }
+});
+
+
 var app = new Vue({
   el: '#app',
   components: {
diff --git a/pinry/templates/base.html b/pinry/templates/base.html
index c34ca69..74fbe9d 100644
--- a/pinry/templates/base.html
+++ b/pinry/templates/base.html
@@ -16,6 +16,7 @@
             <link rel="stylesheet" href="{% static "css/messages.css" %}"/>
             <link rel="stylesheet" href="{% static "css/lightbox.css" %}"/>
             <link rel="stylesheet" href="{% static "css/pinry.css" %}"/>
+            <link rel="stylesheet" href="{% static "css/vue-pin.css" %}"/>
         {%  endcompress %}
         {% compress css inline %}
             {% block extra_css %}{% endblock %}
@@ -95,6 +96,7 @@
         <!-- End Content -->
 
         <!-- Templates -->
+        {% include 'includes/vue-pin.html' %}
         {% block extra_templates %}{% endblock %}
         <!-- End Templates -->
 
@@ -108,10 +110,6 @@
         {% compress js %}
             <script src="{% static "js/helpers.js" %}"></script>
             <script src="{% static "js/vendors/vue-waterfall.min.js" %}"></script>
-{#            <script src="{% static "js/messages.js" %}"></script>#}
-{#            <script src="{% static "js/lightbox.js" %}"></script>#}
-{#            <script src="{% static "js/pinry.js" %}"></script>#}
-{#            <script src="{% static "js/pin-form.js" %}"></script>#}
             <script src="{% static "js/vue/main.js" %}"></script>
         {% endcompress %}
         {% compress js inline %}
diff --git a/pinry/templates/includes/vue-pin.html b/pinry/templates/includes/vue-pin.html
new file mode 100644
index 0000000..a9c4913
--- /dev/null
+++ b/pinry/templates/includes/vue-pin.html
@@ -0,0 +1,9 @@
+{% verbatim %}
+  <script type="text/x-template" id="pin-template">
+    <transition name="fade">
+      <div class="pin pin-wrapper" v-show="loaded">
+        <img :src="pin.image.thumbnail.image" v-on:load="onImageLoad">
+      </div>
+    </transition>
+  </script>
+{% endverbatim %}
diff --git a/pinry/templates/includes/vue-pins.html b/pinry/templates/includes/vue-pins.html
index 770ba1e..2b7d1fb 100644
--- a/pinry/templates/includes/vue-pins.html
+++ b/pinry/templates/includes/vue-pins.html
@@ -1,6 +1,6 @@
 {% verbatim %}
 
-<waterfall :line-gap="200" :watch="pins">
+<waterfall :line-gap="240" :watch="pins">
   <!-- each component is wrapped by a waterfall slot -->
   <waterfall-slot
     v-for="(item, index) in pins"
@@ -9,7 +9,7 @@
     :order="index"
     :key="item.id"
   >
-    <img :src="item.image.thumbnail.image">
+    <pin :pin="item"></pin>
   </waterfall-slot>
 </waterfall>