Client Side Hooks and Functions


#1

Continuing the discussion from Client-side hooks: Post Create/Edit:

Continuing the discussion from How to select a lot of topics fast?:

Can somebody please tell me which Discourse client side event I should be using to tell when the page has finished updating?

I seem to remember there is also an event that fires when the page changes? That would be helpful too.

On a general note, I appreciate documentation is in a state of flux, but it would be very helpful if there was a single reference, how so ever sparse, of client side hooks and functions.

Whilst taking onboard various comments from the founders that the preferred development route is to enhance Discourse via the plugin route, there are numerous examples where a line or two of jQuery could significantly enhance the user experience.


Material Design Experiments
(Régis Hanol) #2

Can you define “finish updating”? This could mean a lot of different things depending on where you are and what you do.


#3

When the page changes its main content. In some cases I’ve noticed that jQuery’s doc ready is not always fired, presumably because some pages are modified/built using Ajax calls rather than server side round trips. Without knowing that the page has changed, I can’t rebind client side jQuery as in my Material Design example mentioned here:

Sam alluded to the availability of something here:

original post here

So hopefully that explains what I need to know?


#4

I found this code (thanks @rewphus ! ), but in my test there was a small but noticeable delay between the page appearing and this event being fired - which results in the page content flickering if I apply the packing algorithm from within this event. Although I guess I could hide the page content until the packing is applied and then show it…

[quote="rewphus, post:1, topic:28864"]
Discourse.PageTracker.current().on('change', function () {

        $('.list-controls').on('click', '#create-topic', function(){
            $('#create-topic').addClass('create-clicked');
            setTimeout(function() {$('#reply-control').appEvents.trigger("composer:opened");},650);
        });
        
        $('#main').on('click', '.cancel', function(){
            $('#create-topic').removeClass('create-clicked');
            $('#reply-control').addClass('hidden');
            setTimeout(function() {$('#reply-control').removeClass('hidden');},650);
            $('#reply-control').appEvents.trigger("composer:closed");
        });
        
        $('#main').on('click', '.toggler', function(){
            $('#create-topic').removeClass('create-clicked');
            $('#reply-control').addClass('hidden');
            setTimeout(function() {$('#reply-control').removeClass('hidden');},650);
            $('#reply-control').appEvents.trigger("composer:closed");
        });

    });
[/quote]

[Solved] In plugin: opening the composer without changing the route