media: full browser

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);