aframe-input/lib/index.mjs

Using input element in AFRAME!

import 'aframe-troika-text';
import "./a-input-text-box.mjs";
import "./a-input-text.mjs";
import "./a-input-cursor.mjs";
AFRAME.registerComponent('aframe-input', {
  /** @private */
  inputTextBox: document.createElement('a-input-text-box'),

  /** @private */
  inputText: document.createElement('a-input-text'),

  /** @private */
  inputCursor: document.createElement('a-input-cursor'),

  /** @private */
  input: document.createElement('input'),
  schema: {
    value: {
      type: 'string',
      "default": ''
    },
    font: {
      type: 'string',
      "default": ''
    },
    width: {
      type: 'number',
      "default": 5
    },
    height: {
      type: 'number',
      "default": 1
    },
    backgroundColor: {
      type: 'color',
      "default": '#FFF'
    },
    borderColor: {
      type: 'color',
      "default": '#000'
    },
    borderWidth: {
      type: 'number',
      "default": 0.1
    },
    focusBorderColor: {
      type: 'color',
      "default": '#719ECE'
    }
  },
  init: function init() {
    this.el.appendChild(this.inputTextBox);
    this.el.appendChild(this.inputText);
    this.el.appendChild(this.inputCursor);
    this.el.appendChild(this.input);
    this.inputText.setAttribute('position-x', -this.data.width / 2 + 0.1);
    this.setInputStyle();
    this.initInputEvent();
  },
  setInputStyle: function setInputStyle() {
    this.input.style.position = 'absolute';
    this.input.style.top = '-999px';
    this.input.style.left = '-999px';
  },
  initInputEvent: function initInputEvent() {
    var _this = this;

    this.el.addEventListener('click', function () {
      _this.setInputCursorLastPosition();

      _this.input.focus();
    });
    this.input.setAttribute('value', this.data.value);
    this.input.addEventListener('focus', function () {
      _this.inputTextBox.setAttribute('border-color', _this.data.focusBorderColor);

      _this.inputCursor.setAttribute('visible', true); // @ts-ignore


      var textSize = _this.inputText.components['input-text'].width / _this.input.value.length;

      _this.inputCursor.setAttribute('selection-start', _this.input.selectionStart * textSize - _this.data.width / 2 + 0.1);

      _this.inputCursor.setAttribute('selection-end', _this.input.selectionEnd * textSize - _this.data.width / 2 + 0.1);
    });
    this.input.addEventListener('blur', function () {
      _this.inputTextBox.setAttribute('border-color', _this.data.borderColor);

      _this.inputCursor.setAttribute('visible', false);
    });
    this.input.addEventListener('input', function () {
      return _this.el.setAttribute('aframe-input', 'value', _this.input.value);
    });
    this.input.addEventListener('keyup', function () {
      // @ts-ignore
      var textSize = _this.inputText.components['input-text'].width / _this.input.value.length || 0;

      _this.inputCursor.setAttribute('selection-start', _this.input.selectionStart * textSize - _this.data.width / 2 + 0.1);

      _this.inputCursor.setAttribute('selection-end', _this.input.selectionEnd * textSize - _this.data.width / 2 + 0.1);
    });
  },
  setInputCursorLastPosition: function setInputCursorLastPosition() {
    this.input.setSelectionRange(this.input.value.length, this.input.value.length);
  },
  update: function update(oldData) {
    if (oldData.value !== this.data.value) {
      this.inputText.setAttribute('value', this.data.value);
    }

    if (oldData.font !== this.data.font) {
      this.inputText.setAttribute('font', this.data.font);
    }

    if (oldData.width !== this.data.width) {
      this.inputTextBox.setAttribute('width', this.data.width);
    }

    if (oldData.height !== this.data.height) {
      this.inputTextBox.setAttribute('height', this.data.height);
    }

    if (oldData.backgroundColor !== this.data.backgroundColor) {
      this.inputTextBox.setAttribute('color', this.data.backgroundColor);
    }

    if (oldData.borderColor !== this.data.borderColor) {
      this.inputTextBox.setAttribute('border-color', this.data.borderColor);
    }

    if (oldData.borderWidth !== this.data.borderWidth) {
      this.inputTextBox.setAttribute('border-width', this.data.borderWidth);
    }
  }
});
AFRAME.registerPrimitive('a-input', {
  defaultComponents: {
    'aframe-input': {}
  },
  mappings: {
    value: 'aframe-input.value',
    font: 'aframe-input.font',
    width: 'aframe-input.width',
    height: 'aframe-input.height',
    'background-color': 'aframe-input.backgroundColor',
    'border-color': 'aframe-input.borderColor',
    'border-width': 'aframe-input.borderWidth',
    'focus-border-color': 'aframe-input.focusBorderColor'
  }
});
export default {};