Executing JavaScript on board-activate

[John Weiss]

hi
when i switch from Trello homepage to a board, seems no DOM document or windows event occurs.
How can i capture the event of navigating from homescreen to a board?
thx

[Marty]

Hi John,

I'm not from the Trello team but I would recommend not relying on browser events because they are subject to change.  What are you trying to achieve?

[Iain Dooley]

@John Weiss a pretty simple way to catch this event would be to check the URL every, say, 100ms with a setTimeout. When it changes from /boards/ to /b/whatever then you've navigated from home to a board.

[John Weiss]

many thx! i did consider this, but i was worried that running an always-on timer would be undesirable re performance. Also, i get concerned that something in the mix could break the timer. 

ideally, i'd like to find an event, if possible. There's the click event which brings someone to the board, but there are various things you can click to get to the board. Some of them are on other pages, or are they?

Even tho the url change when you go from homepage to board, i'm wondering if this is really a kind of "one-page" application, that just appears to be navigating between different pages, and that's why you don't get the page load event. 

It seems like it would be good to attach an event to the board becoming visible.  a good element for that seems to be div.board-wrapper. 

this post offers the Mutation Observer event. i'll look into that. There are some other methods on that page, and this page. Just need to figure out which is simplest and best supported. 

Wait, no that won't work. It's not like the board element is always there, and it's visibility changes. It's simply not in the DOM at all, then suddenly it's written to the DOM. So need an event when an element comes into existence :O

i'm guessing the Trello API might offer something, but i could not find it in the doc. 

THX

[Iain Dooley]

@John Weiss If you have a setTimeout firing every 100ms in a Chrome extension I don't think it'll cause any problems. I count vouch for its reliability, but I can't see why it would be a problem. Try running it for a few days and see :)

But yes as far as I know Trello is an SPA so the URL changes are history pushes rather than actual page requests. I can't think of a more reliable way to detect navigation around Trello than polling the URL.

[John Weiss]

I can't think of a more reliable way to detect navigation around Trello than polling

Really? From what i've read, MutationObserver is THE state of the art, for detecting DOM changes.

The simplest and most unsophisticated way was by polling. Using the browser setInterval WebAPI you can set up a task that would periodically check if any changes occurred. Naturally, this method significantly degraded web app/website performance.

MutationObserver is a Web API provided by modern browsers for detecting changes in the DOM.  

https://hashnode.com/post/how-to-track-changes-in-the-dom-using-mutation-observer-cj3gck03s0091jhk9yajr4v9t

Listening to events just seems cleaner, more logical. 

[John Weiss]

Thx .but I've never ever heard that browser events are "unreliable" (except for browser differences) .

True, the DOM spec changes from time to time, but I'm coding for the same web as the rest of the world. Your advice is like saying "don't write JavaScript, browsers are unreliable." 

I'm trying to insert some HTML into the board. Specifically, a slack widget, as there's no integrated chat on Trello .

Thx!

[Marty]

What I mean is not that a browser event itself is unreliable, but the structure of the Trello front-end may change. The elements may change. The framework used to generate the DOM may change. Many frameworks use a shadow DOM.  As you are observing, you can't find an event for a specific DOM object to use as a trigger.  I'm saying that, even if you could find an element and hook into it's events, there is no guarantee that the same element will continue to exist or will fire events when you expect them to.

It turns out that there is a Slack Power Up for Trello: https://blog.trello.com/slack-trello-integration-powerup

If that doesn't do what you would like you could build your own Power Up: https://tech.trello.com/power-up-tutorial-part-one/

There is also a Trello App for Slack: https://blog.trello.com/trello-app-for-slack

I hope that helps!

[John Weiss]

even if you could find an element and hook into it's events, there is no guarantee that the same element will continue to exist. As you are observing, you can't find an event for a specific DOM object to use as a trigger.

Well thx, but your logic appears illogical. You're saying that things can change. True, but that i can't currently find the event is NOT an example of "something changed"  :D

A powerup too can be broken by changes, as can any of the 100+ powerups, the 400+ Chrome Trello extensions, or the 60+ Firefox Trello extensions. 

If the API layer insulates powerups from changes to the underlying structure, GREAT! Do YOU KNOW the API functions related to board-activation? Please don't keep it a secret. 

Building a powerup is way too much trouble, time, and effort. I'm not trying to build, maintain, and publish some big thing for other people to use. Just want to insert a few lines of code. 

I'm guessing you didn't read the Slack integrations you sent me. They do not provide chat functionality for Trello, which as i mentioned is what i need.