History

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-history {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  border-bottom: 1px solid $border-grey;

  @include bp($lg) {
    padding: 0 0 0 80px;
  }

  &__heading {
    grid-column: 1 / 13;
    grid-row: 1;
    display: block;
    padding: 32px 16px;
    margin: 0;
    font-weight: 400;

    @include bp($md) {
      display: none;
    }
  }

  &__sidebar {
		@include section-sidebar;
		background-color: $white;
		z-index: 3;

		@include bp($md) {
			display: flex;
		}

    .sidebar-inner {
      padding-bottom: rem-calc(36);
      height: 190px;
		}
	}

  &__images {
    @include list-unstyled;
    margin: 0;
    padding: 0;
    grid-row: 2;
    grid-column: 1 / 13;
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    // padding-bottom: 75%;
		aspect-ratio: 16 / 9;
    z-index: 2;

    @include bp($md) {
      // padding-bottom: 110%;
		}

    @include bp($lg) {
			aspect-ratio: 1/1;
      grid-column: 1 / 8;
      // padding-bottom: 100%;
      grid-row: 1;
		}

    @include bp($xxl) {
			aspect-ratio: 4/3;
      // padding-bottom: 80%;
      grid-column: span 6;
    }

    li {
      position: absolute;
      top: 0;
      left: 0;
      inset: 0;
      // clip-path: inset(0% 0% 0% 0%);
      clip-path: polygon(-100% 100%, 100% -100%, 100% 100%, -25% 100%);
      transition: clip-path .6s 0s;

      &.is-selected {
        z-index: 1;

        img {
          scale: 1;
        }
      }

      &.is-removed {
        z-index: 2;
        // clip-path: inset(0% 0% 0% 100%);
        clip-path: polygon(-100% 200%, 300% 0%, 100% 100%, -25% 100%);
        // clip-path: polygon(0% 0, 0% 0, -50% 100%, 0 100%);

        img {
          scale: 1;
        }
      }
    }

    picture {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      object-fit: cover;
			aspect-ratio: 16 / 9;
			overflow: hidden;

			@include bp($lg) {
				height: 100%;
				aspect-ratio: auto;
			}
    }

    img {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      scale: 1.2;
      transition: scale 0.6s 0s;
      transform-origin: center;
    }
  }

  &__carousel {
    grid-column: 1 / 13;
    grid-row: 3;
    position: relative;
    z-index: 0;
    opacity: 0;

    @include bp($md) {
      // grid-row: 2;
		}

    @include bp($lg) {
			grid-column: 8 / 13;
      grid-row: 1;
		}

    @include bp($xl) {
      grid-column: span 6;
    }

    &.flickity-enabled {
      opacity: 1;
    }
  }

  &__navigation {
    grid-row: 4;
    grid-column: 1 / 13;
    position: relative;
    z-index: 4;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    @include bp($md) {
      padding-left: 83px;
		}

    @include bp($lg) {
      grid-row: 3;
      padding-left: 3px;
		}

    &:before {
      content: "";
      width: calc(100% + 160px);
      position: absolute;
      top: 0;
      left: -80px;
      height: 1px;
      background-color: $border-grey;
    }

    &:after {
      content: "";
      position: absolute;
      top: 1px;
      right: 95px;
      width: 80px;
      height: 46px;
      background: rgb(255,255,255);
      background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
      pointer-events: none;
    }

    ul {
      @include list-unstyled;
      margin: 0;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      overflow-x: auto;
      width: 100%;
      transition: opacity .2s;
      padding-right: 24px;
      -ms-overflow-style: none;
      scrollbar-width: none;

      @include bp($lg) {
        padding-right: 40px;
      }

      &.is-disabled {
        pointer-events: none;
        opacity: .7;

        & + .slider-buttons {
          pointer-events: none;
          opacity: .7;
        }
      }

      &::-webkit-scrollbar {
        display: none;
      }

      li {
        padding: 0 20px;
        line-height: 50px;

        @include bp($lg) {
          padding: 0 30px;
        }

        button {
          @include fluid-type(16, 20, 375, $max-container-size);
          @include reset-input;
          background: transparent;
          border: 0;
          font-variant-numeric: tabular-nums;

          &.is-selected {
            font-weight: 700;
          }
        }
      }
    }

    .slider-buttons {
      @include slider-buttons;
      flex-shrink: 0;
      transition: opacity .2s;

      .slider-button:hover {
        background-color: $primary-blue;
      }
    }
  }

  .flickity-enabled:focus {
    outline: none;
  }

  .flickity-viewport {
    height: 100%;
  }

  .flickity-slider {
    height: 100%;
		overflow-y: scroll;
		overflow-x: hidden;

    .carousel-cell {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      column-gap: $grid-gutter-width;
      width: 100%;
      min-height: 100%;
      opacity: 0;
      filter: blur(5px);
      transition: opacity .4s 0s, filter .4s 0s;
      padding: 0 16px;

      @include bp($lg) {
        padding: 0;
      }

      &.is-selected {
        opacity: 1;
        filter: blur(0);
        transition: opacity .2s 0s;

        .carousel-cell {
          &__content > div {
            transform: translateX(0);
          }
        }
      }

      & > * {
        grid-column: span 6;
      }

      &__content {
        display: flex;
        flex-direction: column;
        position: relative;
        height: 100%;

        @include bp($md) {
          padding-left: 96px;
        }

        @include bp($lg) {
          padding-left: 0;
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          column-gap: $grid-gutter-width;
        }

        & > div {
          @include article-wysiwyg;
          transform: translateX(calc(-100% - 160px));

          &:nth-of-type(1) {
            transition: transform .4s cubic-bezier(0.65, 0.05, 0.36, 1);
            position: relative;
            z-index: 1;
            grid-column: 1 / 7;
            padding-top: 30px;
            order: 2;

            @include bp($lg) {
              grid-column: 2 / 6;
              order: 1;
              grid-row: 1;
              padding-top: clamp(70px, 6vw, 160px);
            }

            @include bp($xl) {
              grid-column: 2 / 6;
            }
          }

          &:nth-of-type(2) {
            transition: transform .45s cubic-bezier(0.65, 0.05, 0.36, 1);
            grid-row: 1;
            display: flex;
            z-index: 0;

            @include bp($lg) {
              position: absolute;
              left: -($grid-gutter-width);
              bottom: 0;
              align-items: flex-end;
            }

            & > span {
              @include fluid-type(120, 248, 375, $max-container-size);
              display: block;
              line-height: .7;
              font-weight: 600;
              color: rgba(0, 174, 239, .1);
            }
          }
        }
      }
    }
  }
}

/* flickity-fade */

.flickity-enabled.is-fade .flickity-slider > * {
  pointer-events: none;
  z-index: 0;
}

.flickity-enabled.is-fade .flickity-slider > .is-selected {
  pointer-events: auto;
  z-index: 1;
}

class BlockHistory {
	constructor() {
    this.blocks = document.querySelectorAll('.block-history')
    this.imageTimer
    this.navTimer
    this.mql = window.matchMedia("(max-width: 992px)")
    this.previousBreakpoint = this.mql.matches
		this.events()
	}

	events() {
    if (!this.blocks.length) return
    let _this = this
    this.blocks.forEach(block => {
      const carousel = block.querySelector('.js-block-history-carousel')
      const images = block.querySelectorAll('.js-block-history-images > li')
      const navigation = block.querySelector('.js-block-history-navigation')
      const dots = navigation.querySelectorAll('button')
      const prevButton = block.querySelector('.js-block-history-prev')
      const nextButton = block.querySelector('.js-block-history-next')
      if (!carousel) return
      let flktyOptions = {
        cellAlign: 'left',
        contain: true,
        prevNextButtons: false,
        percentPosition: false,
        pageDots: false,
        fade: true,
        setGallerySize: (this.mql.matches) ? true : false
      }
      let flkty
      initCarousel(carousel, flktyOptions)
      dots.forEach(dot => {
        dot.addEventListener('click', e => {
          dot.classList.add('is-selected')
          dots.forEach(dot => {
            if (dot != e.currentTarget)
              dot.classList.remove('is-selected')
          })
          flkty.select(dot.dataset.index)
        })
      })
      if (prevButton) {
        prevButton.addEventListener('click', () => {
          flkty.previous()
        })
      }
      if (nextButton) {
        nextButton.addEventListener('click', () => {
          flkty.next()
        })
      }
      window.addEventListener('resize', () => {
        resize()
      })
      function initCarousel(f, v) {
        flkty = new Flickity(f, v)
        images.forEach(image => {
          image.classList.remove('is-selected')
        })
        images[flkty.selectedIndex].classList.add('is-selected')
        dots.forEach(dot => {
          dot.classList.remove('is-selected')
        })
        dots[flkty.selectedIndex].classList.add('is-selected')
        scrollNavigation(flkty.selectedIndex)
        flkty.on('change', function() {
          clearTimeout(this.imageTimer)
          clearTimeout(this.navTimer)
          let currentImage = block.querySelector('.js-block-history-images > li.is-selected')
          navigation.classList.add('is-disabled')
          currentImage.classList.remove('is-selected')
          currentImage.classList.add('is-removed')
          images[flkty.selectedIndex].classList.add('is-selected')
          this.imageTimer = setTimeout(() => {
            block.querySelector('.js-block-history-images > li.is-removed').classList.remove('is-removed')
          }, 600)
          this.navTimer = setTimeout(() => {
            navigation.classList.remove('is-disabled')
          }, 850)
          dots[flkty.selectedIndex].classList.add('is-selected')
          dots.forEach(dot => {
            if (dot != dots[flkty.selectedIndex])
              dot.classList.remove('is-selected')
          })
          scrollNavigation(flkty.selectedIndex)
        })
      }
      function scrollNavigation(selectedIndex) {
        const selectedDot = dots[selectedIndex]
        if (!selectedDot) return

        const navigationRect = navigation.getBoundingClientRect()
        const dotRect = selectedDot.getBoundingClientRect()
        const scrollLeft = navigation.scrollLeft + (dotRect.left - navigationRect.left) - 20

        navigation.scrollTo({
          left: scrollLeft,
          behavior: 'smooth'
        })
      }
      function initOptions() {
        if (_this.mql.matches) {
          flktyOptions.setGallerySize = true
        } else {
          flktyOptions.setGallerySize = false
        }
      }
      // resize
      function resize() {
        const currentBreakpoint = _this.mql.matches
        if (currentBreakpoint !== _this.previousBreakpoint) {
          initOptions()
          flkty.destroy()
          initCarousel(carousel, flktyOptions)
          _this.previousBreakpoint = currentBreakpoint
        }
      }
    })
	}
}

document.addEventListener('DOMContentLoaded', () => {
  new BlockHistory();
});

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "strategiq/history",
  "title": "History",
  "description": "Example block to be used as a template",
  "category": "strategiq",
  "icon": "strategiq",
  "acf": {
      "mode": "preview",
      "renderTemplate": "block-history.php"
  },
  "supports": {
      "anchor": true,
      "align": false,
      "spacing": {
          "margin": [
              "bottom"
          ]
      }
  },
  "example": {
      "attributes": {
          "mode": "preview",
          "data": {
              "heading_type": "h2",
              "heading_text": "Example - Cta Collage",
              "content": "This is some example content to represent what the content will look like"
          }
      }
  },
  "style": ["file:../../assets/css/history/block-history.css", "flickity-css"],
  "viewScript": ["flickity-js", "flickity-fade", "history"]
}