[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  window.customElements.define('joomla-toolbar-button', class extends HTMLElement {
   6    // Attribute getters
   7    get task() {
   8      return this.getAttribute('task');
   9    }
  10  
  11    get listSelection() {
  12      return this.hasAttribute('list-selection');
  13    }
  14  
  15    get form() {
  16      return this.getAttribute('form');
  17    }
  18  
  19    get formValidation() {
  20      return this.hasAttribute('form-validation');
  21    }
  22  
  23    get confirmMessage() {
  24      return this.getAttribute('confirm-message');
  25    }
  26    /**
  27     * Lifecycle
  28     */
  29  
  30  
  31    constructor() {
  32      super();
  33  
  34      if (!Joomla) {
  35        throw new Error('Joomla API is not properly initiated');
  36      }
  37  
  38      this.onChange = this.onChange.bind(this);
  39      this.executeTask = this.executeTask.bind(this);
  40    }
  41    /**
  42     * Lifecycle
  43     */
  44  
  45  
  46    connectedCallback() {
  47      // We need a button to support button behavior,
  48      // because we cannot currently extend HTMLButtonElement
  49      this.buttonElement = this.querySelector('button, a');
  50      this.buttonElement.addEventListener('click', this.executeTask); // Check whether we have a form
  51  
  52      const formSelector = this.form || 'adminForm';
  53      this.formElement = document.getElementById(formSelector);
  54      this.disabled = false; // If list selection is required, set button to disabled by default
  55  
  56      if (this.listSelection) {
  57        this.setDisabled(true);
  58      }
  59  
  60      if (this.listSelection) {
  61        if (!this.formElement) {
  62          throw new Error(`The form "$formSelector}" is required to perform the task, but the form was not found on the page.`);
  63        } // Watch on list selection
  64  
  65  
  66        this.formElement.boxchecked.addEventListener('change', this.onChange);
  67      }
  68    }
  69    /**
  70     * Lifecycle
  71     */
  72  
  73  
  74    disconnectedCallback() {
  75      if (this.formElement.boxchecked) {
  76        this.formElement.boxchecked.removeEventListener('change', this.onChange);
  77      }
  78  
  79      this.buttonElement.removeEventListener('click', this.executeTask);
  80    }
  81  
  82    onChange({
  83      target
  84    }) {
  85      // Check whether we have selected something
  86      this.setDisabled(target.value < 1);
  87    }
  88  
  89    setDisabled(disabled) {
  90      // Make sure we have a boolean value
  91      this.disabled = !!disabled; // Switch attribute for native element
  92      // An anchor does not support "disabled" attribute, so use class
  93  
  94      if (this.buttonElement) {
  95        if (this.disabled) {
  96          if (this.buttonElement.nodeName === 'BUTTON') {
  97            this.buttonElement.disabled = true;
  98          } else {
  99            this.buttonElement.classList.add('disabled');
 100          }
 101        } else if (this.buttonElement.nodeName === 'BUTTON') {
 102          this.buttonElement.disabled = false;
 103        } else {
 104          this.buttonElement.classList.remove('disabled');
 105        }
 106      }
 107    }
 108  
 109    executeTask() {
 110      if (this.disabled) {
 111        return false;
 112      } // eslint-disable-next-line no-restricted-globals
 113  
 114  
 115      if (this.confirmMessage && !confirm(this.confirmMessage)) {
 116        return false;
 117      }
 118  
 119      if (this.task) {
 120        Joomla.submitbutton(this.task, this.form, this.formValidation);
 121      }
 122  
 123      return true;
 124    }
 125  
 126  });