Is there an event that fires when topic-lists are reloaded?


(Joe) #1

Excuse the butchered terminology :sunflower:


I’m trying to use masonry in combination with the topic list previews plugin to create a grid topic list like so:

When new items are added to a masonry grid or the topic-list in this case the current items need to be “reshuffled” and resized in some sense so that everything fits.

Masonry handles that with a native function or .layout() which recalculates the grid and arranges the items when called.

In order to make masonry aware of new items or topics being added to the topic list, I would like to trigger .layout() when this is clicked:

So here’s the question.

Is there a native Discourse event that fires when the the link to reload the topic list is clicked that I can bind masonry to?


(Mittineague) #2

Maybe you could use jQuery ajaxComplete ?

http://api.jquery.com/ajaxcomplete/


DEPRECATED: Discourse masonry gallery theme component
(Angus McLeod) #3

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.[]')
  })
})

(Joe) #4

YES! :grin::champagne::boom:

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:


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

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. :sweat_smile:

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:

Thank you so much :heart: