← Back to Upcase

Trail bullets implementation question


(Vlad Semkin) #1

Hello guys,
I really like the look and feel of trail bullets / check ins in the trail maps. I tried to understand the implementation by going through the source by searching for ‘trail-bullet’ in the repo, but unfortunately I am not that good at front end stuff yet and there seems to be a lot of going on in the code especially in the ‘topics.js.coffee’ file. Could you please walk me through the trail bullet implementation?

Thanks in advance!

Cheers
Vlad


(Chad Pytel) #2

Hello,

Each bullet is represented by both an actual input checkbox, and the li it is contained in provides the structure and visual style of the bullet listing.

When the page is loaded, a CompletionView is instantiated. This is the class that is responsible for rendering the bullets and updating progress based on them being clicked.

We call fetchCompletions, which takes as an argument, the method to call once the completions are fetches from the server. Completions are the trail items which have been checked off.

In this case, we give it the renderBullets method, and that method is responsible for updating the bullet circles with whether that are checked off or not.

I hope that gets you started, please let me know if you have other questions.

thanks,
-Chad


(Vlad Semkin) #3

Hey Chad,
that cleared things up - thanks a lot!

-Vlad