Feature: Implements FadeIn and Fadeout for specified pin

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;
 }

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;
+}

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);
-    };
-})());
-

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: {

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 %}

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 %}

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>