Skip to content

Commit

Permalink
Video Module Block New Variant #178 (#271)
Browse files Browse the repository at this point in the history 
* add variant for expanding animation
* refactor alignment of content
* refactor typography
* refactor overlay: removed when text not present
  • Loading branch information
@cogniSyb
cogniSyb committed Dec 4, 2023
1 parent a5fbbfe commit 76e626c
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 39 deletions.
61 changes: 40 additions & 21 deletions blocks/v2-video/v2-video.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,22 @@ body .section.v2-video-container .v2-video-wrapper {
.v2-video {
--video-inset: inset(16px 16px round 8px);
--video-transition: all var(--duration-large) ease-in-out;
--video-overlay: linear-gradient(0deg, rgb(0 0 0 / 50%) 20%, rgb(0 0 0 / 0%) 60%);

position: relative;
overflow: hidden;
display: flex;
justify-content: center;
height: 100vh;
background: var(--c-grey-4);
}

.v2-video--expanding {
clip-path: var(--video-inset);
transition: var(--video-transition);
}

.v2-video.v2-video--full-width {
.v2-video--expanding.v2-video--full-width {
--video-inset: inset(0 0 round 0);
}

Expand All @@ -47,23 +52,23 @@ body .section.v2-video-container .v2-video-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-end;
background: linear-gradient(0deg, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 0%) 100%);
width: 100%;
position: relative;
align-items: center;
}

.v2-video .v2-video__content-wrapper::before {
content: '';
position: absolute;
inset: 0;
background: var(--video-overlay);
}

.v2-video .v2-video__content {
margin: 48px;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--font-family-body);
font-size: var(--f-body-font-size);
font-style: normal;
line-height: var(--f-body-line-height);
letter-spacing: var(--f-body-letter-spacing);
text-align: center;
transition: var(--video-transition);
}
Expand All @@ -72,9 +77,13 @@ body .section.v2-video-container .v2-video-wrapper {
margin: 0;
}

.v2-video .v2-video__content p {
font-family: var(--font-family-body);
font-style: normal;
.v2-video .v2-video__heading {
font: var(--f-heading-5-font-size)/var(--f-heading-5-line-height) var(--ff-volvo-novum-medium);
letter-spacing: var(--f-heading-5-letter-spacing);
}

.v2-video .button-container {
margin-top: 8px;
}

@media (min-width: 744px) {
Expand All @@ -84,17 +93,12 @@ body .section.v2-video-container .v2-video-wrapper {

.v2-video {
--video-inset: inset(32px 32px round 8px);
--video-overlay: linear-gradient(0deg, rgb(0 0 0 / 50%) 20%, rgb(0 0 0 / 0%) 50%);
}

.v2-video .v2-video__content {
margin: 64px;
max-width: 400px;
}

.v2-video .v2-video__heading {
font-size: var(--f-heading-4-font-size);
line-height: var(--f-heading-4-line-height);
letter-spacing: var(--f-heading-4-letter-spacing);
max-width: var(--text-block-max-width);
}
}

Expand All @@ -105,20 +109,35 @@ body .section.v2-video-container .v2-video-wrapper {

.v2-video {
--video-inset: inset(136px calc((100vw - var(--wrapper-width)) / 2) round 8px);
--video-overlay: linear-gradient(90deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 0%) 50%);
}

.v2-video .v2-video__content-wrapper {
max-width: var(--wrapper-width);
justify-content: center;
align-items: flex-start;
}

.v2-video .v2-video__content {
margin: auto calc((100vw - 1200px) / 2);
transform: translateX(135px);
margin: 120px;
max-width: 456px;
gap: 16px;
text-align: left;
}

.v2-video.v2-video--full-width .v2-video__content {
transform: translateX(0);
transform: translateX(-120px);
}

.v2-video .v2-video__heading {
font-size: var(--f-heading-4-font-size);
line-height: var(--f-heading-4-line-height);
letter-spacing: var(--f-heading-4-letter-spacing);
}

.v2-video .v2-video__content p {
font-size: var(--f-body-2-font-size);
line-height: var(--f-body-2-line-height);
letter-spacing: var(--f-body-2-letter-spacing);
}
}
35 changes: 25 additions & 10 deletions blocks/v2-video/v2-video.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { removeEmptyTags, variantsClassesToBEM } from '../../scripts/common.js';
import { createVideo, setPlaybackControls } from '../../scripts/video-helper.js';

const onHoverOrScroll = (element, handler) => {
Expand Down Expand Up @@ -30,32 +31,36 @@ const onHoverOrScroll = (element, handler) => {
});
};

const variantClasses = ['expanding'];

export default async function decorate(block) {
const blockClass = 'v2-video';
const blockName = 'v2-video';
const videoLink = block.querySelector('a');
const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6');
const ctaButtons = block.querySelectorAll('.button-container a');
const contentWrapper = block.querySelector(':scope > div');
const content = block.querySelector(':scope > div > div');

variantsClassesToBEM(block.classList, variantClasses, blockName);

if (!videoLink) {
// eslint-disable-next-line no-console
console.warn('Video for v2-video block is required and not provided. The block will not render!');
block.innerHTML = '';
}

const video = createVideo(videoLink.getAttribute('href'), `${blockClass}__video`, {
const video = createVideo(videoLink.getAttribute('href'), `${blockName}__video`, {
muted: true,
autoplay: true,
loop: true,
playsinline: true,
});

contentWrapper.classList.add(`${blockClass}__content-wrapper`);
content.classList.add(`${blockClass}__content`);
[...headings].forEach((heading) => heading.classList.add(`${blockClass}__heading`));
contentWrapper.classList.add(`${blockName}__content-wrapper`);
content.classList.add(`${blockName}__content`);
[...headings].forEach((heading) => heading.classList.add(`${blockName}__heading`));
[...ctaButtons].forEach((button) => {
button.classList.add(`${blockClass}__button`, 'tertiary', 'dark');
button.classList.add(`${blockName}__button`, 'tertiary', 'dark');
button.classList.remove('primary');
});

Expand All @@ -65,9 +70,19 @@ export default async function decorate(block) {

setPlaybackControls();

onHoverOrScroll(block.querySelector(`.${blockClass}__content-wrapper`), (val) => {
const action = val ? 'add' : 'remove';
removeEmptyTags(block);

block.classList[action](`${blockClass}--full-width`);
});
if (contentWrapper.innerHTML.trim().length === 0) {
contentWrapper.remove();
}

if (block.classList.contains(`${blockName}--expanding`)) {
onHoverOrScroll(block, (val) => {
const action = val ? 'add' : 'remove';

block.classList[action](`${blockName}--full-width`);
});
} else {
block.classList.add(`${blockName}--full-width`);
}
}
9 changes: 1 addition & 8 deletions styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1463,13 +1463,6 @@ main.blue-contract .section.section-with-title p {
padding: 0;
}

.v2-video .v2-video__heading {
font-family: var(--font-family-heading);
font-size: var(--f-heading-5-font-size);
font-style: normal;
line-height: var(--f-heading-5-line-height);
}

.v2-video__playback-button .icon-play-video {
display: none;
justify-content: center;
Expand Down Expand Up @@ -1648,4 +1641,4 @@ main.blue-contract .section.section-with-title p {
border-bottom: 7px solid var(--c-white);
}

/* generic tooltip styles ends here */
/* generic tooltip styles ends here */

0 comments on commit 76e626c

Please sign in to comment.