Dockery/Pinry
1
0
Fork 0
mirror of https://github.com/pinry/pinry.git synced 2025-11-16 09:55:50 +01:00
Code Issues Packages Projects Releases Activity

Feature: Flow by height-offset now works well

Browse Source
This commit is contained in:
winkidney
2019-03-01 16:55:48 +08:00
committed by Isaac Bythewood
parent 44ed242970
commit 6df4a90d8a
2 changed files with 22 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
pinry/static/js/vue/main.js
View File

@@ -30,10 +30,9 @@ function HeightTable(rowSize) {
return 0; return 0;
} }
var height = 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); var value = obj.get(index);
if (value === null) { if (value === null) {
console.log("Get null value for index: " + index);
return null return null
} }
height += value; height += value;
@@ -64,16 +63,17 @@ Vue.component('pin', {
'imageStyle': null, 'imageStyle': null,
'pinStyle': null, 'pinStyle': null,
'height': null, 'height': null,
'heightOffset': null,
} }
}, },
props: ['pin', 'args', 'index', 'heightOffset'], props: ['pin', 'args', 'index', 'heightTable'],
template: '#pin-template', template: '#pin-template',
mounted: function() { mounted: function() {
this.heightOffset = this.heightTable.getHeightOffset(this.index);
this.imageStyle = this.getImageStyle(); this.imageStyle = this.getImageStyle();
this.pinStyle = this.getPinStyle(); this.pinStyle = this.getPinStyle();
this.height = this.getTextHeight(); this.height = this.getTextHeight() + this.pin.image.thumbnail.height;
console.log(this.height); this.$emit("rendered", {index: this.index, height: this.height});
this.$emit("rendered", {index: this.index, height: this.height})
}, },
methods: { methods: {
getImageStyle: function() { getImageStyle: function() {
@@ -112,7 +112,7 @@ Vue.component('pin', {
marginTop = 0; marginTop = 0;
} else { } else {
var lineNumber = getLineNumber(self.args.rowSize, self.index); 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)) { if (isFirstOne(self.args.rowSize, self.index)) {
@@ -140,7 +140,7 @@ Vue.component('pin', {
return "/pins/tags/" + tag + "/" return "/pins/tags/" + tag + "/"
}, },
getTextHeight: function() { getTextHeight: function() {
var element = this.$el; var element = this.$el.querySelector(".pin-description");
var height = element.getBoundingClientRect().height; var height = element.getBoundingClientRect().height;
return height return height
}, },
@@ -165,31 +165,28 @@ Vue.component('pin-container', {
}, },
template: "#pin-container-template", template: "#pin-container-template",
created: function() { created: function() {
this.$emit("loading"); this.heightTable = HeightTable(this.rowSize);
var self = this; this.$emit("loading");
var offset = 0; var self = this;
fetchPins(offset).then( var offset = 0;
function (res) { fetchPins(offset).then(
self.pins = res.data.results; function (res) {
self.$emit( self.pins = res.data.results;
"loaded", self.$emit(
); "loaded",
}, );
); },
);
}, },
mounted: function() { mounted: function() {
this.reflow(); this.reflow();
}, },
updated: function() {
this.reflow();
},
methods: { methods: {
updateChildHeight: function(childArg) { updateChildHeight: function(childArg) {
this.heightTable.set(childArg.index, childArg.height); this.heightTable.set(childArg.index, childArg.height);
}, },
reflow: function() { reflow: function() {
this.updateArguments(); this.updateArguments();
this.heightTable = HeightTable(this.rowSize);
}, },
updateArguments: function() { updateArguments: function() {
var blockContainer = this.$el; var blockContainer = this.$el;

3
pinry/templates/includes/vue-pin.html
View File

@@ -7,6 +7,7 @@
:pin="item" :pin="item"
:index="index" :index="index"
:args="args" :args="args"
:heightTable="heightTable"
v-on:rendered="updateChildHeight" v-on:rendered="updateChildHeight"
></pin> ></pin>
</template> </template>
@@ -38,7 +39,7 @@
</div> </div>
</a> </a>
<div> <div class="pin-description">
<p v-if="pin.description">{{ pin.description }}</p> <p v-if="pin.description">{{ pin.description }}</p>
<div class="pin-footer clearfix"> <div class="pin-footer clearfix">
<div class="avatar pull-left"> <div class="avatar pull-left">