Europa Component Library

Content slider

Documentation • Demo

EMA Content slider

{#
  Accepts:
    -
#}

{# Internal properties #}
{% set _css_class = 'ema-content-slider' %}


{# Internal logic - Process properties #}
{% if extra_class is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_class %}
{% endif %}

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~'"' %}
  {% endfor %}
{% endif %}

{# Print result #}
<ul class="ecl-listing {{ _css_class }}" {{ _extra_attributes }}>
  {% for item in list %}
    {% set item_thumb = item|merge({ extra_attributes: [
      { name: 'aria-controls', value: 'ema-content-slider__list-item--highlight--' ~ loop.index },
    ], extra_classes: 'ema-content-slider__list-item--default' }) %}
    {% include '@ec-europa/ecl-list-items' with item_thumb %}

    {# The highlight #}
    {% set item_highlight = item|merge({ variant: 'highlight', extra_attributes: [
      { name: 'id', value: 'ema-content-slider__list-item--highlight--' ~ loop.index }
    ], extra_classes: 'ema-content-slider__list-item--highlight' }) %}
    {% include '@ec-europa/ecl-list-items' with item_highlight %}
  {% endfor %}
</ul>
 
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n        ECL.contentSlider();\n      });"
  },
  "list": [
    {
      "metas": [
        "report",
        "cell therapies"
      ],
      "href": "#content-slider-1",
      "title": "CAR T-cell therapy registries",
      "detail": "EMA's new workshop report describes the opportunities and challenges in using patient registries for the benefit-risk evaluations of chimeric antigen receptor (CAR) T-cell therapies.",
      "primary_image": {
        "src": "https://unsplash.it/640/480?image=221",
        "alt": "sky"
      }
    },
    {
      "metas": [
        "video",
        "about us"
      ],
      "href": "#content-slider-2",
      "title": "Working for every patient in Europe",
      "detail": "Our new video explains EMA's role in enabling timely patient access to new medicines in Europe. Watch the video now.",
      "primary_image": {
        "src": "https://unsplash.it/640/480?image=221",
        "alt": "street"
      }
    },
    {
      "metas": [
        "report",
        "about us"
      ],
      "href": "#content-slider-3",
      "title": "Annual report",
      "detail": "Read about EMA's key achievements and figures in 2017, including statistics on its regulatory procedures, activities, trends and changes in recent years.",
      "primary_image": {
        "src": "https://unsplash.it/640/480?image=221",
        "alt": "buildings"
      }
    },
    {
      "metas": [
        "campaign",
        "vaccine"
      ],
      "href": "#content-slider-4",
      "title": "European Immunization Week",
      "detail": "EMA supports European Immunization Week from 23 to 29 April 2018. This World Health Organization initiative aims to increase vaccination coverage by raising awareness among parents and caregivers, health care professionals, policy and decision-makers, and the media.",
      "primary_image": {
        "src": "https://unsplash.it/640/480?image=221",
        "alt": "tea"
      }
    }
  ]
}
 
<ul class="ecl-listing ema-content-slider">

  <li class="ecl-list-item ema-content-slider__list-item--default" aria-controls="ema-content-slider__list-item--highlight--1">
    <a href="#content-slider-1" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item</div>

      <div class="ecl-list-item__primary">

        <img class=" ema-content-slider__list-item--default" alt="sky" src="https://unsplash.it/640/480?image=221" aria-controls="ema-content-slider__list-item--highlight--1" />

      </div>

      <div class="ecl-list-item__body">
        <div class="ecl-list-item__meta">

          <div class="ecl-meta ema-content-slider__list-item--default" aria-controls="ema-content-slider__list-item--highlight--1">

            <span class="ecl-meta__item">report</span>

            <span class="ecl-meta__item">cell therapies</span>

          </div>
        </div>

        <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">CAR T-cell therapy registries</h3>

        <p class="ecl-list-item__detail ecl-paragraph">
          EMA's new workshop report describes the opportunities and challenges in using patient registries for the benefit-risk evaluations of chimeric antigen receptor (CAR) T-cell therapies.
        </p>

        <div class="ecl-list-item__action">

        </div>
      </div>

    </a>
  </li>

  <li class="ecl-list-item ecl-list-item--highlight ema-content-slider__list-item--highlight" id="ema-content-slider__list-item--highlight--1">
    <a href="#content-slider-1" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item</div>

      <div class="ecl-list-item__primary">

        <img class=" ema-content-slider__list-item--highlight" alt="sky" src="https://unsplash.it/640/480?image=221" id="ema-content-slider__list-item--highlight--1" />

      </div>

      <div class="ecl-list-item__body">
        <div class="ecl-list-item__meta">

          <div class="ecl-meta ecl-meta--highlight ema-content-slider__list-item--highlight" id="ema-content-slider__list-item--highlight--1">

            <span class="ecl-meta__item">report</span>

            <span class="ecl-meta__item">cell therapies</span>

          </div>
        </div>

        <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">CAR T-cell therapy registries</h3>

        <p class="ecl-list-item__detail ecl-paragraph">
          EMA's new workshop report describes the opportunities and challenges in using patient registries for the benefit-risk evaluations of chimeric antigen receptor (CAR) T-cell therapies.
        </p>

        <div class="ecl-list-item__action">

        </div>
      </div>

    </a>
  </li>

  <li class="ecl-list-item ema-content-slider__list-item--default" aria-controls="ema-content-slider__list-item--highlight--2">
    <a href="#content-slider-2" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item</div>

      <div class="ecl-list-item__primary">

        <img class=" ema-content-slider__list-item--default" alt="street" src="https://unsplash.it/640/480?image=221" aria-controls="ema-content-slider__list-item--highlight--2" />

      </div>

      <div class="ecl-list-item__body">
        <div class="ecl-list-item__meta">

          <div class="ecl-meta ema-content-slider__list-item--default" aria-controls="ema-content-slider__list-item--highlight--2">

            <span class="ecl-meta__item">video</span>

            <span class="ecl-meta__item">about us</span>

          </div>
        </div>

        <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Working for every patient in Europe</h3>

        <p class="ecl-list-item__detail ecl-paragraph">
          Our new video explains EMA's role in enabling timely patient access to new medicines in Europe. Watch the video now.
        </p>

        <div class="ecl-list-item__action">

        </div>
      </div>

    </a>
  </li>

  <li class="ecl-list-item ecl-list-item--highlight ema-content-slider__list-item--highlight" id="ema-content-slider__list-item--highlight--2">
    <a href="#content-slider-2" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item</div>

      <div class="ecl-list-item__primary">

        <img class=" ema-content-slider__list-item--highlight" alt="street" src="https://unsplash.it/640/480?image=221" id="ema-content-slider__list-item--highlight--2" />

      </div>

      <div class="ecl-list-item__body">
        <div class="ecl-list-item__meta">

          <div class="ecl-meta ecl-meta--highlight ema-content-slider__list-item--highlight" id="ema-content-slider__list-item--highlight--2">

            <span class="ecl-meta__item">video</span>

            <span class="ecl-meta__item">about us</span>

          </div>
        </div>

        <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Working for every patient in Europe</h3>

        <p class="ecl-list-item__detail ecl-paragraph">
          Our new video explains EMA's role in enabling timely patient access to new medicines in Europe. Watch the video now.
        </p>

        <div class="ecl-list-item__action">

        </div>
      </div>

    </a>
  </li>

  <li class="ecl-list-item ema-content-slider__list-item--default" aria-controls="ema-content-slider__list-item--highlight--3">
    <a href="#content-slider-3" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item</div>

      <div class="ecl-list-item__primary">

        <img class=" ema-content-slider__list-item--default" alt="buildings" src="https://unsplash.it/640/480?image=221" aria-controls="ema-content-slider__list-item--highlight--3" />

      </div>

      <div class="ecl-list-item__body">
        <div class="ecl-list-item__meta">

          <div class="ecl-meta ema-content-slider__list-item--default" aria-controls="ema-content-slider__list-item--highlight--3">

            <span class="ecl-meta__item">report</span>

            <span class="ecl-meta__item">about us</span>

          </div>
        </div>

        <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Annual report</h3>

        <p class="ecl-list-item__detail ecl-paragraph">
          Read about EMA's key achievements and figures in 2017, including statistics on its regulatory procedures, activities, trends and changes in recent years.
        </p>

        <div class="ecl-list-item__action">

        </div>
      </div>

    </a>
  </li>

  <li class="ecl-list-item ecl-list-item--highlight ema-content-slider__list-item--highlight" id="ema-content-slider__list-item--highlight--3">
    <a href="#content-slider-3" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item</div>

      <div class="ecl-list-item__primary">

        <img class=" ema-content-slider__list-item--highlight" alt="buildings" src="https://unsplash.it/640/480?image=221" id="ema-content-slider__list-item--highlight--3" />

      </div>

      <div class="ecl-list-item__body">
        <div class="ecl-list-item__meta">

          <div class="ecl-meta ecl-meta--highlight ema-content-slider__list-item--highlight" id="ema-content-slider__list-item--highlight--3">

            <span class="ecl-meta__item">report</span>

            <span class="ecl-meta__item">about us</span>

          </div>
        </div>

        <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">Annual report</h3>

        <p class="ecl-list-item__detail ecl-paragraph">
          Read about EMA's key achievements and figures in 2017, including statistics on its regulatory procedures, activities, trends and changes in recent years.
        </p>

        <div class="ecl-list-item__action">

        </div>
      </div>

    </a>
  </li>

  <li class="ecl-list-item ema-content-slider__list-item--default" aria-controls="ema-content-slider__list-item--highlight--4">
    <a href="#content-slider-4" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item</div>

      <div class="ecl-list-item__primary">

        <img class=" ema-content-slider__list-item--default" alt="tea" src="https://unsplash.it/640/480?image=221" aria-controls="ema-content-slider__list-item--highlight--4" />

      </div>

      <div class="ecl-list-item__body">
        <div class="ecl-list-item__meta">

          <div class="ecl-meta ema-content-slider__list-item--default" aria-controls="ema-content-slider__list-item--highlight--4">

            <span class="ecl-meta__item">campaign</span>

            <span class="ecl-meta__item">vaccine</span>

          </div>
        </div>

        <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">European Immunization Week</h3>

        <p class="ecl-list-item__detail ecl-paragraph">
          EMA supports European Immunization Week from 23 to 29 April 2018. This World Health Organization initiative aims to increase vaccination coverage by raising awareness among parents and caregivers, health care professionals, policy and decision-makers,
          and the media.
        </p>

        <div class="ecl-list-item__action">

        </div>
      </div>

    </a>
  </li>

  <li class="ecl-list-item ecl-list-item--highlight ema-content-slider__list-item--highlight" id="ema-content-slider__list-item--highlight--4">
    <a href="#content-slider-4" class="ecl-link ecl-list-item__link">
      <div class="ecl-u-sr-only">List item</div>

      <div class="ecl-list-item__primary">

        <img class=" ema-content-slider__list-item--highlight" alt="tea" src="https://unsplash.it/640/480?image=221" id="ema-content-slider__list-item--highlight--4" />

      </div>

      <div class="ecl-list-item__body">
        <div class="ecl-list-item__meta">

          <div class="ecl-meta ecl-meta--highlight ema-content-slider__list-item--highlight" id="ema-content-slider__list-item--highlight--4">

            <span class="ecl-meta__item">campaign</span>

            <span class="ecl-meta__item">vaccine</span>

          </div>
        </div>

        <h3 class="ecl-list-item__title ecl-heading ecl-heading--h3">European Immunization Week</h3>

        <p class="ecl-list-item__detail ecl-paragraph">
          EMA supports European Immunization Week from 23 to 29 April 2018. This World Health Organization initiative aims to increase vaccination coverage by raising awareness among parents and caregivers, health care professionals, policy and decision-makers,
          and the media.
        </p>

        <div class="ecl-list-item__action">

        </div>
      </div>

    </a>
  </li>
</ul>
  • Content: 
    import { queryAll } from '@ec-europa/ecl-base/helpers/dom';

/**
 * @param {object} options Object containing configuration overrides
 */
export const contentSlider = ({
  contentSliderSelector: contentSliderSelector = '.ema-content-slider',
  listItemSelector: listItemSelector = '.ema-content-slider .ecl-list-item.ema-content-slider__list-item--default',
  listItemActiveClass: listItemActiveClass = 'ema-content-slider__list-item--active',
  listItemHighlightSelector: listItemHighlightSelector = '.ema-content-slider .ecl-list-item--highlight.ema-content-slider__list-item--highlight',
} = {}) => {
  if (
    !('querySelector' in document) ||
    !('addEventListener' in window) ||
    !document.documentElement.classList
  )
    return null;

  // ACTIONS
  function setGrid() {
    // hack for IE11: set all row/column of the grid
    let i = 1;
    queryAll(listItemSelector).forEach(el => {
      const className = `ema-content-slider__list-item--row-${i}`;
      el.classList.add(className);
      i += 1;
    });
  }

  function hideAllHighlights() {
    queryAll(listItemSelector).forEach(el => {
      el.classList.remove(listItemActiveClass);
    });
    queryAll(listItemHighlightSelector).forEach(el => {
      el.setAttribute('aria-hidden', true);
    });
  }

  function showOwnHighlight(target) {
    hideAllHighlights();

    // get its highlight
    const hightlight = document.getElementById(
      target.getAttribute('aria-controls')
    );

    target.classList.add(listItemActiveClass);

    hightlight.setAttribute('aria-hidden', 'false');
  }

  function isOwnHighlightVisible(target) {
    const hightlight = document.getElementById(
      target.getAttribute('aria-controls')
    );
    return hightlight.getAttribute('aria-hidden') !== 'true';
  }

  // EVENTS
  function eventItemClick(e) {
    e.preventDefault();
    const target = e.currentTarget;

    if (!isOwnHighlightVisible(target)) showOwnHighlight(target);
  }

  // BIND EVENTS
  function bindContentSliderEvents(contentSliderContainer) {
    const listItems = queryAll(listItemSelector, contentSliderContainer);
    // bind all items in the list click and keydown events
    listItems.forEach(listItem => {
      listItem.addEventListener('click', eventItemClick);
    });
  }

  // UNBIND EVENTS
  function unbindContentSliderEvents(contentSliderContainer) {
    const listItems = queryAll(listItemSelector, contentSliderContainer);
    // bind all items in the list click and keydown events
    listItems.forEach(listItem => {
      listItem.removeEventListener('click', eventItemClick);
    });
  }

  // SETUP
  // set contentSlider element NodeLists
  const contentSliderContainers = queryAll(contentSliderSelector);

  // DESTROY
  function destroy() {
    if (contentSliderContainers.length) {
      contentSliderContainers.forEach(contentSliderContainer => {
        unbindContentSliderEvents(contentSliderContainer);
      });
    }
  }

  // INIT
  function init() {
    if (contentSliderContainers.length) {
      contentSliderContainers.forEach(contentSliderContainer => {
        bindContentSliderEvents(contentSliderContainer);
      });
    }
    setGrid();
    hideAllHighlights();
    // Hightlight first item in the list by default
    // by simulating a click
    showOwnHighlight(document.querySelectorAll(listItemSelector)[0]);
  }

  init();

  // REVEAL API
  return {
    init,
    destroy,
  };
};

// module exports
export default contentSlider;
  • URL: /components/raw/ema-content-slider/ema-content-slider.js
  • Filesystem Path: framework/components/ema-content-slider/ema-content-slider.js
  • Size: 3.5 KB
  • Content: 
    .ema-content-slider {
  background-color: map-get($ema-colors, 'light-grey-3');
  margin: 0;

  .ecl-list-item__detail {
    display: none;
  }
}

.ema-content-slider .ecl-link {
  flex-grow: 1;
}

.ema-content-slider .ecl-list-item.ema-content-slider__list-item--default {
  border: 2px solid transparent;
  padding-left: map-get($ecl-spacing, 'xs');
  padding-right: map-get($ecl-spacing, 'xs');
}

.ema-content-slider .ecl-list-item.ema-content-slider__list-item--active {
  border: 2px solid map-get($ema-colors, 'blue-3');
}

.ema-content-slider .ecl-list-item.ema-content-slider__list-item--highlight {
  position: relative;

  .ecl-list-item__link {
    padding-bottom: 0;
    position: relative;
    top: 0;
    width: 100%;
  }

  .ecl-list-item__body {
    background-color: rgba(255, 255, 255, 0.8);
    bottom: 0;
    color: map-get($ema-colors, 'grey-1');
    padding: map-get($ecl-spacing, 's');
    position: absolute;
    width: 100%;
  }

  .ecl-list-item__detail {
    display: block;
  }
}

@media (min-width: map-get($ecl-grid-breakpoints, 'md')) {
  .ema-content-slider {
    /* stylelint-disable */
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 60% 40%;
    grid-template-columns: 60% 40%;
    /* stylelint-enable */
  }
  .ema-content-slider .ecl-list-item {
    align-items: center;
    grid-column-start: 2;
    &:hover {
      background-color: map-get($ema-colors, 'light-grey-2');
    }
    &:not([aria-hidden='true']) {
      display: flex;
    }
  }
  .ema-content-slider .ecl-list-item.ema-content-slider__list-item--highlight {
    grid-column-start: 1;
    grid-row-end: span 4;
    grid-row-start: 1;

    /* stylelint-disable */
    -ms-grid-column: 1;
    -ms-grid-row-span: 4;
    -ms-grid-row: 1;
    /* stylelint-enable */

    margin: 0;
  }

  /* stylelint-disable */
  .ema-content-slider__list-item--default {
    -ms-grid-column: 2;
  }

  @for $i from 1 through 4 {
    .ema-content-slider__list-item--row-#{$i} {
      -ms-grid-row: $i;
    }
  }
  /* stylelint-enable */
}
  • URL: /components/raw/ema-content-slider/ema-content-slider.scss
  • Filesystem Path: framework/components/ema-content-slider/ema-content-slider.scss
  • Size: 2 KB
  • Handle: @ec-europa/ema-content-slider
  • Preview:
  • Filesystem Path: framework/components/ema-content-slider/ema-content-slider.twig