From 36841d57d4a7282bcb666e2803a4693c4b9dfa6f Mon Sep 17 00:00:00 2001
From: Francis Lavoie <lavofr@gmail.com>
Date: Sun, 19 Nov 2023 07:11:21 -0500
Subject: [PATCH] Rework AJQuery to $_ to not interfere with jQuery

---
 new/includes/examples/custom-ca.md           |  4 ++--
 new/includes/examples/file-server.md         |  4 ++--
 new/includes/examples/json-automate-certs.md |  4 ++--
 new/includes/examples/local-https.md         |  4 ++--
 new/includes/examples/proxy.md               |  2 +-
 new/includes/examples/website-caddyfile.md   |  4 ++--
 new/index.html                               |  2 +-
 new/resources/js/common.js                   | 12 +++++-----
 new/resources/js/docs-home.js                | 16 ++++++-------
 new/resources/js/docs.js                     | 24 ++++++++++----------
 new/resources/js/home.js                     | 20 ++++++++--------
 new/resources/js/lib.js                      | 12 +++++-----
 new/sponsor.html                             |  6 ++---
 13 files changed, 57 insertions(+), 57 deletions(-)

diff --git a/new/includes/examples/custom-ca.md b/new/includes/examples/custom-ca.md
index 4c139c3..5118714 100644
--- a/new/includes/examples/custom-ca.md
+++ b/new/includes/examples/custom-ca.md
@@ -1,6 +1,6 @@
 <script>
-document.addEventListener("DOMContentLoaded", (event) => {
-	window.$('.ex-custom-ca pre.chroma').classList.add('light');
+ready(() => {
+	window.$_('.ex-custom-ca pre.chroma').classList.add('light');
 });
 </script>
 
diff --git a/new/includes/examples/file-server.md b/new/includes/examples/file-server.md
index f12836b..b490a0c 100644
--- a/new/includes/examples/file-server.md
+++ b/new/includes/examples/file-server.md
@@ -1,5 +1,5 @@
 <script>
-document.addEventListener("DOMContentLoaded", (event) => {
+ready(() => {
 	let startElement, endElement;
 
 	startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /downloads/* {');
@@ -25,7 +25,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
 	endElement = findNextText(startElement, 'browse');
 	wrapRangeWithSpan(startElement, endElement, 'rollover-browse rollover-purple');
 
-	window.$('.ex-fs pre.chroma').classList.add('light');
+	window.$_('.ex-fs pre.chroma').classList.add('light');
 });
 </script>
 
diff --git a/new/includes/examples/json-automate-certs.md b/new/includes/examples/json-automate-certs.md
index e4786f7..3512dbc 100644
--- a/new/includes/examples/json-automate-certs.md
+++ b/new/includes/examples/json-automate-certs.md
@@ -1,6 +1,6 @@
 <script>
-document.addEventListener("DOMContentLoaded", (event) => {
-	window.$('.ex-json-automate-certs pre.chroma').classList.add('light');
+ready(() => {
+	window.$_('.ex-json-automate-certs pre.chroma').classList.add('light');
 });
 </script>
 
diff --git a/new/includes/examples/local-https.md b/new/includes/examples/local-https.md
index a3dd713..7a5ad6f 100644
--- a/new/includes/examples/local-https.md
+++ b/new/includes/examples/local-https.md
@@ -1,6 +1,6 @@
 <script>
-document.addEventListener("DOMContentLoaded", (event) => {
-	window.$('.ex-local-https pre.chroma').classList.add('light');
+ready(() => {
+	window.$_('.ex-local-https pre.chroma').classList.add('light');
 });
 </script>
 
diff --git a/new/includes/examples/proxy.md b/new/includes/examples/proxy.md
index 9f6b035..dbac84b 100644
--- a/new/includes/examples/proxy.md
+++ b/new/includes/examples/proxy.md
@@ -1,5 +1,5 @@
 <script>
-document.addEventListener("DOMContentLoaded", (event) => {
+ready(() => {
 	let startElement, endElement;
 
 	startElement = findWithContent('.ex-proxy pre.chroma code span', 'php_fastcgi');
diff --git a/new/includes/examples/website-caddyfile.md b/new/includes/examples/website-caddyfile.md
index 966a878..fd4831c 100644
--- a/new/includes/examples/website-caddyfile.md
+++ b/new/includes/examples/website-caddyfile.md
@@ -1,6 +1,6 @@
 <script>
-document.addEventListener("DOMContentLoaded", (event) => {
-	window.$('.ex-website-caddyfile pre.chroma').classList.add('light');
+ready(() => {
+	window.$_('.ex-website-caddyfile pre.chroma').classList.add('light');
 });
 </script>
 
diff --git a/new/index.html b/new/index.html
index ab82483..5584ff7 100644
--- a/new/index.html
+++ b/new/index.html
@@ -702,7 +702,7 @@ $ curl localhost:2019/config/ | jq<div class="blinking"></div></code>
 		</template>
 
 		<script>
-			AsciinemaPlayer.create('/resources/321140.cast', $('#video-demo'), {
+			AsciinemaPlayer.create('/resources/321140.cast', $_('#video-demo'), {
 				preload: true,
 				autoPlay: true,
 				controls: true
diff --git a/new/resources/js/common.js b/new/resources/js/common.js
index f5fcc7c..0f39b8d 100644
--- a/new/resources/js/common.js
+++ b/new/resources/js/common.js
@@ -1,6 +1,6 @@
 // AJQuery: https://github.com/coolaj86/ajquery.js (modified slightly by me)
-function $(sel, el) { return ((typeof el === 'string' ? $(el) : el) || document).querySelector(sel); }
-function $$(sel, el) { return (el || document).querySelectorAll(sel); }
+function $_(sel, el) { return ((typeof el === 'string' ? $_(el) : el) || document).querySelector(sel); }
+function $$_(sel, el) { return (el || document).querySelectorAll(sel); }
 
 function ready(fn) {
 	if (document.readyState !== 'loading') {
@@ -43,7 +43,7 @@ function cloneTemplate(tplSelector) {
 	// Ohhhhhh wow, we need to use firstElementChild when cloning the content of a template tag (!!!!):
 	// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#avoiding_documentfragment_pitfall
 	// I spent way too long on this.
-	const elem = $(tplSelector);
+	const elem = $_(tplSelector);
 	if (!elem) return;
 	return elem.content.firstElementChild.cloneNode(true);
 	// return document.importNode(elem.content, true);
@@ -131,7 +131,7 @@ function setTheme(theme) {
 		theme = "system";
 	}
 	localStorage.setItem("theme", theme);
-	ready(function() { $('#current-theme').innerText = theme; });
+	ready(function() { $_('#current-theme').innerText = theme; });
 	let lightOrDarkTheme = theme;
 	if (lightOrDarkTheme == "system") {
 		lightOrDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";	
@@ -142,9 +142,9 @@ function setTheme(theme) {
 // applyTheme simply adds or removes the 'dark' class to the HTML.
 function applyTheme(lightOrDark) {
 	if (lightOrDark == "dark") {
-		$('html').classList.add('dark');
+		$_('html').classList.add('dark');
 	} else {
-		$('html').classList.remove('dark');
+		$_('html').classList.remove('dark');
 	}
 }
 
diff --git a/new/resources/js/docs-home.js b/new/resources/js/docs-home.js
index 1478055..54c4428 100644
--- a/new/resources/js/docs-home.js
+++ b/new/resources/js/docs-home.js
@@ -365,9 +365,9 @@ quickAssist = function() {
 	// show renders the given state into the quick assist box
 	function show(state) {
 		// reset & show prompt/content
-		$('.quick-assist-question').innerHTML = state.prompt || state.title;
-		$('.quick-assist-content').innerHTML = state.content || '';
-		$('.quick-assist-options').innerHTML = '';
+		$_('.quick-assist-question').innerHTML = state.prompt || state.title;
+		$_('.quick-assist-content').innerHTML = state.content || '';
+		$_('.quick-assist-options').innerHTML = '';
 
 		// render options
 		let hasNext = false;
@@ -385,7 +385,7 @@ quickAssist = function() {
 				} else if (opt.href) {
 					btn.href = opt.href;
 				}
-				$('.quick-assist-options').append(btn);
+				$_('.quick-assist-options').append(btn);
 			}
 		}
 
@@ -395,7 +395,7 @@ quickAssist = function() {
 			const reset = document.createElement('a');
 			reset.classList.add('button', 'reset');
 			reset.innerText = "Reset";
-			$('.quick-assist-options').append(reset);
+			$_('.quick-assist-options').append(reset);
 		}
 
 		history.push(state);
@@ -429,12 +429,12 @@ quickAssist = function() {
 		const link = document.createElement('a');
 		link.innerText = event.target.dataset.breadcrumb || event.target.innerText;
 		link.dataset.index = history.length;
-		$('.quick-assist-history').append(link);
+		$_('.quick-assist-history').append(link);
 		show(states[event.target.dataset.next]);
 	});
 
 	on('click', '.quick-assist-options a.reset', event => {
-		$('.quick-assist-history a:first-child').dispatchEvent(new Event('click', { bubbles: true }));
+		$_('.quick-assist-history a:first-child').dispatchEvent(new Event('click', { bubbles: true }));
 	})
 
 	// when page loads, show the start of the quick assist
@@ -445,4 +445,4 @@ quickAssist = function() {
 
 ready(() => {
 	quickAssist();
-});
\ No newline at end of file
+});
diff --git a/new/resources/js/docs.js b/new/resources/js/docs.js
index 64c3087..39094db 100644
--- a/new/resources/js/docs.js
+++ b/new/resources/js/docs.js
@@ -1,13 +1,13 @@
 ready(function() {
 	// highlight current page in left nav
-	let currentPageLink = $('main nav a[href="'+window.location.pathname+'"]');
+	let currentPageLink = $_('main nav a[href="'+window.location.pathname+'"]');
 	if (window.location.pathname.startsWith("/docs/json/")) {
 		// as a special case, highlight the JSON structure link anywhere within it
-		currentPageLink = $('main nav a[href="/docs/json/"]');
+		currentPageLink = $_('main nav a[href="/docs/json/"]');
 	}
 	if (window.location.pathname.startsWith("/docs/modules/")) {
 		// as another special case, highlight the modules link anywhere within it
-		currentPageLink = $('main nav a[href="/docs/modules/"]');
+		currentPageLink = $_('main nav a[href="/docs/modules/"]');
 	}
 	currentPageLink?.classList?.add('current');
 
@@ -16,22 +16,22 @@ ready(function() {
 	// TODO: support h3 too
 	const spacingMS = 50;
 	let delay = spacingMS;
-	const h2elems = $$('main article h2');
+	const h2elems = $$_('main article h2');
 	if (h2elems.length) {
-		$('#pagenav .heading').style.display = 'block';
+		$_('#pagenav .heading').style.display = 'block';
 		h2elems.forEach(elem => {
 			const a = document.createElement('a');
 			a.innerText = elem.innerText;
 			a.href = `#${elem.id}`;
 			setTimeout(function() {
-				$('#pagenav').append(a);
+				$_('#pagenav').append(a);
 			}, delay);
 			delay += spacingMS;
 		});
 	}
 
 	// add anchor links, inspired by https://github.com/bryanbraun/anchorjs
-	$$('article > h2[id], article > h3[id], article > h4[id], article > h5[id], article > h6[id]').forEach(function(elem) {
+	$$_('article > h2[id], article > h3[id], article > h4[id], article > h5[id], article > h6[id]').forEach(function(elem) {
 		const anchor = document.createElement('a');
 		anchor.href = `#${elem.id}`;
 		anchor.classList.add('anchor-link');
@@ -40,12 +40,12 @@ ready(function() {
 		elem.append(anchor);
 	});
 
-	const autonav = $('#autonav');
+	const autonav = $_('#autonav');
 
 	// when a left-side-nav-link is hovered, show the in-page nav in a popout to the side
 	on('mouseover', 'main nav li a:not(#autonav a)', async e => {
 		// only show the pop-out nav if not on mobile/narrow screen
-		if ($('#docs-menu').offsetParent != null) {
+		if ($_('#docs-menu').offsetParent != null) {
 			return;
 		}
 
@@ -75,7 +75,7 @@ ready(function() {
 			autonav.append(a);
 		}
 		
-		if ($('#autonav *')) {
+		if ($_('#autonav *')) {
 			const sections = document.createElement('div')
 			sections.classList.add('heading');
 			sections.innerText = 'Sections';
@@ -92,7 +92,7 @@ ready(function() {
 
 // toggle left-nav when menu link is clicked
 on('click', '#docs-menu', e => {
-	const nav = $('#docs-menu-container');
+	const nav = $_('#docs-menu-container');
 	if (!nav.offsetHeight) {
 		nav.style.height = `${nav.scrollHeight}px`;
 	} else {
@@ -102,4 +102,4 @@ on('click', '#docs-menu', e => {
 
 function anchorID(text) {
 	return text.trim().toLowerCase().replace(/\s/g, '-').replace(/[^\w-]/g, '');
-}
\ No newline at end of file
+}
diff --git a/new/resources/js/home.js b/new/resources/js/home.js
index 031374a..0c40f09 100644
--- a/new/resources/js/home.js
+++ b/new/resources/js/home.js
@@ -6,28 +6,28 @@ const resp = fetch("/resources/testimonials.json").then(async resp => {
 		for (let i = 0; i < testimonials.length; i++) {
 			const testimonial = testimonials[i];
 			const tpl = cloneTemplate('#tpl-testimonial');
-			$('.testimonial-picture', tpl).src = testimonial.picture || "";
-			$('.testimonial-quote', tpl).innerText = `"${testimonial.quote}"`;
+			$_('.testimonial-picture', tpl).src = testimonial.picture || "";
+			$_('.testimonial-quote', tpl).innerText = `"${testimonial.quote}"`;
 			if (testimonial.username) {
-				$('.testimonial-name', tpl).innerText = ` @${testimonial.username}`;
+				$_('.testimonial-name', tpl).innerText = ` @${testimonial.username}`;
 			} else {
-				$('.testimonial-name', tpl).innerText = testimonial.name || "";
+				$_('.testimonial-name', tpl).innerText = testimonial.name || "";
 			}
-			$('.testimonial-role', tpl).innerText = testimonial.role || "";
+			$_('.testimonial-role', tpl).innerText = testimonial.role || "";
 			if (testimonial.org) {
-				$('.testimonial-role', tpl).appendChild(document.createElement("br"));
-				$('.testimonial-role', tpl).appendChild(document.createTextNode(testimonial.org));
+				$_('.testimonial-role', tpl).appendChild(document.createElement("br"));
+				$_('.testimonial-role', tpl).appendChild(document.createTextNode(testimonial.org));
 			}
-			$(`.testimonial-col:nth-child(${i%3 + 1})`).append(tpl);
+			$_(`.testimonial-col:nth-child(${i%3 + 1})`).append(tpl);
 		}
 
 		on('mouseover', '.rollover', e => {
 			const target =  e.target.closest('.rollover') || e.target;
-			$$(`.${target.dataset.rollover}`).forEach(elem => elem.classList.add('show'));
+			$$_(`.${target.dataset.rollover}`).forEach(elem => elem.classList.add('show'));
 		});
 		on('mouseout', '.rollover', e => {
 			const target =  e.target.closest('.rollover') || e.target;
-			$$(`.${target.dataset.rollover}`).forEach(elem => elem.classList.remove('show'));
+			$$_(`.${target.dataset.rollover}`).forEach(elem => elem.classList.remove('show'));
 		});
 	});
 });
diff --git a/new/resources/js/lib.js b/new/resources/js/lib.js
index 03a04ed..26659fa 100644
--- a/new/resources/js/lib.js
+++ b/new/resources/js/lib.js
@@ -1,6 +1,6 @@
 // AJQuery: https://github.com/coolaj86/ajquery.js (modified slightly by me)
-function $(sel, el) { return ((typeof el === 'string' ? $(el) : el) || document).querySelector(sel); }
-function $$(sel, el) { return (el || document).querySelectorAll(sel); }
+function $_(sel, el) { return ((typeof el === 'string' ? $_(el) : el) || document).querySelector(sel); }
+function $$_(sel, el) { return (el || document).querySelectorAll(sel); }
 
 
 function ready(fn) {
@@ -40,7 +40,7 @@ function on(eventName, elemSelector, handler, capture) {
 
 function trigger(el, eventType) {
 	if (typeof el === 'string') {
-		el = $(el); // assume it was a selector, for convenience
+		el = $_(el); // assume it was a selector, for convenience
 	}
 
 	// from youmightnotneedjquery.com
@@ -60,7 +60,7 @@ function cloneTemplate(tplSelector) {
 	// Ohhhhhh wow, we need to use firstElementChild when cloning the content of a template tag (!!!!):
 	// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#avoiding_documentfragment_pitfall
 	// I spent way too long on this.
-	const elem = $(tplSelector);
+	const elem = $_(tplSelector);
 	if (!elem) return;
 	return elem.content.firstElementChild.cloneNode(true);
 	// return document.importNode(elem.content, true);
@@ -69,7 +69,7 @@ function cloneTemplate(tplSelector) {
 // isVisible returns true if elem (an element or selector) is visible.
 function isVisible(elem) {
 	if (typeof elem === 'string') {
-		elem = $(elem);
+		elem = $_(elem);
 	}
 	return elem.offsetParent !== null;
 }
@@ -79,4 +79,4 @@ function queryParam(name) {
 	const urlSearchParams = new URLSearchParams(window.location.search);
 	const params = Object.fromEntries(urlSearchParams.entries());
 	return params[name];
-}
\ No newline at end of file
+}
diff --git a/new/sponsor.html b/new/sponsor.html
index 79dc848..b298077 100644
--- a/new/sponsor.html
+++ b/new/sponsor.html
@@ -640,9 +640,9 @@
 // Original hover glowy effect code from here:
 // https://codepen.io/inescodes/pen/PoxMyvX
 
-const cardsContainer = $(".plans");
-const cards = Array.from($$(".plan"));
-const overlay = $(".overlay");
+const cardsContainer = $_(".plans");
+const cards = Array.from($$_(".plan"));
+const overlay = $_(".overlay");
 
 function applyOverlayMask(e) {
 	const overlayEl = e.currentTarget;