No internet connection
  1. Home
  2. Issues

Is there a way to detect page loaded event when navigating topics

By Sandor Turanszky @sandorTuranszky2019-04-07 10:58:35.734Z

I have a custom JS code that adds a link text when a page is loaded.
On full page load, I can listen to the DOMContentLoaded event, but when it comes to navigating, none of the browser history events is fired therefore I need to listen to all clicks events, filter links and rely on setTimeout which is a very hacky solution.

Maybe there is a hook that I can use to make changes to the page when it is loaded. In the dev console, I can see:

Loading page: /-22/is-nodejs-a-programming-language [TyMLDPG]
Done loading /-22/is-nodejs-a-programming-language, updating store...
Done updating store.

so the Done updating store seems to be what I need. Any suggestion, please?

Solved in post #4, click to view
  • 7 replies
  1. KajMagnus @KajMagnus2019-04-08 06:23:13.780Z

    This isn't really supported currently, however, there's this hack you can do: (and the below function, loadPageJson, is the one that logs the message you noticed)

    debiki2.Server.loadPageJson = function(path, origOnDone) {
      origLoadPageJson(path, function(response) {
        origOnDone(response);
        // setTimeout so your code won't run until after page updated.
        setTimeout(function() { console.log("*** Loaded new page: " + path + ", your own code here ***"); });
      });
    }
    

    This monkey-patches the function that loads new pages, and runs your own code, after the new JSON has been loaded and the page updated.

    However this is fragile. The name debiki2 is old, it'll change to maybe talkyard, and then your code will break. Also, it'll break if I change the internal implementation of loadPageJson. Or some time in the distant future, when json is cached, browser side, and not always loaded from the server.

    This could perhaps work, though, as a temporary hack? And then maybe there could be an officially supported callback, for navigation events?

    An alternative could be to monkey-patch history.pushState:

    var origPushState = history.pushState;
    history.pushState = function() {
      console.log("Loading new page, arguments: " + JSON.stringify(arguments));
      origPushState.apply(history, arguments);
    };
    

    However pushState happens before the JSON for the new page has been loaded and the new page actually shown.


    What's your use case?

    JS code that adds a link text when a page is loaded

    Maybe you'd like to post a screenshot? I'm having a hard time imagining how this looks / works :- )

    1. SSandor Turanszky @sandorTuranszky2019-04-08 06:36:55.671Z

      Here is the screenshot

      So what I am doing is adding an "Upvote" text to make it clear what the icon button does as I want people to upvote topics. The more clear it is the better :)

      The ideal would be to have an official callback. Until then it makes little sense to implement hacky solutions because I will clearly point out to users that they need to upvote questions. I will add an image and it is going to be very confusing if at some point the image will look different from what they actually see. So I'd rather explain using the existing look and feel.

      Maybe it is easier to customize text (and maybe the icon) for some links through settings. But it has a limited use case though.

      1. KajMagnus @KajMagnus2019-04-08 07:26:05.701Z

        Thanks for the explanation. This can be done with CSS:

        .dw-p-as .icon-heart::after {
            content: "Upvote";
            color: hsl(0, 0%, 37%);
            margin-left: 5px;
            opacity: 1;
        }
        

        results in:

        ReplySolution
        1. SSandor Turanszky @sandorTuranszky2019-04-08 07:32:46.914Z

          You are right, this a good solution!

      2. In reply toKajMagnus:
        SSuspended Reason @suspendedreason2021-02-20 22:27:10.875Z

        Hi Kaj,

        I'm hoping to add some functionality and having access to the page change + content loaded event listeners is necessary. Getting an error that the origLoadPageJson function isn't defined. Have you changed the naming scheme, or is there a new way to hook in to this event?

        (Short synopsis of the feature I'm attempting to add—I've built a RegExp function that takes the top-level post and all child comments, searches for any blockquotes in the children, and checks them against the top-level post to see if they're quoting it. If they are, the function alters the HTML of the top-level post with <mark> tags and a link, so that, much like Google Docs, users can interact with specific lines of text and see which lines are being commented on. Backlinks to blockquotes, more or less. All the text-editing functionality runs fine, but I'm struggling to use the

        1. KajMagnus @KajMagnus2021-02-22 19:20:26.343Z2021-02-22 19:36:20.633Z

          Hi @suspendedreason , I don't immediately remember — likely it's gotten renamed or removed. I can check the Git commit log.

          Edit: There isn't any origLoadPageJson in Talkyard — only Server.loadPageJson, which you can monkey patch with your own — and then remember the original version in origLoadPageJson, and call it, from your monkey patched function.
          See this Q&A at StackOverflow: How can I cleanly monkey patch a function in Javascript?
          /Edit

          users can interact with specific lines of text and see which lines are being commented on [...] Backlinks to blockquotes

          Wow that's cool

          Interesting way to go about implementing that. Maybe this functionality could even be built-in, in Talkyard. (And later migrated to a plugin, once there're support for plugins.)

          What if you post some code showing how you've built the feature? Would it be weird if you then also licensed the code under MIT and Apache2, or if you agree to the CLA, then maybe I could copy-paste the code into Talkyard and maintain it for you.
          (But this is not a promise o.O just maybe.)
          Or at least I can see what the code does, and try to avoid breaking it, in the future. Maybe create an official hook.

          Could you please then open a different topic about that?

          B.t.w. Talkyard uses https://github.com/google/diff-match-patch which, given a search string, can: "find its best fuzzy match in a block of plain text. Weighted for both accuracy and location." — Could work, also if the referenced part of the orig post got edited a little bit. Whereas a regex would "break"?

          1. SSuspended Reason @suspendedreason2021-02-23 00:03:05.652Z2021-02-23 10:42:59.323Z

            Hey Kaj! Thanks for the thorough response. I'll make a separate thread so we can continue chatting about this.

            [Edit, by KajMagnus: Here it is: Line edits &amp; quote backlinks /Edit]