Apps and Browser Extensions
We detect your platform to show the right downloads—no guesswork, just the apps you need.
Contact - ${name} <${email}>
Browser - ${parsedUA_data.browser.name} ${parsedUA_data.browser.version}
Operating System - ${userInfo.os.name} ${userInfo.os.version}
Device - ${userInfo.device.brand} ${userInfo.device.model} ${userInfo.device.type}
Order Number - ${ord_num}
Contact - ${name} <${email}>
Browser - ${parsedUA_data.browser.name} ${parsedUA_data.browser.version}
Operating System - ${userInfo.os.name} ${userInfo.os.version}
Device - ${userInfo.device.brand} ${userInfo.device.model} ${userInfo.device.type}
Contact - ${name}
Browser - ${parsedUA_data.browser.name} ${parsedUA_data.browser.version}
Operating System - ${userInfo.os.name} ${userInfo.os.version}
Device - ${userInfo.device.brand} ${userInfo.device.model} ${userInfo.device.type}
Order Number - ${ord_num}
Contact - ${name}
Browser - ${parsedUA_data.browser.name} ${parsedUA_data.browser.version}
Operating System - ${userInfo.os.name} ${userInfo.os.version}
Device - ${userInfo.device.brand} ${userInfo.device.model} ${userInfo.device.type}
`
);
} else {
document.getElementById(`inner_${category}`).insertAdjacentHTML(
"beforeend",
`
`
);
}
}).then(() => {
// addtnl_reqrmnts();
set_cat_animation();
if (category == "Orders") {
document.getElementById(`inner_${category}`).addEventListener('change', function() {
let sub_cat = $(`#inner_${category}`).val();
$(`#inner_${category}`).trigger("change");
if (sub_cat == "Placing a New Order") {
order_sel = false;
clearOrderNumber();
} else {
order_sel = true;
request_order_num();
}
});
} else {
order_sel = false;
clearOrderNumber();
}
}).catch((err) => console.log(err));
}
// **************************************
//This chunk of code is to dynamically display fill drop downs based on the categories selected
// **************************************
// **************************************
// Fill in the folders when a category is selected
// **************************************
function fetchData() {
// @Rishi Why are you using asyncCallback with only 1 function?
//@seva I just copied the code from categoryhandler() below. Yeah it makes no sense lol. Will change
axios.get("/api/support/categories").then(response => {
console.log(response.data);
response.data.forEach(function(category) {
idMap[category.name] = category.id;
console.log("contents of idMap");
console.log(idMap);
});
}).catch(console.error);
}
$("#category").change(function() {
//fetch for data and populate idMap field
fetchData();
console.log("entering change function");
fill_folders([], $(this).find("option:selected").attr("id"));
});
if (location.search) {
state = queryString.parse(location.search);
console.log(state);
}
console.log("state: " + JSON.stringify(state));
window.history.replaceState(state, "", location.pathname + location.search);
navFromState();
});
function pushState(breadcrumb, options) {
$noResults.hide();
console.log("New Breadcrumb: " + JSON.stringify(breadcrumb));
if (breadcrumb.text || nameMap[breadcrumb.id]) {
breadcrumbs.push(breadcrumb);
}
console.log("Breadcrumbs: " + JSON.stringify(breadcrumbs));
generateBreadcrumbsAndTitle();
if (breadcrumb.id) {
state[breadcrumb.type] = breadcrumb.id;
} else {
delete state[breadcrumb.type];
}
console.log("state: " + JSON.stringify(state));
if (options.pushHistory) {
window.history.pushState(
state,
"",
location.pathname + "?" + queryString.stringify(state)
);
} else if (options.replaceState) {
window.history.replaceState(
state,
"",
location.pathname + "?" + queryString.stringify(state)
);
}
}
window.onpopstate = function(event) {
console.log("Previous State: " + JSON.stringify(state));
console.log("New State from onpopstate: " + JSON.stringify(event.state));
console.log(nameMap);
state = event.state || {};
breadcrumbs = [];
generateBreadcrumbsAndTitle();
navFromState();
};
function generateBreadcrumbsAndTitle() {
ui.clearBreadcrumbs();
// We start at breadcrumbs.length - 2 because we know that the last
// breadcrumb in the list will never be interactive.
// Be default, breadcrumbClick is a noop
let breadcrumbClick = function() {};
for (let i = breadcrumbs.length - 2; i >= 0; i--) {
if (!breadcrumbs[i].onclick) {
if (breadcrumbs[i].interactive) {
breadcrumbClick = function() {
console.log(
"Clicked Crumb #" +
i +
" " +
JSON.stringify(breadcrumbs[i])
);
// Pop off all crumbs that are after the clicked crumb
for (let j = breadcrumbs.length - 1; j > i; j--) {
delete state[breadcrumbs.pop().type];
}
// Pop off the clicked crumb as well, it will get
// added back in the navFromBreadcrumb function.
navFromBreadcrumb(breadcrumbs.pop());
};
}
breadcrumbs[i].onclick = breadcrumbClick;
}
}
for (let i = 0; i < breadcrumbs.length - 1; i++) {
let breadcrumb = breadcrumbs[i];
if (breadcrumb.interactive) {
createBreadcrumb(breadcrumb);
}
}
// Unique logic for last breadcrumb in list
//if the last breadcrumb is an article don't set it's title
if (breadcrumbs.length) {
$breadcrumbHome.show();
let lastCrumb = breadcrumbs[breadcrumbs.length - 1];
console.log(lastCrumb.type);
//this should be missing as well
if (lastCrumb.type == "c" || lastCrumb.type == "f") {
if (breadcrumbs.length > 1 || !state.a) {
createBreadcrumb(lastCrumb);
}
}
ui.setTitle(lastCrumb.text || nameMap[lastCrumb.id]);
}
}
function createBreadcrumb(breadcrumb) {
ui.createBreadcrumb(
breadcrumb.text || nameMap[breadcrumb.id],
breadcrumb.onclick
);
}
function navFromBreadcrumb(breadcrumb) {
return {
c: categoryHandler,
f: folderHandler,
a: articleHandler,
q: queryHandler,
} [breadcrumb.type](breadcrumb.id, {
pushHistory: true,
fade: true,
});
}
function navFromState() {
let shouldQueryNames = false;
["c", "f", "a"].forEach(function(type) {
let id = state[type];
if (id && !nameMap[id]) {
shouldQueryNames = true;
}
});
if (shouldQueryNames) {
queryNames().then(function(response) {
if (response && response.data) {
console.log(
"Got new names for state: " + JSON.stringify(response.data)
);
//support form prepop
Object.keys(response.data).forEach(function(type) {
idMap[response.data[type]] = state[type];
nameMap[state[type]] = response.data[type];
});
//missed in merge
let cat = null;
let sub_cat = null;
if (Object.keys(response.data).length >= 1) {
cat = response.data.c;
if (response.data.f) {
sub_cat = response.data.f;
}
}
function category_prepop() {
if (cat != null) {
$("#category").val(cat).trigger("change");
}
setTimeout(subcat_prepop, 1000);
}
function subcat_prepop() {
if (sub_cat != null) {
console.log(`inner_${cat}`);
console.log("inside subcat_prepop");
// document.getElementById(`inner_${cat}`).value = sub_cat;
$(`#inner_${cat}`).val(sub_cat).trigger("change");
if (cat == "Orders") {
if (sub_cat == "Placing a New Order") {
order_sel = false;
clearOrderNumber();
} else {
order_sel = true;
request_order_num();
}
}
}
}
category_prepop();
}
processNavFromState();
//till here ^
});
} else {
processNavFromState();
}
}
function processNavFromState() {
if (state.a) {
if (state.q) {
$search.val(state.q);
pushStateFromQuery(state.q, {
pushHistory: false,
});
} else {
pushStateFromState("c");
pushStateFromState("f");
}
articleHandler(state.a, {
pushHistory: false,
});
} else if (state.q) {
$search.val(state.q);
queryHandler(state.q, {
fade: true,
});
} else {
$search.val("");
if (state.f) {
pushStateFromState("c");
folderHandler(state.f, {
pushHistory: false,
});
} else if (state.c) {
categoryHandler(state.c, {
pushHistory: false,
});
} else {
displayCategories();
}
}
}
function pushStateFromState(type) {
let id = state[type];
if (id && nameMap[id]) {
pushState({
type: type,
id: id,
interactive: true,
}, {
pushHistory: false,
});
}
}
function pushStateFromQuery(query, options) {
pushState({
type: "q",
id: query,
text: 'Search Results for "' + query + '"',
interactive: true,
}, options);
}
function queryHandler(query, options) {
if (query) {
options = options || {};
let asyncFunctions = [function(callback) {
queryArticles(query).then(callback);
}];
if (options.fade) {
asyncFunctions.push(function(callback) {
ui.fade(0, callback);
});
}
utils.asyncCallback(asyncFunctions, function(response) {
breadcrumbs = [];
pushStateFromQuery(query, {
pushHistory: options.pushHistory || !state.q,
replaceState: options.replaceState,
});
ui.clear();
if (response && response.data && response.data.length) {
response.data.forEach(function(article) {
processArticle(JSON.parse(article.json), false, {
pushHistory: true,
});
});
} else {
$noResults.show();
ui.fade(1);
}
});
} // else do nothing
}
function displayCategories() {
utils.asyncCallback([
function(callback) {
ui.fade(0, callback);
},
function(callback) {
axios.get("/api/support/categories").then(callback).catch(console.error);
},
], function(response) {
console.log(response.data);
$breadcrumbHome.hide();
ui.hideBreadCrumbs();
$noResults.hide();
ui.clear();
ui.setTitle("Everykey Support");
response.data.forEach(function(category) {
nameMap[category.id] = category.name;
idMap[category.name] = category.id;
console.log("contents of idMap");
console.log(idMap);
ui.renderBlock(category.name, function() {
categoryClick(category.id);
});
window.scrollTo(window.scrollX, 0);
});
ui.fade(1);
});
}
function categoryClick(id) {
let catName = nameMap[id];
$("#category").val(catName).trigger("change");
//this doesnt merge as well
categoryHandler(id, {
pushHistory: true,
});
}
function categoryHandler(id, options) {
options = options || {};
utils.asyncCallback([
function(callback) {
ui.fade(0, callback);
},
function(callback) {
getFolders(id).then(callback);
},
], function(response) {
pushState({
type: "c",
id: id,
interactive: true,
}, options);
ui.clear();
response.data.forEach(function(folder) {
nameMap[folder.id] = folder.name;
idMap[folder.name] = folder.id;
ui.renderBlock(folder.name, function() {
folderClick(folder.id);
});
window.scrollTo(window.scrollX, 0);
});
ui.fade(1);
});
}
function folderClick(id) {
//this should show up as well
let foldName = nameMap[id];
console.log(foldName);
console.log(state.c);
console.log(state);
let catN = nameMap[state.c];
console.log(catN);
//condense this code later
$(`#inner_${catN}`).val(foldName).trigger("change");
if (catN == "Orders") {
if (foldName == "Placing a New Order") {
order_sel = false;
clearOrderNumber();
} else {
order_sel = true;
request_order_num();
}
//^
}
folderHandler(id, {
pushHistory: true,
});
}
function folderHandler(id, options) {
options = options || {};
utils.asyncCallback([
function(callback) {
ui.fade(0, callback);
},
function(callback) {
getArticles(id).then(callback);
},
], function(response) {
ui.clear();
if (response.data.length === 1) {
pushState({
type: "f",
id: id,
//these must be true
interactive: true,
}, {
pushHistory: true,
});
processArticle(response.data[0], true, options);
} else {
pushState({
type: "f",
id: id,
interactive: true,
}, options);
response.data.forEach(function(article) {
processArticle(article, false, options);
});
}
});
}
function articleHandler(id, options) {
utils.asyncCallback([function(callback) {
ui.fade(0, callback);
},
function(callback) {
getArticle(id).then(callback);
},
], function(response) {
ui.clear();
processArticle(response.data, true, options);
});
}
function processArticle(article, single, options) {
options = options || {};
console.log(article);
nameMap[article.id] = article.title;
// Sometimes JSON keys are flattened and contained in top level of article object
let redirectData = (function(descriptionText) {
try {
return JSON.parse(descriptionText);
} catch (exception) {
return;
}
})(article.description_text || article.json.description_text);
if (redirectData) {
if (redirectData.a) {
// redirect from one article to another, simplest case.
// query for the other article and put its data into the
// article view instead of the article we currently have.
processSingle(article.title, single, function() {
articleHandler(redirectData.a, options);
});
} else if (redirectData.f) {
// redirect from article to folder (list of articles)
// query the articles and we make a single list entry which
// once clicked will act as if a folder was clicked rather
// than opening a new article.
processSingle(article.title, single, function() {
folderHandler(redirectData.f, options);
});
} else if (redirectData.c) {
// redirect from article to category (list of folders)
// since folders can not redirect, we simply create a list
// entry that once clicked will open the category view.
// if the article is alone in the folder, immediately open
// the category view
processSingle(article.title, single, function() {
categoryHandler(redirectData.c, options);
});
} else {
console.error("Cannot Redirect to " + JSON.stringify(redirectData));
}
} else {
// Not a redirect, proceed to default rendering
let description = article.description || article.json.description;
let tags = article.tags || article.json.tags;
if (single) {
pushState({
type: "a",
id: article.id,
interactive: false,
}, options);
ui.renderArticle(description);
window.scrollTo(window.scrollX, 0);
ui.fade(1);
} else if (tags.indexOf("hidden_article") === -1) {
// Hidden articles can still be rendered when navigated to directly
ui.renderList(article.title, function() {
ui.fade(0, function() {
pushState({
type: "a",
id: article.id,
interactive: false,
}, options);
ui.clear();
ui.renderArticle(description);
window.scrollTo(window.scrollX, 0);
ui.fade(1);
});
});
window.scrollTo(window.scrollX, 0);
ui.fade(1);
} else {
console.log("HIDE ARTICLE FROM LIST!");
console.log(article);
}
}
}
// Render a list view with given data unless single is true in
// which case do not render, just trigger callback immediately
function processSingle(title, single, callback) {
if (single) {
callback();
} else {
ui.renderList(title, function() {
callback();
});
window.scrollTo(window.scrollX, 0);
}
}
function getArticles(id) {
return axios.get("/api/support/articles?id=" + id).catch(console.error);
}
function getArticle(id) {
return axios.get("/api/support/article?id=" + id).catch(console.error);
}
function getFolders(id) {
return axios.get("/api/support/folders?id=" + id).catch(console.error);
}
function queryArticles(query) {
return axios.get("/api/support/search?q=" + query).catch(console.error);
}
function queryNames() {
return axios.post("/api/support/names", {
state: state,
}).catch(console.error);
}
const $ = require('jquery');
const utils = require('../utils/common');
const $content = $('#content');
const $title = $("#title");
const breadcrumbs = document.getElementById("breadcrumbs");
const revealer = document.getElementById("support-info-revealer");
let currOpacity = $content.css("opacity");
module.exports = {
clear: function() {
$content.html("");
},
fade: function(opacity, callback) {
console.log(currOpacity + " -> " + opacity);
if (currOpacity != opacity) {
currOpacity = opacity;
$content.add($title).fadeTo(250, opacity, utils.callbackOnce(callback));
} else {
console.log("DONT FADE, ALREADY AT STATE");
callback && callback();
}
},
renderBlock: function(title, onclick) {
$title.removeClass("small");
//this isn't merged too
revealer.innerText = "Contact Us";
let button = document.createElement("button");
button.setAttribute("class", "button category");
button.innerText = title;
button.addEventListener("click", onclick);
$content.append(button);
},
renderList: function(title, onclick) {
$title.removeClass("small");
revealer.innerText = "Contact Us";
let button = document.createElement("button");
button.setAttribute("class", "button article");
button.innerText = title;
button.addEventListener("click", onclick);
$content.append(button);
},
renderArticle: function(articleHTML) {
$title.addClass("small");
revealer.innerText = "Contact Us";
$content.html(articleHTML);
},
hideBreadCrumbs: function() {
breadcrumbs.style.display = "none";
},
clearBreadcrumbs: function() {
breadcrumbs.innerHTML = "";
},
createBreadcrumb: function(text, onclick) {
breadcrumbs.style.display = "inline";
let a = document.createElement("a");
a.innerText = text;
a.onclick = onclick;
let li = document.createElement("li");
li.append(a);
breadcrumbs.append(li);
},
setTitle: function(title) {
$title.text(title);
}
};