Untitled
unknown
plain_text
2 years ago
10 kB
5
Indexable
(function (w) {
"use strict";
var tag = "cv-22-0", // TO DO: test name
debug = document.cookie.indexOf("cfQA") > -1,
window = typeof unsafeWindow !== "undefined" ? unsafeWindow : w;
const courses = [
{
label: `<div class="${tag}-course-label ${tag}-course-beginner-label">beginner</div>`,
img: 'https://cfactory-img.s3.amazonaws.com/UNY/22.0/cv-22-0-course-one.jpg',
title: 'Develop Interactive User Interfaces in Unity',
desc: 'By the end of this course you will be able to master user interface (UI) components and easily create interactive interfaces, add animation, and optimize UI text objects.',
time: '8 hours',
learnLink: 'https://protraining.unity.com/learn/course/internal/view/elearning/78/develop-interactive-user-interfaces-in-unity-preview'
},
{
label: `<div class="${tag}-course-label ${tag}-course-intermediate-label">Intermediate</div>`,
img: 'https://cfactory-img.s3.amazonaws.com/UNY/22.0/cv-22-0-course-two.jpg',
title: 'DOTS Concepts - Entities, Jobs and Systems',
desc: 'You will learn the basic building blocks of DOTS. You will also learn how to write and execute jobs, which are lightweight and efficient units of work that can be executed in parallel as well as explore systems, which are responsible for orchestrating the behaviour of entities and jobs.',
time: '30 minutes',
learnLink: 'https://protraining.unity.com/learn/course/internal/view/elearning/220/dots-concepts-entities-jobs-and-systems-preview'
},
{
label: `<div class="${tag}-course-label ${tag}-course-intermediate-label">Intermediate</div>`,
img: 'https://cfactory-img.s3.amazonaws.com/UNY/22.0/cv-22-0-course-three.jpg',
title: 'Develop Mobile AR Applications with Unity',
desc: 'Learn how to create AR applications for mobile devices and create an Object Viewer application for your mobile platform of choice. By doing so, you will gain hands-on experience working with AR Foundation, Unity\'s universal solution for AR development.',
time: '25 hours',
learnLink: 'https://protraining.unity.com/learn/course/internal/view/elearning/89/develop-mobile-ar-applications-with-unity-preview'
},
{
label: `<div class="${tag}-course-label ${tag}-course-beginner-label">beginner</div>`,
img: 'https://cfactory-img.s3.amazonaws.com/UNY/22.0/cv-22-0-course-four.jpg',
title: 'Addressable concepts',
desc: 'This course will cover everything you need to know to understand the key aspects of the Unity Addressable Asset system. You will learn about the benefits, advantages and ways in which you can use Addressables to scale and improve your game production pipeline and delivery.',
time: '30 minutes',
learnLink: 'https://protraining.unity.com/learn/course/internal/view/elearning/219/addressables-concepts-preview'
},
{
label: `<div class="${tag}-course-label ${tag}-course-beginner-label">beginner</div>`,
img: 'https://cfactory-img.s3.amazonaws.com/UNY/22.0/cv-22-0-course-five.jpg',
title: 'Shader Graph Fundamentals',
desc: 'In this course, you\'ll learn about the typical workflow to follow when creating shaders, work with Shader Graph nodes, create properties, repurpose shaders, animate noise patterns, apply gradients, animate textures and perform calculations.',
time: '9 hours',
learnLink: 'https://protraining.unity.com/learn/course/internal/view/elearning/107/shader-graph-fundamentals-preview'
},
{
label: `<div class="${tag}-course-label ${tag}-course-beginner-label">beginner</div>`,
img: 'https://cfactory-img.s3.amazonaws.com/UNY/22.0/cv-22-0-course-six.jpg',
title: 'Develop 3D Mobile Games with Unity',
desc: 'In this course, you\'ll quickly get started creating 3D Mobile games in Unity. You will add basic gameplay code, create a game environment, create user interfaces, animate and light characters in a scene, optimize your application and publish for mobile.',
time: '22 hours',
learnLink: 'https://protraining.unity.com/learn/course/internal/view/elearning/90/develop-3d-mobile-games-with-unity-preview'
}
];
window[tag] = {
log: function (msg) {
if (debug) console.log("[CONV]", tag, "-->", msg);
},
waitForElement: function (cssSelector, callback) {
var stop,
elementCached,
timeout,
check = function () {
try {
elementCached = document.querySelector(cssSelector);
if (stop) return;
if (elementCached) {
callback(elementCached);
clearTimeout(timeout);
window[tag].log(cssSelector + " found");
} else {
window.requestAnimationFrame(check);
}
} catch (err) {
window[tag].log(err.message);
}
};
window.requestAnimationFrame(check);
timeout = setTimeout(function () {
stop = true;
window[tag].log(cssSelector + " not found");
}, 5000);
},
init: function () {
try {
this.waitForElement("body", function (docBody) {
docBody.classList.add(tag);
});
if (debug && document.title.indexOf("CONV QA") < 0) {
document.title = "[CONV QA] " + document.title;
}
initVariation();
window[tag].log("test running");
} catch (err) {
window[tag].log(err.message);
}
},
};
window[tag].init();
function initVariation() {
window[tag].waitForElement('#layout-section-57434--2', (el)=>{
const prevSibling = el.parentElement;
prevSibling.insertAdjacentHTML('afterend', generateMarkup());
const wrapper = document.querySelector(`.${tag}-slider`);
window.addEventListener('click', (e) => {
const el = e.target;
if(el.closest(`.${tag}-next-slide`)){
document.querySelector(`.${tag}-active-slide`).classList.remove(`${tag}-active-slide`);
el.closest(`.${tag}-next-slide`).classList.add(`${tag}-active-slide`);
wrapper.style.transform = `translateX(calc(-100% - 30px))`;
}
if(el.closest(`.${tag}-prev-slide`)){
document.querySelector(`.${tag}-active-slide`).classList.remove(`${tag}-active-slide`);
el.closest(`.${tag}-prev-slide`).classList.add(`${tag}-active-slide`);
wrapper.style.transform = `translateX(0px)`;
}
});
let slideIndex = 0;
let timer = setInterval(autoSlide, 50000);
function autoSlide() {
slideIndex++;
if (slideIndex > 1) {
slideIndex = 0;
}
if (slideIndex === 0) {
document.querySelector(`.${tag}-active-slide`).classList.remove(`${tag}-active-slide`);
document.querySelector(`.${tag}-prev-slide`).classList.add(`${tag}-active-slide`);
wrapper.style.transform = 'translateX(0%)';
} else {
document.querySelector(`.${tag}-active-slide`).classList.remove(`${tag}-active-slide`);
document.querySelector(`.${tag}-next-slide`).classList.add(`${tag}-active-slide`);
wrapper.style.transform = 'translateX(calc(-100% - 30px))';
}
}
wrapper.addEventListener('mouseenter', () => {
clearInterval(timer);
});
wrapper.addEventListener('mouseleave', () => {
timer = setInterval(autoSlide, 50000);
});
})
}
function generateMarkup(){
const courseTiles = courses.map(item => {
return `
<div class="${tag}-course-tab">
${item.label}
<div class="${tag}-img">
<img src="${item.img}" alt="">
</div>
<div class="${tag}-inner-tab">
<div class="${tag}-course-title">
${item.title}
</div>
<div class="${tag}-course-desc">
${item.desc}
</div>
<div class="${tag}-course-bottom">
<div class="${tag}-course-time">
${item.time}
</div>
<a href="${item.learnLink}" class="${tag}-learn-cta" target="_blank">
Learn more
</a>
</div>
</div>
</div>
`
}).join("");
return `
<div id="courses" class="${tag}-container container">
<div class="${tag}-heading">
Courses available with On-Demand Training
</div>
<div class="${tag}-sub-row">
<div class="${tag}-intro">
View all available On-Demand Training courses. Make sure you're logged into your Unity account and click on the link below to see course descriptions, detailed course outlines, time durations, and difficulty levels.
</div>
<div class="${tag}-cta">
<a href="https://protraining.unity.com/learn" target="_blank">
See all courses
</a>
</div>
</div>
<div class="${tag}-main-content">
<div class="${tag}-slider">
${courseTiles}
</div>
</div>
<div class="${tag}-slide-nav">
<div class="${tag}-prev-slide ${tag}-active-slide ${tag}-slide-ind"></div>
<div class="${tag}-next-slide ${tag}-slide-ind"></div>
</div>
</div>
`
}
})(window);
Editor is loading...