+
+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;
\ No newline at end of file