consul/ui/packages/consul-ui/app/components/tab-nav/index.js

45 lines
1.2 KiB
JavaScript

import Component from '@ember/component';
import { setProperties, set } from '@ember/object';
import { inject as service } from '@ember/service';
import { schedule } from '@ember/runloop';
const ENTER = 13;
const SELECTED = 'li.selected';
export default Component.extend({
name: 'tab',
tagName: '',
dom: service('dom'),
isAnimatable: false,
init: function() {
this._super(...arguments);
this.guid = this.dom.guid(this);
},
didInsertElement: function() {
this._super(...arguments);
this.$nav = this.dom.element(`#${this.guid}`);
this.select(this.dom.element(SELECTED, this.$nav));
set(this, 'isAnimatable', true);
},
didUpdateAttrs: function() {
schedule('afterRender', () => this.select(this.dom.element(SELECTED, this.$nav)));
},
select: function($el) {
if (!$el) {
return;
}
setProperties(this, {
selectedWidth: $el.offsetWidth,
selectedLeft: $el.offsetLeft,
selectedHeight: $el.offsetHeight,
selectedTop: $el.offsetTop,
});
},
actions: {
keydown: function(e) {
if (e.keyCode === ENTER) {
e.target.dispatchEvent(new MouseEvent('click'));
}
},
},
});