هل هناك حدث يُشغّل عند إعادة تحميل قوائم المواضيع؟

[Johani (Joe)]

@Mittineague

Maybe you could use jQuery ajaxComplete ?

ajaxComplete event | jQuery API Documentation

YES!

That was amazingly helpful @Mittineague

thank you so much!

I ended up using:

$(document).ajaxComplete(function() {
	$(".topic-list").imagesLoaded(function() {
		$(".topic-list")
			.masonry("reloadItems")
			.masonry();
	});
});

and I would have stopped right there, however @angus was kind enough to provide what I believe is a more orthodox / targeted method for doing this in the context of Discourse here:

---

@angus

Another way is to add an observer in the topic-list component that observes topics. and re-runs masonry after render. i.e. something like:

withPluginApi(0.8.16, () api => {
  api.modifyClass('component:topic-list', {
     masonryObserver: function() {
        // update masonry here, probably wrapped in Ember.run.scheduleOnce('afterRender', () => {})
     }.observes('topics.[]')
  })
})

This feels like the right way to go about this, thank you so much @angus

I’m not sure how to go about this part:

probably wrapped in Ember.run.scheduleOnce('afterRender', () => {})

But will read further about Ember Voodoo and try again.

For now here’s what I ended up with based on your generous help and my basic understanding:

<script type="text/discourse-plugin" version="0.8.16">
    api.modifyClass("component:topic-list", {
	    masonryObserver: function() {
	    	$(".topic-list").imagesLoaded(function() {
		    	$(".topic-list")
			    	.masonry("reloadItems")
			    	.masonry();
	    	});
    	}.observes("topics.[]")
    });
</script>

And here’s the result:

https://giant.gfycat.com/FeistyFormalBoa.webm

Thank you so much