JSFiddle - React, Tailwind, and code Playground

by webrealizer

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://rawgit.com/bBlocks/component/master/component.polyfills.min.js"></script>
<script src="https://rawgit.com/bBlocks/component/master/component.min.js"></script>
<div class="container">
  <h2>Extending native elements</h2>
  <form>
    <div class="well">
      <button type="button" is="my-custom-button" class="btn btn-primary">Toggle loading</button>
    </div>
  </form>
</div>

JavaScript

/**
* Display spinner
 */
var loadingFeature = new bb.feature({
  loadingIcon: null,
  loading: function() {
    if (!this.loadingIcon) {
      this.loadingIcon = this.querySelector('img');
      if (!this.loadingIcon) {
        this.loadingIcon =document.createElement('img');
        this.loadingIcon.src = 'https://rawgit.com/bBlocks/component/master/docs/loader.svg';
        this.style.position = 'relative';
        Object.assign(this.loadingIcon.style, {
          position: 'absolute',
          bottom: '0',
          left: '50%',
          marginLeft: '-15px',
          width: '30px'
        });
        this.appendChild(this.loadingIcon);
      }
    }

    if (this.isLoading) {
      this.loadingIcon.style.display = 'block';
      this.style.opacity = '0.5';
    } else {
      this.loadingIcon.style.display = 'none';
      this.style.opacity = '1';
    }

  },
  _isLoading: false,
  define: { 
    isLoading: {
      get: function() {
        return this._isLoading;
      },
      set: function(newValue) {
        this._isLoading = newValue;
        this.loading();
      }
    }
  }

});

/**
* Extend button element and add loading feature
*/
var myCustomButton = bb.component({
  is: 'my-custom-button',
  tag: 'button',
  extends: HTMLButtonElement,
  on: {
    click: function() {
      this.isLoading = !this.isLoading;
    }
  }
}, loadingFeature);