599 lines
17 KiB
Plaintext
599 lines
17 KiB
Plaintext
<script>
|
|
function showPopup() {
|
|
setTimeout(function() {
|
|
document.querySelector(".popup-trigger").click()
|
|
}, 500)
|
|
}
|
|
|
|
function showSurveyPopup() {
|
|
setTimeout(function() {
|
|
document.querySelector(".survey-popup-trigger").click()
|
|
}, 500)
|
|
}
|
|
|
|
function formatDate(date) {
|
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
const day = date.getDate().toString().padStart(2, '0');
|
|
const year = date.getFullYear();
|
|
|
|
return `${month}/${day}/${year}`;
|
|
}
|
|
|
|
function RerunWorkato() {
|
|
const today = new Date();
|
|
const formattedDate = formatDate(today);
|
|
const data = {
|
|
person_uuid: '{{current_person.id}}',
|
|
date: formattedDate
|
|
}
|
|
|
|
let webhookUrl
|
|
if (schoolID == "804edb32-c300-42f3-82b7-e5d55fcbc2a6") {
|
|
webhookUrl = "https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user-interacted-with-popup"
|
|
} else if (schoolID == "10183441-2254-4b1e-a9f7-9549ca773257") { // live school
|
|
webhookUrl = "https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user-interacted-with-popup-live"
|
|
}
|
|
|
|
if (webhookUrl) {
|
|
fetch(webhookUrl, {
|
|
method: 'post',
|
|
body: JSON.stringify(data)
|
|
}).then(function(response) {
|
|
return response.json();
|
|
}).then(function(data) {
|
|
console.log(res)
|
|
}).catch(error => {
|
|
console.log(error)
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{% assign catalog_courses = courses.in_catalog %}
|
|
{% assign enrolled_courses = courses.enrolled %}
|
|
|
|
{% assign survey_courses = "" %}
|
|
{% assign survey_course_completed = false %}
|
|
{% if current_school.id == "10183441-2254-4b1e-a9f7-9549ca773257" %}
|
|
{% comment %} LIVE SCHOOL {% endcomment %}
|
|
{% assign survey_course = catalog_courses | where: "id", "b3225a47-448d-4988-962a-18d37d6616d0" %}
|
|
{% elsif current_school.id == "804edb32-c300-42f3-82b7-e5d55fcbc2a6" %}
|
|
{% comment %} SANDBOX SCHOOL {% endcomment %}
|
|
{% assign survey_course = catalog_courses | where: "id", "fdc8acdc-0b7c-4064-a52b-1955379d411b" %}
|
|
{% endif %}
|
|
|
|
{% for course in survey_course %}
|
|
{% if course.progress == 100 %}
|
|
{% assign survey_course_completed = true %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% include "header" %}
|
|
<main class="np-main np-homepage">
|
|
<div class="np-homepage-hero">
|
|
<div class="np-homepage-hero-container">
|
|
<div class="np-homepage-hero-content">
|
|
<div class="np-homepage-headline">
|
|
{{ homepage.headline }}
|
|
</div>
|
|
<div class="hero-search-wrapper">
|
|
{% if basic_3p_user %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="np-homepage-subheadline">
|
|
{{ homepage.subheadline }}
|
|
</div>
|
|
<form
|
|
class="np-header-search np-hero-search"
|
|
data-test="mobile-search"
|
|
method="get"
|
|
action="{% route search %}">
|
|
<input
|
|
aria-label="What are you looking for?"
|
|
class="hero-search-input"
|
|
type="text"
|
|
name="q"
|
|
placeholder="What are you looking for?" />
|
|
<i class="np-header-search-icon hero-search-icon far fa-search"></i>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<img
|
|
class="np-homepage-hero-image"
|
|
src="{{ homepage.artwork_url }}"
|
|
alt="{{ homepage.headline }}" />
|
|
</div>
|
|
</div>
|
|
{% include "sub_navigation" %}
|
|
{% endif %}
|
|
<div class="np-homepage-featured np-max-width">
|
|
<div class="row np-flex-center">
|
|
<div class="col-xs-12 col-sm-8">
|
|
{% if basic_3p_user %}
|
|
{% include "homepage_basic_notstarted_courses" items: enrolled_courses %}
|
|
{% include "homepage_inprogress_courses", items: enrolled_courses %}
|
|
{% else %}
|
|
{% include "homepage_featured_courses" items: catalog_courses %}
|
|
{% include "homepage_quicklearn_courses" items: catalog_courses %}
|
|
{% include "homepage_ongoing_training", items: catalog_courses %}
|
|
{% endif %}
|
|
{% include "progress_tracker" %}
|
|
</div>
|
|
{% if basic_3p_user %}
|
|
<div class="col-xs-12 col-sm-3">
|
|
<div id="divGetCertified" class="content-by-product">
|
|
<div class="left-content-title">
|
|
Get Certified
|
|
</div>
|
|
{% include "content_by_certificates" %}
|
|
</div>
|
|
<div style="display: flex;flex-direction: row-reverse;">
|
|
<a id="seemorecertificates" >See more..</a>
|
|
</div>
|
|
{% comment %} <div id="divContentbyProduct" class="content-by-product">
|
|
<div class="left-content-title">
|
|
Content By Topic
|
|
</div>
|
|
{% include "topic_maincategory_leftnav" %}
|
|
</div>
|
|
<div style="display: flex;flex-direction: row-reverse;">
|
|
<a id="seemore" >See more..</a>
|
|
</div> {% endcomment %}
|
|
<div id="divCalender" class="upcomongevents">
|
|
<div class="left-content-title">
|
|
Upcoming Events
|
|
</div>
|
|
{% include "calendar" %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% unless basic_3p_user %}
|
|
{% include "homepage_topics" %}
|
|
{% endunless %}
|
|
|
|
|
|
|
|
{%- comment -%}
|
|
|
|
<button
|
|
type="button"
|
|
class="popup-trigger"
|
|
data-toggle-class-on-target
|
|
data-toggle-target="#firstTimeUsers"
|
|
data-toggle-escape
|
|
data-toggle-modal>
|
|
Click
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="survey-popup-trigger"
|
|
data-toggle-class-on-target
|
|
data-toggle-target="#surveyPopup"
|
|
data-toggle-escape
|
|
data-toggle-modal>
|
|
Click
|
|
</button>
|
|
</main>
|
|
{%- endcomment -%}
|
|
{% include "footer" %}
|
|
|
|
<div
|
|
class="first-time-user-popup"
|
|
id="firstTimeUsers"
|
|
role="dialog"
|
|
aria-labelledby="dialogTitle"
|
|
aria-describedby="dialogContent"
|
|
aria-hidden="true">
|
|
<section class="first-time-user-popup-container">
|
|
<a href="javascript:setPopupSeenProperty('/app/dashboard')"
|
|
class="secondary" data-toggle-trigger-off style="display: block; color:black; padding: 14px 0 0 15px"> <i class="fa fa-times"></i></a>
|
|
<div id="dialogContent" class="first-time-user-popup-content">
|
|
<div class="modal-headline">
|
|
{% if current_person.first_name %}👋 Hi, {{ current_person.first_name }}!{% endif %}
|
|
Welcome to Scintilla Learn! Can we help you get familiar with the site?</div>
|
|
<div class="modal-links">
|
|
<a
|
|
href="javascript:setPopupSeenProperty('/app/dashboard')"
|
|
class="secondary"
|
|
data-toggle-trigger-off>No thanks! I can figure it out.</a>
|
|
|
|
{% if current_school.id == "10183441-2254-4b1e-a9f7-9549ca773257" %}
|
|
{% comment %} LIVE SCHOOL {% endcomment %}
|
|
<a href="javascript:setPopupSeenProperty('https://learn.walmartdataventures.com/c/fabe6410eee0c1fa338f11d854edccada8780b6f')">Sure! Show me around.</a>
|
|
{% elsif current_school.id == "804edb32-c300-42f3-82b7-e5d55fcbc2a6" %}
|
|
{% comment %} SANDBOX SCHOOL {% endcomment %}
|
|
<a href="javascript:setPopupSeenProperty('/app/courses/52f20328-9868-40e5-9ceb-699f6ab2c6ec')" ">Sure! Show me around.</a>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div
|
|
class="survey-popup"
|
|
id="surveyPopup"
|
|
role="dialog"
|
|
aria-labelledby="dialogTitle"
|
|
aria-describedby="dialogContent"
|
|
aria-hidden="true">
|
|
<section class="survey-popup-container">
|
|
<a href="javascript:setPopupSeenProperty('/app/dashboard')"
|
|
class="secondary" data-toggle-trigger-off style="display: block; color: black; padding: 14px 0 0 15px"> <i class="fa fa-times"></i></a>
|
|
<div id="dialogContent" class="survey-popup-content">
|
|
<div class="modal-headline">Help us improve your experience!</div>
|
|
<div class="modal-links">
|
|
{% if current_school.id == "10183441-2254-4b1e-a9f7-9549ca773257" %}
|
|
{% comment %} LIVE SCHOOL {% endcomment %}
|
|
<a href="javascript:setSurveyPopupSeen('/app/courses/b3225a47-448d-4988-962a-18d37d6616d0')">Go!</a>
|
|
{% elsif current_school.id == "804edb32-c300-42f3-82b7-e5d55fcbc2a6" %}
|
|
{% comment %} SANDBOX SCHOOL {% endcomment %}
|
|
<a href="javascript:setSurveyPopupSeen('/app/courses/fdc8acdc-0b7c-4064-a52b-1955379d411b')">Go!</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{% if current_person.signed_in? %}
|
|
{% unless current_person.email contains "+preview" %}
|
|
{% if current_person.properties.first_time_user_popup_seen == false %}
|
|
<script>
|
|
console.log('property is false, check local storage')
|
|
if (localStorage.getItem('modal_clicked') != null) {
|
|
console.log("rerun workflow to set property")
|
|
RerunWorkato()
|
|
} else {
|
|
showPopup()
|
|
}
|
|
</script>
|
|
{% elsif current_person.properties.first_time_user_popup_seen == true %}
|
|
<script>
|
|
console.log("property is set, deleting local storage, don't initialize first modal")
|
|
localStorage.removeItem("modal_clicked")
|
|
</script>
|
|
{% else %}
|
|
<script>
|
|
console.log('custom prop doesnt yet exist')
|
|
if (localStorage.getItem('modal_clicked') != null) {
|
|
console.log("rerun workflow to set property")
|
|
RerunWorkato()
|
|
} else {
|
|
showPopup()
|
|
}
|
|
</script>
|
|
{% endif %}
|
|
{% endunless %}
|
|
{% endif %}
|
|
|
|
<script>
|
|
if (window.location.pathname == "/app") {
|
|
document
|
|
.querySelector(".np-sub-navigation")
|
|
.classList
|
|
.add("homepage-nav")
|
|
document
|
|
.querySelector(".np-header")
|
|
.classList
|
|
.add("homepage-nav")
|
|
}
|
|
|
|
document.querySelector(".np-hidden-desktop .dropdown-arrow").addEventListener("click", function(e) {
|
|
if (e
|
|
.target
|
|
.parentElement
|
|
.classList
|
|
.contains("open")) {
|
|
e
|
|
.target
|
|
.parentElement
|
|
.classList
|
|
.remove("open")
|
|
} else {
|
|
e
|
|
.target
|
|
.parentElement
|
|
.classList
|
|
.add("open")
|
|
}
|
|
})
|
|
|
|
window.onload = function() {
|
|
var stickySubNav = document.querySelector('.np-sub-navigation');
|
|
var headerOffset = findOffset(stickySubNav);
|
|
|
|
window.onscroll = function() {
|
|
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
|
if (bodyScrollTop > (headerOffset.top - 24)) {
|
|
stickySubNav.classList.add('fixed');
|
|
} else {
|
|
stickySubNav.classList.remove('fixed');
|
|
}
|
|
};
|
|
|
|
const firstPopupSeen = {{current_person.properties.first_time_user_popup_seen}}
|
|
|
|
if (firstPopupSeen == true) {
|
|
var popupSeenDate = new Date("{{current_person.properties.first_popup_date}}");
|
|
var popupSeenSeconds = popupSeenDate.getTime() / 1000;
|
|
|
|
var currentDate = new Date();
|
|
var currentDateSeconds = currentDate.getTime() / 1000;
|
|
|
|
if (currentDateSeconds > (popupSeenSeconds + 1209600) && currentDateSeconds) {
|
|
console.log("more than 2 weeks after first popup")
|
|
|
|
const surveyCourseCompleted = {{survey_course_completed}}
|
|
|
|
if (surveyCourseCompleted == false) {
|
|
if (localStorage.getItem("survey_modal_clicked") == null) {
|
|
showSurveyPopup()
|
|
} else {
|
|
const lastClickedDateSeconds = new Date(localStorage.getItem("survey_modal_clicked")).getTime() / 1000
|
|
if (currentDateSeconds > (lastClickedDateSeconds + 1209600) && currentDateSeconds) {
|
|
showSurveyPopup()
|
|
} else {
|
|
console.log(`dont show survey popup again until 2 weeks after ${
|
|
localStorage.getItem("survey_modal_clicked")
|
|
} or course completed`)
|
|
}
|
|
}
|
|
} else {
|
|
localStorage.removeItem("survey_modal_clicked");
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
function findOffset(element) {
|
|
var top = 0,
|
|
left = 0;
|
|
|
|
do {
|
|
top += element.offsetTop || 0;
|
|
left += element.offsetLeft || 0;
|
|
element = element.offsetParent;
|
|
} while (element);
|
|
|
|
return {top: top, left: left};
|
|
}
|
|
|
|
window.addEventListener("load", function() {
|
|
|
|
var progressCards = document.querySelectorAll(".np-card-learning-path-progress");
|
|
|
|
for (var i = 0; i < progressCards.length; i++) {
|
|
var lpProgressCard = progressCards[i]
|
|
var progressRing = lpProgressCard.querySelector(".progress-ring")
|
|
let circle = progressRing.querySelector(".circle-progress")
|
|
let total = progressRing.getAttribute("data-total")
|
|
let numCompleted = lpProgressCard.querySelector(".lp-completed-items span > div").getAttribute("data-completed")
|
|
var radius = circle.r.baseVal.value;
|
|
var circumference = radius * 2 * Math.PI;
|
|
|
|
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
|
circle.style.strokeDashoffset = `${circumference}`;
|
|
|
|
const percent = numCompleted / total
|
|
setProgress(percent, circle)
|
|
}
|
|
|
|
function setProgress(percent, circle) {
|
|
const offset = circumference - percent * circumference;
|
|
circle.style.strokeDashoffset = offset;
|
|
}
|
|
|
|
})
|
|
|
|
function setPopupSeenProperty(redirectUrl) {
|
|
localStorage.setItem("modal_clicked", true);
|
|
const today = new Date();
|
|
const formattedDate = formatDate(today);
|
|
const data = {
|
|
person_uuid: '{{current_person.id}}',
|
|
date: formattedDate
|
|
}
|
|
|
|
const schoolID = '{{current_school.id}}'
|
|
let webhookUrl
|
|
if (schoolID == "804edb32-c300-42f3-82b7-e5d55fcbc2a6") {
|
|
webhookUrl = "https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user-interacted-with-popup"
|
|
} else if (schoolID == "10183441-2254-4b1e-a9f7-9549ca773257") { // live school
|
|
webhookUrl = "https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user-interacted-with-popup-live"
|
|
}
|
|
|
|
if (webhookUrl) {
|
|
fetch(webhookUrl, {
|
|
method: 'post',
|
|
body: JSON.stringify(data)
|
|
}).then(function(response) {
|
|
return response.json();
|
|
}).then(function(data) {
|
|
console.log(res)
|
|
setTimeout(function() {
|
|
window.location.href = redirectUrl;
|
|
}, 250)
|
|
|
|
}).catch(error => {
|
|
console.log(error)
|
|
setTimeout(function() {
|
|
window.location.href = redirectUrl;
|
|
}, 250)
|
|
});
|
|
}
|
|
|
|
|
|
}
|
|
|
|
function setSurveyPopupSeen(redirectUrl) {
|
|
const today = new Date();
|
|
const formattedDate = formatDate(today);
|
|
localStorage.setItem("survey_modal_clicked", formattedDate);
|
|
|
|
setTimeout(function() {
|
|
window.location.href = redirectUrl;
|
|
}, 250)
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.left-content-title {
|
|
font-size: 25px;
|
|
font-weight: 900;
|
|
line-height: 15px;
|
|
margin: 20px 0;
|
|
|
|
}
|
|
.content-by-product {
|
|
height: auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.upcomongevents {
|
|
height: 350px;
|
|
}
|
|
|
|
#seemore:hover, #seemorecertificates:hover {
|
|
cursor: pointer;
|
|
}
|
|
.np-homepage-hero {
|
|
background-color: #3C228A;
|
|
padding: 40px 24px 24px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.np-homepage-hero-image {
|
|
object-fit: unset;
|
|
width: 115px;
|
|
height: auto;
|
|
min-height: unset;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.np-homepage-hero-content {
|
|
position: relative;
|
|
padding: 0;
|
|
color: #fff;
|
|
}
|
|
|
|
.np-homepage-hero .np-homepage-headline {
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
line-height: 33px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.np-homepage-subheadline {
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
margin-bottom: 8px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.np-hero-search {
|
|
width: 100%;
|
|
}
|
|
|
|
.hero-search-input {
|
|
background-color: #F1F3F4;
|
|
border-radius: 4px;
|
|
padding: 14px 19px 14px 44px;
|
|
border: none;
|
|
font-size: 14px;
|
|
line-height: 19px;
|
|
width: 100%;
|
|
background: #fff;
|
|
}
|
|
|
|
.hero-search-icon {
|
|
right: unset;
|
|
left: 16px;
|
|
color: #6C6C6C;
|
|
}
|
|
|
|
.np-homepage-row-wrapper {
|
|
padding: 0 16px;
|
|
margin-bottom: 56px;
|
|
}
|
|
|
|
.np-homepage-featured-empty {
|
|
margin: 0;
|
|
border: 2px solid #dadce0;
|
|
border-radius: 8px;
|
|
padding: 60px 32px;
|
|
}
|
|
|
|
.learning-path-progress-container,
|
|
.learning-path-progress-container > .row {
|
|
height: 100%;
|
|
}
|
|
|
|
.popup-trigger,
|
|
.survey-popup-trigger {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
@media(min-width:768px) {
|
|
.np-homepage-hero-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.np-homepage-hero .np-homepage-headline {
|
|
font-size: 40px;
|
|
line-height: 50px;
|
|
margin-bottom: 20px;
|
|
text-align: left;
|
|
}
|
|
|
|
.np-homepage-hero-image {
|
|
width: 200px;
|
|
height: auto;
|
|
margin: 0 0 0 64px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.hero-search-wrapper {
|
|
display: flex;
|
|
}
|
|
|
|
.np-hero-search {
|
|
margin-left: 32px;
|
|
flex: 2;
|
|
width: 380px;
|
|
}
|
|
}
|
|
|
|
@media(min-width:768px) and (max-width:1365px) {
|
|
.np-homepage-hero .np-homepage-headline {
|
|
font-size: 3.516vw;
|
|
line-height: 4.249vw;
|
|
}
|
|
}
|
|
|
|
@media(min-width:1200px) {
|
|
.np-homepage-hero-image {
|
|
width: 300px;
|
|
margin: 0 0 0 100px;
|
|
}
|
|
}
|
|
|
|
@media(min-width:1366px) {
|
|
|
|
.np-homepage-hero .np-homepage-headline {
|
|
font-size: 48px;
|
|
line-height: 58px;
|
|
}
|
|
}
|
|
</style>
|