BookStack/resources/js/components/page-picker.js
2022-11-15 12:44:57 +00:00

61 lines
1.8 KiB
JavaScript

import {Component} from "./component";
export class PagePicker extends Component {
setup() {
this.input = this.$refs.input;
this.resetButton = this.$refs.resetButton;
this.selectButton = this.$refs.selectButton;
this.display = this.$refs.display;
this.defaultDisplay = this.$refs.defaultDisplay;
this.buttonSep = this.$refs.buttonSeperator;
this.value = this.input.value;
this.setupListeners();
}
setupListeners() {
this.selectButton.addEventListener('click', this.showPopup.bind(this));
this.display.parentElement.addEventListener('click', this.showPopup.bind(this));
this.resetButton.addEventListener('click', event => {
this.setValue('', '');
});
}
showPopup() {
/** @type {EntitySelectorPopup} **/
const selectorPopup = window.$components.first('entity-selector-popup');
selectorPopup.show(entity => {
this.setValue(entity.id, entity.name);
});
}
setValue(value, name) {
this.value = value;
this.input.value = value;
this.controlView(name);
}
controlView(name) {
const hasValue = this.value && this.value !== 0;
toggleElem(this.resetButton, hasValue);
toggleElem(this.buttonSep, hasValue);
toggleElem(this.defaultDisplay, !hasValue);
toggleElem(this.display, hasValue);
if (hasValue) {
let id = this.getAssetIdFromVal();
this.display.textContent = `#${id}, ${name}`;
this.display.href = window.baseUrl(`/link/${id}`);
}
}
getAssetIdFromVal() {
return Number(this.value);
}
}
function toggleElem(elem, show) {
elem.style.display = show ? null : 'none';
}