Browse Source

Feature: Reflow works in child component

pull/169/head
winkidney 5 years ago
committed by Isaac Bythewood
parent
commit
59d85a40cb
1 changed files with 16 additions and 7 deletions
  1. +16
    -7
      pinry/static/js/vue/main.js

+ 16
- 7
pinry/static/js/vue/main.js View File

@@ -1,3 +1,4 @@
var events = new Vue({});


function fetchPins(offset) { 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);
@@ -66,14 +67,23 @@ Vue.component('pin', {
}, },
props: ['pin', 'args', 'index', 'heightTable'], props: ['pin', 'args', 'index', 'heightTable'],
template: '#pin-template', template: '#pin-template',
created: function() {
var self = this;
events.$on("reflow", function () {
self.reflow();
});
},
mounted: function() { mounted: function() {
this.heightOffset = this.heightTable.getHeightOffset(this.index, this.args.rowSize);
this.imageStyle = this.getImageStyle();
this.pinStyle = this.getPinStyle();
this.height = this.getTextHeight() + this.pin.image.thumbnail.height;
this.reflow();
this.$emit("rendered", {index: this.index, height: this.height}); this.$emit("rendered", {index: this.index, height: this.height});
}, },
methods: { methods: {
reflow: function() {
this.heightOffset = this.heightTable.getHeightOffset(this.index, this.args.rowSize);
this.imageStyle = this.getImageStyle();
this.pinStyle = this.getPinStyle();
this.height = this.getTextHeight() + this.pin.image.thumbnail.height;
},
getImageStyle: function() { getImageStyle: function() {
return { return {
width: this.pin.image.thumbnail.width + 'px', width: this.pin.image.thumbnail.width + 'px',
@@ -127,8 +137,7 @@ Vue.component('pin', {
}, },
getTextHeight: function() { getTextHeight: function() {
var element = this.$el.querySelector(".pin-description"); var element = this.$el.querySelector(".pin-description");
var height = element.getBoundingClientRect().height;
return height
return element.getBoundingClientRect().height;
}, },
} }
}); });
@@ -177,6 +186,7 @@ Vue.component('pin-container', {
}, },
reflow: function() { reflow: function() {
this.updateArguments(); this.updateArguments();
events.$emit("reflow");
}, },
updateArguments: function() { updateArguments: function() {
var blockContainer = this.$el; var blockContainer = this.$el;
@@ -205,7 +215,6 @@ Vue.component('pin-container', {
var func = function() { var func = function() {
if (running) { return; } if (running) { return; }
var now = new Date().getTime(); var now = new Date().getTime();
console.log(now, previousResize, now - previousResize);
if ((now - previousResize) < 200) { if ((now - previousResize) < 200) {
return return
} }


Loading…
Cancel
Save