coral-spectrum/coral-component-shell/src/scripts/ShellUser.js

/**
 * Copyright 2019 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

import {BaseComponent} from '../../../coral-base-component';
import user from '../templates/user';

const CLASSNAME = '_coral-Shell-user';

/**
 Enumeration for {@link ShellUser} avatar options. Avatar assets should use one of those provided, when no asset is set

 @typedef {Object} ShellUserAvatarEnum

 @property {String} DEFAULT
 Default avatar, show user icon from icon font.
 */
const avatar = {
  DEFAULT: 'UserCircleColor_Light'
};

/**
 @class Coral.Shell.User
 @classdesc A Shell User component
 @htmltag coral-shell-user
 @extends {HTMLElement}
 @extends {BaseComponent}
 */
class ShellUser extends BaseComponent(HTMLElement) {
  /** @ignore */
  constructor() {
    super();

    // Prepare templates
    this._elements = {
      // Fetch or create the content zone elements
      name: this.querySelector('coral-shell-user-name') || document.createElement('coral-shell-user-name'),
      heading: this.querySelector('coral-shell-user-heading') || document.createElement('coral-shell-user-heading'),
      subheading: this.querySelector('coral-shell-user-subheading') || document.createElement('coral-shell-user-subheading'),
      content: this.querySelector('coral-shell-user-content') || document.createElement('coral-shell-user-content'),
      footer: this.querySelector('coral-shell-user-footer') || document.createElement('coral-shell-user-footer')
    };

    user.call(this._elements, {icon: avatar.DEFAULT});
  }

  /**
   Specifies the asset used inside the avatar view.
   See {@link Icon} for valid usage and icon names.

   @type {String}
   @default ShellUserAvatarEnum.DEFAULT
   @htmlattribute avatar
   */
  get avatar() {
    return this._elements.avatar.icon;
  }

  set avatar(value) {
    this._elements.avatar.icon = value;
  }

  /**
   The name content zone of the user-menu.

   @type {ShellUserName}
   @contentzone
   */
  get name() {
    return this._getContentZone(this._elements.name);
  }

  set name(value) {
    this._setContentZone('content', value, {
      handle: 'name',
      tagName: 'coral-shell-user-name',
      insert: function (content) {
        this._elements.container.appendChild(content);
      }
    });
  }

  /**
   The heading content zone of the user-menu.

   @type {ShellUserHeading}
   @contentzone
   */
  get heading() {
    return this._getContentZone(this._elements.heading);
  }

  set heading(value) {
    this._setContentZone('heading', value, {
      handle: 'heading',
      tagName: 'coral-shell-user-heading',
      insert: function (content) {
        this._elements.container.appendChild(content);
      }
    });
  }

  /**
   The subheading content zone of the user-menu.

   @type {ShellUserSubheading}
   @contentzone
   */
  get subheading() {
    return this._getContentZone(this._elements.subheading);
  }

  set subheading(value) {
    this._setContentZone('subheading', value, {
      handle: 'subheading',
      tagName: 'coral-shell-user-subheading',
      insert: function (content) {
        this._elements.container.appendChild(content);
      }
    });
  }

  /**
   The main content zone of the user-menu.

   @type {ShellUserContent}
   @contentzone
   */
  get content() {
    return this._getContentZone(this._elements.content);
  }

  set content(value) {
    this._setContentZone('content', value, {
      handle: 'content',
      tagName: 'coral-shell-user-content',
      insert: function (content) {
        // Empty content to hide it
        if (content.innerHTML.trim() === '') {
          content.innerHTML = '';
        }

        this.appendChild(content);
      }
    });
  }

  /**
   The footer content zone of the user-menu.

   @type {ShellUserFooter}
   @contentzone
   */
  get footer() {
    return this._getContentZone(this._elements.footer);
  }

  set footer(value) {
    this._setContentZone('footer', value, {
      handle: 'footer',
      tagName: 'coral-shell-user-footer',
      insert: function (content) {
        this.appendChild(content);
      }
    });
  }

  get _contentZones() {
    return {
      'coral-shell-user-name': 'name',
      'coral-shell-user-heading': 'heading',
      'coral-shell-user-subheading': 'subheading',
      'coral-shell-user-content': 'content',
      'coral-shell-user-footer': 'footer'
    };
  }

  /** @ignore */
  static get observedAttributes() {
    return super.observedAttributes.concat(['avatar']);
  }

  /**
   Returns {@link ShellUser} avatar options.

   @return {ShellUserAvatarEnum}
   */
  static get avatar() {
    return avatar;
  }

  /** @ignore */
  render() {
    super.render();

    this.classList.add(CLASSNAME);

    const frag = document.createDocumentFragment();

    // Render template
    frag.appendChild(this._elements.container);

    for (const contentZone in this._contentZones) {
      const element = this._elements[this._contentZones[contentZone]];
      // Remove it so we can process children
      if (element.parentNode) {
        element.parentNode.removeChild(element);
      }
    }

    while (this.firstChild) {
      const child = this.firstChild;
      if (child.nodeType === Node.TEXT_NODE ||
        child.nodeType === Node.ELEMENT_NODE && child.getAttribute('handle') !== 'container') {
        // Add non-template elements to the content
        this._elements.content.appendChild(child);
      } else {
        // Remove anything else element
        this.removeChild(child);
      }
    }

    this.appendChild(frag);

    // Assign the content zones so the insert functions will be called
    for (const contentZone in this._contentZones) {
      const contentZoneName = this._contentZones[contentZone];
      const element = this._elements[this._contentZones[contentZone]];

      /** @ignore */
      this[contentZoneName] = element;
    }
  }
}

export default ShellUser;