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

fix(redesign): JS behavior

Browse source
This commit is contained in:
darkweak 2023-10-15 13:36:22 +02:00 • committed by Francis Lavoie
parent d201a427d1
commit 3dc98f5584
No known key found for this signature in database
GPG key ID: C5204D4F28147FC8
4 changed files with 171 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

33
new/resources/css/download.css
View file

@ -46,6 +46,13 @@ html {
top: 0;
}
#platform {
width: unset;
min-height: unset;
height: unset;
line-height: unset;
}
#packages {
width: 100%;
padding-top: 32px;
@ -67,10 +74,29 @@ html {
padding: 1rem;
}
#download>div {
border: var(--border-download);
background-color: var(--body-bg);
border-radius: var(--radius);
padding: 1rem;
}
#downloader>button {
margin: 0 auto;
min-width: fit-content;
white-space: nowrap;
font-size: 80%;
font-weight: bold;
}
#downloader {
padding-bottom: 8px;
}
#command {
border-radius: var(--radius);
border: 1px solid var(--button-border-color);
padding: 0.75rem;
padding: 0.5rem 0.75rem;
display: inline-flex;
width: 100%;
}
@ -80,6 +106,11 @@ html {
overflow-x: scroll;
display: inline-flex;
white-space: nowrap;
font-size: 1rem;
}
#command>svg {
height: 1em;
}
#command-builder::before {

31
new/resources/js/download.js
View file

@ -27,12 +27,12 @@ class Package {
* @type {ReadonlyArray<Pkg>}
*/
packages = [];
/**
* @type {string}
*/
filter = '';
/**
* @returns Promise<>
*/
@ -50,7 +50,7 @@ class Package {
if (!this.filter) {
return pkgs;
}
return pkgs.filter(pkg => pkg.name.includes(this.filter) || pkg.repo.includes(this.filter) || pkg.description.includes(this.filter));
}
@ -63,9 +63,9 @@ class Package {
const pkgs = this.getSearchPackages(this.packages);
switch (groupBy) {
case 'alphabetically':
return pkgs.sort((a,b) => a.name.localeCompare(b.name));
return pkgs.sort((a, b) => a.name.localeCompare(b.name));
case 'download':
return pkgs.sort((a,b) => b.downloads - a.downloads);
return pkgs.sort((a, b) => b.downloads - a.downloads);
case 'type':
return pkgs.reduce((acc, current) => {
if (!current?.modules?.length) {
@ -118,3 +118,24 @@ class Package {
}
const packageManager = new Package();
let packages = [];
function togglePackage({ target: { dataset: { module } } }) {
const element = document.getElementById('packages').querySelector(`button[data-module="${module}"]`);
if (packages.includes(module)) {
packages = packages.filter(p => p !== module);
if (!packages.length) {
modulesCount.innerHTML = '';
} else {
modulesCount.innerHTML = `with ${packages.length} extra module${packages.length > 1 ? 's' : ''}`;
}
element.innerHTML = "Add this module";
} else {
packages.push(module);
element.innerHTML = "Remove this module";
modulesCount.innerHTML = `with ${packages.length} extra module${packages.length > 1 ? 's' : ''}`;
}
document.getElementById('command-builder').innerText = `xcaddy build${packages.map(p => ` --with ${p}`).join('')}`
}