From 3dc98f55845446905f426764d371224de8fa8a1c Mon Sep 17 00:00:00 2001 From: darkweak Date: Sun, 15 Oct 2023 13:36:22 +0200 Subject: [PATCH] fix(redesign): JS behavior --- new/download.html | 204 ++++++++++++++++++--------------- new/includes/card.html | 2 +- new/resources/css/download.css | 33 +++++- new/resources/js/download.js | 31 ++++- 4 files changed, 171 insertions(+), 99 deletions(-) diff --git a/new/download.html b/new/download.html index a469ad8..a7851db 100644 --- a/new/download.html +++ b/new/download.html @@ -1,111 +1,131 @@ - - Download Caddy - {{include "/includes/head.html"}} - - - - - - {{include "/includes/header.html" "light-header"}} -
-
-

Download

-
- -
- - -
-
-
+ + Download Caddy + {{include "/includes/head.html"}} + + + + + + + {{include "/includes/header.html" "light-header"}} +
+
+

Download

+
+ +
+ + +
+ +
+
+
+
+
+
+
+
+
+ Download the caddy binary for + +
-
+ +
+ 
+						xcaddy build
+
+ + + + +
-
-
-
- Download generated caddy binary with 3 extra modules or run the command below -
- -
- 
-							xcaddy build
-
- - - - - -
-
-
-
+
+
- {{include "/includes/footer.html"}} - + - document.getElementById('search-package').addEventListener('input', ({ target: { value } }) => { - packageManager.setFilterValue(value.toLowerCase()); - renderList(packageManager.group(groupBy)) - }) - document.getElementById('sort-package').addEventListener('change', ({ target: { value } }) => { - groupBy = value; - renderList(packageManager.group(value)) - }) - - \ No newline at end of file diff --git a/new/includes/card.html b/new/includes/card.html index 5ae6221..c84231a 100644 --- a/new/includes/card.html +++ b/new/includes/card.html @@ -39,7 +39,7 @@

diff --git a/new/resources/css/download.css b/new/resources/css/download.css index 6823e70..67a840d 100644 --- a/new/resources/css/download.css +++ b/new/resources/css/download.css @@ -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 { diff --git a/new/resources/js/download.js b/new/resources/js/download.js index 71941de..4caf6c1 100644 --- a/new/resources/js/download.js +++ b/new/resources/js/download.js @@ -27,12 +27,12 @@ class Package { * @type {ReadonlyArray} */ 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('')}` +} \ No newline at end of file