A-Frame Course - Source of /examples/1800-customcomponents-03-toggle-multiple-size.html

<!DOCTYPE html>
<html>
  <head>
    <title>Custom components - 03 - Toggle Multiple Size</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>

    <!-- interaction -->
    <script src="https://unpkg.com/aframe-event-set-component/dist/aframe-event-set-component.min.js"></script>

    <script>
      AFRAME.registerComponent("toggle", {
        schema: {},
        init: function () {
          let _this = this;
          this._clickCount = 0;

          this.el.addEventListener("click", this.onClick.bind(this));
        },
        update: function () {},
        tick: function () {},
        remove: function () {},
        pause: function () {},
        play: function () {},

        onClick: function () {
          this._clickCount = this._clickCount + 1;

          if (this._clickCount % 2 == 0) {
            this.el.emit('toggle_off');
          } else {
            this.el.emit('toggle_on');
          }
        },
      });
    </script>
    <script src="../js/livecode.js"></script>
  </head>
  <body>
    <a-scene cursor="rayOrigin: mouse">
      <a-sky color="lightblue"></a-sky>

      <a-box
        toggle
        event-set__color_on="_event: toggle_on; color: red"
        event-set__color_off="_event: toggle_off; color: blue"
        event-set__size_on="_event: toggle_on; height: 0.5"
        event-set__size_off="_event: toggle_off; height: 1"

        color="blue"
        position="-1 1.6 -2"
      ></a-box>


      <a-camera id="camera"></a-camera>

    </a-scene>
  </body>
</html>