Free javascript Hosting


totem.js

Uploaded on Oct 18 2021 23:07 by mateus.badalotti

document.addEventListener('DOMContentLoaded', function () {
var url = new URL(window.location.href);
if (Boolean(localStorage.getItem('isTotem')) || Boolean(url.searchParams.get('isTotem'))) {
localStorage.setItem('isTotem', true);
if (Boolean(url.searchParams.get('isTotem')) != true || url.searchParams.get('utm_source') != 'totem' || url.searchParams.get('utm_medium') != 'totem') {
url.searchParams.set('isTotem', 'true');
url.searchParams.set('utm_source', 'totem');
url.searchParams.set('utm_medium', 'totem');
window.location = url.href;
}
var logoutTimer;
var workingOnElements = false;
var idleSeconds = 0;
const totemFadeIn = function (el, display) {
el.style.opacity = 0;
el.style.display = display || 'block';
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 1)) {
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
};
const totemFadeOut = function (el) {
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .1) < 0) {
el.style.display = 'none';
} else {
requestAnimationFrame(fade);
}
})();
};
const toggleTotemScreenSaver = function () {
let screenSaver = document.getElementById('totem-screen-saver');
if (screenSaver.style.display === 'none') {
if (window.location.pathname !== '/') {
window.location.href = '/';
return;
}
screenSaver.play();
totemFadeIn(screenSaver);
document.querySelector('body').classList.add('totem-no-scroll');
showTotemTooltip();
} else {
screenSaver.pause();
totemFadeOut(screenSaver);
hideTotemToolTip();
document.querySelector('body').classList.remove('totem-no-scroll');
}
};
window.toggleTotemScreenSaver = toggleTotemScreenSaver;
document.onclick = function () {
idleSeconds = 0;
};
document.onmousemove = function () {
idleSeconds = 0;
};
document.ontouchstart = function () {
idleSeconds = 0;
};
document.onkeydown = function () {
idleSeconds = 0;
};
window.addEventListener('scroll', function () {
idleSeconds = 0;
}, true);
document.onmousedown = function () {
idleSeconds = 0;
};
const screenSaverHandler = function () {
idleSeconds++;
if (idleSeconds == 120) {
toggleTotemScreenSaver();
}
};
window.setInterval(screenSaverHandler, 1000);
const hideTotemToolTip = function () {
setTimeout(function () {
document.querySelector('span.tooltip-timer').classList.add('hide-tooltip');
document.querySelectorAll('.timer-spark').forEach(function (el) {
el.classList.add('hide-sparks')
});
}, 6000);
};
const isReact = function () {
return Boolean(document.getElementById('__next'));
};
const checkLinksParameters = function () {
document.querySelectorAll('a[href]:not(.totem-params)').forEach(function (a) {
a.classList.add('totem-params');
let aHref = new URL(a.href);
if (aHref.origin === location.origin) {
aHref.searchParams.set('isTotem', 'true');
aHref.searchParams.set('utm_source', 'totem');
aHref.searchParams.set('utm_medium', 'totem');
a.href = aHref.href;
} else if (aHref.origin == 'https://api.whatsapp.com') {
a.style.display = 'none';
}
});
};
const disableAutocompleteOnInputs = function () {
document.querySelectorAll('input:not(.totem-auto-off)').forEach(function (element) {
element.setAttribute('autocomplete', 'off');
element.classList.add('totem-auto-off');
});
};
document.querySelector('body').addEventListener('DOMSubtreeModified', function () {
if (!workingOnElements) {
workingOnElements = true;
disableAutocompleteOnInputs();
checkLinksParameters();
workingOnElements = false;
}
});
if (isReact()) {
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.attributeName === 'class') {
if (logoutTimer) {
clearInterval(logoutTimer);
}
addTotemTimerAndGoBackButton();
}
});
});
observer.observe(document.querySelector('div.user-nav'), {
attributes: true
});
var pushState = history.pushState;
history.pushState = function () {
pushState.apply(history, arguments);
var currentUrl = new URL(window.location.href);
currentUrl.searchParams.set('isTotem', 'true');
currentUrl.searchParams.set('utm_source', 'totem');
currentUrl.searchParams.set('utm_medium', 'totem');
window.location = currentUrl.href;
};
};
const showTotemTooltip = function () {
document.querySelector('span.tooltip-timer').classList.remove('hide-tooltip');
document.querySelectorAll('.timer-spark').forEach(function (el) {
el.classList.remove('hide-sparks')
});
};
const toggleBackButton = function () {
if (window.location.pathname === '/' || window.location.pathname === '/checkout') {
document.querySelector('a.fixed-buttons-totem.bb').style.display = 'none';
} else {
document.querySelector('a.fixed-buttons-totem.bb').style.display = '';
}
};
const makeRequest = function (method, url, body) {
return new Promise(function (resolve, reject) {
let xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
xhr.send(body);
});
};
const isJson = function (str) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
};
const isUserLoggedAPIATG = async function () {
const dynSessConf = JSON.parse(await makeRequest('GET', '/rest/model/atg/rest/SessionConfirmationActor/getSessionConfirmationNumberAsString'));
const loggedUserProfile = await makeRequest('GET', `/rest/model/lrsa/api/profile/ProfileActor/getProfile?pushSite=rennerBrasilDesktop&reset=true&_dynSessConf=${dynSessConf.sessionConfirmationNumber}`);
if (isJson(loggedUserProfile)) {
const parsed = JSON.parse(loggedUserProfile);
return Boolean(parsed.profile.email);
} else {
return false;
}
};
const logoutAPIATG = async function () {
const dynSessConf = JSON.parse(await makeRequest('GET', '/rest/model/atg/rest/SessionConfirmationActor/getSessionConfirmationNumberAsString'));
await makeRequest('POST', '/rest/model/lrsa/api/profile/ProfileActor/logout?pushSite=rennerBrasilDesktop', JSON.stringify({ clearCookies: true, _dynSessConf: dynSessConf.sessionConfirmationNumber }));
};
document.querySelector('body').insertAdjacentHTML('afterbegin', '<video id="totem-screen-saver" onclick="toggleTotemScreenSaver()" style="z-index: 99999; width: 100vw; position: fixed; display: none" loop muted><source src="https://img.lojasrenner.com.br/banner/videos/Totem_DescansoDeTela.mp4" type="video/mp4"></video>');
const addTotemTimerAndGoBackButton = async function () {
const css = '<style id="totem-css" type="text/css"> .footer-social-content {display: none;} #header .bg_header .wrapper .wrap .wrap_bottom .search .image-search-button { display: none; } .move-fixed-buttons { margin-top: 85px!important; transition: .2s!important; } header .first-content, div.strip_banner_icons, div.image-search-container {display: none !important;} .totem-no-scroll {overflow: hidden} .fixed-buttons-totem { position: fixed; z-index: 999; width: 90px; height: 32px; border-radius: 30px; transition: .2s; display: flex; color: #fff; justify-content: center; align-items: center; font-size: 12px; margin-top: 160px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);}.go-back { left: 32px; background-color: #000;}.go-back::before { content: "\\e91c"; font-family: icomoon; display: inline-block; vertical-align: middle; margin-right: 10px; font-size: 12px; transform: rotate(180deg);}.timer-wrap-toggle { background-color: #000 !important;}.timer-wrap { right: 32px; background-color: #D71920; display: flex; flex-direction: row; align-items: center; font-size: 14px;}.clock { margin-right: 8px; font-size: 20px;}.tooltip-timer { background-color: #fff; border-radius: 8px; position: absolute; right: 110px; color: #000; width: 300px; padding: 8px 16px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); opacity: 1; transition: .5s;}.tooltip-timer::after { content: ""; position: absolute; width: 0; height: 0; right: -14px; top: 35px; box-sizing: border-box; border: 7px solid black; border-color: transparent transparent #fff #fff; transform-origin: 0 0; transform: rotate(225deg); box-shadow: -2px 2px 3px rgb(0, 0, 0, .2);}.hide-tooltip { opacity: 0; transition: .5s;}.hide-sparks { display: none;}@keyframes spark-timer { 0% {right: 58px;} 15% {opacity: 1;} 50% {right: 63px; transform: scale(0) rotate(120deg); opacity: 1;} 100% {right: 63px; transform: scale(0) rotate(120deg); opacity: 1;}}@keyframes spark-timer-2 { 0% {right: 68px;} 15% {opacity: 1;} 50% {right: 73px; transform: scale(0) rotate(120deg); opacity: 1;} 100% {right: 73px; transform: scale(0) rotate(120deg); opacity: 1;}}@keyframes spark-timer-3 { 0% {right: 55px; opacity: 0} 15% {opacity: 1;} 50% {right: 60px; transform: scale(0) rotate(120deg); opacity: 1;} 100% {right: 60px; transform: scale(0) rotate(120deg); opacity: 1;}}.timer-spark { position: absolute; padding: 3px; background-color: #fff; opacity: 0;}.spark_1 { right: 58px; top: 2px; animation-name: spark-timer; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease; animation-delay: .5s;}.spark_2 { right: 68px; top: 13px; animation-name: spark-timer-2; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease; animation-delay: .5s;}.spark_3 { right: 55px; top: 23px; animation-name: spark-timer-3; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease; animation-delay: .7s;} div.fast-promotion.active {display: none} .go-back-react {left: 32px; background-color: #000; font-family: Lato,sans-serif;} .go-back-react::before { content: "\\e903"; font-family: icomoon; display: inline-block; vertical-align: middle; margin-right: 10px; font-size: 12px; transform: rotate(90deg);}</style>';
const body = document.querySelector('body');
if (!document.getElementById('totem-css')) {
document.querySelector('head').insertAdjacentHTML('beforeend', css);
}
document.querySelectorAll('.fixed-buttons-totem').forEach(e => e.remove());
body.insertAdjacentHTML('afterBegin', '<div class="fixed-buttons-totem timer-wrap timer-wrap-toggle"><i class="icon-clock clock ic-time"></i><p class="seconds">1:00</p><span class="tooltip-timer hide-tooltip">Fique de olho! Sua sessão termina após 1 minuto sem interagir com a gente.</span><div class="spark_1 timer-spark hide-sparks"></div><div class="spark_2 timer-spark hide-sparks"></div><div class="spark_3 timer-spark hide-sparks"></div></div>');
isReact() ? body.insertAdjacentHTML('afterBegin', '<a class="fixed-buttons-totem bb" href="javascript: window.history.go(-2);">VOLTAR</a>') : body.insertAdjacentHTML('afterBegin', '<a class="fixed-buttons-totem bb" href="javascript: window.history.go(-1);">VOLTAR</a>');
if (document.querySelectorAll('header#header .bg_header div:nth-child(1)')[0]) {
document.querySelectorAll('header#header .bg_header div:nth-child(1)')[0].style.display = 'none';
}
var backButton = document.querySelector('a.fixed-buttons-totem.bb');
var timerWrap = document.querySelector('div.timer-wrap');
var seconds = document.querySelector('div.fixed-buttons-totem.timer-wrap p.seconds');
isReact() ? backButton.classList.add('go-back-react') : backButton.classList.add('go-back');
toggleBackButton();
var timeLeft = 59;
const resetTimer = function () {
timeLeft = 59;
}
const userIsActiveEvents = function () {
document.addEventListener('mousemove', function () {
resetTimer();
});
document.addEventListener('scroll', function () {
resetTimer();
});
document.addEventListener('keydown', function () {
resetTimer();
});
document.addEventListener('resize', function () {
resetTimer();
});
}
userIsActiveEvents();
const logoutTimeout = async function (interval) {
clearInterval(interval);
await logoutAPIATG();
location.href = '/?isTotem=true&utm_source=totem&utm_medium=totem';
}
document.addEventListener('scroll', function () {
let positionY = window.scrollY;
if (positionY >= 20) {
if (document.querySelector('a.fixed-buttons-totem')) {
document.querySelector('a.fixed-buttons-totem').classList.add('move-fixed-buttons');
}
document.querySelector('div.fixed-buttons-totem').classList.add('move-fixed-buttons');
} else {
if (document.querySelector('a.fixed-buttons-totem')) {
document.querySelector('a.fixed-buttons-totem').classList.remove('move-fixed-buttons');
}
document.querySelector('div.fixed-buttons-totem').classList.remove('move-fixed-buttons');
}
});
const userIsLogged = await isUserLoggedAPIATG();
if (userIsLogged) {
showTotemTooltip();
document.querySelector('span.tooltip-timer').textContent = 'Poxa, sua sessão está quase terminando. Para continuar usando é só tocar na tela.';
hideTotemToolTip();
timerWrap.classList.remove('timer-wrap-toggle');
logoutTimer = setInterval(function () {
if (timeLeft <= 0) {
logoutTimeout(logoutTimer);
} else {
if (timeLeft < 10) {
seconds.innerHTML = '0:0' + timeLeft;
} else {
seconds.innerHTML = '0:' + timeLeft;
}
}
timeLeft -= 1;
}, 1000);
} else {
clearInterval(logoutTimer);
timerWrap.classList.add('timer-wrap-toggle');
seconds.innerHTML = '1:00';
document.querySelector('span.tooltip-timer').textContent = 'Fique de olho! Sua sessão termina após 1 minuto sem interagir com a gente.';
}
};
addTotemTimerAndGoBackButton();
}
});

Back to list