debug_fields(); ?>
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-courses-search {
overflow: hidden;
&:not([class*=pad-]) {
@include padding( rem-calc(64 0) );
}
&.theme--light {
.container {
&:first-of-type {
background: none;
background-color: $grey;
}
}
}
.container {
position: relative;
z-index: 5;
&:first-of-type {
@include gradient-diagonal-reverse();
@include padding( rem-calc(56 80) );
@include bp($xxl) {
@include padding( rem-calc(56 145) );
}
}
&:last-of-type {
padding-left: 0;
padding-right: 0;
}
}
.heading,
.content-container {
color: var(--text-color);
}
.content-container {
p {
@include fluid-type(14, 18);
&:last-of-type {
margin-bottom: 0;
}
}
}
&__col {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: rfs-fluid-value( rem-calc(60) );
@include bp($lg) {
flex-wrap: nowrap;
}
}
&__meta {
max-width: rem-calc(525);
}
.form-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: rfs-fluid-value( rem-calc(30) );
flex-grow: 1;
.search-container {
background-color: #ffffff;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
@include padding( rem-calc(0 20) );
flex-grow: 1;
overflow: hidden;
transition: 0.3s var(--ease);
transition-property: background-color;
&.loading {
pointer-events: none;
background-color: rgba(#ffffff, 0.5);
&:after {
width: 100%;
height: rem-calc(2);
content: '';
background-color: $white;
position: absolute;
bottom: 0;
left: 0;
transform-origin: left;
animation-name: grow;
animation-duration: 1.4s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
}
input {
max-width: rem-calc(675);
border: none;
margin: 0;
padding-left: 0;
background-color: transparent;
}
button {
width: rem-calc(24);
height: rem-calc(24);
margin: 0;
padding: 0;
background-color: transparent;
border: none;
background-image: url("/wp-content/themes/british-esports/assets/icons/search-navy.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transition: 0.3s background-image var( --ease );
&:hover {
background-image: url("/wp-content/themes/british-esports/assets/icons/search-secondary.svg");
}
}
}
}
&__results {
@include margin-top( rem-calc(32) );
gap: rem-calc(16 0);
&:empty {
margin: 0;
}
p {
&.no-results {
color: var(--text-color);
}
}
.post-card {
--text-color: #{$primary};
background-color: #fff;
.post-card__category {
border-color: $primary;
}
}
}
}
@keyframes grow {
from {
transform: translate3d(-100%,0,0);
}
to {
transform: translate3d(100%,0,0);
}
}
class CoursesSearch {
/**
* @param {object} block
*/
constructor( block ) {
this.block = block;
this.searching = false;
this.searchContainer = this.block.querySelector( '.search-container' );
this.searchInput = this.searchContainer.querySelector( '.search-container input' );
this.searchBtn = this.searchContainer.querySelector( '.search-container button' );
this.postCardTemplate = document.getElementById('course-search-card-template').innerHTML;
this.postCardTemplateCompiled = Handlebars.compile( this.postCardTemplate );
this.resultsRow = this.block.querySelector( '.block-courses-search__results' );
this.searchBtn.addEventListener( 'click', e => this.search() );
this.searchInput.addEventListener( 'keyup', e => {
if (e.keyCode === 13) {
this.search();
}
});
}
search() {
if ( this.searching === true ) {
return;
}
if ( this.searchInput.value.trim() === '' ) {
this.resultsRow.innerHTML = '';
this.searchInput.value = '';
this.searchInput.focus();
return;
}
this.searchContainer.classList.add( 'loading' );
this.resultsRow.innerHTML = '';
this.searching = true;
fetch(`${window.location.origin}/wp-json/search/v1/courses?search=${this.searchInput.value}`, {
method: 'get',
})
.then( response => response.json() )
.then( data => {
if ( data.status === 200 ) {
let rendered = this.postCardTemplateCompiled( data );
this.resultsRow.innerHTML = rendered;
this.searchContainer.classList.remove( 'loading' );
this.searching = false;
if ( data.posts.length === 0 ) {
this.resultsRow.innerHTML = 'Sorry, no courses were found.
';
}
}
}).catch(function(err) {
console.log(` Err: ${err} - ${this.searchInput.value}`);
});
}
}
document.querySelectorAll('.block-courses-search').forEach((block) => {
new CoursesSearch( block );
});
Animation: