diff --git a/pinry/static/js/vue/main.js b/pinry/static/js/vue/main.js index 45fdb55..0ca9a20 100644 --- a/pinry/static/js/vue/main.js +++ b/pinry/static/js/vue/main.js @@ -1,4 +1,8 @@ var events = new Vue({}); +var eventsName = { + pinReflowDone: "single-pin-reflow-done", + allPinReflowDone: "all-pin-reflow-done", +}; function fetchPins(offset) { var apiUrl = API_BASE + 'pins/?format=json&ordering=-id&limit=50&offset='+String(offset); @@ -7,6 +11,36 @@ function fetchPins(offset) { return axios.get(apiUrl) } +function EventCounter(countEvent, triggerEvent, triggerTimes) { + + var self = { + id: new Date().getTime(), + count: 0, + targetCount: triggerTimes, + triggerEvent: countEvent, + countEvent: countEvent, + }; + events.$on( + countEvent, + function() { + self.count += 1; + console.log(self.id, self.count); + if (self.count >= self.targetCount) { + events.$emit(triggerEvent) + } + } + ); + self.resetAfterReflow = function (targetCount) { + self.count = 0; + self.targetCount = targetCount; + }; + self.reset = function (targetCount) { + self.targetCount = targetCount; + }; + + return self; +} + function HeightTable(blockMargin) { var self = { @@ -83,6 +117,7 @@ Vue.component('pin', { this.imageStyle = this.getImageStyle(); this.pinStyle = this.getPinStyle(); this.height = this.getTextHeight() + this.pin.image.thumbnail.height; + events.$emit(eventsName.pinReflowDone); }, getImageStyle: function() { return { @@ -156,7 +191,7 @@ Vue.component('pin-container', { }, "pins": [], "heightTable": [], - "counter": 0, + "counter": null, status: { loading: true, hasNext: true, @@ -173,17 +208,28 @@ Vue.component('pin-container', { self.reflow(); }); self.bindScrollHandler(); + self.counter = EventCounter( + eventsName.pinReflowDone, + eventsName.allPinReflowDone, + self.pins.length, + ); + events.$on(eventsName.allPinReflowDone, this.updateContainerStyle); }, mounted: function() { this.reflow(); }, methods: { + updateContainerStyle: function() { + + }, loadMore() { var self = this; self.markAsLoading(); fetchPins(self.status.offset).then( function (res) { - self.pins = self.pins.concat(res.data.results); + var newPins = self.pins.concat(res.data.results); + self.counter.reset(self.pins.length); + self.pins = newPins; self.status.offset += res.data.results.length; if (res.data.next === null) { self.markAsLoaded(false); @@ -245,6 +291,7 @@ Vue.component('pin-container', { this.heightTable.set(childArg.index, childArg.height); }, reflow: function() { + this.counter.resetAfterReflow(self.pins.length); this.updateArguments(); events.$emit("reflow"); },