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

   1 import {Component} from './component';
   2
   3 function toggleElem(elem, show) {
   4     elem.style.display = show ? null : 'none';
   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.value = this.input.value;
  18         this.setupListeners();
  19     }
  20
  21     setupListeners() {
  22         this.selectButton.addEventListener('click', this.showPopup.bind(this));
  23         this.display.parentElement.addEventListener('click', this.showPopup.bind(this));
  24
  25         this.resetButton.addEventListener('click', () => {
  26             this.setValue('', '');
  27         });
  28     }
  29
  30     showPopup() {
  31         /** @type {EntitySelectorPopup} * */
  32         const selectorPopup = window.$components.first('entity-selector-popup');
  33         selectorPopup.show(entity => {
  34             this.setValue(entity.id, entity.name);
  35         });
  36     }
  37
  38     setValue(value, name) {
  39         this.value = value;
  40         this.input.value = value;
  41         this.controlView(name);
  42     }
  43
  44     controlView(name) {
  45         const hasValue = this.value && this.value !== 0;
  46         toggleElem(this.resetButton, hasValue);
  47         toggleElem(this.buttonSep, hasValue);
  48         toggleElem(this.defaultDisplay, !hasValue);
  49         toggleElem(this.display, hasValue);
  50         if (hasValue) {
  51             const id = this.getAssetIdFromVal();
  52             this.display.textContent = `#${id}, ${name}`;
  53             this.display.href = window.baseUrl(`/link/${id}`);
  54         }
  55     }
  56
  57     getAssetIdFromVal() {
  58         return Number(this.value);
  59     }
  60
  61 }