45 lines
1.2 KiB
JavaScript
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'));
|
|
}
|
|
},
|
|
},
|
|
});
|