implement js functions for sorting packages

This commit is contained in:
neil 2022-10-21 15:56:04 +08:00
parent cc91e49be2
commit 024cbea4ff
3 changed files with 48 additions and 20 deletions

View file

@ -33,7 +33,7 @@
"maintainer": "pascal",
"thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
"dl_count": 3,
"last_modified": "2022-09-27:39:15.000Z"
"last_modified": "2022-09-27T15:39:15.000Z"
},
{
"name": "h2c",
@ -45,7 +45,7 @@
"maintainer": "h2o",
"thumb_image_url": "/Images/package-thumb-nolabel.jpg",
"dl_count": 4,
"last_modified": "2022-09-25:39:15.000Z"
"last_modified": "2022-09-25T15:39:15.000Z"
},
{
"name": "libmagic",
@ -57,7 +57,7 @@
"maintainer": "",
"thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
"dl_count": 5,
"last_modified": "2022-09-24:39:15.000Z"
"last_modified": "2022-09-24T15:39:15.000Z"
},
{
"name": "deno",
@ -69,7 +69,7 @@
"maintainer": "Ryan Dahl",
"thumb_image_url": "/Images/package-thumb-nolabel2.jpg",
"dl_count": 6,
"last_modified": "2022-09-23:39:15.000Z"
"last_modified": "2022-09-23T15:39:15.000Z"
},
{
"name": "fontconfig",
@ -81,7 +81,7 @@
"maintainer": "Max Miedinger",
"thumb_image_url": "/Images/package-thumb-nolabel.jpg",
"dl_count": 7,
"last_modified": "2022-09-22:39:15.000Z"
"last_modified": "2022-09-22T15:39:15.000Z"
},
{
"name": "pkg-config",
@ -93,7 +93,7 @@
"maintainer": "pascal",
"thumb_image_url": "/Images/package-thumb-nolabel4.jpg",
"dl_count": 8,
"last_modified": "2022-09-21:39:15.000Z"
"last_modified": "2022-09-21T15:39:15.000Z"
},
{
"name": "shared-mime-info",
@ -105,7 +105,7 @@
"maintainer": "Mr.Mime",
"thumb_image_url": "/Images/package-thumb-nolabel3.jpg",
"dl_count": 9,
"last_modified": "2022-09-21:39:15.000Z"
"last_modified": "2022-09-21T15:39:15.000Z"
},
{
"name": "ttfautohint",
@ -117,7 +117,7 @@
"maintainer": "pascal",
"thumb_image_url": "/Images/package-thumb-nolabel.jpg",
"dl_count": 10,
"last_modified": "2022-09-20:39:15.000Z"
"last_modified": "2022-09-20T15:39:15.000Z"
},
{
"name": "numactl",
@ -129,7 +129,7 @@
"maintainer": "FSS",
"thumb_image_url": "/Images/package-thumb-nolabel2.jpg",
"dl_count": 11,
"last_modified": "2022-09-19:39:15.000Z"
"last_modified": "2022-09-19T15:39:15.000Z"
},
{
"name": "flex",
@ -141,6 +141,6 @@
"maintainer": "",
"thumb_image_url": "/Images/package-thumb-nolabel4.jpg",
"dl_count": 12,
"last_modified": "2022-09-18:39:15.000Z"
"last_modified": "2022-09-18T15:39:15.000Z"
}
]

View file

@ -14,7 +14,7 @@
<!-- Start Package Grid -->
<div class="row package-row black-bg g-0">
<div class="package-grid">
<div id="packageGrid" class="package-grid">
{{ range $.Site.Data.packages }}
{{- partial "package-thumbnail.html" .}}
{{ end }}
@ -90,17 +90,46 @@
</style>
<script language="javascript" type="text/javascript">
let sortBy = 'popularity'; // last_modified
let sortDirection = 'desc'; // asc
let limit = 16;
const packages = document.querySelectorAll('.card-thumbnail');
const packagesCount = packages.length;
function refreshDisplayedPackages() {
for(let i = 0; i < packagesCount; i++) {
if (i >= limit) {
packages[i].classList.add('hidden');
} else {
packages[i].classList.remove('hidden');
function sortPackages() {
const packages = document.querySelectorAll('.card-thumbnail');
const packagesArray = Array.from(packages);
const sortedPackages = packagesArray.sort((a, b) => {
if (sortBy === 'popularity') {
const aPop = +a.dataset.popularity;
const bPop = +b.dataset.popularity;
return sortDirection === 'asc' ? aPop-bPop : bPop - aPop;
} else { // last_modified
const aDate = new Date(a.dataset.last_modified);
const bDate = new Date(b.dataset.last_modified);
return sortDirection === 'asc' ? aDate-bDate : bDate - aDate;
}
});
const grid = document.getElementById('packageGrid');
for(const op of packages) {
op.remove();
}
for(const sp of sortedPackages) {
grid.appendChild(sp);
}
refreshDisplayedPackages();
}
function refreshDisplayedPackages() {
const packages = document.querySelectorAll('.card-thumbnail');
let i = 0;
for(const sp of packages) {
if (i >= limit) {
sp.classList.add('hidden');
} else {
sp.classList.remove('hidden');
}
i++;
}
}
@ -113,6 +142,5 @@
loadMoreSection.classList.add('hidden');
}
},false);
refreshDisplayedPackages();
sortPackages();
</script>

View file

@ -1,4 +1,4 @@
<div class="card card-thumbnail" style="width: 100%" popularity="{{- .dl_count -}}" last_modified="{{- .last_modified -}}">
<div class="card card-thumbnail" style="width: 100%" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}">
<figure class="card-img-top" >
<img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
<article class="card-thumb-label">