github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-23 22:21:54 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki 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

1
resources/js/components/index.ts
View File

@ -50,6 +50,7 @@ export {ShelfSort} from './shelf-sort';
export {Shortcuts} from './shortcuts';
export {ShortcutInput} from './shortcut-input';
export {SortableList} from './sortable-list';
export {SortSetManager} from './sort-set-manager'
export {SubmitOnChange} from './submit-on-change';
export {Tabs} from './tabs';
export {TagManager} from './tag-manager';

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(',');

41
resources/js/components/sort-set-manager.ts Normal file
View File

@ -0,0 +1,41 @@
import {Component} from "./component.js";
import Sortable from "sortablejs";
import {buildListActions, sortActionClickListener} from "../services/dual-lists";
export class SortSetManager extends Component {
protected input!: HTMLInputElement;
protected configuredList!: HTMLElement;
protected availableList!: HTMLElement;
setup() {
this.input = this.$refs.input as HTMLInputElement;
this.configuredList = this.$refs.configuredOperationsList;
this.availableList = this.$refs.availableOperationsList;
this.initSortable();
const listActions = buildListActions(this.availableList, this.configuredList);
const sortActionListener = sortActionClickListener(listActions, this.onChange.bind(this));
this.$el.addEventListener('click', sortActionListener);
}
initSortable() {
const scrollBoxes = [this.configuredList, this.availableList];
for (const scrollBox of scrollBoxes) {
new Sortable(scrollBox, {
group: 'sort-set-operations',
ghostClass: 'primary-background-light',
handle: '.handle',
animation: 150,
onSort: this.onChange.bind(this),
});
}
}
onChange() {
const configuredOpEls = Array.from(this.configuredList.querySelectorAll('[data-id]'));
this.input.value = configuredOpEls.map(elem => elem.getAttribute('data-id')).join(',');
}
}