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     show(callback) {
  19         this.callback = callback;
  20         this.getPopup().show();
  21         this.getSelector().focusSearch();
  22     }
  23
  24     hide() {
  25         this.getPopup().hide();
  26     }
  27
  28     /**
  29      * @returns {Popup}
  30      */
  31     getPopup() {
  32         return window.$components.firstOnElement(this.container, 'popup');
  33     }
  34
  35     /**
  36      * @returns {EntitySelector}
  37      */
  38     getSelector() {
  39         return window.$components.firstOnElement(this.selectorEl, 'entity-selector');
  40     }
  41
  42     onSelectButtonClick() {
  43         this.handleConfirmedSelection(this.selection);
  44     }
  45
  46     onSelectionChange(entity) {
  47         this.selection = entity;
  48         if (entity === null) {
  49             this.selectButton.setAttribute('disabled', 'true');
  50         } else {
  51             this.selectButton.removeAttribute('disabled');
  52         }
  53     }
  54
  55     handleConfirmedSelection(entity) {
  56         this.hide();
  57         this.getSelector().reset();
  58         if (this.callback && entity) this.callback(entity);
  59     }
  60 }