Layout: Added scroll fade to the sidebars

[bookstack] / resources / js / components / shelf-sort.js

diff --git a/resources/js/components/shelf-sort.js b/resources/js/components/shelf-sort.js
index 01ca11a333f10289f1fd185dbce66bc3a704316b..b56b01980a147cc17f9cda63bdff62b2ccdf47e4 100644 (file)
--- a/resources/js/components/shelf-sort.js
+++ b/resources/js/components/shelf-sort.js
@@ -1,29 +1,6 @@
 import Sortable from 'sortablejs';
 import {Component} from './component';
 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 {
 
 
 export class ShelfSort extends Component {
 


@@ -55,12 +32,9 @@ export class ShelfSort extends Component {
     }
 
     setupListeners() {
     }
 
     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);
 
         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(',');
     onChange() {
         const shelfBookElems = Array.from(this.shelfBookList.querySelectorAll('[data-id]'));
         this.input.value = shelfBookElems.map(elem => elem.getAttribute('data-id')).join(',');