aframe-input/lib/a-input-cursor.js

Using input element in AFRAME!

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _constants = require("./constants");

var POSITION_Z = 0.004;
AFRAME.registerComponent('input-cursor', {
  schema: {
    color: {
      type: 'color',
      "default": '#000'
    },
    opacity: {
      type: 'number',
      "default": 0.5
    },
    selectionStart: {
      type: 'number',
      "default": 0
    },
    selectionEnd: {
      type: 'number',
      "default": 0
    }
  },

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

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

  /** @private */
  initSide: function initSide(side) {
    this.side[side].setAttribute('side', side);
    this.side[side].setAttribute('position', {
      x: this.data.selectionEnd,
      y: 0,
      z: side === 'front' ? POSITION_Z : -POSITION_Z
    });
    this.side[side].setAttribute('color', this.data.color);
    this.side[side].setAttribute('opacity', this.data.opacity);
    this.side[side].setAttribute('transparent', true);
    this.side[side].setAttribute('width', this.data.selectionEnd - this.data.selectionStart + 0.01);
    this.side[side].setAttribute('height', 0.25);
    this.side[side].setAttribute('animation', {
      property: 'opacity',
      from: this.data.opacity,
      to: 0,
      loop: true,
      dur: 1000,
      dir: 'alternate'
    });
    this.el.appendChild(this.side[side]);
    this.el.setAttribute('visible', false);
  },
  update: function update({
    color: color,
    opacity: opacity,
    selectionStart: selectionStart,
    selectionEnd: selectionEnd
  }) {
    if (color !== this.data.color) {
      this.updateColor();
    }

    if (opacity !== this.data.opacity) {
      this.updateOpacity();
    }

    if (selectionStart !== this.data.selectionStart) {
      this.selectionStart();
    }

    if (selectionEnd !== this.data.selectionEnd) {
      this.selectionEnd();
    }
  },

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

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

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

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

    _constants.SIDES.forEach(function (side) {
      return _this3.side[side].setAttribute('animation', 'from', _this3.data.opacity);
    });
  },

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

    var selectionDiff = this.data.selectionEnd - this.data.selectionStart;
    var calibrationTextPosition = selectionDiff === 0 ? 0 : selectionDiff / 2;
    var positionX = this.data.selectionStart + calibrationTextPosition;

    _constants.SIDES.forEach(function (side) {
      return _this4.side[side].setAttribute('position', {
        x: positionX || 0,
        y: 0,
        z: side === 'front' ? POSITION_Z : -POSITION_Z
      });
    });

    _constants.SIDES.forEach(function (side) {
      return _this4.side[side].setAttribute('width', _this4.data.selectionEnd - _this4.data.selectionStart + 0.01);
    });
  },

  /** @private */
  selectionEnd: function selectionEnd() {
    var _this5 = this;

    var selectionDiff = this.data.selectionEnd - this.data.selectionStart;
    var calibrationTextPosition = selectionDiff === 0 ? 0 : selectionDiff / 2;
    var positionX = this.data.selectionStart + calibrationTextPosition;

    _constants.SIDES.forEach(function (side) {
      return _this5.side[side].setAttribute('position', {
        x: positionX || 0,
        y: 0,
        z: side === 'front' ? POSITION_Z : -POSITION_Z
      });
    });

    _constants.SIDES.forEach(function (side) {
      return _this5.side[side].setAttribute('width', _this5.data.selectionEnd - _this5.data.selectionStart + 0.01);
    });
  }
});
AFRAME.registerPrimitive('a-input-cursor', {
  defaultComponents: {
    'input-cursor': {}
  },
  mappings: {
    color: 'input-cursor.color',
    opacity: 'input-cursor.opacity',
    'selection-start': 'input-cursor.selectionStart',
    'selection-end': 'input-cursor.selectionEnd'
  }
});
var _default = {};
exports["default"] = _default;