BookStack Code Mirror - bookstack/blob - 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 }