517 lines
15 KiB
Plaintext
517 lines
15 KiB
Plaintext
{% assign userLanguage = current_person.properties.learner_language | upcase%}
|
|
|
|
<div id="loader-overlay">
|
|
<div class="loader"></div>
|
|
</div>
|
|
|
|
<header class="header">
|
|
<div class="np-header-content np-max-width">
|
|
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
|
{% if current_person.signed_in? %}
|
|
<button
|
|
data-toggle-class="np-hidden"
|
|
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
|
data-toggle-target=".np-header-mobile-avatar-menu,
|
|
.np-header-mobile-menu-content, .np-main, .np-footer"
|
|
></button>
|
|
<button
|
|
data-test="open-mobile-menu"
|
|
data-toggle-class="np-hidden"
|
|
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
|
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
|
>
|
|
<img
|
|
alt="{{ current_person.name }}"
|
|
class="np-header-avatar-image"
|
|
src="{{ current_person.avatar_url }}"
|
|
/>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="header-navigation-container">
|
|
<div class="header-logo">
|
|
<a class="deepl-logo" href="/app">
|
|
<img class="deepl-logo-img" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/DeepL/images/Academy.png" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="navigation">
|
|
<a href="/app/learning_paths" id="lp" class="navigation-item lang-en">
|
|
Learning paths
|
|
</a>
|
|
<a href="/app/learning_paths" id="lp" class="navigation-item lang-de">
|
|
Lernpfade
|
|
</a>
|
|
<a href="/app/catalog" id="courses" class="navigation-item lang-en">
|
|
Courses
|
|
</a>
|
|
<a href="/app/catalog" id="courses" class="navigation-item lang-de">
|
|
Kurse
|
|
</a>
|
|
<a href="/app/training_events" id="webinars" class="navigation-item lang-en">
|
|
Webinars
|
|
</a>
|
|
<a href="/app/training_events" id="webinars" class="navigation-item lang-de">
|
|
Webinare
|
|
</a>
|
|
<a href="/app/resources" id="resources" class="navigation-item lang-en">
|
|
Resources
|
|
</a>
|
|
<a href="/app/resources" id="resources" class="navigation-item lang-de">
|
|
Ressourcen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% if current_person.signed_in? %}
|
|
<div class="header-profile-container">
|
|
<div class="np-hidden-mobile search-bar">
|
|
<form action="{% route search %}" method="get" data-test="desktop-search">
|
|
<input
|
|
aria-label="{% t .search %}"
|
|
class="search-input"
|
|
type="text"
|
|
name="q"
|
|
placeholder="{% t .search %}"
|
|
/>
|
|
<i class="header-search-icon far fa-search"></i>
|
|
</form>
|
|
</div>
|
|
{% if current_person.properties.new_content %}
|
|
<div class="languge-dropdown">
|
|
<button
|
|
type="button"
|
|
class="navigation-item languge-dropdown-button lang-en"
|
|
data-toggle-class="is-open"
|
|
data-toggle-target-next
|
|
data-toggle-outside
|
|
data-toggle-escape>
|
|
<span style="display:inline-block">Language</span>
|
|
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="navigation-item languge-dropdown-button lang-de"
|
|
data-toggle-class="is-open"
|
|
data-toggle-target-next
|
|
data-toggle-outside
|
|
data-toggle-escape>
|
|
<span style="display:inline-block">Sprache</span>
|
|
|
|
</button>
|
|
|
|
<ul class="languge-dropdown-list">
|
|
<li>
|
|
<button
|
|
type="button"
|
|
id="en-lang"
|
|
data-lang="en"
|
|
class="lang-option active"
|
|
data-toggle-trigger-off
|
|
>
|
|
<span style="display:inline-block">English</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button
|
|
type="button"
|
|
id="de-lang"
|
|
data-lang="de"
|
|
class="lang-option"
|
|
data-toggle-trigger-off>
|
|
<span style="display:inline-block">Deutsch</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
<div class="np-hidden-mobile np-header-avatar">
|
|
<button
|
|
class="np-header-avatar-button"
|
|
data-test="open-desktop-menu"
|
|
data-toggle-class-on-target="np-hidden"
|
|
data-toggle-target=".np-header-avatar-tooltip"
|
|
data-toggle-outside
|
|
>
|
|
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 6C0 2.68629 2.68629 0 6 0H34C37.3137 0 40 2.68629 40 6V34C40 37.3137 37.3137 40 34 40H6C2.68629 40 0 37.3137 0 34V6Z" fill="#EDEDED"/>
|
|
<path d="M26.6666 27.5V25.8333C26.6666 24.9493 26.3154 24.1014 25.6903 23.4763C25.0652 22.8512 24.2173 22.5 23.3333 22.5H16.6666C15.7825 22.5 14.9347 22.8512 14.3096 23.4763C13.6844 24.1014 13.3333 24.9493 13.3333 25.8333V27.5M23.3333 15.8333C23.3333 17.6743 21.8409 19.1667 19.9999 19.1667C18.159 19.1667 16.6666 17.6743 16.6666 15.8333C16.6666 13.9924 18.159 12.5 19.9999 12.5C21.8409 12.5 23.3333 13.9924 23.3333 15.8333Z" stroke="#0F2B46" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
|
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
|
<div class="np-header-avatar-tooltip-learner">
|
|
<div class="np-header-avatar-tooltip-learner-name">
|
|
{{ current_person.name }}
|
|
</div>
|
|
<div class="np-header-avatar-tooltip-learner-email">
|
|
{{ current_person.email }}
|
|
</div>
|
|
</div>
|
|
<nav class="np-header-avatar-tooltip-navigation">
|
|
{% unless current_school.sso_active? %}
|
|
<a
|
|
class="np-header-avatar-tooltip-navigation-link"
|
|
href="{% route account %}"
|
|
>
|
|
{% t .profile_settings %}
|
|
</a>
|
|
{% endunless %}
|
|
{% if current_person.signed_in? %}
|
|
<a
|
|
class="np-header-avatar-tooltip-navigation-link"
|
|
href="{% route transcript %}"
|
|
>
|
|
{% t .transcript %}
|
|
</a>
|
|
{% endif %}
|
|
<a
|
|
class="np-header-avatar-tooltip-navigation-link np-danger"
|
|
href="{% route logout %}"
|
|
>
|
|
{% t .sign_out %}
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<a
|
|
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
|
aria-label="{% t shared.sign_in %}"
|
|
href="{% route login %}"
|
|
>
|
|
{% t shared.sign_in %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
<div class="np-hidden-desktop">
|
|
<div class="np-header-mobile-menu-content np-hidden">
|
|
{% if current_person.signed_in? %}
|
|
<img
|
|
alt="{{ current_person.name }}"
|
|
class="np-header-mobile-menu-content-avatar"
|
|
src="{{ current_person.avatar_url }}"
|
|
/>
|
|
<div class="np-header-mobile-menu-content-name">
|
|
{{ current_person.name }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="np-header-mobile-menu-content-nav">
|
|
<form
|
|
class="np-header-search"
|
|
data-test="mobile-search"
|
|
method="get"
|
|
action="{% route search %}"
|
|
>
|
|
<input
|
|
aria-label="{% t .search %}"
|
|
class="np-header-search-input"
|
|
type="text"
|
|
name="q"
|
|
placeholder="{% t .search %}"
|
|
/>
|
|
<i class="header-search-icon far fa-search"></i>
|
|
</form>
|
|
{% for website_navigation in navigations.header_navigations %}
|
|
<a
|
|
href="{{ website_navigation.path }}"
|
|
class="np-header-mobile-menu-content-button"
|
|
{% if website_navigation.external? %} target="_blank" {% endif %}
|
|
>
|
|
{{ website_navigation.name }}
|
|
</a>
|
|
{% endfor %}
|
|
<div class="np-header-mobile-menu-content-line"></div>
|
|
{% unless current_school.sso_active? %}
|
|
<a
|
|
class="np-header-mobile-menu-content-button"
|
|
href="{% route account %}"
|
|
>
|
|
{% t .profile_settings %}
|
|
</a>
|
|
{% endunless %}
|
|
{% if current_person.signed_in? %}
|
|
<a
|
|
class="np-header-mobile-menu-content-button"
|
|
href="{% route transcript %}"
|
|
>
|
|
{% t .transcript %}
|
|
</a>
|
|
{% endif %}
|
|
<a
|
|
class="np-header-mobile-menu-content-button np-danger"
|
|
href="{% route logout %}"
|
|
>
|
|
{% t .sign_out %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include "messages" %}
|
|
|
|
|
|
<style>
|
|
.deepl-logo-img {
|
|
width: 100%;
|
|
max-width: 230px;
|
|
}
|
|
.header-navigation-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 30px;
|
|
}
|
|
.deepl-logo {
|
|
display: flex;
|
|
}
|
|
.header-profile-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.np-header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.search-bar {
|
|
position: relative;
|
|
height: fit-content;
|
|
}
|
|
.navigation {
|
|
display: flex;
|
|
gap: 25px;
|
|
height: 100%;
|
|
}
|
|
.search-input {
|
|
border: 1px solid rgba(0,0,0, 0.25);
|
|
padding: 5px 10px;
|
|
border-radius: 8px;
|
|
}
|
|
.navigation-item {
|
|
text-decoration: none;
|
|
color: #0f2b46;
|
|
padding: 5px 10px;
|
|
}
|
|
.navigation-item:hover {
|
|
color: #42A2FF;
|
|
}
|
|
|
|
.active-nav {
|
|
color: #42A2FF;
|
|
}
|
|
.header {
|
|
background: #f8f8f8;
|
|
padding: 10px 40px;
|
|
}
|
|
.header-search-icon {
|
|
position: absolute;
|
|
left: 10px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
top: 0%;
|
|
}
|
|
.search-input {
|
|
border: 1px solid rgba(0,0,0, 0.25);
|
|
padding: 5px 10px 5px 30px;
|
|
border-radius: 8px;
|
|
}
|
|
.languge-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-left:24px;
|
|
}
|
|
.languge-dropdown-button {
|
|
display: inline-block;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
border: none;
|
|
background: #ededed;
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
padding: 0 15px;
|
|
cursor: pointer;
|
|
}
|
|
.np-header-avatar-button {
|
|
display: flex;
|
|
}
|
|
.languge-dropdown-button::after {
|
|
font-family:"Font awesome 5 Pro";
|
|
display: inline-block;
|
|
content: "\f078";
|
|
transition: transform .25s ease-out;
|
|
margin-left:4px;
|
|
}
|
|
.languge-dropdown-button.is-open::after {
|
|
transform: rotate(180deg);
|
|
}
|
|
.languge-dropdown-list {
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 0;
|
|
z-index: 1;
|
|
display: block;
|
|
width: max-content;
|
|
min-width: 100%;
|
|
max-width: 15em;
|
|
max-height: 13em;
|
|
overflow: auto;
|
|
padding: 0;
|
|
margin: 0;
|
|
transform: translateY(-1em);
|
|
transform-origin: center top;
|
|
background-color: white;
|
|
perspective: 1000px;
|
|
box-shadow: 0 0 8px rgba(72,103,118,.5);
|
|
list-style: none;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: .25s ease-in;
|
|
border-radius: 8px;
|
|
}
|
|
.languge-dropdown-list.is-open {
|
|
transform: translateY(0);
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition-timing-function: ease-out;
|
|
}
|
|
.languge-dropdown-list li {
|
|
border-bottom: 1px solid #ededed;
|
|
cursor:pointer;
|
|
padding:12px 24px;
|
|
}
|
|
.languge-dropdown-list li:hover button,
|
|
.languge-dropdown-list li:focus button{
|
|
font-weight:700;
|
|
}
|
|
.languge-dropdown-list li button.active {
|
|
font-weight:700;
|
|
cursor:text;
|
|
}
|
|
.languge-dropdown-list li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.languge-dropdown-list button {
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border: none;
|
|
background: none;
|
|
text-align: left;
|
|
}
|
|
.languge-dropdown-list button:hover,
|
|
.languge-dropdown-list button:focus {
|
|
cursor:pointer;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const url = window.location.pathname;
|
|
|
|
const lp = document.getElementById('lp');
|
|
const academy = document.getElementById('academy');
|
|
const courses = document.getElementById('courses');
|
|
const webinars = document.getElementById('webinars');
|
|
const resources = document.getElementById('resources');
|
|
|
|
switch (url) {
|
|
case '/app':
|
|
academy.classList.add('active-nav');
|
|
break;
|
|
case '/app/learning_paths':
|
|
lp.classList.add('active-nav');
|
|
break;
|
|
case '/app/catalog':
|
|
courses.classList.add('active-nav');
|
|
break;
|
|
case '/app/training_events':
|
|
webinars.classList.add('active-nav');
|
|
break;
|
|
case '/app/resources':
|
|
resources.classList.add('active-nav');
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
</script>
|
|
|
|
<script>
|
|
function changeElementsText() {
|
|
const searchInput = document.querySelector('.search-input');
|
|
const selectedLang = localStorage.getItem("userLanguage");
|
|
|
|
console.log(selectedLang);
|
|
|
|
if (selectedLang === 'de') {
|
|
searchInput.placeholder = "Suche";
|
|
}
|
|
}
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
let userLanguage = localStorage.getItem("userLanguage");
|
|
let userLanguageCustomPropValue = '{{current_person.properties.learner_language}}'
|
|
|
|
if (userLanguage === null) {
|
|
userLanguage = "en";
|
|
localStorage.setItem("userLanguage", userLanguage);
|
|
}
|
|
|
|
if (userLanguageCustomPropValue) {
|
|
localStorage.setItem("userLanguage", userLanguageCustomPropValue);
|
|
}
|
|
|
|
document.body.setAttribute("data-lang", userLanguage);
|
|
document.querySelectorAll(".lang-option").forEach(function(button) {
|
|
button.classList.remove("active");
|
|
});
|
|
document.querySelector(`.lang-option[data-lang='${userLanguage}']`).classList.add("active");
|
|
|
|
document.querySelectorAll(".lang-option").forEach(function(button) {
|
|
button.addEventListener("click", function() {
|
|
const selectedLangOption = this.getAttribute("data-lang");
|
|
localStorage.setItem("userLanguage", selectedLangOption);
|
|
|
|
document.querySelectorAll(".lang-option").forEach(function(button) {
|
|
button.classList.remove("active");
|
|
});
|
|
this.classList.add("active");
|
|
document.body.setAttribute("data-lang", selectedLangOption);
|
|
|
|
document.getElementById("loader-overlay").style.display = "flex";
|
|
|
|
fetch("https://webhooks.workato.com/webhooks/rest/3be1030a-8bc7-4063-a6dc-7e529b869613/user-language-handler", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
language: selectedLangOption,
|
|
id: '{{current_person.id}}'
|
|
})
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok ' + response.statusText);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log("Language information sent successfully:", data);
|
|
})
|
|
.catch(error => {
|
|
console.error("Error sending language information:", error);
|
|
});
|
|
|
|
changeElementsText();
|
|
|
|
setTimeout(() => {
|
|
location.reload();
|
|
}, 5000);
|
|
});
|
|
});
|
|
});
|
|
</script>
|