60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
|
|
||
|
|
class PagePicker {
|
||
|
|
|
||
|
|
constructor(elem) {
|
||
|
|
this.elem = elem;
|
||
|
|
this.input = elem.querySelector('input');
|
||
|
|
this.resetButton = elem.querySelector('[page-picker-reset]');
|
||
|
|
this.selectButton = elem.querySelector('[page-picker-select]');
|
||
|
|
this.display = elem.querySelector('[page-picker-display]');
|
||
|
|
this.defaultDisplay = elem.querySelector('[page-picker-default]');
|
||
|
|
this.buttonSep = elem.querySelector('span.sep');
|
||
|
|
|
||
|
|
this.value = this.input.value;
|
||
|
|
this.setupListeners();
|
||
|
|
}
|
||
|
|
|
||
|
|
setupListeners() {
|
||
|
|
// Select click
|
||
|
|
this.selectButton.addEventListener('click', event => {
|
||
|
|
window.EntitySelectorPopup.show(entity => {
|
||
|
|
this.setValue(entity.id, entity.name);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
this.resetButton.addEventListener('click', event => {
|
||
|
|
this.setValue('', '');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
setValue(value, name) {
|
||
|
|
this.value = value;
|
||
|
|
this.input.value = value;
|
||
|
|
this.controlView(name);
|
||
|
|
}
|
||
|
|
|
||
|
|
controlView(name) {
|
||
|
|
let 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) {
|
||
|
|
let display = (elem.tagName === 'BUTTON' || elem.tagName === 'SPAN') ? 'inline-block' : 'block';
|
||
|
|
elem.style.display = show ? display : 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = PagePicker;
|