<div class="footer" id="footer-menu">
<div class="footer__columns padding-top-lg">
<div class="row">
<div class="col-12 col-6@md col-3@lg footer-menu__column">
<div class="margin-bottom-md">
<a href="#" class="block footer__logo-link" title="">
<svg class="footer__logo" viewBox="0 0 112.14 14.64">
<path fill="currentColor" d="M7.8 14.64a8.78 8.78 0 003.64-.72 6.76 6.76 0 002.64-2.08L11.1 9.18a3.82 3.82 0 01-3.06 1.64 3.13 3.13 0 01-2.38-.95 3.56 3.56 0 01-.9-2.55 3.56 3.56 0 01.9-2.55 3.13 3.13 0 012.38-.95 3.82 3.82 0 013.06 1.64l2.98-2.66A6.76 6.76 0 0011.44.72 8.78 8.78 0 007.8 0a8.5 8.5 0 00-4 .93 6.95 6.95 0 00-2.79 2.6A7.18 7.18 0 000 7.32a7.18 7.18 0 001.01 3.79 6.95 6.95 0 002.79 2.6 8.5 8.5 0 004 .93zm14.98 0a8.64 8.64 0 004.06-.94 7.01 7.01 0 003.84-6.38A7.01 7.01 0 0026.84.94 8.64 8.64 0 0022.78 0a8.64 8.64 0 00-4.06.94 7.01 7.01 0 00-3.84 6.38 7.01 7.01 0 003.84 6.38 8.64 8.64 0 004.06.94zm0-3.82a3 3 0 01-1.59-.43 3.08 3.08 0 01-1.13-1.22 3.89 3.89 0 01-.42-1.85 3.89 3.89 0 01.42-1.85 3.08 3.08 0 011.13-1.22 3.15 3.15 0 013.18 0 3.08 3.08 0 011.13 1.22 3.89 3.89 0 01.42 1.85 3.89 3.89 0 01-.42 1.85 3.08 3.08 0 01-1.13 1.22 3 3 0 01-1.59.43zm13.92 3.5V8.16l3.04 4.9h2.08l3.04-5.12.04 6.38h4.3l-.04-14h-3.88l-4.44 7.46L36.28.32H32.4v14zm19.5 0v-3.44h2.02a8.26 8.26 0 003.38-.64 4.98 4.98 0 002.22-1.84 5.02 5.02 0 00.78-2.8 5.02 5.02 0 00-.78-2.8A4.98 4.98 0 0061.6.96a8.26 8.26 0 00-3.38-.64h-6.74v14zm1.72-7.08H56.2V3.96h1.72a2.1 2.1 0 011.44.43 1.54 1.54 0 01.48 1.21 1.54 1.54 0 01-.48 1.21 2.1 2.1 0 01-1.44.43zm11.7 7.08l.94-2.44h5.32l.94 2.44h4.88l-6.12-14h-4.64l-6.12 14zm4.96-5.84h-2.72l1.36-3.52zm12.48 5.84V7.96l5.32 6.36h3.88v-14h-4.6v6.36L86.34.32h-3.88v14zm19.8 0V9.24l5.28-8.92h-4.56l-2.88 4.84-2.86-4.84h-4.98l5.28 8.86v5.14z" />
</svg>
</a>
<h3 class="footer__subheader">Footer TEXT</h3>
<p class="footer__address margin-bottom-0">61053 Loren Throughway</p>
<a href="http://vincent.net" class="footer__link block" target="_blank">Ask on Twitter</a>
<a href="https://fleta.com" class="footer__link block" target="_blank">Ask on Facebook</a>
</div>
</div>
<div class="col-12 col-6@md col-3@lg footer-menu__column footer-menu__column--has-menu">
<div class="footer__menu">
<h3 class="flex items-center justify-between footer__menu-header js-footer-menu-header" aria-controls="" aria-selected="true" aria-expanded="true" tabindex="-1">
Footer TITLE
<div class="footer__menu-icon margin-left-sm">
<svg class="icon icon--12 footer__menu-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 10">
<path d="M1 1l7 7.778L15 1" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</h3>
<ul id="" class="footer__menu-list list--reset js-footer-menu" aria-hidden="false">
<li class="footer__item">
<a href="https://tania.com" class="footer__link block">dolores fugit</a>
</li>
<li class="footer__item">
<a href="http://mayra.net" class="footer__link block">et asperiores</a>
</li>
<li class="footer__item">
<a href="https://vickie.com" class="footer__link block">enim aut</a>
</li>
<li class="footer__item">
<a href="http://leonora.info" class="footer__link block">sed laudantium</a>
</li>
<li class="footer__item">
<a href="https://austyn.org" class="footer__link block">repellendus voluptatem</a>
</li>
<li class="footer__item">
<a href="https://lysanne.info" class="footer__link block">autem delectus</a>
</li>
<li class="footer__item">
<a href="http://lawrence.org" class="footer__link block">et eum</a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-6@md col-3@lg footer-menu__column footer-menu__column--has-menu">
<div class="footer__menu">
<h3 class="flex items-center justify-between footer__menu-header js-footer-menu-header" aria-controls="" aria-selected="true" aria-expanded="true" tabindex="-1">
Footer TITLE
<div class="footer__menu-icon margin-left-sm">
<svg class="icon icon--12 footer__menu-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 10">
<path d="M1 1l7 7.778L15 1" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</h3>
<ul id="" class="footer__menu-list list--reset js-footer-menu" aria-hidden="false">
<li class="footer__item">
<a href="https://mallie.info" class="footer__link block">dolorem reprehenderit</a>
</li>
<li class="footer__item">
<a href="http://margarita.name" class="footer__link block">mollitia id</a>
</li>
<li class="footer__item">
<a href="https://jailyn.biz" class="footer__link block">id quia</a>
</li>
<li class="footer__item">
<a href="http://aurore.com" class="footer__link block">consequatur atque</a>
</li>
<li class="footer__item">
<a href="http://fiona.org" class="footer__link block">temporibus id</a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-6@md col-3@lg footer-menu__column footer-menu__column--has-socials">
<h3 class="font-size--18">
Social Media
</h3>
<ul class="flex flex-gap-sm margin-bottom-sm list--reset">
<li class="margin-right-sm">
<a href="http://laura.net">
<svg id="icon--facebook" class="icon icon--16" viewBox="0 0 8 15">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M81.32 723h-3.548v-7.083H76v-2.73h1.772v-1.637c0-2.225 1.001-3.55 3.844-3.55h2.367v2.73h-1.479c-1.107 0-1.18.38-1.18 1.093l-.005 1.364H84l-.314 2.73h-2.367V723z" transform="translate(-76 -708)"></path>
</g>
</g>
</svg>
<span class="visually-hidden"> Facebook</span>
</a>
</li>
<li class="margin-right-sm">
<a href="http://cecelia.net">
<svg id="icon--twitter" class="icon icon--16" viewBox="0 0 16 14">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M147.5 711.039c-.552.26-1.145.437-1.768.517.636-.407 1.124-1.05 1.353-1.815-.595.376-1.253.649-1.954.795-.562-.638-1.361-1.036-2.246-1.036-1.7 0-3.078 1.47-3.078 3.282 0 .258.028.508.08.748-2.557-.136-4.824-1.444-6.342-3.43-.266.486-.417 1.05-.417 1.651 0 1.139.544 2.143 1.369 2.731-.505-.017-.98-.164-1.393-.41v.041c0 1.59 1.06 2.916 2.468 3.218-.259.075-.53.115-.811.115-.198 0-.391-.02-.579-.06.392 1.305 1.528 2.254 2.875 2.28-1.054.88-2.38 1.405-3.823 1.405-.248 0-.493-.015-.734-.046 1.362.932 2.98 1.475 4.718 1.475 5.66 0 8.755-5 8.755-9.337 0-.143-.003-.284-.008-.425.6-.462 1.123-1.04 1.535-1.698v-.001z" transform="translate(-132 -709)"></path>
</g>
</g>
</svg>
<span class="visually-hidden"> Twitter</span>
</a>
</li>
<li class="margin-right-sm">
<a href="http://tyreek.com">
<svg id="icon--instagram" class="icon icon--16" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path>
</svg>
<span class="visually-hidden"> Instagram</span>
</a>
</li>
<li class="margin-right-sm">
<a href="http://joyce.info">
<svg id="icon--pinterest" class="icon icon--16" viewBox="0 0 13 15">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M319.344 718.92c-.439 2.066-.975 4.046-2.562 5.08-.49-3.121.72-5.465 1.281-7.954-.957-1.446.115-4.359 2.135-3.641 2.485.882-2.153 5.38.961 5.941 3.25.586 4.577-5.063 2.562-6.9-2.912-2.652-8.478-.06-7.794 3.738.167.928 1.235 1.21.427 2.491-1.863-.371-2.42-1.69-2.348-3.45.115-2.88 2.882-4.895 5.658-5.175 3.51-.352 6.805 1.157 7.26 4.122.511 3.345-1.584 6.968-5.339 6.707-1.017-.07-1.444-.523-2.241-.958z" transform="translate(-314 -709)"></path>
</g>
</g>
</svg>
<span class="visually-hidden"> Pinterest</span>
</a>
</li>
<li class="margin-right-sm">
<a href="http://dandre.biz">
<svg id="icon--linkedin" class="icon icon--16" viewBox="0 0 14 14">
<g fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M446.5 722.5h-2.592v-4.781c0-1.41-.565-1.846-1.292-1.846-.77 0-1.524.615-1.524 1.88v4.747H438.5v-8.754h2.493v1.213h.033c.251-.539 1.127-1.459 2.464-1.459 1.447 0 3.01.912 3.01 3.586v5.414zm-11.5-10c-.828 0-1.5-.633-1.5-1.5 0-.866.672-1.5 1.5-1.5s1.5.634 1.5 1.5c0 .867-.672 1.5-1.5 1.5zm-1.5 10h3v-9h-3v9z" transform="translate(-433 -709)"></path>
</g>
</g>
</svg>
<span class="visually-hidden"> Linkedin</span>
</a>
</li>
</ul>
<p>
<a href="http://mabelle.com" class="inline footer__inline-link">Sign up</a> for our newsletter
</p>
</div>
</div>
</div>
<div class="footer__bottombar padding-y-md">
<div class="row">
<div class="col-12">
<div class="bottombar flex">
<ul class="bottombar__menu flex flex-wrap flex-center flex-left@lg flex-gap-sm list--reset">
<li class="bottombar__item bottombar__date">
© 2021
</li>
<li class="bottombar__item">
<a href="https://orpha.org" class="bottombar__link">Disclaimer</a>
</li>
<li class="bottombar__item">
<a href="https://wiley.info" class="bottombar__link">Cookie policy</a>
</li>
<li class="bottombar__item">
<a href="http://grant.org" class="bottombar__link">Privacy</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="/components/raw/footer/footerMenu.js"></script>
<div class="footer" id="footer-menu">
<div class="footer__columns padding-top-lg">
<div class="row">
<div class="col-12 col-6@md col-3@lg footer-menu__column">
<div class="margin-bottom-md">
<a href="#" class="block footer__logo-link" title="{{about.websiteName}}">
<svg class="footer__logo" viewBox="0 0 112.14 14.64"><path fill="currentColor" d="M7.8 14.64a8.78 8.78 0 003.64-.72 6.76 6.76 0 002.64-2.08L11.1 9.18a3.82 3.82 0 01-3.06 1.64 3.13 3.13 0 01-2.38-.95 3.56 3.56 0 01-.9-2.55 3.56 3.56 0 01.9-2.55 3.13 3.13 0 012.38-.95 3.82 3.82 0 013.06 1.64l2.98-2.66A6.76 6.76 0 0011.44.72 8.78 8.78 0 007.8 0a8.5 8.5 0 00-4 .93 6.95 6.95 0 00-2.79 2.6A7.18 7.18 0 000 7.32a7.18 7.18 0 001.01 3.79 6.95 6.95 0 002.79 2.6 8.5 8.5 0 004 .93zm14.98 0a8.64 8.64 0 004.06-.94 7.01 7.01 0 003.84-6.38A7.01 7.01 0 0026.84.94 8.64 8.64 0 0022.78 0a8.64 8.64 0 00-4.06.94 7.01 7.01 0 00-3.84 6.38 7.01 7.01 0 003.84 6.38 8.64 8.64 0 004.06.94zm0-3.82a3 3 0 01-1.59-.43 3.08 3.08 0 01-1.13-1.22 3.89 3.89 0 01-.42-1.85 3.89 3.89 0 01.42-1.85 3.08 3.08 0 011.13-1.22 3.15 3.15 0 013.18 0 3.08 3.08 0 011.13 1.22 3.89 3.89 0 01.42 1.85 3.89 3.89 0 01-.42 1.85 3.08 3.08 0 01-1.13 1.22 3 3 0 01-1.59.43zm13.92 3.5V8.16l3.04 4.9h2.08l3.04-5.12.04 6.38h4.3l-.04-14h-3.88l-4.44 7.46L36.28.32H32.4v14zm19.5 0v-3.44h2.02a8.26 8.26 0 003.38-.64 4.98 4.98 0 002.22-1.84 5.02 5.02 0 00.78-2.8 5.02 5.02 0 00-.78-2.8A4.98 4.98 0 0061.6.96a8.26 8.26 0 00-3.38-.64h-6.74v14zm1.72-7.08H56.2V3.96h1.72a2.1 2.1 0 011.44.43 1.54 1.54 0 01.48 1.21 1.54 1.54 0 01-.48 1.21 2.1 2.1 0 01-1.44.43zm11.7 7.08l.94-2.44h5.32l.94 2.44h4.88l-6.12-14h-4.64l-6.12 14zm4.96-5.84h-2.72l1.36-3.52zm12.48 5.84V7.96l5.32 6.36h3.88v-14h-4.6v6.36L86.34.32h-3.88v14zm19.8 0V9.24l5.28-8.92h-4.56l-2.88 4.84-2.86-4.84h-4.98l5.28 8.86v5.14z"/></svg>
</a>
<h3 class="footer__subheader">{{about.title}}</h3>
<p class="footer__address margin-bottom-0">{{about.address}}</p>
{{#each about.contact}}
<a href="{{link}}" class="footer__link block" target="_blank">{{label}}</a>
{{/each}}
</div>
</div>
{{#each navigation as |navigationItem|}}
<div class="col-12 col-6@md col-3@lg footer-menu__column footer-menu__column--has-menu">
<div class="footer__menu">
<h3 class="flex items-center justify-between footer__menu-header js-footer-menu-header" aria-controls="{{navigationItem.menuId}}" aria-selected="true" aria-expanded="true" tabindex="-1">
{{navigationItem.title}}
<div class="footer__menu-icon margin-left-sm">
<svg class="icon icon--12 footer__menu-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 10">
<path d="M1 1l7 7.778L15 1" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</h3>
<ul id="{{navigationItem.menuId}}" class="footer__menu-list list--reset js-footer-menu" aria-hidden="false">
{{#each navigationItem.items}}
<li class="footer__item">
<a href="{{link}}" class="footer__link block">{{label}}</a>
</li>
{{/each}}
</ul>
</div>
</div>
{{/each}}
<div class="col-12 col-6@md col-3@lg footer-menu__column footer-menu__column--has-socials">
<h3 class="font-size--18">
{{socials.title}}
</h3>
<ul class="flex flex-gap-sm margin-bottom-sm list--reset">
{{#each socials.items}}
<li class="margin-right-sm">
<a href="{{link}}">
{{{icon}}}
<span class="visually-hidden"> {{label}}</span>
</a>
</li>
{{/each}}
</ul>
<p>
<a href="{{socials.newsletterLink}}" class="inline footer__inline-link">{{socials.newsletterLinkText}}</a> {{socials.newsletterText}}
</p>
</div>
</div>
</div>
<div class="footer__bottombar padding-y-md">
<div class="row">
<div class="col-12">
{{ render '@bottombar' }}
</div>
</div>
</div>
</div>
<script src="{{static 'footerMenu.js'}}"></script>
{
"about": {
"title": "Footer TEXT",
"address": "61053 Loren Throughway",
"contact": [
{
"label": "Ask on Twitter",
"link": "http://vincent.net"
},
{
"label": "Ask on Facebook",
"link": "https://fleta.com"
}
]
},
"navigation": {
"column1": {
"title": "Footer TITLE",
"MenuId": "footer-menu-2",
"items": [
{
"label": "dolores fugit",
"link": "https://tania.com"
},
{
"label": "et asperiores",
"link": "http://mayra.net"
},
{
"label": "enim aut",
"link": "https://vickie.com"
},
{
"label": "sed laudantium",
"link": "http://leonora.info"
},
{
"label": "repellendus voluptatem",
"link": "https://austyn.org"
},
{
"label": "autem delectus",
"link": "https://lysanne.info"
},
{
"label": "et eum",
"link": "http://lawrence.org"
}
]
},
"column2": {
"title": "Footer TITLE",
"MenuId": "footer-menu-3",
"items": [
{
"label": "dolorem reprehenderit",
"link": "https://mallie.info"
},
{
"label": "mollitia id",
"link": "http://margarita.name"
},
{
"label": "id quia",
"link": "https://jailyn.biz"
},
{
"label": "consequatur atque",
"link": "http://aurore.com"
},
{
"label": "temporibus id",
"link": "http://fiona.org"
}
]
}
},
"socials": {
"title": "Social Media",
"newsletterLinkText": "Sign up",
"newsletterLink": "http://mabelle.com",
"newsletterText": "for our newsletter",
"items": [
{
"label": "Facebook",
"link": "http://laura.net",
"icon": "<svg id=\"icon--facebook\" class=\"icon icon--16\" viewBox=\"0 0 8 15\"> <g fill=\"none\" fill-rule=\"evenodd\"> <g fill=\"currentColor\"> <path d=\"M81.32 723h-3.548v-7.083H76v-2.73h1.772v-1.637c0-2.225 1.001-3.55 3.844-3.55h2.367v2.73h-1.479c-1.107 0-1.18.38-1.18 1.093l-.005 1.364H84l-.314 2.73h-2.367V723z\" transform=\"translate(-76 -708)\"></path> </g> </g> </svg>"
},
{
"label": "Twitter",
"link": "http://cecelia.net",
"icon": "<svg id=\"icon--twitter\" class=\"icon icon--16\" viewBox=\"0 0 16 14\"> <g fill=\"none\" fill-rule=\"evenodd\"> <g fill=\"currentColor\"> <path d=\"M147.5 711.039c-.552.26-1.145.437-1.768.517.636-.407 1.124-1.05 1.353-1.815-.595.376-1.253.649-1.954.795-.562-.638-1.361-1.036-2.246-1.036-1.7 0-3.078 1.47-3.078 3.282 0 .258.028.508.08.748-2.557-.136-4.824-1.444-6.342-3.43-.266.486-.417 1.05-.417 1.651 0 1.139.544 2.143 1.369 2.731-.505-.017-.98-.164-1.393-.41v.041c0 1.59 1.06 2.916 2.468 3.218-.259.075-.53.115-.811.115-.198 0-.391-.02-.579-.06.392 1.305 1.528 2.254 2.875 2.28-1.054.88-2.38 1.405-3.823 1.405-.248 0-.493-.015-.734-.046 1.362.932 2.98 1.475 4.718 1.475 5.66 0 8.755-5 8.755-9.337 0-.143-.003-.284-.008-.425.6-.462 1.123-1.04 1.535-1.698v-.001z\" transform=\"translate(-132 -709)\"></path> </g> </g> </svg>"
},
{
"label": "Instagram",
"link": "http://tyreek.com",
"icon": "<svg id=\"icon--instagram\" class=\"icon icon--16\" viewBox=\"0 0 24 24\"> <path fill=\"currentColor\" d=\"M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z\"></path> </svg>"
},
{
"label": "Pinterest",
"link": "http://joyce.info",
"icon": "<svg id=\"icon--pinterest\" class=\"icon icon--16\" viewBox=\"0 0 13 15\"> <g fill=\"none\" fill-rule=\"evenodd\"> <g fill=\"currentColor\"> <path d=\"M319.344 718.92c-.439 2.066-.975 4.046-2.562 5.08-.49-3.121.72-5.465 1.281-7.954-.957-1.446.115-4.359 2.135-3.641 2.485.882-2.153 5.38.961 5.941 3.25.586 4.577-5.063 2.562-6.9-2.912-2.652-8.478-.06-7.794 3.738.167.928 1.235 1.21.427 2.491-1.863-.371-2.42-1.69-2.348-3.45.115-2.88 2.882-4.895 5.658-5.175 3.51-.352 6.805 1.157 7.26 4.122.511 3.345-1.584 6.968-5.339 6.707-1.017-.07-1.444-.523-2.241-.958z\" transform=\"translate(-314 -709)\"></path> </g> </g> </svg>"
},
{
"label": "Linkedin",
"link": "http://dandre.biz",
"icon": "<svg id=\"icon--linkedin\" class=\"icon icon--16\" viewBox=\"0 0 14 14\"> <g fill=\"none\" fill-rule=\"evenodd\"> <g fill=\"currentColor\"> <path d=\"M446.5 722.5h-2.592v-4.781c0-1.41-.565-1.846-1.292-1.846-.77 0-1.524.615-1.524 1.88v4.747H438.5v-8.754h2.493v1.213h.033c.251-.539 1.127-1.459 2.464-1.459 1.447 0 3.01.912 3.01 3.586v5.414zm-11.5-10c-.828 0-1.5-.633-1.5-1.5 0-.866.672-1.5 1.5-1.5s1.5.634 1.5 1.5c0 .867-.672 1.5-1.5 1.5zm-1.5 10h3v-9h-3v9z\" transform=\"translate(-433 -709)\"></path> </g> </g> </svg>"
}
]
}
}
(function () {
"use strict";
var FooterMenu,
breakpoint = getComputedStyle(document.documentElement).getPropertyValue('--footer-breakpoint') || "md";
FooterMenu = function (el) {
this.footerMenuClass = "js-footer-menu";
this.footerMenuHeaderClass = "js-footer-menu-header";
this.ariaExpandedVal = "";
this.ariaHiddenVal = "";
this.element = el;
this.footerMenuHeaders = document.querySelectorAll("." + this.footerMenuHeaderClass);
this.footerMenus = document.querySelectorAll("." + this.footerMenuClass);
this.init = this.init.bind(this);
this.addEventListeners = this.addEventListeners.bind(this);
this.responsiveEventListeners = this.responsiveEventListeners.bind(this);
this.setResponsiveAttributes = this.setResponsiveAttributes.bind(this);
this.handleAccordion = this.handleAccordion.bind(this);
this.handleKey = this.handleKey.bind(this);
this.keys = {
tab: 9,
enter: 13,
space: 32,
up: 38,
down: 40
}
this.init();
}
FooterMenu.prototype.init = function () {
this.addEventListeners();
this.setResponsiveAttributes();
this.responsiveEventListeners();
}
FooterMenu.prototype.addEventListeners = function () {
for (var i = 0; i < this.footerMenuHeaders.length; i += 1) {
this.footerMenuHeaders[i].addEventListener("keydown", this.handleKey);
}
window.addEventListener("resize", FF.throttle(this.setResponsiveAttributes, 10));
window.addEventListener("resize", FF.throttle(this.responsiveEventListeners, 10));
}
FooterMenu.prototype.responsiveEventListeners = function () {
for (var i = 0; i < this.footerMenuHeaders.length; i += 1) {
if (FF.mq.atLeast(breakpoint)) {
this.footerMenuHeaders[i].removeEventListener("click", this.handleAccordion);
} else {
this.footerMenuHeaders[i].addEventListener("click", this.handleAccordion);
}
}
}
/*
* Toggle footer menu accordions, set attributes and change focus
* @param {event} Event
* */
FooterMenu.prototype.handleAccordion = function (event, action) {
var target = event.target,
accordion = target.nextElementSibling;
if (accordion) {
if (!FF.mq.atLeast(breakpoint)) {
switch (action) {
case "open":
this.ariaExpandedVal = "true";
this.ariaHiddenVal = "false";
break;
case "close":
this.ariaExpandedVal = "false";
this.ariaHiddenVal = "true";
break;
}
this.toggleAttribute(target, "aria-expanded", this.ariaExpandedVal);
this.toggleAttribute(accordion, "aria-hidden", this.ariaHiddenVal);
this.ariaExpandedVal = "";
this.ariaHiddenVal = "";
}
}
}
/*
* Function to toggle attributes
* @param {target} Item to toggle attributes
* @param {attr} Attribute to toggle
* */
FooterMenu.prototype.toggleAttribute = function(target, attr, val) {
if (val.length) {
target.setAttribute(attr, val);
} else {
if (target.getAttribute(attr) === "false") {
target.setAttribute(attr, "true");
} else {
target.setAttribute(attr, "false");
}
}
}
/*
* Set aria-hidden attribute when screen gets below threshold.
* */
FooterMenu.prototype.setResponsiveAttributes = function () {
for (var i = 0; i < this.footerMenuHeaders.length; i += 1) {
if (FF.mq.atLeast(breakpoint)) {
this.footerMenuHeaders[i].setAttribute("aria-expanded", "true");
this.footerMenuHeaders[i].setAttribute("tabindex", "-1");
} else {
// Mobile view
this.footerMenuHeaders[i].setAttribute("aria-expanded", "false");
this.footerMenuHeaders[i].setAttribute("tabindex", "0");
}
}
for (var j = 0; j < this.footerMenus.length; j += 1) {
if (FF.mq.atLeast(breakpoint)) {
this.footerMenus[j].setAttribute("aria-hidden", "false");
} else {
// Mobile view
this.footerMenus[j].setAttribute("aria-hidden", "true");
}
}
}
/*
* Handle key events when the user is focussed inside the footer menu
* */
FooterMenu.prototype.handleKey = function (event) {
var key = event.keyCode,
prevDef = false;
if (!FF.mq.atLeast(breakpoint)) {
switch (key) {
case this.keys.tab:
if (event.shiftKey) {
this.handleAccordion(event, "close");
} else {
this.handleAccordion(event, "open");
}
break;
case this.keys.enter:
this.handleAccordion(event);
break;
case this.keys.space:
this.handleAccordion(event);
break;
case this.keys.up:
this.handleAccordion(event, "close");
break;
case this.keys.down:
this.handleAccordion(event, "open");
break;
}
if (prevDef) {
event.preventDefault();
}
}
}
window.FooterMenu = FooterMenu;
})();
new FooterMenu(document.getElementById('footer-menu'));
No notes defined.