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

   1 import "jquery-sortable";
   2
   3 class ShelfSort {
   4
   5     constructor(elem) {
   6         this.elem = elem;
   7         this.sortGroup = this.initSortable();
   8         this.input = document.getElementById('books-input');
   9         this.setupListeners();
  10     }
  11
  12     initSortable() {
  13         const placeHolderContent = this.getPlaceholderHTML();
  14         // TODO - Load sortable at this point
  15         return $('.scroll-box').sortable({
  16             group: 'shelf-books',
  17             exclude: '.instruction,.scroll-box-placeholder',
  18             containerSelector: 'div.scroll-box',
  19             itemSelector: '.scroll-box-item',
  20             placeholder: placeHolderContent,
  21             onDrop: this.onDrop.bind(this)
  22         });
  23     }
  24
  25     setupListeners() {
  26         this.elem.addEventListener('click', event => {
  27             const sortItem = event.target.closest('.scroll-box-item:not(.instruction)');
  28             if (sortItem) {
  29                 event.preventDefault();
  30                 this.sortItemClick(sortItem);
  31             }
  32         });
  33     }
  34
  35     /**
  36      * Called when a sort item is clicked.
  37      * @param {Element} sortItem
  38      */
  39     sortItemClick(sortItem) {
  40         const lists = this.elem.querySelectorAll('.scroll-box');
  41         const newList = Array.from(lists).filter(list => sortItem.parentElement !== list);
  42         if (newList.length > 0) {
  43             newList[0].appendChild(sortItem);
  44         }
  45         this.onChange();
  46     }
  47
  48     onDrop($item, container, _super) {
  49         this.onChange();
  50         _super($item, container);
  51     }
  52
  53     onChange() {
  54         const data = this.sortGroup.sortable('serialize').get();
  55         this.input.value = data[0].map(item => item.id).join(',');
  56         const instruction = this.elem.querySelector('.scroll-box-item.instruction');
  57         instruction.parentNode.insertBefore(instruction, instruction.parentNode.children[0]);
  58     }
  59
  60     getPlaceholderHTML() {
  61         const placeHolder = document.querySelector('.scroll-box-placeholder');
  62         placeHolder.style.display = 'block';
  63         const placeHolderContent = placeHolder.outerHTML;
  64         placeHolder.style.display = 'none';
  65         return placeHolderContent;
  66     }
  67
  68
  69 }
  70
  71 export default ShelfSort;