github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-01 05:51:52 +08:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

Implemented new design in entity selector

Browse Source 
- Also showed entity path in search.
- Cleaned popular entity fetch logic.
- Cleaned entity selector JS code a little
This commit is contained in:
Dan Brown
2019-03-30 16:54:15 +00:00
parent bda8aa414b
commit 37bf7f11e4
14 changed files with 105 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
resources/assets/js/components/entity-selector.js
View File

@ -6,8 +6,8 @@ class EntitySelector {
this.search = '';
this.lastClick = 0;
let entityTypes = elem.hasAttribute('entity-types') ? elem.getAttribute('entity-types') : 'page,book,chapter';
let entityPermission = elem.hasAttribute('entity-permission') ? elem.getAttribute('entity-permission') : 'view';
const entityTypes = elem.hasAttribute('entity-types') ? elem.getAttribute('entity-types') : 'page,book,chapter';
const entityPermission = elem.hasAttribute('entity-permission') ? elem.getAttribute('entity-permission') : 'view';
this.searchUrl = window.baseUrl(`/ajax/search/entities?types=${encodeURIComponent(entityTypes)}&permission=${encodeURIComponent(entityPermission)}`);
this.input = elem.querySelector('[entity-selector-input]');
@ -26,6 +26,7 @@ class EntitySelector {
this.searchEntities(this.searchInput.value);
}, 200);
});
this.searchInput.addEventListener('keydown', event => {
if (event.keyCode === 13) event.preventDefault();
});
@ -53,7 +54,7 @@ class EntitySelector {
searchEntities(searchTerm) {
this.input.value = '';
let url = this.searchUrl + `&term=${encodeURIComponent(searchTerm)}`;
let url = `${this.searchUrl}&term=${encodeURIComponent(searchTerm)}`;
window.$http.get(url).then(resp => {
this.resultsContainer.innerHTML = resp.data;
this.hideLoading();
@ -68,48 +69,47 @@ class EntitySelector {
}
onClick(event) {
let t = event.target;
if (t.matches('.entity-list-item *')) {
const listItem = event.target.closest('[data-entity-type]');
if (listItem) {
event.preventDefault();
event.stopPropagation();
let item = t.closest('[data-entity-type]');
this.selectItem(item);
} else if (t.matches('[data-entity-type]')) {
this.selectItem(t)
this.selectItem(listItem);
}
}
selectItem(item) {
let isDblClick = this.isDoubleClick();
let type = item.getAttribute('data-entity-type');
let id = item.getAttribute('data-entity-id');
let isSelected = !item.classList.contains('selected') || isDblClick;
const isDblClick = this.isDoubleClick();
const type = item.getAttribute('data-entity-type');
const id = item.getAttribute('data-entity-id');
const isSelected = (!item.classList.contains('selected') || isDblClick);
this.unselectAll();
this.input.value = isSelected ? `${type}:${id}` : '';
if (!isSelected) window.$events.emit('entity-select-change', null);
if (isSelected) {
item.classList.add('selected');
item.classList.add('primary-background');
} else {
window.$events.emit('entity-select-change', null)
}
if (!isDblClick && !isSelected) return;
let link = item.querySelector('.entity-list-item-link').getAttribute('href');
let name = item.querySelector('.entity-list-item-name').textContent;
let data = {id: Number(id), name: name, link: link};
const link = item.getAttribute('href');
const name = item.querySelector('.entity-list-item-name').textContent;
const data = {id: Number(id), name: name, link: link};
if (isDblClick) window.$events.emit('entity-select-confirm', data);
if (isSelected) window.$events.emit('entity-select-change', data);
if (isDblClick) {
window.$events.emit('entity-select-confirm', data)
}
if (isSelected) {
window.$events.emit('entity-select-change', data)
}
}
unselectAll() {
let selected = this.elem.querySelectorAll('.selected');
for (let i = 0, len = selected.length; i < len; i++) {
selected[i].classList.remove('selected');
selected[i].classList.remove('primary-background');
for (let selectedElem of selected) {
selectedElem.classList.remove('selected', 'primary-background');
}
}