search

aonawale / ember-material-components

Google's Material Design Components for Ember JS apps
https://aonawale.github.io/ember-material-components
MIT License
2 stars 1 forks source link

Tab bar active not reflecting route #4

Open MrChriZ opened 6 years ago

MrChriZ commented 6 years ago

If using the Tab bar, changing tabs changes the route as expected. However if you then press F5 to refresh the route the mdc-tab-bar__indicator is not under the active title bar

MrChriZ commented 6 years ago

I've been looking at ways of fixing this and it's quite difficult. In ember-material-components-web they extend linkComponent to get the benefits of Link-to. However since the base of mdc-tab in this project is a component then I don't think that's possible due to multiple inheritance. Beyond that I'm out of my depth.

As a quick fix hacky method I'm adding a route and index property to mdc-tab that I'm passing in as so: `{{#mdc-tab-bar as |bar|}} {{#bar.tab route="help" index=0}} help {{/bar.tab}} {{#bar.tab route="about" index=1}}
about
{{/bar.tab}}

{{/mdc-tab-bar}} `

Adding a new method in mdc-tab-bar.js setTab(index) { set(this,'activeTabIndex', index); }

Then finally in mdc-tab.js using didReceiveAttrs checking to see if we're the active route and if so setting the tab on the parentView: `didReceiveAttrs() { this._super(...arguments); const route = Ember.get(this,'route'); const index = Ember.get(this,'index'); if (index && route && route==Ember.getOwner(this).lookup('router:main').get('currentRouteName')) { this.set('isActive', true); this.parentView.setTab(index,this); }

}`

It's hacky but it works. However I think someone can probably do something tidier so I'm not submitting this as a pull request.

If Ahmed's still around it would be good to know if you intend to work any more on this project :)

MrChriZ commented 6 years ago

I've changed to use includes now : if (index && route && route.includes(Ember.getOwner(this).lookup('router:main').get('currentRouteName')))

So that I can use multiple routes for the same tab indicator. This was necessary where for example I have individual blog posts where the indicator should still highlight 'blogs'