@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-trivia-bar {
padding-top: clamp(40px, 8vw, 140px);
padding-bottom: clamp(40px, 8vw, 140px);
--text-color: var(--white);
&__wrapper,
&__background {
border-radius: 10px;
}
&__wrapper {
position: relative;
max-width: 1600px;
margin: 0 auto;
background-color: var(--tertiary);
padding: 2rem;
overflow: hidden;
cursor: pointer;
&.is-open {
height: auto;
cursor: default;
}
}
&__tab-header {
font-size: clamp(18px, 2vw, 28px);
color: white;
font-weight: 600;
z-index: 1;
position: relative;
.row {
align-items: center;
}
@include bp($lg, true) {
margin-top: 2rem;
}
}
&__question {
padding-left: 2rem;
margin-bottom: 2rem;
@include bp($md) {
padding-left: 4rem;
}
@include bp($lg) {
margin-bottom: 0;
}
}
&__trigger {
text-align: right;
transition: all 0.3s ease-in-out;
@include bp($md, true) {
.btn {
width: 100%;
text-align: center;
}
}
}
&__tab-trigger {
color: var(--white) !important;
text-decoration: none !important;
}
&__question-label {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: var(--primary);
padding: 0.5rem 1rem;
width: 2rem;
z-index: 1;
@include bp($lg, true) {
left: 0;
top: 0;
right: 0;
height: 2rem;
width: 100%;
}
}
&__question-label-text {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
text-transform: uppercase;
font-weight: 700;
color: var(--white);
font-size: rem-calc(20);
@include bp($lg, true) {
transform: translateX(-50%) translateY(-50%);
}
}
&__background {
opacity: 0;
transition: opacity 0.3s ease-in-out;
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at 90% 50%, transparent 0%, transparent 15%, rgba(66, 144, 129, 1) 55%);
z-index: 1;
border-radius: 10px;
@include bp($md, true) {
background: linear-gradient(to bottom, rgba(66, 144, 129, 1) 20%, transparent 50%, rgba(66, 144, 129, 1) 80%);
}
}
@include bp($lg, true) {
display: none;
}
}
&__tab-content {
height: 0;
overflow: hidden;
overflow: clip;
z-index: 1;
position: relative;
transition: height 0.3s ease-in-out;
.content {
/* clamp font size */
font-size: clamp(16px, 2vw, 20px);
max-width: rem-calc(410);
@include bp($lg, true) {
max-width: rem-calc(600);
}
}
}
&__answer {
padding: 2rem 2rem;
--text-color: var(--white);
@include bp($md) {
padding: 2rem 4rem;
}
.btn {
color: var(--white) !important;
text-decoration: none !important;
}
}
&.is-open {
.block-trivia-bar {
&__background {
opacity: 1;
}
&__trigger {
opacity: 0;
height: 0;
pointer-events: none;
}
}
}
}
.acf-block-preview {
.block-trivia-bar {
&__tab-content {
height: auto !important;
}
}
}
class TriviaBar {
block;
constructor(block) {
this.block = block;
this.init();
}
init() {
const trigger = this.block.querySelector('.block-trivia-bar__trigger a');
const contentHeight = this.block.querySelector('.block-trivia-bar__answer').offsetHeight;
const wrapper = this.block.querySelector('.block-trivia-bar__wrapper');
// if we're on a screen below 992px then we need to add both the heights
let biggerHeight = contentHeight;
trigger.addEventListener('click', (e) => {
e.preventDefault();
});
wrapper.addEventListener('click', (e) => {
e.preventDefault();
const tabContent = this.block.querySelector('.block-trivia-bar__tab-content');
tabContent.style.height = `${biggerHeight}px`;
this.block.classList.add('is-open');
}, {
once: true
});
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-trivia-bar').forEach((block) => {
new TriviaBar(block);
})
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/trivia-bar",
"title": "Trivia Bar",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-trivia-bar.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": false,
"text": false,
"gradients": false
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Trivia Bar",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": ["file:../../assets/css/trivia-bar/block-trivia-bar.css"],
"viewScript": ["trivia-bar"],
"allowedBlocks": ["core/paragraph"]
}