146 lines
4.7 KiB
JavaScript
146 lines
4.7 KiB
JavaScript
// Store the host value for the current page
|
|
currentPageHost = window.location.href.match(/^(?:[^\/]*\/){2}[^\/]+/g)[0]
|
|
|
|
// Define v3-wayfinding elements
|
|
var wayfindingModal = document.getElementById('v3-wayfinding-modal');
|
|
var wayfindingClose = document.getElementById('v3-wayfinding-close');
|
|
var wayfindingStay = document.getElementById('v3-wayfinding-stay');
|
|
var wayfindingSwitch = document.getElementById('v3-wayfinding-switch');
|
|
var wayfindingOptOut = document.getElementById('v3-wayfinding-opt-out');
|
|
var wayfindingOptOutInput = document.getElementById('v3-wayfinding-opt-out-input');
|
|
var wayfindingFindOutToggle = document.getElementById('find-out-toggle');
|
|
var wayfindingFindOutInstructions = document.getElementById('find-out-instructions');
|
|
|
|
/**
|
|
* Builds a referrer whitelist array that includes the current page host and all
|
|
* values from the cloudUrls array defined in layouts/partials/footer/javascript.html
|
|
*/
|
|
var referrerWhitelist = cloudUrls.concat(currentPageHost);
|
|
|
|
// v3-wayfinding preference cookie name
|
|
var wayfindingPrefCookie = 'influx-iox-show-wayfinding'
|
|
|
|
// Toggle the v3-wayfinding modal
|
|
function toggleWayfinding() {
|
|
wayfindingModal.classList.toggle("open");
|
|
}
|
|
|
|
// Toggle wayfinding modal preference cookie
|
|
function toggleWayfindingPreference() {
|
|
if (Cookies.get(wayfindingPrefCookie) === 'true') {
|
|
Cookies.set(wayfindingPrefCookie, 'false')
|
|
} else {
|
|
Cookies.set(wayfindingPrefCookie, 'true')
|
|
}
|
|
}
|
|
|
|
// Define the slideDown and slideUp animations
|
|
function slideDown(elem) {
|
|
elem.style.height = `${elem.scrollHeight}px`;
|
|
elem.style.opacity = 1;
|
|
}
|
|
|
|
function slideUp(elem) {
|
|
elem.style.height = 0;
|
|
elem.style.opacity = 0;
|
|
}
|
|
|
|
/**
|
|
* Check to see if the v3-wayfinding modal should be opened:
|
|
* - Is the user coming from a non-whitelisted external referrer?
|
|
* - Has the user opted out of the wayfinding modal?
|
|
*/
|
|
function shouldOpenWayfinding() {
|
|
var isExternalReferrer = !referrerWhitelist.includes(referrerHost);
|
|
var wayfindingOptedOut = Cookies.get(wayfindingPrefCookie) !== 'false';
|
|
|
|
// Only return true if all conditions are true
|
|
return isExternalReferrer && wayfindingOptedOut;
|
|
}
|
|
|
|
/**
|
|
* Function that checks the wayfindingPrefCookie and sets the state of the
|
|
* wayfinding checkbox input.
|
|
*/
|
|
function setWayfindingInputState() {
|
|
var currentPreference = Cookies.get(wayfindingPrefCookie);
|
|
|
|
if (currentPreference === 'false') {
|
|
wayfindingOptOutInput.checked = true;
|
|
}
|
|
}
|
|
|
|
function submitWayfindingData(engine, action) {
|
|
|
|
const pageData = {
|
|
host: location.hostname,
|
|
path: location.pathname,
|
|
referrer: (document.referrer === '') ? 'direct' : document.referrer,
|
|
}
|
|
|
|
// Build lp using page data and engine data
|
|
const lp = `ioxwayfinding,host=${pageData.host},path=${pageData.path},referrer=${pageData.referrer},engine=${engine} action="${action}"`
|
|
|
|
// Send the wayfinding data
|
|
xhr = new XMLHttpRequest();
|
|
xhr.open('POST', 'https://j32dswat7l.execute-api.us-east-1.amazonaws.com/prod/wayfinding');
|
|
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
|
|
xhr.setRequestHeader('Access-Control-Allow-Origin', `${location.protocol}//${location.host}`);
|
|
xhr.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
|
|
xhr.setRequestHeader('Accept', 'application/json');
|
|
xhr.send(lp);
|
|
|
|
return false;
|
|
}
|
|
|
|
// When the user clicks on the stay button, close modal, submit data, and stay on the page.
|
|
wayfindingStay.onclick = function(event) {
|
|
var engine = wayfindingStay.dataset.engine;
|
|
var action = 'stay';
|
|
|
|
event.preventDefault();
|
|
submitWayfindingData(engine, action)
|
|
toggleWayfinding();
|
|
}
|
|
|
|
// When the user clicks on the switch button, submit data and follow link.
|
|
wayfindingSwitch.onclick = function(event) {
|
|
var engine = wayfindingSwitch.dataset.engine;
|
|
var action = 'switch';
|
|
|
|
submitWayfindingData(engine, action)
|
|
}
|
|
|
|
// When the user clicks on the "X" wayfinding close element, close the modal
|
|
wayfindingClose.onclick = function(event) {
|
|
toggleWayfinding();
|
|
}
|
|
|
|
wayfindingOptOut.onclick = function(event) {
|
|
toggleWayfindingPreference();
|
|
}
|
|
|
|
// Toggle instructions for finding out which storage engine you're using
|
|
wayfindingFindOutToggle.onclick = function(event) {
|
|
event.preventDefault();
|
|
if (wayfindingFindOutInstructions.classList.contains('open')) {
|
|
slideUp(wayfindingFindOutInstructions);
|
|
wayfindingFindOutInstructions.classList.remove('open');
|
|
} else {
|
|
slideDown(wayfindingFindOutInstructions);
|
|
wayfindingFindOutInstructions.classList.add('open');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Check to see if the referrer is in the referrer whitelist, otherwise trigger
|
|
* the v3-wayfinding modal.
|
|
* This reuses the referrerHost variable defined in assets/js/influxdb-url.js
|
|
*/
|
|
if (shouldOpenWayfinding()) {
|
|
toggleWayfinding();
|
|
}
|
|
|
|
// Set the state of the show wayfinding input checkbox
|
|
setWayfindingInputState();
|