From 6df4a90d8ad8fd09f7589f737fdd0986e338e623 Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Fri, 1 Mar 2019 16:55:48 +0800
Subject: [PATCH] Feature: Flow by height-offset now works well

---
 pinry/static/js/vue/main.js           | 43 ++++++++++++++++-------------------
 pinry/templates/includes/vue-pin.html |  3 ++-
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/pinry/static/js/vue/main.js b/pinry/static/js/vue/main.js
index 78f1c6f..5bcf333 100644
--- a/pinry/static/js/vue/main.js
+++ b/pinry/static/js/vue/main.js
@@ -30,10 +30,9 @@ function HeightTable(rowSize) {
       return 0;
     }
     var height = 0;
-    for (var index = 0; index += rowSize; index < indexOfElement) {
+    for (var index = 0; index < indexOfElement; index += rowSize) {
       var value = obj.get(index);
       if (value === null) {
-        console.log("Get null value for index: " + index);
         return null
       }
       height += value;
@@ -64,16 +63,17 @@ Vue.component('pin', {
       'imageStyle': null,
       'pinStyle': null,
       'height': null,
+      'heightOffset': null,
     }
   },
-  props: ['pin', 'args', 'index', 'heightOffset'],
+  props: ['pin', 'args', 'index', 'heightTable'],
   template: '#pin-template',
   mounted: function() {
+    this.heightOffset = this.heightTable.getHeightOffset(this.index);
     this.imageStyle = this.getImageStyle();
     this.pinStyle = this.getPinStyle();
-    this.height = this.getTextHeight();
-    console.log(this.height);
-    this.$emit("rendered", {index: this.index, height: this.height})
+    this.height = this.getTextHeight() + this.pin.image.thumbnail.height;
+    this.$emit("rendered", {index: this.index, height: this.height});
   },
   methods: {
     getImageStyle: function() {
@@ -112,7 +112,7 @@ Vue.component('pin', {
         marginTop = 0;
       } else {
         var lineNumber = getLineNumber(self.args.rowSize, self.index);
-        marginTop = self.args.blockMargin + (self.args.blockMargin + 300) * lineNumber;
+        marginTop = (self.args.blockMargin + self.heightOffset) * lineNumber;
       }
 
       if (isFirstOne(self.args.rowSize, self.index)) {
@@ -140,7 +140,7 @@ Vue.component('pin', {
       return "/pins/tags/" + tag + "/"
     },
     getTextHeight: function() {
-      var element = this.$el;
+      var element = this.$el.querySelector(".pin-description");
       var height = element.getBoundingClientRect().height;
       return height
     },
@@ -165,31 +165,28 @@ Vue.component('pin-container', {
   },
   template: "#pin-container-template",
   created: function() {
-      this.$emit("loading");
-      var self = this;
-      var offset = 0;
-      fetchPins(offset).then(
-        function (res) {
-          self.pins = res.data.results;
-          self.$emit(
-            "loaded",
-          );
-        },
-      );
+    this.heightTable = HeightTable(this.rowSize);
+    this.$emit("loading");
+    var self = this;
+    var offset = 0;
+    fetchPins(offset).then(
+      function (res) {
+        self.pins = res.data.results;
+        self.$emit(
+          "loaded",
+        );
+      },
+    );
   },
   mounted: function() {
     this.reflow();
   },
-  updated: function() {
-    this.reflow();
-  },
   methods: {
     updateChildHeight: function(childArg) {
       this.heightTable.set(childArg.index, childArg.height);
     },
     reflow: function() {
       this.updateArguments();
-      this.heightTable = HeightTable(this.rowSize);
     },
     updateArguments: function() {
       var blockContainer = this.$el;
diff --git a/pinry/templates/includes/vue-pin.html b/pinry/templates/includes/vue-pin.html
index b33eaf3..678f7ff 100644
--- a/pinry/templates/includes/vue-pin.html
+++ b/pinry/templates/includes/vue-pin.html
@@ -7,6 +7,7 @@
           :pin="item"
           :index="index"
           :args="args"
+          :heightTable="heightTable"
           v-on:rendered="updateChildHeight"
       ></pin>
     </template>
@@ -38,7 +39,7 @@
         </div>
       </a>
 
-      <div>
+      <div class="pin-description">
         <p v-if="pin.description">{{ pin.description }}</p>
         <div class="pin-footer clearfix">
           <div class="avatar pull-left">