Method setAttribute

src/core/a-entity.js:629–679

* setAttribute can: * * 1. Set a single property of a multi-property component. * 2. Set multiple properties of a multi-property component. * 3. Replace properties of a multi-property component. * 4. Set a value for a single-property component, mixin, or normal HTML attribute. *

(attrName, arg1, arg2)

   *   it is a boolean indicating whether to clobber previous values (defaults to false).
   */
  setAttribute (attrName, arg1, arg2) {
    var singlePropUpdate = AEntity.singlePropUpdate;

    var newAttrValue;
    var clobber;
    var componentName;
    var delimiterIndex;
    var isDebugMode;
    var key;

    delimiterIndex = attrName.indexOf(MULTIPLE_COMPONENT_DELIMITER);
    componentName = delimiterIndex > 0 ? attrName.substring(0, delimiterIndex) : attrName;

    // Not a component. Normal set attribute.
    if (!COMPONENTS[componentName]) {
      if (attrName === 'mixin') { this.mixinUpdate(arg1); }
      super.setAttribute.call(this, attrName, arg1);
      return;
    }

    // Initialize component first if not yet initialized.
    if (!this.components[attrName] && this.hasAttribute(attrName)) {
      this.updateComponent(
        attrName,
        window.HTMLElement.prototype.getAttribute.call(this, attrName));
    }

    // Determine new attributes from the arguments
    if (typeof arg2 !== 'undefined' &&
        typeof arg1 === 'string' &&
        arg1.length > 0 &&
        typeof utils.styleParser.parse(arg1) === 'string') {
      // Update a single property of a multi-property component
      for (key in singlePropUpdate) { delete singlePropUpdate[key]; }
      newAttrValue = singlePropUpdate;
      newAttrValue[arg1] = arg2;
      clobber = false;
    } else {
      // Update with a value, object, or CSS-style property string, with the possibility
      // of clobbering previous values.
      newAttrValue = arg1;
      clobber = (arg2 === true);
    }

    // Update component
    this.updateComponent(attrName, newAttrValue, clobber);

    // In debug mode, write component data up to the DOM.
    isDebugMode = this.sceneEl && this.sceneEl.getAttribute('debug');
    if (isDebugMode) { this.components[attrName].flushToDOM(); }
  }

  /**
   * Reflect component data in the DOM (as seen from the browser DOM Inspector).