]> BookStack Code Mirror - bookstack/blob - resources/js/components/entity-selector-popup.js
Comments: Further range of content reference ux improvements
[bookstack] / resources / js / components / entity-selector-popup.js
1 import {Component} from './component';
2
3 export class EntitySelectorPopup extends Component {
4
5     setup() {
6         this.container = this.$el;
7         this.selectButton = this.$refs.select;
8         this.selectorEl = this.$refs.selector;
9
10         this.callback = null;
11         this.selection = null;
12
13         this.selectButton.addEventListener('click', this.onSelectButtonClick.bind(this));
14         window.$events.listen('entity-select-change', this.onSelectionChange.bind(this));
15         window.$events.listen('entity-select-confirm', this.handleConfirmedSelection.bind(this));
16     }
17
18     /**
19      * Show the selector popup.
20      * @param {Function} callback
21      * @param {EntitySelectorSearchOptions} searchOptions
22      */
23     show(callback, searchOptions = {}) {
24         this.callback = callback;
25         this.getSelector().configureSearchOptions(searchOptions);
26         this.getPopup().show();
27
28         this.getSelector().focusSearch();
29     }
30
31     hide() {
32         this.getPopup().hide();
33     }
34
35     /**
36      * @returns {Popup}
37      */
38     getPopup() {
39         return window.$components.firstOnElement(this.container, 'popup');
40     }
41
42     /**
43      * @returns {EntitySelector}
44      */
45     getSelector() {
46         return window.$components.firstOnElement(this.selectorEl, 'entity-selector');
47     }
48
49     onSelectButtonClick() {
50         this.handleConfirmedSelection(this.selection);
51     }
52
53     onSelectionChange(entity) {
54         this.selection = entity;
55         if (entity === null) {
56             this.selectButton.setAttribute('disabled', 'true');
57         } else {
58             this.selectButton.removeAttribute('disabled');
59         }
60     }
61
62     handleConfirmedSelection(entity) {
63         this.hide();
64         this.getSelector().reset();
65         if (this.callback && entity) this.callback(entity);
66     }
67
68 }