[Summary view] [Print] [Text view]

   1  ((customElements, Joomla) => {
   2    class JoomlaFieldUser extends HTMLElement {
   3      constructor() {
   4        super();
   5        this.onUserSelect = '';
   6        this.onchangeStr = ''; // Bind events
   7  
   8        this.buttonClick = this.buttonClick.bind(this);
   9        this.iframeLoad = this.iframeLoad.bind(this);
  10        this.modalClose = this.modalClose.bind(this);
  11        this.setValue = this.setValue.bind(this);
  12      }
  13  
  14      static get observedAttributes() {
  15        return ['url', 'modal', 'modal-width', 'modal-height', 'input', 'input-name', 'button-select'];
  16      }
  17  
  18      get url() {
  19        return this.getAttribute('url');
  20      }
  21  
  22      set url(value) {
  23        this.setAttribute('url', value);
  24      }
  25  
  26      get modalClass() {
  27        return this.getAttribute('modal');
  28      }
  29  
  30      set modalClass(value) {
  31        this.setAttribute('modal', value);
  32      }
  33  
  34      get modalWidth() {
  35        return this.getAttribute('modal-width');
  36      }
  37  
  38      set modalWidth(value) {
  39        this.setAttribute('modal-width', value);
  40      }
  41  
  42      get modalHeight() {
  43        return this.getAttribute('modal-height');
  44      }
  45  
  46      set modalHeight(value) {
  47        this.setAttribute('modal-height', value);
  48      }
  49  
  50      get inputId() {
  51        return this.getAttribute('input');
  52      }
  53  
  54      set inputId(value) {
  55        this.setAttribute('input', value);
  56      }
  57  
  58      get inputNameClass() {
  59        return this.getAttribute('input-name');
  60      }
  61  
  62      set inputNameClass(value) {
  63        this.setAttribute('input-name', value);
  64      }
  65  
  66      get buttonSelectClass() {
  67        return this.getAttribute('button-select');
  68      }
  69  
  70      set buttonSelectClass(value) {
  71        this.setAttribute('button-select', value);
  72      }
  73  
  74      connectedCallback() {
  75        // Set up elements
  76        this.modal = this.querySelector(this.modalClass);
  77        this.modalBody = this.querySelector('.modal-body');
  78        this.input = this.querySelector(this.inputId);
  79        this.inputName = this.querySelector(this.inputNameClass);
  80        this.buttonSelect = this.querySelector(this.buttonSelectClass); // Bootstrap modal init
  81  
  82        if (this.modal && window.bootstrap && window.bootstrap.Modal && !window.bootstrap.Modal.getInstance(this.modal)) {
  83          Joomla.initialiseModal(this.modal, {
  84            isJoomla: true
  85          });
  86        }
  87  
  88        if (this.buttonSelect) {
  89          this.buttonSelect.addEventListener('click', this.modalOpen.bind(this));
  90          this.modal.addEventListener('hide', this.removeIframe.bind(this)); // Check for onchange callback,
  91  
  92          this.onchangeStr = this.input.getAttribute('data-onchange');
  93  
  94          if (this.onchangeStr) {
  95            /* eslint-disable */
  96            this.onUserSelect = new Function(this.onchangeStr);
  97            this.input.addEventListener('change', this.onUserSelect);
  98            /* eslint-enable */
  99          }
 100        }
 101      }
 102  
 103      disconnectedCallback() {
 104        if (this.onchangeStr && this.input) {
 105          this.input.removeEventListener('change', this.onUserSelect);
 106        }
 107  
 108        if (this.buttonSelect) {
 109          this.buttonSelect.removeEventListener('click', this);
 110        }
 111  
 112        if (this.modal) {
 113          this.modal.removeEventListener('hide', this);
 114        }
 115      }
 116  
 117      buttonClick({
 118        target
 119      }) {
 120        this.setValue(target.getAttribute('data-user-value'), target.getAttribute('data-user-name'));
 121        this.modalClose();
 122      }
 123  
 124      iframeLoad() {
 125        const iframeDoc = this.iframeEl.contentWindow.document;
 126        const buttons = [].slice.call(iframeDoc.querySelectorAll('.button-select'));
 127        buttons.forEach(button => {
 128          button.addEventListener('click', this.buttonClick);
 129        });
 130      } // Opens the modal
 131  
 132  
 133      modalOpen() {
 134        // Reconstruct the iframe
 135        this.removeIframe();
 136        const iframe = document.createElement('iframe');
 137        iframe.setAttribute('name', 'field-user-modal');
 138        iframe.src = this.url.replace('{field-user-id}', this.input.getAttribute('id'));
 139        iframe.setAttribute('width', this.modalWidth);
 140        iframe.setAttribute('height', this.modalHeight);
 141        this.modalBody.appendChild(iframe);
 142        this.modal.open();
 143        this.iframeEl = this.modalBody.querySelector('iframe'); // handle the selection on the iframe
 144  
 145        this.iframeEl.addEventListener('load', this.iframeLoad);
 146      } // Closes the modal
 147  
 148  
 149      modalClose() {
 150        Joomla.Modal.getCurrent().close();
 151        this.modalBody.innerHTML = '';
 152      } // Remove the iframe
 153  
 154  
 155      removeIframe() {
 156        this.modalBody.innerHTML = '';
 157      } // Sets the value
 158  
 159  
 160      setValue(value, name) {
 161        this.input.setAttribute('value', value);
 162        this.inputName.setAttribute('value', name || value); // trigger change event both on the input and on the custom element
 163  
 164        this.input.dispatchEvent(new Event('change'));
 165        this.dispatchEvent(new CustomEvent('change', {
 166          detail: {
 167            value,
 168            name
 169          },
 170          bubbles: true
 171        }));
 172      }
 173  
 174    }
 175  
 176    customElements.define('joomla-field-user', JoomlaFieldUser);
 177  })(customElements, Joomla);