[Summary view] [Print] [Text view]

   1  /**
   2   * @package         Joomla.JavaScript
   3   * @copyright       (C) 2019 Open Source Matters, Inc. <https://www.joomla.org>
   4   * @license         GNU General Public License version 2 or later; see LICENSE.txt
   5   */
   6  customElements.define('joomla-field-module-order', class extends HTMLElement {
   7    constructor() {
   8      super();
   9      this.linkedFieldSelector = '';
  10      this.linkedFieldElement = '';
  11      this.originalPosition = '';
  12      this.writeDynaList.bind(this);
  13      this.getNewOrder.bind(this);
  14    }
  15  
  16    connectedCallback() {
  17      this.linkedFieldSelector = this.getAttribute('data-linked-field') || 'jform_position';
  18  
  19      if (!this.linkedFieldSelector) {
  20        throw new Error('No linked field defined!');
  21      }
  22  
  23      this.linkedFieldElement = document.getElementById(this.linkedFieldSelector);
  24  
  25      if (!this.linkedFieldElement) {
  26        throw new Error('No linked field defined!');
  27      }
  28  
  29      const that = this;
  30      this.originalPosition = this.linkedFieldElement.value;
  31      /** Initialize the field * */
  32  
  33      this.getNewOrder(this.originalPosition);
  34      /** Watch for changes on the linked field * */
  35  
  36      this.linkedFieldElement.addEventListener('change', () => {
  37        that.originalPosition = that.linkedFieldElement.value;
  38        that.getNewOrder(that.linkedFieldElement.value);
  39      });
  40    }
  41  
  42    writeDynaList(selectProperties, source, originalPositionName, originalPositionValue) {
  43      let i = 0;
  44      const selectNode = document.createElement('select');
  45  
  46      if (this.hasAttribute('disabled')) {
  47        selectNode.setAttribute('disabled', '');
  48      }
  49  
  50      if (this.getAttribute('onchange')) {
  51        selectNode.setAttribute('onchange', this.getAttribute('onchange'));
  52      }
  53  
  54      if (this.getAttribute('size')) {
  55        selectNode.setAttribute('size', this.getAttribute('size'));
  56      }
  57  
  58      selectNode.classList.add(selectProperties.itemClass);
  59      selectNode.setAttribute('name', selectProperties.name);
  60      selectNode.id = selectProperties.id; // eslint-disable-next-line no-restricted-syntax
  61  
  62      for (const x in source) {
  63        // eslint-disable-next-line no-prototype-builtins
  64        if (!source.hasOwnProperty(x)) {
  65          // eslint-disable-next-line no-continue
  66          continue;
  67        }
  68  
  69        const node = document.createElement('option');
  70        const item = source[x]; // eslint-disable-next-line prefer-destructuring
  71  
  72        node.value = item[1]; // eslint-disable-next-line prefer-destructuring
  73  
  74        node.innerHTML = Joomla.sanitizeHtml(item[2]);
  75  
  76        if (originalPositionName && originalPositionValue === item[1] || !originalPositionName && i === 0) {
  77          node.setAttribute('selected', 'selected');
  78        }
  79  
  80        selectNode.appendChild(node);
  81        i += 1;
  82      }
  83  
  84      this.innerHTML = '';
  85      this.appendChild(selectNode);
  86    }
  87  
  88    getNewOrder(originalPosition) {
  89      const url = this.getAttribute('data-url');
  90      const clientId = this.getAttribute('data-client-id');
  91      const originalOrder = this.getAttribute('data-ordering');
  92      const name = this.getAttribute('data-name');
  93      const attr = this.getAttribute('data-client-attr') ? this.getAttribute('data-client-attr') : 'form-select';
  94      const id = `$this.getAttribute('data-id')}`;
  95      const moduleId = `$this.getAttribute('data-module-id')}`;
  96      const orders = [];
  97      const that = this;
  98      Joomla.request({
  99        url: `$url}&client_id=$clientId}&position=$originalPosition}&module_id=$moduleId}`,
 100        method: 'GET',
 101        perform: true,
 102        headers: {
 103          'Content-Type': 'application/x-www-form-urlencoded'
 104        },
 105  
 106        onSuccess(resp) {
 107          if (resp) {
 108            let response;
 109  
 110            try {
 111              response = JSON.parse(resp);
 112            } catch (e) {
 113              // eslint-disable-next-line no-console
 114              console.error(e);
 115            }
 116            /** Check if everything is OK * */
 117  
 118  
 119            if (response.data.length > 0) {
 120              for (let i = 0; i < response.data.length; i += 1) {
 121                orders[i] = response.data[i].split(',');
 122              }
 123  
 124              that.writeDynaList({
 125                name,
 126                id,
 127                itemClass: attr
 128              }, orders, that.originalPosition, originalOrder);
 129            }
 130          }
 131          /** Render messages, if any. There are only message in case of errors. * */
 132  
 133  
 134          if (typeof resp.messages === 'object' && resp.messages !== null) {
 135            Joomla.renderMessages(resp.messages);
 136          }
 137        }
 138  
 139      });
 140    }
 141  
 142  });