[Summary view] [Print] [Text view]

   1  /**
   2   * @copyright  (C) 2019 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-field-permissions', class extends HTMLElement {
   6    constructor() {
   7      super();
   8  
   9      if (!Joomla) {
  10        throw new Error('Joomla API is not properly initiated');
  11      }
  12  
  13      if (!this.getAttribute('data-uri')) {
  14        throw new Error('No valid url for validation');
  15      }
  16  
  17      this.query = window.location.search.substring(1);
  18      this.buttons = '';
  19      this.buttonDataSelector = 'data-onchange-task';
  20      this.onDropdownChange = this.onDropdownChange.bind(this);
  21      this.getUrlParam = this.getUrlParam.bind(this);
  22      this.component = this.getUrlParam('component');
  23      this.extension = this.getUrlParam('extension');
  24      this.option = this.getUrlParam('option');
  25      this.view = this.getUrlParam('view');
  26      this.asset = 'not';
  27      this.context = '';
  28    }
  29    /**
  30     * Lifecycle
  31     */
  32  
  33  
  34    connectedCallback() {
  35      this.buttons = [].slice.call(document.querySelectorAll(`[$this.buttonDataSelector}]`));
  36  
  37      if (this.buttons) {
  38        this.buttons.forEach(button => {
  39          button.addEventListener('change', this.onDropdownChange);
  40        });
  41      }
  42    }
  43    /**
  44     * Lifecycle
  45     */
  46  
  47  
  48    disconnectedCallback() {
  49      if (this.buttons) {
  50        this.buttons.forEach(button => {
  51          button.removeEventListener('change', this.onDropdownChange);
  52        });
  53      }
  54    }
  55    /**
  56     * Lifecycle
  57     */
  58  
  59  
  60    onDropdownChange(event) {
  61      event.preventDefault();
  62      const task = event.target.getAttribute(this.buttonDataSelector);
  63  
  64      if (task === 'permissions.apply') {
  65        this.sendPermissions(event);
  66      }
  67    }
  68  
  69    sendPermissions(event) {
  70      const {
  71        target
  72      } = event; // Set the icon while storing the values
  73  
  74      const icon = document.getElementById(`icon_$target.id}`);
  75      icon.removeAttribute('class');
  76      icon.setAttribute('class', 'joomla-icon joomla-field-permissions__spinner'); // Get values add prepare GET-Parameter
  77  
  78      const {
  79        value
  80      } = target;
  81  
  82      if (document.getElementById('jform_context')) {
  83        this.context = document.getElementById('jform_context').value;
  84        [this.context] = this.context.split('.');
  85      }
  86  
  87      if (this.option === 'com_config' && !this.component && !this.extension) {
  88        this.asset = 'root.1';
  89      } else if (!this.extension && this.view === 'component') {
  90        this.asset = this.component;
  91      } else if (this.context) {
  92        if (this.view === 'group') {
  93          this.asset = `$this.context}.fieldgroup.$this.getUrlParam('id')}`;
  94        } else {
  95          this.asset = `$this.context}.field.{this.getUrlParam('id')}`;
  96        }
  97  
  98        this.title = document.getElementById('jform_title').value;
  99      } else if (this.extension && this.view) {
 100        this.asset = `$this.extension}.$this.view}.$this.getUrlParam('id')}`;
 101        this.title = document.getElementById('jform_title').value;
 102      } else if (!this.extension && this.view) {
 103        this.asset = `$this.option}.$this.view}.$this.getUrlParam('id')}`;
 104        this.title = document.getElementById('jform_title').value;
 105      }
 106  
 107      const id = target.id.replace('jform_rules_', '');
 108      const lastUnderscoreIndex = id.lastIndexOf('_');
 109      const permissionData = {
 110        comp: this.asset,
 111        action: id.substring(0, lastUnderscoreIndex),
 112        rule: id.substring(lastUnderscoreIndex + 1),
 113        value,
 114        title: this.title
 115      }; // Remove JS messages, if they exist.
 116  
 117      Joomla.removeMessages(); // Ajax request
 118  
 119      Joomla.request({
 120        url: this.getAttribute('data-uri'),
 121        method: 'POST',
 122        data: JSON.stringify(permissionData),
 123        perform: true,
 124        headers: {
 125          'Content-Type': 'application/json'
 126        },
 127        onSuccess: data => {
 128          let response;
 129  
 130          try {
 131            response = JSON.parse(data);
 132          } catch (e) {
 133            // eslint-disable-next-line no-console
 134            console.error(e);
 135          }
 136  
 137          icon.removeAttribute('class'); // Check if everything is OK
 138  
 139          if (response.data && response.data.result) {
 140            icon.setAttribute('class', 'joomla-icon joomla-field-permissions__allowed');
 141            const badgeSpan = target.parentNode.parentNode.nextElementSibling.querySelector('span');
 142            badgeSpan.removeAttribute('class');
 143            badgeSpan.setAttribute('class', response.data.class);
 144            badgeSpan.innerHTML = Joomla.sanitizeHtml(response.data.text);
 145          } // Render messages, if any. There are only message in case of errors.
 146  
 147  
 148          if (typeof response.messages === 'object' && response.messages !== null) {
 149            Joomla.renderMessages(response.messages);
 150  
 151            if (response.data && response.data.result) {
 152              icon.setAttribute('class', 'joomla-icon joomla-field-permissions__allowed');
 153            } else {
 154              icon.setAttribute('class', 'joomla-icon joomla-field-permissions__denied');
 155            }
 156          }
 157        },
 158        onError: xhr => {
 159          // Remove the spinning icon.
 160          icon.removeAttribute('style');
 161          Joomla.renderMessages(Joomla.ajaxErrorsMessages(xhr, xhr.statusText));
 162          icon.setAttribute('class', 'joomla-icon joomla-field-permissions__denied');
 163        }
 164      });
 165    }
 166  
 167    getUrlParam(variable) {
 168      const vars = this.query.split('&');
 169      let i = 0;
 170  
 171      for (i; i < vars.length; i += 1) {
 172        const pair = vars[i].split('=');
 173  
 174        if (pair[0] === variable) {
 175          return pair[1];
 176        }
 177      }
 178  
 179      return false;
 180    }
 181  
 182  });