<div class="masthead__widget-area masthead__widget-area--left">
<div class="masthead-language-widget">
<h2 class="widgettitle">Change Language</h2>
<div class="menu-language-container">
<ul id="menu-language" class="menu">
<li id="menu-item-386" class="site-id-1 mlp-language-nav-item menu-item menu-item-type-mlp_language menu-item-object-mlp_language mlp-current-language-item menu-item-386">
<a rel="alternate" href="http://local.ipsen.com/">English (UK)</a>
</li>
<li id="menu-item-387" class="site-id-2 mlp-language-nav-item menu-item menu-item-type-mlp_language menu-item-object-mlp_language menu-item-387">
<a rel="alternate" href="http://local.ipsen.com/fr/">Français (Algérie)</a>
</li>
</ul>
</div>
</div>
</div>
/* @masthead-lang-widget */
.masthead__widget-area {
display: inline-block;
transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
@media screen and (max-width: 769px) {
width: 100%;
display: flex !important;
justify-content: space-between;
padding: 1rem 3rem;
color: white;
> span {
line-height: 40px;
font-weight: 900;
@include themify($themes) {
font-family: themed('headingFont');
font-size: themed('ctaFontSize');
}
}
@include themify($themes) {
background-color: themed('highlightTextColor') !important;
}
h2 {
margin-top: 0;
font-size: 12px;
line-height: 41px;
color: white;
}
}
@media screen and (min-width: 770px) {
h2 {
display: none;
}
}
.widget-arrow-icon {
background-image: $down-arrow-blue-svg;
width: 10px;
height: 10px;
position: absolute;
right: 10px;
top: 15px;
display: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.widget-trigger {
color: white;
height: 40px;
line-height: 41px;
padding-right: 30px;
padding-left: 10px;
cursor: pointer;
position: relative;
display: inline-block;
font-weight: 400;
font-size: 12px;
font-family: "Biryani", sans-serif;
transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
@media screen and (min-width: 770px) {
&:hover {
@include themify($themes) {
background-color: themed('ctaColor');
}
}
}
.widget-arrow-icon {
background-image: $down-arrow-white-svg;
display: block;
}
}
&.lang-open {
.widget-trigger {
.widget-arrow-icon {
transform: rotate(180deg);
transform-origin: center center;
}
}
.lang-switcher-container {
transform: scale(1);
opacity: 1;
.widget-arrow-icon {
transform: rotate(180deg);
display: block;
&:hover {
@include themify($themes) {
color: darken(themed('ctaColor'), 20%);
}
}
}
ul {
display: block;
li a {
color: black;
}
}
}
}
}
.lang-switcher-container {
position: absolute;
z-index: 399;
top: 0;
overflow: hidden;
transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
display: none;
@media screen and (min-width: 770px) {
transform: scale(0);
opacity: 0;
transform-origin: top left;
}
.widget-arrow-icon {
display: block;
transform: rotate(0deg);
}
ul {
background-color: white;
border-radius: $border-radius-square;
overflow:hidden;
list-style: none;
padding: 0;
margin: 0;
@media screen and (min-width: 770px) {
display: none;
}
li {
position: relative;
margin-bottom: 0;
a {
color: black;
padding: 3px 30px 0 10px;
line-height: 41px;
display: block;
font-size: 12px;
font-weight: 200;
font-family: "Biryani", sans-serif;
white-space: nowrap;
&:hover {
background-color: $wild-sand;
@include themify($themes) {
color: themed('ctaColor');
}
}
}
&.mlp-current-language-item {
a {
font-weight: 500;
pointer-events:none;
@include themify($themes) {
color: themed('ctaColor');
}
}
}
}
}
}
/* masthead-lang-widget */
$(document).ready(function () {
let activeItem = $('.masthead .mlp-current-language-item')
let windowWidth = $(window).outerWidth()
let mobileSize = 769
let didResize = false
let langShort
if (activeItem.length) {
let $parentUl = activeItem.closest('ul')
let $parentUlWrapper = $parentUl.parent()
let $parentWidget = activeItem.closest('.masthead__widget-area')
let headerText = $('.widgettitle', $parentWidget).text()
let triggerButton = 'data-lang-trigger'
determineShortCode()
activeItem.prependTo($parentUl)
$parentUlWrapper.addClass('lang-switcher-container')
$parentWidget.prepend('<div class="widget-trigger"' + triggerButton + '>' + langShort + '<span class="widget-arrow-icon"></span></div>')
function determineShortCode () {
if ( activeItem.is(':contains("Français")') ) {
langShort = 'Fr'
} else if ( activeItem.is(':contains("English")') ) {
langShort = 'Eng'
} else if ( activeItem.is(':contains("Nederlands")') ) {
langShort = 'Nl'
}
}
function toggleNav () {
$parentWidget.toggleClass('lang-open')
}
function doMobile () {
if (headerText.length < 1) {
headerText = 'Change language'
$parentWidget.data('data-mobile-text', 'true').prepend('<span>' + headerText + '</span>')
}
$parentUlWrapper.appendTo('.masthead')
$parentWidget.attr('data-menu-item', 'language')
.attr('data-js-trigger-subnav', '')
$parentUlWrapper.attr('data-submenu-item', 'language')
.addClass('global-subnav')
.prepend(' <button class="global-subnav__section-title mobile-back-button"><span></span>' + headerText + '</button>')
// $('[data-lang-trigger').click(function() {
// $('[data-submenu-item="language"]').toggleClass('global-subnav--is-open')
// })
}
function doDesktop () {
activeItem.prepend('<span class="widget-arrow-icon"></span></div>')
$(document).on('click touchstart', '[' + triggerButton + ']', function (e){
toggleNav()
})
$(document).on('click', '.lang-open .widget-arrow-icon', function(event) {
toggleNav()
});
$(document).on('click', function(event) {
if(!$(event.target).closest($parentWidget).length) {
if($parentWidget.hasClass('lang-open')) {
toggleNav()
}
}
});
if ($parentWidget.data('data-mobile-text')) {
$parentWidget.removeData('data-mobile-text')
$('span').remove(':contains("' + headerText + '")')
}
}
if ( windowWidth <= mobileSize ) {
doMobile()
} else {
doDesktop()
}
$(window).resize(function() {
didResize = true;
})
setInterval(function() {
if ( didResize ) {
didResize = false;
windowWidth = $(window).outerWidth()
if ( windowWidth <= mobileSize ) {
doMobile()
} else {
doDesktop()
}
}
}, 100);
}
})