Skip to content

Commit

Permalink
more fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@penalosa
penalosa committed Jul 24, 2024
1 parent ab05b2c commit ba9c601
Show file tree
Hide file tree
Showing 9 changed files with 196 additions and 198 deletions.
193 changes: 92 additions & 101 deletions assets/events.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export function $focus(elem: HTMLElement, bool: boolean) {
if (SEARCH_ID && SEARCH_ID.test(elem.id)) {
SEARCH_INPUT = elem;

if(!elem.parentElement || !elem.parentElement.parentElement) return;
if (!elem.parentElement || !elem.parentElement.parentElement) return;
elem.parentElement.parentElement.toggleAttribute("is-focused", bool);
elem.setAttribute("aria-expanded", "" + bool);

Expand Down Expand Up @@ -46,7 +46,7 @@ export function load() {
item &&
setInterval(() => {
if (document.readyState !== "complete") return;
if(timer){
if (timer) {
clearInterval(timer);
}
setTimeout(() => {
Expand All @@ -59,7 +59,7 @@ export function load() {
export function mobile() {
let root = document.documentElement;
let btn = document.querySelector(
".DocsMobileTitleHeader--sidebar-toggle-button"
".DocsMobileTitleHeader--sidebar-toggle-button",
);
if (btn)
btn.addEventListener("click", () => {
Expand Down Expand Up @@ -97,63 +97,41 @@ export function focus() {
function $tab(ev: MouseEvent) {
ev.preventDefault();

// Get the tabs for this tab block
const tabBlockId = (ev.target as HTMLElement)
.closest("[data-id]")
?.getAttribute("data-id");
const target = ev.target as HTMLElement;

let tabs = document.querySelectorAll<HTMLElement>(
`div[tab-wrapper-id="${tabBlockId}"] > .tab`
);
const tabsWrapper = target.closest(".tabs-wrapper") as HTMLElement;

for (let i = 0; i < tabs.length; i++) {
tabs[i].style.display = "none";
}
const labels = Array.from(tabsWrapper.querySelectorAll("ul > li > a"));

let link = (ev.target as HTMLElement)
.closest("[data-link]")
?.getAttribute("data-link");
const tabindex = labels.indexOf(target);

// escape ID for use in querySelector
const tabID = CSS.escape(`${link}-${tabBlockId}`);
const linkElement = document.querySelector<HTMLElement>(`#${tabID}`);
if(linkElement){
linkElement.style.display = "block";
let tabs = tabsWrapper.querySelectorAll<HTMLElement>(`.tab`);

for (let i = 0; i < tabs.length; i++) {
tabs[i].style.display = i === tabindex ? "block" : "none";
}
zaraz.track("tab click", {selected_option: (ev.target as HTMLElement).innerText})

zaraz.track("tab click", { selected_option: target.innerText });
}

export function tabs() {
// Find all tab wrappers
let wrappers = document.querySelectorAll(".tabs-wrapper");

addEventListener("DOMContentLoaded", () => {
for (let i = 0; i < wrappers.length; i++) {
const labels = wrappers[i].querySelectorAll<HTMLElement>(".tab-label");
const tabs = wrappers[i].querySelectorAll<HTMLElement>(".tab");
const defaultTab = wrappers[i].querySelector<HTMLElement>(".tab.tab-default");
for (const tabGroup of wrappers) {
const labels = tabGroup.querySelectorAll<HTMLElement>(".tab-label");
const tabs = tabGroup.querySelectorAll<HTMLElement>(".tab");
const defaultTab =
tabGroup.querySelector<HTMLElement>(".tab.tab-default");

const defaultTabIndex = defaultTab
? Array.from(tabs).indexOf(defaultTab)
: 0;

if (tabs.length > 0) {
// if a tab has been specified as default, set that
// as active as opposed to defaulting to the first tab
if (defaultTab) {
// changes an id (i.e tab-js-esm-6f3904f86f90c21d) into just the type (tab-js-esm)
// by removing the last element from the split array and then re-joining it
const parts = defaultTab.id.split("-");
const tabId = parts.slice(0, parts.length - 1).join("-");

const defaultTabLabel = wrappers[i].querySelector(
`a[data-link="${tabId}"]`
);

defaultTab.style.display = "block";
if(defaultTabLabel){
defaultTabLabel.classList.add("active");
}
} else {
tabs[0].style.display = "block";
labels[0].classList.add("active");
}
tabs[defaultTabIndex].style.display = "block";
labels[defaultTabIndex].classList.add("active");

for (let i = 0; i < labels.length; i++)
labels[i].addEventListener("click", $tab);
Expand All @@ -166,13 +144,11 @@ export function activeTab() {
const blocks = document.querySelectorAll(".tab-active");
if (blocks) {
for (const block of blocks) {
const blockId = block.getAttribute("block-id");

var tabs = block.querySelectorAll<HTMLElement>(`.tab-label`);
for (var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", function name() {
let current = block.querySelector(`.active`);
if(current){
if (current) {
current.classList.remove("active");
}
this.classList.add("active");
Expand All @@ -186,7 +162,6 @@ export function dropdowns() {
let attr = "data-expanded";

document.querySelectorAll(".Dropdown").forEach((div) => {

let btn = div.querySelector("button");
let links = div.querySelectorAll<HTMLAnchorElement>("li>a");
let focused = 0; // index
Expand Down Expand Up @@ -254,28 +229,34 @@ export function dropdowns() {
}

export function zarazTrackDocEvents() {
const links = document.querySelectorAll<HTMLAnchorElement>(".DocsMarkdown--link");
const dropdowns = document.querySelectorAll("details")
const glossaryTooltips = document.querySelectorAll(".glossary-tooltip")
const playgroundLinks = document.querySelectorAll<HTMLAnchorElement>(".playground-link")
const copyCodeBlockButtons = document.querySelectorAll(".copyCode-button")
const links = document.querySelectorAll<HTMLAnchorElement>(
".DocsMarkdown--link",
);
const dropdowns = document.querySelectorAll("details");
const glossaryTooltips = document.querySelectorAll(".glossary-tooltip");
const playgroundLinks =
document.querySelectorAll<HTMLAnchorElement>(".playground-link");
const copyCodeBlockButtons = document.querySelectorAll(".copyCode-button");
addEventListener("DOMContentLoaded", () => {
if (links.length > 0) {
for (const link of links) {
const linkURL = new URL(link.href)
const cfSubdomainRegex = new RegExp(`^[^.]+?\.cloudflare\.com`)
const linkURL = new URL(link.href);
const cfSubdomainRegex = new RegExp(`^[^.]+?\.cloudflare\.com`);
if (linkURL.hostname !== "developers.cloudflare.com") {
if (linkURL.hostname === "workers.cloudflare.com" && linkURL.pathname.startsWith("/playground#")) {
if (
linkURL.hostname === "workers.cloudflare.com" &&
linkURL.pathname.startsWith("/playground#")
) {
link.addEventListener("click", () => {
$zarazLinkEvent('playground link click', link);
$zarazLinkEvent("playground link click", link);
});
} else if (cfSubdomainRegex.test(linkURL.hostname)) {
link.addEventListener("click", () => {
$zarazLinkEvent('Cross Domain Click', link);
$zarazLinkEvent("Cross Domain Click", link);
});
} else {
link.addEventListener("click", () => {
$zarazLinkEvent('external link click', link);
$zarazLinkEvent("external link click", link);
});
}
}
Expand All @@ -286,76 +267,86 @@ export function zarazTrackDocEvents() {
dropdown.addEventListener("click", () => {
$zarazDropdownEvent(dropdown.querySelectorAll("summary")[0]);
});
}
}
}
if (glossaryTooltips.length > 0) {
for (const tooltip of glossaryTooltips) {
tooltip.addEventListener("pointerleave", () => {
$zarazGlossaryTooltipEvent(tooltip.getAttribute('aria-label'))
});
tooltip.addEventListener("blur", () => {
$zarazGlossaryTooltipEvent(tooltip.getAttribute('aria-label'))
});
}
}
if (playgroundLinks.length > 0) {
for (const playgroundLink of playgroundLinks) {
playgroundLink.addEventListener("click", () => {
$zarazLinkEvent('playground link click', playgroundLink);
});
}
}
if (copyCodeBlockButtons.length > 0) {
for (const copyButton of copyCodeBlockButtons) {
copyButton.addEventListener("click", () => {
const codeBlockElement = copyButton?.parentElement?.parentElement?.firstElementChild;
zaraz.track('copy button link click', {
title: codeBlockElement?.getAttribute('title') ?? 'title not set',
language: codeBlockElement?.getAttribute('language') ?? 'language not set',});
});
if (glossaryTooltips.length > 0) {
for (const tooltip of glossaryTooltips) {
tooltip.addEventListener("pointerleave", () => {
$zarazGlossaryTooltipEvent(tooltip.getAttribute("aria-label"));
});
tooltip.addEventListener("blur", () => {
$zarazGlossaryTooltipEvent(tooltip.getAttribute("aria-label"));
});
}
}
if (playgroundLinks.length > 0) {
for (const playgroundLink of playgroundLinks) {
playgroundLink.addEventListener("click", () => {
$zarazLinkEvent("playground link click", playgroundLink);
});
}
}
if (copyCodeBlockButtons.length > 0) {
for (const copyButton of copyCodeBlockButtons) {
copyButton.addEventListener("click", () => {
const codeBlockElement =
copyButton?.parentElement?.parentElement?.firstElementChild;
zaraz.track("copy button link click", {
title: codeBlockElement?.getAttribute("title") ?? "title not set",
language:
codeBlockElement?.getAttribute("language") ?? "language not set",
});
});
}
}
}
});
}

function $zarazLinkEvent(type: string, link: HTMLAnchorElement) {
zaraz.track(type, {href: link.href, hostname: link.hostname})
zaraz.track(type, { href: link.href, hostname: link.hostname });
}

function $zarazDropdownEvent(summary: HTMLElement) {
zaraz.track('dropdown click', {text: summary.innerText})
zaraz.track("dropdown click", { text: summary.innerText });
}

function $zarazGlossaryTooltipEvent(term: string | null) {
zaraz.track('glossary tooltip view', {term: term})
zaraz.track("glossary tooltip view", { term: term });
}

export function zarazTrackHomepageLinks() {
const links = document.querySelectorAll<HTMLAnchorElement>(".DocsMarkdown--link");
const playgroundLinks = document.querySelectorAll<HTMLAnchorElement>(".playground-link")
const copyCodeBlockButtons = document.querySelectorAll<HTMLButtonElement>(".copyCode-button")
const links = document.querySelectorAll<HTMLAnchorElement>(
".DocsMarkdown--link",
);
const playgroundLinks =
document.querySelectorAll<HTMLAnchorElement>(".playground-link");
const copyCodeBlockButtons =
document.querySelectorAll<HTMLButtonElement>(".copyCode-button");
addEventListener("DOMContentLoaded", () => {
if (links.length > 0) {
for (const link of links) {
link.addEventListener("click", () => {
zaraz.track('homepage link click', {href: link.href})
zaraz.track("homepage link click", { href: link.href });
});
}
}
if (playgroundLinks.length > 0) {
for (const playgroundLink of playgroundLinks) {
playgroundLink.addEventListener("click", () => {
$zarazLinkEvent('playground link click', playgroundLink);
$zarazLinkEvent("playground link click", playgroundLink);
});
}
}
}
if (copyCodeBlockButtons.length > 0) {
for (const copyButton of copyCodeBlockButtons) {
copyButton.addEventListener("click", () => {
const codeBlockElement = copyButton?.parentElement?.parentElement?.firstElementChild;
zaraz.track('copy button link click', {
title: codeBlockElement?.getAttribute('title') ?? 'title not set',
language: codeBlockElement?.getAttribute('language') ?? 'language not set',});
const codeBlockElement =
copyButton?.parentElement?.parentElement?.firstElementChild;
zaraz.track("copy button link click", {
title: codeBlockElement?.getAttribute("title") ?? "title not set",
language:
codeBlockElement?.getAttribute("language") ?? "language not set",
});
});
}
}
Expand Down
Loading

0 comments on commit ba9c601

Please sign in to comment.