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!
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.
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.
that cleared things up - thanks a lot!