2018-02-10 15:18:01 +00:00
|
|
|
import ngModule from '../../module';
|
2018-04-19 12:46:06 +00:00
|
|
|
import './style.scss';
|
2017-01-31 13:13:06 +00:00
|
|
|
|
2018-04-19 12:46:06 +00:00
|
|
|
export default class IconButton {
|
|
|
|
constructor($element) {
|
2019-10-02 12:12:17 +00:00
|
|
|
this.element = $element[0];
|
2018-10-17 10:49:18 +00:00
|
|
|
|
2019-10-02 12:12:17 +00:00
|
|
|
if (this.element.getAttribute('tabindex') == null)
|
|
|
|
this.element.tabIndex = 0;
|
|
|
|
|
|
|
|
this.element.addEventListener('keyup', e => this.onKeyup(e));
|
|
|
|
this.element.addEventListener('click', e => this.onClick(e));
|
|
|
|
}
|
|
|
|
|
|
|
|
onKeyup(event) {
|
|
|
|
if (event.code == 'Space')
|
|
|
|
this.onClick(event);
|
2018-04-19 12:46:06 +00:00
|
|
|
}
|
|
|
|
|
2019-10-02 12:12:17 +00:00
|
|
|
onClick(event) {
|
2018-04-19 12:46:06 +00:00
|
|
|
if (event.defaultPrevented) return;
|
2019-10-02 12:12:17 +00:00
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
// FIXME: Don't use Event.stopPropagation()
|
|
|
|
let button = this.element.querySelector('button');
|
|
|
|
if (this.disabled || button.disabled)
|
|
|
|
event.stopImmediatePropagation();
|
2018-04-19 12:46:06 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
IconButton.$inject = ['$element'];
|
2018-02-10 15:18:01 +00:00
|
|
|
ngModule.component('vnIconButton', {
|
2018-04-19 12:46:06 +00:00
|
|
|
controller: IconButton,
|
2017-06-13 11:08:06 +00:00
|
|
|
template: require('./icon-button.html'),
|
|
|
|
bindings: {
|
|
|
|
icon: '@',
|
2018-10-17 10:49:18 +00:00
|
|
|
disabled: '<?'
|
2017-06-15 09:22:47 +00:00
|
|
|
}
|
2017-06-13 11:08:06 +00:00
|
|
|
});
|