webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-14 12:02:31 +03:00
Code Activity

Sorting: Added sort set form manager UI JS

Browse Source 
Extracted much code to be shared with the shelf books management UI
This commit is contained in:
Dan Brown
2025-02-04 15:14:22 +00:00
parent bf8a84a8b1
commit d28278bba6
13 changed files with 168 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
resources/js/components/shelf-sort.js
View File

@ -1,29 +1,6 @@
import Sortable from 'sortablejs';
import {Component} from './component';
/**
* @type {Object<string, function(HTMLElement, HTMLElement, HTMLElement)>}
*/
const itemActions = {
move_up(item) {
const list = item.parentNode;
const index = Array.from(list.children).indexOf(item);
const newIndex = Math.max(index - 1, 0);
list.insertBefore(item, list.children[newIndex] || null);
},
move_down(item) {
const list = item.parentNode;
const index = Array.from(list.children).indexOf(item);
const newIndex = Math.min(index + 2, list.children.length);
list.insertBefore(item, list.children[newIndex] || null);
},
remove(item, shelfBooksList, allBooksList) {
allBooksList.appendChild(item);
},
add(item, shelfBooksList) {
shelfBooksList.appendChild(item);
},
};
import {buildListActions, sortActionClickListener} from '../services/dual-lists.ts';
export class ShelfSort extends Component {
@ -55,12 +32,9 @@ export class ShelfSort extends Component {
}
setupListeners() {
this.elem.addEventListener('click', event => {
const sortItemAction = event.target.closest('.scroll-box-item button[data-action]');
if (sortItemAction) {
this.sortItemActionClick(sortItemAction);
}
});
const listActions = buildListActions(this.allBookList, this.shelfBookList);
const sortActionListener = sortActionClickListener(listActions, this.onChange.bind(this));
this.elem.addEventListener('click', sortActionListener);
this.bookSearchInput.addEventListener('input', () => {
this.filterBooksByName(this.bookSearchInput.value);
@ -93,20 +67,6 @@ export class ShelfSort extends Component {
}
}
/**
* Called when a sort item action button is clicked.
* @param {HTMLElement} sortItemAction
*/
sortItemActionClick(sortItemAction) {
const sortItem = sortItemAction.closest('.scroll-box-item');
const {action} = sortItemAction.dataset;
const actionFunction = itemActions[action];
actionFunction(sortItem, this.shelfBookList, this.allBookList);
this.onChange();
}
onChange() {
const shelfBookElems = Array.from(this.shelfBookList.querySelectorAll('[data-id]'));
this.input.value = shelfBookElems.map(elem => elem.getAttribute('data-id')).join(',');