BookStack Code Mirror - bookstack/blob - resources/js/components/sort-set-manager.ts

   1 import {Component} from "./component.js";
   2 import Sortable from "sortablejs";
   3 import {buildListActions, sortActionClickListener} from "../services/dual-lists";
   4
   5
   6 export class SortSetManager extends Component {
   7
   8     protected input!: HTMLInputElement;
   9     protected configuredList!: HTMLElement;
  10     protected availableList!: HTMLElement;
  11
  12     setup() {
  13         this.input = this.$refs.input as HTMLInputElement;
  14         this.configuredList = this.$refs.configuredOperationsList;
  15         this.availableList = this.$refs.availableOperationsList;
  16
  17         this.initSortable();
  18
  19         const listActions = buildListActions(this.availableList, this.configuredList);
  20         const sortActionListener = sortActionClickListener(listActions, this.onChange.bind(this));
  21         this.$el.addEventListener('click', sortActionListener);
  22     }
  23
  24     initSortable() {
  25         const scrollBoxes = [this.configuredList, this.availableList];
  26         for (const scrollBox of scrollBoxes) {
  27             new Sortable(scrollBox, {
  28                 group: 'sort-set-operations',
  29                 ghostClass: 'primary-background-light',
  30                 handle: '.handle',
  31                 animation: 150,
  32                 onSort: this.onChange.bind(this),
  33             });
  34         }
  35     }
  36
  37     onChange() {
  38         const configuredOpEls = Array.from(this.configuredList.querySelectorAll('[data-id]'));
  39         this.input.value = configuredOpEls.map(elem => elem.getAttribute('data-id')).join(',');
  40     }
  41 }