BookStack Code Mirror - bookstack/blob - resources/js/components/shelf-sort.js

   1 import Sortable from "sortablejs";
   2
   3 class ShelfSort {
   4
   5     setup() {
   6         this.elem = this.$el;
   7         this.input = this.$refs.input;
   8         this.shelfBookList = this.$refs.shelfBookList;
   9         this.allBookList = this.$refs.allBookList;
  10         this.bookSearchInput = this.$refs.bookSearch;
  11
  12         this.initSortable();
  13         this.setupListeners();
  14     }
  15
  16     initSortable() {
  17         const scrollBoxes = this.elem.querySelectorAll('.scroll-box');
  18         for (let scrollBox of scrollBoxes) {
  19             new Sortable(scrollBox, {
  20                 group: 'shelf-books',
  21                 ghostClass: 'primary-background-light',
  22                 animation: 150,
  23                 onSort: this.onChange.bind(this),
  24             });
  25         }
  26     }
  27
  28     setupListeners() {
  29         this.elem.addEventListener('click', event => {
  30             const sortItem = event.target.closest('.scroll-box-item');
  31             if (sortItem) {
  32                 event.preventDefault();
  33                 this.sortItemClick(sortItem);
  34             }
  35         });
  36
  37         this.bookSearchInput.addEventListener('input', event => {
  38             this.filterBooksByName(this.bookSearchInput.value);
  39         });
  40     }
  41
  42     /**
  43      * @param {String} filterVal
  44      */
  45     filterBooksByName(filterVal) {
  46
  47         // Set height on first search, if not already set, to prevent the distraction
  48         // of the list height jumping around
  49         if (!this.allBookList.style.height) {
  50             this.allBookList.style.height = this.allBookList.getBoundingClientRect().height + 'px';
  51         }
  52
  53         const books = this.allBookList.children;
  54         const lowerFilter = filterVal.trim().toLowerCase();
  55
  56         for (const bookEl of books) {
  57             const show = !filterVal || bookEl.textContent.toLowerCase().includes(lowerFilter);
  58             bookEl.style.display = show ? null : 'none';
  59         }
  60     }
  61
  62     /**
  63      * Called when a sort item is clicked.
  64      * @param {Element} sortItem
  65      */
  66     sortItemClick(sortItem) {
  67         const lists = this.elem.querySelectorAll('.scroll-box');
  68         const newList = Array.from(lists).filter(list => sortItem.parentElement !== list);
  69         if (newList.length > 0) {
  70             newList[0].appendChild(sortItem);
  71         }
  72         this.onChange();
  73     }
  74
  75     onChange() {
  76         const shelfBookElems = Array.from(this.shelfBookList.querySelectorAll('[data-id]'));
  77         this.input.value = shelfBookElems.map(elem => elem.getAttribute('data-id')).join(',');
  78     }
  79
  80 }
  81
  82 export default ShelfSort;