mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-21 04:26:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Rework AJQuery to $_ to not interfere with jQuery

Browse source
This commit is contained in:
Francis Lavoie 2023-11-19 07:11:21 -05:00
parent babfa3a7c0
commit 36841d57d4
No known key found for this signature in database
GPG key ID: 0F66EE1687682239
13 changed files with 57 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

4
new/includes/examples/custom-ca.md
View file

@ -1,6 +1,6 @@
<script> <script>
document.addEventListener("DOMContentLoaded", (event) => { ready(() => {
window.$('.ex-custom-ca pre.chroma').classList.add('light'); window.$_('.ex-custom-ca pre.chroma').classList.add('light');
}); });
</script> </script>

4
new/includes/examples/file-server.md
View file

@ -1,5 +1,5 @@
<script> <script>
document.addEventListener("DOMContentLoaded", (event) => { ready(() => {
let startElement, endElement; let startElement, endElement;
startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /downloads/* {'); startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /downloads/* {');
@ -25,7 +25,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
endElement = findNextText(startElement, 'browse'); endElement = findNextText(startElement, 'browse');
wrapRangeWithSpan(startElement, endElement, 'rollover-browse rollover-purple'); wrapRangeWithSpan(startElement, endElement, 'rollover-browse rollover-purple');
window.$('.ex-fs pre.chroma').classList.add('light'); window.$_('.ex-fs pre.chroma').classList.add('light');
}); });
</script> </script>

4
new/includes/examples/json-automate-certs.md
View file

@ -1,6 +1,6 @@
<script> <script>
document.addEventListener("DOMContentLoaded", (event) => { ready(() => {
window.$('.ex-json-automate-certs pre.chroma').classList.add('light'); window.$_('.ex-json-automate-certs pre.chroma').classList.add('light');
}); });
</script> </script>

4
new/includes/examples/local-https.md
View file

@ -1,6 +1,6 @@
<script> <script>
document.addEventListener("DOMContentLoaded", (event) => { ready(() => {
window.$('.ex-local-https pre.chroma').classList.add('light'); window.$_('.ex-local-https pre.chroma').classList.add('light');
}); });
</script> </script>

2
new/includes/examples/proxy.md
View file

@ -1,5 +1,5 @@
<script> <script>
document.addEventListener("DOMContentLoaded", (event) => { ready(() => {
let startElement, endElement; let startElement, endElement;
startElement = findWithContent('.ex-proxy pre.chroma code span', 'php_fastcgi'); startElement = findWithContent('.ex-proxy pre.chroma code span', 'php_fastcgi');

4
new/includes/examples/website-caddyfile.md
View file

@ -1,6 +1,6 @@
<script> <script>
document.addEventListener("DOMContentLoaded", (event) => { ready(() => {
window.$('.ex-website-caddyfile pre.chroma').classList.add('light'); window.$_('.ex-website-caddyfile pre.chroma').classList.add('light');
}); });
</script> </script>

2
new/index.html
View file

@ -702,7 +702,7 @@ $ curl localhost:2019/config/ | jq<div class="blinking"></div></code>
</template> </template>
<script> <script>
AsciinemaPlayer.create('/resources/321140.cast', $('#video-demo'), { AsciinemaPlayer.create('/resources/321140.cast', $_('#video-demo'), {
preload: true, preload: true,
autoPlay: true, autoPlay: true,
controls: true controls: true

12
new/resources/js/common.js
View file

@ -1,6 +1,6 @@
// AJQuery: https://github.com/coolaj86/ajquery.js (modified slightly by me) // 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 ((typeof el === 'string' ? $_(el) : el) || document).querySelector(sel); }
function $$(sel, el) { return (el || document).querySelectorAll(sel); } function $$_(sel, el) { return (el || document).querySelectorAll(sel); }
function ready(fn) { function ready(fn) {
if (document.readyState !== 'loading') { 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 (!!!!): // 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 // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#avoiding_documentfragment_pitfall
// I spent way too long on this. // I spent way too long on this.
const elem = $(tplSelector); const elem = $_(tplSelector);
if (!elem) return; if (!elem) return;
return elem.content.firstElementChild.cloneNode(true); return elem.content.firstElementChild.cloneNode(true);
// return document.importNode(elem.content, true); // return document.importNode(elem.content, true);
@ -131,7 +131,7 @@ function setTheme(theme) {
theme = "system"; theme = "system";
} }
localStorage.setItem("theme", theme); localStorage.setItem("theme", theme);
ready(function() { $('#current-theme').innerText = theme; }); ready(function() { $_('#current-theme').innerText = theme; });
let lightOrDarkTheme = theme; let lightOrDarkTheme = theme;
if (lightOrDarkTheme == "system") { if (lightOrDarkTheme == "system") {
lightOrDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light"; 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. // applyTheme simply adds or removes the 'dark' class to the HTML.
function applyTheme(lightOrDark) { function applyTheme(lightOrDark) {
if (lightOrDark == "dark") { if (lightOrDark == "dark") {
$('html').classList.add('dark'); $_('html').classList.add('dark');
} else { } else {
$('html').classList.remove('dark'); $_('html').classList.remove('dark');
} }
} }

14
new/resources/js/docs-home.js
View file

@ -365,9 +365,9 @@ quickAssist = function() {
// show renders the given state into the quick assist box // show renders the given state into the quick assist box
function show(state) { function show(state) {
// reset & show prompt/content // reset & show prompt/content
$('.quick-assist-question').innerHTML = state.prompt || state.title; $_('.quick-assist-question').innerHTML = state.prompt || state.title;
$('.quick-assist-content').innerHTML = state.content || ''; $_('.quick-assist-content').innerHTML = state.content || '';
$('.quick-assist-options').innerHTML = ''; $_('.quick-assist-options').innerHTML = '';
// render options // render options
let hasNext = false; let hasNext = false;
@ -385,7 +385,7 @@ quickAssist = function() {
} else if (opt.href) { } else if (opt.href) {
btn.href = 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'); const reset = document.createElement('a');
reset.classList.add('button', 'reset'); reset.classList.add('button', 'reset');
reset.innerText = "Reset"; reset.innerText = "Reset";
$('.quick-assist-options').append(reset); $_('.quick-assist-options').append(reset);
} }
history.push(state); history.push(state);
@ -429,12 +429,12 @@ quickAssist = function() {
const link = document.createElement('a'); const link = document.createElement('a');
link.innerText = event.target.dataset.breadcrumb || event.target.innerText; link.innerText = event.target.dataset.breadcrumb || event.target.innerText;
link.dataset.index = history.length; link.dataset.index = history.length;
$('.quick-assist-history').append(link); $_('.quick-assist-history').append(link);
show(states[event.target.dataset.next]); show(states[event.target.dataset.next]);
}); });
on('click', '.quick-assist-options a.reset', event => { 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 // when page loads, show the start of the quick assist

22
new/resources/js/docs.js
View file

@ -1,13 +1,13 @@
ready(function() { ready(function() {
// highlight current page in left nav // 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/")) { if (window.location.pathname.startsWith("/docs/json/")) {
// as a special case, highlight the JSON structure link anywhere within it // 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/")) { if (window.location.pathname.startsWith("/docs/modules/")) {
// as another special case, highlight the modules link anywhere within it // 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'); currentPageLink?.classList?.add('current');
@ -16,22 +16,22 @@ ready(function() {
// TODO: support h3 too // TODO: support h3 too
const spacingMS = 50; const spacingMS = 50;
let delay = spacingMS; let delay = spacingMS;
const h2elems = $$('main article h2'); const h2elems = $$_('main article h2');
if (h2elems.length) { if (h2elems.length) {
$('#pagenav .heading').style.display = 'block'; $_('#pagenav .heading').style.display = 'block';
h2elems.forEach(elem => { h2elems.forEach(elem => {
const a = document.createElement('a'); const a = document.createElement('a');
a.innerText = elem.innerText; a.innerText = elem.innerText;
a.href = `#${elem.id}`; a.href = `#${elem.id}`;
setTimeout(function() { setTimeout(function() {
$('#pagenav').append(a); $_('#pagenav').append(a);
}, delay); }, delay);
delay += spacingMS; delay += spacingMS;
}); });
} }
// add anchor links, inspired by https://github.com/bryanbraun/anchorjs // 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'); const anchor = document.createElement('a');
anchor.href = `#${elem.id}`; anchor.href = `#${elem.id}`;
anchor.classList.add('anchor-link'); anchor.classList.add('anchor-link');
@ -40,12 +40,12 @@ ready(function() {
elem.append(anchor); 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 // 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 => { on('mouseover', 'main nav li a:not(#autonav a)', async e => {
// only show the pop-out nav if not on mobile/narrow screen // only show the pop-out nav if not on mobile/narrow screen
if ($('#docs-menu').offsetParent != null) { if ($_('#docs-menu').offsetParent != null) {
return; return;
} }
@ -75,7 +75,7 @@ ready(function() {
autonav.append(a); autonav.append(a);
} }
if ($('#autonav *')) { if ($_('#autonav *')) {
const sections = document.createElement('div') const sections = document.createElement('div')
sections.classList.add('heading'); sections.classList.add('heading');
sections.innerText = 'Sections'; sections.innerText = 'Sections';
@ -92,7 +92,7 @@ ready(function() {
// toggle left-nav when menu link is clicked // toggle left-nav when menu link is clicked
on('click', '#docs-menu', e => { on('click', '#docs-menu', e => {
const nav = $('#docs-menu-container'); const nav = $_('#docs-menu-container');
if (!nav.offsetHeight) { if (!nav.offsetHeight) {
nav.style.height = `${nav.scrollHeight}px`; nav.style.height = `${nav.scrollHeight}px`;
} else { } else {

20
new/resources/js/home.js
View file

@ -6,28 +6,28 @@ const resp = fetch("/resources/testimonials.json").then(async resp => {
for (let i = 0; i < testimonials.length; i++) { for (let i = 0; i < testimonials.length; i++) {
const testimonial = testimonials[i]; const testimonial = testimonials[i];
const tpl = cloneTemplate('#tpl-testimonial'); const tpl = cloneTemplate('#tpl-testimonial');
$('.testimonial-picture', tpl).src = testimonial.picture || ""; $_('.testimonial-picture', tpl).src = testimonial.picture || "";
$('.testimonial-quote', tpl).innerText = `"${testimonial.quote}"`; $_('.testimonial-quote', tpl).innerText = `"${testimonial.quote}"`;
if (testimonial.username) { if (testimonial.username) {
$('.testimonial-name', tpl).innerText = ` @${testimonial.username}`; $_('.testimonial-name', tpl).innerText = ` @${testimonial.username}`;
} else { } 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) { if (testimonial.org) {
$('.testimonial-role', tpl).appendChild(document.createElement("br")); $_('.testimonial-role', tpl).appendChild(document.createElement("br"));
$('.testimonial-role', tpl).appendChild(document.createTextNode(testimonial.org)); $_('.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 => { on('mouseover', '.rollover', e => {
const target = e.target.closest('.rollover') || e.target; 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 => { on('mouseout', '.rollover', e => {
const target = e.target.closest('.rollover') || e.target; 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'));
}); });
}); });
}); });

10
new/resources/js/lib.js
View file

@ -1,6 +1,6 @@
// AJQuery: https://github.com/coolaj86/ajquery.js (modified slightly by me) // 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 ((typeof el === 'string' ? $_(el) : el) || document).querySelector(sel); }
function $$(sel, el) { return (el || document).querySelectorAll(sel); } function $$_(sel, el) { return (el || document).querySelectorAll(sel); }
function ready(fn) { function ready(fn) {
@ -40,7 +40,7 @@ function on(eventName, elemSelector, handler, capture) {
function trigger(el, eventType) { function trigger(el, eventType) {
if (typeof el === 'string') { 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 // 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 (!!!!): // 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 // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#avoiding_documentfragment_pitfall
// I spent way too long on this. // I spent way too long on this.
const elem = $(tplSelector); const elem = $_(tplSelector);
if (!elem) return; if (!elem) return;
return elem.content.firstElementChild.cloneNode(true); return elem.content.firstElementChild.cloneNode(true);
// return document.importNode(elem.content, 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. // isVisible returns true if elem (an element or selector) is visible.
function isVisible(elem) { function isVisible(elem) {
if (typeof elem === 'string') { if (typeof elem === 'string') {
elem = $(elem); elem = $_(elem);
} }
return elem.offsetParent !== null; return elem.offsetParent !== null;
} }

6
new/sponsor.html
View file

@ -640,9 +640,9 @@
// Original hover glowy effect code from here: // Original hover glowy effect code from here:
// https://codepen.io/inescodes/pen/PoxMyvX // https://codepen.io/inescodes/pen/PoxMyvX
const cardsContainer = $(".plans"); const cardsContainer = $_(".plans");
const cards = Array.from($$(".plan")); const cards = Array.from($$_(".plan"));
const overlay = $(".overlay"); const overlay = $_(".overlay");
function applyOverlayMask(e) { function applyOverlayMask(e) {
const overlayEl = e.currentTarget; const overlayEl = e.currentTarget;