aframe-input/lib/a-input-text-box.mjs

Using input element in AFRAME!

import { SIDES } from "./constants.mjs";
var POSITION_Z = 0.001;
AFRAME.registerComponent('input-text-box', {
  schema: {
    width: {
      type: 'number',
      "default": 5
    },
    height: {
      type: 'number',
      "default": 1
    },
    color: {
      type: 'color',
      "default": '#FFF'
    },
    borderColor: {
      type: 'color',
      "default": '#000'
    },
    borderWidth: {
      type: 'number',
      "default": 0.1
    }
  },

  /** @private */
  side: {
    front: document.createElement('a-plane'),
    back: document.createElement('a-plane')
  },

  /** @private */
  border: document.createElement('a-plane'),
  init: function init() {
    var _this = this;

    this.initBorder();
    SIDES.forEach(function (side) {
      return _this.initSide(side);
    });
  },

  /** @private */
  initBorder: function initBorder() {
    this.border.setAttribute('side', 'double');
    this.el.appendChild(this.border);
  },

  /** @private */
  initSide: function initSide(side) {
    this.side[side].setAttribute('side', side);
    this.side[side].setAttribute('position', {
      x: 0,
      y: 0,
      z: side === 'front' ? POSITION_Z : -POSITION_Z
    });
    this.el.appendChild(this.side[side]);
  },
  update: function update({
    width: width,
    height: height,
    color: color,
    borderColor: borderColor,
    borderWidth: borderWidth
  }) {
    if (width !== this.data.width) {
      this.updateWidth();
      this.updateBorderWidth();
    }

    if (height !== this.data.height) {
      this.updateHeight();
      this.updateBorderHeight();
    }

    if (color !== this.data.color) {
      this.updateColor();
    }

    if (borderColor !== this.data.borderColor) {
      this.updateBorderColor();
    }

    if (borderWidth !== this.data.borderWidth) {
      this.updateBorderWidth();
      this.updateBorderHeight();
    }
  },

  /** @private */
  updateBorderWidth: function updateBorderWidth() {
    this.border.setAttribute('width', this.data.width + this.data.borderWidth);
  },

  /** @private */
  updateBorderHeight: function updateBorderHeight() {
    this.border.setAttribute('height', this.data.height + this.data.borderWidth);
  },

  /** @private */
  updateWidth: function updateWidth() {
    var _this2 = this;

    SIDES.forEach(function (side) {
      return _this2.side[side].setAttribute('width', _this2.data.width);
    });
  },

  /** @private */
  updateHeight: function updateHeight() {
    var _this3 = this;

    SIDES.forEach(function (side) {
      return _this3.side[side].setAttribute('height', _this3.data.height);
    });
  },

  /** @private */
  updateColor: function updateColor() {
    var _this4 = this;

    SIDES.forEach(function (side) {
      return _this4.side[side].setAttribute('color', _this4.data.color);
    });
  },

  /** @private */
  updateBorderColor: function updateBorderColor() {
    this.border.setAttribute('color', this.data.borderColor);
  }
});
AFRAME.registerPrimitive('a-input-text-box', {
  defaultComponents: {
    'input-text-box': {}
  },
  mappings: {
    width: 'input-text-box.width',
    height: 'input-text-box.height',
    color: 'input-text-box.color',
    'border-color': 'input-text-box.borderColor',
    'border-width': 'input-text-box.borderWidth'
  }
});
export default {};