bootstrap_italia-8.x-0.x-dev/components/components-2/avatar/avatar.html.twig

{#
/**
 * @file
 * Template for avatar component.
 * Docs: https://italia.github.io/bootstrap-italia/docs/componenti/avatar/
 * Latest revision: v2.8.7
 *
 * Parameters:
 * - avatar_type (string) (default: 'icon')
 *   - options ["icon", "image", "text"]
 * - avatar_icon (string) (default: 'it-user')
 *   - options ["it-icon-name"]
 * - avatar_icon_color (string) (default: 'primary')
 *   - options ["primary", "secondary", "success", "warning", "danger"]
 * - avatar_image (drupal field) (default: '')
 *   - option ["field_image", "field_text", "..."]
 * - avatar_text (string) (default: 'U')
 * - avatar_text_color (string) (default: 'primary')
 *   - options ["primary", "secondary", "green", "orange", "red"]
 * - avatar_assistive_text (string) (default: 'User')
 * - avatar_size (string) (default: 'md')
 *   - options ["xs", "sm", "md", "lg", "xl", "xxl"]
 * - avatar_url (string) (default: '')
 * - avatar_tooltip_text (string) (default: '')
 * - avatar_tooltip_placement (string) (default: 'left')
 *   - options ["top", "bottom", "left", "right"]
 * - avatar_presence (string) (default: '')
 *   - options ["active", "busy", "hidden"]
 * - avatar_presence_text (string) (default: '')
 * - avatar_status (string) (default: '')
 *   - options ["approved", "declined", "notify"]
 * - avatar_status_text (string) (default: '')
 * - avatar_classes (array) (default: '')
 * - avatar_attributes (obj attribute) (default: '')
 *
 * - avatarContent (block)
 *   - block content
 * - avatarPresence (block)
 * - avatarStatus (block)
 *
 * Examples base:
   {% include '@bi-bcl/avatar/avatar.html.twig' with {
      avatar_type: 'image',
      avatar_image: field_user_picture,
      avatar_size: 'xl'
   } %}
 *
 * Examples link:
   {% include '@bi-bcl/avatar/avatar.html.twig' with {
      avatar_type: 'image',
      avatar_image: field_user_picture,
      avatar_size: 'xl',
      avatar_url: item.link['#url'],
      avatar_attributes: item.link['#options'].attributes
   } %}
 *
 * Examples link tooltip:
   {% set avatar_attributes = item.link['#options'].attributes %}
   {% include '@bi-bcl/avatar/avatar.html.twig' with {
      avatar_type: 'image',
      avatar_image: field_user_picture,
      avatar_size: 'xl',
      avatar_url: item.link['#url'],
      avatar_tooltip_text: '<strong>Name</strong><br /><em>Citizen</em>',
      avatar_tooltip_placement: 'right',
      avatar_attributes: avatar_attributes
   } %}
 *
 * Example with extra text:
    <div class="avatar-wrapper avatar-extra-text">
      {% include '@bi-bcl/avatar/avatar.html.twig' with {
        avatar_type: 'image',
        avatar_image: field_user_picture,
        avatar_size: 'xl'
      } %}
      <div class="extra-text">
        <h4>Username</h4>
        <p>Lorem ipsum dolor</p>
      </div>
    </div>
 */
#}
{% apply spaceless %}
  {# Set defaults #}
  {% set _avatar_type = avatar_type|default('icon') %}
  {% set _avatar_icon = avatar_icon|default('it-user') %}
  {% set _avatar_icon_color = avatar_icon_color|default('primary') %}
  {% set _avatar_image = avatar_image|default('') %}
  {% set _avatar_text = avatar_text|default('U') %}
  {% set _avatar_text_color = avatar_text_color|default('') %}
  {% set _avatar_size = avatar_size|default('md') %}
  {% set _avatar_assistive_text = avatar_assistive_text|default('User'|t) %}
  {% set _avatar_url = avatar_url|default('') %}
  {% set _avatar_tooltip_text = avatar_tooltip_text|default('') %}
  {% set _avatar_tooltip_placement = avatar_tooltip_placement|default('left') %}
  {% set _avatar_presence = avatar_presence|default('') %}
  {% set _avatar_presence_text = avatar_presence_text|default('') %}
  {% set _avatar_status = avatar_status|default('') %}
  {% set _avatar_status_text = avatar_status_text|default('') %}
  {% set _avatar_classes = avatar_classes|default('') %}
  {% set _avatar_attributes = avatar_attributes|default('') %}

  {# Set options #}
  {% set _classes = [
    'avatar',
    'size-' ~ _avatar_size,
    _avatar_type == 'text' and _avatar_text_color is not empty ? 'avatar-' ~ _avatar_text_color
  ] %}

  {% if _avatar_classes is not empty %}
    {% set _classes = _classes|merge(avatar_classes) %}
  {% endif %}

  {% if _avatar_attributes is empty %}
    {% set avatar_attributes = create_attribute() %}
  {% endif %}
  {% set avatar_attributes = avatar_attributes
    .addClass(_classes)
  %}

  {% set container_tag = _avatar_url is empty ? 'div' : 'a' %}
  {% if container_tag == 'a' %}
    {% set avatar_attributes = avatar_attributes
      .addClass('text-decoration-none')
      .setAttribute('href', _avatar_url)
    %}
  {% endif %}

  {% if _avatar_tooltip_text is not empty and container_tag == 'a' %}
    {% set avatar_attributes = avatar_attributes
      .setAttribute('data-bs-toggle', 'tooltip')
      .setAttribute('data-bs-html', 'true')
      .setAttribute('data-bs-placement', _avatar_tooltip_placement)
      .setAttribute('title', _avatar_tooltip_text)
    %}
  {% endif %}

  {% if _avatar_tooltip_text is empty and container_tag == 'a' %}
    {% set avatar_attributes = avatar_attributes
      .setAttribute('title', 'Go to user'|t)
    %}
  {% endif %}

  {# Set avatar-presence option #}
  {% if _avatar_presence is not empty and _avatar_presence_text is empty %}
    {% if _avatar_presence == 'active' %}
      {% set _avatar_presence_text = 'User active'|t %}
    {% elseif _avatar_presence == 'busy' %}
      {% set _avatar_presence_text = 'User busy'|t %}
    {% elseif _avatar_presence == 'hidden' %}
      {% set _avatar_presence_text = 'User hidden'|t %}
    {% endif %}
  {% endif %}

  {# Set avatar-status option #}
  {% if _avatar_status is not empty and _avatar_status_text is empty %}
    {% if _avatar_status == 'approved' %}
      {% set _avatar_status_text = 'User approved'|t %}
    {% elseif _avatar_status == 'declined' %}
      {% set _avatar_status_text = 'User declined'|t %}
    {% elseif _avatar_status == 'notify' %}
      {% set _avatar_status_text = 'New notification'|t %}
    {% endif %}
  {% endif %}

  {# Slice _avatar_text in 2 char. #}
  {% set text_split = avatar_text|split(' ') %}
  {% if text_split|length > 1 %}
    {% set _avatar_text = text_split[0]|slice(0,1) ~ text_split[1]|slice(0,1) %}
  {% elseif avatar_text|length > 1 %}
    {% set _avatar_text = avatar_text|slice(0,2) %}
  {% else %}
    {% set _avatar_text = avatar_text|slice(0,1) %}
  {% endif %}

  {# Component #}
  {% if _avatar_presence is not empty or _avatar_status is not empty %}
    <div class="avatar-wrapper">
  {% endif %}

  <{{ container_tag }}{{ avatar_attributes }}>

  {% block avatarContent %}
    {% if _avatar_type == 'icon' %}
      {% include '@bi-bcl/icon/icon.html.twig' with {
        name: _avatar_icon,
        color: _avatar_icon_color,
      } %}
      <span class="visually-hidden text-dark bg-white">{{ _avatar_assistive_text }}</span>
    {% endif %}

    {% if _avatar_type == 'image' %}
      {{ _avatar_image }}
    {% endif %}

    {% if _avatar_type == 'text' %}
      {% set _avatar_text_classes = [
        _avatar_size == 'xs' ? 'fs-6',
        _avatar_size == 'sm' ? 'fs-6',
        _avatar_size == 'md' ? 'fs-6',
        _avatar_size == 'lg' ? 'fs-5',
        _avatar_size == 'xl' ? 'fs-1',
        _avatar_size == 'xxl' ? 'fs-1',
      ] %}

      {% if _avatar_size == 'xs' or _avatar_size == 'sm' %}
        {% set _avatar_text = _avatar_text|slice(0,1) %}
      {% endif %}

      <span class="{{ _avatar_text_classes|join(' ')|trim }}" aria-hidden="true">{{ _avatar_text|upper }}</span>
      <span class="visually-hidden text-dark bg-white">{{ _avatar_assistive_text }}</span>
    {% endif %}
  {% endblock %}

  {% block avatarPresence %}
    {% if _avatar_presence is not empty %}
      <div class="avatar-presence {{ _avatar_presence }}">
        {% if _avatar_presence == 'busy' %}
          {% include '@bi-bcl/icon/icon.html.twig' with {
            name: 'it-minus',
            color: 'white',
          } %}
        {% endif %}
        <span class="visually-hidden text-dark bg-white">{{ _avatar_presence_text }}</span>
      </div>
    {% endif %}
  {% endblock %}

  {% block avatarStatus %}
    {% if _avatar_status is not empty %}
      <div class="avatar-status {{ _avatar_status }}">
        {% if _avatar_status == 'approved' or _avatar_status == 'declined' %}
          {% include '@bi-bcl/icon/icon.html.twig' with {
            name: _avatar_status == 'approved' ? 'it-check' : 'it-close',
            color: 'white',
          } %}
        {% endif %}
        <span class="visually-hidden text-dark bg-white">{{ _avatar_status_text }}</span>
      </div>
    {% endif %}
  {% endblock %}

  </{{ container_tag }}>

  {% if _avatar_presence is not empty or _avatar_status is not empty %}
    </div>
  {% endif %}

{% endapply %}