BookStack Code Mirror - bookstack/blob - resources/js/components/permissions-table.js

   1
   2 class PermissionsTable {
   3
   4     setup() {
   5         this.container = this.$el;
   6         this.cellSelector = this.$opts.cellSelector || 'td,th';
   7         this.rowSelector = this.$opts.rowSelector || 'tr';
   8
   9         // Handle toggle all event
  10         for (const toggleAllElem of (this.$manyRefs.toggleAll || [])) {
  11             toggleAllElem.addEventListener('click', this.toggleAllClick.bind(this));
  12         }
  13
  14         // Handle toggle row event
  15         for (const toggleRowElem of (this.$manyRefs.toggleRow || [])) {
  16             toggleRowElem.addEventListener('click', this.toggleRowClick.bind(this));
  17         }
  18
  19         // Handle toggle column event
  20         for (const toggleColElem of (this.$manyRefs.toggleColumn || [])) {
  21             toggleColElem.addEventListener('click', this.toggleColumnClick.bind(this));
  22         }
  23     }
  24
  25     toggleAllClick(event) {
  26         event.preventDefault();
  27         this.toggleAllInElement(this.container);
  28     }
  29
  30     toggleRowClick(event) {
  31         event.preventDefault();
  32         this.toggleAllInElement(event.target.closest(this.rowSelector));
  33     }
  34
  35     toggleColumnClick(event) {
  36         event.preventDefault();
  37
  38         const tableCell = event.target.closest(this.cellSelector);
  39         const colIndex = Array.from(tableCell.parentElement.children).indexOf(tableCell);
  40         const tableRows = this.container.querySelectorAll(this.rowSelector);
  41         const inputsToToggle = [];
  42
  43         for (let row of tableRows) {
  44             const targetCell = row.children[colIndex];
  45             if (targetCell) {
  46                 inputsToToggle.push(...targetCell.querySelectorAll('input[type=checkbox]'));
  47             }
  48         }
  49         this.toggleAllInputs(inputsToToggle);
  50     }
  51
  52     toggleAllInElement(domElem) {
  53         const inputsToToggle = domElem.querySelectorAll('input[type=checkbox]');
  54         this.toggleAllInputs(inputsToToggle);
  55     }
  56
  57     toggleAllInputs(inputsToToggle) {
  58         const currentState = inputsToToggle.length > 0 ? inputsToToggle[0].checked : false;
  59         for (let checkbox of inputsToToggle) {
  60             checkbox.checked = !currentState;
  61             checkbox.dispatchEvent(new Event('change'));
  62         }
  63     }
  64
  65 }
  66
  67 export default PermissionsTable;