It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Executing JavaScript on board-activate Edited

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

3 answers

1 vote
Marty Atlassian Team Feb 16, 2019

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?

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 Atlassian Team Feb 16, 2019

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!

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. 

0 votes
Iain Dooley Community Leader Feb 17, 2019

@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.

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 Community Leader Feb 18, 2019

@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.

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. 

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Trello

Develop a new Habit during Lockdown

If you had to thrive a new habit during a lockdown, what would it be? Trello

1,661 views 16 7
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you