vvjl-1.0.3/templates/views-view-vvjl.html.twig

{#
  @file
  Template for rendering a Views Vanilla JavaScript Lightbox.

  Available variables:
  - options: The options array containing settings for the lightbox.
  - rows: An array of row items to be displayed in the lightbox.
  - attributes: A list of HTML attributes for the wrapper div.

  Options settings:
  - unique_id: A unique identifier for the lightbox instance.
  - lightbox_speed: Speed of the lightbox effect.
  - overlay_color: Color of the overlay.
  - overlay_opacity: Opacity of the overlay.
  - section_height: Height of the lightbox section.
#}
{# Set unique IDs for the Lightbox and container #}
{% set unique_id = options.unique_id %}
{% set vvjl_id = 'vvjl-' ~ unique_id %}
{% set lightbox_inner_id = 'vvjl-inner-' ~ unique_id %}
{% set grid_gap = options.grid_image_gap %}
{% set box_width = options.grid_image_width %}

{# Build the style attribute conditionally #}
{% set style_attributes = [] %}
{% if box_width > 0 %}
  {% set style_attributes = style_attributes|merge(['--box-width: ' ~ box_width]) %}
{% endif %}
{% if grid_gap > 0 %}
  {% set style_attributes = style_attributes|merge(['--grid-gap: ' ~ grid_gap]) %}
{% endif %}
{# Combine style attributes into a single string #}
{% set style_string = style_attributes ? style_attributes|join('; ') : '' %}

{# Initialize base classes array #}
{% set classes = [
  'vvjl',
  vvjl_id,
] %}

{% set total_slides = rows|length %}

<div {{ attributes.addClass(classes).setAttribute('id', vvjl_id) }} role="region" aria-labelledby="image-grid-heading">
  <h2 id="image-grid-heading" class="visually-hidden">{{ 'Image Grid'|t }}</h2>
  <div id="{{ lightbox_inner_id }}" class="vvjl-inner" {% if style_string %}style="{{ style_string }}"{% endif %}>

    <div class="lightbox-modal" aria-hidden="true" style="display: none;" role="dialog" aria-labelledby="lightbox-heading">
      <h2 id="lightbox-heading" class="visually-hidden">{{ 'Image Grid Lightbox'|t }}</h2>
      <button class="button modal-close">
        <span class="visually-hidden">{{ 'Close Grid'|t }}</span>
        {{ include('@vvjl/svg/svg-close.svg') }}
      </button>

      {# Image counter #}
      <div class="lightbox-counter">
        <span id="current-image" class="current-image">1</span><span> / </span><span class="total-images">{{ total_slides }}</span>
      </div>

      <div class="lightbox-modal-content">
        <!-- Content will be dynamically injected here -->
      </div>
      <button class="button modal-prev">
        <span class="visually-hidden">{{ 'Previous'|t }}</span>
        {{ include('@vvjl/svg/svg-prev.svg') }}
      </button>
      <button class="button modal-next">
        <span class="visually-hidden">{{ 'Next'|t }}</span>
        {{ include('@vvjl/svg/svg-next.svg') }}
      </button>
    </div>

    {# Loop through each row to render individual lightbox sections #}
    {% for key, row in rows %}
      {% set row_content = row.content|render %}

      {# Use a unique tag or CSS class to split the content #}
      {% set split_content = row_content|split('<div class="vvjl-separator"></div>') %}
      {% set image_field = split_content[0] %}
      {% set foreground_field = split_content[1]|default('') %}

      <div id="{{ vvjl_id ~ '-' ~ (key + 1) }}" class="lightbox-row {{ options.animation }}" role="group" aria-labelledby="slide-{{ key + 1 }}-heading">

        <h3 id="slide-{{ key + 1 }}-heading" class="visually-hidden">{{ 'Slide @index of @total'|t({'@index': loop.index, '@total': total_slides}) }}</h3>

        <div class="lightbox-image">
          <button class="button modal-open" aria-controls="{{ lightbox_inner_id }}" aria-expanded="false" aria-label="{{ 'Expand slide @index'|t({'@index': loop.index}) }}">
            <span class="visually-hidden">{{ 'Expand image grid'|t }}</span>
            {{ include('@vvjl/svg/svg-expand.svg') }}
          </button>
          {{ image_field|safe_html }}
        </div>

        {% if foreground_field|render|striptags|trim %}
          <div class="lightbox-content" {% if background_rgb and not options.disable_overlay %} style="--bg-color:{{ background_rgb }}"{% endif %}>
            {{ foreground_field|safe_html }}
          </div>
        {% endif %}

      </div>
    {% endfor %}

  </div> {# End of vvjl-inner #}
</div> {# End of main wrapper #}