[Summary view] [Print] [Text view]

   1  /**
   2   * @copyright   (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
   3   * @license     GNU General Public License version 2 or later; see LICENSE.txt
   4   */
   5  
   6  /**
   7   * JavaScript behavior to allow shift select in administrator grids
   8   */
   9  (Joomla => {
  10  
  11    class JMultiSelect {
  12      constructor(formElement) {
  13        this.tableEl = document.querySelector(formElement);
  14  
  15        if (this.tableEl) {
  16          this.boxes = [].slice.call(this.tableEl.querySelectorAll('td input[type=checkbox]'));
  17          this.rows = [].slice.call(document.querySelectorAll('tr[class^="row"]'));
  18          this.checkallToggle = document.querySelector('[name="checkall-toggle"]');
  19          this.onCheckallToggleClick = this.onCheckallToggleClick.bind(this);
  20          this.onRowClick = this.onRowClick.bind(this);
  21  
  22          if (this.checkallToggle) {
  23            this.checkallToggle.addEventListener('click', this.onCheckallToggleClick);
  24          }
  25  
  26          if (this.rows.length) {
  27            this.rows.forEach(row => {
  28              row.addEventListener('click', this.onRowClick);
  29            });
  30          }
  31        }
  32      } // Changes the background-color on every cell inside a <tr>
  33      // eslint-disable-next-line class-methods-use-this
  34  
  35  
  36      changeBg(row, isChecked) {
  37        // Check if it should add or remove the background colour
  38        if (isChecked) {
  39          [].slice.call(row.querySelectorAll('td, th')).forEach(elementToMark => {
  40            elementToMark.classList.add('row-selected');
  41          });
  42        } else {
  43          [].slice.call(row.querySelectorAll('td, th')).forEach(elementToMark => {
  44            elementToMark.classList.remove('row-selected');
  45          });
  46        }
  47      }
  48  
  49      onCheckallToggleClick({
  50        target
  51      }) {
  52        const isChecked = target.checked;
  53        this.rows.forEach(row => {
  54          this.changeBg(row, isChecked);
  55        });
  56      }
  57  
  58      onRowClick({
  59        target,
  60        shiftKey
  61      }) {
  62        // Do not interfere with links or buttons
  63        if (target.tagName && (target.tagName.toLowerCase() === 'a' || target.tagName.toLowerCase() === 'button')) {
  64          return;
  65        }
  66  
  67        if (!this.boxes.length) {
  68          return;
  69        }
  70  
  71        const closestRow = target.closest('tr');
  72        const currentRowNum = this.rows.indexOf(closestRow);
  73        const currentCheckBox = closestRow.querySelector('td input[type=checkbox]');
  74  
  75        if (currentCheckBox) {
  76          let isChecked = currentCheckBox.checked;
  77  
  78          if (!(target.id === currentCheckBox.id)) {
  79            // We will prevent selecting text to prevent artifacts
  80            if (shiftKey) {
  81              document.body.style['-webkit-user-select'] = 'none';
  82              document.body.style['-moz-user-select'] = 'none';
  83              document.body.style['-ms-user-select'] = 'none';
  84              document.body.style['user-select'] = 'none';
  85            }
  86  
  87            currentCheckBox.checked = !currentCheckBox.checked;
  88            isChecked = currentCheckBox.checked;
  89            Joomla.isChecked(isChecked, this.tableEl.id);
  90          }
  91  
  92          this.changeBg(this.rows[currentRowNum], isChecked); // Restore normality
  93  
  94          if (shiftKey) {
  95            document.body.style['-webkit-user-select'] = 'none';
  96            document.body.style['-moz-user-select'] = 'none';
  97            document.body.style['-ms-user-select'] = 'none';
  98            document.body.style['user-select'] = 'none';
  99          }
 100        }
 101      }
 102  
 103    }
 104  
 105    const onBoot = () => {
 106      let formId = '#adminForm';
 107  
 108      if (Joomla && Joomla.getOptions('js-multiselect', {}).formName) {
 109        formId = `#$Joomla.getOptions('js-multiselect', {}).formName}`;
 110      } // eslint-disable-next-line no-new
 111  
 112  
 113      new JMultiSelect(formId);
 114    };
 115  
 116    document.addEventListener('DOMContentLoaded', onBoot);
 117  })(Joomla);