<section class="ongoing-learner-location-finder" data-behavior="ongoing-learner-location-finder">
<div class="fas-level-1">
<div class="ongoing-learner-location-finder__container">
<div class="ongoing-learner-location-finder__inner">
<h2>Find local ongoing learning opportunities</h2>
<div class="fas-level-copy">Discover workshop, webinar, meetups and more.
Use our search to find different learning opportunities near you.
</div>
<hr>
<div class="fas-level-location">
<a href="/" class="cta cta--primary fas-level-current-location" id="fas-level-current-location" tabindex="0">Use current location</a>
<a href="/" class="cta cta--primary current-location-found hidden" id="current-location-found" tabindex="0">Location found</a>
<a class="cta cta--primary location-not-found hidden" tabindex="0">Location Not Found, manually enter below</a>
<a class="cta cta--primary fas-enter-location-cta" tabindex="0">Enter Location</a>
<div class="fas-level-location__postcode hidden">
<div id="fasLevelSearchBoxContainer">
<input type="text" id="fasLevelSearchBox" class="fas-level-location__postcode-input" placeholder="Enter Location" autocomplete="off" />
</div>
</div>
</div>
<hr>
<a class="cta cta--efl search-fas-level-course" tabindex="0">Search</a>
</div>
</div>
<input type="hidden" class="search-longitude" value="" />
<input type="hidden" class="search-latitude" value="" />
<input type="hidden" class="search-place" value="" />
</div>
<div class="fas-level-2 hidden">
<div class="loading">
<div class="loader"></div>
<div class="efl-logo"></div>
</div>
</div>
<div class="fas-level-3 hidden">
<div class="ongoing-learner-location-finder__container">
<div class="ongoing-learner-location-finder__inner">
<div class="ongoing-learner-location-finder__inner--heading">
<div>
<h2>Your nearest County FAs</h2>
<div class="fas-level-copy">
Your 6 county FAs are below
</div>
</div>
<a class="fas-level-location__clear">Clear results</a>
</div>
<hr>
<div class="county-fas-result-list">
<div class="county-fas-result-list__list">
<div class="county-fas-result-list__show-more-card">
<button class="show-more mobile">SHOW MORE COUNTY FAs</button>
</div>
</div>
<button class="show-more">Show More</button>
</div>
</div>
</div>
</div>
</section>
No notes defined.
{
"cta1": {
"copy": "Use current location",
"modifier": "primary",
"id": "fas-level-current-location",
"additionalClass": "fas-level-current-location"
},
"cta2": {
"copy": "Search",
"modifier": "efl",
"href": "",
"additionalClass": "search-fas-level-course"
},
"cta3": {
"copy": "Location found",
"modifier": "primary",
"id": "current-location-found",
"additionalClass": "current-location-found hidden"
},
"cta4": {
"copy": "Location Not Found, manually enter below",
"modifier": "primary",
"href": "",
"additionalClass": "location-not-found hidden"
},
"cta5": {
"copy": "Enter Location",
"modifier": "primary",
"href": "",
"additionalClass": "fas-enter-location-cta"
}
}
export default parentElement => {
const headers = {
// 'Ocp-Apim-Subscription-Key': '8279c7fab35f432daf1a0bd395a9ae48',
};
const currentBtn = parentElement.querySelector('.fas-level-current-location');
const locationFound = parentElement.querySelector('.current-location-found');
const locationNotFound = parentElement.querySelector('.location-not-found');
const enterLocationCta = parentElement.querySelector(
'.fas-enter-location-cta'
);
const map = parentElement.querySelector('.MicrosoftMap');
const searchBlock = parentElement.querySelector(
'.fas-level-location__postcode'
);
const searchBox = parentElement.querySelector('#fasLevelSearchBox');
const longitudeInput = parentElement.querySelector('.search-longitude');
const latitudeInput = parentElement.querySelector('.search-latitude');
const searchPlace = parentElement.querySelector('.search-place');
const searchBtn = parentElement.querySelector('.search-fas-level-course');
const step1 = parentElement.querySelector('.fas-level-1');
const step2 = parentElement.querySelector('.fas-level-2');
const step3 = parentElement.querySelector('.fas-level-3');
const loadMoreCta = parentElement.querySelectorAll('.show-more');
const defaultCount = 6;
const clearBtn = parentElement.querySelector('.fas-level-location__clear');
let nearestCountyList;
const validateForm = () => {
if (!longitudeInput.value || !latitudeInput.value) {
searchBtn.setAttribute('disabled', 'disabled');
return;
}
searchBtn.removeAttribute('disabled');
};
const searchByCurrentLocation = target => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
position => {
longitudeInput.value = position.coords.longitude;
latitudeInput.value = position.coords.latitude;
searchPlace.value = '';
target.querySelector('.loading').remove();
target.classList.remove('searching');
target.classList.add('hidden');
locationFound.classList.remove('hidden');
locationFound.focus();
validateForm();
},
error => {
console.log(error);
target.classList.remove('searching');
target.querySelector('.loading').remove();
target.classList.add('hidden');
locationNotFound.classList.remove('hidden');
searchBlock.classList.remove('hidden');
}
);
} else {
// eslint-disable-next-line no-console
console.log('Geolocation is not supported by this browser.');
}
};
const searchByLocation = event => {
event.preventDefault();
const { target } = event;
if (!target.classList.contains('searching')) {
target.classList.add('searching');
target.insertAdjacentHTML(
'beforeend',
'<div class="loading"><span class="efl-logo"></span><span class="loader"></span></div>'
);
}
searchByCurrentLocation(target);
};
function loadMapScenario() {
function selectedSuggestion(suggestionResult) {
// eslint-disable-next-line no-unused-vars
const { location, formattedSuggestion } = suggestionResult;
const { longitude, latitude } = location;
longitudeInput.value = longitude;
latitudeInput.value = latitude;
searchPlace.value = formattedSuggestion;
searchBox.classList.add('location-added');
validateForm();
}
function searchLoad() {
const options = { maxResults: 4 };
const manager = new window.Microsoft.Maps.AutosuggestManager(options);
manager.attachAutosuggest(
`#fasLevelSearchBox`,
`#fasLevelSearchBoxContainer`,
selectedSuggestion
);
}
function onError(message) {
// eslint-disable-next-line no-console
console.log(message);
}
const mapIntervel = setInterval(() => {
if (window.Microsoft.Maps.loadModule) {
window.Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
callback: searchLoad,
errorCallback: onError,
});
clearInterval(mapIntervel);
}
}, 100);
}
const loadBingMapSerch = () => {
const tag = document.createElement('script');
// eslint-disable-next-line no-undef
const mapScriptUrl = `//www.bing.com/api/maps/mapcontrol?key=${bingMapKey}`;
tag.setAttribute('defer', '');
tag.setAttribute('async', '');
tag.setAttribute('type', 'text/javascript');
tag.setAttribute('src', mapScriptUrl);
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
tag.onload = () => {
loadMapScenario();
};
};
async function checkNearestCountyCallback() {
const url = `${window.location.origin}/Resources/GetNearestCounty/?lat=${
latitudeInput.value
}&lon=${longitudeInput.value}`;
// eslint-disable-next-line compat/compat
const response = await fetch(url, {
headers,
});
return response.json();
}
const formatCountyList = countyList => {
const countyListElement = parentElement.querySelector(
'.county-fas-result-list__list'
);
countyList.forEach(countyItem => {
const countyItemHtml = `
<div class="county-fas-result" data-behaviour="county-fas-result">
<div class="county-fas-result__inner">
<div class="county-fas-result__inner--logo">
<img src="${countyItem.countyLogo}" alt="">
<div class="county-dist">${countyItem.distance}M</div>
</div>
<div class="county-fas-result__inner--details">
<h3 class="county-name">${countyItem.countyName}</h3>
<p>Contact Details</p>
<div class="phone-number">${countyItem.phone}</div>
<div class="mail-id"><span>${countyItem.email}</span></div>
</div>
<a href="${
countyItem.cta
}" class="cta cta--efl view-cpd-opportunities" tabindex="0">View CPD Opportunities</a>
</div>
</div>`;
// bind html object to county list
countyListElement.insertAdjacentHTML('beforeend', countyItemHtml);
});
if (countyList.length) {
if (countyList <= defaultCount) {
loadMoreCta.forEach(loadmore => {
loadmore.classList.add('hidden');
if (loadmore.classList.contains('mobile')) {
document
.querySelector('.county-fas-result-list__show-more-card')
.classList.add('hidden');
}
});
} else {
loadMoreCta.forEach(loadmore => {
loadmore.classList.remove('hidden');
});
const items = parentElement.querySelectorAll(
'.county-fas-result:not(.hidden)'
);
items.forEach((item, index) => {
if (index >= defaultCount) {
item.classList.add('showhide');
}
});
}
}
};
const swithScreen = current => {
step1.classList.add('hidden');
step2.classList.add('hidden');
step3.classList.add('hidden');
current.classList.remove('hidden');
};
const resetfasLevelSearch = () => {
swithScreen(step1);
longitudeInput.value = '';
latitudeInput.value = '';
searchPlace.value = '';
searchBox.value = '';
searchBox.classList.remove('location-added');
currentBtn.classList.remove('hidden');
locationFound.classList.add('hidden');
locationNotFound.classList.add('hidden');
searchBlock.classList.add('hidden');
enterLocationCta.classList.remove('hidden');
validateForm();
};
const checkNearestCounty = () => {
try {
checkNearestCountyCallback().then(response => {
swithScreen(step2);
if (response) {
nearestCountyList = response.nearestCounty;
swithScreen(step3);
formatCountyList(nearestCountyList);
}
});
} catch (e) {
throw new Error('Unable to retrive nearest county ::', e);
}
};
const loadMoreVenue = () => {
const items = parentElement.querySelectorAll('.county-fas-result.showhide');
items.forEach((item, index) => {
if (index < defaultCount) {
item.classList.remove('showhide');
}
});
if (items.length <= defaultCount) {
loadMoreCta.forEach(loadmore => {
loadmore.classList.add('hidden');
if (loadmore.classList.contains('mobile')) {
document
.querySelector('.county-fas-result-list__show-more-card')
.classList.add('hidden');
}
});
}
};
// Find current location coordinates
currentBtn.addEventListener('click', e => {
longitudeInput.value = '';
latitudeInput.value = '';
searchBox.value = '';
searchBox.classList.remove('location-added');
searchBlock.classList.add('hidden');
enterLocationCta.classList.add('hidden');
searchByLocation(e);
});
if (!map) {
loadBingMapSerch();
}
searchBox.addEventListener('focus', () => {
currentBtn.classList.add('hidden');
locationNotFound.classList.add('hidden');
});
searchBox.addEventListener('keydown', () => {
currentBtn.classList.add('hidden');
locationNotFound.classList.add('hidden');
});
searchBox.addEventListener('input', e => {
if (!e.target.value) {
longitudeInput.value = '';
latitudeInput.value = '';
locationFound.classList.add('hidden');
locationNotFound.classList.add('hidden');
searchBox.classList.remove('location-added');
}
});
searchBtn.setAttribute('disabled', 'disabled');
searchBtn.addEventListener('click', e => {
e.preventDefault();
if (!longitudeInput.value || !latitudeInput.value) {
return;
}
swithScreen(step2);
checkNearestCounty();
});
clearBtn.addEventListener('click', e => {
e.preventDefault();
resetfasLevelSearch();
});
loadMoreCta.forEach(cta => {
cta.addEventListener('click', e => {
e.preventDefault();
loadMoreVenue();
});
});
enterLocationCta.addEventListener('click', e => {
e.preventDefault();
searchBlock.classList.remove('hidden');
enterLocationCta.classList.add('hidden');
currentBtn.classList.add('hidden');
locationNotFound.classList.add('hidden');
locationFound.classList.add('hidden');
longitudeInput.value = '';
latitudeInput.value = '';
searchBox.focus();
});
};
.ongoing-learner-location-finder {
display: flex;
flex-direction: column;
position: relative;
padding: 5.2rem 3.2rem;
padding-bottom: 13.2rem;
background: url('./assets/images/course-pro-level-mob.png') left bottom
no-repeat;
background-color: $blue-accent3;
min-height: 82rem;
&__container {
margin: 0 auto;
max-width: 95.2rem;
}
h2 {
font-family: $text-font-ef;
font-size: 3.2rem;
font-style: normal;
font-weight: bold;
line-height: 3.6rem;
letter-spacing: 0.01em;
color: $white;
&::after {
content: '';
border-bottom: 0.2rem solid $red;
width: 3.2rem;
display: block;
margin-top: 0.8rem;
}
}
.fas-level-copy {
@extend .efl-p-medium;
color: $light-blue;
margin-top: 1.2rem;
}
hr {
border-color: $light-blue;
opacity: 0.4;
margin: 1.6rem 0;
}
.loading {
position: relative;
margin: 0 auto;
width: 10.4em;
height: 10.4em;
&.show {
display: block;
}
.efl-logo {
background-image: url('./assets/images/efl-loader-logo.svg');
background-repeat: no-repeat;
background-position: center;
position: absolute;
z-index: 2;
top: 0;
left: 0;
background-size: 4.2rem 5.1rem;
width: 100%;
height: 100%;
}
.loader {
font-size: 10px;
text-indent: -9999em;
width: 100%;
height: 100%;
border-radius: 100%;
overflow: hidden;
background: rgb(236, 238, 243);
position: relative;
-webkit-animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader::before {
width: 100%;
height: 50%;
background: -linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
background: -moz-linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
background: -o-linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
background: -ms-linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
background: -webkit-linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
transform-origin: bottom right;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader::after {
background: $blue-accent3;
width: 90%;
height: 90%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@-webkit-keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
.fas-level-2 {
.loading {
position: absolute;
top: calc(50% - 5.2rem);
left: calc(50% - 5.2rem);
}
}
.fas-level-location {
p {
@extend .efl-p-large;
color: $white;
font-weight: 700;
}
label {
@extend .efl-p-small;
color: $light-blue;
display: block;
}
&__postcode {
padding-bottom: 0.8rem;
}
&__clear {
@extend .efl-p-medium;
color: $white;
display: flex;
justify-content: flex-start;
margin-top: 1.8rem;
margin-bottom: 2.1rem;
text-decoration: underline;
cursor: pointer;
}
&__alert {
background: $white;
border-radius: 0.8rem;
max-width: 46.4rem;
padding: 2.4rem 2.8rem;
margin-top: 22.9rem;
&--title {
@extend .efl-p-small;
color: $red;
padding-left: 3.5rem;
position: relative;
display: flex;
align-items: center;
letter-spacing: 0.16em;
text-transform: uppercase;
padding-bottom: 1.1rem;
&::before {
content: '';
background: url('./assets/images/alert-icon.svg') no-repeat center;
width: 3rem;
height: 3rem;
position: absolute;
left: 0;
}
&::after {
content: '';
border-bottom: 1px solid $grey-light;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
}
&--info {
@extend .efl-p-2;
font-weight: 500;
margin-top: 1.6rem;
color: $blue;
}
p {
@extend .efl-p-small;
margin-top: 0.8rem;
color: $color-interface-light;
margin-bottom: 1.6rem;
}
.fas-level-location__distance--label {
border: 1px solid $grey-light;
padding-left: 3.5rem;
}
.start-new-search {
margin-top: 1rem;
justify-content: center;
}
}
}
.cta {
width: 100%;
max-width: 100%;
font-size: 1.6rem;
line-height: 2.4rem;
&.fas-level-current-location {
position: relative;
background-color: $white;
color: $blue;
margin-top: 1.6rem;
text-transform: initial;
padding: 1rem 4rem;
&::after {
content: '';
background: url('./assets/images/map-pin-dark.svg') no-repeat center
right;
width: 2.4rem;
height: 2.4rem;
position: absolute;
right: 1rem;
left: initial;
bottom: initial;
top: initial;
}
.loading {
position: absolute;
width: 3.2rem;
height: 3.2rem;
right: 1.1rem;
.efl-logo {
background-image: url('./assets/images/ef-logo.svg');
background-size: 1.13rem 1.37rem;
}
.loader {
position: absolute;
left: 0;
&::after {
background: $white;
}
}
}
&.searching {
&::after {
display: none;
}
}
}
&.current-location-found {
background-color: $white;
color: $blue;
margin-top: 1.6rem;
text-transform: initial;
padding: 1rem 4rem;
&::after {
content: '';
background: url('./assets/images/tick-circle-blue.svg') no-repeat center
right;
width: 3rem;
height: 3rem;
position: absolute;
right: 1.1rem;
left: initial;
bottom: initial;
top: initial;
}
}
&.location-not-found {
background-color: $white;
color: $red;
border-color: $white;
margin-top: 1.6rem;
text-transform: initial;
padding: 1rem 4rem;
}
&.confirmation-and-payment {
&::after {
content: '';
background: url('./assets/images/tick-circle.svg') no-repeat center
right;
width: 2.1rem;
height: 2.1rem;
position: absolute;
right: 1.6rem;
left: initial;
bottom: initial;
top: initial;
}
}
&.search-fas-level-course {
text-align: center;
justify-content: center;
border: none;
&:hover {
background-color: $white;
color: $red;
}
&[disabled] {
border: none;
color: $light-blue;
background-color: $grey-light;
cursor: default;
}
}
&.fas-enter-location-cta {
@extend .efl-p-1;
color: $white;
background-color: transparent;
border: 2px solid $white;
margin-top: 1.6rem;
text-transform: initial;
&:hover {
background-color: transparent;
color: $white;
}
}
}
input {
@extend .efl-p-1;
color: $white;
padding: 1.2rem 4rem 1.1rem 2.4rem;
width: 100%;
border: 2px solid $white;
margin-top: 1.6rem;
background-color: transparent !important;
box-sizing: border-box !important;
line-height: 1.6rem;
border-radius: 2px;
text-align: left;
-webkit-appearance: none;
&::-webkit-search-cancel-button {
-webkit-appearance: none;
background: url('./assets/images/icon-close-white.svg') no-repeat 98%
center;
width: 1.4rem;
height: 1.4rem;
padding: 0.5rem;
background-size: 1.6rem;
background-color: $blue-accent3;
margin-right: -2.8rem;
display: none;
cursor: pointer;
}
&::-webkit-input-placeholder {
/* Edge */
color: $white;
}
&:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: $white;
}
&::placeholder {
color: $white;
}
&:focus {
background: url('./assets/images/search-icon-white.svg') no-repeat 98%
center;
}
}
// bing map style
#fasLevelSearchBoxContainer {
position: relative;
.MicrosoftMap {
position: initial !important;
}
.MicrosoftMap .as_container_search {
width: 100% !important;
text-align: left;
}
.MicrosoftMap .as_container .line1 {
@extend .efl-p-1;
color: $black;
}
.MicrosoftMap .as_container .line2 {
@extend .efl-p-1;
color: $color-interface-light;
margin-top: 0.1rem;
}
.MicrosoftMap .as_img.maps_address {
background-image: url('./assets/images/location-pin.svg');
width: 1.5rem !important;
height: 2.2rem !important;
margin-right: 0.8rem;
}
.MicrosoftMap .as_container .as_suggestion_root_inside {
align-items: center;
}
.MicrosoftMap .as_container .suggestLink {
padding: 0.8rem 2.4rem;
&:hover {
background-color: $grey-light;
}
}
}
&.modal-no-bg {
background: none;
padding: 0;
}
.county-fas-list__list {
& > div {
margin-bottom: 2rem;
&:nth-child(3) {
margin-bottom: 2.5rem;
}
}
}
.county-fas-result__days p {
grid-template-columns: 0.9fr auto 1fr;
}
.county-fas-result.showhide {
display: none;
}
@media screen and (min-width: $mq-medium) {
padding: 6.2rem 3.2rem;
background: url('./assets/images/course-pro-level-desk.png') right bottom
no-repeat;
background-color: $blue-accent3;
min-height: 48.4rem;
&__inner {
max-width: 58.6rem;
&--heading {
display: flex;
justify-content: space-between;
align-items: end;
}
}
.fas-level-3 {
.ongoing-learner-location-finder__inner {
max-width: 100%;
}
}
h2 {
&::after {
margin-top: 1.6rem;
}
}
hr {
margin: 3.3rem 0 2.4rem 0;
}
.fas-level-location {
&__alert {
margin-top: 51.5px;
}
&__clear {
margin-top: 0;
margin-bottom: 0;
justify-content: flex-end;
}
}
input {
justify-content: flex-start;
padding: 1rem 4rem 1rem 3.2rem;
}
}
@media screen and (min-width: $mq-large) {
.county-fas-result {
min-width: 30.1rem;
}
.county-fas-list__list {
gap: 2rem;
}
.county-fas-result__inner {
padding: 2.5rem 2.2rem 2.4rem 2.2rem;
}
}
@media screen and (max-width: 819px) {
padding-bottom: 0;
min-height: 65rem;
}
}
<section class="ongoing-learner-location-finder" data-behavior="ongoing-learner-location-finder">
<div class="fas-level-1">
<div class="ongoing-learner-location-finder__container">
<div class="ongoing-learner-location-finder__inner">
<h2>Find local ongoing learning opportunities</h2>
<div class="fas-level-copy">Discover workshop, webinar, meetups and more.
Use our search to find different learning opportunities near you.
</div>
<hr>
<div class="fas-level-location">
{{render '@cta' cta1 merge="true"}}
{{render '@cta' cta3 merge="true"}}
{{render '@cta' cta4 merge="true"}}
{{render '@cta' cta5 merge="true"}}
<div class="fas-level-location__postcode hidden">
<div id="fasLevelSearchBoxContainer">
<input type="text" id="fasLevelSearchBox" class="fas-level-location__postcode-input"
placeholder="Enter Location" autocomplete="off" />
</div>
</div>
</div>
<hr>
{{render '@cta' cta2 merge="true"}}
</div>
</div>
<input type="hidden" class="search-longitude" value="" />
<input type="hidden" class="search-latitude" value="" />
<input type="hidden" class="search-place" value="" />
</div>
<div class="fas-level-2 hidden">
<div class="loading">
<div class="loader"></div>
<div class="efl-logo"></div>
</div>
</div>
<div class="fas-level-3 hidden">
<div class="ongoing-learner-location-finder__container">
<div class="ongoing-learner-location-finder__inner">
<div class="ongoing-learner-location-finder__inner--heading">
<div>
<h2>Your nearest County FAs</h2>
<div class="fas-level-copy">
Your 6 county FAs are below
</div>
</div>
<a class="fas-level-location__clear">Clear results</a>
</div>
<hr>
<div class="county-fas-result-list">
<div class="county-fas-result-list__list">
<div class="county-fas-result-list__show-more-card">
<button class="show-more mobile">SHOW MORE COUNTY FAs</button>
</div>
</div>
<button class="show-more">Show More</button>
</div>
</div>
</div>
</div>
</section>