[Summary view] [Print] [Text view]

   1  (function () {
   2    'use strict';
   3  
   4    /**
   5     * TableColumns class for toggle visibility of <table> columns.
   6     */
   7    var TableColumns = /*#__PURE__*/function () {
   8      function TableColumns($table, tableName) {
   9        var _this = this;
  10  
  11        this.$table = $table;
  12        this.tableName = tableName;
  13        this.storageKey = "joomla-tablecolumns-" + this.tableName;
  14        this.$headers = [].slice.call($table.querySelector('thead tr').children);
  15        this.$rows = [].slice.call($table.querySelectorAll('tbody tr'));
  16        this.listOfHidden = []; // Load previous state
  17  
  18        this.loadState(); // Find protected columns
  19  
  20        this.protectedCols = [0];
  21  
  22        if (this.$rows[0]) {
  23          [].slice.call(this.$rows[0].children).forEach(function ($el, index) {
  24            if ($el.nodeName === 'TH') {
  25              _this.protectedCols.push(index); // Make sure it's not in the list of hidden
  26  
  27  
  28              var ih = _this.listOfHidden.indexOf(index);
  29  
  30              if (ih !== -1) {
  31                _this.listOfHidden.splice(ih, 1);
  32              }
  33            }
  34          });
  35        } // Set up toggle menu
  36  
  37  
  38        this.createControls(); // Restore state
  39  
  40        this.listOfHidden.forEach(function (index) {
  41          _this.toggleColumn(index, true);
  42        });
  43      }
  44      /**
  45       * Create a controls to select visible columns
  46       */
  47  
  48  
  49      var _proto = TableColumns.prototype;
  50  
  51      _proto.createControls = function createControls() {
  52        var _this2 = this;
  53  
  54        var $divouter = document.createElement('div');
  55        $divouter.setAttribute('class', 'dropdown float-end pb-2');
  56        var $divinner = document.createElement('div');
  57        $divinner.setAttribute('class', 'dropdown-menu dropdown-menu-end');
  58        $divinner.setAttribute('data-bs-popper', 'static'); // Create a toggle button
  59  
  60        var $button = document.createElement('button');
  61        $button.type = 'button';
  62        $button.textContent = Joomla.Text._('JGLOBAL_COLUMNS');
  63        $button.classList.add('btn', 'btn-primary', 'btn-sm', 'dropdown-toggle');
  64        $button.setAttribute('data-bs-toggle', 'dropdown');
  65        $button.setAttribute('data-bs-auto-close', 'false');
  66        $button.setAttribute('aria-haspopup', 'true');
  67        $button.setAttribute('aria-expanded', 'false');
  68        var $ul = document.createElement('ul');
  69        $ul.setAttribute('class', 'list-unstyled p-2');
  70        $ul.setAttribute('id', 'columnList'); // Collect a list of headers for dropdown
  71  
  72        this.$headers.forEach(function ($el, index) {
  73          // Skip the first column, unless it's a th, as we don't want to display the checkboxes
  74          if (index === 0 && $el.nodeName !== 'TH') return;
  75          var $li = document.createElement('li');
  76          var $label = document.createElement('label');
  77          var $input = document.createElement('input');
  78          $input.classList.add('form-check-input', 'me-1');
  79          $input.type = 'checkbox';
  80          $input.name = 'table[column][]';
  81          $input.checked = _this2.listOfHidden.indexOf(index) === -1;
  82          $input.disabled = _this2.protectedCols.indexOf(index) !== -1;
  83          $input.value = index; // Find the header name
  84  
  85          var $titleEl = $el.querySelector('span');
  86          var title = $titleEl ? $titleEl.textContent.trim() : '';
  87  
  88          if (!title) {
  89            $titleEl = $el.querySelector('span.visually-hidden') || $el;
  90            title = $titleEl.textContent.trim();
  91          }
  92  
  93          if (title.includes(':')) {
  94            title = title.split(':', 2)[1].trim();
  95          }
  96  
  97          $label.textContent = title;
  98          $label.insertAdjacentElement('afterbegin', $input);
  99          $li.appendChild($label);
 100          $ul.appendChild($li);
 101        });
 102        this.$table.insertAdjacentElement('beforebegin', $divouter);
 103        $divouter.appendChild($button);
 104        $divouter.appendChild($divinner);
 105        $divinner.appendChild($ul); // Listen to checkboxes change
 106  
 107        $ul.addEventListener('change', function (event) {
 108          _this2.toggleColumn(parseInt(event.target.value, 10));
 109  
 110          _this2.saveState();
 111        }); // Remove "media query" classes, which may prevent toggling from working.
 112  
 113        this.$headers.forEach(function ($el) {
 114          $el.classList.remove('d-none', 'd-md-table-cell', 'd-lg-table-cell', 'd-xl-table-cell');
 115        });
 116        this.$rows.forEach(function ($row) {
 117          [].slice.call($row.children).forEach(function ($el) {
 118            $el.classList.remove('d-none', 'd-md-table-cell', 'd-lg-table-cell', 'd-xl-table-cell');
 119          });
 120        });
 121        this.$button = $button;
 122        this.$menu = $ul;
 123        this.updateCounter();
 124      }
 125      /**
 126       * Update button text
 127       */
 128      ;
 129  
 130      _proto.updateCounter = function updateCounter() {
 131        // Don't count the checkboxes column in the total
 132        var total = this.$headers.length - 1;
 133        var visible = total - this.listOfHidden.length;
 134        this.$button.textContent = visible + "/" + total + " " + Joomla.Text._('JGLOBAL_COLUMNS');
 135      }
 136      /**
 137       * Toggle column visibility
 138       *
 139       * @param {Number} index  The column index
 140       * @param {Boolean} force To force hide
 141       */
 142      ;
 143  
 144      _proto.toggleColumn = function toggleColumn(index, force) {
 145        // Skip incorrect index
 146        if (!this.$headers[index]) return; // Skip the protected columns
 147  
 148        if (this.protectedCols.indexOf(index) !== -1) return;
 149        var i = this.listOfHidden.indexOf(index);
 150  
 151        if (i === -1) {
 152          this.listOfHidden.push(index);
 153        } else if (force !== true) {
 154          this.listOfHidden.splice(i, 1);
 155        }
 156  
 157        this.$headers[index].classList.toggle('d-none', force);
 158        this.$rows.forEach(function ($col) {
 159          $col.children[index].classList.toggle('d-none', force);
 160        });
 161        this.updateCounter();
 162      }
 163      /**
 164       * Save state, list of hidden columns
 165       */
 166      ;
 167  
 168      _proto.saveState = function saveState() {
 169        window.localStorage.setItem(this.storageKey, this.listOfHidden.join(','));
 170      }
 171      /**
 172       * Load state, list of hidden columns
 173       */
 174      ;
 175  
 176      _proto.loadState = function loadState() {
 177        var stored = window.localStorage.getItem(this.storageKey);
 178  
 179        if (stored) {
 180          this.listOfHidden = stored.split(',').map(function (val) {
 181            return parseInt(val, 10);
 182          });
 183        }
 184      };
 185  
 186      return TableColumns;
 187    }();
 188  
 189    if (window.innerWidth > 992) {
 190      // Look for dataset name else page-title
 191      [].concat(document.querySelectorAll('table')).forEach(function ($table) {
 192        var tableName = $table.dataset.name ? $table.dataset.name : document.querySelector('.page-title').textContent.trim().replace(/[^a-z0-9]/gi, '-').toLowerCase(); // Skip unnamed table
 193  
 194        if (!tableName) {
 195          return;
 196        }
 197        /* eslint-disable-next-line no-new */
 198  
 199  
 200        new TableColumns($table, tableName);
 201      });
 202    }
 203  
 204  })();