media: grid--B

Done

HTML
View
Context
Assets
Info
Notes


        
        <section class="media media--grid media--grid-b">
    <div class="media__in">
        <div class="media__inner">
            <div class="media__content">
                <div class="media__item">
                    <article class="snippet-c">
                        <div class="snippet-c__visual">
                            <div class="snippet-c__image">
                                <div class="video-player">
                                    <picture class="visual">
                                        <img data-sizes="auto" data-src="https://img.youtube.com/vi/agkb5TSjEmc/maxresdefault.jpg" class="lazyload" alt="">
                                    </picture>

                                    <span class="video-player__trigger">
                                        <span class="video-ID">agkb5TSjEmc</span>

                                        <span class="icon-play">
                                            <span class="icon-play__inner"></span>
                                            <span class="icon-play__icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                    <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                                </svg>
                                            </span>
                                        </span>
                                    </span>
                                </div>

                            </div>
                        </div>

                        <div class="snippet-c__content">
                            <span class="snippet-c__label">Category</span>

                            <h4 class="snippet-c__heading heading">
                                Snippet heading
                            </h4>

                            <div class="snippet-c__description">
                                Description text explicabo asperiores, quidem excepturi veniam eos odio tenetur corporis! Aut quae quisquam vitae architecto, quasi esse incidunt. Ipsa nemo repellendus molestias. Doloremque.
                            </div>
                        </div>
                    </article>

                </div>
                <div class="media__item">
                    <article class="snippet-c">
                        <div class="snippet-c__visual">
                            <div class="snippet-c__image">
                                <div class="video-player">
                                    <picture class="visual">
                                        <img data-sizes="auto" data-src="/graphics/Ibiza_Blau_Music.jpg" class="lazyload" alt="">
                                    </picture>

                                    <span class="video-player__trigger">
                                        <span class="video-ID">agkb5TSjEmc</span>

                                        <span class="icon-play">
                                            <span class="icon-play__inner"></span>
                                            <span class="icon-play__icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                    <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                                </svg>
                                            </span>
                                        </span>
                                    </span>
                                </div>

                            </div>
                        </div>

                        <div class="snippet-c__content">
                            <span class="snippet-c__label">Category</span>

                            <h4 class="snippet-c__heading heading">
                                Ipsa nemo repellendus molestias. Doloremque snippet heading.
                            </h4>

                            <div class="snippet-c__description">
                                Aut quae quisquam vitae architecto, quasi esse incidunt. Ipsa nemo repellendus molestias. Doloremque.
                            </div>
                        </div>
                    </article>

                </div>
                <div class="media__item">
                    <article class="snippet-c">
                        <div class="snippet-c__visual">
                            <div class="snippet-c__image">
                                <div class="video-player">
                                    <picture class="visual">
                                        <img data-sizes="auto" data-src="/graphics/Microfusa.jpg" class="lazyload" alt="">
                                    </picture>

                                    <span class="video-player__trigger">
                                        <span class="video-ID">agkb5TSjEmc</span>

                                        <span class="icon-play">
                                            <span class="icon-play__inner"></span>
                                            <span class="icon-play__icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                    <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                                </svg>
                                            </span>
                                        </span>
                                    </span>
                                </div>

                            </div>
                        </div>

                        <div class="snippet-c__content">
                            <span class="snippet-c__label">Category</span>

                            <h4 class="snippet-c__heading heading">
                                Snippet heading
                            </h4>

                            <div class="snippet-c__description">
                                Description text explicabo asperiores, quidem excepturi veniam eos odio tenetur corporis!
                            </div>
                        </div>
                    </article>

                </div>
                <div class="media__item">
                    <article class="snippet-c">
                        <div class="snippet-c__visual">
                            <div class="snippet-c__image">
                                <div class="video-player">
                                    <picture class="visual">
                                        <img data-sizes="auto" data-src="/graphics/Music_Academy_Rimini.jpg" class="lazyload" alt="">
                                    </picture>

                                    <span class="video-player__trigger">
                                        <span class="video-ID">agkb5TSjEmc</span>

                                        <span class="icon-play">
                                            <span class="icon-play__inner"></span>
                                            <span class="icon-play__icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                    <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                                </svg>
                                            </span>
                                        </span>
                                    </span>
                                </div>

                            </div>
                        </div>

                        <div class="snippet-c__content">
                            <span class="snippet-c__label">Category</span>

                            <h4 class="snippet-c__heading heading">
                                Snippet heading
                            </h4>

                            <div class="snippet-c__description">
                                Description text explicabo asperiores, quidem excepturi veniam eos odio tenetur corporis! Quasi esse incidunt. Ipsa nemo repellendus molestias. Doloremque.
                            </div>
                        </div>
                    </article>

                </div>
            </div>
        </div>

        <div class="media__actions actions actions--end actions--force">
            <div class="actions__item">

                <a href="#" target="_blank" class="action action--normal action--on-light">
                    <span class="action__label">See all videos</span>
                    <span class="action__bg"></span>
                </a>

            </div>
        </div>
    </div>
</section>


        <section class="media media--grid media--grid-b">
  <div class="media__in">
    <div class="media__inner">
      <div class="media__content">
        {{#each snippets }}
        <div class="media__item">
          {{render '@snippet-c' this }}
        </div>
        {{/each}}
      </div>
    </div>
    {{#if action }}

    <div class="media__actions actions actions--end actions--force">
      <div class="actions__item">
        {{render '@action' action merge=true }}
      </div>
    </div>
    {{/if}}
  </div>
</section>


        
            
            type: grid
variant: B
snippets:
  - video:
      image:
        src: https://img.youtube.com/vi/agkb5TSjEmc/maxresdefault.jpg
      video:
        id: agkb5TSjEmc
    label: Category
    heading: Snippet heading
    description: >-
      Description text explicabo asperiores, quidem excepturi veniam eos odio
      tenetur corporis! Aut quae quisquam vitae architecto, quasi esse incidunt.
      Ipsa nemo repellendus molestias. Doloremque.
  - video:
      image:
        src: /graphics/Ibiza_Blau_Music.jpg
      video:
        id: agkb5TSjEmc
    label: Category
    heading: Ipsa nemo repellendus molestias. Doloremque snippet heading.
    description: >-
      Aut quae quisquam vitae architecto, quasi esse incidunt. Ipsa nemo
      repellendus molestias. Doloremque.
  - video:
      image:
        src: /graphics/Microfusa.jpg
      video:
        id: agkb5TSjEmc
    label: Category
    heading: Snippet heading
    description: >-
      Description text explicabo asperiores, quidem excepturi veniam eos odio
      tenetur corporis!
  - video:
      image:
        src: /graphics/Music_Academy_Rimini.jpg
      video:
        id: agkb5TSjEmc
    label: Category
    heading: Snippet heading
    description: >-
      Description text explicabo asperiores, quidem excepturi veniam eos odio
      tenetur corporis! Quasi esse incidunt. Ipsa nemo repellendus molestias.
      Doloremque.
action:
  url: '#'
  label: See all videos
content:
  modifier: right

File:

Content:


                                {
  "mediaitems": [
    {
      "image": "/graphics/video-player.jpg",
      "video-src": "",
      "type": "image",
      "item-id": "{04a25187-d2b0-4b65-937d-80aeedc98ac2}",
      "total-records": "100"
    },
    {
      "image": "/graphics/video-player.jpg",
      "video-src": "",
      "type": "image",
      "item-id": "{04a25187-d2b0-4b65-937d-80aeedc98ac2}",
      "total-records": "100"
    },
    {
      "image": "/graphics/video-player.jpg",
      "video-src": "",
      "type": "image",
      "item": "{04a25187-d2b0-4b65-937d-80aeedc98ac2}",
      "total-records": "100"
    },
    {
      "image": "/graphics/video-player.jpg",
      "video-src": "",
      "type": "image",
      "item-id": "{04a25187-d2b0-4b65-937d-80aeedc98ac2}",
      "total-records": "100"
    }
  ]
}

URL: /components/raw/media/data.json
Filesystem Path: ../src/04_organisms/media/data.json
Size: 789 Bytes

Content:


                                const MEDIA = ((w, d, undefined) => {

  'use strict';

  const selectors = {
    theWrap: '.media--grid',
    theTrigger: '.loadmore',
    theContent: '.media__content',
    theItem: '.media__item',
  };

  const classes = {
    mediaItem: 'media__item',
    inView: 'in-view',
    isLoading: 'is-loading',
    allLoaded: 'all-loaded',
  };

  const els = {};

  const api = {
    url: '',
    method: 'GET',
  };

  const paging = {
    page: 1,
    step: 4,
    max: 0,
  };

  const animateItems = [];

  let anchor = null;
  let appendTimer = null;
  let animateTimer = null;

  const init = () => {
    els.theWraps = d.querySelectorAll(selectors.theWrap);

    if (els.theWraps.length <= 0) { return; }

    bindIt();
  };

  const bindIt = () => {
    [...els.theWraps].forEach((theWrap) => {
      const theTrigger = theWrap.querySelector(selectors.theTrigger);
      const theItems = theWrap.querySelectorAll(selectors.theItem);

      if (theTrigger) {
        api.url = theTrigger.href;

        theTrigger.addEventListener('click', (e) => {
          e.preventDefault();
          loadmore(theWrap);
        });

        loadmore(theWrap, true);
      }

      observeIt([...theItems]);
    });
  };

  const observeIt = (theItems) => {
    theItems.forEach((theItem) => {
      const observer = new IntersectionObserver((item) => {
        if (item[0].isIntersecting) {
          animateItems.push(theItem);

          animateIt();

          observer.unobserve(theItem);
        }
      }, {
        rootMargin: `-20% 0px -20%`,
        treshold: thresholdArray(20),
      });

      observer.observe(theItem);
    });
  };

  const loadmore = (theWrap, onInit) => {
    if (!theWrap) { return; }

    const theContent = theWrap.querySelector(selectors.theContent);

    if (!theContent) { return; }

    !onInit && theWrap.classList.add(classes.isLoading);

    fetchIt(theWrap, theContent, buildIt, onInit);
  };

  const fetchIt = (theWrap, theContent, cb, onInit) => {
    const req = new XMLHttpRequest();

    req.open(api.method, api.url + paging.page);
    req.send();

    req.onreadystatechange = () => {
      if (req.readyState === XMLHttpRequest.DONE) {
        theWrap.classList.remove(classes.isLoading);

        if (req.status === 200) {
          const result = isJSON(req.responseText) ? JSON.parse(req.responseText) : false;

          if (!result) {
            theWrap.classList.add(classes.allLoaded);
            return;
          }

          const theItems = result ? result['mediaitems'] : [];
          paging.max = !theItems.length ? null : theItems[0]['total-records'];

          if (!paging.max) {
            theWrap.classList.add(classes.allLoaded);
            return;
          }

          if (onInit) { return; }

          cb(theContent, theItems);

          paging.page++;

          paging.page * paging.step >= parseInt(paging.max, 10) && theWrap.classList.add(classes.allLoaded);
        } else {
          theWrap.classList.add(classes.isLoading);
          console.log('There was a problem with the request.');
        }
      }
    };
  };

  const buildIt = (theContent, theItems) => {
    if (!theContent || !theItems.length) { return; }

    const newItems = [];

    theItems.forEach((theItem) => {
      const mediaItem = getHTML(theItem);

      newItems.push(mediaItem);
    });

    anchor = newItems[0];

    appendIt(theContent, newItems, 0);
    observeIt(newItems);
  };

  const getHTML = (theItem) => {
    let html = '';
    const mediaItem = d.createElement('div');

    mediaItem.classList.add(classes.mediaItem);

    if (theItem.type === 'image') {
      html = `
        <div class="media__item__inner">
          <picture class="visual">
            <img src="${theItem['image']}" alt="">
          </picture>
        </div>
      `;
    }

    if (theItem.type === 'video-bg') {
      html = `
        <div class="media__item__inner">
          <div class="video-bg">
            <video loop="" muted="" playsinline="" poster="${theItem['image']}" src="${theItem['video-src']}"></video>

            <a class="video-bg__control video-bg__control--right">
              <span class="icon-media">
                <span class="icon-media__inner">
                  <span class="icon-media__pause">
                    <svg class="icon-media__play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                      <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z"></path>
                    </svg>
                  </span>
                </span>
              </span>
            </a>
          </div>
        </div>
      `;
    }

    if (theItem.type === 'video-player') {
      html = `
        <div class="media__item__inner">
          <div class="video-player">
            <picture class="visual">
              <img src="${theItem['image']}" alt="">
            </picture>

            <a class="video-player__trigger">
              <span class="video-ID">${theItem['video-src']}</span>
              <span class="icon-play">
                <span class="icon-play__inner"></span>

                <span class="icon-play__icon">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                    <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z"></path>
                  </svg>
                </span>
              </span>
            </a>
          </div>
        </div>
      `;
    }

    mediaItem.innerHTML = html;

    return mediaItem;
  };

  const appendIt = (theContent, newItems, delay = 0) => {
    clearTimeout(appendTimer);
    appendTimer = setTimeout(() => {
      theContent.appendChild(newItems[0]);

      newItems[0].querySelector('.video-bg') && VIDEOBG.init();
      newItems[0].querySelector('.video-player') && VIDEOOVERLAY.init();

      newItems.shift();

      newItems.length ? appendIt(theContent, newItems, 0) : scrollIt();
    }, delay);
  };

  const scrollIt = () => {
    if (!anchor) { return; }

    anchor.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    });
  };

  const animateIt = (delay = 100) => {
    clearTimeout(animateTimer);
    animateTimer = setTimeout(() => {
      animateItems[0].classList.add(classes.inView);
      animateItems.shift();

      animateItems.length && animateIt(100);
    }, delay);
  };

  const isJSON = (theString) => {
    if (!theString) { return false; }

    try {
      JSON.parse(theString);
    } catch (e) {
      return false;
    }

    return true;
  };

  const thresholdArray = steps => Array(steps + 1).fill(0).map((_, index) => index / steps || 0);

  d.addEventListener('DOMContentLoaded', init);

})(window, window.document);

URL: /components/raw/media/media.js
Filesystem Path: ../src/04_organisms/media/media.js
Size: 7 KB

Content:


                                .media {
  display: block;
  width: 100%;
  padding: 0 var(--gutter--bucket);

  &.media--slider {
    padding: 0;
  }
}

.media__in {
  position: relative;
  max-width: var(--section--9);
  margin: 0 auto;

  .media--contained &,
  .media--grid & {
    max-width: var(--section--8);
    margin: 0 auto;
  }
}

.media__inner {
  position: relative;
  width: 100%;

  .media--full &,
  .media--contained & {
    display: block;
    height: 0;
    padding-top: (206 / 352) * 100%;
  }

  .media--full & {
    @media (min-width: 900px) {
      padding-top: (650 / 1420) * 100%;
    }
  }

  .media--contained & {
    @media (min-width: 900px) {
      padding-top: (650 / 1110) * 100%;
    }
  }

  .media--grid & {
    overflow: hidden;
  }
}

.media__header {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--gutter--bucket);
}

.media__heading {
  flex: 0 1 var(--section--6);
  color: var(--color--neutrals-0);
  font-weight: 500;
  text-align: center;
}

.media__content {
  .media--grid & {
    display: flex;
    flex-wrap: wrap;
    margin: -2px;
  }
}

.media__item {
  position: relative;
  flex: 0 0 100%;
  padding: 2px;

  @media (min-width: 500px) {
    flex: 0 0 50%;
  }
}

.media__item:before {
  .media:not(.media--grid):not(.media--grid-b) & {
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    z-index: 1;
    display: block;
    background-color: var(--color--neutrals-1);
    content: '';
  }
}

.media__item__inner {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
  overflow: hidden;
  background-color: var(--color--neutrals-1);
  opacity: 0;

  .media--grid & {
    padding-top: (9 / 16) * 100%;
  }

  .in-view & {
    transition: opacity 750ms;
    opacity: 1;
  }
}

.media__loadmore {
  margin-top: var(--gap--2);

  @media (min-width: 750px) {
    margin-top: var(--gap--4);
  }

  .all-loaded & {
    display: none;
  }
}

.media__slider {
  height: 0;
  overflow: hidden;

  &.swiper-container-initialized {
    height: auto;
  }
}

.media__slide {
  position: relative;
  display: block;
  width: 100%;
  height: 0;

  padding-top: 80% !important;
  //padding-top: (427 / 375) * 100%;

  @media (min-width: 750px) {
    padding-top: (650 / 885) * 100% !important;
  }
}

.media__thumbs {
  margin-top: var(--gap--1);
  padding-bottom: var(--gap--2);

  @media (min-width: 900px) {
    margin-top: var(--gap--2);
  }
}

.media__thumb {
  transition: opacity 250ms;
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: (650 / 885) * 100%;
  opacity: .7;
  cursor: pointer;

  &:hover {
    opacity: 1;
  }

  .swiper-slide-thumb-active & {
    opacity: 1;
  }

  &:after {
    transition: height 250ms;
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 0;
    margin-bottom: calc(var(--gap--2) * -1);
    background-color: var(--color--action);
    content: '';
  }

  .swiper-slide-thumb-active &:after {
    height: 4px;
  }
}

.media__nav {
  transition: opacity 300ms;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  // max-width: var(--section--8);
  opacity: 1;
  pointer-events: none;

  @media (min-width: 900px) {
    padding: 0 var(--gutter--bucket);
  }

  .swiper-slide:not(.swiper-slide-active) & {
    display: none;
  }
}

.media__nav__item {
  flex: none;
  display: flex;
  justify-content: center;
  width: calc(var(--gutter--bucket) * 3);
}

.media__nav__link {
  transition: opacity 250ms;
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--color--action);
  border-radius: 50%;
  pointer-events: all;
  opacity: 1;

  @media (min-width: 900px) {
    width: 40px;
    height: 40px;
  }

  &:hover {
    color: var(--color--action);
    text-decoration: none;
    cursor: pointer;
  }

  &[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0;
  }
}

.media__nav__link:before {
  transition: box-shadow 250ms, opacity 250ms;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color--neutrals-0);
  box-shadow: 0 2px 4px rgba(#000, .14);
  opacity: .8;
}

.media__nav__link:hover:before {
  opacity: 1;
  box-shadow: 0 4px 4px rgba(#000, .14);
}

.media__nav__link:active:before {
  box-shadow: 0 0 5px rgba(#000, .14);
}

.media__nav__icon {
  position: relative;
  flex: none;
  width: 44%;

  .media__nav__link--prev & {
    transform: translate(-1px, 0) rotate(180deg);
  }

  .media__nav__link--next & {
    transform: translate(1px, 0);
  }
}

URL: /components/raw/media/media.scss
Filesystem Path: ../src/04_organisms/media/media.scss
Size: 4.9 KB

Content:
URL: /components/raw/media/sanchez.jpg
Filesystem Path: ../src/04_organisms/media/sanchez.jpg
Size: 170.1 KB

Handle: @media--grid--b
Variants (7): full browser , with heading , contained , grid , grid--B , slider , slider with thumbnail arrows
Preview:
- With layout
- Component only
Filesystem Path: ../src/04_organisms/media/media--grid--B.hbs
References (2): @snippet-c, @action
Referenced by (3): @cdj-3000, @cdj-3000-out-of-stock, @onetrust

No notes defined.