Design: Updated buttons to be a bit friendlier

[bookstack] / resources / js / components / page-picker.js

diff --git a/resources/js/components/page-picker.js b/resources/js/components/page-picker.js
index fba0a0a43f779a8802c0a7130789fb948f2e0226..9bb0bee04a3fb6be13e798d01352e0b59b6fa2bf 100644 (file)
--- a/resources/js/components/page-picker.js
+++ b/resources/js/components/page-picker.js
@@ -1,4 +1,8 @@
-import {Component} from "./component";
+import {Component} from './component';
+
+function toggleElem(elem, show) {
+    elem.toggleAttribute('hidden', !show);
+}
 
 export class PagePicker extends Component {
 
@@ -17,14 +21,15 @@ export class PagePicker extends Component {
     setupListeners() {
         this.selectButton.addEventListener('click', this.showPopup.bind(this));
         this.display.parentElement.addEventListener('click', this.showPopup.bind(this));
+        this.display.addEventListener('click', e => e.stopPropagation());
 
-        this.resetButton.addEventListener('click', event => {
+        this.resetButton.addEventListener('click', () => {
             this.setValue('', '');
         });
     }
 
     showPopup() {
-        /** @type {EntitySelectorPopup} **/
+        /** @type {EntitySelectorPopup} * */
         const selectorPopup = window.$components.first('entity-selector-popup');
         selectorPopup.show(entity => {
             this.setValue(entity.id, entity.name);
@@ -44,7 +49,7 @@ export class PagePicker extends Component {
         toggleElem(this.defaultDisplay, !hasValue);
         toggleElem(this.display, hasValue);
         if (hasValue) {
-            let id = this.getAssetIdFromVal();
+            const id = this.getAssetIdFromVal();
             this.display.textContent = `#${id}, ${name}`;
             this.display.href = window.baseUrl(`/link/${id}`);
         }
@@ -55,7 +60,3 @@ export class PagePicker extends Component {
     }
 
 }
-
-function toggleElem(elem, show) {
-    elem.style.display = show ? null : 'none';
-}
\ No newline at end of file