Feature: Initial commit for waterfall component by vue

pinry/static/js/vue/main.js

@@ -0,0 +1,36 @@
+
+function fetchPins(offset) {
+  var apiUrl = API_BASE + 'pins/?format=json&ordering=-id&limit=50&offset='+String(offset);
+  if (tagFilter) apiUrl = apiUrl + '&tags__name=' + tagFilter;
+  if (userFilter) apiUrl = apiUrl + '&submitter__username=' + userFilter;
+  return axios.get(apiUrl)
+}
+
+var app = new Vue({
+  el: '#app',
+  components: {
+    'waterfall': Waterfall.waterfall,
+    'waterfall-slot': Waterfall.waterfallSlot,
+  },
+  data() {
+    return {
+      pins: [],
+      loading: true,
+    }
+  },
+  methods: {
+    getInitialPins: function () {
+      var self = this;
+      var offset = 0;
+      fetchPins(offset).then(
+        function (res) {
+          self.pins = res.data.results;
+          self.loading = false;
+        }
+      );
+    },
+  },
+  created: function () {
+    this.getInitialPins();
+  },
+});

pinry/templates/base.html

@@ -89,28 +89,30 @@
         <!-- End No Script -->
 
         <!-- Content -->
+        <div id="app">
           {% block yield %}{% endblock %}
+        </div>
         <!-- End Content -->
 
         <!-- Templates -->
-        {% include "includes/messages.html" %}
-        {% include "includes/lightbox.html" %}
-        {% include "includes/pins.html" %}
-        {% include "includes/pin_form.html" %}
         {% block extra_templates %}{% endblock %}
         <!-- End Templates -->
 
         <!-- JavaScript -->
+        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="https://unpkg.com/jquery@2.2.4/dist/jquery.min.js"></script>
         <script src="https://unpkg.com/bootstrap@3.3.6/dist/js/bootstrap.min.js"></script>
         <script src="https://unpkg.com/handlebars@4.0.6/dist/handlebars.min.js"></script>
         <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/messages.js" %}"></script>
+            <script src="{% static "js/vendors/vue-waterfall.min.js" %}"></script>
-            <script src="{% static "js/lightbox.js" %}"></script>
+{#            <script src="{% static "js/messages.js" %}"></script>#}
-            <script src="{% static "js/pinry.js" %}"></script>
+{#            <script src="{% static "js/lightbox.js" %}"></script>#}
-            <script src="{% static "js/pin-form.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 %}
             {% block extra_js %}{% endblock %}

pinry/templates/core/pins.html

@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 
 {% block yield %}
-    <div id="pins"></div>
+    <div id="pins">
-    <div class="spinner"></div>
+      {% include "includes/vue-pins.html" %}
+    </div>
+    <div v-show="loading" class="spinner"></div>
 {% endblock %}

pinry/templates/includes/vue-pins.html

@@ -0,0 +1,16 @@
+{% verbatim %}
+
+<waterfall :line-gap="200" :watch="pins">
+  <!-- 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"
+  >
+    <img :src="item.image.thumbnail.image">
+  </waterfall-slot>
+</waterfall>
+
+{% endverbatim %}