2020-06-27 18:56:01 -04:00
|
|
|
/**
|
|
|
|
* Entity Selector Popup
|
|
|
|
* @extends {Component}
|
|
|
|
*/
|
2017-08-27 09:31:34 -04:00
|
|
|
class EntitySelectorPopup {
|
|
|
|
|
2020-06-27 18:56:01 -04:00
|
|
|
setup() {
|
|
|
|
this.elem = this.$el;
|
|
|
|
this.selectButton = this.$refs.select;
|
2017-08-27 09:31:34 -04:00
|
|
|
window.EntitySelectorPopup = this;
|
|
|
|
|
|
|
|
this.callback = null;
|
|
|
|
this.selection = null;
|
|
|
|
|
|
|
|
this.selectButton.addEventListener('click', this.onSelectButtonClick.bind(this));
|
|
|
|
window.$events.listen('entity-select-change', this.onSelectionChange.bind(this));
|
|
|
|
window.$events.listen('entity-select-confirm', this.onSelectionConfirm.bind(this));
|
|
|
|
}
|
|
|
|
|
|
|
|
show(callback) {
|
|
|
|
this.callback = callback;
|
2020-06-27 18:56:01 -04:00
|
|
|
this.elem.components.popup.show();
|
2017-08-27 09:31:34 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
hide() {
|
2020-06-27 18:56:01 -04:00
|
|
|
this.elem.components.popup.hide();
|
2017-08-27 09:31:34 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
onSelectButtonClick() {
|
|
|
|
this.hide();
|
|
|
|
if (this.selection !== null && this.callback) this.callback(this.selection);
|
|
|
|
}
|
|
|
|
|
|
|
|
onSelectionConfirm(entity) {
|
|
|
|
this.hide();
|
|
|
|
if (this.callback && entity) this.callback(entity);
|
|
|
|
}
|
|
|
|
|
|
|
|
onSelectionChange(entity) {
|
|
|
|
this.selection = entity;
|
|
|
|
if (entity === null) {
|
|
|
|
this.selectButton.setAttribute('disabled', 'true');
|
|
|
|
} else {
|
|
|
|
this.selectButton.removeAttribute('disabled');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-11-09 16:17:35 -05:00
|
|
|
export default EntitySelectorPopup;
|