Feature: Render pins by ourself without help of third-party's help

pinry/static/js/vue/main.js

@@ -1,9 +1,9 @@
 
 function fetchPins(offset) {
-  var apiUrl = API_BASE + 'pins/?format=json&ordering=-id&limit=50&offset='+String(offset);
+    var apiUrl = API_BASE + 'pins/?format=json&ordering=-id&limit=50&offset='+String(offset);
-  if (tagFilter) apiUrl = apiUrl + '&tags__name=' + tagFilter;
+    if (tagFilter) apiUrl = apiUrl + '&tags__name=' + tagFilter;
-  if (userFilter) apiUrl = apiUrl + '&submitter__username=' + userFilter;
+    if (userFilter) apiUrl = apiUrl + '&submitter__username=' + userFilter;
-  return axios.get(apiUrl)
+    return axios.get(apiUrl)
 }
 
 Vue.component('pin', {
@@ -18,9 +18,11 @@ Vue.component('pin', {
   props: ['pin'],
   template: '#pin-template',
   methods: {
+    getInlineStyle: function() {
+      return {};
+    },
     onImageLoad: function () {
       this.loaded = true;
-      this.$emit("resize", this.getTextHeight());
     },
     getAvatar: function () {
       return "//gravatar.com/avatar/" + this.pin.submitter.gravatar;
@@ -40,31 +42,45 @@ Vue.component('pin', {
 });
 
 
-var app = new Vue({
+Vue.component('pin-container', {
-  el: '#app',
+  data: function () {
-  components: {
-    'waterfall': Waterfall.waterfall,
-    'waterfall-slot': Waterfall.waterfallSlot,
-  },
-  data() {
     return {
-      pins: [],
+        "windowWidth": null,
-      loading: true,
+        "blockWidth": "240px",
-    }
+        "blockMargin": "240px",
+        "pins": [],
+    };
   },
-  methods: {
+  template: "#pin-container-template",
-    getInitialPins: function () {
+  created: function() {
+      this.$emit("loading");
       var self = this;
       var offset = 0;
       fetchPins(offset).then(
         function (res) {
           self.pins = res.data.results;
-          self.loading = false;
+          self.$emit(
-        }
+            "loaded",
+          );
+        },
       );
-    },
+  },
-  },
+});
-  created: function () {
+
-    this.getInitialPins();
+
+var app = new Vue({
+  el: '#app',
+  data() {
+    return {
+      loading: true,
+    }
+  },
+  methods: {
+    onLoaded: function(){
+      this.loading = false;
+    },
+    onLoading: function(){
+      this.loading = true;
+    },
   },
 });

pinry/templates/base.html

@@ -109,7 +109,6 @@
         <script src="https://unpkg.com/dropzone@4.3.0/dist/min/dropzone.min.js"></script>
         {% compress js %}
             <script src="{% static "js/helpers.js" %}"></script>
-            <script src="{% static "js/vendors/vue-waterfall.min.js" %}"></script>
             <script src="{% static "js/vue/main.js" %}"></script>
         {% endcompress %}
         {% compress js inline %}

pinry/templates/core/pins.html

@@ -1,8 +1,7 @@
 {% extends "base.html" %}
 
 {% block yield %}
-    <div id="pins">
+    <pin-container v-on:loaded="onLoaded()" v-on:loading="onLoading()">
-      {% include "includes/vue-pins.html" %}
+    </pin-container>
-    </div>
     <div v-show="loading" class="spinner"></div>
 {% endblock %}

pinry/templates/includes/vue-pin.html

@@ -1,6 +1,16 @@
 {% verbatim %}
+
+<script type="text/x-template" id="pin-container-template">
+  <div>
+    <template v-for="item in pins">
+      <pin :pin="item"></pin>
+    </template>
+  </div>
+
+</script>
+
 <script type="text/x-template" id="pin-template">
-    <div class="pin" :class="{ 'fake-hide': !loaded }" v-on:mouseover="active = true" v-on:mouseleave="active = false">
+    <div :style="getInlineStyle()" class="pin" :class="{ 'fake-hide': !loaded }" v-on:mouseover="active = true" v-on:mouseleave="active = false">
       <transition name="fade">
         <div class="editor" v-show="active">
           <div class="borderable">

pinry/templates/includes/vue-pins.html

@@ -1,16 +0,0 @@
-{% verbatim %}
-
-<waterfall :line-gap="240" :line="'v'" :watch="pins" :fixed-height="false">
-  <!-- each component is wrapped by a waterfall slot -->
-  <waterfall-slot
-    v-for="(item, index) in pins"
-    :width="item.image.thumbnail.width"
-    :height="item.image.thumbnail.height"
-    :order="index"
-    :key="item.id"
-  >
-    <pin :pin="item" v-on:resize="function(height){item.image.thumbnail.height = height;}"></pin>
-  </waterfall-slot>
-</waterfall>
-
-{% endverbatim %}