History
There are no ACF fields assigned to this component.
@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"]
}
This component is not currently used on any pages.
There are is no readme file with this component.
