Help with client side event


#1

The following code added to </head> in the admin panel allows me to manipulate topics (post views) after they have finished rendering.

<script>

    var postView = require('discourse/views/post').default;

    postView.reopen({
          
          didInsertElement : function(){
            this._super();
            Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
          },
          
          afterRenderEvent : function(){
            // implement this hook in your own subclasses and run your jQuery logic there
             
             console.log(" >> post view rendered");

          }
    }); 
   
</script>

I'd like to do the same with the category view on the categories page -

I’ve tried to find the correct view name using Ember Inspector, but the only view I can hook into on the categories page is application. Not sure if my terminology is correct there, so let’s say I don’t know what the following string should be if it were modified to allow me to capture the afterRenderEvent for categories (as in the above example for posts/topics).

var postView = require('discourse/views/post').default;

I suspect all the child category views would need to render to the DOM first so maybe the problem is a little more complex than I am assuming.

Why do I need to do this?

The following categories on my material design skin need to be packed together to get the effect you see below. I can’t reliably find when they’ve finished rendering so that I can call the packing routine. A page refresh (doc ready) works fine, but not when categories are loaded using Ember magic (eg clicking on the category link whilst viewing new topics.)

Any help or pointers would be very much appreciated.

Code and CSS will be shared with meta once I have cracked these final few issues.


#2

To make this easier to answer -

Can anybody help me hook into an event on the client that is fired when the area in red, including child views, has finished rendering?


Making an entire td link while having a different link within (JQuery)
(Dean Taylor) #3

Probably not exactly what you want - but the following might be of interest to you:

var PageTracker = require('discourse/lib/page-tracker').default;
PageTracker.current().on('change', function (url) {
    // You may not need the timeout depending on exactly what you are doing.
    setTimeout(function () {
        updatePageContentHere();
    }, 100);
});

Equivalent to document ready
#4

Thanks @DeanMarkTaylor. I’ve been using that routine (I think from something I saw you or @zogstrip posted before…), although noted that sometimes it fires quite a time after the page has loaded.

In the meantime I’ve managed to track down the view I wanted simply by rendering all view objects to dev tools and interrogating each one. I tried discovery.categories, discovery/categories, discoveryCategories etc, until finally saw that a dash was needed: discovery-categories:

var catView = require('discourse/views/discovery-categories').default;

    catView.reopen({
          
          didInsertElement : function(){
            this._super();
            Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
          },
          
          afterRenderEvent : function(){
           
             console.log("Cat view rendered");
            console.dir(this); //check out the view object too
            
          }
    }); 

But it appears that the view can be inserted into the DOM before all child views have been rendered (IIUIC off the back of promises ). So I will probably need to check all children too, else the categories I am packing won’t always be rendered before I call my packing routine.

Not sure if Discourse or Ember for that matter maintains a manifest of subviews - given these probably aren’t known to the application until they are discovered at run time.

A steep learning curve.

Thanks for your help (again).