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

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