Custom Field Editor Example

This example creates field editor that allows integer values to be set and displayed using a slider. Note that the value of the field is written/read using the component's value attribute.

// Creates an object based in the HTML Element prototype
class MySlider extends HTMLElement {
  // Fires when an instance of the element is created
  constructor() {
    super();

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          margin: 0;
          padding: 0px;
          width: 100%;
          display: block;
        }

        .spacer {
          padding: 10px;
          height: 30px;
          overflow: hidden;
        }

        #thefield {
          width: 100%;
        }
      </style>
      <div class="spacer">
        <input id="thefield" type="range" max="100" min="0" value="0"><br/>
      </div>
    `;
  }

  readOnlyCallback() {
    this.shadowRoot.querySelector('#thefield').readOnly = this.cueInterface.readOnly;
  }

  static get observedAttributes() {
    return ['value'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'value') {
      this.shadowRoot.querySelector('input').value = newValue;
    }
  }

  connectedCallback() {
    // getting initial value of value attribute
    const value = this.hasAttribute('value') ?
        this.getAttribute('value') : '';

    // setting value property of input element
    this.shadowRoot.querySelector('input').value = value;
    this.shadowRoot.querySelector('input').addEventListener('input', e => {
      this.setAttribute('value', e.target.value);
    });

    // Add a watcher that will watch on if the custom field is locked.
    // If locked then invoke the callback function and make the field readonly.
    if (this.cueInterface) {
      this.cueInterface.addReadOnlyWatcher(() => this.readOnlyCallback());
    }
  }
}
customElements.define('my-slider', MySlider);