Just for fun I thought I would document one of the tasks that I need to get done for work today.
I’m currently in the process of removing all uses of our custom render buffer and the navigation-item.js.es6 file happens to be one of the last remaining 4 files that still use it.
Well, since I’m not really sure yet where in the app this code is being used I’m going to start first searching for navigation-item which should reveal which handlebar templates are calling this component:
app/assets/javascripts/discourse/templates/mobile/components/navigation-bar.hbs
10: {{navigation-item content=navItem filterMode=filterMode category=category}}
app/assets/javascripts/discourse/templates/components/navigation-bar.hbs
2: {{navigation-item content=navItem filterMode=filterMode category=category}}
I’m pretty sure this is the feature this file affects:
Before I completely break things as I start to make changes it looks like there is support for icons but I don’t totally understand how it currently works:
70 ˰˰¦˰¦˰if (content.get("hasIcon")) {
71 ˰˰¦˰¦˰¦˰buffer.push("<span class='" + content.get("name") + "'></span>");
72 ˰˰¦˰¦˰}
I wonder if I can easily create my own menu item with an icon to test with or if I have to make a theme component for it.
Okay, not really sure a good way to test icons, but I see how the html is working now so I guess it is time to move on and make the actual handlebar file needed to replace the buffered render logic.
Look like it is set to re-render on count
rerenderTriggers: ["content.count"],
Does this live update? Yes it does. So I need to make sure those numbers still update without a refresh.
Okay, I’ve made my template change, and the page still renders, but it looks like I broke the active class.
Oh, I wonder if it is this: return contentFilterType === filterType;?
Hmm maybe not:
Okay weird. I just saved my changes off in a branch and went back to the master branch and indeed active is set on the latest button:
(false is for all the other nav items)
Oh I wonder if I’m loading the mixin incorrectly?
app/assets/javascripts/discourse/components/navigation-item.js.es6
4:import FilterModeMixin from "discourse/mixins/filter-mode";
7: FilterModeMixin,
app/assets/javascripts/discourse/components/navigation-bar.js.es6
9:import FilterModeMixin from "discourse/mixins/filter-mode";
11:export default Component.extend(FilterModeMixin, {
Yep that was it!
…
And now I’m all done. Here is my commit: