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

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