BookStack Code Mirror - bookstack/blob - resources/js/components/page-picker.js

   1 import {Component} from './component';
   2
   3 function toggleElem(elem, show) {
   4     elem.toggleAttribute('hidden', !show);
   5 }
   6
   7 export class PagePicker extends Component {
   8
   9     setup() {
  10         this.input = this.$refs.input;
  11         this.resetButton = this.$refs.resetButton;
  12         this.selectButton = this.$refs.selectButton;
  13         this.display = this.$refs.display;
  14         this.defaultDisplay = this.$refs.defaultDisplay;
  15         this.buttonSep = this.$refs.buttonSeperator;
  16
  17         this.selectorEndpoint = this.$opts.selectorEndpoint;
  18
  19         this.value = this.input.value;
  20         this.setupListeners();
  21     }
  22
  23     setupListeners() {
  24         this.selectButton.addEventListener('click', this.showPopup.bind(this));
  25         this.display.parentElement.addEventListener('click', this.showPopup.bind(this));
  26         this.display.addEventListener('click', e => e.stopPropagation());
  27
  28         this.resetButton.addEventListener('click', () => {
  29             this.setValue('', '');
  30         });
  31     }
  32
  33     showPopup() {
  34         /** @type {EntitySelectorPopup} * */
  35         const selectorPopup = window.$components.first('entity-selector-popup');
  36         selectorPopup.show(entity => {
  37             this.setValue(entity.id, entity.name);
  38         }, {
  39             initialValue: '',
  40             searchEndpoint: this.selectorEndpoint,
  41             entityTypes: 'page',
  42             entityPermission: 'view',
  43         });
  44     }
  45
  46     setValue(value, name) {
  47         this.value = value;
  48         this.input.value = value;
  49         this.controlView(name);
  50     }
  51
  52     controlView(name) {
  53         const hasValue = this.value && this.value !== 0;
  54         toggleElem(this.resetButton, hasValue);
  55         toggleElem(this.buttonSep, hasValue);
  56         toggleElem(this.defaultDisplay, !hasValue);
  57         toggleElem(this.display, hasValue);
  58         if (hasValue) {
  59             const id = this.getAssetIdFromVal();
  60             this.display.textContent = `#${id}, ${name}`;
  61             this.display.href = window.baseUrl(`/link/${id}`);
  62         }
  63     }
  64
  65     getAssetIdFromVal() {
  66         return Number(this.value);
  67     }
  68
  69 }