Files
Gainsight/Custom_Templates/customer_templates/Northpass Implementation/_header.html.liquid

354 lines
10 KiB
Plaintext

<script>
document.addEventListener("DOMContentLoaded", function(){
let npLangCookie = getCookie("npLang")
let currentLang = 'en';
if (!npLangCookie) {
setCookie('npLang', 'en', 365)
currentLang = 'en'
} else {
if (npLangCookie == 'es') {
currentLang = 'es'
}
}
console.log("currentLang: ", currentLang)
if (currentLang == 'es') {
document.body.classList.add('lang-es')
$(".nav-item-about").attr('href', 'https://www.northpass.com/')
$(".btn-additional-content").attr('href', "https://www.northpass.com/")
$('.np-footer-support-link').attr('href', 'mailto:support@northpas.com')
$('.np-footer-support-link').text('support@northpass.com')
} else if (currentLang == "en") {
document.body.classList.remove('lang-es')
document.body.classList.add('lang-en')
$('.np-footer-support-link').attr('href', 'mailto:support@northpass.com')
$('.np-footer-support-link').text('support@northpass.com')
}
});
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
}
else
{
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
}
return decodeURI(dc.substring(begin + prefix.length, end));
}
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function setLanguage(lang) {
console.log("setting language as: ", lang)
if (lang == "es") {
setCookie("npLang", "es", 365)
setTimeout(location.reload.bind(location), 700);
} else {
setCookie("npLang", "en", 365)
setTimeout(location.reload.bind(location), 700);
}
}
</script>
<header class="np-header np-header-color" >
<div class="np-header-content">
<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>
{% if current_school.logo_url %}
<h1 class="np-header-logo">
<a href="{% route home %}">
<img
alt="{{ current_school.name }}"
class="np-header-logo-image"
src="{{ current_school.logo_url }}"
/>
</a>
</h1>
{% else %}
<a href="{% route home %}" class="np-school-name np-header-font-color">
{{ current_school.name }}
</a>
{% endif %}
<div class="np-hidden-mobile np-header-desktop-nav">
<ul class="np-header-desktop-nav-list">
{% for website_navigation in navigations.header_navigations_external %}
<li class= "np-header-desktop-nav-item">
<a
href="{{ website_navigation.path }}"
class="np-header-desktop-nav-link np-header-font-color"
target="_blank"
>
{{ website_navigation.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% if current_person.signed_in? %}
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
<form action="{% route search %}" method="get" data-test="desktop-search">
<input
aria-label="{% t .search %}"
class="np-header-search-input np-header-font-background-color"
type="text"
name="q"
placeholder="{% t .search %}"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
</div>
<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
>
<img
alt="{{ current_person.name }}"
class="np-header-avatar-image"
src="{{ current_person.avatar_url }}"
>
</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">
<a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
Default
</a>
{% unless current_school.sso_active? %}
<a
class="np-header-avatar-tooltip-navigation-link"
href="{% route account %}"
>
{% t .profile_settings %}
</a>
{% endunless %}
<a
class="np-header-avatar-tooltip-navigation-link np-danger"
href="{% route logout %}"
>
{% t .sign_out %}
</a>
</nav>
</div>
</div>
{% else %}
<a
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
href="{% route login %}"
>
{% t shared.sign_in %}
</div>
{% 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="np-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 %}
<a
class="np-header-mobile-menu-content-button np-danger"
href="{% route logout %}"
>
{% t .sign_out %}
</a>
</div>
</div>
</div>
{% include "messages" %}
<script>
if (window.location.pathname === "/app") {
const headerTag = document.querySelector(".np-header");
headerTag.classList.add("np-header-absolute");
}
$(".np-header-desktop-nav-link[href='https://change_to_mail.com'").attr("href", "mailto:support@northpass.com")
/*
function buildURL(path) {
const url = "https://academy.getpixel.io" + path + "?first_name={{current_person.first_name}}&last_name={{current_person.last_name}}&email={{current_person.email}}"
window.location.href = url
}
*/
</script>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<style>
.hr.divider {
border-top: 4px solid black;
border-radius: 5px;
opacity: 0.5;
}
.dropbtn {
color: white;
padding: 13px;
font-size: 16px;
border: none;
cursor: pointer;
margin-right: 20px;
border-radius: 5px;
max-height: 44px;
font-weight: 500;
margin-top: 1px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
text-align: center;
display: none;
position: absolute;
background-color: #001e2e;
min-width: 120px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
border-radius: 4px;
font-weight: 500;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, .5);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
.dropdown-content a {
color: white;
opacity: 0.5;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
opacity: 1;
font-weight: 600;
cursor: pointer;
}
.show {display: block;}
</style>