/* ==========================================================================
   #LAZY LOAD IMAGES
   ========================================================================== */

/**
 * Class to animate/transition an image into view once it has been loaded.
 */

const pixelImage = document.querySelectorAll(".pixel-load")

pixelImage.forEach(div => {
  const img = div.querySelector("img")

  function loaded() {
    div.classList.add("loaded")
  }

  if (img.complete) {
    loaded()
  } else {
    img.addEventListener("load", loaded)
  }
})




/* ==========================================================================
   #KEEN SLIDER
   ========================================================================== */

/**
 * Using Keen-Slider for the infinite looping carousel, which I originally did
 * in pure CSS - but I wanted to make this draggable by the user so made sense
 * to use a 3rd party plug-in to do the heavy lifting.
 */

var animation = {
  duration: 32000,
  easing: (t) => t
}
new KeenSlider("#gallery-slider", {
  dragSpeed: 1,
  loop: true,
  mode: "free",
  slides: {
    perView: 1.5,
    renderMode: "performance",
    spacing: 8
  },
  breakpoints: {
    '(min-width: 768px)': {
      slides: {
        perView: 3,
        spacing: 8
      }
    },
    '(min-width: 1024px)': {
      slides: {
        perView: 4,
        spacing: 8
      }
    }
  },
  created(s) {
    s.moveToIdx(5, true, animation)
  },
  updated(s) {
    s.moveToIdx(s.track.details.abs + 5, true, animation)
  },
  animationEnded(s) {
    s.moveToIdx(s.track.details.abs + 5, true, animation)
  }
})




/* ==========================================================================
   #CURSOR
   ========================================================================== */

/**
 * Two div's are on the page which are used to create a custom cursor effect.
 * `.cursor` follows the pointer whereas the `.cursor-trail` is an outer circle
 * that follows the cursor with a delay.
 * 
 * The original script was based on this CodePen example:
 * https://codepen.io/ntenebruso/pen/QWLzVjY
 *
 * But there were performance (lagging and jumping) issues cross-browser, mainly
 * in Safari (Mac OS). So it was re-written and this version performed better.
 * Previously `calc` was used for sizing and top/left values for positioning.
 * Using fixed values instead of `calc` (as we know the size of the cursor) and
 * `transform` wasn't as much of a performance hit. If we changed the size of
 *  the cursor in the CSS we'd need to update the values here accordingly.
 */

var cursorTrail = document.querySelector(".cursor-trail");
var a = document.querySelectorAll("a");
var timeout;

window.addEventListener(
  "mousemove",
  function(e) {
    var x = e.clientX;
    var y = e.clientY;

    if (!timeout) {
      timeout = setTimeout(function() {
        timeout = null;
        cursorTrail.style.transform = `translate(${x - 4}px, ${y - 4}px)`;
      }, 24);
    }
  },
  false
);

/**
 * Add/remove set classes on hover.
 * 
 * 1. This used to start with `a.forEach((item) => {` but changed to `let` so
 *    that an additional (non-anchor) item could be targeted. `#hello` is for
 *    the image on the 404 page.
 */

// a.forEach((item) => {
let links = document.querySelectorAll('a'); /* [1] */
links.forEach((item) => {
  /* [1] */
  item.addEventListener("mouseover", () => {
    cursorTrail.classList.add("cursor-trail--hover");
  });
  item.addEventListener("mouseleave", () => {
    cursorTrail.classList.remove("cursor-trail--hover");
  });
});

/**
 * Add/remove classes on click (anywhere).
 */

document.addEventListener("mousedown", function() {
  cursorTrail.classList.add("cursor-trail--click");
});

document.addEventListener("mouseup", function() {
  cursorTrail.classList.remove("cursor-trail--click");
});

/**
 * Add custom classes on hover if the cursor needs to be manipulated in a
 * unique way. If an element has a `data-interaction=""` value set. This will
 * be added as a class to the cursor on hover. For example, this is used to
 * style the prev/next arrows on the carousel.
 *
 * This could be set using a specific class but I've just left it targeting all
 * `a` elements for now. Which will add a class of `undefined` if no dataset is
 * specified.
 */

a.forEach((item) => {
  const interaction = item.dataset.interaction;

  item.addEventListener("mouseover", () => {
    cursorTrail.classList.add(interaction);
  });
  item.addEventListener("mouseleave", () => {
    cursorTrail.classList.remove(interaction);
  });
});

/**
 * Text Label
 */

let hasLabel = document.querySelectorAll('.has-label');
var cursorText = document.querySelector('.cursor__label-text');

hasLabel.forEach((item) => {
  const label = item.dataset.label;

  item.addEventListener("mouseover", () => {
    cursorText.textContent = label;
    cursorTrail.classList.add("cursor-trail--label");
  });
  item.addEventListener("mouseleave", () => {
    cursorTrail.classList.remove("cursor-trail--label");
  });
});

/* ==========================================================================
   #BASE
   ========================================================================== */

html {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

body {
  font-size: 12px;
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 64px 0 0;
  text-transform: uppercase;
}

h2 {
  font-size: 12px;
  font-weight: 400;
  margin: 0 16px 16px;
  padding: 0;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  height: auto;
  width: 100%;
  max-width: 100%;
}



/* ==========================================================================
   #CURSOR
   ========================================================================== */

/**
 * Hide the cursor if the `hover` event doesn't exist so the custom cursor isn't
 * displayed on touch devices.
 */

@media (hover: none) {
  .cursor-trail {
    display: none;
  }
}

/**
 * Core `.cursor-trail` styling which is a larger cricle that follows `.cursor`
 * around the screen but with a smooth delay/lag.
 *
 * 1. Fade-in the object only when `body` is hovered over. Otherwise on page
 *    load the cursor is stuck in the top/left of the browser until you move the
 *    mouse, which looks a bit crap. At least this is a bit more graceful.
 * 2. Add a lot transitions for various click/hover states which adjust the size
 *    and colour of the element. `transform` is the one for the smooth lag when
 *    moving the cursor.
 */

.cursor-trail {
  background: white;
  box-sizing: border-box;
  height: 8px;
  margin: 0;
  opacity: 0;
  /* [1] */
  pointer-events: none;
  position: fixed;
  transform-origin: center center;
  transition: height 0.04s ease-out, margin 0.04s ease-out, opacity 0.16s 0.16s, transform 0.32s cubic-bezier(0, 0.48, 0.64, 1), width 0.08s ease-out;
  /* [2] */
  width: 8px;
  mix-blend-mode: difference;
  z-index: 1000;
}

body:hover .cursor-trail {
  opacity: 1;
}

/**
 * A class of `.cursor-trail--hover` is added when the user hovers over a link.
 * When this occurs we shrink the trailing div. The `margin` keeps the div
 * centred with `.cursor` when triggered. Previously a `transform` was used to
 * centre the div - but pixel values just meant less was being calculated at
 * the same time and led to better/smoother performance.
 */

.cursor-trail--hover {
  height: 0;
  margin: 4px 0 0 4px;
  width: 0;
}

/**
 * If an element on the page has a `data-label` set, Javascript gets the value
 * and displays the text within `.cursor__label-text` to a label can be
 * displayed alongside the cursor.
 *
 * 1. The parent of the label which has `overflow: hidden` set, allows the text
 *    to be animated vertically in/out of view on hover.
 */

.cursor__label {
  color: white;
  overflow: hidden;
  /* [1] */
  position: absolute;
  top: -8px;
  left: 16px;
}

/**
 * 1. The label begins out of view, pushed beyond the bottom edge of the parent.
 * 2. When an element with a label is hovered over, a class and animation is
 *    added to the main `.cursor-trail` element. This allows us to animate the
 *    text into view. Only running the animation when the class is added, not
 *    when it is removed...
 * 3. The `transition` only runs when `.cursor-trail--label` is removed from the
 *    parent. As the `animation` only runs when the class is added, it allows us
 *    to `transition` the text out the top edge of it's container without the
 *    animation interfering with it.
 */

.cursor__label-text {
  display: block;
  opacity: 0;
  transform: translateY(-100%);
  /* [1] */
  transition: opacity 0.16s ease-out, transform 0.16s ease-out;
  /* [3] */
  white-space: nowrap;
}

.cursor-trail--label .cursor__label-text {
  /* [2] */
  animation: cursor-label 0.16s ease-out;
  opacity: 1;
  transform: translateY(0);
}

/**
 * Animation which moves the label into view from the bottom of it's parent.
 */

@keyframes cursor-label {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}




/* ==========================================================================
   #MARQUEE
   ========================================================================== */

/**
 * Auto-scrolling gallery displaying images of projects.
 *
 * 1. Animation settings.
 */

:root {
  /* [1] */
  --play: running;
  --direction: normal;
  --duration: 32s;
  --delay: 0s;
  --iteration-count: infinite;
}

/**
 * As we're using a CSS auto-scrolling carousel, we need a duplicate `.marquee`
 * for a seamless, continuous loop. So we need a wrapping div to contain them
 * both.
 *
 * 1. Ensure both `.marquee` elements display in a row.
 * 2. Prevent any horizontal scrolling of the page.
 */

.marquee-wrap {
  display: flex;
  /* [1] */
  flex-direction: row;
  /* [1] */
  margin-bottom: 64px;
  overflow: hidden;
  /* [2] */
}

/**
 * The two `.marquee` elements are styled and behave exactly the same. The only
 * difference is the 2nd one has `aria-hidden="true"` set for SEO.
 *
 * 1. Prevent the content from shrinking.
 */

.marquee {
  display: flex;
  /* [1] */
  flex-shrink: 0;
  /* [1] */
  animation: marquee-scroll var(--duration) linear var(--delay) var(--iteration-count);
  animation-play-state: var(--play);
  animation-delay: var(--delay);
  animation-direction: var(--direction);
  min-width: 100%;
  /* [1] */
}

/**
 * Set the height/width of each item and prevent it from shrinking.
 */

.marquee__item {
  flex-shrink: 0;
  margin-right: 8px;
  width: 320px;
}

/**
 * Animate the content from left to right.
 */

@keyframes marquee-scroll {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}



/* ==========================================================================
   #KEEN SLIDER
   ========================================================================== */
/**
 * 1. Removed `overflow: hidden` so I could align the slider with the main grid
 *    but still have it bleed off the edges of the page. To avoid a horizontal
 *    scroll on the site, I've added `overflow: hidden` to a parent div.
 */
.keen-slider:not([data-keen-slider-disabled]) {
  display: flex;
  align-content: flex-start;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide {
  min-height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v] {
  flex-wrap: wrap;
}

/* ==========================================================================
   #GALLERY
   ========================================================================== */
/**
 * My overrides for the Keen Slider gallery.
 *
 * 1. Remove `overflow: hidden` from the slider and add it to the parent. This
 *    allows the slider to align with the grid but also bleed off the edges of
 *    the page.
 * 2. Align container with the global grid.
 */

.gallery {
  margin-bottom: 64px;
  overflow: hidden;
  /* [1] */
  padding: 0 16px;
  /* [2] */
}

.gallery .keen-slider {
  overflow: visible;
  /* [1] */
}




/* ==========================================================================
   #PIXEL LOAD
   ========================================================================== */

/**
 * Add a pixelated effect to images while the load.
 */

.pixel-load {
  overflow: hidden;
  position: relative;
}

.pixel-load__preload img {
  image-rendering: pixelated;
  position: absolute;
  inset: 0;
  opacity: 1;
  pointer-events: none;
}

.loaded .pixel-load__preload img {
  animation: loaded 0.32s 0.32s steps(1, end) both;
}

@keyframes loaded {
  0% {
    scale: 1.1;
  }

  64% {
    scale: 1.04;
  }

  75% {
    opacity: 0.8;
    scale: 1.02;
  }

  100% {
    opacity: 0;
    z-index: 1;
  }
}

<html>

  <body>
    <div class="cursor-trail">
      <div class="cursor__label"><span class="cursor__label-text"></span></div>
    </div>

    <h2>1. Keen Slider Version</h2>

    <!-- Keen Slider -->
    <div class="gallery">
      <div id="gallery-slider" class="keen-slider">
        <div class="keen-slider__slide">
          <figure data-label="Hover Label 1" class="has-label">
            <div class="pixel-load">
              <div class="pixel-load__preload">
                <img src="https://placebeard.it/18/24" width="18" height="24">
              </div>
              <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
            </div>
            <figcaption>Slide 1</figcaption>
          </figure>
        </div>
        <div class="keen-slider__slide">
          <figure data-label="Hover Label 2" class="has-label">
            <div class="pixel-load">
              <div class="pixel-load__preload">
                <img src="https://placebeard.it/18/24" width="18" height="24">
              </div>
              <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
            </div>
            <figcaption>Slide 2</figcaption>
          </figure>
        </div>
        <div class="keen-slider__slide">
          <figure data-label="Hover Label 3" class="has-label">
            <div class="pixel-load">
              <div class="pixel-load__preload">
                <img src="https://placebeard.it/18/24" width="18" height="24">
              </div>
              <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
            </div>
            <figcaption>Slide 3</figcaption>
          </figure>
        </div>
        <div class="keen-slider__slide">
          <figure data-label="Hover Label 4" class="has-label">
            <div class="pixel-load">
              <div class="pixel-load__preload">
                <img src="https://placebeard.it/18/24" width="18" height="24">
              </div>
              <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
            </div>
            <figcaption>Slide 4</figcaption>
          </figure>
        </div>
        <div class="keen-slider__slide">
          <figure data-label="Hover Label 5" class="has-label">
            <div class="pixel-load">
              <div class="pixel-load__preload">
                <img src="https://placebeard.it/18/24" width="18" height="24">
              </div>
              <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
            </div>
            <figcaption>Slide 5</figcaption>
          </figure>
        </div>
        <div class="keen-slider__slide">
          <figure data-label="Hover Label 6" class="has-label">
            <div class="pixel-load">
              <div class="pixel-load__preload">
                <img src="https://placebeard.it/18/24" width="18" height="24">
              </div>
              <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
            </div>
            <figcaption>Slide 6</figcaption>
          </figure>
        </div>
        <div class="keen-slider__slide">
          <figure data-label="Hover Label 7" class="has-label">
            <div class="pixel-load">
              <div class="pixel-load__preload">
                <img src="https://placebeard.it/18/24" width="18" height="24">
              </div>
              <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
            </div>
            <figcaption>Slide 7</figcaption>
          </figure>
        </div>
        <div class="keen-slider__slide">
          <figure data-label="Hover Label 8" class="has-label">
            <div class="pixel-load">
              <div class="pixel-load__preload">
                <img src="https://placebeard.it/18/24" width="18" height="24">
              </div>
              <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
            </div>
            <figcaption>Slide 8</figcaption>
          </figure>
        </div>
      </div>
    </div>
    <!-- End Keen Slider -->

    <h2>2. CSS Marquee Version</h2>

    <!-- Gallery -->
    <div class="marquee-wrap">

      <div class="marquee">
        <figure data-label="Hover Label 1" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Slide 1</figcaption>
        </figure>
        <figure data-label="Hover Label 2" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Slide 2</figcaption>
        </figure>
        <figure data-label="Hover Label 3" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Slide 3</figcaption>
        </figure>
        <figure data-label="Hover Label 4" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Slide 4</figcaption>
        </figure>
        <figure data-label="Hover Label 5" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Slide 5</figcaption>
        </figure>
        <figure data-label="Hover Label 6" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Slide 6</figcaption>
        </figure>
        <figure data-label="Hover Label 1" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Slide 7</figcaption>
        </figure>
        <figure data-label="Hover Label 8" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Slide 8</figcaption>
        </figure>
      </div>

      <div class="marquee" aria-hidden="true">
        <figure data-label="Hover Label 1" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Clone Slide 1</figcaption>
        </figure>
        <figure data-label="Hover Label 2" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Clone Slide 2</figcaption>
        </figure>
        <figure data-label="Hover Label 3" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Clone Slide 3</figcaption>
        </figure>
        <figure data-label="Hover Label 4" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Clone Slide 4</figcaption>
        </figure>
        <figure data-label="Hover Label 5" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Clone Slide 5</figcaption>
        </figure>
        <figure data-label="Hover Label 6" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Clone Slide 6</figcaption>
        </figure>
        <figure data-label="Hover Label 1" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Clone Slide 7</figcaption>
        </figure>
        <figure data-label="Hover Label 8" class="marquee__item has-label">
          <div class="pixel-load">
            <div class="pixel-load__preload">
              <img src="https://placebeard.it/18/24" width="18" height="24">
            </div>
            <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
          </div>
          <figcaption>Clone Slide 8</figcaption>
        </figure>
      </div>

    </div>
    <!-- End Gallery -->

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/keen-slider.min.js"></script>
  </body>

</html>