Recent Thread Summary

[kamipanda]

Is there a way to make the Thread Summary show the most recent posts, rather than the posts for the current page? I've researched the topic and the answer seems to be no, but I figured I should ask first.

If not, I know the forum chooses a Thread Summary based on the page the user was on when they went to reply. Is there a way to feed it a page number to tell it which page to grab posts from? The most I could find on the topic is that a "reply-button" class does some stuff behind the scenes, but I wouldn't know how to go about finding out what that "stuff behind the scenes" is.

[Chris]

When you click the reply button there is an event handler that creates a form in the background on the fly and populates it with the IDs of every post on the page as well as anything that might have been typed into the quick reply then submits it.

SPOILER: Click to show

summary_setup: function(e) {
                var t = []
                  , i = proboards.data("lm_id");
                if (i) {
                    $(".lm-content-" + i + " .item").each(function() {
                        var e = $(this).attr("id").match(/[a-z]-(\d+)/i);
                        try {
                            t.push(e[1])
                        } catch (e) {}
                    });
                    var n = document.createElement("form");
                    n.setAttribute("method", "POST"),
                    n.setAttribute("action", e);
                    for (var o = 0; o < t.length; o++)
                        (a = document.createElement("input")).setAttribute("type", "hidden"),
                        a.setAttribute("name", "summary_ids[]"),
                        a.setAttribute("value", t[o]),
                        n.appendChild(a);
                    var a, e = $('.quick-reply [name="message"]');
                    return e.length && "" != e.val() && ((a = document.createElement("input")).setAttribute("type", "hidden"),
                    a.setAttribute("name", "quick_message"),
                    a.setAttribute("value", e.val()),
                    n.appendChild(a)),
                    (a = document.createElement("input")).setAttribute("type", "hidden"),
                    a.setAttribute("name", "csrf_token"),
                    a.setAttribute("value", proboards.data("csrf_token") || "null"),
                    n.appendChild(a),
                    document.body.appendChild(n),
                    n
                }
            }

<form method="POST" action="/post/new/645592"><input type="hidden" name="summary_ids[]" value="7092942"><input type="hidden" name="summary_ids[]" value="7092952"><input type="hidden" name="summary_ids[]" value="7092954"><input type="hidden" name="summary_ids[]" value="7092960"><input type="hidden" name="summary_ids[]" value="7092972"><input type="hidden" name="summary_ids[]" value="7092996"><input type="hidden" name="summary_ids[]" value="7093002"><input type="hidden" name="summary_ids[]" value="7093018"><input type="hidden" name="summary_ids[]" value="7093086"><input type="hidden" name="summary_ids[]" value="7093186"><input type="hidden" name="summary_ids[]" value="7093216"><input type="hidden" name="summary_ids[]" value="7093300"><input type="hidden" name="summary_ids[]" value="7093356"><input type="hidden" name="summary_ids[]" value="7093382"><input type="hidden" name="summary_ids[]" value="7093410"><input type="hidden" name="csrf_token" value="8trzRgunR8"></form>

...so theoretically the form submission could be intercepted and the summary populated with alternate IDs. The problem of course is how do you know what the post IDs are on a page not currently displayed when all you are given is proboards.dataHash.page.thread.last_post_id

[kamipanda]

Oh, thank you! Hopefully that will help.

Sorry for the questions, I'm still new to this. How would I go about intercepting the form submission? Would I overwrite the summary_setup function, and if so, how?

When middle-clicking the reply button to open the new_post page in a new tab, the Thread Summary defaults to the first page. The same goes for if someone types in the new reply URL manually to get to the page. Is it possible to send a form at that point, or is it too late?

[Chris]

Nov 20, 2021 2:11:07 GMT -8 kamipanda said:

Oh, thank you! Hopefully that will help.

Sorry for the questions, I'm still new to this. How would I go about intercepting the form submission? Would I overwrite the summary_setup function, and if so, how?

When middle-clicking the reply button to open the new_post page in a new tab, the Thread Summary defaults to the first page. The same goes for if someone types in the new reply URL manually to get to the page. Is it possible to send a form at that point, or is it too late?

You're welcome

Since the form is programmatically submitted it won't generate a submit event we could capture so we would need to proxy something that gets called during the process and do any modifications we want there. The summary_setup function would work but an even better injection site would be  targetBlank method which determines if the navigation opens in a new window/tab or the same window/tab. It is better because the form has already been created so we only need to modify it rather than recreate it from scratch.

SPOILER: Click to show

hold CTRL while clicking the reply button to see targetBlank in action (opens in new window/tab), also note that on modern browsers the middle click no longer generates a click event but rather an auxclick event thus making the code in targetBlank outdated since it is still checking for event.which === 2 in a click event (instead of an auxclick event) to identify middle click which is why middle click no longer works properly to send form data for populating the summary page

Proof of concept code:


(function () {
   let t,
   n;
   ((t = jQuery.fn.targetBlank) && (jQuery.fn.targetBlank = function (...arg) {
           if (this.is('form') && (n = this.get(0).elements.namedItem('summary_ids[]'))) {
               /* modify form here */
               n = Array.from(n); //convert to an array
               $(n.slice(1)).remove(); //remove all but first summary_ids
               n[0].value = pb.data('page').thread.last_post_id // set to the last posted id in this thread
           }
           return t.apply(this, arg)

       }))

})()



Once the summary page loads it is too late to submit summary_ids, if you type the URL in manually or middle-click for example then no form data gets submitted to determine the summary_ids so it defaults to first page ids. If you try to resubmit at that point you will run afoul of Proboards Developer Guidelines

[kamipanda]

Right, okay. I get the general gist, it'll take me some time to fully understand it though.

It's unfortunate that it's too late after the page has loaded, though that's what I'd expected. This is enough to be getting on with, anyway. Thanks again for your help!

[Chris]

Nov 23, 2021 11:28:15 GMT -8 kamipanda said:

Right, okay. I get the general gist, it'll take me some time to fully understand it though.

1. 
   

   
   (function () {
       let t,
       n;
       ((t = jQuery.fn.targetBlank) && (jQuery.fn.targetBlank = function (...arg) {
               if (this.is('form') && (n = this.get(0).elements.namedItem('summary_ids[]'))) {
                   /* modify form here */
                   n = Array.from(n); //convert to an array
                   $(n.slice(1)).remove(); //remove all but first summary_ids
                   n[0].value = pb.data('page').thread.last_post_id // set to the last posted id in this thread
               }
               return t.apply(this, arg)
   
           }))
   
   })();
   

   
   
   Code is wrapped in an IIFE to insulate it from conflicting with the multitude of disparate codes generally found in a forum
   

   
   
   

2. 
   (function () {
       let t,
       n;
       ((t = jQuery.fn.targetBlank) && (jQuery.fn.targetBlank = function (...arg) {
               if (this.is('form') && (n = this.get(0).elements.namedItem('summary_ids[]'))) {
                   /* modify form here */
                   n = Array.from(n); //convert to an array
                   $(n.slice(1)).remove(); //remove all but first summary_ids
                   n[0].value = pb.data('page').thread.last_post_id // set to the last posted id in this thread
               }
               return t.apply(this, arg)
   
           }))
   
   })();
   

   
   
   Save the current targetBlank function to variable t then assign our new function that gets called whenever targetBlank gets called which in turn calls the original targetBlank function once it has accomplished what it wanted to do.
   

   
   

3. 
   (function () {
       let t,
       n;
       ((t = jQuery.fn.targetBlank) && (jQuery.fn.targetBlank = function (...arg) {
               if (this.is('form') && (n = this.get(0).elements.namedItem('summary_ids[]'))) {
                   /* modify form here */
                   n = Array.from(n); //convert to an array
                   $(n.slice(1)).remove(); //remove all but first summary_ids
                   n[0].value = pb.data('page').thread.last_post_id // set to the last posted id in this thread
               }
               return t.apply(this, arg)
   
           }))
   
   })();
   

   
   
   Is this my beautiful form?
   Is this my beautiful summary_id?
   
   

4. 
   (function () {
       let t,
       n;
       ((t = jQuery.fn.targetBlank) && (jQuery.fn.targetBlank = function (...arg) {
               if (this.is('form') && (n = this.get(0).elements.namedItem('summary_ids[]'))) {
                   /* modify form here */
                   n = Array.from(n); //convert to an array
                   $(n.slice(1)).remove(); //remove all but first summary_ids
                   n[0].value = pb.data('page').thread.last_post_id // set to the last posted id in this thread
               }
               return t.apply(this, arg)
   
           }))
   
   })();
   

   
   
   Call the original targetBlank so it can do its thing
   
   

[kamipanda]

Ah, part of what confused me was the syntax. A while back you posted code that does something similar (removing the preview tab: support.proboards.com/thread/559848/disable-preview-tab), but there the assignments were sequential statements. This was my first time seeing

((t = jQuery.fn.targetBlank) && (jQuery.fn.targetBlank = function ...))

instead of

t = jQuery.fn.targetBlank;
jQuery.fn.targetBlank = function ...;


Otherwise the explanation definitely helps though, thanks again. I have a much clearer understanding of the sequence of events going on, and such.

[Chris]

That just happens to be a style employed quite a bit in the V5 coding (and the jquery library for that matter) called micro-branching so that is the style I adopted in this case. It is intended to be more concise but with the obvious disadvantage being it is harder to read and follow along until you get used to it.

[kamipanda]

Ah, so it makes it so (jQuery.fn.targetBlank = function e.t.c.) only happens if (t = jQuery.fn.targetBlank) succeeds. Yeah, micro-branching seems useful. I'm learning a lot today!

Though in that case, in what situation would (t = jQuery.fn.targetBlank) fail in the first place?

[Chris]

Nov 24, 2021 11:37:22 GMT -8 kamipanda said:

Ah, so it makes it so (jQuery.fn.targetBlank = function e.t.c.) only happens if (t = jQuery.fn.targetBlank) succeeds. Yeah, micro-branching seems useful. I'm learning a lot today!

Though in that case, in what situation would (t = jQuery.fn.targetBlank) fail in the first place?

When targetBlank does not exist!
If you peruse the jQuery documentation you will not find any mention of a "targetBlank" method which suggests this was added to the jquery prototype by Proboard coders (this and other modifications to the prototype is why importing your own updated jquery library into the forum generally causes issues with the operations of the forum). Should this change in the future the code would gracefully exit. Note that the code relies heavily on the existence of this prototype modification in order to intercept the form so it is important to verify its existence before continuing.

[kamipanda]

Ahh, so it's for future-proofing, that makes sense. I'd been thinking that targetBlank would be available on every route, but that might not always stay true.